✨ Implement delete archetype kebab action (#1333)

Part of #1264, followup to #1328. ![Screenshot 2023-09-06 at 4 43 16 PM](https://github.com/konveyor/tackle2-ui/assets/811963/f3dde2f4-22ff-4234-b591-dbfa8025cb8a) Note that the change to the MSW mock is because that line was a typo that resulted in a 404 when deleting an archetype, the delete questionnaire endpoint is already mocked in its own file. --------- Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
konveyor · Sep 7, 2023 · b82ba82 · b82ba82
1 parent 94293cc
commit b82ba82
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -109,6 +109,7 @@
       "copyApplicationAssessmentAndReviewFrom": "Copy {{what}} assessment and review",
       "copyApplicationAssessmentFrom": "Copy {{what}} assessment",
       "delete": "Delete {{what}}?",
+      "deleteWithName": "Delete {{what}} \"{{name}}\"?",
       "discard": "Discard {{what}}?",
       "download": "Download {{what}}",
       "edit": "Edit {{what}}",
@@ -216,6 +217,7 @@
     "applicationImports": "Application imports",
     "applicationName": "Application name",
     "applications": "Applications",
+    "archetype": "Archetype",
     "archetypes": "Archetypes",
     "artifact": "Artifact",
     "artifactAssociated": "Associated artifact",

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -39,12 +39,19 @@ import {
   TableRowContentWithControls,
 } from "@app/components/TableControls";
 import { useLocalTableControls } from "@app/hooks/table-controls";
-import { useFetchArchetypes } from "@app/queries/archetypes";
+import {
+  useDeleteArchetypeMutation,
+  useFetchArchetypes,
+} from "@app/queries/archetypes";
 
 import ArchetypeApplicationsColumn from "./components/archetype-applications-column";
 import ArchetypeDescriptionColumn from "./components/archetype-description-column";
 import ArchetypeMaintainersColumn from "./components/archetype-maintainers-column";
 import ArchetypeTagsColumn from "./components/archetype-tags-column";
+import { Archetype } from "@app/api/models";
+import { ConfirmDialog } from "@app/components/ConfirmDialog";
+import { getAxiosErrorMessage } from "@app/utils/utils";
+import { AxiosError } from "axios";
 
 const Archetypes: React.FC = () => {
   const { t } = useTranslation();
@@ -53,6 +60,27 @@ const Archetypes: React.FC = () => {
 
   const { archetypes, isFetching, error: fetchError } = useFetchArchetypes();
 
+  const onError = (error: AxiosError) => {
+    pushNotification({
+      title: getAxiosErrorMessage(error),
+      variant: "danger",
+    });
+  };
+
+  const [archetypeToDelete, setArchetypeToDelete] =
+    React.useState<Archetype | null>(null);
+  const { mutate: deleteArchetype } = useDeleteArchetypeMutation(
+    (archetypeDeleted) =>
+      pushNotification({
+        title: t("toastr.success.deletedWhat", {
+          what: archetypeDeleted.name,
+          type: t("terms.archetype"),
+        }),
+        variant: "success",
+      }),
+    onError
+  );
+
   const tableControls = useLocalTableControls({
     idProperty: "id",
     items: archetypes,
@@ -224,7 +252,7 @@ const Archetypes: React.FC = () => {
                               { isSeparator: true },
                               {
                                 title: t("actions.delete"),
-                                onClick: () => alert("TODO"),
+                                onClick: () => setArchetypeToDelete(archetype),
                                 isDanger: true,
                               },
                             ]}
@@ -244,7 +272,26 @@ const Archetypes: React.FC = () => {
 
       {/* TODO: Add create/edit modal */}
       {/* TODO: Add duplicate confirm modal */}
-      {/* TODO: Add delete confirm modal */}
+      <ConfirmDialog
+        title={t("dialog.title.deleteWithName", {
+          what: t("terms.archetype").toLowerCase(),
+          name: archetypeToDelete?.name,
+        })}
+        isOpen={!!archetypeToDelete}
+        titleIconVariant="warning"
+        message={t("dialog.message.delete")}
+        confirmBtnVariant={ButtonVariant.danger}
+        confirmBtnLabel={t("actions.delete")}
+        cancelBtnLabel={t("actions.cancel")}
+        onCancel={() => setArchetypeToDelete(null)}
+        onClose={() => setArchetypeToDelete(null)}
+        onConfirm={() => {
+          if (archetypeToDelete) {
+            deleteArchetype(archetypeToDelete);
+            setArchetypeToDelete(null);
+          }
+        }}
+      />
     </>
   );
 };

diff --git a/client/src/app/queries/archetypes.ts b/client/src/app/queries/archetypes.ts
@@ -78,17 +78,17 @@ export const useUpdateArchetypeMutation = (
 };
 
 export const useDeleteArchetypeMutation = (
-  onSuccess: (id: number) => void,
+  onSuccess: (archetype: Archetype) => void,
   onError: (err: AxiosError) => void
 ) => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: deleteArchetype,
-    onSuccess: (_, id) => {
-      onSuccess(id);
+    mutationFn: (archetype: Archetype) => deleteArchetype(archetype.id),
+    onSuccess: (_, archetype) => {
+      onSuccess(archetype);
       queryClient.invalidateQueries([ARCHETYPES_QUERY_KEY]);
-      queryClient.invalidateQueries([ARCHETYPE_QUERY_KEY, id]);
+      queryClient.invalidateQueries([ARCHETYPE_QUERY_KEY, archetype.id]);
     },
     onError: onError,
   });

diff --git a/client/src/mocks/stub-new-work/archetypes.ts b/client/src/mocks/stub-new-work/archetypes.ts
@@ -76,7 +76,7 @@ const handlers: RestHandler[] = [
     return res(ctx.status(404));
   }),
 
-  rest.delete(`${AppRest.QUESTIONNAIRES}/:id`, (req, res, ctx) => {
+  rest.delete(`${AppRest.ARCHETYPES}/:id`, (req, res, ctx) => {
     const { id } = req.params;
     console.log(
       "%c✏️ archetype stub%c 🤖 %s",