Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00
Code Issues Projects Releases Wiki Activity

feat: search page header update

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-04-15 14:19:59 +02:00
parent 3fd74262bb
commit c53edb2fec
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
2 changed files with 92 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/LifecycleFilters.tsx
View File

@ -2,6 +2,8 @@ import { Box, Chip, styled } from '@mui/material';
import type { FC } from 'react'; import type { FC } from 'react';
import type { FilterItemParamHolder } from '../../../filter/Filters/Filters'; import type { FilterItemParamHolder } from '../../../filter/Filters/Filters';
import type { LifecycleStage } from '../../FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage'; import type { LifecycleStage } from '../../FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage';
import { useNavigate } from 'react-router-dom';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const StyledChip = styled(Chip, { const StyledChip = styled(Chip, {
shouldForwardProp: (prop) => prop !== 'isActive', shouldForwardProp: (prop) => prop !== 'isActive',
@ -34,7 +36,7 @@ const Wrapper = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: theme.spacing(1), gap: theme.spacing(1),
padding: theme.spacing(2, 3, 0, 3), padding: theme.spacing(0, 3),
})); }));
const lifecycleOptions: { const lifecycleOptions: {
@ -52,6 +54,8 @@ export const LifecycleFilters: FC<ILifecycleFiltersProps> = ({
onChange, onChange,
total, total,
}) => { }) => {
const navigate = useNavigate();
const { trackEvent } = usePlausibleTracker();
const current = state.lifecycle?.values ?? []; const current = state.lifecycle?.values ?? [];
return ( 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> </Wrapper>
); );
}; };

134
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
View File

@ -399,76 +399,92 @@ export const FeatureToggleListTable: FC = () => {
<PageContent <PageContent
disableLoading={true} disableLoading={true}
bodyClass='no-padding' bodyClass='no-padding'
disableBorder={flagsReleaseManagementUIEnabled}
header={ header={
<PageHeader !flagsReleaseManagementUIEnabled ? (
title='Search' <PageHeader
actions={ title={'Search'}
<> actions={
<ConditionallyRender <>
condition={!isSmallScreen} <ConditionallyRender
show={ condition={!isSmallScreen}
<> show={
<Search <>
placeholder='Search' <Search
expandable placeholder='Search'
initialValue={ expandable
tableState.query || '' initialValue={
} tableState.query || ''
onChange={setSearchValue} }
id='globalFeatureFlags' onChange={setSearchValue}
/> id='globalFeatureFlags'
<PageHeader.Divider /> />
</> <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)}
/> />
) : ( <Link
component={RouterLink}
to='/archive'
underline='always'
sx={{ marginRight: 2, ...focusable(theme) }}
onClick={() => {
trackEvent('search-feature-buttons', {
props: {
action: 'archive',
},
});
}}
>
View archive
</Link>
<FeatureToggleListActions <FeatureToggleListActions
onExportClick={() => onExportClick={() =>
setShowExportDialog(true) 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 ? ( {flagsReleaseManagementUIEnabled ? (
<LifecycleFilters <Box sx={{ display: 'flex' }}>
state={filterState} <Box sx={{ marginRight: 'auto' }}>
onChange={setTableState} <LifecycleFilters
total={loading ? undefined : total} 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} ) : null}
<FeatureToggleFilters <FeatureToggleFilters
onChange={setTableState} onChange={setTableState}