diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx index 9d15b2ae6b..c99b8f041a 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx @@ -262,7 +262,6 @@ test('clears lifecycle filter when switching to archived view', async () => { testServerRoute(server, '/api/admin/ui-config', { flags: { flagCreator: true, - flagsUiFilterRefactor: true, }, }); diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 36637bd135..4cefa398b1 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -1,4 +1,3 @@ -import { ReactComponent as ImportSvg } from 'assets/icons/import.svg'; import { useCallback, useMemo, useState } from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PageContent } from 'component/common/PageContent/PageContent'; @@ -20,7 +19,6 @@ import { import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useFeatureToggleSwitch } from '../ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx'; import useLoading from 'hooks/useLoading'; -import { ProjectFeatureTogglesHeader as LegacyProjectFeatureTogglesHeader } from './ProjectFeatureTogglesHeader/LegacyProjectFeatureTogglesHeader.tsx'; import { createColumnHelper, useReactTable } from '@tanstack/react-table'; import { withTableState } from 'utils/withTableState'; import type { FeatureSearchResponseSchema } from 'openapi'; @@ -50,14 +48,10 @@ import { ProjectOnboarded } from 'component/onboarding/flow/ProjectOnboarded'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { ArchivedFeatureActionCell } from '../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureActionCell.tsx'; import { ArchiveBatchActions } from '../../../archive/ArchiveTable/ArchiveBatchActions.tsx'; -import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; -import { UPDATE_FEATURE } from '@server/types/permissions'; import { ImportModal } from '../Import/ImportModal.tsx'; -import { IMPORT_BUTTON } from 'utils/testIds'; import { ProjectCleanupReminder } from './ProjectCleanupReminder/ProjectCleanupReminder.tsx'; import { formatEnvironmentColumnId } from './formatEnvironmentColumnId.ts'; import { ProjectFeaturesColumnsMenu } from './ProjectFeaturesColumnsMenu/ProjectFeaturesColumnsMenu.tsx'; -import { useUiFlag } from 'hooks/useUiFlag.ts'; import { ProjectFeatureTogglesHeader } from './ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx'; import { ProjectFlagsSearch } from './ProjectFlagsSearch/ProjectFlagsSearch.tsx'; @@ -74,12 +68,6 @@ const Container = styled('div')(({ theme }) => ({ gap: theme.spacing(2), })); -const LegacyFilterRow = styled('div')(({ theme }) => ({ - display: 'flex', - flexFlow: 'row wrap', - justifyContent: 'space-between', -})); - const FiltersContainer = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', @@ -95,12 +83,6 @@ const FilterRow = styled('div')({ alignItems: 'center', }); -const ButtonGroup = styled('div')(({ theme }) => ({ - display: 'flex', - gap: theme.spacing(1), - paddingInline: theme.spacing(1.5), -})); - const LinkToggle = styled('button')(({ theme }) => ({ background: 'none', border: 'none', @@ -126,7 +108,6 @@ export const ProjectFeatureToggles = ({ const { project } = useProjectOverview(projectId); const [connectSdkOpen, setConnectSdkOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false); - const flagsUiFilterRefactorEnabled = useUiFlag('flagsUiFilterRefactor'); const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); @@ -551,48 +532,23 @@ export const ProjectFeatureToggles = ({ - {showArchived - ? 'View active flags' - : 'View archived flags'} - - ) : null - } - title={ - showArchived - ? 'Archived feature flags' - : 'Feature flags' - } - /> - ) : ( - { - setTableState({ query }); - }} - dataToExport={data} - environmentsToExport={environments} - actions={ - - } - /> - ) + + {showArchived + ? 'View active flags' + : 'View archived flags'} + + } + title={ + showArchived + ? 'Archived feature flags' + : 'Feature flags' + } + /> } bodyClass='noop' style={{ cursor: 'inherit' }} @@ -602,50 +558,25 @@ export const ProjectFeatureToggles = ({ aria-busy={isPlaceholder} aria-live='polite' > - {flagsUiFilterRefactorEnabled ? ( - - - {showArchived ? ( - - - - ) : ( - - )} - {isSmallScreen ? null : ( - { - setTableState({ query }); - }} - isLoading={loading} - /> - )} - - - {showArchived ? null : ( - + + + {showArchived ? ( + - + + ) : ( + )} - {isSmallScreen ? ( + {isSmallScreen ? null : ( { @@ -653,35 +584,32 @@ export const ProjectFeatureToggles = ({ }} isLoading={loading} /> - ) : null} - - ) : ( - - - + {showArchived ? null : ( + + + + )} + {isSmallScreen ? ( + { + setTableState({ query }); + }} + isLoading={loading} /> - - setModalOpen(true)} - tooltipProps={{ title: 'Import' }} - data-testid={IMPORT_BUTTON} - data-loading-project - > - - - - - )} + ) : null} + void; - dataToExport?: Pick[]; - environmentsToExport?: string[]; - actions?: ReactNode; -} - -/** - * @deprecated remove with `flagsUiFilterRefactor` flag - */ -export const ProjectFeatureTogglesHeader: FC< - IProjectFeatureTogglesHeaderProps -> = ({ - isLoading, - totalItems, - searchQuery, - onChangeSearchQuery, - environmentsToExport, - actions, -}) => { - const projectId = useRequiredPathParam('projectId'); - const headerLoadingRef = useLoading(isLoading || false); - const [showTitle, setShowTitle] = useState(true); - const theme = useTheme(); - const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); - const [showExportDialog, setShowExportDialog] = useState(false); - const { trackEvent } = usePlausibleTracker(); - const projectOverviewRefactorFeedback = false; - const { openFeedback } = useFeedback('newProjectOverview', 'automatic'); - const handleSearch = (query: string) => { - onChangeSearchQuery?.(query); - trackEvent('search-bar', { - props: { - screen: 'project', - length: query.length, - }, - }); - }; - - const createFeedbackContext = () => { - openFeedback({ - title: 'How easy was it to work with the project overview in Unleash?', - positiveLabel: - 'What do you like most about the updated project overview?', - areasForImprovementsLabel: - 'What improvements are needed in the project overview?', - }); - }; - - return ( - - - setShowTitle(false)} - onBlur={() => setShowTitle(true)} - hasFilters - id='projectFeatureFlags' - /> - } - /> - {actions} - - - setShowExportDialog(true)} - sx={(theme) => ({ - marginRight: theme.spacing(2), - })} - > - - - - - setShowExportDialog(false)} - environments={environmentsToExport || []} - /> - } - /> - - {/* FIXME: remove */} - } - onClick={createFeedbackContext} - variant='outlined' - data-loading - > - Provide feedback - - } - /> - - - } - > - - } - /> - - - ); -}; diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx index 09725f5a18..331265e4ef 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx @@ -3,8 +3,7 @@ import { useEffect } from 'react'; import type { FilterItemParamHolder } from '../../../filter/Filters/Filters.tsx'; import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus'; import { LifecycleFilters } from 'component/common/LifecycleFilters/LifecycleFilters.tsx'; -import { Box, useMediaQuery, useTheme } from '@mui/material'; -import { useUiFlag } from 'hooks/useUiFlag.ts'; +import { Box, useTheme } from '@mui/material'; type ProjectLifecycleFiltersProps = { projectId: string; @@ -23,8 +22,6 @@ export const ProjectLifecycleFilters: FC = ({ }) => { const { data } = useProjectStatus(projectId); const theme = useTheme(); - const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); - const flagsUiFilterRefactorEnabled = useUiFlag('flagsUiFilterRefactor'); const lifecycleSummary = Object.entries( data?.lifecycleSummary || {}, ).reduce( @@ -47,18 +44,7 @@ export const ProjectLifecycleFilters: FC = ({ } return ( - + = ({ const { tags } = useAllTags(); const { flagCreators } = useProjectFlagCreators(project); const [availableFilters, setAvailableFilters] = useState([]); - const flagsUiFilterRefactorEnabled = useUiFlag('flagsUiFilterRefactor'); - const FilterComponent = flagsUiFilterRefactorEnabled - ? StyledFilters - : Filters; useEffect(() => { const tagsOptions = (tags || []).map((tag) => { @@ -120,25 +115,13 @@ export const ProjectOverviewFilters: FC = ({ singularOperators: ['IS', 'IS_NOT'], pluralOperators: ['IS_ANY_OF', 'IS_NONE_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); }, [JSON.stringify(tags), JSON.stringify(flagCreators)]); return ( - { newStrategyModal: true, globalChangeRequestList: true, newUiConfigService: true, - flagsUiFilterRefactor: true, trafficBillingDisplay: true, milestoneProgression: true, featureReleasePlans: true,