diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index 199fc9afe9..1b63e81df9 100644 --- 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}} below:" }, "title": { "applicationAnalysis": "Application analysis", diff --git a/client/src/app/components/ConfirmDialog.tsx b/client/src/app/components/ConfirmDialog.tsx index f42e046c44..fb29f6a150 100644 --- 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 = ({ confirmBtnLabel, cancelBtnLabel, inProgress, + submitDisabled, confirmBtnVariant, onClose, onConfirm, @@ -48,7 +50,7 @@ export const ConfirmDialog: React.FC = ({ 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 index b02cf7666b..a7ac8bf141 100644 --- 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(); - 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={ } 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/client/src/app/pages/assessment-management/assessment-settings/delete-questionnaire/delete-questionnaire-message.tsx b/client/src/app/pages/assessment-management/assessment-settings/delete-questionnaire/delete-questionnaire-message.tsx index 2ef10f76db..2bc2bbb2b3 100644 --- a/client/src/app/pages/assessment-management/assessment-settings/delete-questionnaire/delete-questionnaire-message.tsx +++ b/client/src/app/pages/assessment-management/assessment-settings/delete-questionnaire/delete-questionnaire-message.tsx @@ -1,18 +1,20 @@ 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>; + inputName: string; + setInputName: Dispatch>; + questionnaireName: string | undefined; }; const DeleteQuestionnaireMessage: FC = ({ - questionnaireNameToDelete, - setQuestionnaireNameToDelete, + inputName, + setInputName, + questionnaireName, }) => { const { t } = useTranslation(); @@ -20,15 +22,17 @@ const DeleteQuestionnaireMessage: FC = ({ <> {t("dialog.message.deleteQuestionnaire")} {t("dialog.message.delete")} + - {t("dialog.message.confirmDeletion", { - what: t("terms.questionnaire").toLowerCase(), - })} + + Confirm deletion by typing {{ questionnaireName }}{" "} + below: + setQuestionnaireNameToDelete(value)} + value={inputName} + onChange={(event, value) => setInputName(value)} /> );