chore: add placeholder project status sidebar (#8629)

This PR adds an empty placeholder sidebar for the project status content. It also adds a button to open the sidebar. Additionally, because the button to open the sidebar takes the place of the existing "import" button, the import button has also been moved down to the filter row. Of course, these changes are all behind the flag, so if nothing should change if the flag is not enabled. ![image](https://github.com/user-attachments/assets/ca2d6136-5705-4ec0-9c26-21981827ca07) ![image](https://github.com/user-attachments/assets/383d2a09-ab56-4ff6-b801-df9da5a19765)
2025-04-10 01:16:39 +02:00 · 2024-11-01 13:04:22 +01:00 · 2024-11-01 13:04:22 +01:00 · c9a564a556
commit c9a564a556
parent bbe389d19e
5 changed files with 101 additions and 14 deletions
--- a/frontend/src/assets/icons/projectStatus.svg
+++ b/frontend/src/assets/icons/projectStatus.svg
@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.125 0C15.7917 0 17.1875 0.616667 18.3125 1.85C19.4375 3.08333 20 4.55 20 6.25C20 6.55 19.9833 6.84583 19.95 7.1375C19.9167 7.42917 19.8583 7.71667 19.775 8H13.525L11.825 5.45C11.7417 5.31667 11.625 5.20833 11.475 5.125C11.325 5.04167 11.1667 5 11 5C10.7833 5 10.5875 5.06667 10.4125 5.2C10.2375 5.33333 10.1167 5.5 10.05 5.7L8.7 9.75L7.825 8.45C7.74167 8.31667 7.625 8.20833 7.475 8.125C7.325 8.04167 7.16667 8 7 8H0.225C0.141667 7.71667 0.0833333 7.42917 0.05 7.1375C0.0166667 6.84583 0 6.55833 0 6.275C0 4.55833 0.558333 3.08333 1.675 1.85C2.79167 0.616667 4.18333 0 5.85 0C6.65 0 7.40417 0.158333 8.1125 0.475C8.82083 0.791667 9.45 1.23333 10 1.8C10.5333 1.23333 11.1542 0.791667 11.8625 0.475C12.5708 0.158333 13.325 0 14.125 0ZM10 18C9.7 18 9.4125 17.9458 9.1375 17.8375C8.8625 17.7292 8.61667 17.5667 8.4 17.35L1.7 10.625C1.6 10.525 1.50833 10.425 1.425 10.325C1.34167 10.225 1.25833 10.1167 1.175 10H6.45L8.15 12.55C8.23333 12.6833 8.35 12.7917 8.5 12.875C8.65 12.9583 8.80833 13 8.975 13C9.19167 13 9.39167 12.9333 9.575 12.8C9.75833 12.6667 9.88333 12.5 9.95 12.3L11.3 8.25L12.15 9.55C12.25 9.68333 12.375 9.79167 12.525 9.875C12.675 9.95833 12.8333 10 13 10H18.8L18.55 10.3L18.3 10.6L11.575 17.35C11.3583 17.5667 11.1167 17.7292 10.85 17.8375C10.5833 17.9458 10.3 18 10 18Z" fill="#000"/>
+</svg>
--- a/frontend/src/component/project/Project/Import/ImportModal.tsx
+++ b/frontend/src/component/project/Project/Import/ImportModal.tsx
@ -73,7 +73,7 @@ export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => {
    };

    return (
-        <SidebarModal open={open} onClose={close} label='Import toggles'>
+        <SidebarModal open={open} onClose={close} label='Import flags'>
            <ModalContentContainer>
                <TimelineContainer>
                    <TimelineHeader>Process</TimelineHeader>
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@ -1,3 +1,4 @@
+import { ReactComponent as ImportSvg } from 'assets/icons/import.svg';
 import { useCallback, useMemo, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageContent } from 'component/common/PageContent/PageContent';
@ -49,6 +50,10 @@ import { ProjectOnboarded } from 'component/onboarding/flow/ProjectOnboarded';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { ArchivedFeatureActionCell } from '../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureActionCell';
 import { ArchiveBatchActions } from '../../../archive/ArchiveTable/ArchiveBatchActions';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { UPDATE_FEATURE } from '@server/types/permissions';
+import { ImportModal } from '../Import/ImportModal';
+import { IMPORT_BUTTON } from 'utils/testIds';

 interface IPaginatedProjectFeatureTogglesProps {
    environments: string[];
@ -66,6 +71,19 @@ const Container = styled('div')(({ theme }) => ({
    gap: theme.spacing(2),
 }));

+const FilterRow = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row wrap',
+    gap: theme.spacing(2),
+    justifyContent: 'space-between',
+}));
+
+const ButtonGroup = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    paddingInline: theme.spacing(1.5),
+}));
+
 export const ProjectFeatureToggles = ({
    environments,
 }: IPaginatedProjectFeatureTogglesProps) => {
@ -74,6 +92,8 @@ 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 {
        features,
@ -561,11 +581,27 @@ export const ProjectFeatureToggles = ({
                            aria-busy={isPlaceholder}
                            aria-live='polite'
                        >
-                            <ProjectOverviewFilters
-                                project={projectId}
-                                onChange={setTableState}
-                                state={filterState}
-                            />
+                            <FilterRow>
+                                <ProjectOverviewFilters
+                                    project={projectId}
+                                    onChange={setTableState}
+                                    state={filterState}
+                                />
+                                {simplifyProjectOverview && (
+                                    <ButtonGroup>
+                                        <PermissionIconButton
+                                            permission={UPDATE_FEATURE}
+                                            projectId={projectId}
+                                            onClick={() => setModalOpen(true)}
+                                            tooltipProps={{ title: 'Import' }}
+                                            data-testid={IMPORT_BUTTON}
+                                            data-loading-project
+                                        >
+                                            <ImportSvg />
+                                        </PermissionIconButton>
+                                    </ButtonGroup>
+                                )}
+                            </FilterRow>
                            <SearchHighlightProvider
                                value={tableState.query || ''}
                            >
@ -583,7 +619,6 @@ export const ProjectFeatureToggles = ({
                                }
                            />
                            {rowActionsDialogs}
-
                            {featureToggleModals}
                        </div>
                    </PageContent>
@ -627,6 +662,12 @@ export const ProjectFeatureToggles = ({
                    />
                )}
            </BatchSelectionActionsBar>
+
+            <ImportModal
+                open={modalOpen}
+                setOpen={setModalOpen}
+                project={projectId}
+            />
        </Container>
    );
 };
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@ -2,6 +2,7 @@ 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,
    StyledFavoriteIconButton,
@ -21,15 +22,11 @@ import {
    Tabs,
    Typography,
    styled,
+    Button,
 } from '@mui/material';
 import useToast from 'hooks/useToast';
 import useQueryParams from 'hooks/useQueryParams';
-import {
-    type PropsWithChildren,
-    useEffect,
-    useState,
-    type ReactNode,
-} from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import ProjectEnvironment from '../ProjectEnvironment/ProjectEnvironment';
 import { ProjectFeaturesArchive } from './ProjectFeaturesArchive/ProjectFeaturesArchive';
 import ProjectFlags from './ProjectFlags';
@ -59,6 +56,7 @@ 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 './ProjectStatusModal';

 const StyledBadge = styled(Badge)(({ theme }) => ({
    position: 'absolute',
@ -105,6 +103,15 @@ const ChangeRequestsLabel = () => {
    );
 };

+const ProjectStatusButton = styled(Button)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: 'bold',
+    'svg *': {
+        fill: theme.palette.primary.main,
+    },
+}));
+
 export const Project = () => {
    const projectId = useRequiredPathParam('projectId');
    const { trackEvent } = usePlausibleTracker();
@ -120,6 +127,7 @@ 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);

@ -266,7 +274,8 @@ export const Project = () => {
                        <StyledDiv>
                            <ConditionallyRender
                                condition={Boolean(
-                                    uiConfig?.flags?.featuresExportImport,
+                                    !simplifyProjectOverview &&
+                                        uiConfig?.flags?.featuresExportImport,
                                )}
                                show={
                                    <PermissionIconButton
@ -281,6 +290,15 @@ export const Project = () => {
                                    </PermissionIconButton>
                                }
                            />
+                            {simplifyProjectOverview && (
+                                <ProjectStatusButton
+                                    onClick={() => setProjectStatusOpen(true)}
+                                    startIcon={<ProjectStatusSvg />}
+                                    data-loading-project
+                                >
+                                    Project status
+                                </ProjectStatusButton>
+                            )}
                        </StyledDiv>
                    </StyledTopRow>
                </StyledInnerContainer>
@ -393,6 +411,10 @@ export const Project = () => {
                setOpen={setModalOpen}
                project={projectId}
            />
+            <ProjectStatusModal
+                open={projectStatusOpen}
+                close={() => setProjectStatusOpen(false)}
+            />
        </div>
    );
 };
--- a/frontend/src/component/project/Project/ProjectStatusModal.tsx
+++ b/frontend/src/component/project/Project/ProjectStatusModal.tsx
@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+
+const ModalContentContainer = styled('div')(({ theme }) => ({
+    minHeight: '100vh',
+    display: 'flex',
+    backgroundColor: theme.palette.background.default,
+}));
+
+type Props = {
+    open: boolean;
+    close: () => void;
+};
+
+export const ProjectStatusModal = ({ open, close }: Props) => {
+    return (
+        <SidebarModal open={open} onClose={close} label='Project status'>
+            <ModalContentContainer />
+        </SidebarModal>
+    );
+};