chore: add placeholder project status sidebar

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>

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

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

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