feat(FormRenderer): Add Reset Button support to non-Wizard Form (#307)

* feat(FormRenderer): Add Reset button support to the non-Wizard Form * chore: Remove the unused props
aws · Aug 17, 2021 · 25da626 · 25da626
1 parent 7df0bf7
commit 25da626
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 40 deletions.
diff --git a/src/components/FormRenderer/components/FormTemplate/index.tsx b/src/components/FormRenderer/components/FormTemplate/index.tsx
@@ -25,14 +25,30 @@ export interface FormTemplateProps extends RenderProps {
 }
 
 const FormTemplate: FunctionComponent<RenderProps> = ({ formFields, schema, isSubmitting }) => {
-    const { handleSubmit, onCancel } = useFormApi();
-    const { cancelLabel = 'Cancel', submitLabel = 'Submit', fields, header, description } = schema;
+    const { handleSubmit, onCancel, onReset } = useFormApi();
+    const {
+        cancelLabel = 'Cancel',
+        canCancel = true,
+        submitLabel = 'Submit',
+        resetLabel = 'Reset',
+        canReset = false,
+        fields,
+        header,
+        description,
+    } = schema;
 
     const actions = (
         <Inline spacing="s">
-            <Button variant="link" onClick={onCancel} disabled={isSubmitting}>
-                {cancelLabel}
-            </Button>
+            {canCancel && (
+                <Button variant="link" onClick={onCancel} disabled={isSubmitting}>
+                    {cancelLabel}
+                </Button>
+            )}
+            {canReset && (
+                <Button variant="normal" onClick={onReset} disabled={isSubmitting}>
+                    {resetLabel}
+                </Button>
+            )}
             <Button
                 variant="primary"
                 loading={isSubmitting}

diff --git a/src/components/FormRenderer/index.stories.tsx b/src/components/FormRenderer/index.stories.tsx
@@ -347,6 +347,51 @@ export const WithInitialValues = () => {
     );
 };
 
+export const ResetButton = () => {
+    const initialValues = {
+        email: '[email protected]',
+        password: 'password',
+        number: 10,
+        textarea: 'textarea',
+        checkbox: ['1', '2'],
+        switch: true,
+        radio: '3',
+        select: '2',
+        autosugguest: {
+            value: 'Lambda',
+            label: 'Lambda - Amazon Lambda',
+        },
+        multiselect: [
+            {
+                value: 'Lambda',
+                label: 'Lambda - Amazon Lambda',
+            },
+            {
+                value: 'EC2',
+                label: 'EC2 - Amazon Elastic Compute Cloud',
+            },
+        ],
+        confirm: true,
+        datePicker: new Date(2020, 1, 1),
+        timePicker: '2020-01-01T00:00:00Z',
+        tree: ['3', '5'],
+    };
+
+    const resetableSchema = {
+        ...baseSchema,
+        canReset: true,
+    };
+
+    return (
+        <FormRenderer
+            schema={resetableSchema}
+            onSubmit={action('Submit')}
+            onCancel={action('Cancel')}
+            initialValues={initialValues}
+        />
+    );
+};
+
 export const SubForms = () => {
     const schema = {
         fields: [

diff --git a/src/components/FormRenderer/index.test.tsx b/src/components/FormRenderer/index.test.tsx
@@ -103,6 +103,31 @@ describe('FormRenderer', () => {
 
             expect(queryByRole('progressbar')).not.toBeInTheDocument();
         });
+
+        it('should trigger reset to reset form to initialValues', () => {
+            const { getByLabelText, getByText, getByDisplayValue } = render(
+                <FormRenderer
+                    schema={{ ...schema, canReset: true }}
+                    onSubmit={handleSubmit}
+                    onCancel={handleCancel}
+                    initialValues={{
+                        name: 'My name',
+                    }}
+                />
+            );
+
+            act(() => {
+                fireEvent.change(getByLabelText('Name'), { target: { value: 'My new name' } });
+            });
+
+            expect(getByDisplayValue('My new name')).toBeVisible();
+
+            act(() => {
+                fireEvent.click(getByText('Reset'));
+            });
+
+            expect(getByDisplayValue('My name')).toBeVisible();
+        });
     });
 
     describe('Checkbox', () => {
@@ -955,26 +980,30 @@ describe('FormRenderer', () => {
         });
     });
 
-    it('should render a markdown editor', () => {
-        const schema = {
-            submitLabel: 'Save',
-            cancelLabel: 'Back',
-            fields: [
-                {
-                    component: componentTypes.MARKDOWN_EDITOR,
-                    name: 'markdownOne',
-                    label: 'This is a markdown editor',
-                    helperText: 'Helper text provides users some guidance.',
-                    initialValue: '# I am a Markdown editor',
-                },
-            ],
-            header: 'Markdown Editor',
-            description: 'This component allows a user to enter markdown and renders it in real-time.',
-        };
+    describe('Markdown Editor', () => {
+        it('should render a markdown editor', () => {
+            const schema = {
+                submitLabel: 'Save',
+                cancelLabel: 'Back',
+                fields: [
+                    {
+                        component: componentTypes.MARKDOWN_EDITOR,
+                        name: 'markdownOne',
+                        label: 'This is a markdown editor',
+                        helperText: 'Helper text provides users some guidance.',
+                        initialValue: '# I am a Markdown editor',
+                    },
+                ],
+                header: 'Markdown Editor',
+                description: 'This component allows a user to enter markdown and renders it in real-time.',
+            };
 
-        const { getByText } = render(<FormRenderer schema={schema} onSubmit={handleSubmit} onCancel={handleCancel} />);
+            const { getByText } = render(
+                <FormRenderer schema={schema} onSubmit={handleSubmit} onCancel={handleCancel} />
+            );
 
-        expect(getByText('Markdown Editor')).toBeVisible();
-        expect(getByText('I am a Markdown editor')).toBeInTheDocument();
+            expect(getByText('Markdown Editor')).toBeVisible();
+            expect(getByText('I am a Markdown editor')).toBeInTheDocument();
+        });
     });
 });
diff --git a/src/components/FormRenderer/types.ts b/src/components/FormRenderer/types.ts
@@ -26,6 +26,9 @@ export interface Option {
 export type Schema = Omit<FormRendererSchema, 'title'> & {
     header?: FormRendererSchema['title'];
     cancelLabel?: string;
+    canCancel?: boolean;
+    resetLabel?: string;
+    canReset?: boolean;
     submitLabel?: string;
 };
 

diff --git a/src/components/Wizard/components/WizardInner/index.tsx b/src/components/Wizard/components/WizardInner/index.tsx
@@ -71,24 +71,18 @@ const WizardInner: FunctionComponent<WizardInnerProps> = ({
                 <Button variant="link" onClick={onCancelButtonClick}>
                     {cancelButtonText}
                 </Button>
-                {activeStepIndex === 0 ? (
-                    <Button variant="primary" loading={isLoadingNextStep} onClick={onNextButtonClick}>
-                        {nextButtonText}
+                {activeStepIndex !== 0 && (
+                    <Button variant="normal" onClick={onPreviousButtonClick}>
+                        {previousButtonText}
                     </Button>
-                ) : (
-                    <>
-                        <Button variant="normal" onClick={onPreviousButtonClick}>
-                            {previousButtonText}
-                        </Button>
-                        <Button
-                            variant="primary"
-                            loading={isLoadingNextStep}
-                            onClick={activeStepIndex === stepCount - 1 ? onSubmitButtonClick : onNextButtonClick}
-                        >
-                            {activeStepIndex === stepCount - 1 ? submitButtonText : nextButtonText}
-                        </Button>
-                    </>
                 )}
+                <Button
+                    variant="primary"
+                    loading={isLoadingNextStep}
+                    onClick={activeStepIndex === stepCount - 1 ? onSubmitButtonClick : onNextButtonClick}
+                >
+                    {activeStepIndex === stepCount - 1 ? submitButtonText : nextButtonText}
+                </Button>
             </Inline>
         );
     }, [