feat: add user specific attrs

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

@@ -570,3 +570,46 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
 }
 "
 `;
+
+exports[`amplify render tests user specific attributes should render user specific attributes 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  Flex,
+  Image,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type ProfileProps = {} & {
+  overrides?: EscapeHatchProps | undefined | null,
+};
+export default function Profile(props: ProfileProps): JSX.Element {
+  const {} = props;
+  const {
+    attributes: {
+      username,
+      picture: userImage,
+      [\\"custom:favorite_icecream\\"]: customUserAttributeIcecream,
+    },
+  } = useAuthenticatedUser();
+  return (
+    <Flex {...props} {...getOverrideProps(props.overrides, \\"Flex\\")}>
+      <Image
+        src={userImage}
+        {...getOverrideProps(props.overrides, \\"Flex.Image\\")}
+      ></Image>
+      <Button
+        label={username}
+        {...getOverrideProps(props.overrides, \\"Flex.Button\\")}
+      ></Button>
+      <Button
+        label={customUserAttributeIcecream}
+        {...getOverrideProps(props.overrides, \\"Flex.Button\\")}
+      ></Button>
+    </Flex>
+  );
+}
+"
+`;

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

@@ -133,4 +133,10 @@ describe('amplify render tests', () => {
       ).toMatchSnapshot();
     });
   });
+
+  describe('user specific attributes', () => {
+    it('should render user specific attributes', () => {
+      expect(generateWithAmplifyRenderer('componentWithUserSpecificAttributes')).toMatchSnapshot();
+    });
+  });
 });

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

@@ -0,0 +1,58 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Flex",
+  "name": "Profile",
+  "bindingProperties": {
+    "username": {
+      "type": "Authentication",
+      "bindingProperties": {
+        "userAttribute": "username"
+      }
+    },
+    "userImage": {
+      "type": "Authentication",
+      "bindingProperties": {
+        "userAttribute": "picture"
+      }
+    },
+    "customUserAttributeIcecream": {
+      "type": "Authentication",
+      "bindingProperties": {
+        "userAttribute": "custom:favorite_icecream"
+      }
+    }
+  },
+  "children": [
+    {
+      "componentType": "Image",
+      "properties": {
+        "src": {
+          "bindingProperties": {
+            "property": "userImage"
+          }
+        }
+      }
+    },
+    {
+      "componentType": "Button",
+      "properties": {
+        "label": {
+          "bindingProperties": {
+            "property": "username"
+          }
+        }
+      }
+    },
+    {
+      "componentType": "Button",
+      "properties": {
+        "label": {
+          "bindingProperties": {
+            "property": "customUserAttributeIcecream"
+          }
+        }
+      }
+    }
+  ],
+  "properties": {}
+}

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

@@ -1,10 +1,16 @@
-import { StudioComponent, StudioComponentChild, StudioComponentPredicate } from '@amzn/amplify-ui-codegen-schema';
+import {
+  StudioComponent,
+  StudioComponentChild,
+  StudioComponentPredicate,
+  StudioComponentAuthPropertyBinding,
+} from '@amzn/amplify-ui-codegen-schema';
 import {
   StudioTemplateRenderer,
   StudioRendererConstants,
   isStudioComponentWithBinding,
   isSimplePropertyBinding,
   isDataPropertyBinding,
+  isAuthPropertyBinding,
 } from '@amzn/studio-ui-codegen';
 
 import { EOL } from 'os';
@@ -28,6 +34,8 @@ import ts, {
   Modifier,
   ObjectLiteralExpression,
   CallExpression,
+  Identifier,
+  ComputedPropertyName,
 } from 'typescript';
 import prettier from 'prettier';
 import parserBabel from 'prettier/parser-babel';
@@ -376,6 +384,11 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
       statements.push(statement);
     }
 
+    const authStatement = this.buildUseAuthenticatedUserStatement(component);
+    if (authStatement !== undefined) {
+      statements.push(authStatement);
+    }
+
     const useStoreBindingStatements = this.buildUseDataStoreBindingStatements(component);
     useStoreBindingStatements.forEach((entry) => {
       statements.push(entry);
@@ -384,6 +397,53 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     return statements;
   }
 
+  private buildUseAuthenticatedUserStatement(component: StudioComponent): Statement | undefined {
+    if (isStudioComponentWithBinding(component)) {
+      const authPropertyBindings = Object.entries(component.bindingProperties).filter(([, binding]) =>
+        isAuthPropertyBinding(binding),
+      );
+      if (authPropertyBindings.length) {
+        // create destructuring statements
+        // { propertyName: newName, ['custom:property']: customProperty }
+        const bindings = factory.createObjectBindingPattern(
+          authPropertyBindings.map(([propName, binding]) => {
+            const {
+              bindingProperties: { userAttribute },
+            } = binding as StudioComponentAuthPropertyBinding;
+            let propertyName: undefined | Identifier | ComputedPropertyName = factory.createIdentifier(userAttribute);
+            if (userAttribute.startsWith('custom:')) {
+              propertyName = factory.createComputedPropertyName(factory.createStringLiteral(userAttribute));
+            } else if (propName === userAttribute) {
+              propertyName = undefined;
+            }
+            return factory.createBindingElement(undefined, propertyName, factory.createIdentifier(propName), undefined);
+          }),
+        );
+
+        // get values from useAuthenticatedUser
+        // const { attributes: { property } } = useAuthenticatedUser()
+        return factory.createVariableStatement(
+          undefined,
+          factory.createVariableDeclarationList(
+            [
+              factory.createVariableDeclaration(
+                factory.createObjectBindingPattern([
+                  factory.createBindingElement(undefined, factory.createIdentifier('attributes'), bindings, undefined),
+                ]),
+                undefined,
+                undefined,
+                factory.createCallExpression(factory.createIdentifier('useAuthenticatedUser'), undefined, []),
+              ),
+            ],
+            ts.NodeFlags.Const,
+          ),
+        );
+      }
+    }
+
+    return undefined;
+  }
+
   private buildUseDataStoreBindingStatements(component: StudioComponent): Statement[] {
     const collections: (StudioComponent | StudioComponentChild)[] = [];
     if (component.collectionProperties !== undefined) {