From 6c5fa4c8a788266fe02aeb17c55e40bf9f322bc0 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Wed, 30 Apr 2025 09:25:45 +0200
Subject: [PATCH] feat: update search placement on flags overview screen
 (#9854)

- search has a new place, closer to filters
- filters are adjusted to wrap properly on small screens
---
 .../FeatureToggleFilters/LifecycleFilters.tsx | 77 +++++++++++--------
 .../FeatureToggleListTable.tsx                | 60 ++++++++++-----
 2 files changed, 85 insertions(+), 52 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx
index 59fea2416e..31418a594e 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx
@@ -1,5 +1,5 @@
 import { Box, Chip, styled } from '@mui/material';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { FilterItemParamHolder } from '../../../filter/Filters/Filters';
 import type { LifecycleStage } from '../../FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage';
 import { useLifecycleCount } from 'hooks/api/getters/useLifecycleCount/useLifecycleCount';
@@ -30,13 +30,22 @@ interface ILifecycleFiltersProps {
     state: FilterItemParamHolder;
     onChange: (value: FilterItemParamHolder) => void;
     total?: number;
+    children?: ReactNode;
 }
 
 const Wrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: theme.spacing(1.5, 3, 0, 3),
+    minHeight: theme.spacing(7),
+    gap: theme.spacing(2),
+}));
+
+const StyledContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
+    flexWrap: 'wrap',
     gap: theme.spacing(1),
-    padding: theme.spacing(2, 3, 0, 3),
 }));
 
 const lifecycleOptions: {
@@ -74,43 +83,49 @@ export const LifecycleFilters: FC<ILifecycleFiltersProps> = ({
     state,
     onChange,
     total,
+    children,
 }) => {
     const { lifecycleCount } = useLifecycleCount();
     const current = state.lifecycle?.values ?? [];
 
     return (
         <Wrapper>
-            {lifecycleOptions.map(({ label, value }) => {
-                const isActive =
-                    value === null ? !state.lifecycle : current.includes(value);
-                const count = getStageCount(value, lifecycleCount);
-                const dynamicLabel =
-                    isActive && Number.isInteger(total)
-                        ? `${label} (${total === count ? total : `${total} of ${count}`})`
-                        : `${label}${count !== undefined ? ` (${count})` : ''}`;
-
-                const handleClick = () =>
-                    onChange(
+            <StyledContainer>
+                {lifecycleOptions.map(({ label, value }) => {
+                    const isActive =
                         value === null
-                            ? { lifecycle: null }
-                            : {
-                                  lifecycle: {
-                                      operator: 'IS',
-                                      values: [value],
-                                  },
-                              },
-                    );
+                            ? !state.lifecycle
+                            : current.includes(value);
+                    const count = getStageCount(value, lifecycleCount);
+                    const dynamicLabel =
+                        isActive && Number.isInteger(total)
+                            ? `${label} (${total === count ? total : `${total} of ${count}`})`
+                            : `${label}${count !== undefined ? ` (${count})` : ''}`;
 
-                return (
-                    <StyledChip
-                        key={label}
-                        label={dynamicLabel}
-                        variant='outlined'
-                        isActive={isActive}
-                        onClick={handleClick}
-                    />
-                );
-            })}
+                    const handleClick = () =>
+                        onChange(
+                            value === null
+                                ? { lifecycle: null }
+                                : {
+                                      lifecycle: {
+                                          operator: 'IS',
+                                          values: [value],
+                                      },
+                                  },
+                        );
+
+                    return (
+                        <StyledChip
+                            key={label}
+                            label={dynamicLabel}
+                            variant='outlined'
+                            isActive={isActive}
+                            onClick={handleClick}
+                        />
+                    );
+                })}
+            </StyledContainer>
+            {children}
         </Wrapper>
     );
 };
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 02a5af69e7..95bb6e114d 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -155,7 +155,7 @@ export const FeatureToggleListTable: FC = () => {
                               onTagClick,
                               onFlagTypeClick,
                           ),
-                          meta: { width: '50%' },
+                          meta: { width: '40%' },
                       }),
                       columnHelper.accessor('createdAt', {
                           header: 'Created',
@@ -181,7 +181,7 @@ export const FeatureToggleListTable: FC = () => {
                                   data-loading
                               />
                           ),
-                          enableSorting: false, // FIXME: enable sorting by lifecycle
+                          enableSorting: false,
                           size: 50,
                           meta: { width: '1%' },
                       }),
@@ -192,6 +192,7 @@ export const FeatureToggleListTable: FC = () => {
                               <StatusCell {...original} />
                           ),
                           enableSorting: false,
+                          size: 350,
                       }),
                       columnHelper.accessor('project', {
                           header: 'Project',
@@ -402,23 +403,19 @@ export const FeatureToggleListTable: FC = () => {
                     }
                     actions={
                         <>
-                            <ConditionallyRender
-                                condition={!isSmallScreen}
-                                show={
-                                    <>
-                                        <Search
-                                            placeholder='Search'
-                                            expandable
-                                            initialValue={
-                                                tableState.query || ''
-                                            }
-                                            onChange={setSearchValue}
-                                            id='globalFeatureFlags'
-                                        />
-                                        <PageHeader.Divider />
-                                    </>
-                                }
-                            />
+                            {!flagsReleaseManagementUIEnabled &&
+                            !isSmallScreen ? (
+                                <>
+                                    <Search
+                                        placeholder='Search'
+                                        expandable
+                                        initialValue={tableState.query || ''}
+                                        onChange={setSearchValue}
+                                        id='globalFeatureFlags'
+                                    />
+                                    <PageHeader.Divider />
+                                </>
+                            ) : null}
                             <Link
                                 component={RouterLink}
                                 to='/archive'
@@ -449,7 +446,9 @@ export const FeatureToggleListTable: FC = () => {
                     }
                 >
                     <ConditionallyRender
-                        condition={isSmallScreen}
+                        condition={
+                            isSmallScreen && !flagsReleaseManagementUIEnabled
+                        }
                         show={
                             <Search
                                 initialValue={tableState.query || ''}
@@ -466,17 +465,36 @@ export const FeatureToggleListTable: FC = () => {
                     state={filterState}
                     onChange={setTableState}
                     total={loading ? undefined : total}
-                />
+                >
+                    {!isSmallScreen ? (
+                        <Search
+                            placeholder='Search'
+                            initialValue={tableState.query || ''}
+                            onChange={setSearchValue}
+                            id='globalFeatureFlags'
+                        />
+                    ) : null}
+                </LifecycleFilters>
             ) : null}
             <FeatureToggleFilters
                 onChange={setTableState}
                 state={filterState}
             />
+            {isSmallScreen ? (
+                <Box sx={(theme) => ({ padding: theme.spacing(0, 3, 3) })}>
+                    <Search
+                        initialValue={tableState.query || ''}
+                        onChange={setSearchValue}
+                        id='globalFeatureFlags'
+                    />
+                </Box>
+            ) : null}
             <SearchHighlightProvider value={tableState.query || ''}>
                 <div ref={bodyLoadingRef}>
                     <PaginatedTable tableInstance={table} totalItems={total} />
                 </div>
             </SearchHighlightProvider>
+
             <ConditionallyRender
                 condition={rows.length === 0}
                 show={