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

package/src/commands/utils/shouldRenderComponents.ts

@@ -1,34 +1,46 @@
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
 import { $TSContext } from 'amplify-cli-core';
 import { printer } from 'amplify-prompts';
-export async function shouldRenderComponents(context: $TSContext) {
+import { AmplifyStudioClient } from '../../clients';
+import { getAppId } from './environmentHelpers';
+
+/**
+ * process to decide if we should render components
+ */
+export const shouldRenderComponents = async (context: $TSContext): Promise<boolean> => {
   if (process.env.FORCE_RENDER) {
     printer.debug('Forcing component render since environment variable flag is set.');
     return true;
   }
   if (context?.input?.options?.['no-codegen']) {
-    printer.debug('Not pulling components because --no-codegen flag is set');
+    printer.debug('Not pulling components because --no-codegen flag is set.');
     return false;
   }
 
   if (!context?.exeInfo?.projectConfig) {
-    printer.debug('Not pulling components because there is no projectConfig set for this project');
+    printer.debug('Not pulling components because there is no projectConfig set for this project.');
     return false;
   }
 
   if (!context.exeInfo.projectConfig.providers.includes('awscloudformation')) {
-    printer.debug('Not pulling components because there is no "awscloudformation" provider');
+    printer.debug('Not pulling components because there is no "awscloudformation" provider.');
     return false;
   }
 
   if (context.exeInfo.projectConfig.frontend !== 'javascript') {
-    printer.debug('Not pulling components because this project is not configured as a javascript frontend');
+    printer.debug('Not pulling components because this project is not configured as a javascript frontend.');
+    return false;
+  }
+
+  if (context.exeInfo.projectConfig.javascript.framework !== 'react') {
+    printer.debug('Not pulling components because this project is not configured with the "react" framework.');
     return false;
   }
 
-  if (context.exeInfo.projectConfig['javascript'].framework !== 'react') {
-    printer.debug('Not pulling components because this project is not configured with the "react" framework');
+  if (!(await AmplifyStudioClient.isAmplifyApp(context, getAppId(context)))) {
+    printer.debug('Not pulling components because this project is not Amplify Studio enabled.');
     return false;
   }
 
   return true;
-}
+};

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,30 +1,43 @@
 import { printer } from 'amplify-prompts';
 import { $TSContext } from 'amplify-cli-core';
 import {
-  StudioComponent, StudioTheme, GenericDataSchema,
+  StudioComponent, StudioTheme, GenericDataSchema, StudioForm, StudioSchema, checkIsSupportedAsForm,
 } from '@aws-amplify/codegen-ui';
-import { createUiBuilderComponent, createUiBuilderTheme } from './codegenResources';
+import {
+  createUiBuilderComponent,
+  createUiBuilderForm,
+  createUiBuilderTheme,
+  generateBaseForms,
+} from './codegenResources';
 import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 
+type CodegenResponse<T extends StudioSchema> =
+  | {
+      resultType: 'SUCCESS';
+      schema: T;
+      schemaName?: string;
+    }
+  | {
+      resultType: 'FAILURE';
+      schemaName: string;
+      error: Error;
+      schema?: T;
+    };
+
+// TODO: when types are updated in codegen-ui reference mappers here so the arguments accepted are not 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 => {
+export const generateUiBuilderComponents = (
+  context: $TSContext,
+  componentSchemas: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
+  dataSchema?: GenericDataSchema,
+): CodegenResponse<StudioComponent>[] => {
+  const componentResults = componentSchemas.map<CodegenResponse<StudioComponent>>(schema => {
     try {
       const component = createUiBuilderComponent(context, schema, dataSchema);
-      return { resultType: 'SUCCESS', component };
+      return { resultType: 'SUCCESS', schema: component };
     } catch (e) {
       printer.debug(`Failure caught processing ${schema.name}`);
       printer.debug(e);
@@ -44,21 +57,14 @@ export const generateUiBuilderComponents = (context: $TSContext, componentSchema
  * 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 => {
+export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]): CodegenResponse<StudioTheme>[] => {
+  if (themeSchemas.length === 0) {
+    return [generateDefaultTheme(context)];
+  }
+  const themeResults = themeSchemas.map<CodegenResponse<StudioTheme>>(schema => {
     try {
       const theme = createUiBuilderTheme(context, schema);
-      return { resultType: 'SUCCESS', theme };
+      return { resultType: 'SUCCESS', schema: theme };
     } catch (e) {
       printer.debug(`Failure caught processing ${schema.name}`);
       printer.debug(e);
@@ -71,3 +77,64 @@ export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]
   );
   return themeResults;
 };
+
+/**
+ * Generates the defaultTheme in the user's project that's exported from @aws-amplify/codegen-ui-react
+ */
+const generateDefaultTheme = (context: $TSContext): CodegenResponse<StudioTheme> => {
+  try {
+    const theme = createUiBuilderTheme(context, { name: 'studioTheme', values: [] }, { renderDefaultTheme: true });
+    printer.debug(
+      `Generated default theme in ${getUiBuilderComponentsPath(context)}`,
+    );
+    return { resultType: 'SUCCESS', schema: theme };
+  } catch (e) {
+    printer.debug(`Failure caught rendering default theme`);
+    printer.debug(e);
+    return { resultType: 'FAILURE', schemaName: 'studioTheme', error: e };
+  }
+};
+
+/**
+ * Returns instances of StudioForm from form schemas
+ */
+export const generateUiBuilderForms = (
+  context: $TSContext,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formSchemas: any[],
+  dataSchema?: GenericDataSchema,
+  autoGenerateForms?: boolean,
+): CodegenResponse<StudioForm>[] => {
+  const modelMap: { [model: string]: Set<'create' | 'update'> } = {};
+  if (dataSchema?.dataSourceType === 'DataStore' && autoGenerateForms) {
+    Object.entries(dataSchema.models).forEach(([name, model]) => {
+      if (checkIsSupportedAsForm(model) && !model.isJoinTable) {
+        modelMap[name] = new Set(['create', 'update']);
+      }
+    });
+  }
+  const codegenForm = (schema: StudioForm): CodegenResponse<StudioForm> => {
+    try {
+      const form = createUiBuilderForm(context, schema, dataSchema);
+      return { resultType: 'SUCCESS', schema: form };
+    } catch (e) {
+      printer.debug(`Failure caught processing ${schema.name}`);
+      printer.debug(e);
+      return { resultType: 'FAILURE', schemaName: schema.name, error: e };
+    }
+  };
+  const formResults = formSchemas.map((schema: StudioForm) => {
+    if (schema?.dataType && schema.dataType?.dataSourceType === 'DataStore') {
+      modelMap[schema.dataType.dataTypeName]?.delete(schema.formActionType);
+    }
+    return codegenForm(schema);
+  });
+
+  // append remaining models
+  formResults.push(...generateBaseForms(modelMap).map(codegenForm));
+
+  printer.debug(
+    `Generated ${formResults.filter(result => result.resultType === 'SUCCESS').length} forms in ${getUiBuilderComponentsPath(context)}`,
+  );
+  return formResults;
+};

package/src/commands/version.ts

@@ -1,6 +1,9 @@
 import { printer } from 'amplify-prompts';
 import path from 'path';
 
-export async function run() {
+/**
+ * runs version command
+ */
+export const run = async (): Promise<void> => {
   printer.info((await import(path.join(__dirname, '..', '..', 'package.json'))).version);
-}
+};

package/src/event-handlers/handle-PostEnvAdd.ts

@@ -1,14 +1,16 @@
 import { $TSContext } from 'amplify-cli-core';
 import { printer } from 'amplify-prompts';
+import { run as cloneComponentsFromEnv } from '../commands/cloneComponentsFromEnv';
 
-export async function run(context: $TSContext) {
+/**
+ *
+ * runs after adding an environment
+ */
+export const run = async (context: $TSContext): Promise<void> => {
   try {
-    await context.amplify.invokePluginMethod(context, 'ui-builder', undefined, 'executeAmplifyCommand', [
-      context,
-      'cloneComponentsFromEnv',
-    ]);
+    await cloneComponentsFromEnv(context);
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
     printer.debug(e);
   }
-}
+};

package/src/event-handlers/handle-PostPull.ts

@@ -1,11 +1,15 @@
 import { $TSContext } from 'amplify-cli-core';
 import { printer } from 'amplify-prompts';
+import { run as generateComponents } from '../commands/generateComponents';
 
-export async function run(context: $TSContext) {
+/**
+ * The code to run after a pull.
+ */
+export const run = async (context: $TSContext): Promise<void> => {
   try {
-    await context.amplify.invokePluginMethod(context, 'ui-builder', undefined, 'executeAmplifyCommand', [context, 'generateComponents']);
+    await generateComponents(context);
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
     printer.debug(e);
   }
-}
+};

package/src/event-handlers/handle-PostPush.ts

@@ -0,0 +1,15 @@
+import { $TSContext } from 'amplify-cli-core';
+import { printer } from 'amplify-prompts';
+import { run as generateComponents } from '../commands/generateComponents';
+
+/**
+ * The code to run after a push
+ */
+export const run = async (context: $TSContext): Promise<void> => {
+  try {
+    await generateComponents(context);
+  } catch (e) {
+    // Swallow all errors from the uibuilder plugin
+    printer.debug(e);
+  }
+};