🐛 Enable save on assessment change (#1858)

The change is detected by comparing form values with initial values.
Properties checked:
1. stakeholders
2. stakeholder groups
3. questions

Resolves: https://issues.redhat.com/browse/MTA-2655

Signed-off-by: Radoslaw Szwajkowski <[email protected]>

Author: rszwajko

client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx

@@ -114,6 +114,8 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
     return comments;
   }, [assessment]);
 
+  const initialStakeholders = assessment?.stakeholders ?? [];
+  const initialStakeholderGroups = assessment?.stakeholderGroups ?? [];
   const initialQuestions = useMemo(() => {
     const questions: { [key: string]: string | undefined } = {};
     if (assessment) {
@@ -146,8 +148,8 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
     resolver: yupResolver(validationSchema),
     mode: "all",
     defaultValues: {
-      stakeholders: assessment?.stakeholders ?? [],
-      stakeholderGroups: assessment?.stakeholderGroups ?? [],
+      stakeholders: initialStakeholders,
+      stakeholderGroups: initialStakeholderGroups,
 
       [COMMENTS_KEY]: initialComments,
       [QUESTIONS_KEY]: initialQuestions,
@@ -160,7 +162,6 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
   const isValid = methods.formState.isValid;
   const isSubmitting = methods.formState.isSubmitting;
   const isValidating = methods.formState.isValidating;
-  const watchAllFields = methods.watch();
 
   const disableNavigation = !isValid || isSubmitting;
 
@@ -439,11 +440,20 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
     }
   };
 
-  const haveAnyQuestionBeenAnswered = () => {
-    const questions = values[QUESTIONS_KEY];
-    return Object.values(questions).some(
-      (answer) => answer !== null && answer !== ""
+  const isAssessmentChanged = () => {
+    const questionsChanged = Object.entries(values[QUESTIONS_KEY]).some(
+      ([name, answer]) => initialQuestions[name] !== answer
     );
+    const stakeholdersChanged =
+      initialStakeholders.length !== values.stakeholders.length ||
+      initialStakeholderGroups.length !== values.stakeholderGroups.length ||
+      !values.stakeholders.every(({ id, name }) =>
+        initialStakeholders.find((it) => it.id === id && it.name === name)
+      ) ||
+      !values.stakeholderGroups.every(({ id, name }) =>
+        initialStakeholderGroups.find((it) => it.id === id && it.name === name)
+      );
+    return questionsChanged || stakeholdersChanged;
   };
 
   const handleCancelAssessment = () => {
@@ -486,6 +496,7 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
         isLastStep={step === sortedSections.length}
         onNext={() => setCurrentStep(step + 1)}
         onBack={() => setCurrentStep(step - 1)}
+        isAssessmentChanged={isAssessmentChanged()}
         isDisabled={
           isSubmitting ||
           isValidating ||
@@ -574,7 +585,7 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
               onClose={() => setAssessmentToCancel(null)}
               onConfirm={() => handleCancelAssessment()}
               message={
-                haveAnyQuestionBeenAnswered()
+                isAssessmentChanged()
                   ? t("message.unsavedChanges")
                   : t("message.noAnswers")
               }

client/src/app/pages/assessment/components/custom-wizard-footer/custom-wizard-footer.tsx

@@ -13,6 +13,7 @@ export interface CustomWizardFooterProps {
   isDisabled: boolean;
   isFormInvalid: boolean;
   isSaveAsDraftDisabled?: boolean;
+  isAssessmentChanged?: boolean;
   enableNext?: boolean;
   onNext?: () => void;
   onBack?: () => void;
@@ -27,6 +28,7 @@ export const CustomWizardFooter: React.FC<CustomWizardFooterProps> = ({
   isDisabled,
   isFormInvalid,
   isSaveAsDraftDisabled,
+  isAssessmentChanged,
   enableNext,
   onNext,
   onBack,
@@ -35,7 +37,7 @@ export const CustomWizardFooter: React.FC<CustomWizardFooterProps> = ({
   onSaveAsDraft,
 }) => {
   const { t } = useTranslation();
-  const { goToNextStep, goToPrevStep, close, activeStep } = useWizardContext();
+  const { goToNextStep, goToPrevStep, close } = useWizardContext();
   return (
     <>
       <WizardFooterWrapper>
@@ -45,15 +47,25 @@ export const CustomWizardFooter: React.FC<CustomWizardFooterProps> = ({
               <Button
                 variant="primary"
                 onClick={() => onSave(false)}
-                isDisabled={!enableNext || isDisabled || isFormInvalid}
+                isDisabled={
+                  !enableNext ||
+                  isDisabled ||
+                  isFormInvalid ||
+                  !isAssessmentChanged
+                }
                 cy-data="next"
               >
                 {t("actions.save")}
               </Button>
               <Button
                 variant="primary"
                 onClick={() => onSave(true)}
-                isDisabled={!enableNext || isDisabled || isFormInvalid}
+                isDisabled={
+                  !enableNext ||
+                  isDisabled ||
+                  isFormInvalid ||
+                  !isAssessmentChanged
+                }
                 cy-data="save-and-review"
               >
                 {t("actions.saveAndReview")}

client/src/app/pages/assessment/components/custom-wizard-footer/tests/custom-wizard-footer.test.tsx

@@ -91,6 +91,7 @@ describe("AppPlaceholder", () => {
         isLastStep={true}
         isDisabled={false}
         isFormInvalid={false}
+        isAssessmentChanged={true}
         enableNext={true}
         onSave={onSaveSpy}
         onSaveAsDraft={jest.fn()}