From 384148a7877febd712a4e825a3750ff142aff1bb Mon Sep 17 00:00:00 2001
From: Dane Pilcher <dppilche@amazon.com>
Date: Thu, 16 Sep 2021 20:14:37 +0000
Subject: [PATCH] fix: only use useDataStoreBinding when predicate is set

Resolves #84
---
 .../studio-ui-codegen-react.test.ts.snap      |  66 +++++++++++-
 .../__tests__/studio-ui-codegen-react.test.ts |   5 +
 .../dataBindingWithoutPredicate.json          | 100 ++++++++++++++++++
 .../lib/react-studio-template-renderer.ts     |  23 ++--
 tmp                                           |   1 +
 5 files changed, 177 insertions(+), 18 deletions(-)
 create mode 100644 packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/dataBindingWithoutPredicate.json
 create mode 100644 tmp

diff --git a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
index b27f512ee..647e9eb3d 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
+++ b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -215,11 +215,6 @@ export default function ComponentWithDataBinding(
   props: ComponentWithDataBindingProps
 ): JSX.Element {
   const { width, isDisabled, buttonUser, buttonColor } = props;
-  const { buttonUser } = useDataStoreBinding({
-    type: \\"record\\",
-    model: User,
-    criteria: buttonUserFilter,
-  });
   return (
     <Button
       label={buttonUser.username || \\"hspain@gmail.com\\"}
@@ -233,6 +228,67 @@ export default function ComponentWithDataBinding(
 "
 `;
 
+exports[`amplify render tests component with data binding should not have useDataStoreBinding when there is no predicate 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { UntitledModel } from \\"../models\\";
+import {
+  EscapeHatchProps,
+  Flex,
+  Text,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type SectionHeadingProps = {
+  newProp6fd1?: UntitledModel,
+} & {
+  overrides?: EscapeHatchProps | undefined | null,
+};
+export default function SectionHeading(
+  props: SectionHeadingProps
+): JSX.Element {
+  const { newProp6fd1 } = props;
+  return (
+    <Flex
+      padding=\\"0px 0px 10px 0px\\"
+      backgroundColor=\\"rgb(255,255,255)\\"
+      direction=\\"column\\"
+      {...props}
+      {...getOverrideProps(props.overrides, \\"Flex\\")}
+    >
+      <Flex
+        tes={newProp6fd1.untitledfield}
+        {...getOverrideProps(props.overrides, \\"Flex.Flex\\")}
+      >
+        <Text
+          fontFamily=\\"Inter\\"
+          color=\\"rgb(15.539060980081558,29.73937589675188,47.8125)\\"
+          textAlign=\\"left\\"
+          fontSize=\\"48px\\"
+          lineHeight=\\"48px\\"
+          fontWeight=\\"300\\"
+          {...getOverrideProps(props.overrides, \\"Flex.Flex.Text\\")}
+        >
+          Heading 2
+        </Text>
+      </Flex>
+      <Text
+        fontFamily=\\"Inter\\"
+        color=\\"rgb(0,0,0)\\"
+        textAlign=\\"left\\"
+        fontSize=\\"32px\\"
+        lineHeight=\\"48px\\"
+        fontWeight=\\"400\\"
+        {...getOverrideProps(props.overrides, \\"Flex.Text\\")}
+      >
+        subtitle
+      </Text>
+    </Flex>
+  );
+}
+"
+`;
+
 exports[`amplify render tests component with data binding should render collection data binding 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
index 291aa78bb..bd04c220b 100644
--- 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
@@ -90,6 +90,11 @@ describe('amplify render tests', () => {
       const generatedCode = generateWithAmplifyRenderer('collectionWithBinding');
       expect(generatedCode).toMatchSnapshot();
     });
+
+    it('should not have useDataStoreBinding when there is no predicate', () => {
+      const generatedCode = generateWithAmplifyRenderer('dataBindingWithoutPredicate');
+      expect(generatedCode).toMatchSnapshot();
+    });
   });
 
   describe('component with binding', () => {
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/dataBindingWithoutPredicate.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/dataBindingWithoutPredicate.json
new file mode 100644
index 000000000..78eb66948
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/dataBindingWithoutPredicate.json
@@ -0,0 +1,100 @@
+{
+  "sourceId": "372:15567",
+  "componentType": "Flex",
+  "bindingProperties": {
+    "newProp6fd1": {
+      "type": "Data",
+      "bindingProperties": {
+        "model": "UntitledModel"
+      }
+    }
+  },
+  "children": [
+    {
+      "name": "Heading",
+      "componentType": "Flex",
+      "children": [
+        {
+          "name": "Heading 2",
+          "componentType": "Text",
+          "children": [],
+          "properties": {
+            "fontFamily": {
+              "value": "Inter"
+            },
+            "color": {
+              "value": "rgb(15.539060980081558,29.73937589675188,47.8125)"
+            },
+            "textAlign": {
+              "value": "left"
+            },
+            "fontSize": {
+              "value": "48px"
+            },
+            "lineHeight": {
+              "value": "48px"
+            },
+            "value": {
+              "value": "Heading 2"
+            },
+            "fontWeight": {
+              "value": "300"
+            }
+          }
+        }
+      ],
+      "properties": {
+        "tes": {
+          "bindingProperties": {
+            "property": "newProp6fd1.untitledfield"
+          }
+        }
+      }
+    },
+    {
+      "name": "subtitle",
+      "componentType": "Text",
+      "children": [],
+      "properties": {
+        "fontFamily": {
+          "value": "Inter"
+        },
+        "color": {
+          "value": "rgb(0,0,0)"
+        },
+        "textAlign": {
+          "value": "left"
+        },
+        "fontSize": {
+          "value": "32px"
+        },
+        "lineHeight": {
+          "value": "48px"
+        },
+        "value": {
+          "value": "subtitle"
+        },
+        "fontWeight": {
+          "value": "400"
+        }
+      }
+    }
+  ],
+  "name": "SectionHeading",
+  "id": "c-b1fYXAcpNYHNt0jbZ4",
+  "overrides": {},
+  "variants": [],
+  "properties": {
+    "padding": {
+      "value": "0px 0px 10px 0px"
+    },
+    "backgroundColor": {
+      "value": "rgb(255,255,255)"
+    },
+    "direction": {
+      "value": "column"
+    }
+  },
+  "appId": "d1rxgz43y8l9ij",
+  "environmentName": "staging"
+}
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
index 8221d021a..90ae43136 100644
--- a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
+++ b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
@@ -387,16 +387,14 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
           const [propName, binding] = collectionProp;
           if (isDataPropertyBinding(binding)) {
             const { bindingProperties } = binding;
-            const { predicate } = bindingProperties;
             if ('predicate' in bindingProperties && bindingProperties.predicate !== undefined) {
               statements.push(this.buildPredicateDeclaration(propName, bindingProperties.predicate));
+              const { model } = bindingProperties;
+              this.importCollection.addImport('../models', model);
+              this.buildUseDataStoreBindingCall('collection', propName, model).forEach((value) => {
+                statements.push(value);
+              });
             }
-
-            const { model } = bindingProperties;
-            this.importCollection.addImport('../models', model);
-            this.buildUseDataStoreBindingCall('collection', propName, model).forEach((value) => {
-              statements.push(value);
-            });
           }
         });
       }
@@ -408,15 +406,14 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
         const [propName, binding] = compBindingProp;
         if (isDataPropertyBinding(binding)) {
           const { bindingProperties } = binding;
-          const { predicate } = bindingProperties;
           if ('predicate' in bindingProperties && bindingProperties.predicate !== undefined) {
             statements.push(this.buildPredicateDeclaration(propName, bindingProperties.predicate));
+            const { model } = bindingProperties;
+            this.importCollection.addImport('../models', model);
+            this.buildUseDataStoreBindingCall('record', propName, model).forEach((value) => {
+              statements.push(value);
+            });
           }
-
-          const { model } = bindingProperties;
-          this.buildUseDataStoreBindingCall('record', propName, model).forEach((value) => {
-            statements.push(value);
-          });
         }
       });
     }
diff --git a/tmp b/tmp
new file mode 100644
index 000000000..b3eaebcf5
--- /dev/null
+++ b/tmp
@@ -0,0 +1 @@
+{"sourceId":"372:15567","componentType":"Flex","bindingProperties":{"newProp6fd1":{"type":"Data","bindingProperties":{"model":"UntitledModel"}}},"children":[{"name":"Heading","componentType":"Flex","children":[{"name":"Heading 2","componentType":"Text","children":[],"properties":{"fontFamily":{"value":"Inter"},"color":{"value":"rgb(15.539060980081558,29.73937589675188,47.8125)"},"textAlign":{"value":"left"},"fontSize":{"value":"48px"},"lineHeight":{"value":"48px"},"value":{"value":"Heading 2"},"fontWeight":{"value":"300"}}}],"properties":{"tes":{"bindingProperties":{"property":"newProp6fd1.untitledfield"}}}},{"name":"subtitle","componentType":"Text","children":[],"properties":{"fontFamily":{"value":"Inter"},"color":{"value":"rgb(0,0,0)"},"textAlign":{"value":"left"},"fontSize":{"value":"32px"},"lineHeight":{"value":"48px"},"value":{"value":"subtitle"},"fontWeight":{"value":"400"}}}],"name":"SectionHeading","id":"c-b1fYXAcpNYHNt0jbZ4","overrides":{},"variants":[],"properties":{"padding":{"value":"0px 0px 10px 0px"},"backgroundColor":{"value":"rgb(255,255,255)"},"direction":{"value":"column"}},"appId":"d1rxgz43y8l9ij","environmentName":"staging"}