feat: when insights are enabled hide those widgets in other pages (#6675

)
Unleash · Mar 22, 2024 · a471f73 · a471f73
1 parent e0994b0
commit a471f73
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
@@ -93,6 +93,15 @@ export const Project = () => {
             path: basePath,
             name: 'overview',
         },
+        ...(projectOverviewRefactor
+            ? [
+                  {
+                      title: 'Insights',
+                      path: `${basePath}/insights`,
+                      name: 'insights',
+                  },
+              ]
+            : []),
         {
             title: 'Health',
             path: `${basePath}/health`,
@@ -109,12 +118,16 @@ export const Project = () => {
             name: 'change-request',
             isEnterprise: true,
         },
-        {
-            title: 'Metrics',
-            path: `${basePath}/metrics`,
-            name: 'dora',
-            isEnterprise: true,
-        },
+        ...(!projectOverviewRefactor
+            ? [
+                  {
+                      title: 'Metrics',
+                      path: `${basePath}/metrics`,
+                      name: 'dora',
+                      isEnterprise: true,
+                  },
+              ]
+            : []),
         {
             title: 'Applications',
             path: `${basePath}/applications`,
@@ -133,14 +146,6 @@ export const Project = () => {
         },
     ];
 
-    if (projectOverviewRefactor) {
-        tabs.splice(1, 0, {
-            title: 'Insights',
-            path: `${basePath}/insights`,
-            name: 'insights',
-        });
-    }
-
     const filteredTabs = tabs
         .filter((tab) => {
             if (tab.flag) {
@@ -335,7 +340,9 @@ export const Project = () => {
                     }
                 />
                 <Route path='settings/*' element={<ProjectSettings />} />
-                <Route path='metrics' element={<ProjectDoraMetrics />} />
+                {Boolean(!projectOverviewRefactor) && (
+                    <Route path='metrics' element={<ProjectDoraMetrics />} />
+                )}
                 <Route path='applications' element={<ProjectApplications />} />
                 <Route path='*' element={<ProjectOverview />} />
             </Routes>

diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -9,6 +9,8 @@ import useProjectOverview, {
 } from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const refreshInterval = 15 * 1000;
 
@@ -36,6 +38,7 @@ const StyledContentContainer = styled(Box)(({ theme }) => ({
 const ProjectOverview: FC<{
     storageKey?: string;
 }> = ({ storageKey = 'project-overview-v2' }) => {
+    const projectOverviewRefactor = useUiFlag('projectOverviewRefactor');
     const projectId = useRequiredPathParam('projectId');
     const projectName = useProjectOverviewNameOrId(projectId);
     const { project } = useProjectOverview(projectId, {
@@ -58,16 +61,26 @@ const ProjectOverview: FC<{
 
     return (
         <StyledContainer key={projectId}>
-            <ProjectInfo
-                id={projectId}
-                description={description}
-                memberCount={members}
-                health={health}
-                featureTypeCounts={featureTypeCounts}
-                stats={stats}
+            <ConditionallyRender
+                condition={!projectOverviewRefactor}
+                show={
+                    <ProjectInfo
+                        id={projectId}
+                        description={description}
+                        memberCount={members}
+                        health={health}
+                        featureTypeCounts={featureTypeCounts}
+                        stats={stats}
+                    />
+                }
             />
+
             <StyledContentContainer>
-                <ProjectStats stats={project.stats} />
+                <ConditionallyRender
+                    condition={!projectOverviewRefactor}
+                    show={<ProjectStats stats={project.stats} />}
+                />
+
                 <StyledProjectToggles>
                     <ProjectFeatureToggles
                         environments={environments}