diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 0941b689d4..469ad4df45 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -41,7 +41,7 @@ import { useProjectFeatureSearchActions, } from './useProjectFeatureSearch.ts'; import { AvatarCell } from './AvatarCell.tsx'; -import { styled, useMediaQuery, useTheme } from '@mui/material'; +import { Box, styled, useMediaQuery, useTheme } from '@mui/material'; import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog.tsx'; import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding.tsx'; @@ -101,8 +101,25 @@ const ButtonGroup = styled('div')(({ theme }) => ({ paddingInline: theme.spacing(1.5), })); +const LinkToggle = styled('button')(({ theme }) => ({ + background: 'none', + border: 'none', + padding: 0, + margin: theme.spacing(0, 1.5), + marginLeft: 'auto', + cursor: 'pointer', + color: theme.palette.primary.main, + textDecoration: 'underline', + font: 'inherit', + display: 'inline-flex', + alignItems: 'center', + '&:hover': { + textDecoration: 'none', + }, +})); + export const ProjectFeatureToggles = ({ - environments, + environments: availableEnvironments, }: ProjectFeatureTogglesProps) => { const { trackEvent } = usePlausibleTracker(); const projectId = useRequiredPathParam('projectId'); @@ -192,6 +209,17 @@ export const ProjectFeatureToggles = ({ } }; + const showCleanupReminder = !tableState.lastSeenAt && !tableState.lifecycle; + const showArchived = Boolean(tableState.archived); + const toggleArchived = () => { + if (showArchived) { + setTableState({ archived: undefined }); + } else { + setTableState({ archived: { operator: 'IS', values: ['true'] } }); + } + }; + const environments = showArchived ? [] : availableEnvironments; + const columns = useMemo( () => [ columnHelper.display({ @@ -493,8 +521,6 @@ export const ProjectFeatureToggles = ({ const selectedData = useSelectedData(features, rowSelection); - const showCleanupReminder = !tableState.lastSeenAt && !tableState.lifecycle; - return ( + {showArchived + ? 'View active flags' + : 'View archived flags'} + + ) : null + } + title={ + showArchived + ? 'Archived feature flags' + : 'Feature flags' + } /> ) : ( - + {showArchived ? ( + + + + ) : ( + + )} {isSmallScreen ? null : ( - - - + {showArchived ? null : ( + + + + )} {isSmallScreen ? ( = ({ isLoading, totalItems, environmentsToExport }) => { +> = ({ + isLoading, + totalItems, + environmentsToExport, + actions, + title = 'Feature flags', +}) => { const projectId = useRequiredPathParam('projectId'); const headerLoadingRef = useLoading(isLoading || false); const [showExportDialog, setShowExportDialog] = useState(false); @@ -24,11 +32,12 @@ export const ProjectFeatureTogglesHeader: FC< return ( + {actions} = ({ singularOperators: ['IS', 'IS_NOT'], pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'], }, - { - label: 'Show only archived', - icon: 'inventory', - options: [{ label: 'True', value: 'true' }], - filterKey: 'archived', - singularOperators: ['IS'], - pluralOperators: ['IS_ANY_OF'], - }, + ...(!flagsUiFilterRefactorEnabled + ? [ + { + label: 'Show only archived', + icon: 'inventory', + options: [{ label: 'True', value: 'true' }], + filterKey: 'archived', + singularOperators: ['IS'], + pluralOperators: ['IS_ANY_OF'], + } satisfies IFilterItem, + ] + : []), ]; setAvailableFilters(availableFilters);