feat: add data binding predicate

[dpilch]

• add data binding predicate filter
• add collection binding model imports

Example component:

/** *************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 ************************************************************************* */

/* eslint-disable */
import React from "react";
import { User, UserPreferences } from "../models";
import {
  Button,
  Collection,
  EscapeHatchProps,
  Flex,
  getOverrideProps,
} from "@aws-amplify/ui-react";

export type CollectionOfCustomButtonsProps = {
  width: Number,
  backgroundColor: String,
  buttonColor?: UserPreferences,
} & {
  overrides?: EscapeHatchProps | undefined | null,
};
export default function CollectionOfCustomButtons(
  props: CollectionOfCustomButtonsProps
): JSX.Element {
  const buttonUserFilter = {
    and: [
      { field: "age", operand: "10", operator: "gt" },
      { field: "lastName", operand: "L", operator: "beginsWith" },
    ],
  };
  const { buttonUser } = useDataStoreBinding({
    type: "collection",
    model: User,
    criteria: buttonUserFilter,
  });
  const buttonColorFilter = {
    field: "userID",
    operand: "user@email.com",
    operator: "eq",
  };
  const { buttonColor } = useDataStoreBinding({
    type: "record",
    model: UserPreferences,
    criteria: buttonColorFilter,
  });
  return (
    <Collection
      type="list"
      gap="1.5rem"
      backgroundColor={backgroundColor}
      items={buttonUser}
      {...props}
      {...getOverrideProps(props.overrides, "Collection")}
    >
      {(item, index) => (
        <Flex {...props} {...getOverrideProps(props.overrides, "Flex")}>
          <Button
            label={item.username || "hspain@gmail.com"}
            labelWidth={width}
            backgroundColor={buttonColor.favoriteColor}
            disabled={isDisabled}
            {...props}
            {...getOverrideProps(props.overrides, "Button")}
          ></Button>
        </Flex>
      )}
    </Collection>
  );
}

Changes needed in schema:

diff --git a/packages/amplify-ui-codegen-schema/lib/types/index.ts b/packages/amplify-ui-codegen-schema/lib/types/index.ts
index ed7917d..2ba31b1 100644
--- a/packages/amplify-ui-codegen-schema/lib/types/index.ts
+++ b/packages/amplify-ui-codegen-schema/lib/types/index.ts
@@ -378,10 +378,17 @@ export enum StudioComponentPropertyBindingType {
  */
 export type StudioComponentDataBindingProperty = {
   model: string;
-  field?: string;
-  predicate?: string;
+  predicate?: StudioComponentPredicate;
 };
 
diff --git a/packages/amplify-ui-codegen-schema/lib/types/index.ts b/packages/amplify-ui-codegen-schema/lib/types/index.ts
index ed7917d..2ba31b1 100644
--- a/packages/amplify-ui-codegen-schema/lib/types/index.ts
+++ b/packages/amplify-ui-codegen-schema/lib/types/index.ts
@@ -378,10 +378,17 @@ export enum StudioComponentPropertyBindingType {
  */
 export type StudioComponentDataBindingProperty = {
   model: string;
-  field?: string;
-  predicate?: string;
+  predicate?: StudioComponentPredicate;
 };
 
+export interface StudioComponentPredicate {
+  and?: StudioComponentPredicate[];
+  field?: String;
+  operand?: String;
+  operator?: String;
+  or?: StudioComponentPredicate[];
+}
+

[frimfram]

wondering if some sample json can be added to test-generator?

[dpilch]

We should already have one here: https://github.com/aws-amplify/amplify-ui-staging/blob/main/packages/test-generator/lib/collectionWithBinding.json