@aws-amplify/amplify-util-uibuilder 1.4.1-beta.0 → 1.4.2-rc.cf54accdc.0

package/src/commands/utils/{createUiBuilderComponent.ts → codegenResources.ts}

@@ -1,3 +1,5 @@
+/* eslint-disable spellcheck/spell-checker*/
+// You have a misspelled word: Renderer on Identifier
 import {
   StudioTemplateRendererManager,
   StudioComponent,
@@ -6,6 +8,8 @@ import {
   StudioTemplateRenderer,
   FrameworkOutputManager,
   RenderTextComponentResponse,
+  GenericDataSchema,
+  getGenericFromDataStore,
 } from '@aws-amplify/codegen-ui';
 import {
   AmplifyRenderer,
@@ -15,10 +19,12 @@ import {
   ScriptTarget,
   ScriptKind,
 } from '@aws-amplify/codegen-ui-react';
-
 import { printer } from 'amplify-prompts';
-import { $TSContext } from 'amplify-cli-core';
+import {
+  $TSContext, AmplifyCategories, AmplifySupportedService, stateManager,
+} from 'amplify-cli-core';
 import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
+import { AmplifyStudioClient } from '../../clients';
 
 const config = {
   module: ModuleKind.ES2020,
@@ -30,15 +36,10 @@ const config = {
 /**
  * Writes component file to the work space
  */
-export const createUiBuilderComponent = (context: $TSContext, schema: StudioComponent): StudioComponent => {
+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) as unknown as StudioTemplateRenderer<
-        unknown,
-        StudioComponent,
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
+    (component: StudioComponent) => new AmplifyRenderer(component as StudioComponent, config, dataSchema),
   );
 
   const outputPathDir = uiBuilderComponentsPath;
@@ -57,7 +58,7 @@ export const createUiBuilderComponent = (context: $TSContext, schema: StudioComp
 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<
+    (component: StudioTheme) => (new ReactThemeStudioTemplateRenderer(component, config) as unknown) as StudioTemplateRenderer<
         unknown,
         StudioTheme,
         FrameworkOutputManager<unknown>,
@@ -88,7 +89,7 @@ export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme):
 export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioComponent[]): RenderTextComponentResponse => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
   const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioComponent[]) => new ReactIndexStudioTemplateRenderer(component, config) as unknown as StudioTemplateRenderer<
+    (component: StudioComponent[]) => (new ReactIndexStudioTemplateRenderer(component, config) as unknown) as StudioTemplateRenderer<
         unknown,
         StudioComponent[],
         FrameworkOutputManager<unknown>,
@@ -110,3 +111,30 @@ export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas:
     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
+ */
+export const getAmplifyDataSchema = async (
+  studioClient: AmplifyStudioClient,
+): Promise<GenericDataSchema | undefined> => {
+  try {
+    const meta = stateManager.getMeta();
+    const resourceName = Object.entries(meta[AmplifyCategories.API]).find(
+      ([, value]) => (value as { service: string }).service === AmplifySupportedService.APPSYNC,
+    )?.[0];
+    if (resourceName) {
+      const model = await studioClient.getModels(resourceName);
+      if (model) {
+        const source = model.replace(model.substring(0, model.indexOf(`{`) - 1), ``).replace(/;/g, ``);
+        return getGenericFromDataStore(JSON.parse(source));
+      }
+    }
+    printer.debug(`Provided ResourceName: ${resourceName} did not yield Models.`);
+    return undefined;
+  } catch (error) {
+    printer.debug(error.toString());
+    return undefined;
+  }
+};

package/src/commands/utils/environmentHelpers.ts

@@ -0,0 +1,32 @@
+import { $TSContext, stateManager } from 'amplify-cli-core';
+import { extractArgs } from './extractArgs';
+
+/**
+ * Get's the environment name from the given name or the context
+ */
+export const getEnvName = (context: $TSContext, envName?: string): string => {
+  const args = extractArgs(context);
+  return envName || args?.environmentName || context.exeInfo.localEnvInfo.envName;
+};
+
+/**
+ *  Returns the appId from the context
+ */
+export const resolveAppId = (): string | undefined => {
+  const meta = stateManager.getMeta();
+  return meta?.providers?.awscloudformation?.AmplifyAppId;
+};
+
+/**
+ * Returns the appId or throws an error if it's not found.
+ */
+export const getAppId = (context: $TSContext, appId?: string): string => {
+  const resolvedAppId = appId || extractArgs(context).appId || resolveAppId();
+
+  if (!resolvedAppId) {
+    throw new Error(
+      'Unable to sync Studio components since appId could not be determined. This can happen when you hit the soft limit of number of apps that you can have in Amplify console.',
+    );
+  }
+  return resolvedAppId;
+};

package/src/commands/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './codegenResources';
+export * from './environmentHelpers';
+export * from './extractArgs';
+export * from './getUiBuilderComponentsPath';
+export * from './notifyMissingPackages';
+export * from './shouldRenderComponents';
+export * from './syncAmplifyUiBuilderComponents';

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,86 +1,29 @@
-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 { $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;
-};
-
-export const resolveAppId = async (context: $TSContext) => {
-  return await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'resolveAppId', [context]);
-};
-
-export const getAppId = async (context: $TSContext) => {
-  const appId = extractArgs(context).appId || (await resolveAppId(context));
-
-  if (!appId) {
-    throw new Error(
-      'Unable to sync Studio components since appId could not be determined. This can happen when you hit the soft limit of number of apps that you can have in Amplify console.',
-    );
-  }
-  return appId;
-};
-
-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);
-    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 { entities: uiBuilderComponents };
-  } catch (e) {
-    printer.debug(e);
-    throw e;
-  }
-}
-
-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);
-    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 { entities: uiBuilderThemes };
-  } catch (e) {
-    printer.debug(e);
-    throw e;
-  }
-}
+import {
+  StudioComponent, StudioTheme, GenericDataSchema,
+} from '@aws-amplify/codegen-ui';
+import { createUiBuilderComponent, createUiBuilderTheme } from './codegenResources';
+import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 
-export function generateUiBuilderComponents(context: $TSContext, componentSchemas: any[]) {
+/**
+ * Returns instances of StudioComponent from the component schemas
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const generateUiBuilderComponents = (context: $TSContext, componentSchemas: any[], dataSchema?: GenericDataSchema): ({
+  resultType: string;
+  component: StudioComponent;
+  schemaName?: undefined;
+  error?: undefined;
+} | {
+  resultType: string;
+  schemaName: string;
+  error: Error;
+  component?: undefined;
+})[] => {
   const componentResults = componentSchemas.map(schema => {
     try {
-      const component = createUiBuilderComponent(context, schema);
+      const component = createUiBuilderComponent(context, schema, dataSchema);
       return { resultType: 'SUCCESS', component };
     } catch (e) {
       printer.debug(`Failure caught processing ${schema.name}`);
@@ -95,9 +38,23 @@ export function generateUiBuilderComponents(context: $TSContext, componentSchema
     )}`,
   );
   return componentResults;
-}
+};
 
-export function generateUiBuilderThemes(context: $TSContext, themeSchemas: any[]) {
+/**
+ * Returns instances of StudioTheme from theme schemas
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]): ({
+  resultType: string;
+  theme: StudioTheme;
+  schemaName?: undefined;
+  error?: undefined;
+} | {
+  resultType: string;
+  schemaName: string;
+  error: Error;
+  theme?: undefined;
+})[] => {
   const themeResults = themeSchemas.map(schema => {
     try {
       const theme = createUiBuilderTheme(context, schema);
@@ -113,4 +70,4 @@ export function generateUiBuilderThemes(context: $TSContext, themeSchemas: any[]
     `Generated ${themeResults.filter(result => result.resultType === 'SUCCESS').length} themes in ${getUiBuilderComponentsPath(context)}`,
   );
   return themeResults;
-}
+};

package/src/index.ts

@@ -1,16 +1,26 @@
 import { $TSContext } from 'amplify-cli-core';
 import path from 'path';
 
-export async function executeAmplifyCommand(context: $TSContext, cmd: string) {
+// TODO: remove dynamic require
+
+/**
+ * executes main amplify command into uibuilder
+ */
+export const executeAmplifyCommand = async (context: $TSContext, cmd: string): Promise<void> => {
   const commandsDirPath = path.normalize(path.join(__dirname, 'commands'));
-  const commandPath = path.join(commandsDirPath, cmd ? cmd : context.input.command);
+  const commandPath = path.join(commandsDirPath, cmd || context.input.command);
+  // eslint-disable-next-line import/no-dynamic-require, global-require, @typescript-eslint/no-var-requires
   const commandModule = require(commandPath);
   await commandModule.run(context);
-}
+};
 
-export async function handleAmplifyEvent(context: $TSContext, { event }: { event: string }) {
+/**
+ * runs event based command
+ */
+export const handleAmplifyEvent = async (context: $TSContext, { event }: { event: string }): Promise<void> => {
   const eventHandlersDirPath = path.normalize(path.join(__dirname, 'event-handlers'));
   const eventHandlerPath = path.join(eventHandlersDirPath, `handle-${event}`);
+  // eslint-disable-next-line import/no-dynamic-require, global-require, @typescript-eslint/no-var-requires
   const eventHandlerModule = require(eventHandlerPath);
   await eventHandlerModule.run(context);
-}
+};