From 0bf45d2c41c35f2ac200d0937bc92816e2f0e9d0 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 21 Nov 2024 11:47:30 +0100
Subject: [PATCH] 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.
---
 .../src/component/project/Project/Project.tsx | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 15dbbf2eeb79..02573b9f3ea4 100644
--- 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>
     );
 };