1-3144: extract project status into own component.

This way, we don't need to reload the entire project page just to open/close it.
Unleash · Nov 21, 2024 · 0bf45d2 · 0bf45d2
1 parent 52a456a
commit 0bf45d2
Showing 1 changed file with 24 additions and 14 deletions.
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
@@ -118,6 +118,29 @@ const ProjectStatusButton = styled(Button)(({ theme }) => ({
     },
 }));
 
+const ProjectStatusSvgWithMargin = styled(ProjectStatusSvg)(({ theme }) => ({
+    marginLeft: theme.spacing(0.5),
+}));
+
+const ProjectStatus = () => {
+    const [projectStatusOpen, setProjectStatusOpen] = useState(false);
+    return (
+        <>
+            <ProjectStatusButton
+                onClick={() => setProjectStatusOpen(true)}
+                startIcon={<ProjectStatusSvgWithMargin />}
+                data-loading-project
+            >
+                Project status
+            </ProjectStatusButton>
+            <ProjectStatusModal
+                open={projectStatusOpen}
+                close={() => setProjectStatusOpen(false)}
+            />
+        </>
+    );
+};
+
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
     const { trackEvent } = usePlausibleTracker();
@@ -133,7 +156,6 @@ export const Project = () => {
     const projectName = project?.name || projectId;
     const { favorite, unfavorite } = useFavoriteProjectsApi();
     const simplifyProjectOverview = useUiFlag('simplifyProjectOverview');
-    const [projectStatusOpen, setProjectStatusOpen] = useState(false);
 
     const [showDelDialog, setShowDelDialog] = useState(false);
 
@@ -297,15 +319,7 @@ export const Project = () => {
                                     </PermissionIconButton>
                                 }
                             />
-                            {simplifyProjectOverview && (
-                                <ProjectStatusButton
-                                    onClick={() => setProjectStatusOpen(true)}
-                                    startIcon={<ProjectStatusSvg />}
-                                    data-loading-project
-                                >
-                                    Project status
-                                </ProjectStatusButton>
-                            )}
+                            {simplifyProjectOverview && <ProjectStatus />}
                         </StyledDiv>
                     </StyledTopRow>
                 </StyledInnerContainer>
@@ -428,10 +442,6 @@ export const Project = () => {
                 setOpen={setModalOpen}
                 project={projectId}
             />
-            <ProjectStatusModal
-                open={projectStatusOpen}
-                close={() => setProjectStatusOpen(false)}
-            />
         </div>
     );
 };