diff --git a/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCardMenu.tsx b/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCardMenu.tsx index 921953fece49..08c279dcba50 100644 --- a/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCardMenu.tsx +++ b/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCardMenu.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { IconButton, Tooltip, @@ -8,12 +8,34 @@ import { } from '@mui/material'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import type { IReleasePlanTemplate } from 'interfaces/releasePlans'; +import { useReleasePlanTemplatesApi } from 'hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi'; +import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates'; +import useToast from 'hooks/useToast'; +import { formatUnknownError } from 'utils/formatUnknownError'; +import { TemplateDeleteDialog } from './TemplateDeleteDialog'; export const ReleasePlanTemplateCardMenu = ({ template, }: { template: IReleasePlanTemplate }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [anchorEl, setAnchorEl] = useState(null); + const { deleteReleasePlanTemplate } = useReleasePlanTemplatesApi(); + const { refetch } = useReleasePlanTemplates(); + const { setToastData, setToastApiError } = useToast(); + const [deleteOpen, setDeleteOpen] = useState(false); + const deleteReleasePlan = useCallback(async () => { + try { + await deleteReleasePlanTemplate(template.id); + refetch(); + setToastData({ + type: 'success', + title: 'Success', + text: 'Release plan template deleted', + }); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); + } + }, [setToastApiError, refetch, setToastData, deleteReleasePlanTemplate]); const closeMenu = () => { setIsMenuOpen(false); @@ -66,12 +88,19 @@ export const ReleasePlanTemplateCardMenu = ({ { + setDeleteOpen(true); closeMenu(); }} > - Delete template + Delete template + ); }; diff --git a/frontend/src/component/releases/ReleaseManagement/TemplateDeleteDialog.tsx b/frontend/src/component/releases/ReleaseManagement/TemplateDeleteDialog.tsx new file mode 100644 index 000000000000..b08a14bf8533 --- /dev/null +++ b/frontend/src/component/releases/ReleaseManagement/TemplateDeleteDialog.tsx @@ -0,0 +1,34 @@ +import { Dialogue } from 'component/common/Dialogue/Dialogue'; +import type { IReleasePlanTemplate } from 'interfaces/releasePlans'; + +interface ITemplateDeleteDialogProps { + template?: IReleasePlanTemplate; + open: boolean; + setOpen: React.Dispatch>; + onConfirm: (template: IReleasePlanTemplate) => void; +} + +export const TemplateDeleteDialog: React.FC = ({ + template, + open, + setOpen, + onConfirm, +}) => { + return ( + onConfirm(template!)} + onClose={() => { + setOpen(false); + }} + > +

+ You are about to delete release plan template:{' '} + {template?.name} +

+
+ ); +}; diff --git a/frontend/src/hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi.ts b/frontend/src/hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi.ts new file mode 100644 index 000000000000..355870c94a32 --- /dev/null +++ b/frontend/src/hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi.ts @@ -0,0 +1,23 @@ +import useAPI from '../useApi/useApi'; + +export const useReleasePlanTemplatesApi = () => { + const { makeRequest, makeLightRequest, createRequest, errors, loading } = + useAPI({ + propagateErrors: true, + }); + + const deleteReleasePlanTemplate = async (id: string) => { + const path = `api/admin/release-plan-templates/${id}`; + const req = createRequest(path, { + method: 'DELETE', + }); + + return makeRequest(req.caller, req.id); + }; + + return { + deleteReleasePlanTemplate, + }; +}; + +export default useReleasePlanTemplatesApi;