fix: collections with name items no longer redeclare the prop name (#183

)

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

@@ -327,6 +327,93 @@ export default function CollectionOfCustomButtons(
 }
 `;
 
+exports[`amplify render tests collection should render collection with data binding if binding name is items 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { User, UserPreferences } from \\"../models\\";
+import {
+  Button,
+  ButtonProps,
+  Collection,
+  CollectionProps,
+  EscapeHatchProps,
+  Flex,
+  FlexProps,
+  getOverrideProps,
+  useDataStoreBinding,
+} from \\"@aws-amplify/ui-react\\";
+
+export type CollectionOfCustomButtonsProps = Partial<CollectionProps<any>> & {
+  width?: Number;
+  backgroundColor?: String;
+  buttonColor?: UserPreferences;
+  items?: any[];
+} & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CollectionOfCustomButtons(
+  props: CollectionOfCustomButtonsProps
+): React.ReactElement {
+  const {
+    width,
+    backgroundColor,
+    buttonColor: buttonColorProp,
+    items: itemsProp,
+    overrides: overridesProp,
+    ...rest
+  } = props;
+  const overrides = { ...overridesProp };
+  const itemsFilterObj = {
+    and: [
+      { field: \\"age\\", operand: \\"10\\", operator: \\"gt\\" },
+      { field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
+    ],
+  };
+  const items =
+    itemsProp !== undefined
+      ? itemsProp
+      : useDataStoreBinding({
+          type: \\"collection\\",
+          model: User,
+        }).items;
+  const buttonColorFilterObj = {
+    field: \\"userID\\",
+    operand: \\"user@email.com\\",
+    operator: \\"eq\\",
+  };
+  const buttonColorDataStore = useDataStoreBinding({
+    type: \\"collection\\",
+    model: UserPreferences,
+  }).items[0];
+  const buttonColor =
+    buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
+  return (
+    <Collection
+      type=\\"list\\"
+      isPaginated={true}
+      gap=\\"1.5rem\\"
+      backgroundColor={backgroundColor}
+      items={items || []}
+      {...rest}
+      {...getOverrideProps(overrides, \\"Collection\\")}
+    >
+      {(item, index) => (
+        <Flex {...getOverrideProps(overrides, \\"Collection.Flex\\")}>
+          <Button
+            label={item.username || \\"hspain@gmail.com\\"}
+            labelWidth={width}
+            backgroundColor={buttonColor?.favoriteColor}
+            disabled={isDisabled}
+            {...getOverrideProps(overrides, \\"Collection.Flex.Button\\")}
+          ></Button>
+        </Flex>
+      )}
+    </Collection>
+  );
+}
+"
+`;
+
 exports[`amplify render tests collection should render collection with data binding with no predicate 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

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

@@ -146,6 +146,11 @@ describe('amplify render tests', () => {
       const generatedCode = generateWithAmplifyRenderer('collectionWithBindingAndSort');
       expect(generatedCode).toMatchSnapshot();
     });
+
+    it('should render collection with data binding if binding name is items', () => {
+      const generatedCode = generateWithAmplifyRenderer('collectionWithBindingItemsName');
+      expect(generatedCode.componentText).toMatchSnapshot();
+    });
   });
 
   describe('complex examples', () => {

packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/collectionWithBindingItemsName.json

@@ -0,0 +1,95 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Collection",
+  "name": "CollectionOfCustomButtons",
+  "properties": {
+    "type": {
+      "value": "list"
+    },
+    "isPaginated": {
+      "value": true
+    },
+    "gap": {
+      "value": "1.5rem"
+    },
+    "backgroundColor": {
+      "bindingProperties": {
+        "property": "backgroundColor"
+      }
+    }
+  },
+  "bindingProperties": {
+    "width": {
+      "type": "Number"
+    },
+    "backgroundColor": {
+      "type": "String"
+    },
+    "buttonColor": {
+      "type": "Data",
+      "bindingProperties": {
+        "model": "UserPreferences",
+        "predicate": {
+          "field": "userID",
+          "operand": "user@email.com",
+          "operator": "eq"
+        }
+      }
+    }
+  },
+  "collectionProperties": {
+    "items": {
+      "model": "User",
+      "predicate": {
+        "and": [
+          {
+            "field": "age",
+            "operand": "10",
+            "operator": "gt"
+          },
+          {
+            "field": "lastName",
+            "operand": "L",
+            "operator": "beginsWith"
+          }
+        ]
+      }
+    }
+  },
+  "children": [
+    {
+      "componentType": "Flex",
+      "properties": {},
+      "children": [
+        {
+          "componentType": "Button",
+          "properties": {
+            "label": {
+              "collectionBindingProperties": {
+                "property": "items",
+                "field": "username"
+              },
+              "defaultValue": "hspain@gmail.com"
+            },
+            "labelWidth": {
+              "bindingProperties": {
+                "property": "width"
+              }
+            },
+            "backgroundColor": {
+              "bindingProperties": {
+                "property": "buttonColor",
+                "field": "favoriteColor"
+              }
+            },
+            "disabled": {
+              "bindingProperties": {
+                "property": "isDisabled"
+              }
+            }
+          }
+        }
+      ]
+    }
+  ]
+}

packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts

@@ -441,12 +441,14 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     }
 
     if (component.componentType === 'Collection') {
-      const bindingElement = factory.createBindingElement(
-        undefined,
-        undefined,
-        factory.createIdentifier('items'),
-        undefined,
-      );
+      const bindingElement = this.hasCollectionPropertyNamedItems(component)
+        ? factory.createBindingElement(
+            undefined,
+            factory.createIdentifier('items'),
+            factory.createIdentifier('itemsProp'),
+            undefined,
+          )
+        : factory.createBindingElement(undefined, undefined, factory.createIdentifier('items'), undefined);
       elements.push(bindingElement);
     }
 
@@ -656,7 +658,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
         statements.push(
           this.buildPropPrecedentStatement(
             propName,
-            'items',
+            this.hasCollectionPropertyNamedItems(component) ? 'itemsProp' : 'items',
             factory.createPropertyAccessExpression(
               this.buildUseDataStoreBindingCall(
                 'collection',
@@ -1000,6 +1002,13 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     );
   }
 
+  private hasCollectionPropertyNamedItems(component: StudioComponent): boolean {
+    if (component.collectionProperties === undefined) {
+      return false;
+    }
+    return Object.keys(component.collectionProperties).some((propName) => propName === 'items');
+  }
+
   private getPaginationName(propName: string): string {
     return `${propName}Pagination`;
   }

packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js

@@ -150,6 +150,19 @@ describe('Generated Components', () => {
       cy.get('#collections').get('#collectionWithSort button').eq(1).contains('LUser2');
       cy.get('#collections').get('#collectionWithSort button').eq(2).contains('LUser3');
     });
+
+    it('It renders a list of override values with collectionProperty named items', () => {
+      cy.visit('http://localhost:3000/component-tests');
+      cy.get('#collections').get('#collectionWithBindingItemsNameWithOverrides button').eq(0).contains('Yankee');
+      cy.get('#collections').get('#collectionWithBindingItemsNameWithOverrides button').eq(1).contains('Feather');
+    });
+
+    it('It renders data pulled from local datastore with collectionProperty named items', () => {
+      cy.visit('http://localhost:3000/component-tests');
+      cy.get('#collections').get('#collectionWithBindingItemsNameNoOverrides button').eq(0).contains('Real');
+      cy.get('#collections').get('#collectionWithBindingItemsNameNoOverrides button').eq(1).contains('Another');
+      cy.get('#collections').get('#collectionWithBindingItemsNameNoOverrides button').eq(2).contains('Last');
+    });
   });
 
   describe('Default Value', () => {

packages/test-generator/integration-test-templates/src/ComponentTests.tsx

@@ -45,6 +45,7 @@ import CollectionWithSort from './ui-components/CollectionWithSort';
 import ParsedFixedValues from './ui-components/ParsedFixedValues';
 import { DataStore } from 'aws-amplify';
 import { User } from './models';
+import CollectionWithBindingItemsName from './ui-components/CollectionWithBindingItemsName';
 /* eslint-enable import/extensions */
 
 export default function ComponentTests() {
@@ -174,6 +175,22 @@ export default function ComponentTests() {
         />
         <CollectionWithBinding id="collectionWithBindingNoOverrides" />
         <CollectionWithSort id="collectionWithSort" />
+        <CollectionWithBindingItemsName id="collectionWithBindingItemsNameNoOverrides" />
+        <CollectionWithBindingItemsName
+          id="collectionWithBindingItemsNameWithOverrides"
+          items={[
+            {
+              id: '1',
+              firstName: 'Yankee',
+              lastName: 'Doodle',
+            },
+            {
+              id: '2',
+              firstName: 'Feather',
+              lastName: 'Cap',
+            },
+          ]}
+        />
       </div>
       <div id="default-value">
         <h2>Default Value</h2>