Introduce ConfirmDeleteDialog

Signed-off-by: Aviv Turgeman <aturgema@redhat.com>

client/public/locales/en/translation.json

@@ -101,7 +101,7 @@
       "dragAndDropFile": "Drag and drop your file here or upload one.",
       "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>{{questionnaireName}}</1> below:"
+      "confirmDeletion": "Confirm deletion by typing <1>{{nameToDelete}}</1> below:"
     },
     "title": {
       "applicationAnalysis": "Application analysis",

client/src/app/pages/assessment-management/assessment-settings/delete-questionnaire/delete-questionnaire-message.css → client/src/app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog.css

@@ -1,7 +1,8 @@
 .confirm-deletion {
-  margin-top: var(--pf-v5-global--spacer--md);
+  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);
 }

client/src/app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog.tsx

@@ -0,0 +1,100 @@
+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 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={onClose}
+    >
+      {cancelBtnLabel ?? t("actions.cancel")}
+    </Button>
+  );
+  return (
+    <Modal
+      id="confirm-delete-dialog"
+      variant={ModalVariant.small}
+      titleIconVariant={titleIconVariant}
+      isOpen={isOpen}
+      onClose={() => {
+        setNameToDeleteInput("");
+        onClose();
+      }}
+      aria-label={t("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;

client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx

@@ -11,7 +11,6 @@ import {
   MenuToggle,
   MenuToggleElement,
   Modal,
-  ModalProps,
   ModalVariant,
   PageSection,
   PageSectionVariants,
@@ -44,15 +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 DeleteQuestionnaireMessage from "./delete-questionnaire/delete-questionnaire-message";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteCatalog/ConfirmDeleteCatalog";
 
 const AssessmentSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -100,7 +98,7 @@ const AssessmentSettings: React.FC = () => {
     number | null
   >(null);
   const [questionnaireToDelete, setQuestionnaireToDelete] =
-    React.useState<Questionnaire | null>();
+    React.useState<Questionnaire>();
 
   const [questionnaireNameInput, setQuestionnaireNameInput] =
     React.useState("");
@@ -158,7 +156,7 @@ const AssessmentSettings: React.FC = () => {
   // TODO: Check RBAC access
   const rbacWriteAccess = true; // checkAccess(userScopes, questionnaireWriteScopes);
   const handleDeleteQuestionnaireClose = () => {
-    setQuestionnaireToDelete(null);
+    setQuestionnaireToDelete(undefined);
     setQuestionnaireNameInput("");
   };
 
@@ -426,86 +424,19 @@ const AssessmentSettings: React.FC = () => {
       >
         <Text>TODO Download YAML Template component</Text>
       </Modal>
-      <ConfirmDialog
-        title={t("dialog.title.delete", {
-          what: t("terms.questionnaire").toLowerCase(),
-        })}
-        submitDisabled={questionnaireToDelete?.name !== questionnaireNameInput}
+      <ConfirmDeleteDialog
+        deleteObjectMessage={t("dialog.message.deleteQuestionnaire")}
         isOpen={!!questionnaireToDelete}
-        titleIconVariant={"warning"}
-        message={
-          <DeleteQuestionnaireMessage
-            inputName={questionnaireNameInput}
-            setInputName={setQuestionnaireNameInput}
-            questionnaireName={questionnaireToDelete?.name}
-          />
-        }
-        confirmBtnVariant={ButtonVariant.danger}
-        confirmBtnLabel={t("actions.delete")}
-        cancelBtnLabel={t("actions.cancel")}
-        onCancel={() => handleDeleteQuestionnaireClose()}
+        nameToDelete={questionnaireToDelete?.name}
         onClose={() => handleDeleteQuestionnaireClose()}
-        onConfirm={() => {
-          if (questionnaireToDelete?.name === questionnaireNameInput) {
+        onConfirmDelete={() => {
+          questionnaireToDelete &&
             deleteQuestionnaire({ questionnaire: questionnaireToDelete });
-            handleDeleteQuestionnaireClose();
-          }
+          handleDeleteQuestionnaireClose();
         }}
+        titleWhat={t("terms.questionnaire").toLowerCase()}
       />
     </>
   );
 };
 export default AssessmentSettings;
-
-type ConfirmDeleteDialogProps = {
-  deleteBtnLabel?: string;
-  isOpen: boolean;
-  isDisabled?: boolean;
-  onClose: () => void;
-  onConfirmDelete: () => void;
-  titleWhat: string;
-  titleIconVariant?: ModalProps["titleIconVariant"];
-};
-
-const ConfirmDeleteDialog: React.FC<ConfirmDeleteDialogProps> = ({
-  deleteBtnLabel = undefined,
-  isOpen,
-  isDisabled = false,
-  onClose,
-  onConfirmDelete,
-  titleWhat,
-  titleIconVariant = "warning",
-}) => {
-  const { t } = useTranslation();
-  const confirmBtn = (
-    <Button
-      id="confirm-delete-dialog-button"
-      key="confirm"
-      aria-label="confirm"
-      variant={ButtonVariant.danger}
-      isDisabled={isDisabled}
-      onClick={onConfirmDelete}
-    >
-      {deleteBtnLabel ?? t("actions.delete")}
-    </Button>
-  );
-  return (
-    <Modal
-      id="confirm-delete-dialog"
-      variant={ModalVariant.small}
-      titleIconVariant={titleIconVariant}
-      isOpen={isOpen}
-      onClose={onClose}
-      aria-label={t("Confirm delete dialog")}
-      actions={[confirmBtn]}
-      title={t("dialog.title.delete", {
-        what: titleWhat,
-      })}
-    >
-      {/* <DeleteQuestionnaireMessage
-        questionnaireNameToDelete={questionnaireNameToDelete}
-        setQuestionnaireNameToDelete={setQuestionnaireNameToDelete}
-      /> */}
-    </Modal>
-  );
-};