@aws-amplify/amplify-util-uibuilder 1.8.5-rds.1 → 1.9.0-cdk228withdata.0

package/src/__tests__/storageManager.test.ts

@@ -1,8 +1,11 @@
-import { StudioSchema } from '@aws-amplify/codegen-ui';
 import { hasStorageField } from '../commands/utils';
+import { Form } from 'aws-sdk/clients/amplifyuibuilder';
 
-const formWithNoCustomization: StudioSchema = {
+const formWithNoCustomization: Form = {
   id: 'f-123456',
+  appId: '123',
+  environmentName: 'staging',
+  schemaVersion: '1.0',
   name: 'BlogCreateForm',
   formActionType: 'create',
   dataType: {
@@ -15,7 +18,7 @@ const formWithNoCustomization: StudioSchema = {
   cta: {},
 };
 
-const formWithNoStorageField: StudioSchema = {
+const formWithNoStorageField: Form = {
   ...formWithNoCustomization,
   dataType: { dataSourceType: 'Custom', dataTypeName: 'Blog' },
   fields: {
@@ -23,7 +26,7 @@ const formWithNoStorageField: StudioSchema = {
   },
 };
 
-const formWithStorageField: StudioSchema = {
+const formWithStorageField: Form = {
   ...formWithNoCustomization,
   dataType: { dataSourceType: 'Custom', dataTypeName: 'Blog' },
   fields: {

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -1,18 +1,19 @@
-/* eslint-disable spellcheck/spell-checker */
-import { AmplifyCategories, AmplifySupportedService, stateManager } from '@aws-amplify/amplify-cli-core'; // eslint-disable-line import/no-extraneous-dependencies
-import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
+import { AmplifyCategories, AmplifySupportedService, stateManager } from '@aws-amplify/amplify-cli-core';
+import aws from 'aws-sdk';
 import {
-  generateUiBuilderComponents,
-  generateUiBuilderThemes,
   getEnvName,
   getAppId,
   resolveAppId,
-  generateUiBuilderForms,
+  mapGenericDataSchemaToCodegen,
+  waitForSucceededJob,
+  extractUIComponents,
+  fetchWithRetries,
 } from '../commands/utils';
 import { AmplifyStudioClient } from '../clients';
-import * as createUiBuilderComponentDependency from '../commands/utils/codegenResources';
-import { exampleSchema } from './utils';
 import { isDataStoreEnabled } from '@aws-amplify/amplify-category-api';
+import type { GenericDataSchema } from '@aws-amplify/codegen-ui';
+import fetch, { Response } from 'node-fetch';
+import { existsSync, writeFileSync } from 'fs';
 
 jest.mock('@aws-amplify/amplify-cli-core', () => ({
   ...jest.requireActual('@aws-amplify/amplify-cli-core'),
@@ -24,21 +25,57 @@ jest.mock('@aws-amplify/amplify-cli-core', () => ({
 jest.mock('../commands/utils/featureFlags', () => ({
   getTransformerVersion: jest.fn().mockReturnValue(2),
 }));
-
 jest.mock('@aws-amplify/amplify-category-api', () => ({
   ...jest.requireActual('@aws-amplify/amplify-category-api'),
   isDataStoreEnabled: jest.fn(),
 }));
+jest.mock('fs');
+jest.mock('node-fetch');
 
 const awsMock = aws as any;
 const stateManagerMock = stateManager as any;
-const createUiBuilderComponentDependencyMock = createUiBuilderComponentDependency as any;
 const isDataStoreEnabledMocked = jest.mocked(isDataStoreEnabled);
+const mockWriteFileSync = jest.mocked(writeFileSync);
+const mockExistsSync = jest.mocked(existsSync);
+const mockNodeFetch = jest.mocked(fetch);
 
 describe('should sync amplify ui builder components', () => {
   let context: any;
+  const env = process.env;
+
+  const mockGenericDataSchema: GenericDataSchema = {
+    dataSourceType: 'DataStore',
+    models: {
+      Blog: {
+        fields: {
+          id: { dataType: 'ID', required: true, readOnly: false, isArray: false },
+        },
+        primaryKeys: ['id'],
+      },
+    },
+    enums: {
+      Status: { values: ['ENABLED', 'DISABLED', 'HIDDEN'] },
+    },
+    nonModels: {
+      Metadata: {
+        fields: {
+          name: {
+            dataType: 'String',
+            required: false,
+            readOnly: false,
+            isArray: false,
+          },
+        },
+      },
+    },
+  };
+
   beforeEach(() => {
+    mockNodeFetch.mockReset();
+    process.env = { ...env };
+
     isDataStoreEnabledMocked.mockResolvedValue(true);
+    mockExistsSync.mockReturnValue(false);
     context = {
       exeInfo: {
         projectConfig: {
@@ -156,29 +193,10 @@ describe('should sync amplify ui builder components', () => {
         })),
       })),
     }));
-
-    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', () => {
-    generateUiBuilderComponents(context, []);
-  });
-
-  it('does not throw an error when createUiBuilderComponent fails', () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn(() => {
-      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!'); // eslint-disable-line spellcheck/spell-checker
-    });
-    expect(async () => generateUiBuilderThemes(context, [])).not.toThrow();
+  afterEach(() => {
+    process.env = env;
   });
 
   it('can getAmplifyUIBuilderService', async () => {
@@ -199,110 +217,94 @@ describe('should sync amplify ui builder components', () => {
       }),
     );
   });
+
   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 () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
     const forms = await client.listForms();
     expect(forms.entities).toHaveLength(1);
   });
+
   it('can getAppId', async () => {
     const appId = getAppId(context);
     expect(appId).toBe('testAppId');
   });
+
   it('can getEnvName', () => {
     const envName = getEnvName(context);
     expect(envName).toBe('testEnvName');
   });
+
   it('can resolveAppId', async () => {
     const appId = resolveAppId();
     expect(appId).toBe('testAppId');
   });
+
   it('can throw on getAppId', async () => {
     context.input.options.appId = null;
     context.amplify.invokePluginMethod = () => null;
     stateManagerMock.getMeta = () => ({});
     expect(() => getAppId(context)).toThrowError();
   });
-  it('can generate ui builder components', async () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn().mockImplementation(() => ({}));
-    const components = generateUiBuilderComponents(context, [{}, {}]);
-    expect(components.every((component) => component.resultType === 'SUCCESS')).toBeTruthy();
-  });
-  it('can handle failed generation generate ui builder components', async () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn().mockImplementation(() => {
-      throw new Error('ahh!');
-    });
-    const components = generateUiBuilderComponents(context, [{}, {}]);
-    expect(components.every((component) => component.resultType === 'FAILURE')).toBeTruthy();
-  });
-  it('can generate ui builder themes', async () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => ({}));
-    const themes = generateUiBuilderThemes(context, [{}, {}]);
-    expect(themes.every((theme) => theme.resultType === 'SUCCESS')).toBeTruthy();
-  });
-  it('can handle failed generation generate ui builder themes', async () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => {
-      throw new Error('ahh!');
-    });
-    const themes = generateUiBuilderThemes(context, [{}, {}]);
-    expect(themes.every((theme) => theme.resultType === 'FAILURE')).toBeTruthy();
-  });
-  it('can generate ui builder default theme when no themes are passed', async () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => ({}));
-    const themes = generateUiBuilderThemes(context, []);
-    expect(themes.every((theme) => theme.resultType === 'SUCCESS')).toBeTruthy();
-  });
-  it('can handle failed generation generate ui builder default theme when no themes are passed', async () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => {
-      throw new Error('ahh!');
-    });
-    const themes = generateUiBuilderThemes(context, []);
-    expect(themes.every((theme) => theme.resultType === 'FAILURE')).toBeTruthy();
+
+  it('can map generic data schema to start codegen job request', () => {
+    expect(mapGenericDataSchemaToCodegen(mockGenericDataSchema)).toMatchSnapshot();
   });
-  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 wait for a succeeded job', async () => {
+    const succeededJob = { status: 'succeeded' };
+    const getJob = jest.fn().mockResolvedValueOnce({ status: 'in_progress' }).mockResolvedValueOnce(succeededJob);
+    const job = await waitForSucceededJob(getJob, { pollInterval: 1 });
+    expect(job).toEqual(succeededJob);
   });
-  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 throw if job failed', async () => {
+    const statusMessage = 'failed status';
+    const getJob = jest.fn().mockResolvedValueOnce({ status: 'in_progress' }).mockResolvedValueOnce({ status: 'failed', statusMessage });
+    await expect(waitForSucceededJob(getJob, { pollInterval: 2 })).rejects.toThrow(statusMessage);
   });
-  it('can generate uibuilder forms from data schema if autogenerate 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('can throw after timeout when waiting for a succeeded job', async () => {
+    process.env.UI_BUILDER_CODEGENJOB_TIMEOUT = '1';
+    const succeededJob = { status: 'succeeded' };
+    const getJob = jest.fn().mockResolvedValueOnce({ status: 'in_progress' }).mockResolvedValueOnce(succeededJob);
+    await expect(waitForSucceededJob(getJob, { pollInterval: 2 })).rejects.toThrow('Failed to return codegen job');
   });
 
-  it('should not autogenerate forms for join tables or unsupported models', async () => {
-    expect(Object.keys(exampleSchema.models)).toStrictEqual(['Author', 'JoinTable', 'EmptyModel']);
-    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      (_ctx, 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('can extract ui components from archive', async () => {
+    const mockedFetchResponse = {
+      ok: true,
+      json: jest.fn().mockResolvedValue({
+        Output: [
+          {
+            downloadUrl: 'https://s3.com',
+            fileName: 'MyComponent.jsx',
+            schemaName: 'MyComponent',
+          },
+        ],
+      }),
+      text: jest.fn().mockResolvedValue('source code'),
+    } as unknown as Response;
+    mockNodeFetch.mockResolvedValue(mockedFetchResponse);
+    mockExistsSync.mockReturnValue(true);
+    await extractUIComponents('https:://example.aws', 'tmp/ui-components');
+    expect(mockWriteFileSync).toHaveBeenCalledWith('tmp/ui-components/MyComponent.jsx', 'source code');
   });
 
-  it('does not generate uibuilder forms from data schema if autogenerate false', async () => {
-    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
-    const forms = generateUiBuilderForms(context, [], exampleSchema, false);
-    expect(forms.length).toEqual(0);
+  it('fetchWithRetries retries 3 times', async () => {
+    mockNodeFetch.mockRejectedValue(new Error('Server dropped the connection'));
+    await expect(fetchWithRetries('https://amazon.com')).rejects.toThrowError('Fetch reached max number of retries without succeeding');
+    expect(mockNodeFetch).toHaveBeenCalledTimes(3);
   });
 });

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

@@ -1,6 +1,6 @@
 import { $TSContext, CloudformationProviderFacade } from '@aws-amplify/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, Form, StartCodegenJobData } from 'aws-sdk/clients/amplifyuibuilder';
 import { AmplifyUIBuilder, AmplifyBackend } from 'aws-sdk';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { getAppId, getEnvName } from '../commands/utils/environmentHelpers';
@@ -171,7 +171,6 @@ export default class AmplifyStudioClient {
         uiBuilderComponents.push(...response.entities);
         nextToken = response.nextToken;
       } while (nextToken);
-      printer.debug(JSON.stringify(uiBuilderComponents, null, 2));
       return { entities: uiBuilderComponents };
     } catch (err) {
       throw new Error(`Failed to list components: ${err.message}`);
@@ -199,7 +198,6 @@ export default class AmplifyStudioClient {
         uiBuilderThemes.push(...response.entities);
         nextToken = response.nextToken;
       } while (nextToken);
-      printer.debug(JSON.stringify(uiBuilderThemes, null, 2));
       return { entities: uiBuilderThemes };
     } catch (err) {
       throw new Error(`Failed to list themes: ${err.message}`);
@@ -223,7 +221,6 @@ export default class AmplifyStudioClient {
         uibuilderForms.push(...response.entities);
         nextToken = response.nextToken;
       } while (nextToken);
-      printer.debug(JSON.stringify(uibuilderForms, null, 2));
       return { entities: uibuilderForms };
     } catch (err) {
       throw new Error(`Failed to list forms: ${err.message}`);
@@ -274,4 +271,47 @@ export default class AmplifyStudioClient {
       throw new Error(`Models not found in AmplifyBackend:GetBackendAPIModels response: ${err.message}`);
     }
   };
+
+  startCodegenJob = async (codegenJobToCreate: StartCodegenJobData, appId?: string, envName?: string) => {
+    const environmentName = envName || this.#envName;
+    const resolvedAppId = appId || this.#appId;
+    try {
+      const response = await this.#amplifyUiBuilder
+        .startCodegenJob({
+          appId: resolvedAppId,
+          environmentName,
+          codegenJobToCreate,
+        })
+        .promise();
+      if (!response.entity || !response.entity.id) {
+        throw new Error('Error starting codegen job');
+      }
+      return response.entity.id;
+    } catch (err) {
+      printer.debug('Failed to start job');
+      printer.debug(err.stack);
+      throw err;
+    }
+  };
+
+  getCodegenJob = async (jobId: string, appId?: string, envName?: string) => {
+    const environmentName = envName || this.#envName;
+    const resolvedAppId = appId || this.#appId;
+    try {
+      const { job } = await this.#amplifyUiBuilder
+        .getCodegenJob({
+          id: jobId,
+          appId: resolvedAppId,
+          environmentName,
+        })
+        .promise();
+      if (!job) {
+        throw new Error('Error getting codegen job');
+      }
+      return job;
+    } catch (err) {
+      printer.debug(err.toString());
+      throw err;
+    }
+  };
 }

package/src/commands/generateComponents.ts

@@ -1,5 +1,4 @@
 /* eslint-disable spellcheck/spell-checker */
-import { StudioSchema } from '@aws-amplify/codegen-ui';
 import ora from 'ora';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { $TSContext } from '@aws-amplify/amplify-cli-core';
@@ -7,18 +6,16 @@ import { AmplifyStudioClient } from '../clients';
 import {
   notifyMissingPackages,
   shouldRenderComponents,
-  generateUiBuilderComponents,
-  generateUiBuilderThemes,
   getAmplifyDataSchema,
-  generateAmplifyUiBuilderIndexFile,
-  generateUiBuilderForms,
-  generateAmplifyUiBuilderUtilFile,
-  isStudioForm,
   isFormDetachedFromModel,
   deleteDetachedForms,
   hasStorageField,
-  isFormSchema,
+  mapGenericDataSchemaToCodegen,
+  waitForSucceededJob,
+  getUiBuilderComponentsPath,
+  extractUIComponents,
 } from './utils';
+import { AmplifyUIBuilder } from 'aws-sdk';
 
 /**
  * Pulls ui components from Studio backend and generates the code in the user's file system
@@ -46,61 +43,51 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
     }
     spinner.start('Generating UI components...');
 
-    const generatedResults = {
-      component: generateUiBuilderComponents(context, componentSchemas.entities, dataSchema),
-      theme: generateUiBuilderThemes(context, themeSchemas.entities),
-      form: generateUiBuilderForms(
-        context,
-        formSchemas.entities,
-        dataSchema,
-        studioClient.metadata.autoGenerateForms && studioClient.isGraphQLSupported && studioClient.isDataStoreEnabled,
-        studioClient.metadata.formFeatureFlags,
-      ),
+    const genericDataSchema = dataSchema ? mapGenericDataSchemaToCodegen(dataSchema) : undefined;
+
+    const job: AmplifyUIBuilder.StartCodegenJobData = {
+      renderConfig: {
+        react: {
+          module: 'es2020',
+          target: 'es2020',
+          script: 'jsx',
+          renderTypeDeclarations: true,
+        },
+      },
+      autoGenerateForms: studioClient.metadata.autoGenerateForms && studioClient.isGraphQLSupported,
+      features: studioClient.metadata.formFeatureFlags,
     };
+    // SDK will throw if this is undefined
+    // even though it's optional
+    if (genericDataSchema) {
+      job.genericDataSchema = genericDataSchema;
+    }
+    const jobId = await studioClient.startCodegenJob(job);
+    const finishedJob = await waitForSucceededJob(() => studioClient.getCodegenJob(jobId), { pollInterval: 2000 });
+    if (!finishedJob.asset?.downloadUrl) {
+      throw new Error('No manifest file in codegen job');
+    }
+    const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
+    await extractUIComponents(finishedJob.asset.downloadUrl, uiBuilderComponentsPath);
 
-    const successfulSchemas: StudioSchema[] = [];
     const detachedForms: { id: string; name: string }[] = [];
-    let hasSuccessfulForm = false;
     const failedResponseNames: string[] = [];
     const modelNames = dataSchema?.models ? new Set(Object.keys(dataSchema.models)) : new Set<string>();
-    let hasStorageManagerField = false;
-
-    Object.entries(generatedResults).forEach(([key, results]) => {
-      results.forEach((result) => {
-        if (result.resultType === 'SUCCESS') {
-          successfulSchemas.push(result.schema);
-          if (key === 'form') {
-            hasSuccessfulForm = true;
+    const hasStorageManagerField = formSchemas.entities.some((formSchema) => hasStorageField(formSchema));
 
-            if (!hasStorageManagerField && isFormSchema(result.schema) && hasStorageField(result.schema)) {
-              hasStorageManagerField = true;
-            }
-          }
-        } else {
-          const failedSchema = result.schema;
-          /**
-           * A form resource may fail to generate because it's DataStore model type
-           * no longer exists.
-           */
-          if (
-            isStudioForm(failedSchema) &&
-            failedSchema.id &&
-            dataSchema &&
-            eventType === 'PostPush' &&
-            isFormDetachedFromModel(failedSchema, modelNames)
-          ) {
-            // Don't need to add form to failedResponseNames if it is going to be deleted
-            detachedForms.push({ id: failedSchema.id, name: failedSchema.name });
-            return;
-          }
-          failedResponseNames.push(result.schemaName);
-        }
+    if (dataSchema && eventType === 'PostPush') {
+      formSchemas.entities.forEach((formSchema) => {
+        isFormDetachedFromModel(formSchema, modelNames) && detachedForms.push({ id: formSchema.id, name: formSchema.name });
       });
-    });
-
-    generateAmplifyUiBuilderIndexFile(context, successfulSchemas);
+    }
 
-    generateAmplifyUiBuilderUtilFile(context, { hasForms: hasSuccessfulForm, hasViews: false });
+    if (finishedJob.statusMessage) {
+      const errorStack = JSON.parse(finishedJob.statusMessage)?.codegenErrors as {
+        schemaName: string;
+        error: string;
+      }[];
+      errorStack.forEach((e) => failedResponseNames.push(e.schemaName));
+    }
 
     if (failedResponseNames.length > 0) {
       spinner.fail(`Failed to sync the following components: ${failedResponseNames.join(', ')}`);
@@ -112,6 +99,7 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
       ...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(