✨ Questionnaire delete confirmation (#1303)

Closes #1276 Adding an explanation of what happens if the questionnaire is deleted and forcing the user to write the questionnaire's name to deletion. Note: the input is case-sensitive to the name of the questionnaire. Before: ![delete-questionnaire-dialog-b4](https://github.com/konveyor/tackle2-ui/assets/67270715/ddc12fa3-431a-40a1-af67-61f6fbb41172) After: ![delete-questionnaire-dialog2](https://github.com/konveyor/tackle2-ui/assets/67270715/ef8de76d-ee19-456f-990b-c8a9f4f89600) ![delete-questionnaire-dialog](https://github.com/konveyor/tackle2-ui/assets/67270715/57819a1e-6924-4d1b-aab0-f945a92672c3) --------- Signed-off-by: Aviv Turgeman <aturgema@redhat.com>
konveyor · Sep 6, 2023 · 94293cc · 94293cc
1 parent d4b606b
commit 94293cc
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 18 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -100,7 +100,9 @@
       "refreshPage": "Try to refresh your page or contact your admin.",
       "maxfileSize": "Max file size of 1MB exceeded. Upload a smaller file.",
       "dragAndDropFile": "Drag and drop your file here or upload one.",
-      "uploadYamlFile": "Upload your YAML file"
+      "uploadYamlFile": "Upload your YAML file",
+      "deleteQuestionnaire": "Deleting a questionnaire will cascade into the deletion of all answered questionnaires associated to applications and/or archetypes.",
+      "confirmDeletion": "Confirm deletion by typing <1>{{nameToDelete}}</1> below:"
     },
     "title": {
       "applicationAnalysis": "Application analysis",

diff --git a/client/src/app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog.css b/client/src/app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog.css
@@ -0,0 +1,8 @@
+.confirm-deletion {
+  margin-top: var(--pf-v5-global--spacer--xl);
+}
+
+.confirm-deletion-input {
+  margin-top: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
+}
diff --git a/client/src/app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog.tsx b/client/src/app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog.tsx
@@ -0,0 +1,102 @@
+import React, { FC, useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
+import {
+  ModalProps,
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalVariant,
+  Text,
+  TextInput,
+} from "@patternfly/react-core";
+
+import "./ConfirmDeleteCatalog.css";
+
+type ConfirmDeleteDialogProps = {
+  cancelBtnLabel?: string;
+  deleteBtnLabel?: string;
+  deleteObjectMessage: string;
+  isOpen: boolean;
+  nameToDelete?: string;
+  onClose: () => void;
+  onConfirmDelete: () => void;
+  titleWhat: string;
+  titleIconVariant?: ModalProps["titleIconVariant"];
+};
+
+const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
+  cancelBtnLabel,
+  deleteBtnLabel,
+  deleteObjectMessage,
+  isOpen,
+  nameToDelete,
+  onClose,
+  onConfirmDelete,
+  titleWhat,
+  titleIconVariant = "warning",
+}) => {
+  const { t } = useTranslation();
+
+  const [nameToDeleteInput, setNameToDeleteInput] = useState<string>("");
+
+  const isDisabled = nameToDeleteInput !== nameToDelete;
+
+  const handleClose = () => {
+    setNameToDeleteInput("");
+    onClose();
+  };
+
+  const confirmBtn = (
+    <Button
+      id="confirm-delete-dialog-button"
+      key="confirm"
+      aria-label="confirm"
+      variant={ButtonVariant.danger}
+      isDisabled={isDisabled}
+      onClick={isDisabled ? undefined : onConfirmDelete}
+    >
+      {deleteBtnLabel ?? t("actions.delete")}
+    </Button>
+  );
+
+  const cancelBtn = (
+    <Button
+      key="cancel"
+      id="cancel-delete-button"
+      aria-label="cancel"
+      variant={ButtonVariant.link}
+      onClick={handleClose}
+    >
+      {cancelBtnLabel ?? t("actions.cancel")}
+    </Button>
+  );
+  return (
+    <Modal
+      id="confirm-delete-dialog"
+      variant={ModalVariant.small}
+      titleIconVariant={titleIconVariant}
+      isOpen={isOpen}
+      onClose={handleClose}
+      aria-label="Confirm delete dialog"
+      actions={[confirmBtn, cancelBtn]}
+      title={t("dialog.title.delete", {
+        what: titleWhat,
+      })}
+    >
+      <Text component="p">{deleteObjectMessage}</Text>
+      <Text component="p">{t("dialog.message.delete")}</Text>
+      <Text component="p" className="confirm-deletion">
+        <Trans i18nKey="dialog.message.confirmDeletion">
+          Confirm deletion by typing <strong>{{ nameToDelete }}</strong> below:
+        </Trans>
+      </Text>
+      <TextInput
+        className="confirm-deletion-input"
+        value={nameToDeleteInput}
+        onChange={(_, value) => setNameToDeleteInput(value)}
+      />
+    </Modal>
+  );
+};
+
+export default ConfirmDeleteDialog;
diff --git a/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx b/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx
@@ -43,14 +43,14 @@ import {
   TableRowContentWithControls,
 } from "@app/components/TableControls";
 import { ConditionalTooltip } from "@app/components/ConditionalTooltip";
-import { ConfirmDialog } from "@app/components/ConfirmDialog";
 import { useLocalTableControls } from "@app/hooks/table-controls";
 import { NotificationsContext } from "@app/components/NotificationsContext";
 import { getAxiosErrorMessage } from "@app/utils/utils";
 import { Questionnaire } from "@app/api/models";
 import { useHistory } from "react-router-dom";
 import { Paths } from "@app/Paths";
 import { ImportQuestionnaireForm } from "@app/pages/assessment/import-questionnaire-form/import-questionnaire-form";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog";
 
 const AssessmentSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -98,7 +98,7 @@ const AssessmentSettings: React.FC = () => {
     number | null
   >(null);
   const [questionnaireToDelete, setQuestionnaireToDelete] =
-    React.useState<Questionnaire | null>();
+    React.useState<Questionnaire>();
 
   const tableControls = useLocalTableControls({
     idProperty: "id",
@@ -417,24 +417,17 @@ const AssessmentSettings: React.FC = () => {
       >
         <Text>TODO Download YAML Template component</Text>
       </Modal>
-      <ConfirmDialog
-        title={t("dialog.title.delete", {
-          what: t("terms.questionnaire").toLowerCase(),
-        })}
+      <ConfirmDeleteDialog
+        deleteObjectMessage={t("dialog.message.deleteQuestionnaire")}
         isOpen={!!questionnaireToDelete}
-        titleIconVariant={"warning"}
-        message={t("dialog.message.delete")}
-        confirmBtnVariant={ButtonVariant.danger}
-        confirmBtnLabel={t("actions.delete")}
-        cancelBtnLabel={t("actions.cancel")}
-        onCancel={() => setQuestionnaireToDelete(null)}
-        onClose={() => setQuestionnaireToDelete(null)}
-        onConfirm={() => {
-          if (questionnaireToDelete) {
+        nameToDelete={questionnaireToDelete?.name}
+        onClose={() => setQuestionnaireToDelete(undefined)}
+        onConfirmDelete={() => {
+          questionnaireToDelete &&
             deleteQuestionnaire({ questionnaire: questionnaireToDelete });
-            setQuestionnaireToDelete(null);
-          }
+          setQuestionnaireToDelete(undefined);
         }}
+        titleWhat={t("terms.questionnaire").toLowerCase()}
       />
     </>
   );