Enable save on assessment change

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

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

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()}