@aws-amplify/amplify-util-uibuilder 1.9.0-replace-lambda-callouts-branch.0 → 1.9.0

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

@@ -1,10 +1,11 @@
 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';
 import { getTransformerVersion } from '../commands/utils/featureFlags';
+import { isDataStoreEnabled } from '@aws-amplify/amplify-category-api';
 
 /**
  * studio client metadata
@@ -60,6 +61,7 @@ export default class AmplifyStudioClient {
   #envName: string;
   metadata: StudioMetadata;
   isGraphQLSupported = false;
+  isDataStoreEnabled = false;
 
   /**
    * static function meant to check if given appId is studio enabled
@@ -82,11 +84,14 @@ export default class AmplifyStudioClient {
   static async setClientInfo(context: $TSContext, envName?: string, appId?: string): Promise<AmplifyStudioClient> {
     const resolvedEnvName = getEnvName(context, envName);
     const resolvedAppId = getAppId(context, appId);
-    const awsConfigInfo = (await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
-      context,
-      resolvedEnvName,
-      resolvedAppId,
-    ])) as ServiceConfigurationOptions;
+    const [awsConfigInfo, dataStoreStatus] = await Promise.all([
+      context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
+        context,
+        resolvedEnvName,
+        resolvedAppId,
+      ]) as ServiceConfigurationOptions,
+      isDataStoreEnabled(context),
+    ]);
 
     const client = new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
 
@@ -97,6 +102,8 @@ export default class AmplifyStudioClient {
       client.isGraphQLSupported = false;
     }
 
+    client.isDataStoreEnabled = dataStoreStatus;
+
     return client;
   }
 
@@ -164,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}`);
@@ -192,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}`);
@@ -216,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}`);
@@ -267,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
@@ -37,7 +34,8 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
       studioClient.isGraphQLSupported ? getAmplifyDataSchema(context) : Promise.resolve(undefined),
     ]);
 
-    const nothingWouldAutogenerate = !dataSchema || !studioClient.metadata.autoGenerateForms || !studioClient.isGraphQLSupported;
+    const nothingWouldAutogenerate =
+      !dataSchema || !studioClient.metadata.autoGenerateForms || !studioClient.isGraphQLSupported || !studioClient.isDataStoreEnabled;
 
     if (nothingWouldAutogenerate && [componentSchemas, themeSchemas, formSchemas].every((group) => !group.entities.length)) {
       printer.debug('Skipping UI component generation since none are found.');
@@ -45,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.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(', ')}`);
@@ -111,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(

package/src/commands/utils/codegenResources.ts

@@ -1,210 +1,8 @@
-/* eslint-disable spellcheck/spell-checker*/
-// You have a misspelled word: Renderer on Identifier
-import {
-  StudioTemplateRendererManager,
-  StudioComponent,
-  StudioTheme,
-  StudioTemplateRendererFactory,
-  StudioTemplateRenderer,
-  FrameworkOutputManager,
-  RenderTextComponentResponse,
-  GenericDataSchema,
-  getGenericFromDataStore,
-  StudioForm,
-  StudioSchema,
-  FormFeatureFlags,
-} from '@aws-amplify/codegen-ui';
-import {
-  AmplifyRenderer,
-  AmplifyFormRenderer,
-  ReactThemeStudioTemplateRenderer,
-  ReactIndexStudioTemplateRenderer,
-  ModuleKind,
-  ScriptTarget,
-  ScriptKind,
-  UtilTemplateType,
-  ReactUtilsStudioTemplateRenderer,
-  ReactThemeStudioTemplateRendererOptions,
-} from '@aws-amplify/codegen-ui-react';
+import { GenericDataSchema, getGenericFromDataStore } from '@aws-amplify/codegen-ui';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { $TSContext } from '@aws-amplify/amplify-cli-core';
-import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 import { ModelIntrospectionSchema } from '@aws-amplify/appsync-modelgen-plugin';
 
-const config = {
-  module: ModuleKind.ES2020,
-  target: ScriptTarget.ES2020,
-  script: ScriptKind.JSX,
-  renderTypeDeclarations: true,
-};
-
-/**
- * Writes component file to the work space
- */
-export const createUiBuilderComponent = (context: $TSContext, schema: StudioComponent, dataSchema?: GenericDataSchema): StudioComponent => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioComponent) => new AmplifyRenderer(component as StudioComponent, config, dataSchema),
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  rendererManager.renderSchemaToTemplate(schema);
-  return schema;
-};
-
-/**
- * Writes theme file to the work space
- */
-export const createUiBuilderTheme = (
-  context: $TSContext,
-  schema: StudioTheme,
-  options?: ReactThemeStudioTemplateRendererOptions,
-): StudioTheme => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioTheme) =>
-      new ReactThemeStudioTemplateRenderer(component, config, options) as unknown as StudioTemplateRenderer<
-        unknown,
-        StudioTheme,
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  try {
-    rendererManager.renderSchemaToTemplate(schema);
-    return schema;
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Skipping invalid theme with schema');
-    printer.debug(JSON.stringify(schema, null, 2));
-    throw e;
-  }
-};
-
-/**
- * Writes form file to the work space
- */
-export const createUiBuilderForm = (
-  context: $TSContext,
-  schema: StudioForm,
-  dataSchema?: GenericDataSchema,
-  formFeatureFlags?: FormFeatureFlags,
-): StudioForm => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (form: StudioForm) =>
-      new AmplifyFormRenderer(form, dataSchema, config, formFeatureFlags) as unknown as StudioTemplateRenderer<
-        unknown,
-        StudioForm,
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  try {
-    rendererManager.renderSchemaToTemplate(schema);
-    return schema;
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Skipping invalid form with schema');
-    printer.debug(JSON.stringify(schema, null, 2));
-    throw e;
-  }
-};
-
-/**
- * Writes index file to the work space
- */
-export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioSchema[]): void => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (schema: StudioSchema[]) =>
-      new ReactIndexStudioTemplateRenderer(schema, config) as unknown as StudioTemplateRenderer<
-        unknown,
-        StudioSchema[],
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  try {
-    if (schemas.length) {
-      rendererManager.renderSchemaToTemplate(schemas);
-    }
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Failed to generate component index file');
-    throw e;
-  }
-};
-
-type UtilFileChecks = {
-  hasForms: boolean;
-  hasViews: boolean;
-};
-
-/**
- * Writes utils file to the work space
- */
-export const generateAmplifyUiBuilderUtilFile = (context: $TSContext, { hasForms, hasViews }: UtilFileChecks): void => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (utils: UtilTemplateType[]) => new ReactUtilsStudioTemplateRenderer(utils, config),
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  const utils = new Set<UtilTemplateType>();
-
-  if (hasForms) {
-    utils.add('validation');
-    utils.add('formatter');
-    utils.add('fetchByPath');
-  }
-
-  if (hasViews) {
-    utils.add('formatter');
-  }
-
-  try {
-    if (utils.size) {
-      rendererManager.renderSchemaToTemplate([...utils]);
-    }
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Failed to generate component index file');
-    throw e;
-  }
-};
-
 /**
  * If models are available, they will be populated in the models field of the returned object.
  * If they're not available, it will return undefined
@@ -223,25 +21,3 @@ export const getAmplifyDataSchema = async (context: $TSContext): Promise<Generic
     return undefined;
   }
 };
-
-/**
- * generates base create/update froms from names
- */
-export const generateBaseForms = (modelMap: { [model: string]: Set<'create' | 'update'> }): StudioForm[] => {
-  const getSchema = (name: string, type: 'create' | 'update'): StudioForm => ({
-    name: `${name}${type === 'create' ? 'CreateForm' : 'UpdateForm'}`,
-    formActionType: type,
-    dataType: { dataSourceType: 'DataStore', dataTypeName: name },
-    fields: {},
-    sectionalElements: {},
-    style: {},
-    cta: {},
-  });
-
-  const schemas: StudioForm[] = [];
-
-  Object.entries(modelMap).forEach(([name, set]) => {
-    set.forEach((type) => schemas.push(getSchema(name, type)));
-  });
-  return schemas;
-};

package/src/commands/utils/detachedFormCleanup.ts

@@ -1,4 +1,3 @@
-import { StudioForm, StudioSchema } from '@aws-amplify/codegen-ui';
 import { Form } from 'aws-sdk/clients/amplifyuibuilder';
 import { AmplifyStudioClient } from '../../clients';
 import { printer } from '@aws-amplify/amplify-prompts';
@@ -7,7 +6,7 @@ import asyncPool from 'tiny-async-pool';
 /**
  * Does the form's reference DataStore type exist in the list of models
  */
-export const isFormDetachedFromModel = (formSchema: StudioForm | Form, modelNames: Set<string>): boolean => {
+export const isFormDetachedFromModel = (formSchema: Form, modelNames: Set<string>): boolean => {
   return formSchema.dataType.dataSourceType === 'DataStore' && !modelNames.has(formSchema.dataType.dataTypeName);
 };
 
@@ -16,7 +15,7 @@ export const isFormDetachedFromModel = (formSchema: StudioForm | Form, modelName
  * @param schema The schema to test
  * @returns boolean
  */
-export const isFormSchemaCustomized = (formSchema: StudioForm | Form): boolean => {
+export const isFormSchemaCustomized = (formSchema: Form): boolean => {
   const { fields, style, sectionalElements } = formSchema;
   // Fields and sectionalElements just need an empty check
   if (!isEmpty({ ...fields, ...sectionalElements })) {
@@ -31,7 +30,7 @@ export const isFormSchemaCustomized = (formSchema: StudioForm | Form): boolean =
 /**
  * Is the schema a StudioForm
  */
-export const isStudioForm = (schema: StudioSchema | undefined): schema is StudioForm => {
+export const isStudioForm = (schema: Form | undefined): schema is Form => {
   if (!schema) return false;
   return 'formActionType' in schema;
 };

package/src/commands/utils/storageManager.ts

@@ -1,6 +1,6 @@
-import { StudioForm, StudioFormFieldConfig, StudioGenericFieldConfig, StudioSchema } from '@aws-amplify/codegen-ui';
+import { FieldConfig, Form } from 'aws-sdk/clients/amplifyuibuilder';
 
-export const hasStorageField = (form: StudioForm): boolean => {
+export const hasStorageField = (form: Form): boolean => {
   const result = Object.values(form.fields).some((field) => {
     return isGenericFieldConfig(field) && field.inputType?.type === 'StorageField';
   });
@@ -8,10 +8,6 @@ export const hasStorageField = (form: StudioForm): boolean => {
   return result;
 };
 
-export const isFormSchema = (schema: StudioSchema): schema is StudioForm => {
-  return schema && Object.keys(schema).includes('fields');
-};
-
-export const isGenericFieldConfig = (config: StudioFormFieldConfig): config is StudioGenericFieldConfig => {
+export const isGenericFieldConfig = (config: FieldConfig) => {
   return !Object.keys(config).includes('excluded');
 };