@aws-amplify/amplify-util-uibuilder 1.5.0-binary-file-size.0 → 1.5.0-studio-forms.0

package/src/commands/utils/codegenResources.ts

@@ -10,14 +10,19 @@ import {
   RenderTextComponentResponse,
   GenericDataSchema,
   getGenericFromDataStore,
+  StudioForm,
+  StudioSchema,
 } from '@aws-amplify/codegen-ui';
 import {
   AmplifyRenderer,
+  AmplifyFormRenderer,
   ReactThemeStudioTemplateRenderer,
   ReactIndexStudioTemplateRenderer,
   ModuleKind,
   ScriptTarget,
   ScriptKind,
+  UtilTemplateType,
+  ReactUtilsStudioTemplateRenderer,
 } from '@aws-amplify/codegen-ui-react';
 import { printer } from 'amplify-prompts';
 import {
@@ -83,15 +88,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 +140,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 +198,9 @@ export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas:
 export const getAmplifyDataSchema = async (
   studioClient: AmplifyStudioClient,
 ): Promise<GenericDataSchema | undefined> => {
+  if (!studioClient.isSupportedGraphQL) {
+    return undefined;
+  }
   try {
     const meta = stateManager.getMeta();
     const resourceName = Object.entries(meta[AmplifyCategories.API]).find(
@@ -138,3 +220,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,61 @@
+/* eslint-disable spellcheck/spell-checker */
+import {
+  $TSContext, FeatureFlags, pathManager, stateManager,
+} from 'amplify-cli-core';
+
+// 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 (context: $TSContext): Promise<number> => {
+  if (useExperimentalPipelinedTransformerFF() === false) {
+    return 1;
+  }
+
+  if (isLegacyFeatureFlagConfiguration()) {
+    await migrateToTransformerVersionFeatureFlag(context);
+  }
+
+  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 (context: $TSContext): 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
+  context.print.warning(
+    `\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);
   }
 

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,30 +1,41 @@
 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;
+    };
+
 /**
  * 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 +55,11 @@ 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>[] => {
+  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 +72,47 @@ export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]
   );
   return themeResults;
 };
+
+/**
+ * Returns instances of StudioForm from form schemas
+ */
+export const generateUiBuilderForms = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: $TSContext,
+  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);
+  }
+};