From 0fa14064a820cfd5b1fa3fef14da9cdd3dbeb8c3 Mon Sep 17 00:00:00 2001 From: Nathan Curtis Date: Wed, 5 Jun 2024 16:11:58 -0700 Subject: [PATCH 1/5] [TM-739] Start on the first step that requires feedback when feedback is required. --- .../entity/[entityName]/edit/[uuid]/index.page.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx index 510e025f3..be5bbebfc 100644 --- a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx +++ b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx @@ -107,9 +107,18 @@ const EditEntityPage = () => { ) }; + const initialStepProps = useMemo(() => { + if (isLoading) return {}; + + const initialStepIndex = formSteps!.findIndex(step => step.fields.find(field => field.feedbackRequired) != null); + + return { initialStepIndex, disableInitialAutoProgress: initialStepIndex != null }; + }, [isLoading]); + return ( + !isLoading &&{" "} { router.push(getEntityDetailPageLink(entityName, entityUUID)); } }} + {...initialStepProps} /> From 40db9fe743aec220bfc6e4d8f832ba4db6a8d00f Mon Sep 17 00:00:00 2001 From: Nathan Curtis Date: Wed, 5 Jun 2024 20:16:04 -0700 Subject: [PATCH 2/5] [TM-739] Make the default behavior when not responding to feedback a bit more sane. --- src/components/extensive/WizardForm/index.tsx | 25 ++++++++++--------- src/components/extensive/WizardForm/utils.ts | 19 -------------- .../[entityName]/edit/[uuid]/index.page.tsx | 8 +++--- 3 files changed, 18 insertions(+), 34 deletions(-) diff --git a/src/components/extensive/WizardForm/index.tsx b/src/components/extensive/WizardForm/index.tsx index c34218eaa..886fca41f 100644 --- a/src/components/extensive/WizardForm/index.tsx +++ b/src/components/extensive/WizardForm/index.tsx @@ -1,6 +1,6 @@ import { yupResolver } from "@hookform/resolvers/yup"; import { useT } from "@transifex/react"; -import { memo, useEffect, useLayoutEffect, useMemo, useState } from "react"; +import { memo, useEffect, useLayoutEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { When } from "react-if"; import { twMerge } from "tailwind-merge"; @@ -18,7 +18,7 @@ import { FormFooter } from "./FormFooter"; import { WizardFormHeader } from "./FormHeader"; import FormSummary, { FormSummaryOptions } from "./FormSummary"; import SaveAndCloseModal, { SaveAndCloseModalProps } from "./modals/SaveAndCloseModal"; -import { downloadAnswersCSV, getSchema, getStepIndexByValues } from "./utils"; +import { downloadAnswersCSV, getSchema } from "./utils"; export interface WizardFormProps { steps: FormStepSchema[]; @@ -67,7 +67,7 @@ function WizardForm(props: WizardFormProps) { const t = useT(); const modal = useModalContext(); - const [selectedStepIndex, setSelectedStepIndex] = useState(props.initialStepIndex || 0); + const [selectedStepIndex, setSelectedStepIndex] = useState(props.initialStepIndex ?? 0); const selectedStep = props.steps?.[selectedStepIndex]; const selectedValidationSchema = selectedStep ? getSchema(selectedStep.fields) : undefined; const lastIndex = props.summaryOptions ? props.steps.length : props.steps.length - 1; @@ -96,7 +96,7 @@ function WizardForm(props: WizardFormProps) { console.debug("Form Errors", formHook.formState.errors); } - const onChange = useDebounce(() => !formHasError && props.onChange && props.onChange(formHook.getValues())); + const onChange = useDebounce(() => !formHasError && props.onChange?.(formHook.getValues())); const onSubmitStep = (data: any) => { if (selectedStepIndex < lastIndex) { @@ -105,7 +105,7 @@ function WizardForm(props: WizardFormProps) { //Disable auto step progress if disableAutoProgress was passed setSelectedStepIndex(n => n + 1); } - props.onChange && props.onChange(formHook.getValues()); + props.onChange?.(formHook.getValues()); props.onStepChange?.(data, selectedStep); formHook.clearErrors(); } else { @@ -116,7 +116,7 @@ function WizardForm(props: WizardFormProps) { }; const onClickSaveAndClose = () => { - props.onChange && props.onChange(formHook.getValues()); + props.onChange?.(formHook.getValues()); modal.openModal( { - return getStepIndexByValues(props.defaultValues, props.steps); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props.defaultValues, props.steps]); - useEffect(() => { - if (!props.disableAutoProgress && !props.disableInitialAutoProgress) setSelectedStepIndex(initialStepIndex); + if (props.disableAutoProgress || props.disableInitialAutoProgress) return; + + const stepIndex = props.steps.findIndex(step => !getSchema(step.fields).isValidSync(props.defaultValues)); + + // If none of the steps has an invalid field, use the last step + setSelectedStepIndex(stepIndex < 0 ? lastIndex : stepIndex); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/src/components/extensive/WizardForm/utils.ts b/src/components/extensive/WizardForm/utils.ts index c05085046..c373499bd 100644 --- a/src/components/extensive/WizardForm/utils.ts +++ b/src/components/extensive/WizardForm/utils.ts @@ -53,25 +53,6 @@ export const getSchemaFields = (fields: FormField[]) => { return schema; }; -export const getStepIndexByValues = (values: any, steps: FormStepSchema[], skipValueCheck?: boolean) => { - let currentStepIndex = -1; - - for (const step of steps) { - currentStepIndex++; - - if (!getSchema(step.fields).isValidSync(values)) { - return currentStepIndex; - } else if (!skipValueCheck) { - for (const field of step.fields) { - if (!values[field.name]) { - return currentStepIndex; - } - } - } - } - return currentStepIndex; -}; - export const getAnswer = ( field: FormField, values: any diff --git a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx index be5bbebfc..f50619081 100644 --- a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx +++ b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx @@ -110,15 +110,17 @@ const EditEntityPage = () => { const initialStepProps = useMemo(() => { if (isLoading) return {}; - const initialStepIndex = formSteps!.findIndex(step => step.fields.find(field => field.feedbackRequired) != null); + const stepIndex = formSteps!.findIndex(step => step.fields.find(field => field.feedbackRequired) != null); - return { initialStepIndex, disableInitialAutoProgress: initialStepIndex != null }; + return { + initialStepIndex: stepIndex < 0 ? undefined : stepIndex, + disableInitialAutoProgress: stepIndex >= 0 + }; }, [isLoading]); return ( - !isLoading &&{" "} Date: Wed, 5 Jun 2024 20:26:43 -0700 Subject: [PATCH 3/5] [TM-739] On initial creation, default to the first step. --- src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx index f50619081..9e4f313c8 100644 --- a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx +++ b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx @@ -32,7 +32,7 @@ const EditEntityPage = () => { const { getReportingWindow } = useGetReportingWindow(); const entityName = router.query.entityName as EntityName; const entityUUID = router.query.uuid as string; - const mode = router.query.mode as string; //edit, provide-feedback-entity, provide-feedback-change-request + const mode = router.query.mode as string | undefined; //edit, provide-feedback-entity, provide-feedback-change-request const isReport = isEntityReport(entityName); const { data: entityData } = useGetV2ENTITYUUID({ @@ -110,7 +110,8 @@ const EditEntityPage = () => { const initialStepProps = useMemo(() => { if (isLoading) return {}; - const stepIndex = formSteps!.findIndex(step => step.fields.find(field => field.feedbackRequired) != null); + const stepIndex = + mode == null ? 0 : formSteps!.findIndex(step => step.fields.find(field => field.feedbackRequired) != null); return { initialStepIndex: stepIndex < 0 ? undefined : stepIndex, From d4dc31f064716aea7581a440ffa58eced9b7c0b2 Mon Sep 17 00:00:00 2001 From: cesarLima1 Date: Mon, 10 Jun 2024 14:32:50 -0400 Subject: [PATCH 4/5] [TM-905] add coalescing nullish --- src/components/elements/Inputs/Input/Input.tsx | 2 +- src/components/elements/Status/Status.tsx | 2 +- src/components/extensive/Modal/ModalAdd.tsx | 2 +- src/components/extensive/Modal/ModalSubmit.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/elements/Inputs/Input/Input.tsx b/src/components/elements/Inputs/Input/Input.tsx index 3b7c3f9d2..4ab71ffb9 100644 --- a/src/components/elements/Inputs/Input/Input.tsx +++ b/src/components/elements/Inputs/Input/Input.tsx @@ -79,7 +79,7 @@ const Input = forwardRef( ...inputProps } = inputWrapperProps; const id = useId(); - const customVariantClasses = customVariant ? customVariant : {}; + const customVariantClasses = customVariant ?? {}; const variantClasses = { default: { "px-3 py-[9px] rounded-lg focus:border-primary-500": true, diff --git a/src/components/elements/Status/Status.tsx b/src/components/elements/Status/Status.tsx index 4b831c82d..00d33520f 100644 --- a/src/components/elements/Status/Status.tsx +++ b/src/components/elements/Status/Status.tsx @@ -45,7 +45,7 @@ const Status = (props: StatusProps) => { "awaiting-approval": "Awaiting Approval" }; - return statusMap[status] || ""; + return statusMap[status] ?? ""; }; return ( diff --git a/src/components/extensive/Modal/ModalAdd.tsx b/src/components/extensive/Modal/ModalAdd.tsx index 13b0245c8..04a39a954 100644 --- a/src/components/extensive/Modal/ModalAdd.tsx +++ b/src/components/extensive/Modal/ModalAdd.tsx @@ -64,7 +64,7 @@ const ModalAdd: FC = ({
diff --git a/src/components/extensive/Modal/ModalSubmit.tsx b/src/components/extensive/Modal/ModalSubmit.tsx index a2b94cb81..3fa68f7b9 100644 --- a/src/components/extensive/Modal/ModalSubmit.tsx +++ b/src/components/extensive/Modal/ModalSubmit.tsx @@ -43,7 +43,7 @@ const ModalSubmit: FC = ({
From 651e603a6c2db0c90b7e6d585340c6710ce4ca73 Mon Sep 17 00:00:00 2001 From: JORGE Date: Mon, 10 Jun 2024 14:34:22 -0400 Subject: [PATCH 5/5] [TM-905] Add transife --- src/pages/auth/layout.tsx | 5 +++-- .../organization/[id]/components/OrganizationHeader.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/auth/layout.tsx b/src/pages/auth/layout.tsx index 6d54b1005..ae022a7fe 100644 --- a/src/pages/auth/layout.tsx +++ b/src/pages/auth/layout.tsx @@ -1,5 +1,6 @@ "use client"; import { Button } from "@mui/material"; +import { useT } from "@transifex/react"; import { usePathname } from "next/navigation"; import React from "react"; import { When } from "react-if"; @@ -13,7 +14,7 @@ interface LoginLayoutProps { const LoginLayout: React.FC = props => { const { children } = props; const pathname = usePathname(); - + const t = useT(); return (
@@ -22,7 +23,7 @@ const LoginLayout: React.FC = props => {
diff --git a/src/pages/organization/[id]/components/OrganizationHeader.tsx b/src/pages/organization/[id]/components/OrganizationHeader.tsx index e465f8e28..66b383eb5 100644 --- a/src/pages/organization/[id]/components/OrganizationHeader.tsx +++ b/src/pages/organization/[id]/components/OrganizationHeader.tsx @@ -67,7 +67,7 @@ const OrganizationHeader = ({ organization }: OrganizationHeaderProps) => {
- {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""} + {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) ?? ""} {organization?.description}