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 { 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>
);
};

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

@ -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}