feat: UI for archiving release templates (#9415)

frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCard/ReleasePlanTemplateCardActions.tsx

@@ -16,11 +16,13 @@ import { useReleasePlanTemplatesApi } from 'hooks/api/actions/useReleasePlanTemp
 import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
-import { TemplateDeleteDialog } from '../TemplateDeleteDialog';
+import { TemplateArchiveDialog } from '../TemplateArchiveDialog';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Link } from 'react-router-dom';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { RELEASE_PLAN_TEMPLATE_DELETE } from '@server/types/permissions';
+import { useHasRootAccess } from 'hooks/useHasAccess';
 
 const StyledActions = styled('div')(({ theme }) => ({
     margin: theme.spacing(-1),
@@ -39,30 +41,31 @@ export const ReleasePlanTemplateCardActions = ({
     template,
 }: { template: IReleasePlanTemplate }) => {
     const [anchorEl, setAnchorEl] = useState<Element | null>(null);
-    const { deleteReleasePlanTemplate } = useReleasePlanTemplatesApi();
+    const { archiveReleasePlanTemplate } = useReleasePlanTemplatesApi();
     const { refetch } = useReleasePlanTemplates();
     const { setToastData, setToastApiError } = useToast();
     const { trackEvent } = usePlausibleTracker();
-    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [archiveOpen, setArchiveOpen] = useState(false);
-    const deleteReleasePlan = useCallback(async () => {
+    const hasArchivePermission = useHasRootAccess(RELEASE_PLAN_TEMPLATE_DELETE);
+    const archiveReleasePlan = useCallback(async () => {
         try {
-            await deleteReleasePlanTemplate(template.id);
+            await archiveReleasePlanTemplate(template.id);
             refetch();
             setToastData({
                 type: 'success',
-                text: 'Release plan template deleted',
+                text: 'Release plan template archived',
             });
 
             trackEvent('release-management', {
                 props: {
-                    eventType: 'delete-template',
+                    eventType: 'archive-template',
                     template: template.name,
                 },
             });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }
-    }, [setToastApiError, refetch, setToastData, deleteReleasePlanTemplate]);
+    }, [setToastApiError, refetch, setToastData, archiveReleasePlanTemplate]);
 
     const open = Boolean(anchorEl);
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -121,26 +124,27 @@ export const ReleasePlanTemplateCardActions = ({
                     </MenuItem>
                     <MenuItem
                         onClick={() => {
-                            setDeleteOpen(true);
+                            setArchiveOpen(true);
                             handleClose();
                         }}
+                        disabled={!hasArchivePermission}
                     >
                         <ListItemIcon>
                             <DeleteIcon />
                         </ListItemIcon>
                         <ListItemText>
                             <Typography variant='body2'>
-                                Delete template
+                                Archive template
                             </Typography>
                         </ListItemText>
                     </MenuItem>
                 </MenuList>
             </StyledPopover>
-            <TemplateDeleteDialog
+            <TemplateArchiveDialog
                 template={template}
-                open={deleteOpen}
+                open={archiveOpen}
-                setOpen={setDeleteOpen}
+                setOpen={setArchiveOpen}
-                onConfirm={deleteReleasePlan}
+                onConfirm={archiveReleasePlan}
             />
         </StyledActions>
     );

frontend/src/component/releases/ReleaseManagement/TemplateArchiveDialog.tsx

@@ -0,0 +1,43 @@
+import { RELEASE_PLAN_TEMPLATE_DELETE } from '@server/types/permissions';
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
+import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
+
+interface ITemplateArchiveDialogProps {
+    template?: IReleasePlanTemplate;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    onConfirm: (template: IReleasePlanTemplate) => void;
+}
+
+export const TemplateArchiveDialog: React.FC<ITemplateArchiveDialogProps> = ({
+    template,
+    open,
+    setOpen,
+    onConfirm,
+}) => {
+    return (
+        <Dialogue
+            title='Archive release plan template?'
+            open={open}
+            secondaryButtonText='Cancel'
+            onClose={() => {
+                setOpen(false);
+            }}
+            permissionButton={
+                <PermissionButton
+                    variant='contained'
+                    onClick={() => onConfirm(template!)}
+                    permission={RELEASE_PLAN_TEMPLATE_DELETE}
+                >
+                    Archive template
+                </PermissionButton>
+            }
+        >
+            <p>
+                You are about to archive release plan template:{' '}
+                <strong>{template?.name}</strong>
+            </p>
+        </Dialogue>
+    );
+};

frontend/src/component/releases/ReleaseManagement/TemplateDeleteDialog.tsx

@@ -1,34 +0,0 @@
-import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
-
-interface ITemplateDeleteDialogProps {
-    template?: IReleasePlanTemplate;
-    open: boolean;
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    onConfirm: (template: IReleasePlanTemplate) => void;
-}
-
-export const TemplateDeleteDialog: React.FC<ITemplateDeleteDialogProps> = ({
-    template,
-    open,
-    setOpen,
-    onConfirm,
-}) => {
-    return (
-        <Dialogue
-            title='Delete release plan template?'
-            open={open}
-            primaryButtonText='Delete template'
-            secondaryButtonText='Cancel'
-            onClick={() => onConfirm(template!)}
-            onClose={() => {
-                setOpen(false);
-            }}
-        >
-            <p>
-                You are about to delete release plan template:{' '}
-                <strong>{template?.name}</strong>
-            </p>
-        </Dialogue>
-    );
-};

frontend/src/hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi.ts

@@ -60,10 +60,25 @@ export const useReleasePlanTemplatesApi = () => {
         return makeRequest(req.caller, req.id);
     };
 
+    const archiveReleasePlanTemplate = async (templateId: string) => {
+        const requestId = 'updateReleasePlanTemplate';
+        const path = `api/admin/release-plan-templates/archive/${templateId}`;
+        const req = createRequest(
+            path,
+            {
+                method: 'POST',
+            },
+            requestId,
+        );
+
+        return makeRequest(req.caller, req.id);
+    };
+
     return {
         deleteReleasePlanTemplate,
         updateReleasePlanTemplate,
         createReleasePlanTemplate,
+        archiveReleasePlanTemplate,
     };
 };