Skip to content

Commit

Permalink
fix: hide cancel button by default (#696)
Browse files Browse the repository at this point in the history
  • Loading branch information
SwaySway authored Oct 22, 2022
1 parent deed693 commit 662dd10
Show file tree
Hide file tree
Showing 11 changed files with 156 additions and 59 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1895,8 +1895,7 @@ function ArrayField({
);
}
export default function NestedJson(props) {
const { onSubmit, onCancel, onValidate, onChange, overrides, ...rest } =
props;
const { onSubmit, onValidate, onChange, overrides, ...rest } = props;
const { tokens } = useTheme();
const initialValues = {
\\"first-Name\\": undefined,
Expand Down Expand Up @@ -2232,14 +2231,6 @@ export default function NestedJson(props) {
{...getOverrideProps(overrides, \\"ClearButton\\")}
></Button>
<Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
<Button
children=\\"Cancel\\"
type=\\"button\\"
onClick={() => {
onCancel && onCancel();
}}
{...getOverrideProps(overrides, \\"CancelButton\\")}
></Button>
<Button
children=\\"Submit\\"
type=\\"submit\\"
Expand Down Expand Up @@ -2302,7 +2293,6 @@ export declare type NestedJsonProps = React.PropsWithChildren<{
overrides?: NestedJsonOverridesProps | undefined | null;
} & {
onSubmit: (fields: NestedJsonInputValues) => void;
onCancel?: () => void;
onChange?: (fields: NestedJsonInputValues) => NestedJsonInputValues;
onValidate?: NestedJsonValidationValues;
}>;
Expand Down Expand Up @@ -2461,15 +2451,8 @@ function ArrayField({
);
}
export default function NestedJson(props) {
const {
initialData,
onSubmit,
onCancel,
onValidate,
onChange,
overrides,
...rest
} = props;
const { initialData, onSubmit, onValidate, onChange, overrides, ...rest } =
props;
const initialValues = {
firstName: undefined,
\\"last-Name\\": undefined,
Expand Down Expand Up @@ -2718,14 +2701,6 @@ export default function NestedJson(props) {
{...getOverrideProps(overrides, \\"ResetButton\\")}
></Button>
<Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
<Button
children=\\"Cancel\\"
type=\\"button\\"
onClick={() => {
onCancel && onCancel();
}}
{...getOverrideProps(overrides, \\"CancelButton\\")}
></Button>
<Button
children=\\"Submit\\"
type=\\"submit\\"
Expand Down Expand Up @@ -2783,7 +2758,6 @@ export declare type NestedJsonProps = React.PropsWithChildren<{
} & {
initialData?: NestedJsonInputValues;
onSubmit: (fields: NestedJsonInputValues) => void;
onCancel?: () => void;
onChange?: (fields: NestedJsonInputValues) => NestedJsonInputValues;
onValidate?: NestedJsonValidationValues;
}>;
Expand Down Expand Up @@ -3464,7 +3438,6 @@ export default function BookCreateForm(props) {
onSuccess,
onError,
onSubmit,
onCancel,
onValidate,
onChange,
overrides,
Expand Down Expand Up @@ -3642,14 +3615,6 @@ export default function BookCreateForm(props) {
{...getOverrideProps(overrides, \\"ClearButton\\")}
></Button>
<Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
<Button
children=\\"Cancel\\"
type=\\"button\\"
onClick={() => {
onCancel && onCancel();
}}
{...getOverrideProps(overrides, \\"CancelButton\\")}
></Button>
<Button
children=\\"Submit\\"
type=\\"submit\\"
Expand Down Expand Up @@ -3695,7 +3660,6 @@ export declare type BookCreateFormProps = React.PropsWithChildren<{
onSubmit?: (fields: BookCreateFormInputValues) => BookCreateFormInputValues;
onSuccess?: (fields: BookCreateFormInputValues) => void;
onError?: (fields: BookCreateFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: BookCreateFormInputValues) => BookCreateFormInputValues;
onValidate?: BookCreateFormValidationValues;
}>;
Expand Down Expand Up @@ -5154,7 +5118,6 @@ export default function BlogCreateForm(props) {
onSuccess,
onError,
onSubmit,
onCancel,
onValidate,
onChange,
overrides,
Expand Down Expand Up @@ -5455,14 +5418,6 @@ export default function BlogCreateForm(props) {
{...getOverrideProps(overrides, \\"ClearButton\\")}
></Button>
<Flex {...getOverrideProps(overrides, \\"RightAlignCTASubFlex\\")}>
<Button
children=\\"Cancel\\"
type=\\"button\\"
onClick={() => {
onCancel && onCancel();
}}
{...getOverrideProps(overrides, \\"CancelButton\\")}
></Button>
<Button
children=\\"Submit\\"
type=\\"submit\\"
Expand Down Expand Up @@ -5517,7 +5472,6 @@ export declare type BlogCreateFormProps = React.PropsWithChildren<{
onSubmit?: (fields: BlogCreateFormInputValues) => BlogCreateFormInputValues;
onSuccess?: (fields: BlogCreateFormInputValues) => void;
onError?: (fields: BlogCreateFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: BlogCreateFormInputValues) => BlogCreateFormInputValues;
onValidate?: BlogCreateFormValidationValues;
}>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,20 @@ exports[`form-render utils should generate before & complete types if datastore
onSubmit?: (fields: mySampleFormInputValues) => mySampleFormInputValues;
onSuccess?: (fields: mySampleFormInputValues) => void;
onError?: (fields: mySampleFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: mySampleFormInputValues) => mySampleFormInputValues;
onValidate?: mySampleFormValidationValues;
}"
`;

exports[`form-render utils should generate regular onsubmit if dataSourceType is custom 1`] = `
"{
onSubmit: (fields: myCustomFormInputValues) => void;
onChange?: (fields: myCustomFormInputValues) => myCustomFormInputValues;
onValidate?: myCustomFormValidationValues;
}"
`;

exports[`form-render utils should render cancel props if included cancel object is an empty object 1`] = `
"{
onSubmit: (fields: myCustomFormInputValues) => void;
onCancel?: () => void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,23 @@ describe('form-render utils', () => {
const node = printNode(propSignatures);
expect(node).toMatchSnapshot();
});

it('should render cancel props if included cancel object is an empty object', () => {
const form: StudioForm = {
id: '123',
name: 'myCustomForm',
formActionType: 'create',
dataType: { dataSourceType: 'Custom', dataTypeName: 'Custom' },
fields: {},
sectionalElements: {},
style: {},
cta: {
cancel: {},
},
};
const propSignatures = buildFormPropNode(form);
const node = printNode(propSignatures);
expect(node).toContain('onCancel?: () => void;');
expect(node).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
StudioForm,
FieldConfigMetadata,
isValidVariableName,
shouldIncludeCancel,
} from '@aws-amplify/codegen-ui';
import {
BindingElement,
Expand Down Expand Up @@ -88,6 +89,10 @@ export const buildMutationBindings = (form: StudioForm) => {
);
}
elements.push(factory.createBindingElement(undefined, undefined, factory.createIdentifier('onSubmit'), undefined));
if (shouldIncludeCancel(form)) {
// onCancel prop
elements.push(factory.createBindingElement(undefined, undefined, factory.createIdentifier('onCancel'), undefined));
}
return elements;
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
StudioComponent,
FormDefinition,
isValidVariableName,
shouldIncludeCancel,
} from '@aws-amplify/codegen-ui';
import {
factory,
Expand Down Expand Up @@ -421,14 +422,18 @@ export const buildFormPropNode = (form: StudioForm) => {
),
);
}
if (shouldIncludeCancel(form)) {
propSignatures.push(
// onCancel?: () => void
factory.createPropertySignature(
undefined,
'onCancel',
factory.createToken(SyntaxKind.QuestionToken),
factory.createFunctionTypeNode(undefined, [], factory.createKeywordTypeNode(SyntaxKind.VoidKeyword)),
),
);
}
propSignatures.push(
// onCancel?: () => void
factory.createPropertySignature(
undefined,
'onCancel',
factory.createToken(SyntaxKind.QuestionToken),
factory.createFunctionTypeNode(undefined, [], factory.createKeywordTypeNode(SyntaxKind.VoidKeyword)),
),
// onChange?: (fields: Record<string, unknown>) => Record<string, unknown>
factory.createPropertySignature(
undefined,
Expand Down
2 changes: 0 additions & 2 deletions packages/codegen-ui-react/lib/forms/react-form-renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -334,8 +334,6 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
const elements: BindingElement[] = [
// add in hooks for before/complete with ds and basic onSubmit with props
...buildMutationBindings(this.component),
// onCancel prop
factory.createBindingElement(undefined, undefined, factory.createIdentifier('onCancel'), undefined),
// onValidate prop
factory.createBindingElement(undefined, undefined, factory.createIdentifier('onValidate'), undefined),
// onChange prop
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,27 @@ describe('mapButtons', () => {
it('correctly excludes from matrix but returns all configs', () => {
const buttonConfigs = mapButtons('create', { submit: { excluded: true } });

expect(buttonConfigs.buttonMatrix).toStrictEqual([['clear'], []]);
expect(buttonConfigs.buttonConfigs.submit).toBeDefined();
expect(buttonConfigs.buttonConfigs.cancel).toBeDefined();
expect(buttonConfigs.buttonConfigs.clear).toBeDefined();
});

it('should add cancel if object is defined and still exclude submit', () => {
const buttonConfigs = mapButtons('create', { submit: { excluded: true }, cancel: {} });

expect(buttonConfigs.buttonMatrix).toStrictEqual([['clear'], ['cancel']]);
expect(buttonConfigs.buttonConfigs.submit).toBeDefined();
expect(buttonConfigs.buttonConfigs.cancel).toBeDefined();
expect(buttonConfigs.buttonConfigs.clear).toBeDefined();
});

it('by default should only include clear and submit', () => {
const buttonConfigs = mapButtons('create', {});

expect(buttonConfigs.buttonMatrix).toStrictEqual([['clear'], ['submit']]);
expect(buttonConfigs.buttonConfigs.submit).toBeDefined();
expect(buttonConfigs.buttonConfigs.cancel).toBeDefined();
expect(buttonConfigs.buttonConfigs.clear).toBeDefined();
});
});
54 changes: 54 additions & 0 deletions packages/codegen-ui/lib/__tests__/utils/form-utils.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { StudioForm } from '../../types';
import { shouldIncludeCancel } from '../../utils/form-utils';

describe('should include cancel button check', () => {
const form: StudioForm = {
name: 'mySampleForm',
formActionType: 'create',
dataType: { dataSourceType: 'Custom', dataTypeName: 'Custom' },
style: {},
sectionalElements: {},
fields: {},
cta: {},
};
it('should not include cancel by default', () => {
expect(shouldIncludeCancel(form)).toBe(false);
});

it('should include cancel if there is an empty object for cancel', () => {
const formOverride: StudioForm = {
...form,
cta: { cancel: {} },
};
expect(shouldIncludeCancel(formOverride)).toBe(true);
});

it('should remove cancel button if explicitly excluded', () => {
const formOverride: StudioForm = {
...form,
cta: { cancel: { excluded: true } },
};
expect(shouldIncludeCancel(formOverride)).toBe(false);
});

it('should not render cancel button even if cta is undefined', () => {
const { cta, ...rest } = form;
// overriding to any in case cta is not defined when pulling from the api
expect(shouldIncludeCancel(rest as any)).toBe(false);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ function mapMatrix(buttons?: StudioFormCTA): string[][] {
) {
return false;
}
// remove cancel by default if there is no defined value for it
if (element === 'cancel' && !buttons?.cancel) {
return false;
}
return true;
});
});
Expand Down
32 changes: 32 additions & 0 deletions packages/codegen-ui/lib/utils/form-utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import { StudioForm } from '../types';

export const shouldIncludeCancel = ({ cta }: StudioForm): boolean => {
// first check if excluded is added in explicitly
if (cta?.cancel && 'excluded' in cta.cancel && cta.cancel.excluded) {
return false;
}
// if we find that cta has cancel defined (ex. an empty object)
// we include the cancel button
if (cta && cta.cancel) {
return true;
}

// otherwise we return false
return false;
};
1 change: 1 addition & 0 deletions packages/codegen-ui/lib/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,4 @@ export * from './string-formatter';
export * from './form-component-metadata';
export * from './form-to-component';
export * from './breakpoint-utils';
export * from './form-utils';

0 comments on commit 662dd10

Please sign in to comment.