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

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -6,12 +6,9 @@ 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'),
@@ -20,9 +17,6 @@ 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;
@@ -70,12 +64,12 @@ describe('should sync amplify ui builder components', () => {
         promise: jest.fn(() => ({
           entities: [
             {
-              appId: 'd37nrm8rzt3oek', // eslint-disable-line spellcheck/spell-checker
+              appId: 'd37nrm8rzt3oek',
               bindingProperties: {},
               componentType: 'Box',
               environmentName: 'staging',
-              id: 's-s4mU579Ycf6JGHwhqT', // eslint-disable-line spellcheck/spell-checker
-              name: 'aawwdd', // eslint-disable-line spellcheck/spell-checker
+              id: 's-s4mU579Ycf6JGHwhqT',
+              name: 'aawwdd',
               overrides: {},
               properties: {},
               variants: [],
@@ -88,62 +82,10 @@ 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', () => {
@@ -152,14 +94,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!'); // eslint-disable-line spellcheck/spell-checker
+      throw new Error('ahhh!');
     });
     expect(async () => generateUiBuilderComponents(context, [])).not.toThrow();
   });
 
   it('does not throw an error when createUiBuilderThemes fails', () => {
     createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn(() => {
-      throw new Error('ahhh!'); // eslint-disable-line spellcheck/spell-checker
+      throw new Error('ahhh!');
     });
     expect(async () => generateUiBuilderThemes(context, [])).not.toThrow();
   });
@@ -171,30 +113,19 @@ 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 list forms', async () => {
+  it('can listUiBuilderComponents', async () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
-    const forms = await client.listForms();
-    expect(forms.entities).toHaveLength(1);
+    const components = await client.listThemes();
+    expect(components.entities).toHaveLength(1);
   });
   it('can getAppId', async () => {
     const appId = getAppId(context);
@@ -238,38 +169,4 @@ 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/clients/amplify-studio-client.ts

@@ -1,20 +1,9 @@
-import { $TSContext, CloudformationProviderFacade } from 'amplify-cli-core';
+import type { $TSContext } from 'amplify-cli-core';
 import type { ServiceConfigurationOptions } from 'aws-sdk/lib/service';
-import type {
-  CreateComponentData, Component, Theme, Form,
-} from 'aws-sdk/clients/amplifyuibuilder';
+import type { CreateComponentData, Component, Theme } 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
@@ -56,8 +45,6 @@ export default class AmplifyStudioClient {
   #amplifyBackend: AmplifyBackend;
   #appId: string;
   #envName: string;
-  metadata: StudioMetadata;
-  isSupportedGraphQL = false;
   /**
    * Used to configure the AWS Amplify clients.
    */
@@ -69,56 +56,19 @@ export default class AmplifyStudioClient {
       resolvedEnvName,
       resolvedAppId,
     ])) as ServiceConfigurationOptions;
-
-    const client = new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
-
-    if ((await getTransformerVersion(context)) === 2) {
-      await client.loadMetadata();
-      client.isSupportedGraphQL = true;
-    } else {
-      client.isSupportedGraphQL = false;
-    }
-
-    return client;
+    return new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
   }
 
   /*
-   * 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
    */
@@ -145,100 +95,67 @@ 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;
-    }
-  };
-
-  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;
-    }
-  };
+ * 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;
+   }
+ }
 
-  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}`);
-    }
-  };
+ 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;
+   }
+ }
 
- isAmplifyApp = async (context: $TSContext): Promise<boolean> => {
-   const { isAdminApp } = await CloudformationProviderFacade.isAmplifyAdminApp(context, this.#appId);
-   return isAdminApp;
+ 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}`);
+   }
  }
 }

package/src/commands/generateComponents.ts

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

package/src/commands/help.ts

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