Skip to content

Commit

Permalink
🐛 Async default values loading for assessment wizard (#1452)
Browse files Browse the repository at this point in the history
  • Loading branch information
ibolton336 authored Oct 10, 2023
1 parent cb33fbe commit 82de730
Show file tree
Hide file tree
Showing 6 changed files with 36 additions and 27 deletions.
10 changes: 5 additions & 5 deletions client/src/app/pages/assessment/assessment-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import BanIcon from "@patternfly/react-icons/dist/esm/icons/ban-icon";
import { AssessmentRoute } from "@app/Paths";
import { getAxiosErrorMessage } from "@app/utils/utils";
import { SimpleEmptyState } from "@app/components/SimpleEmptyState";
import { ConditionalRender } from "@app/components/ConditionalRender";
import { AppPlaceholder } from "@app/components/AppPlaceholder";
import { useFetchAssessmentById } from "@app/queries/assessments";
import { AssessmentPageHeader } from "./components/assessment-page-header";
import { AssessmentWizard } from "./components/assessment-wizard/assessment-wizard";
Expand Down Expand Up @@ -63,9 +61,11 @@ const AssessmentPage: React.FC = () => {
}
/>
)}
<ConditionalRender when={isFetching} then={<AppPlaceholder />}>
<AssessmentWizard assessment={assessment} isOpen />
</ConditionalRender>
<AssessmentWizard
assessment={assessment}
isOpen
isLoadingAssessment={isFetching}
/>
</PageSection>
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,13 @@ export interface AssessmentWizardValues {
export interface AssessmentWizardProps {
assessment?: Assessment;
isOpen: boolean;
isLoadingAssessment: boolean;
}

export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
assessment,
isOpen,
isLoadingAssessment,
}) => {
const isArchetype = useIsArchetype();
const queryClient = useQueryClient();
Expand Down Expand Up @@ -129,30 +131,32 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
});
}
return questions;
}, [assessment]);
}, [assessment, isLoadingAssessment]);

const validationSchema = yup.object().shape({
stakeholders: yup.array().of(yup.string()),
stakeholderGroups: yup.array().of(yup.string()),
});

const methods = useForm<AssessmentWizardValues>({
defaultValues: useMemo(() => {
return {
stakeholders:
assessment?.stakeholders?.map((sh) => sh.name).sort() ?? [],
stakeholderGroups:
assessment?.stakeholderGroups?.map((sg) => sg.name).sort() ?? [],
// comments: initialComments,
questions: initialQuestions,
[SAVE_ACTION_KEY]: SAVE_ACTION_VALUE.SAVE_AS_DRAFT,
};
}, [assessment]),
resolver: yupResolver(validationSchema),
mode: "all",
});
const values = methods.getValues();

useEffect(() => {
methods.reset({
stakeholders: assessment?.stakeholders?.map((sh) => sh.name).sort() ?? [],
stakeholderGroups:
assessment?.stakeholderGroups?.map((sg) => sg.name).sort() ?? [],
questions: initialQuestions,
[SAVE_ACTION_KEY]: SAVE_ACTION_VALUE.SAVE_AS_DRAFT,
});
return () => {
methods.reset();
};
}, [assessment]);

const errors = methods.formState.errors;
const isValid = methods.formState.isValid;
const isSubmitting = methods.formState.isSubmitting;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
return (
<Stack>
{sortedOptions.map((option, i) => {
const answerUniqueId = `${questionFieldName}-${option.text}-${i}}`;
const answerUniqueId = `${questionFieldName}-${option.text}-${i}`;
return (
<StackItem key={answerUniqueId} className="pf-v5-u-pb-xs">
<HookFormPFGroupController
Expand All @@ -42,7 +42,7 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
id={answerUniqueId}
name={questionFieldName}
isChecked={value === option.text}
onChange={(checked, e) => {
onChange={() => {
onChange(option.text);
}}
aria-label={option.text}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
import { MultiInputSelection } from "./multi-input-selection";
import { Question, QuestionHeader, QuestionBody } from "./question";
import { getCommentFieldName, getQuestionFieldName } from "../../form-utils";
import { getCommentFieldName } from "../../form-utils";
import { HookFormPFTextInput } from "@app/components/HookFormPFFields";
import { useFormContext } from "react-hook-form";
import { Section } from "@app/api/models";
Expand All @@ -26,7 +26,7 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
section,
}) => {
const { t } = useTranslation();
const { control, getValues } = useFormContext<AssessmentWizardValues>();
const { control } = useFormContext<AssessmentWizardValues>();

// Force the wizard parent to reset the scroll
useEffect(() => {
Expand All @@ -53,10 +53,10 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
<Text component="h1">{section.name}</Text>
</TextContent>
</StackItem>
{sortedQuestions.map((question) => {
{sortedQuestions.map((question, i) => {
const questionUniqueKey = `${section.name}-${
question.order || "no-order"
}-${question.text || "no-text"}`;
}-${question.text || "no-text"}-${i}`;
return (
<StackItem key={questionUniqueKey}>
<Question cy-data="question">
Expand All @@ -79,7 +79,7 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
</QuestionHeader>
<QuestionBody>
<MultiInputSelection
key={getQuestionFieldName(question, true)}
key={questionUniqueKey}
question={question}
/>
</QuestionBody>
Expand Down
4 changes: 2 additions & 2 deletions client/src/app/pages/assessment/form-utils.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ describe("Application assessment - form utils", () => {

it("getQuestionFieldName: fullName", () => {
const fieldName = getQuestionFieldName(question, true);
expect(fieldName).toBe("questions.question-1-Question 321");
expect(fieldName).toBe("questions.question-1-Question_321");
});

it("getQuestionFieldName: singleName", () => {
const fieldName = getQuestionFieldName(question, false);
expect(fieldName).toBe("question-1-Question 321");
expect(fieldName).toBe("question-1-Question_321");
});
});
7 changes: 6 additions & 1 deletion client/src/app/pages/assessment/form-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,13 @@ export const getCommentFieldName = (section: Section, fullName: boolean) => {
const fieldName = `category-${section.name}`;
return fullName ? `${COMMENTS_KEY}.${fieldName}` : fieldName;
};
export const sanitizeKey = (text: string) => {
return text.replace(/[^a-zA-Z0-9-_:.]/g, "_");
};

export const getQuestionFieldName = (question: Question, fullName: boolean) => {
const fieldName = `question-${question.order}-${question.text}`;
return fullName ? `${QUESTIONS_KEY}.${fieldName}` : fieldName;
return fullName
? `${QUESTIONS_KEY}.${sanitizeKey(fieldName)}`
: sanitizeKey(fieldName);
};

0 comments on commit 82de730

Please sign in to comment.