chore: remove simplifyProjectOverview flag (#9068)

Remove the flag and delete unused components.

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 =
+    const showArchiveTooltip = projectId && isOldCustomer(user?.createdAt);
-        simplifyProjectOverview && projectId && isOldCustomer(user?.createdAt);
 
     const ArchiveTooltip = () => {
         return (

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 && (
+                                <ButtonGroup>
-                                    <ButtonGroup>
+                                    <PermissionIconButton
-                                        <PermissionIconButton
+                                        permission={UPDATE_FEATURE}
-                                            permission={UPDATE_FEATURE}
+                                        projectId={projectId}
-                                            projectId={projectId}
+                                        onClick={() => setModalOpen(true)}
-                                            onClick={() => setModalOpen(true)}
+                                        tooltipProps={{ title: 'Import' }}
-                                            tooltipProps={{ title: 'Import' }}
+                                        data-testid={IMPORT_BUTTON}
-                                            data-testid={IMPORT_BUTTON}
+                                        data-loading-project
-                                            data-loading-project
+                                    >
-                                        >
+                                        <ImportSvg />
-                                            <ImportSvg />
+                                    </PermissionIconButton>
-                                        </PermissionIconButton>
+                                </ButtonGroup>
-                                    </ButtonGroup>
-                                )}
                             </FilterRow>
                             <SearchHighlightProvider
                                 value={tableState.query || ''}

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOverviewFilters.tsx

@@ -6,7 +6,6 @@ import {
     type IFilterItem,
 } from 'component/filter/Filters/Filters';
 import { useProjectFlagCreators } from 'hooks/api/getters/useProjectFlagCreators/useProjectFlagCreators';
-import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IProjectOverviewFilters {
     state: FilterItemParamHolder;
@@ -22,7 +21,6 @@ export const ProjectOverviewFilters: VFC<IProjectOverviewFilters> = ({
     const { tags } = useAllTags();
     const { flagCreators } = useProjectFlagCreators(project);
     const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
-    const simplifyProjectOverview = useUiFlag('simplifyProjectOverview');
 
     useEffect(() => {
         const tagsOptions = (tags || []).map((tag) => ({
@@ -44,14 +42,10 @@ export const ProjectOverviewFilters: VFC<IProjectOverviewFilters> = ({
                 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<IProjectOverviewFilters> = ({
                 singularOperators: ['IS', 'IS_NOT'],
                 pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'],
             },
-            ...(simplifyProjectOverview
+            {
-                ? ([
+                label: 'Show only archived',
-                      {
+                icon: 'inventory',
-                          label: 'Show only archived',
+                options: [{ label: 'True', value: 'true' }],
-                          icon: 'inventory',
+                filterKey: 'archived',
-                          options: [{ label: 'True', value: 'true' }],
+                singularOperators: ['IS'],
-                          filterKey: 'archived',
+                pluralOperators: ['IS_ANY_OF'],
-                          singularOperators: ['IS'],
+            },
-                          pluralOperators: ['IS_ANY_OF'],
-                      },
-                  ] as IFilterItem[])
-                : []),
         ];
 
         setAvailableFilters(availableFilters);

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 (
         <StyledCounterBadge badgeContent={total ?? 0} color='primary'>
             <TabText>Change requests</TabText>
@@ -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 = () => {
                             </StyledProjectTitle>
                         </StyledDiv>
                         <StyledDiv>
-                            <ConditionallyRender
+                            <ProjectStatus />
-                                condition={Boolean(!simplifyProjectOverview)}
-                                show={
-                                    <PermissionIconButton
-                                        permission={UPDATE_FEATURE}
-                                        projectId={projectId}
-                                        onClick={() => setModalOpen(true)}
-                                        tooltipProps={{ title: 'Import' }}
-                                        data-testid={IMPORT_BUTTON}
-                                        data-loading-project
-                                    >
-                                        <ImportSvg />
-                                    </PermissionIconButton>
-                                }
-                            />
-                            {simplifyProjectOverview && <ProjectStatus />}
                         </StyledDiv>
                     </StyledTopRow>
                 </StyledInnerContainer>

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 (
         <StyledContainer key={projectId}>
             <StyledContentContainer>
-                {hideChangeRequestOverview ? null : (
-                    <ProjectOverviewChangeRequests project={projectId} />
-                )}
                 <ConditionallyRender
                     condition={outdatedSdksBannerEnabled}
                     show={<OutdatedSdksBanner project={projectId} />}
                 />
-
                 <StyledProjectToggles>
                     <ProjectFeatureToggles
                         environments={project.environments.map(

frontend/src/component/project/Project/ProjectOverviewChangeRequests.test.tsx

@@ -1,45 +0,0 @@
-import { screen } from '@testing-library/react';
-import { render } from 'utils/testRenderer';
-import { testServerRoute, testServerSetup } from 'utils/testServer';
-import { ProjectOverviewChangeRequests } from './ProjectOverviewChangeRequests';
-
-const server = testServerSetup();
-
-const setupEnterpriseApi = () => {
-    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(<ProjectOverviewChangeRequests project='default' />);
-
-    await screen.findByText('4');
-    await screen.findByText('10');
-    await screen.findByText('View change requests');
-});

frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx

@@ -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 (
-        <ChangeRequestContainer>
-            <Box>Open change requests</Box>
-            <ApplyBox>
-                <span>To be applied</span>
-                <ChangeRequestCount>{toBeApplied}</ChangeRequestCount>
-            </ApplyBox>
-            <ReviewBox>
-                <span>To be reviewed</span>
-                <ChangeRequestCount>{toBeReviewed}</ChangeRequestCount>
-            </ReviewBox>
-            <Link to={`/projects/${project}/change-requests`}>
-                View change requests
-            </Link>
-        </ChangeRequestContainer>
-    );
-};

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;

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(
+                    deprecated: true,
-                        'simplifyProjectOverview',
-                    ),
                     operationId: 'getProjectHealthReport',
                     summary: 'Get a health report for a project.',
                     description:

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,

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,