@aws-amplify/amplify-util-uibuilder 1.5.0-binary-file-size.0 → 1.5.0-studio-forms.0

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -6,9 +6,12 @@ import {
   getEnvName,
   getAppId,
   resolveAppId,
+  generateUiBuilderForms,
 } from '../commands/utils';
 import { AmplifyStudioClient } from '../clients';
 import * as createUiBuilderComponentDependency from '../commands/utils/codegenResources';
+import { exampleSchema } from './utils';
+import { GenericDataModel, GenericDataSchema } from '@aws-amplify/codegen-ui';
 
 jest.mock('amplify-cli-core', () => ({
   ...jest.requireActual('amplify-cli-core'),
@@ -17,6 +20,9 @@ jest.mock('amplify-cli-core', () => ({
     getNumber: () => 0,
   },
 }));
+jest.mock('../commands/utils/featureFlags', () => ({
+  getTransformerVersion: jest.fn().mockImplementation(() => 2)
+}));
 
 const awsMock = aws as any;
 const stateManagerMock = stateManager as any;
@@ -64,12 +70,12 @@ describe('should sync amplify ui builder components', () => {
         promise: jest.fn(() => ({
           entities: [
             {
-              appId: 'd37nrm8rzt3oek',
+              appId: 'd37nrm8rzt3oek', // eslint-disable-line spellcheck/spell-checker
               bindingProperties: {},
               componentType: 'Box',
               environmentName: 'staging',
-              id: 's-s4mU579Ycf6JGHwhqT',
-              name: 'aawwdd',
+              id: 's-s4mU579Ycf6JGHwhqT', // eslint-disable-line spellcheck/spell-checker
+              name: 'aawwdd', // eslint-disable-line spellcheck/spell-checker
               overrides: {},
               properties: {},
               variants: [],
@@ -82,10 +88,62 @@ describe('should sync amplify ui builder components', () => {
           entities: [{}],
         })),
       })),
+      exportForms: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          entities: [{
+            name: 'BasicFormCreate',
+            formActionType: 'create',
+            dataType: {
+              dataSourceType: 'Custom',
+              dataTypeName: 'Post',
+            },
+            fields: {
+              name: {
+                inputType: {
+                  required: true,
+                  type: 'TextField',
+                  name: 'name',
+                  defaultValue: 'John Doe',
+                },
+                label: 'name',
+              },
+            },
+            sectionalElements: {},
+            style: {},
+          }],
+        })),
+      })),
+      exportViews: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          entities: [{
+            appId: '23342',
+            dataSource: { type: 'Custom' },
+            environmentName: 'staging',
+            id: 'id',
+            name: 'ProductTable',
+            // TODO: replace with export when Codegen updated
+            schemaVersion: '1.0',
+            style: {},
+            viewConfiguration: {
+              type: 'Table',
+            },
+          }],
+        })),
+      })),
+      getMetadata: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          features: {
+            autoGenerateForms: 'true',
+            autoGenerateViews: 'true',
+          },
+        })),
+      })),
     }));
 
     createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn();
     createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn();
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn();
+    createUiBuilderComponentDependencyMock.createUiBuilderView = jest.fn();
   });
 
   it('pulls components from aws-sdk and passes them to createUiBuilderComponent', () => {
@@ -94,14 +152,14 @@ describe('should sync amplify ui builder components', () => {
 
   it('does not throw an error when createUiBuilderComponent fails', () => {
     createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn(() => {
-      throw new Error('ahhh!');
+      throw new Error('ahhh!'); // eslint-disable-line spellcheck/spell-checker
     });
     expect(async () => generateUiBuilderComponents(context, [])).not.toThrow();
   });
 
   it('does not throw an error when createUiBuilderThemes fails', () => {
     createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn(() => {
-      throw new Error('ahhh!');
+      throw new Error('ahhh!'); // eslint-disable-line spellcheck/spell-checker
     });
     expect(async () => generateUiBuilderThemes(context, [])).not.toThrow();
   });
@@ -113,19 +171,30 @@ describe('should sync amplify ui builder components', () => {
     expect(Object.keys(client)).toEqual(expect.arrayContaining([
       'listComponents',
       'listThemes',
+      'listForms',
       'getModels',
+      'loadMetadata',
       'createComponent',
     ]));
+    expect(client.metadata).toEqual(expect.objectContaining({
+      autoGenerateForms: true,
+      autoGenerateViews: true,
+    }));
+  });
+  it('can list components', async () => {
+    const client = await AmplifyStudioClient.setClientInfo(context);
+    const components = await client.listComponents();
+    expect(components.entities).toHaveLength(1);
   });
   it('can list themes', async () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
     const themes = await client.listThemes();
     expect(themes.entities).toHaveLength(1);
   });
-  it('can listUiBuilderComponents', async () => {
+  it('can list forms', async () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
-    const components = await client.listThemes();
-    expect(components.entities).toHaveLength(1);
+    const forms = await client.listForms();
+    expect(forms.entities).toHaveLength(1);
   });
   it('can getAppId', async () => {
     const appId = getAppId(context);
@@ -169,4 +238,38 @@ describe('should sync amplify ui builder components', () => {
     const themes = generateUiBuilderThemes(context, [{}, {}]);
     expect(themes.every(theme => theme.resultType === 'FAILURE')).toBeTruthy();
   });
+  it('can generate ui builder forms', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
+    const forms = generateUiBuilderForms(context, [{}, {}]);
+    expect(forms.every(form => form.resultType === 'SUCCESS')).toBeTruthy();
+  });
+  it('can handle failed generation generate ui builder forms', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => {
+      throw new Error('ahh!');
+    });
+    const forms = generateUiBuilderForms(context, [{}, {}]);
+    expect(forms.every(form => form.resultType === 'FAILURE')).toBeTruthy();
+  });
+  it('can generate uibuilder forms from data schema if autogen true', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
+    const forms = generateUiBuilderForms(context, [], exampleSchema, true);
+    expect(forms.every(form => form.resultType === 'SUCCESS')).toBeTruthy();
+    // create & update form for author model
+    expect(forms.length).toEqual(2);
+  });
+
+  it('should not autogen forms for join tables or unsupported models', async () => {
+    expect(Object.keys(exampleSchema.models)).toStrictEqual(['Author', 'JoinTable', 'EmptyModel' ])
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation((context, schema, dataSchema) => ({name: schema.dataType.dataTypeName}));
+    const forms = generateUiBuilderForms(context, [], exampleSchema, true);
+    expect(forms.every(form => form.resultType === 'SUCCESS')).toBeTruthy();
+    // only create & update form for author model
+    expect(forms.map(f => (f.schema as any).name)).toStrictEqual(['Author', 'Author']);
+  });
+
+  it('does not generate uibuilder forms from data schema if autogen false', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
+    const forms = generateUiBuilderForms(context, [], exampleSchema, false);
+    expect(forms.length).toEqual(0);
+  });
 });

package/src/__tests__/utils.ts

@@ -0,0 +1,70 @@
+import type { GenericDataSchema } from '@aws-amplify/codegen-ui';
+
+export const exampleSchema: GenericDataSchema = {
+  dataSourceType: 'DataStore',
+  models: {
+    Author: {
+      fields: {
+        id: {
+          dataType: 'ID',
+          required: true,
+          readOnly: false,
+          isArray: false,
+        },
+        name: {
+          dataType: 'String',
+          required: false,
+          readOnly: false,
+          isArray: false,
+        },
+        profileImageSrc: {
+          dataType: 'AWSURL',
+          required: false,
+          readOnly: false,
+          isArray: false,
+        },
+        description: {
+          dataType: 'String',
+          required: false,
+          readOnly: false,
+          isArray: false,
+        },
+        books: {
+          dataType: 'String',
+          required: false,
+          readOnly: false,
+          isArray: true,
+        },
+        createdAt: {
+          dataType: 'AWSDateTime',
+          required: false,
+          readOnly: true,
+          isArray: false,
+        },
+        updatedAt: {
+          dataType: 'AWSDateTime',
+          required: false,
+          readOnly: true,
+          isArray: false,
+        },
+      },
+    },
+    JoinTable: {
+      fields: {
+        id: {
+          dataType: 'ID',
+          required: true,
+          readOnly: false,
+          isArray: false,
+        },
+      },
+      isJoinTable: true
+    },
+    EmptyModel: {
+      fields: {
+      },
+    },
+  },
+  enums: {}, // eslint-disable-line spellcheck/spell-checker
+  nonModels: {},
+};

package/src/clients/amplify-studio-client.ts

@@ -1,9 +1,20 @@
-import type { $TSContext } from 'amplify-cli-core';
+import { $TSContext, CloudformationProviderFacade } from 'amplify-cli-core';
 import type { ServiceConfigurationOptions } from 'aws-sdk/lib/service';
-import type { CreateComponentData, Component, Theme } from 'aws-sdk/clients/amplifyuibuilder';
+import type {
+  CreateComponentData, Component, Theme, Form,
+} from 'aws-sdk/clients/amplifyuibuilder';
 import { AmplifyUIBuilder, AmplifyBackend } from 'aws-sdk';
 import { printer } from 'amplify-prompts';
 import { getAppId, getEnvName } from '../commands/utils/environmentHelpers';
+import { getTransformerVersion } from '../commands/utils/featureFlags';
+
+/**
+ * studio client metadata
+ */
+export type StudioMetadata = {
+  autoGenerateForms: boolean;
+  autoGenerateViews: boolean;
+};
 
 /**
  * Builds the Amplify Backend Client
@@ -45,6 +56,8 @@ export default class AmplifyStudioClient {
   #amplifyBackend: AmplifyBackend;
   #appId: string;
   #envName: string;
+  metadata: StudioMetadata;
+  isSupportedGraphQL = false;
   /**
    * Used to configure the AWS Amplify clients.
    */
@@ -56,19 +69,56 @@ export default class AmplifyStudioClient {
       resolvedEnvName,
       resolvedAppId,
     ])) as ServiceConfigurationOptions;
-    return new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
+
+    const client = new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
+
+    if ((await getTransformerVersion(context)) === 2) {
+      await client.loadMetadata();
+      client.isSupportedGraphQL = true;
+    } else {
+      client.isSupportedGraphQL = false;
+    }
+
+    return client;
   }
 
   /*
-  * Builds the clients
-  */
+   * Builds the clients
+   */
   constructor(awsConfigInfo: ServiceConfigurationOptions, appId: string, envName: string) {
     this.#amplifyUiBuilder = buildAmplifyUiBuilderClient(awsConfigInfo);
     this.#amplifyBackend = buildAmplifyBackendClient(awsConfigInfo);
     this.#appId = appId;
     this.#envName = envName;
+    this.metadata = {
+      autoGenerateForms: false,
+      autoGenerateViews: false,
+    };
   }
 
+  /**
+   * loads metadata from appId/envName
+   */
+  loadMetadata = async (envName?: string, appId?: string): Promise<void> => {
+    const environmentName = envName || this.#envName;
+    const resolvedAppId = appId || this.#appId;
+    try {
+      const response = await this.#amplifyUiBuilder
+        .getMetadata({
+          appId: resolvedAppId,
+          environmentName,
+        })
+        .promise();
+      this.metadata = {
+        autoGenerateForms: response.features?.autoGenerateForms === 'true',
+        autoGenerateViews: response.features?.autoGenerateViews === 'true',
+      };
+    } catch (e) {
+      printer.debug(e.toString());
+      throw e;
+    }
+  };
+
   /**
    * listComponents from Studio
    */
@@ -95,67 +145,100 @@ export default class AmplifyStudioClient {
       printer.debug(e);
       throw e;
     }
-  }
+  };
 
   /**
- * Returns all the UI Builder themes from the app
- */
- listThemes = async (envName?: string, appId?: string): Promise<{ entities: Theme[] }> => {
-   const environmentName = envName || this.#envName;
-   const resolvedAppId = appId || this.#appId;
-
-   try {
-     let nextToken: string | undefined;
-     const uiBuilderThemes: Theme[] = [];
-     do {
-       const response = await this.#amplifyUiBuilder
-         .exportThemes({
-           appId: resolvedAppId,
-           environmentName,
-           nextToken,
-         })
-         .promise();
-       uiBuilderThemes.push(...response.entities);
-       nextToken = response.nextToken;
-     } while (nextToken);
-     printer.debug(JSON.stringify(uiBuilderThemes, null, 2));
-     return { entities: uiBuilderThemes };
-   } catch (e) {
-     printer.debug(e);
-     throw e;
-   }
- }
+   * Returns all the UI Builder themes from the app
+   */
+  listThemes = async (envName?: string, appId?: string): Promise<{ entities: Theme[] }> => {
+    const environmentName = envName || this.#envName;
+    const resolvedAppId = appId || this.#appId;
 
- createComponent = async (component: CreateComponentData, envName?: string, appId?: string): Promise<Component | undefined> => {
-   const environmentName = envName || this.#envName;
-   const resolvedAppId = appId || this.#appId;
-   try {
-     const response = await this.#amplifyUiBuilder.createComponent({
-       appId: resolvedAppId,
-       environmentName,
-       componentToCreate: component,
-     }).promise();
-     return response.entity;
-   } catch (err) {
-     printer.debug(err.toString());
-     throw err;
-   }
- }
+    try {
+      let nextToken: string | undefined;
+      const uiBuilderThemes: Theme[] = [];
+      do {
+        const response = await this.#amplifyUiBuilder
+          .exportThemes({
+            appId: resolvedAppId,
+            environmentName,
+            nextToken,
+          })
+          .promise();
+        uiBuilderThemes.push(...response.entities);
+        nextToken = response.nextToken;
+      } while (nextToken);
+      printer.debug(JSON.stringify(uiBuilderThemes, null, 2));
+      return { entities: uiBuilderThemes };
+    } catch (e) {
+      printer.debug(e);
+      throw e;
+    }
+  };
+
+  listForms = async (envName?: string, appId?: string): Promise<{ entities: Form[] }> => {
+    const environmentName = envName || this.#envName;
+    const resolvedAppId = appId || this.#appId;
+    try {
+      let nextToken: string | undefined;
+      const uibuilderForms: Form[] = [];
+      do {
+        const response = await this.#amplifyUiBuilder
+          .exportForms({
+            appId: resolvedAppId,
+            environmentName,
+            nextToken,
+          })
+          .promise();
+        uibuilderForms.push(...response.entities);
+        nextToken = response.nextToken;
+      } while (nextToken);
+      printer.debug(JSON.stringify(uibuilderForms, null, 2));
+      return { entities: uibuilderForms };
+    } catch (e) {
+      printer.debug(e);
+      throw e;
+    }
+  };
+
+  createComponent = async (component: CreateComponentData, envName?: string, appId?: string): Promise<Component | undefined> => {
+    const environmentName = envName || this.#envName;
+    const resolvedAppId = appId || this.#appId;
+    try {
+      const response = await this.#amplifyUiBuilder
+        .createComponent({
+          appId: resolvedAppId,
+          environmentName,
+          componentToCreate: component,
+        })
+        .promise();
+      return response.entity;
+    } catch (err) {
+      printer.debug(err.toString());
+      throw err;
+    }
+  };
+
+  getModels = async (resourceName: string, envName?: string, appId?: string): Promise<string | undefined> => {
+    try {
+      const environmentName = envName || this.#envName;
+      const resolvedAppId = appId || this.#appId;
+      const { Models } = await this.#amplifyBackend
+        .getBackendAPIModels({
+          AppId: resolvedAppId,
+          BackendEnvironmentName: environmentName,
+          ResourceName: resourceName,
+        })
+        .promise();
+      return Models;
+    } catch (e) {
+      printer.debug(e);
+      throw new Error(`Models not found in AmplifyBackend:GetBackendAPIModels response: ${e.message}`);
+    }
+  };
 
- getModels = async (resourceName: string, envName?: string, appId?: string): Promise<string | undefined> => {
-   try {
-     const environmentName = envName || this.#envName;
-     const resolvedAppId = appId || this.#appId;
-     const { Models } = await this.#amplifyBackend.getBackendAPIModels({
-       AppId: resolvedAppId,
-       BackendEnvironmentName: environmentName,
-       ResourceName: resourceName,
-     })
-       .promise();
-     return Models;
-   } catch (e) {
-     printer.debug(e);
-     throw new Error(`Models not found in AmplifyBackend:GetBackendAPIModels response: ${e.message}`);
-   }
+ isAmplifyApp = async (context: $TSContext): Promise<boolean> => {
+   const { isAdminApp } = await CloudformationProviderFacade.isAmplifyAdminApp(context, this.#appId);
+   return isAdminApp;
  }
 }

package/src/commands/generateComponents.ts

@@ -1,4 +1,5 @@
-import { StudioComponent } from '@aws-amplify/codegen-ui';
+/* eslint-disable spellcheck/spell-checker */
+import { StudioSchema } from '@aws-amplify/codegen-ui';
 import ora from 'ora';
 import { printer } from 'amplify-prompts';
 import { $TSContext } from 'amplify-cli-core';
@@ -10,6 +11,8 @@ import {
   generateUiBuilderThemes,
   getAmplifyDataSchema,
   generateAmplifyUiBuilderIndexFile,
+  generateUiBuilderForms,
+  generateAmplifyUiBuilderUtilFile,
 } from './utils';
 
 /**
@@ -22,36 +25,63 @@ export const run = async (context: $TSContext): Promise<void> => {
   const spinner = ora('');
   try {
     const studioClient = await AmplifyStudioClient.setClientInfo(context);
-    const [componentSchemas, themeSchemas, dataSchema] = await Promise.all([
+    if (!(await studioClient.isAmplifyApp(context))) {
+      return;
+    }
+    const [componentSchemas, themeSchemas, formSchemas, dataSchema] = await Promise.all([
       studioClient.listComponents(),
       studioClient.listThemes(),
+      studioClient.listForms(),
       getAmplifyDataSchema(studioClient),
     ]);
-    if (componentSchemas.entities.length === 0 && themeSchemas.entities.length === 0) {
+
+    const nothingWouldAutogen = !dataSchema || !studioClient.metadata.autoGenerateForms || !studioClient.isSupportedGraphQL;
+
+    if (nothingWouldAutogen && [componentSchemas, themeSchemas, formSchemas].every(group => !group.entities.length)) {
       printer.debug('Skipping UI component generation since none are found.');
       return;
     }
     spinner.start('Generating UI components...');
-    const generatedComponentResults = generateUiBuilderComponents(context, componentSchemas.entities, dataSchema);
-    const generatedThemeResults = generateUiBuilderThemes(context, themeSchemas.entities);
 
-    generateAmplifyUiBuilderIndexFile(context, [
-      ...generatedComponentResults.filter(({ resultType }) => resultType === 'SUCCESS').map(({ component }) => component),
-      ...generatedThemeResults.filter(({ resultType }) => resultType === 'SUCCESS').map(({ theme }) => theme),
-    ] as StudioComponent[]);
+    const generatedResults = {
+      component: generateUiBuilderComponents(context, componentSchemas.entities, dataSchema),
+      theme: generateUiBuilderThemes(context, themeSchemas.entities),
+      form: generateUiBuilderForms(
+        context, formSchemas.entities, dataSchema, studioClient.metadata.autoGenerateForms && studioClient.isSupportedGraphQL,
+      ),
+    };
 
-    const failedSchemas = [
-      ...generatedComponentResults.filter(({ resultType }) => resultType === 'FAILURE').map(({ schemaName }) => schemaName),
-      ...generatedThemeResults.filter(({ resultType }) => resultType === 'FAILURE').map(({ schemaName }) => schemaName),
-    ];
+    const successfulSchemas: StudioSchema[] = [];
+    let hasSuccessfulForm = false;
+    const failedResponseNames: string[] = [];
 
-    if (failedSchemas.length > 0) {
-      spinner.fail(`Failed to sync the following components: ${failedSchemas.join(', ')}`);
+    Object.entries(generatedResults).forEach(([key, results]) => {
+      results.forEach(result => {
+        if (result.resultType === 'SUCCESS') {
+          successfulSchemas.push(result.schema);
+          if (key === 'form') {
+            hasSuccessfulForm = true;
+          }
+        } else {
+          failedResponseNames.push(result.schemaName);
+        }
+      });
+    });
+
+    generateAmplifyUiBuilderIndexFile(context, successfulSchemas);
+
+    generateAmplifyUiBuilderUtilFile(context, { hasForms: hasSuccessfulForm, hasViews: false });
+
+    if (failedResponseNames.length > 0) {
+      spinner.fail(`Failed to sync the following components: ${failedResponseNames.join(', ')}`);
     } else {
       spinner.succeed('Synced UI components.');
     }
 
-    const invalidComponentNames = componentSchemas.entities.filter(component => !component.schemaVersion).map(component => component.name);
+    const invalidComponentNames = [
+      ...componentSchemas.entities.filter(component => !component.schemaVersion).map(component => component.name),
+      ...formSchemas.entities.filter(form => !form.schemaVersion).map(form => form.name),
+    ];
     if (invalidComponentNames.length) {
       printer.warn(
         `The components ${invalidComponentNames.join(

package/src/commands/help.ts

@@ -1,5 +1,8 @@
 import { printer } from 'amplify-prompts';
 
-export async function run() {
+/**
+ * help command
+ */
+export const run = (): void => {
   printer.info('Supported commands: generateComponents, cloneComponentsFromEnv');
-}
+};