@aws-amplify/amplify-util-uibuilder 1.2.20-optimize-pipeline-2.0 → 1.2.21-beta.1

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -5,10 +5,10 @@ import {
   getAppId,
   listUiBuilderComponents,
   listUiBuilderThemes,
-  getAmplifyUIBuilderService,
   resolveAppId,
   generateUiBuilderThemes,
 } from '../commands/utils/syncAmplifyUiBuilderComponents';
+import { getAmplifyUIBuilderService } from '../commands/utils/amplifyUiBuilderService'
 import aws from 'aws-sdk';
 import * as CLICore from 'amplify-cli-core';
 import * as createUiBuilderComponentDependency from '../commands/utils/createUiBuilderComponent';

package/src/commands/cloneComponentsFromEnv.ts

@@ -1,8 +1,8 @@
-import aws from 'aws-sdk';
 import { extractArgs } from './utils/extractArgs';
 import { listUiBuilderComponents } from './utils/syncAmplifyUiBuilderComponents';
 import { printer } from 'amplify-prompts';
-import { $TSAny, $TSContext } from 'amplify-cli-core';
+import { $TSContext } from 'amplify-cli-core';
+import { getAmplifyUIBuilderService } from './utils/amplifyUiBuilderService';
 
 export async function run(context: $TSContext) {
   printer.debug('Running create components command in amplify-util-uibuilder');
@@ -26,21 +26,7 @@ export async function run(context: $TSContext) {
 
   const environmentName = args.environmentName ?? context.exeInfo.localEnvInfo.envName;
   const appId = args.appId ?? context.exeInfo.teamProviderInfo[environmentName].awscloudformation.AmplifyAppId;
-  const awsConfigInfo = (await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
-    context,
-    newEnvName,
-    appId,
-  ])) as $TSAny;
-
-  if (process.env.UI_BUILDER_ENDPOINT) {
-    awsConfigInfo.endpoint = process.env.UI_BUILDER_ENDPOINT;
-  }
-
-  if (process.env.UI_BUILDER_REGION) {
-    awsConfigInfo.region = process.env.UI_BUILDER_REGION;
-  }
-
-  const amplifyUIBuilder = new aws.AmplifyUIBuilder(awsConfigInfo);
+  const amplifyUIBuilder = await getAmplifyUIBuilderService(context, environmentName, appId);
   const components = existingComponents.entities;
   if (!components.length) {
     printer.debug(`No UIBuilder components found in app ${appId} from env ${sourceEnvName}. Skipping component clone process.`);

package/src/commands/generateComponents.ts

@@ -1,3 +1,7 @@
+import { StudioComponent } from '@aws-amplify/codegen-ui';
+import { printer } from 'amplify-prompts';
+import ora from 'ora';
+import { $TSContext } from 'amplify-cli-core';
 import { notifyMissingPackages } from './utils/notifyMissingPackages';
 import { shouldRenderComponents } from './utils/shouldRenderComponents';
 import {
@@ -6,13 +10,12 @@ import {
   generateUiBuilderComponents,
   generateUiBuilderThemes,
 } from './utils/syncAmplifyUiBuilderComponents';
-import { StudioComponent as StudioComponentNew } from '@aws-amplify/codegen-ui-new';
 import { generateAmplifyUiBuilderIndexFile } from './utils/createUiBuilderComponent';
-import { printer } from 'amplify-prompts';
-import ora from 'ora';
-import { $TSContext } from 'amplify-cli-core';
 
-export async function run(context: $TSContext) {
+/**
+ * Pulls ui components from Studio backend and generates the code in the user's file system
+ */
+export const run = async (context: $TSContext): Promise<void> => {
   printer.debug('Running generate components command in amplify-util-uibuilder');
   if (!(await shouldRenderComponents(context))) {
     return;
@@ -32,7 +35,7 @@ export async function run(context: $TSContext) {
     generateAmplifyUiBuilderIndexFile(context, [
       ...generatedComponentResults.filter(({ resultType }) => resultType === 'SUCCESS').map(({ component }) => component),
       ...generatedThemeResults.filter(({ resultType }) => resultType === 'SUCCESS').map(({ theme }) => theme),
-    ] as StudioComponentNew[]);
+    ] as StudioComponent[]);
 
     const failedSchemas = [
       ...generatedComponentResults.filter(({ resultType }) => resultType === 'FAILURE').map(({ schemaName }) => schemaName),
@@ -45,12 +48,14 @@ export async function run(context: $TSContext) {
       spinner.succeed('Synced UI components.');
     }
 
-    notifyMissingPackages(context, [
-      ...generatedComponentResults.filter(({ resultType }) => resultType === 'SUCCESS').map(({ component }) => component),
-      ...generatedThemeResults.filter(({ resultType }) => resultType === 'SUCCESS').map(({ theme }) => theme),
-    ] as StudioComponentNew[]);
+    const invalidComponentNames = componentSchemas.entities.filter(component => !component.schemaVersion).map(component => component.name);
+    if (invalidComponentNames.length) {
+      printer.warn(`The components ${invalidComponentNames.join(', ')} were synced with an older version of Amplify Studio. Please re-sync your components with Figma to get latest features and changes.`);
+    }
+
+    notifyMissingPackages(context);
   } catch (e) {
     printer.debug(e);
     spinner.fail('Failed to sync UI components');
   }
-}
+};

package/src/commands/utils/amplifyUiBuilderService.ts

@@ -0,0 +1,22 @@
+import { AmplifyUIBuilder } from 'aws-sdk';
+import { $TSContext, $TSAny } from 'amplify-cli-core';
+
+export { Component, Theme } from 'aws-sdk/clients/amplifyuibuilder';
+
+export const getAmplifyUIBuilderService = async (context: $TSContext, environmentName: string, appId: string): Promise<AmplifyUIBuilder> => {
+  const awsConfigInfo = (await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
+    context,
+    environmentName,
+    appId,
+  ])) as $TSAny;
+
+  if (process.env.UI_BUILDER_ENDPOINT) {
+    awsConfigInfo.endpoint = process.env.UI_BUILDER_ENDPOINT;
+  }
+
+  if (process.env.UI_BUILDER_REGION) {
+    awsConfigInfo.region = process.env.UI_BUILDER_REGION;
+  }
+
+  return new AmplifyUIBuilder(awsConfigInfo);
+};

package/src/commands/utils/createUiBuilderComponent.ts

@@ -1,18 +1,25 @@
-import { StudioTemplateRendererManager, StudioComponent, StudioTemplateRendererFactory, StudioTemplateRenderer, FrameworkOutputManager, RenderTextComponentResponse } from '@aws-amplify/codegen-ui-old';
+import {
+  StudioTemplateRendererManager,
+  StudioComponent,
+  StudioTheme,
+  StudioTemplateRendererFactory,
+  StudioTemplateRenderer,
+  FrameworkOutputManager,
+  RenderTextComponentResponse,
+} from '@aws-amplify/codegen-ui';
 import {
   AmplifyRenderer,
   ReactThemeStudioTemplateRenderer,
+  ReactIndexStudioTemplateRenderer,
   ModuleKind,
   ScriptTarget,
   ScriptKind,
-} from '@aws-amplify/codegen-ui-react-old';
+} from '@aws-amplify/codegen-ui-react';
 
-import {StudioComponent as StudioComponentNew, StudioTheme} from '@aws-amplify/codegen-ui-new';
-import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 import { printer } from 'amplify-prompts';
 import { $TSContext } from 'amplify-cli-core';
-import { createUiBuilderComponent as createUiBuilderComponentNew } from './createUiBuilderComponentNew';
-import { ReactIndexStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react-new';
+import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
+
 const config = {
   module: ModuleKind.ES2020,
   target: ScriptTarget.ES2020,
@@ -20,18 +27,13 @@ const config = {
   renderTypeDeclarations: true,
 };
 
-const isUpdatedSchema = (schema: StudioComponent) => {
-  return (schema as unknown as StudioComponentNew).schemaVersion && (schema as unknown as StudioComponentNew).schemaVersion === '1.0';
-};
-
-export const createUiBuilderComponent = (context: $TSContext, schema: StudioComponent) => {
-  if (isUpdatedSchema(schema)) {
-    return createUiBuilderComponentNew(context, schema as unknown as StudioComponentNew);
-  }
+/**
+ * Writes component file to the work space
+ */
+export const createUiBuilderComponent = (context: $TSContext, schema: StudioComponent): StudioComponent => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
   const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioComponent) =>
-      new AmplifyRenderer(component as StudioComponent, config) as unknown as StudioTemplateRenderer<
+    (component: StudioComponent) => new AmplifyRenderer(component as StudioComponent, config) as unknown as StudioTemplateRenderer<
         unknown,
         StudioComponent,
         FrameworkOutputManager<unknown>,
@@ -49,9 +51,19 @@ export const createUiBuilderComponent = (context: $TSContext, schema: StudioComp
   return schema;
 };
 
-export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme) => {
+/**
+ * Writes theme file to the work space
+ */
+export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme): StudioTheme => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory((component: StudioTheme) => new ReactThemeStudioTemplateRenderer(component, config) as unknown as StudioTemplateRenderer<unknown, StudioTheme, FrameworkOutputManager<unknown>, RenderTextComponentResponse>);
+  const rendererFactory = new StudioTemplateRendererFactory(
+    (component: StudioTheme) => new ReactThemeStudioTemplateRenderer(component, config) as unknown as StudioTemplateRenderer<
+        unknown,
+        StudioTheme,
+        FrameworkOutputManager<unknown>,
+        RenderTextComponentResponse
+      >,
+  );
 
   const outputPathDir = uiBuilderComponentsPath;
 
@@ -70,9 +82,19 @@ export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme) =
   }
 };
 
-export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioComponentNew[]) => {
+/**
+ * Writes index file to the work space
+ */
+export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioComponent[]): RenderTextComponentResponse => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory((component: StudioComponentNew[]) => new ReactIndexStudioTemplateRenderer(component, config) as unknown as StudioTemplateRenderer<unknown, StudioComponentNew[], FrameworkOutputManager<unknown>, RenderTextComponentResponse>);
+  const rendererFactory = new StudioTemplateRendererFactory(
+    (component: StudioComponent[]) => new ReactIndexStudioTemplateRenderer(component, config) as unknown as StudioTemplateRenderer<
+        unknown,
+        StudioComponent[],
+        FrameworkOutputManager<unknown>,
+        RenderTextComponentResponse
+      >,
+  );
 
   const outputPathDir = uiBuilderComponentsPath;
 
@@ -86,4 +108,5 @@ export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas:
     printer.debug(e);
     printer.debug('Failed to generate component index file');
     throw e;
-  }};
+  }
+};

package/src/commands/utils/notifyMissingPackages.ts

@@ -1,25 +1,21 @@
-import { pathManager, JSONUtilities, $TSContext, $TSAny } from 'amplify-cli-core';
+import {
+  pathManager, JSONUtilities, $TSContext, $TSAny,
+} from 'amplify-cli-core';
 import { printer } from 'amplify-prompts';
 import fs from 'fs-extra';
 import path from 'path';
 import rangeSubset from 'semver/ranges/subset';
+import { RequiredDependency } from '@aws-amplify/codegen-ui';
+import { ReactRequiredDependencyProvider } from '@aws-amplify/codegen-ui-react';
 import { extractArgs } from './extractArgs';
-import { ReactRequiredDependencyProvider } from '@aws-amplify/codegen-ui-react-old';
-import { ReactRequiredDependencyProvider as ReactRequiredDependencyProviderNew } from '@aws-amplify/codegen-ui-react-new';
-import { StudioComponent } from '@aws-amplify/codegen-ui-new';
 
-const isUpdatedSchema = (schemas: StudioComponent[]) => {
-  return schemas.some(schema => schema.schemaVersion && schema.schemaVersion === '1.0');
-};
-
-const getRequiredDependencies = (schemas: StudioComponent[]) => {
-  if (isUpdatedSchema(schemas)) {
-    return new ReactRequiredDependencyProviderNew().getRequiredDependencies();
-  }
-  return new ReactRequiredDependencyProvider().getRequiredDependencies();
-};
+const getRequiredDependencies = (): RequiredDependency[] => new ReactRequiredDependencyProvider().getRequiredDependencies();
 
-export const notifyMissingPackages = (context: $TSContext, schemas: StudioComponent[]) => {
+/**
+ * Displays a warning to the user if they have npm dependencies
+ * they need to install in their application for UIBuilder components to work properly
+ */
+export const notifyMissingPackages = (context: $TSContext): void => {
   const args = extractArgs(context);
   const localEnvFilePath = args.localEnvFilePath ?? pathManager.getLocalEnvFilePath();
   if (!fs.existsSync(localEnvFilePath)) {
@@ -33,7 +29,7 @@ export const notifyMissingPackages = (context: $TSContext, schemas: StudioCompon
     return;
   }
   const packageJson = JSONUtilities.readJson(packageJsonPath) as { dependencies: { [key: string]: string } };
-  getRequiredDependencies(schemas).forEach((dependency: $TSAny) => {
+  getRequiredDependencies().forEach((dependency: $TSAny) => {
     const packageIsInstalled = Object.keys(packageJson.dependencies).includes(dependency.dependencyName);
     if (!packageIsInstalled) {
       printer.warn(

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,9 +1,9 @@
-import aws from 'aws-sdk';
+import { getAmplifyUIBuilderService, Component, Theme } from './amplifyUiBuilderService';
 import { printer } from 'amplify-prompts';
 import { createUiBuilderComponent, createUiBuilderTheme } from './createUiBuilderComponent';
 import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 import { extractArgs } from './extractArgs';
-import { $TSAny, $TSContext } from 'amplify-cli-core';
+import { $TSContext } from 'amplify-cli-core';
 export const getEnvName = (context: $TSContext, envName?: string) => {
   const args = extractArgs(context);
   return envName ? envName : args.environmentName ? args.environmentName : context.exeInfo.localEnvInfo.envName;
@@ -24,40 +24,53 @@ export const getAppId = async (context: $TSContext) => {
   return appId;
 };
 
-export async function listUiBuilderComponents(context: $TSContext, envName?: string) {
+export async function listUiBuilderComponents(context: $TSContext, envName?: string): Promise<{ entities: Component[] }> {
   const environmentName = getEnvName(context, envName);
   const appId = await getAppId(context);
 
   try {
     const amplifyUIBuilder = await getAmplifyUIBuilderService(context, environmentName, appId);
-    const uiBuilderComponents = await amplifyUIBuilder
+    let nextToken: string | undefined;
+    const uiBuilderComponents: Component[] = [];
+    do {
+      const response = await amplifyUIBuilder
       .exportComponents({
         appId,
         environmentName,
+        nextToken
       })
       .promise();
+      uiBuilderComponents.push(...response.entities);
+      nextToken = response.nextToken;
+    } while (nextToken);
     printer.debug(JSON.stringify(uiBuilderComponents, null, 2));
-    return uiBuilderComponents;
+    return { entities: uiBuilderComponents };
   } catch (e) {
     printer.debug(e);
     throw e;
   }
 }
 
-export async function listUiBuilderThemes(context: $TSContext, envName?: string) {
+export async function listUiBuilderThemes(context: $TSContext, envName?: string): Promise<{ entities: Theme[] }> {
   const environmentName = getEnvName(context, envName);
   const appId = await getAppId(context);
 
   try {
     const amplifyUIBuilder = await getAmplifyUIBuilderService(context, environmentName, appId);
-    const uiBuilderThemes = await amplifyUIBuilder
+    let nextToken: string | undefined;
+    const uiBuilderThemes: Theme[] = [];
+    do {
+      const response = await amplifyUIBuilder
       .exportThemes({
         appId,
         environmentName,
       })
       .promise();
+      uiBuilderThemes.push(...response.entities);
+      nextToken = response.nextToken;
+    } while (nextToken);
     printer.debug(JSON.stringify(uiBuilderThemes, null, 2));
-    return uiBuilderThemes;
+    return { entities: uiBuilderThemes };
   } catch (e) {
     printer.debug(e);
     throw e;
@@ -100,22 +113,4 @@ export function generateUiBuilderThemes(context: $TSContext, themeSchemas: any[]
     `Generated ${themeResults.filter(result => result.resultType === 'SUCCESS').length} themes in ${getUiBuilderComponentsPath(context)}`,
   );
   return themeResults;
-}
-
-export const getAmplifyUIBuilderService = async (context: $TSContext, environmentName: string, appId: string) => {
-  const awsConfigInfo = (await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
-    context,
-    environmentName,
-    appId,
-  ])) as $TSAny;
-
-  if (process.env.UI_BUILDER_ENDPOINT) {
-    awsConfigInfo.endpoint = process.env.UI_BUILDER_ENDPOINT;
-  }
-
-  if (process.env.UI_BUILDER_REGION) {
-    awsConfigInfo.region = process.env.UI_BUILDER_REGION;
-  }
-
-  return new aws.AmplifyUIBuilder(awsConfigInfo);
-};
+}

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
-	"extends": "../../tsconfig.base.json",
-	"compilerOptions": {
-	  "outDir": "./lib",
-	  "rootDir": "./src",
-	  "strict": true,
-	  "skipLibCheck": true
-	}
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./src",
+    "strict": true,
+    "skipLibCheck": true
   }
+}