From 73515d78ceafe3157b65384534be937a1c650c9d Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Wed, 8 Jan 2025 14:10:40 +0200 Subject: [PATCH] chore: remove simplifyProjectOverview flag (#9068) Remove the flag and delete unused components. --- .../src/component/filter/AddFilterButton.tsx | 5 +- .../ProjectFeatureToggles.tsx | 28 +++---- .../ProjectOverviewFilters.tsx | 34 +++------ .../src/component/project/Project/Project.tsx | 51 +------------ .../project/Project/ProjectFlags.tsx | 7 -- .../ProjectOverviewChangeRequests.test.tsx | 45 ----------- .../Project/ProjectOverviewChangeRequests.tsx | 74 ------------------- frontend/src/interfaces/uiConfig.ts | 1 - .../routes/admin-api/project/health-report.ts | 4 +- src/lib/types/experimental.ts | 5 -- src/server-dev.ts | 1 - 11 files changed, 29 insertions(+), 226 deletions(-) delete mode 100644 frontend/src/component/project/Project/ProjectOverviewChangeRequests.test.tsx delete mode 100644 frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx diff --git a/frontend/src/component/filter/AddFilterButton.tsx b/frontend/src/component/filter/AddFilterButton.tsx index 6d9606d594..7ab29e7f2b 100644 --- a/frontend/src/component/filter/AddFilterButton.tsx +++ b/frontend/src/component/filter/AddFilterButton.tsx @@ -8,7 +8,6 @@ import Add from '@mui/icons-material/Add'; import { Box } from '@mui/system'; import type { IFilterItem } from './Filters/Filters'; import { FILTERS_MENU } from 'utils/testIds'; -import { useUiFlag } from 'hooks/useUiFlag'; import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip'; import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi'; import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash'; @@ -53,7 +52,6 @@ export const AddFilterButton = ({ availableFilters, }: IAddFilterButtonProps) => { const projectId = useOptionalPathParam('projectId'); - const simplifyProjectOverview = useUiFlag('simplifyProjectOverview'); const { user } = useAuthUser(); const { setSplashSeen } = useSplashApi(); const { splash } = useAuthSplash(); @@ -85,8 +83,7 @@ export const AddFilterButton = ({ return new Date(createdAt) < cutoffDate; }; - const showArchiveTooltip = - simplifyProjectOverview && projectId && isOldCustomer(user?.createdAt); + const showArchiveTooltip = projectId && isOldCustomer(user?.createdAt); const ArchiveTooltip = () => { return ( diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 6a100f1d3b..8fe7188c5c 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -41,7 +41,6 @@ import { useProjectFeatureSearchActions, } from './useProjectFeatureSearch'; import { AvatarCell } from './AvatarCell'; -import { useUiFlag } from 'hooks/useUiFlag'; import { styled } from '@mui/material'; import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog'; @@ -92,7 +91,6 @@ export const ProjectFeatureToggles = ({ const projectId = useRequiredPathParam('projectId'); const { project } = useProjectOverview(projectId); const [connectSdkOpen, setConnectSdkOpen] = useState(false); - const simplifyProjectOverview = useUiFlag('simplifyProjectOverview'); const [modalOpen, setModalOpen] = useState(false); const { @@ -587,20 +585,18 @@ export const ProjectFeatureToggles = ({ onChange={setTableState} state={filterState} /> - {simplifyProjectOverview && ( - - setModalOpen(true)} - tooltipProps={{ title: 'Import' }} - data-testid={IMPORT_BUTTON} - data-loading-project - > - - - - )} + + setModalOpen(true)} + tooltipProps={{ title: 'Import' }} + data-testid={IMPORT_BUTTON} + data-loading-project + > + + + = ({ const { tags } = useAllTags(); const { flagCreators } = useProjectFlagCreators(project); const [availableFilters, setAvailableFilters] = useState([]); - const simplifyProjectOverview = useUiFlag('simplifyProjectOverview'); useEffect(() => { const tagsOptions = (tags || []).map((tag) => ({ @@ -44,14 +42,10 @@ export const ProjectOverviewFilters: VFC = ({ label: 'Stale', value: 'stale', }, - ...(simplifyProjectOverview - ? [ - { - label: 'Potentially stale', - value: 'potentially-stale', - }, - ] - : []), + { + label: 'Potentially stale', + value: 'potentially-stale', + }, ]; const availableFilters: IFilterItem[] = [ @@ -105,18 +99,14 @@ export const ProjectOverviewFilters: VFC = ({ singularOperators: ['IS', 'IS_NOT'], pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'], }, - ...(simplifyProjectOverview - ? ([ - { - label: 'Show only archived', - icon: 'inventory', - options: [{ label: 'True', value: 'true' }], - filterKey: 'archived', - singularOperators: ['IS'], - pluralOperators: ['IS_ANY_OF'], - }, - ] as IFilterItem[]) - : []), + { + label: 'Show only archived', + icon: 'inventory', + options: [{ label: 'True', value: 'true' }], + filterKey: 'archived', + singularOperators: ['IS'], + pluralOperators: ['IS_ANY_OF'], + }, ]; setAvailableFilters(availableFilters); diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 6607c3a054..9126f8a944 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -1,7 +1,6 @@ import { useNavigate } from 'react-router'; import useLoading from 'hooks/useLoading'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { ReactComponent as ImportSvg } from 'assets/icons/import.svg'; import { ReactComponent as ProjectStatusSvg } from 'assets/icons/projectStatus.svg'; import { StyledDiv, @@ -31,8 +30,6 @@ import ProjectEnvironment from '../ProjectEnvironment/ProjectEnvironment'; import { ProjectFeaturesArchive } from './ProjectFeaturesArchive/ProjectFeaturesArchive'; import ProjectFlags from './ProjectFlags'; import ProjectHealth from './ProjectHealth/ProjectHealth'; -import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; -import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; @@ -43,7 +40,6 @@ import { ProjectChangeRequests } from '../../changeRequest/ProjectChangeRequests import { ProjectSettings } from './ProjectSettings/ProjectSettings'; import { useFavoriteProjectsApi } from 'hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi'; import { ImportModal } from './Import/ImportModal'; -import { IMPORT_BUTTON } from 'utils/testIds'; import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge'; import { Badge } from 'component/common/Badge/Badge'; import type { UiFlags } from 'interfaces/uiConfig'; @@ -54,7 +50,6 @@ import { ProjectInsights } from './ProjectInsights/ProjectInsights'; import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { ProjectArchived } from './ArchiveProject/ProjectArchived'; import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker'; -import { useUiFlag } from 'hooks/useUiFlag'; import { useActionableChangeRequests } from 'hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests'; import { ProjectStatusModal } from './ProjectStatus/ProjectStatusModal'; @@ -94,14 +89,9 @@ const TabText = styled('span')(({ theme }) => ({ })); const ChangeRequestsLabel = () => { - const simplifyProjectOverview = useUiFlag('simplifyProjectOverview'); const projectId = useRequiredPathParam('projectId'); const { total } = useActionableChangeRequests(projectId); - if (!simplifyProjectOverview) { - return 'Change requests'; - } - return ( Change requests @@ -155,7 +145,6 @@ export const Project = () => { const basePath = `/projects/${projectId}`; const projectName = project?.name || projectId; const { favorite, unfavorite } = useFavoriteProjectsApi(); - const simplifyProjectOverview = useUiFlag('simplifyProjectOverview'); const [showDelDialog, setShowDelDialog] = useState(false); @@ -166,29 +155,10 @@ export const Project = () => { const tabs: ITab[] = [ { - title: simplifyProjectOverview ? 'Overview' : 'Flags', + title: 'Overview', path: basePath, name: 'flags', }, - ...(simplifyProjectOverview - ? [] - : [ - { - title: 'Insights', - path: `${basePath}/insights`, - name: 'insights', - }, - { - title: 'Health', - path: `${basePath}/health`, - name: 'health', - }, - { - title: 'Archived flags', - path: `${basePath}/archive`, - name: 'archive', - } as ITab, - ]), { title: 'Change requests', path: `${basePath}/change-requests`, @@ -207,7 +177,7 @@ export const Project = () => { name: 'logs', }, { - title: simplifyProjectOverview ? 'Settings' : 'Project settings', + title: 'Settings', path: `${basePath}/settings`, ossPath: `${basePath}/settings/api-access`, name: 'settings', @@ -301,22 +271,7 @@ export const Project = () => { - setModalOpen(true)} - tooltipProps={{ title: 'Import' }} - data-testid={IMPORT_BUTTON} - data-loading-project - > - - - } - /> - {simplifyProjectOverview && } + diff --git a/frontend/src/component/project/Project/ProjectFlags.tsx b/frontend/src/component/project/Project/ProjectFlags.tsx index 0f6b98d7f3..c1b3131c37 100644 --- a/frontend/src/component/project/Project/ProjectFlags.tsx +++ b/frontend/src/component/project/Project/ProjectFlags.tsx @@ -7,7 +7,6 @@ import useProjectOverview, { } from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { usePageTitle } from 'hooks/usePageTitle'; import { useLastViewedProject } from 'hooks/useLastViewedProject'; -import { ProjectOverviewChangeRequests } from './ProjectOverviewChangeRequests'; import { OutdatedSdksBanner } from '../../banners/OutdatedSdksBanner/OutdatedSdksBanner'; import { useUiFlag } from 'hooks/useUiFlag'; import { ConditionallyRender } from '../../common/ConditionallyRender/ConditionallyRender'; @@ -51,19 +50,13 @@ const ProjectOverview: FC = () => { setLastViewed(projectId); }, [projectId, setLastViewed]); - const hideChangeRequestOverview = useUiFlag('simplifyProjectOverview'); - return ( - {hideChangeRequestOverview ? null : ( - - )} } /> - { - testServerRoute(server, '/api/admin/ui-config', { - versionInfo: { - current: { enterprise: 'present' }, - }, - }); - testServerRoute( - server, - '/api/admin/projects/default/change-requests/config', - [ - { - environment: 'default', - changeRequestEnabled: true, - }, - ], - ); - testServerRoute( - server, - '/api/admin/projects/default/change-requests/count', - { - total: 14, - approved: 2, - applied: 0, - rejected: 0, - reviewRequired: 10, - scheduled: 2, - }, - ); -}; - -test('Show change requests count', async () => { - setupEnterpriseApi(); - render(); - - await screen.findByText('4'); - await screen.findByText('10'); - await screen.findByText('View change requests'); -}); diff --git a/frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx b/frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx deleted file mode 100644 index 702c737adb..0000000000 --- a/frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Box, styled, Typography } from '@mui/material'; -import { Link } from 'react-router-dom'; -import type { FC } from 'react'; -import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; -import { useChangeRequestsCount } from 'hooks/api/getters/useChangeRequestsCount/useChangeRequestsCount'; - -export const ChangeRequestContainer = styled(Box)(({ theme }) => ({ - margin: '0', - textAlign: 'center', - backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadiusLarge, - width: '100%', - padding: theme.spacing(1, 3.25), - display: 'flex', - alignItems: 'center', - flexWrap: 'wrap', - gap: theme.spacing(2), - fontSize: theme.fontSizes.smallBody, -})); - -const ColorBox = styled(Box)(({ theme }) => ({ - borderRadius: '8px', - padding: theme.spacing(1, 2), - display: 'flex', - gap: theme.spacing(2), - justifyContent: 'space-between', - alignItems: 'center', - whiteSpace: 'nowrap', -})); - -const ApplyBox = styled(ColorBox)(({ theme }) => ({ - background: theme.palette.success.light, -})); - -const ReviewBox = styled(ColorBox)(({ theme }) => ({ - background: theme.palette.secondary.light, -})); - -const ChangeRequestCount = styled(Typography)(({ theme }) => ({ - fontSize: theme.spacing(2), - fontWeight: theme.fontWeight.bold, -})); - -export const ProjectOverviewChangeRequests: FC<{ project: string }> = ({ - project, -}) => { - const { isChangeRequestConfiguredInAnyEnv } = - useChangeRequestsEnabled(project); - const { data } = useChangeRequestsCount(project); - - if (!isChangeRequestConfiguredInAnyEnv()) { - return null; - } - - const toBeApplied = data.scheduled + data.approved; - const toBeReviewed = data.reviewRequired; - - return ( - - Open change requests - - To be applied - {toBeApplied} - - - To be reviewed - {toBeReviewed} - - - View change requests - - - ); -}; diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 4cfba1cd5e..792d7aef1c 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -86,7 +86,6 @@ export type UiFlags = { flagCreator?: boolean; releasePlans?: boolean; 'enterprise-payg'?: boolean; - simplifyProjectOverview?: boolean; productivityReportEmail?: boolean; showUserDeviceCount?: boolean; flagOverviewRedesign?: boolean; diff --git a/src/lib/routes/admin-api/project/health-report.ts b/src/lib/routes/admin-api/project/health-report.ts index 88291f0234..03167956a0 100644 --- a/src/lib/routes/admin-api/project/health-report.ts +++ b/src/lib/routes/admin-api/project/health-report.ts @@ -42,9 +42,7 @@ export default class ProjectHealthReport extends Controller { middleware: [ openApiService.validPath({ tags: ['Projects'], - deprecated: config.flagResolver.isEnabled( - 'simplifyProjectOverview', - ), + deprecated: true, operationId: 'getProjectHealthReport', summary: 'Get a health report for a project.', description: diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 34f7970e19..5e0f22052a 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -52,7 +52,6 @@ export type IFlagKey = | 'releasePlans' | 'productivityReportEmail' | 'enterprise-payg' - | 'simplifyProjectOverview' | 'flagOverviewRedesign' | 'showUserDeviceCount' | 'deleteStaleUserSessions' @@ -262,10 +261,6 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_SHOW_USER_DEVICE_COUNT, false, ), - simplifyProjectOverview: parseEnvVarBoolean( - process.env.UNLEASH_EXPERIMENTAL_SIMPLIFY_PROJECT_OVERVIEW, - false, - ), flagOverviewRedesign: parseEnvVarBoolean( process.env.UNLEASH_EXPERIMENTAL_FLAG_OVERVIEW_REDESIGN, false, diff --git a/src/server-dev.ts b/src/server-dev.ts index a95c84f305..22aea88451 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -51,7 +51,6 @@ process.nextTick(async () => { originMiddlewareRequestLogging: true, webhookDomainLogging: true, releasePlans: false, - simplifyProjectOverview: true, showUserDeviceCount: true, flagOverviewRedesign: false, granularAdminPermissions: true,