fix: by default hide cancel

packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap

@@ -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,
@@ -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\\"
@@ -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;
 }>;
@@ -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,
@@ -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\\"
@@ -2783,7 +2758,6 @@ export declare type NestedJsonProps = React.PropsWithChildren<{
 } & {
     initialData?: NestedJsonInputValues;
     onSubmit: (fields: NestedJsonInputValues) => void;
-    onCancel?: () => void;
     onChange?: (fields: NestedJsonInputValues) => NestedJsonInputValues;
     onValidate?: NestedJsonValidationValues;
 }>;
@@ -3461,7 +3435,6 @@ export default function BookCreateForm(props) {
     onSuccess,
     onError,
     onSubmit,
-    onCancel,
     onValidate,
     onChange,
     overrides,
@@ -3635,14 +3608,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\\"
@@ -3688,7 +3653,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;
 }>;
@@ -4281,7 +4245,6 @@ export default function BlogCreateForm(props) {
     onSuccess,
     onError,
     onSubmit,
-    onCancel,
     onValidate,
     onChange,
     overrides,
@@ -4582,14 +4545,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\\"
@@ -4644,7 +4599,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;
 }>;

packages/codegen-ui-react/lib/__tests__/react-forms/__snapshots__/form-renderer-helper.test.ts.snap

@@ -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;

packages/codegen-ui-react/lib/__tests__/react-forms/form-renderer-helper.test.ts

@@ -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();
+  });
 });

packages/codegen-ui-react/lib/forms/form-renderer-helper/event-handler-props.ts

@@ -20,6 +20,7 @@ import {
   StudioForm,
   FieldConfigMetadata,
   isValidVariableName,
+  shouldIncludeCancel,
 } from '@aws-amplify/codegen-ui';
 import {
   BindingElement,
@@ -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;
 };
 

packages/codegen-ui-react/lib/forms/form-renderer-helper/type-helper.ts

@@ -20,6 +20,7 @@ import {
   StudioComponent,
   FormDefinition,
   isValidVariableName,
+  shouldIncludeCancel,
 } from '@aws-amplify/codegen-ui';
 import {
   factory,
@@ -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,

packages/codegen-ui-react/lib/forms/react-form-renderer.ts

@@ -333,8 +333,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

packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/map-cta.test.ts

@@ -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();
+  });
 });

packages/codegen-ui/lib/__tests__/utils/form-utils.test.ts

@@ -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);
+  });
+});

packages/codegen-ui/lib/generate-form-definition/helpers/map-cta.ts

@@ -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;
     });
   });

packages/codegen-ui/lib/utils/form-utils.ts

@@ -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;
+};

packages/codegen-ui/lib/utils/index.ts

@@ -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';