From c53edb2fecb0eea5e7e836a786102fe298f7e341 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 15 Apr 2025 14:19:59 +0200
Subject: [PATCH] feat: search page header update

---
 .../FeatureToggleFilters/LifecycleFilters.tsx |  18 ++-
 .../FeatureToggleListTable.tsx                | 134 ++++++++++--------
 2 files changed, 92 insertions(+), 60 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx
index ddc5517009..75afdb2995 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx
@@ -2,6 +2,8 @@ import { Box, Chip, styled } from '@mui/material';
 import type { FC } from 'react';
 import type { FilterItemParamHolder } from '../../../filter/Filters/Filters';
 import type { LifecycleStage } from '../../FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage';
+import { useNavigate } from 'react-router-dom';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledChip = styled(Chip, {
     shouldForwardProp: (prop) => prop !== 'isActive',
@@ -34,7 +36,7 @@ const Wrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
-    padding: theme.spacing(2, 3, 0, 3),
+    padding: theme.spacing(0, 3),
 }));
 
 const lifecycleOptions: {
@@ -52,6 +54,8 @@ export const LifecycleFilters: FC<ILifecycleFiltersProps> = ({
     onChange,
     total,
 }) => {
+    const navigate = useNavigate();
+    const { trackEvent } = usePlausibleTracker();
     const current = state.lifecycle?.values ?? [];
 
     return (
@@ -86,6 +90,18 @@ export const LifecycleFilters: FC<ILifecycleFiltersProps> = ({
                     />
                 );
             })}
+            <StyledChip
+                label='Archived'
+                variant='outlined'
+                onClick={() => {
+                    navigate('/archive');
+                    trackEvent('search-feature-buttons', {
+                        props: {
+                            action: 'archive',
+                        },
+                    });
+                }}
+            />
         </Wrapper>
     );
 };
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 7102623da2..b687ddcc43 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -399,76 +399,92 @@ export const FeatureToggleListTable: FC = () => {
         <PageContent
             disableLoading={true}
             bodyClass='no-padding'
+            disableBorder={flagsReleaseManagementUIEnabled}
             header={
-                <PageHeader
-                    title='Search'
-                    actions={
-                        <>
-                            <ConditionallyRender
-                                condition={!isSmallScreen}
-                                show={
-                                    <>
-                                        <Search
-                                            placeholder='Search'
-                                            expandable
-                                            initialValue={
-                                                tableState.query || ''
-                                            }
-                                            onChange={setSearchValue}
-                                            id='globalFeatureFlags'
-                                        />
-                                        <PageHeader.Divider />
-                                    </>
-                                }
-                            />
-                            <Link
-                                component={RouterLink}
-                                to='/archive'
-                                underline='always'
-                                sx={{ marginRight: 2, ...focusable(theme) }}
-                                onClick={() => {
-                                    trackEvent('search-feature-buttons', {
-                                        props: {
-                                            action: 'archive',
-                                        },
-                                    });
-                                }}
-                            >
-                                View archive
-                            </Link>
-                            {flagsReleaseManagementUIEnabled ? (
-                                <ExportFlags
-                                    onClick={() => setShowExportDialog(true)}
+                !flagsReleaseManagementUIEnabled ? (
+                    <PageHeader
+                        title={'Search'}
+                        actions={
+                            <>
+                                <ConditionallyRender
+                                    condition={!isSmallScreen}
+                                    show={
+                                        <>
+                                            <Search
+                                                placeholder='Search'
+                                                expandable
+                                                initialValue={
+                                                    tableState.query || ''
+                                                }
+                                                onChange={setSearchValue}
+                                                id='globalFeatureFlags'
+                                            />
+                                            <PageHeader.Divider />
+                                        </>
+                                    }
                                 />
-                            ) : (
+                                <Link
+                                    component={RouterLink}
+                                    to='/archive'
+                                    underline='always'
+                                    sx={{ marginRight: 2, ...focusable(theme) }}
+                                    onClick={() => {
+                                        trackEvent('search-feature-buttons', {
+                                            props: {
+                                                action: 'archive',
+                                            },
+                                        });
+                                    }}
+                                >
+                                    View archive
+                                </Link>
                                 <FeatureToggleListActions
                                     onExportClick={() =>
                                         setShowExportDialog(true)
                                     }
                                 />
-                            )}
-                        </>
-                    }
-                >
-                    <ConditionallyRender
-                        condition={isSmallScreen}
-                        show={
-                            <Search
-                                initialValue={tableState.query || ''}
-                                onChange={setSearchValue}
-                                id='globalFeatureFlags'
-                            />
+                            </>
                         }
-                    />
-                </PageHeader>
+                    >
+                        <ConditionallyRender
+                            condition={isSmallScreen}
+                            show={
+                                <Search
+                                    initialValue={tableState.query || ''}
+                                    onChange={setSearchValue}
+                                    id='globalFeatureFlags'
+                                />
+                            }
+                        />
+                    </PageHeader>
+                ) : (
+                    <PageHeader title='FlagsOverview' />
+                )
             }
         >
             {flagsReleaseManagementUIEnabled ? (
-                <LifecycleFilters
-                    state={filterState}
-                    onChange={setTableState}
-                    total={loading ? undefined : total}
-                />
+                <Box sx={{ display: 'flex' }}>
+                    <Box sx={{ marginRight: 'auto' }}>
+                        <LifecycleFilters
+                            state={filterState}
+                            onChange={setTableState}
+                            total={loading ? undefined : total}
+                        />
+                    </Box>
+
+                    <Search
+                        placeholder='Search'
+                        expandable
+                        initialValue={tableState.query || ''}
+                        onChange={setSearchValue}
+                        id='globalFeatureFlags'
+                    />
+                    <Box sx={(theme) => ({ marginRight: theme.spacing(2) })}>
+                        <ExportFlags
+                            onClick={() => setShowExportDialog(true)}
+                        />
+                    </Box>
+                </Box>
             ) : null}
             <FeatureToggleFilters
                 onChange={setTableState}