From b9d8b4be52c52ae40ae26195e1ab62a28748c555 Mon Sep 17 00:00:00 2001 From: Justyn Oh Date: Wed, 10 Aug 2022 15:08:07 +0800 Subject: [PATCH 1/5] feat: add MyInfo badge to form builder for MyInfo fields --- .../FieldRow/FieldRowContainer.tsx | 8 ++++- .../src/templates/Field/Date/DateField.tsx | 3 +- .../Field/Dropdown/DropdownField.tsx | 3 +- .../src/templates/Field/FieldContainer.tsx | 34 ++++++++++++++----- .../Field/ShortText/ShortTextField.tsx | 3 +- 5 files changed, 39 insertions(+), 12 deletions(-) diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx index 359b562387..9a7cb6ca53 100644 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx +++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx @@ -48,6 +48,7 @@ import { augmentWithMyInfoDisplayValue, extractPreviewValue, hasExistingFieldValue, + isMyInfo, } from '~features/myinfo/utils' import { useBuilderAndDesignContext } from '../../BuilderAndDesignContext' @@ -272,7 +273,11 @@ export const FieldRowContainer = ({ pointerEvents={isActive ? undefined : 'none'} > - + @@ -329,6 +334,7 @@ export const FieldRowContainer = ({ type MemoFieldRowProps = { field: FormFieldDto colorTheme?: FormColorTheme + showMyInfoBadge?: boolean } const MemoFieldRow = memo(({ field, ...rest }: MemoFieldRowProps) => { diff --git a/frontend/src/templates/Field/Date/DateField.tsx b/frontend/src/templates/Field/Date/DateField.tsx index bd48484ab5..20679e487d 100644 --- a/frontend/src/templates/Field/Date/DateField.tsx +++ b/frontend/src/templates/Field/Date/DateField.tsx @@ -25,6 +25,7 @@ export interface DateFieldProps extends BaseFieldProps { export const DateField = ({ schema, colorTheme = FormColorTheme.Blue, + ...fieldContainerProps }: DateFieldProps): JSX.Element => { const validationRules = useMemo( () => createDateValidationRules(schema), @@ -56,7 +57,7 @@ export const DateField = ({ const { control } = useFormContext() return ( - + { const validationRules = useMemo( () => createDropdownValidationRules(schema), @@ -28,7 +29,7 @@ export const DropdownField = ({ const { control } = useFormContext() return ( - + { const { errors, isSubmitting, isValid } = useFormState({ name: schema._id }) @@ -57,14 +64,25 @@ export const FieldContainer = ({ isInvalid={!!error} id={schema._id} > - - {schema.title} - + + {schema.title} + + + {children} {error?.message} diff --git a/frontend/src/templates/Field/ShortText/ShortTextField.tsx b/frontend/src/templates/Field/ShortText/ShortTextField.tsx index eafd7182a8..26277fc4af 100644 --- a/frontend/src/templates/Field/ShortText/ShortTextField.tsx +++ b/frontend/src/templates/Field/ShortText/ShortTextField.tsx @@ -17,6 +17,7 @@ export interface ShortTextFieldProps extends BaseFieldProps { export const ShortTextField = ({ schema, isPrefilled, + ...fieldContainerProps }: ShortTextFieldProps): JSX.Element => { const validationRules = useMemo( () => createTextValidationRules(schema), @@ -26,7 +27,7 @@ export const ShortTextField = ({ const { register } = useFormContext() return ( - + Date: Wed, 10 Aug 2022 15:15:29 +0800 Subject: [PATCH 2/5] refactor: memoize myInfo check --- .../BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx index 9a7cb6ca53..cde59bda3a 100644 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx +++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx @@ -98,6 +98,8 @@ export const FieldRowContainer = ({ const colorTheme = useDesignColorTheme() + const isMyInfoField = useMemo(() => isMyInfo(field), [field]) + const defaultFieldValues = useMemo(() => { if (field.fieldType === BasicField.Table) { return { @@ -276,7 +278,7 @@ export const FieldRowContainer = ({ From 7b2ab7c67ba05eb2ce895dc93f286786683c907d Mon Sep 17 00:00:00 2001 From: Justyn Oh Date: Wed, 10 Aug 2022 17:17:27 +0800 Subject: [PATCH 3/5] fix: update chromatic snapshot to be fullscreen --- .../src/features/admin-form/AdminFormCreatePage.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx b/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx index 8015ba284a..c4574644ae 100644 --- a/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx +++ b/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx @@ -64,7 +64,7 @@ export default { // Required so skeleton "animation" does not hide content. // Pass a very short delay to avoid bug where Chromatic takes a snapshot before // the story has loaded - chromatic: { pauseAnimationAtEnd: true, delay: 200 }, + chromatic: { pauseAnimationAtEnd: true, delay: 200, layout: 'fullscreen' }, layout: 'fullscreen', msw: buildMswRoutes(), userId: 'adminFormTestUserId', From 5f823d1395cb8808eceee6c0fcb65b40b7135700 Mon Sep 17 00:00:00 2001 From: Justyn Oh Date: Wed, 10 Aug 2022 17:31:44 +0800 Subject: [PATCH 4/5] fix: change viewport size for chromatic --- .../src/features/admin-form/AdminFormCreatePage.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx b/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx index c4574644ae..a7868042c4 100644 --- a/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx +++ b/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx @@ -64,7 +64,11 @@ export default { // Required so skeleton "animation" does not hide content. // Pass a very short delay to avoid bug where Chromatic takes a snapshot before // the story has loaded - chromatic: { pauseAnimationAtEnd: true, delay: 200, layout: 'fullscreen' }, + chromatic: { + pauseAnimationAtEnd: true, + delay: 200, + viewports: [1500, 8000], + }, layout: 'fullscreen', msw: buildMswRoutes(), userId: 'adminFormTestUserId', From d05309ef86f3cad85568625d5d58b0f5012b1e19 Mon Sep 17 00:00:00 2001 From: Justyn Oh Date: Wed, 10 Aug 2022 18:05:29 +0800 Subject: [PATCH 5/5] chore: revert story --- .../src/features/admin-form/AdminFormCreatePage.stories.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx b/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx index a7868042c4..8015ba284a 100644 --- a/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx +++ b/frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx @@ -64,11 +64,7 @@ export default { // Required so skeleton "animation" does not hide content. // Pass a very short delay to avoid bug where Chromatic takes a snapshot before // the story has loaded - chromatic: { - pauseAnimationAtEnd: true, - delay: 200, - viewports: [1500, 8000], - }, + chromatic: { pauseAnimationAtEnd: true, delay: 200 }, layout: 'fullscreen', msw: buildMswRoutes(), userId: 'adminFormTestUserId',