@aws-amplify/amplify-util-uibuilder 1.6.2 → 1.6.3-graphql15.0

package/src/commands/utils/detachedFormCleanup.ts

@@ -0,0 +1,58 @@
+import { StudioForm, StudioSchema } from '@aws-amplify/codegen-ui';
+import { Form } from 'aws-sdk/clients/amplifyuibuilder';
+import { AmplifyStudioClient } from '../../clients';
+import { printer } from 'amplify-prompts';
+import asyncPool from 'tiny-async-pool';
+
+/**
+ * Does the form's reference DataStore type exist in the list of models
+ */
+export const isFormDetachedFromModel = (schema: StudioForm | Form, models: Set<string>): boolean => {
+  if (schema.dataType.dataSourceType === 'DataStore' && !models.has(schema.dataType.dataTypeName)) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * A form schema will be customized if fields, style, sectionalElements objects aren't empty
+ * @param schema The schema to test
+ * @returns boolean
+ */
+export const isFormSchemaCustomized = (schema: StudioForm | Form): boolean => {
+  const { fields, style, sectionalElements } = schema;
+  // Fields and sectionalElements just need an empty check
+  if (!isEmpty({ ...fields, ...sectionalElements })) {
+    return true;
+  }
+
+  // Check style
+  // If not empty, at least one style must be defined
+  return Object.values(style).some(styleConfig => styleConfig !== undefined);
+};
+
+/**
+ * Is the schema a StudioForm
+ */
+export const isStudioForm = (schema: StudioSchema | undefined): schema is StudioForm => {
+  if (!schema) return false;
+  return 'formActionType' in schema;
+};
+
+export const deleteDetachedForms = async (detachedForms: {id: string, name: string}[], studioClient: AmplifyStudioClient) => {
+  const deleteForm = async ({id, name}: {id: string, name: string}) => {
+    try {
+      // Try to delete the form but don't stop any other operations if it fails
+      await studioClient.deleteForm(id);
+      return {status: 'SUCCESS', message: `Deleted detached form ${name}`};
+    } catch (error) {
+      return {status: 'FAIL', message: `Failed to delete detached form ${name}`}
+    }
+  };
+  for await (const status of asyncPool(5, detachedForms, deleteForm)) {
+    printer.debug(status.message);
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isEmpty = (obj?: any): boolean => Object.keys(obj).length === 0;

package/src/commands/utils/index.ts

@@ -5,3 +5,4 @@ export * from './getUiBuilderComponentsPath';
 export * from './notifyMissingPackages';
 export * from './shouldRenderComponents';
 export * from './syncAmplifyUiBuilderComponents';
+export * from './detachedFormCleanup';

package/src/commands/utils/notifyMissingPackages.ts

@@ -33,11 +33,11 @@ export const notifyMissingPackages = (context: $TSContext): void => {
     const packageIsInstalled = Object.keys(packageJson.dependencies).includes(dependency.dependencyName);
     if (!packageIsInstalled) {
       printer.warn(
-        `UIBuilder components required "${dependency.dependencyName}" that is not in your package.json. Run \`npm install "${dependency.dependencyName}@${dependency.supportedSemVerPattern}"\`. ${dependency.reason}`,
+        `UIBuilder components require "${dependency.dependencyName}" that is not in your package.json. Run \`npm install "${dependency.dependencyName}@${dependency.supportedSemVerPattern}"\`. ${dependency.reason}`,
       );
     } else if (!rangeSubset(packageJson.dependencies[dependency.dependencyName], dependency.supportedSemVerPattern)) {
       printer.warn(
-        `UIBuilder components requires version "${dependency.supportedSemVerPattern}" of "${
+        `UIBuilder components require version "${dependency.supportedSemVerPattern}" of "${
           dependency.dependencyName
         }". You currently are on version "${packageJson.dependencies[dependency.dependencyName]}". Run \`npm install "${
           dependency.dependencyName

package/src/commands/utils/shouldRenderComponents.ts

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

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,3 +1,4 @@
+// es-lint-disable-file spellcheck/spell-checker
 import { printer } from 'amplify-prompts';
 import { $TSContext } from 'amplify-cli-core';
 import {
@@ -120,7 +121,9 @@ export const generateUiBuilderForms = (
     } catch (e) {
       printer.debug(`Failure caught processing ${schema.name}`);
       printer.debug(e);
-      return { resultType: 'FAILURE', schemaName: schema.name, error: e };
+      return {
+        resultType: 'FAILURE', schemaName: schema.name, schema, error: e,
+      };
     }
   };
   const formResults = formSchemas.map((schema: StudioForm) => {

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

@@ -7,7 +7,7 @@ import { run as generateComponents } from '../commands/generateComponents';
  */
 export const run = async (context: $TSContext): Promise<void> => {
   try {
-    await generateComponents(context);
+    await generateComponents(context, 'PostPull');
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
     printer.debug(e);

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

@@ -7,7 +7,7 @@ import { run as generateComponents } from '../commands/generateComponents';
  */
 export const run = async (context: $TSContext): Promise<void> => {
   try {
-    await generateComponents(context);
+    await generateComponents(context, 'PostPush');
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
     printer.debug(e);

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

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

package/src/utils/prePushHandler.ts

@@ -0,0 +1,55 @@
+import { $TSContext } from 'amplify-cli-core';
+import type { Schema } from '@aws-amplify/datastore';
+import { printer } from 'amplify-prompts';
+import AmplifyUIBuilder from 'aws-sdk/clients/amplifyuibuilder';
+import { AmplifyStudioClient } from '../clients';
+import { isFormDetachedFromModel, isFormSchemaCustomized, shouldRenderComponents } from '../commands/utils';
+
+/**
+ * Handles showing a warning for detached forms pre-push.
+ */
+export const prePushHandler = async (context: $TSContext): Promise<void> => {
+  if (!(await shouldRenderComponents(context))) {
+    return;
+  }
+  try {
+    const studioClient = await AmplifyStudioClient.setClientInfo(context);
+    const [formSchemas, localSchema] = await Promise.all<[Promise<{
+      entities: AmplifyUIBuilder.Form[];
+    }>, Promise<Schema>]>([
+      studioClient.listForms(),
+      context.amplify.invokePluginMethod(
+        context,
+        'codegen',
+        undefined,
+        'getModelIntrospection',
+        [context],
+      ),
+    ]);
+
+    if (!localSchema) {
+      printer.debug('Local schema not found');
+      return;
+    }
+    printDetachedFormsWarning(formSchemas, localSchema);
+  } catch (error) {
+    printer.debug(error);
+  }
+};
+
+const printDetachedFormsWarning = (formSchemas: { entities: AmplifyUIBuilder.Form[] }, localSchema: Schema): void => {
+  const modelNames = new Set(Object.keys(localSchema.models));
+  const detachedCustomForms: string[] = [];
+
+  formSchemas.entities.forEach(form => {
+    // Only show warnings for schema's that have customization, otherwise it's the same as
+    // an autogenerated form.
+    if (isFormDetachedFromModel(form, modelNames) && isFormSchemaCustomized(form)) {
+      detachedCustomForms.push(form.name);
+    }
+  });
+
+  if (detachedCustomForms.length > 0) {
+    printer.warn(`The following form${detachedCustomForms.length === 1 ? '' : 's'} will no longer be available because the connected data model no longer exists: ${detachedCustomForms.join(', ')}`);
+  }
+};