-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(v2): allow creation of dropdown fields in admin form builder (#3817
) * feat: add and render initial EditDropdown component * feat: render dropdown field preview * ref: inline getButtonText util function back to caller only used in one place * ref: rename common/utils.ts to common/constants.ts since those are actually just constants * ref: move all EditFieldDecorator instantiations to test utils * feat: add story * feat: add default fieldCreation object for dropdown fields * ref: move EditFieldDecorator to root storybook util putting it in __tests__ causes cra's jest to complain T_T
- Loading branch information
Showing
20 changed files
with
222 additions
and
175 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 2 additions & 22 deletions
24
...BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDecimal/EditDecimal.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
...ilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDropdown/EditDropdown.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Meta, Story } from '@storybook/react' | ||
|
|
||
| import { BasicField, DropdownFieldBase } from '~shared/types' | ||
|
|
||
| import { createFormBuilderMocks } from '~/mocks/msw/handlers/admin-form' | ||
|
|
||
| import { EditFieldDrawerDecorator, StoryRouter } from '~utils/storybook' | ||
|
|
||
| import { EditDropdown } from './EditDropdown' | ||
|
|
||
| const DEFAULT_DROPDOWN_FIELD: DropdownFieldBase = { | ||
| title: 'Storybook Dropdown', | ||
| description: 'Some description about Dropdown', | ||
| required: true, | ||
| disabled: false, | ||
| fieldType: BasicField.Dropdown, | ||
| fieldOptions: ['Option 1', 'Option 2', 'Option 3'], | ||
| globalId: 'unused', | ||
| } | ||
|
|
||
| export default { | ||
| title: 'Features/AdminForm/EditFieldDrawer/EditDropdown', | ||
| component: EditDropdown, | ||
| decorators: [ | ||
| StoryRouter({ | ||
| initialEntries: ['/61540ece3d4a6e50ac0cc6ff'], | ||
| path: '/:formId', | ||
| }), | ||
| EditFieldDrawerDecorator, | ||
| ], | ||
| parameters: { | ||
| // Required so skeleton "animation" does not hide content. | ||
| chromatic: { pauseAnimationAtEnd: true }, | ||
| msw: createFormBuilderMocks({}, 0), | ||
| }, | ||
| args: { | ||
| field: DEFAULT_DROPDOWN_FIELD, | ||
| }, | ||
| } as Meta<StoryArgs> | ||
|
|
||
| interface StoryArgs { | ||
| field: DropdownFieldBase | ||
| } | ||
|
|
||
| const Template: Story<StoryArgs> = ({ field }) => { | ||
| return <EditDropdown field={field} /> | ||
| } | ||
|
|
||
| export const Default = Template.bind({}) | ||
| Default.storyName = 'EditDropdown' |
112 changes: 112 additions & 0 deletions
112
...esign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDropdown/EditDropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import { useMemo } from 'react' | ||
| import { FormControl } from '@chakra-ui/react' | ||
| import { extend, pick } from 'lodash' | ||
|
|
||
| import { DropdownFieldBase } from '~shared/types/field' | ||
|
|
||
| import { createBaseValidationRules } from '~utils/fieldValidation' | ||
| import FormErrorMessage from '~components/FormControl/FormErrorMessage' | ||
| import FormLabel from '~components/FormControl/FormLabel' | ||
| import Input from '~components/Input' | ||
| import Textarea from '~components/Textarea' | ||
| import Toggle from '~components/Toggle' | ||
|
|
||
| import { | ||
| SPLIT_TEXTAREA_TRANSFORM, | ||
| SPLIT_TEXTAREA_VALIDATION, | ||
| } from '../common/constants' | ||
| import { DrawerContentContainer } from '../common/DrawerContentContainer' | ||
| import { FormFieldDrawerActions } from '../common/FormFieldDrawerActions' | ||
| import { EditFieldProps } from '../common/types' | ||
| import { useEditFieldForm } from '../common/useEditFieldForm' | ||
|
|
||
| type EditDropdownProps = EditFieldProps<DropdownFieldBase> | ||
|
|
||
| const EDIT_DROPDOWN_FIELD_KEYS = ['title', 'description', 'required'] as const | ||
|
|
||
| type EditDropdownKeys = typeof EDIT_DROPDOWN_FIELD_KEYS[number] | ||
|
|
||
| type EditDropdownInputs = Pick<DropdownFieldBase, EditDropdownKeys> & { | ||
| fieldOptionsString: string // Differs from fieldOptions in DropdownFieldBase because input is a string. Will be converted to array using SPLIT_TEXTAREA_TRANSFORM | ||
| } | ||
|
|
||
| const transformDropdownFieldToEditForm = ( | ||
| field: DropdownFieldBase, | ||
| ): EditDropdownInputs => { | ||
| return { | ||
| ...pick(field, EDIT_DROPDOWN_FIELD_KEYS), | ||
| fieldOptionsString: SPLIT_TEXTAREA_TRANSFORM.input(field.fieldOptions), | ||
| } | ||
| } | ||
|
|
||
| const transformDropdownEditFormToField = ( | ||
| inputs: EditDropdownInputs, | ||
| originalField: DropdownFieldBase, | ||
| ): DropdownFieldBase => { | ||
| return extend({}, originalField, inputs, { | ||
| fieldOptions: SPLIT_TEXTAREA_TRANSFORM.output(inputs.fieldOptionsString), | ||
| }) | ||
| } | ||
|
|
||
| export const EditDropdown = ({ field }: EditDropdownProps): JSX.Element => { | ||
| const { | ||
| register, | ||
| formState: { errors }, | ||
| isSaveEnabled, | ||
| buttonText, | ||
| handleUpdateField, | ||
| isLoading, | ||
| handleCancel, | ||
| } = useEditFieldForm<EditDropdownInputs, DropdownFieldBase>({ | ||
| field, | ||
| transform: { | ||
| input: transformDropdownFieldToEditForm, | ||
| output: transformDropdownEditFormToField, | ||
| }, | ||
| }) | ||
|
|
||
| const requiredValidationRule = useMemo( | ||
| () => createBaseValidationRules({ required: true }), | ||
| [], | ||
| ) | ||
|
|
||
| return ( | ||
| <DrawerContentContainer> | ||
| <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}> | ||
| <FormLabel>Question</FormLabel> | ||
| <Input autoFocus {...register('title', requiredValidationRule)} /> | ||
| <FormErrorMessage>{errors?.title?.message}</FormErrorMessage> | ||
| </FormControl> | ||
| <FormControl isReadOnly={isLoading} isInvalid={!!errors.description}> | ||
| <FormLabel>Description</FormLabel> | ||
| <Textarea {...register('description')} /> | ||
| <FormErrorMessage>{errors?.description?.message}</FormErrorMessage> | ||
| </FormControl> | ||
| <FormControl isReadOnly={isLoading}> | ||
| <Toggle {...register('required')} label="Required" /> | ||
| </FormControl> | ||
| <FormControl | ||
| isRequired | ||
| isReadOnly={isLoading} | ||
| isInvalid={!!errors.fieldOptionsString} | ||
| > | ||
| <FormLabel>Options</FormLabel> | ||
| <Textarea | ||
| {...register('fieldOptionsString', { | ||
| validate: SPLIT_TEXTAREA_VALIDATION, | ||
| })} | ||
| /> | ||
| <FormErrorMessage> | ||
| {errors?.fieldOptionsString?.message} | ||
| </FormErrorMessage> | ||
| </FormControl> | ||
| <FormFieldDrawerActions | ||
| isLoading={isLoading} | ||
| isSaveEnabled={isSaveEnabled} | ||
| buttonText={buttonText} | ||
| handleClick={handleUpdateField} | ||
| handleCancel={handleCancel} | ||
| /> | ||
| </DrawerContentContainer> | ||
| ) | ||
| } |
1 change: 1 addition & 0 deletions
1
...er-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDropdown/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { EditDropdown } from './EditDropdown' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.