feat: dialogs for project revive and delete

Unleash · Aug 13, 2024 · eda518f · eda518f
1 parent 4738d4a
commit eda518f
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 40 deletions.
diff --git a/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx b/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
@@ -22,26 +22,25 @@ import TimeAgo from 'react-timeago';
 import { Box, Link, Tooltip } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import {
-    CREATE_PROJECT,
     DELETE_PROJECT,
+    UPDATE_PROJECT,
 } from 'component/providers/AccessProvider/permissions';
 import Undo from '@mui/icons-material/Undo';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import Delete from '@mui/icons-material/Delete';
 
-interface IProjectArchiveCardProps {
+export type ProjectArchiveCardProps = {
     id: string;
     name: string;
-    createdAt?: string;
     archivedAt?: string;
     featureCount: number;
     onRevive: () => void;
     onDelete: () => void;
-    mode: string;
+    mode?: string;
     owners?: ProjectSchemaOwners;
-}
+};
 
-export const ProjectArchiveCard: FC<IProjectArchiveCardProps> = ({
+export const ProjectArchiveCard: FC<ProjectArchiveCardProps> = ({
     id,
     name,
     archivedAt,
@@ -52,29 +51,6 @@ export const ProjectArchiveCard: FC<IProjectArchiveCardProps> = ({
     owners,
 }) => {
     const { locationSettings } = useLocationSettings();
-    const Actions: FC<{
-        id: string;
-    }> = ({ id }) => (
-        <StyledActions>
-            <PermissionIconButton
-                onClick={onRevive}
-                projectId={id}
-                permission={CREATE_PROJECT}
-                tooltipProps={{ title: 'Restore project' }}
-                data-testid={`revive-feature-flag-button`}
-            >
-                <Undo />
-            </PermissionIconButton>
-            <PermissionIconButton
-                permission={DELETE_PROJECT}
-                projectId={id}
-                tooltipProps={{ title: 'Permanently delete project' }}
-                onClick={onDelete}
-            >
-                <Delete />
-            </PermissionIconButton>
-        </StyledActions>
-    );
 
     return (
         <StyledProjectCard disabled>
@@ -131,13 +107,26 @@ export const ProjectArchiveCard: FC<IProjectArchiveCardProps> = ({
                     />
                 </StyledDivInfo>
             </StyledProjectCardBody>
-            <ProjectCardFooter
-                id={id}
-                Actions={Actions}
-                disabled
-                owners={owners}
-            >
-                <Actions id={id} />
+            <ProjectCardFooter id={id} disabled owners={owners}>
+                <StyledActions>
+                    <PermissionIconButton
+                        onClick={onRevive}
+                        projectId={id}
+                        permission={UPDATE_PROJECT}
+                        tooltipProps={{ title: 'Restore project' }}
+                        data-testid={`revive-feature-flag-button`}
+                    >
+                        <Undo />
+                    </PermissionIconButton>
+                    <PermissionIconButton
+                        permission={DELETE_PROJECT}
+                        projectId={id}
+                        tooltipProps={{ title: 'Permanently delete project' }}
+                        onClick={onDelete}
+                    >
+                        <Delete />
+                    </PermissionIconButton>
+                </StyledActions>
             </ProjectCardFooter>
         </StyledProjectCard>
     );

diff --git a/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx b/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
@@ -10,7 +10,6 @@ interface IProjectCardFooterProps {
     id: string;
     isFavorite?: boolean;
     children?: React.ReactNode;
-    Actions?: FC<{ id: string; isFavorite?: boolean }>;
     disabled?: boolean;
     owners: IProjectOwnersProps['owners'];
 }

diff --git a/frontend/src/component/project/NewProjectCard/ProjectModeBadge/ProjectModeBadge.tsx b/frontend/src/component/project/NewProjectCard/ProjectModeBadge/ProjectModeBadge.tsx
@@ -5,7 +5,7 @@ import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { Badge } from 'component/common/Badge/Badge';
 
 interface IProjectModeBadgeProps {
-    mode: 'private' | 'protected' | 'public' | string;
+    mode?: 'private' | 'protected' | 'public' | string;
 }
 
 export const ProjectModeBadge: FC<IProjectModeBadgeProps> = ({ mode }) => {

diff --git a/frontend/src/component/project/ProjectList/ArchiveProjectList.tsx b/frontend/src/component/project/ProjectList/ArchiveProjectList.tsx
@@ -9,7 +9,12 @@ import { styled, useMediaQuery } from '@mui/material';
 import theme from 'themes/theme';
 import { Search } from 'component/common/Search/Search';
 import { ProjectGroup } from './ProjectGroup';
-import { ProjectArchiveCard } from '../NewProjectCard/ProjectArchiveCard';
+import {
+    ProjectArchiveCard,
+    type ProjectArchiveCardProps,
+} from '../NewProjectCard/ProjectArchiveCard';
+import { ReviveProjectDialog } from './ReviveProjectDialog/ReviveProjectDialog';
+import { DeleteProjectDialogue } from '../Project/DeleteProject/DeleteProjectDialogue';
 
 const StyledApiError = styled(ApiError)(({ theme }) => ({
     maxWidth: '500px',
@@ -32,6 +37,15 @@ export const ArchiveProjectList: FC = () => {
     const [searchValue, setSearchValue] = useState(
         searchParams.get('search') || '',
     );
+    const [reviveProject, setReviveProject] = useState<{
+        isOpen: boolean;
+        id?: string;
+        name?: string;
+    }>({ isOpen: false });
+    const [deleteProject, setDeleteProject] = useState<{
+        isOpen: boolean;
+        id?: string;
+    }>({ isOpen: false });
 
     useEffect(() => {
         const tableState: PageQueryType = {};
@@ -44,6 +58,31 @@ export const ArchiveProjectList: FC = () => {
         });
     }, [searchValue, setSearchParams]);
 
+    const onRevive = (id: string) => {
+        setReviveProject({
+            isOpen: true,
+            id,
+            name: projects?.find((project) => project.id === id)?.name,
+        });
+    };
+    const onDelete = (id: string) => {
+        setDeleteProject({
+            id,
+            isOpen: true,
+        });
+    };
+
+    const ProjectCard: FC<
+        Omit<ProjectArchiveCardProps, 'onRevive' | 'onDelete'>
+    > = ({ id, ...props }) => (
+        <ProjectArchiveCard
+            onRevive={() => onRevive(id)}
+            onDelete={() => onDelete(id)}
+            id={id}
+            {...props}
+        />
+    );
+
     return (
         <PageContent
             isLoading={loading}
@@ -90,10 +129,33 @@ export const ArchiveProjectList: FC = () => {
                     searchValue={searchValue}
                     projects={projects}
                     placeholder='No archived projects found'
-                    ProjectCardComponent={ProjectArchiveCard}
+                    ProjectCardComponent={ProjectCard}
                     link={false}
                 />
             </StyledContainer>
+            <ReviveProjectDialog
+                id={reviveProject.id}
+                name={reviveProject.name}
+                open={reviveProject.isOpen}
+                onClose={() =>
+                    setReviveProject((state) => ({ ...state, isOpen: false }))
+                }
+                onSubmit={() => {
+                    // TODO: toast
+                    setReviveProject((state) => ({ ...state, isOpen: false }));
+                }}
+            />
+            <DeleteProjectDialogue
+                project={deleteProject.id || ''}
+                open={deleteProject.isOpen}
+                onClose={() => {
+                    setDeleteProject((state) => ({ ...state, isOpen: false }));
+                }}
+                onSuccess={() => {
+                    // TODO: toast
+                    setDeleteProject((state) => ({ ...state, isOpen: false }));
+                }}
+            />
         </PageContent>
     );
 };
diff --git a/frontend/src/component/project/ProjectList/DeleteProjectDialog/DeleteProjectDialog.tsx b/frontend/src/component/project/ProjectList/DeleteProjectDialog/DeleteProjectDialog.tsx
@@ -0,0 +1,30 @@
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+
+type DeleteProjectDialogProps = {
+    name?: string;
+    id?: string;
+    open: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+};
+
+export const DeleteProjectDialog = ({
+    name,
+    id,
+    open,
+    onClose,
+    onSubmit,
+}: DeleteProjectDialogProps) => (
+    <Dialogue
+        open={open}
+        // primaryButtonText={'Restore project'}
+        secondaryButtonText='Close'
+        onClose={onClose}
+        onClick={onSubmit}
+        title='Restore archived project'
+    >
+        Are you sure you'd like to delete project <strong>{name}</strong> (id:{' '}
+        <code>{id}</code>)?
+        {/* TODO: more explanation */}
+    </Dialogue>
+);
diff --git a/frontend/src/component/project/ProjectList/ReviveProjectDialog/ReviveProjectDialog.tsx b/frontend/src/component/project/ProjectList/ReviveProjectDialog/ReviveProjectDialog.tsx
@@ -0,0 +1,30 @@
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+
+type ReviveProjectDialogProps = {
+    name?: string;
+    id?: string;
+    open: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+};
+
+export const ReviveProjectDialog = ({
+    name,
+    id,
+    open,
+    onClose,
+    onSubmit,
+}: ReviveProjectDialogProps) => (
+    <Dialogue
+        open={open}
+        // primaryButtonText={'Restore project'}
+        secondaryButtonText='Close'
+        onClose={onClose}
+        onClick={onSubmit}
+        title='Restore archived project'
+    >
+        Are you sure you'd like to restore project <strong>{name}</strong> (id:{' '}
+        <code>{id}</code>)?
+        {/* TODO: more explanation */}
+    </Dialogue>
+);