Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

1-3144: extract project status into own component. (#8823)

Browse Source 
This way, we don't need to reload the entire project page just to
open/close it.

Will probably resolve the performance issues.
This commit is contained in:
Thomas Heartman 2024-11-21 12:03:19 +01:00 committed by GitHub
parent 52a456a759
commit 4ded068de7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/component/project/Project/Project.tsx
View File

@ -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>
);
};