@aws-amplify/amplify-util-uibuilder 1.5.0 → 1.6.0-beta.0

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,24 @@ export default class AmplifyStudioClient {
   #amplifyBackend: AmplifyBackend;
   #appId: string;
   #envName: string;
+  metadata: StudioMetadata;
+  isGraphQLSupported = false;
+
+  /**
+   * static function meant to check if given appId is studio enabled
+   */
+  static isAmplifyApp = async (context: $TSContext, appId: string): Promise<boolean> => {
+    try {
+      const { isAdminApp } = await CloudformationProviderFacade.isAmplifyAdminApp(context, appId);
+      return isAdminApp;
+    } catch (err) {
+      // return false is admin app failed check
+      // this means we wont run codegen-ui
+      printer.debug(`Failed admin app check: ${err.message}`);
+      return false;
+    }
+  }
+
   /**
    * Used to configure the AWS Amplify clients.
    */
@@ -56,19 +85,55 @@ export default class AmplifyStudioClient {
       resolvedEnvName,
       resolvedAppId,
     ])) as ServiceConfigurationOptions;
-    return new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
+
+    const client = new AmplifyStudioClient(awsConfigInfo, resolvedAppId, resolvedEnvName);
+
+    if ((await getTransformerVersion()) === 2) {
+      await client.loadMetadata();
+      client.isGraphQLSupported = true;
+    } else {
+      client.isGraphQLSupported = 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 (err) {
+      throw new Error(`Failed to load metadata: ${err.message}`);
+    }
+  };
+
   /**
    * listComponents from Studio
    */
@@ -91,71 +156,94 @@ export default class AmplifyStudioClient {
       } while (nextToken);
       printer.debug(JSON.stringify(uiBuilderComponents, null, 2));
       return { entities: uiBuilderComponents };
-    } catch (e) {
-      printer.debug(e);
-      throw e;
+    } catch (err) {
+      throw new Error(`Failed to list components: ${err.message}`);
     }
-  }
+  };
 
   /**
- * 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;
-   }
- }
-
- 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}`);
-   }
- }
+   * 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 (err) {
+      throw new Error(`Failed to list themes: ${err.message}`);
+    }
+  };
+
+  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 (err) {
+      throw new Error(`Failed to list forms: ${err.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) {
+      throw new Error(`Failed to create component: ${err.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 (err) {
+      throw new Error(`Models not found in AmplifyBackend:GetBackendAPIModels response: ${err.message}`);
+    }
+  };
 }

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,60 @@ 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([
+    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.isGraphQLSupported;
+
+    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.isGraphQLSupported,
+      ),
+    };
 
-    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[] = [];
+
+    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);
+        }
+      });
+    });
 
-    if (failedSchemas.length > 0) {
-      spinner.fail(`Failed to sync the following components: ${failedSchemas.join(', ')}`);
+    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');
-}
+};

package/src/commands/utils/codegenResources.ts

@@ -10,14 +10,20 @@ import {
   RenderTextComponentResponse,
   GenericDataSchema,
   getGenericFromDataStore,
+  StudioForm,
+  StudioSchema,
 } from '@aws-amplify/codegen-ui';
 import {
   AmplifyRenderer,
+  AmplifyFormRenderer,
   ReactThemeStudioTemplateRenderer,
   ReactIndexStudioTemplateRenderer,
   ModuleKind,
   ScriptTarget,
   ScriptKind,
+  UtilTemplateType,
+  ReactUtilsStudioTemplateRenderer,
+  ReactThemeStudioTemplateRendererOptions,
 } from '@aws-amplify/codegen-ui-react';
 import { printer } from 'amplify-prompts';
 import {
@@ -55,10 +61,14 @@ export const createUiBuilderComponent = (context: $TSContext, schema: StudioComp
 /**
  * Writes theme file to the work space
  */
-export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme): StudioTheme => {
+export const createUiBuilderTheme = (
+  context: $TSContext,
+  schema: StudioTheme,
+  options?: ReactThemeStudioTemplateRendererOptions,
+): StudioTheme => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
   const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioTheme) => (new ReactThemeStudioTemplateRenderer(component, config) as unknown) as StudioTemplateRenderer<
+    (component: StudioTheme) => (new ReactThemeStudioTemplateRenderer(component, config, options) as unknown) as StudioTemplateRenderer<
         unknown,
         StudioTheme,
         FrameworkOutputManager<unknown>,
@@ -83,15 +93,46 @@ export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme):
   }
 };
 
+/**
+ * Writes form file to the work space
+ */
+export const createUiBuilderForm = (context: $TSContext, schema: StudioForm, dataSchema?: GenericDataSchema): StudioForm => {
+  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
+  const rendererFactory = new StudioTemplateRendererFactory(
+    (form: StudioForm) => (new AmplifyFormRenderer(form, dataSchema, config) 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: StudioComponent[]): RenderTextComponentResponse => {
+export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioSchema[]): void => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
   const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioComponent[]) => (new ReactIndexStudioTemplateRenderer(component, config) as unknown) as StudioTemplateRenderer<
+    (schema: StudioSchema[]) => (new ReactIndexStudioTemplateRenderer(schema, config) as unknown) as StudioTemplateRenderer<
         unknown,
-        StudioComponent[],
+        StudioSchema[],
         FrameworkOutputManager<unknown>,
         RenderTextComponentResponse
       >,
@@ -104,7 +145,50 @@ export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas:
   });
 
   try {
-    return rendererManager.renderSchemaToTemplate(schemas);
+    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');
@@ -119,6 +203,9 @@ export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas:
 export const getAmplifyDataSchema = async (
   studioClient: AmplifyStudioClient,
 ): Promise<GenericDataSchema | undefined> => {
+  if (!studioClient.isGraphQLSupported) {
+    return undefined;
+  }
   try {
     const meta = stateManager.getMeta();
     const resourceName = Object.entries(meta[AmplifyCategories.API]).find(
@@ -138,3 +225,25 @@ export const getAmplifyDataSchema = async (
     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/featureFlags.ts

@@ -0,0 +1,62 @@
+/* eslint-disable spellcheck/spell-checker */
+import {
+  FeatureFlags, pathManager, stateManager,
+} from 'amplify-cli-core';
+import { printer } from 'amplify-prompts';
+
+// This is copy-pasta from the category api until they can expose the method to plugins
+
+/**
+ * Shorthand for Feature flag retrieval.
+ */
+const useExperimentalPipelinedTransformerFF = (): boolean => FeatureFlags.getBoolean('graphQLTransformer.useExperimentalPipelinedTransformer');
+const transformerVersionFF = (): number => FeatureFlags.getNumber('graphQLTransformer.transformerVersion');
+
+/**
+ * Inspect feature flags for the project and determine if this particular project should be using graphql v2 or v1.
+ * Coerces feature flags into a sane state if they are out of, and throws error on invalid configuration.
+ */
+export const getTransformerVersion = async (): Promise<number> => {
+  if (useExperimentalPipelinedTransformerFF() === false) {
+    return 1;
+  }
+
+  if (isLegacyFeatureFlagConfiguration()) {
+    await migrateToTransformerVersionFeatureFlag();
+  }
+
+  const transformerVersion = transformerVersionFF();
+  if (transformerVersion !== 1 && transformerVersion !== 2) {
+    throw new Error(`Invalid value specified for transformerVersion: '${transformerVersion}'`);
+  }
+
+  return transformerVersion;
+};
+
+/**
+ * Return whether or not the project is configured with legacy pipelined transformer feature flags, and may need to be updated.
+ */
+const isLegacyFeatureFlagConfiguration = (): boolean => useExperimentalPipelinedTransformerFF() && transformerVersionFF() === 1;
+
+/**
+ * Update project feature flags and alert the user if they have a deprecated set of feature flags.
+ */
+const migrateToTransformerVersionFeatureFlag = async (): Promise<void> => {
+  const projectPath = pathManager.findProjectRoot() ?? process.cwd();
+
+  const config = stateManager.getCLIJSON(projectPath, undefined, {
+    throwIfNotExist: false,
+    preserveComments: true,
+  });
+
+  // eslint-disable-next-line spellcheck/spell-checker
+  config.features.graphqltransformer.transformerversion = 2;
+  stateManager.setCLIJSON(projectPath, config);
+  await FeatureFlags.reloadValues();
+  // eslint-disable-next-line spellcheck/spell-checker
+  printer.warn(
+    `\nThe project is configured with 'transformerVersion': ${transformerVersionFF()}, but 'useExperimentalPipelinedTransformer': ${useExperimentalPipelinedTransformerFF()}. Setting the 'transformerVersion': ${
+      config.features.graphqltransformer.transformerversion
+    }. 'useExperimentalPipelinedTransformer' is deprecated.`,
+  );
+};

package/src/commands/utils/getUiBuilderComponentsPath.ts

@@ -1,14 +1,19 @@
 import path from 'path';
 import fs from 'fs-extra';
-import { extractArgs } from './extractArgs';
 import { $TSContext } from 'amplify-cli-core';
+import { extractArgs } from './extractArgs';
 
-export const getUiBuilderComponentsPath = (context: $TSContext) => {
+/**
+ *
+ * locates components path directory
+ */
+export const getUiBuilderComponentsPath = (context: $TSContext): string => {
   const args = extractArgs(context);
   const srcDir = args.srcDir ? args.srcDir : context.exeInfo.projectConfig.javascript.config.SourceDir;
   const uiBuilderComponentsPath = path.resolve(path.join('.', srcDir, 'ui-components'));
 
   if (!fs.existsSync(uiBuilderComponentsPath)) {
+    // eslint-disable-next-line spellcheck/spell-checker
     fs.mkdirpSync(uiBuilderComponentsPath);
   }