Add questionnaire name to confirm message

Signed-off-by: Aviv Turgeman <aturgema@redhat.com>
konveyor · Aug 27, 2023 · 10c4a95 · 10c4a95
1 parent da2ad29
commit 10c4a95
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/client/public/locales/en/translation.json b/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": "Please enter the name of the {{what}} below to confirm:"
+      "confirmDeletion": "Confirm deletion by typing <1>{{questionnaireName}}</1> below:"
     },
     "title": {
       "applicationAnalysis": "Application analysis",

diff --git a/client/src/app/components/ConfirmDialog.tsx b/client/src/app/components/ConfirmDialog.tsx
@@ -22,6 +22,7 @@ export interface ConfirmDialogProps {
   cancelBtnLabel: string;
 
   inProgress?: boolean;
+  submitDisabled?: boolean;
   confirmBtnVariant: ButtonVariant;
 
   onClose: () => void;
@@ -37,6 +38,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   confirmBtnLabel,
   cancelBtnLabel,
   inProgress,
+  submitDisabled,
   confirmBtnVariant,
   onClose,
   onConfirm,
@@ -48,7 +50,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
       key="confirm"
       aria-label="confirm"
       variant={confirmBtnVariant}
-      isDisabled={inProgress}
+      isDisabled={submitDisabled || inProgress}
       onClick={onConfirm}
     >
       {confirmBtnLabel}

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
@@ -101,7 +101,7 @@ const AssessmentSettings: React.FC = () => {
   const [questionnaireToDelete, setQuestionnaireToDelete] =
     React.useState<Questionnaire | null>();
 
-  const [questionnaireNameToDelete, setQuestionnaireNameToDelete] =
+  const [questionnaireNameInput, setQuestionnaireNameInput] =
     React.useState("");
 
   const tableControls = useLocalTableControls({
@@ -156,7 +156,7 @@ const AssessmentSettings: React.FC = () => {
 
   const handleDeleteQuestionnaireClose = () => {
     setQuestionnaireToDelete(null);
-    setQuestionnaireNameToDelete("");
+    setQuestionnaireNameInput("");
   };
 
   return (
@@ -431,13 +431,14 @@ const AssessmentSettings: React.FC = () => {
         title={t("dialog.title.delete", {
           what: t("terms.questionnaire").toLowerCase(),
         })}
-        inProgress={questionnaireToDelete?.name !== questionnaireNameToDelete}
+        submitDisabled={questionnaireToDelete?.name !== questionnaireNameInput}
         isOpen={!!questionnaireToDelete}
         titleIconVariant={"warning"}
         message={
           <DeleteQuestionnaireMessage
-            questionnaireNameToDelete={questionnaireNameToDelete}
-            setQuestionnaireNameToDelete={setQuestionnaireNameToDelete}
+            inputName={questionnaireNameInput}
+            setInputName={setQuestionnaireNameInput}
+            questionnaireName={questionnaireToDelete?.name}
           />
         }
         confirmBtnVariant={ButtonVariant.danger}
@@ -446,7 +447,7 @@ const AssessmentSettings: React.FC = () => {
         onCancel={() => handleDeleteQuestionnaireClose()}
         onClose={() => handleDeleteQuestionnaireClose()}
         onConfirm={() => {
-          if (questionnaireToDelete?.name === questionnaireNameToDelete) {
+          if (questionnaireToDelete?.name === questionnaireNameInput) {
             deleteQuestionnaire({ questionnaire: questionnaireToDelete });
             handleDeleteQuestionnaireClose();
           }

diff --git a/...ment-management/assessment-settings/delete-questionnaire/delete-questionnaire-message.tsx b/...ment-management/assessment-settings/delete-questionnaire/delete-questionnaire-message.tsx
@@ -1,34 +1,38 @@
 import React, { Dispatch, FC, SetStateAction } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { Text, TextInput } from "@patternfly/react-core";
 
 import "./delete-questionnaire-message.css";
 
 type DeleteQuestionnaireMessageProps = {
-  questionnaireNameToDelete: string;
-  setQuestionnaireNameToDelete: Dispatch<SetStateAction<string>>;
+  inputName: string;
+  setInputName: Dispatch<SetStateAction<string>>;
+  questionnaireName: string | undefined;
 };
 
 const DeleteQuestionnaireMessage: FC<DeleteQuestionnaireMessageProps> = ({
-  questionnaireNameToDelete,
-  setQuestionnaireNameToDelete,
+  inputName,
+  setInputName,
+  questionnaireName,
 }) => {
   const { t } = useTranslation();
 
   return (
     <>
       <Text component="p">{t("dialog.message.deleteQuestionnaire")}</Text>
       <Text component="p">{t("dialog.message.delete")}</Text>
+
       <Text component="p" className="confirm-deletion">
-        {t("dialog.message.confirmDeletion", {
-          what: t("terms.questionnaire").toLowerCase(),
-        })}
+        <Trans i18nKey="dialog.message.confirmDeletion">
+          Confirm deletion by typing <strong>{{ questionnaireName }}</strong>{" "}
+          below:
+        </Trans>
       </Text>
       <TextInput
         className="confirm-deletion-input"
-        value={questionnaireNameToDelete}
-        onChange={(event, value) => setQuestionnaireNameToDelete(value)}
+        value={inputName}
+        onChange={(event, value) => setInputName(value)}
       />
     </>
   );