fix: add data binding model imports (#49)

aws-amplify · Sep 8, 2021 · 11e5c47 · 11e5c47
1 parent 5d95386
commit 11e5c47
Show file tree

Hide file tree

Showing 10 changed files with 932 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -78,6 +78,25 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
 }"
 `;
 
+exports[`amplify render tests component with data binding should add model imports 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { User } from \\"../models\\";
+import { Button, EscapeHatchProps, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+
+export type ComponentWithDataBindingProps = {
+    width: Number;
+    isDisabled: Boolean;
+    buttonUser?: User;
+    buttonColor: String;
+} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
+export default function ComponentWithDataBinding(props: ComponentWithDataBindingProps): JSX.Element {
+    return (<Button label={buttonUser.username || \\"hspain@gmail.com\\"} labelWidth={width} disabled={isDisabled} {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button>);
+}"
+`;
+
 exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -74,4 +74,11 @@ describe('amplify render tests', () => {
       expect(generatedCode).toMatchSnapshot();
     });
   });
+
+  describe('component with data binding', () => {
+    it('should add model imports', () => {
+      const generatedCode = generateWithAmplifyRenderer('componentWithDataBinding');
+      expect(generatedCode).toMatchSnapshot();
+    });
+  });
 });
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithDataBinding.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithDataBinding.json
@@ -0,0 +1,41 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Button",
+  "name": "ComponentWithDataBinding",
+  "bindingProperties": {
+    "width": {
+      "type": "Number"
+    },
+    "isDisabled": {
+      "type": "Boolean"
+    },
+    "buttonUser": {
+      "type": "Data",
+      "bindingProperties": {
+        "model": "User"
+      }
+    },
+    "buttonColor": {
+      "type": "String"
+    }
+  },
+  "properties": {
+    "label": {
+      "bindingProperties": {
+        "property": "buttonUser",
+        "field": "username"
+      },
+      "defaultValue": "hspain@gmail.com"
+    },
+    "labelWidth": {
+      "bindingProperties": {
+        "property": "width"
+      }
+    },
+    "disabled": {
+      "bindingProperties": {
+        "property": "isDisabled"
+      }
+    }
+  }
+}
diff --git a/packages/studio-ui-codegen-react/lib/react-component-render-helper.ts b/packages/studio-ui-codegen-react/lib/react-component-render-helper.ts
@@ -4,10 +4,14 @@ import {
   CollectionStudioComponentProperty,
   WorkflowStudioComponentProperty,
   FormStudioComponentProperty,
+  StudioComponent,
+  StudioComponentChild,
 } from '@amzn/amplify-ui-codegen-schema';
 
 import { factory, JsxAttribute, JsxExpression, StringLiteral, SyntaxKind } from 'typescript';
 
+import { ImportCollection } from './import-collection';
+
 export function getFixedComponentPropValueExpression(prop: FixedStudioComponentProperty): StringLiteral {
   return factory.createStringLiteral(prop.value.toString(), true);
 }
@@ -183,3 +187,16 @@ export function buildCollectionBindingAttrWithDefault(
   );
   return attr;
 }
+
+export function addBindingPropertiesImports(
+  component: StudioComponent | StudioComponentChild,
+  importCollection: ImportCollection,
+) {
+  if ('bindingProperties' in component) {
+    Object.entries(component.bindingProperties).forEach(([property, binding]) => {
+      if ('bindingProperties' in binding && 'model' in binding.bindingProperties) {
+        importCollection.addImport('../models', binding.bindingProperties.model);
+      }
+    });
+  }
+}
diff --git a/packages/studio-ui-codegen-react/lib/react-component-renderer.ts b/packages/studio-ui-codegen-react/lib/react-component-renderer.ts
@@ -2,12 +2,13 @@ import { StudioComponent, StudioComponentChild, StudioComponentProperties } from
 import { ComponentRendererBase } from '@amzn/studio-ui-codegen';
 import { JsxAttribute, JsxAttributeLike, JsxElement, JsxOpeningElement, NodeFactory } from 'typescript';
 
+import { addBindingPropertiesImports, buildOpeningElementAttributes } from './react-component-render-helper';
 import { ImportCollection } from './import-collection';
-import { buildOpeningElementAttributes } from './react-component-render-helper';
 
 export abstract class ReactComponentRenderer<TPropIn> extends ComponentRendererBase<TPropIn, JsxElement> {
   constructor(component: StudioComponent | StudioComponentChild, protected importCollection: ImportCollection) {
     super(component);
+    addBindingPropertiesImports(component, importCollection);
   }
 
   protected renderOpeningElement(

diff --git a/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts b/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
@@ -12,7 +12,7 @@ import {
   Expression,
 } from 'typescript';
 import { ImportCollection } from './import-collection';
-import { buildOpeningElementAttributes } from './react-component-render-helper';
+import { addBindingPropertiesImports, buildOpeningElementAttributes } from './react-component-render-helper';
 
 export abstract class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithChildrenRendererBase<
   TPropIn,
@@ -21,6 +21,7 @@ export abstract class ReactComponentWithChildrenRenderer<TPropIn> extends Compon
 > {
   constructor(component: StudioComponent | StudioComponentChild, protected importCollection: ImportCollection) {
     super(component);
+    addBindingPropertiesImports(component, importCollection);
   }
 
   protected renderCustomCompOpeningElement(

diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
@@ -243,22 +243,21 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
       return factory.createTypeLiteralNode([]);
     }
     for (let bindingProp of Object.entries(component.bindingProperties)) {
-      const propName = bindingProp[0];
-      const typeName = bindingProp[1].type.toString();
-      if (isSimplePropertyBinding(bindingProp[1])) {
+      const [propName, binding] = bindingProp;
+      if (isSimplePropertyBinding(binding)) {
         const propSignature = factory.createPropertySignature(
           undefined,
           propName,
           undefined,
-          factory.createTypeReferenceNode(typeName, undefined),
+          factory.createTypeReferenceNode(binding.type, undefined),
         );
         propSignatures.push(propSignature);
-      } else if (isDataPropertyBinding(bindingProp[1])) {
+      } else if (isDataPropertyBinding(binding)) {
         const propSignature = factory.createPropertySignature(
           undefined,
           propName,
           factory.createToken(SyntaxKind.QuestionToken),
-          factory.createTypeReferenceNode(typeName, undefined),
+          factory.createTypeReferenceNode(binding.bindingProperties.model, undefined),
         );
         propSignatures.push(propSignature);
       }

diff --git a/packages/test-generator/lib/componentWithDataBinding.json b/packages/test-generator/lib/componentWithDataBinding.json
@@ -0,0 +1,41 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Button",
+  "name": "ComponentWithDataBinding",
+  "bindingProperties": {
+    "width": {
+      "type": "Number"
+    },
+    "isDisabled": {
+      "type": "Boolean"
+    },
+    "buttonUser": {
+      "type": "Data",
+      "bindingProperties": {
+        "model": "User"
+      }
+    },
+    "buttonColor": {
+      "type": "String"
+    }
+  },
+  "properties": {
+    "label": {
+      "bindingProperties": {
+        "property": "buttonUser",
+        "field": "username"
+      },
+      "defaultValue": "hspain@gmail.com"
+    },
+    "labelWidth": {
+      "bindingProperties": {
+        "property": "width"
+      }
+    },
+    "disabled": {
+      "bindingProperties": {
+        "property": "isDisabled"
+      }
+    }
+  }
+}
diff --git a/packages/test-generator/lib/index.ts b/packages/test-generator/lib/index.ts
@@ -8,3 +8,4 @@ export { default as HeaderWithAction } from './headerWithAction.json';
 export { default as SampleCodeSnippet } from './sampleCodeSnippet.json';
 export { default as TextGolden } from './textGolden.json';
 export { default as CollectionWithBinding } from './collectionWithBinding.json';
+export { default as ComponentWithDataBinding } from './componentWithDataBinding.json';