@aws-amplify/amplify-util-uibuilder 1.7.0 → 1.8.0-ym-tagged-release.0

package/src/__tests__/cloneComponentsFromEnv.test.ts

@@ -9,7 +9,7 @@ jest.mock('../commands/utils/featureFlags', () => ({
   getTransformerVersion: jest.fn().mockReturnValue(2),
 }));
 jest.mock('../commands/utils/extractArgs');
-jest.mock('amplify-cli-core');
+jest.mock('@aws-amplify/amplify-cli-core');
 
 const mockedComponentExport = jest.fn((envName: string) => {
   if (envName === 'newEnvName') {

package/src/__tests__/generateComponents.test.ts

@@ -3,7 +3,7 @@ import * as utils from '../commands/utils';
 import { run } from '../commands/generateComponents';
 
 jest.mock('../commands/utils');
-jest.mock('amplify-cli-core');
+jest.mock('@aws-amplify/amplify-cli-core');
 const awsMock = aws as any;
 const utilsMock = utils as any;
 

package/src/__tests__/getAmplifyDataSchema.test.ts

@@ -1,10 +1,9 @@
 import { printer } from '@aws-amplify/amplify-prompts'; // eslint-disable-line import/no-extraneous-dependencies
-import { mocked } from 'ts-jest/utils';
 import { getAmplifyDataSchema } from '../commands/utils';
 
 jest.mock('@aws-amplify/amplify-prompts');
 
-const printerMock = mocked(printer);
+const printerMock = jest.mocked(printer);
 
 const sampleIntrospectionSchema = {
   version: 1,

package/src/__tests__/help.test.ts

@@ -1,4 +1,4 @@
-jest.mock('amplify-prompts');
+jest.mock('@aws-amplify/amplify-prompts');
 import { printer } from '@aws-amplify/amplify-prompts';
 import { run } from '../commands/help';
 printer.info = jest.fn();

package/src/__tests__/notifyMissingPackages.test.ts

@@ -1,9 +1,9 @@
 import * as printerDependency from '@aws-amplify/amplify-prompts';
-import * as JSONUtilitiesDependency from 'amplify-cli-core';
+import * as JSONUtilitiesDependency from '@aws-amplify/amplify-cli-core';
 import { notifyMissingPackages } from '../commands/utils/notifyMissingPackages';
-import { $TSContext } from 'amplify-cli-core';
-jest.mock('amplify-prompts');
-jest.mock('amplify-cli-core');
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
+jest.mock('@aws-amplify/amplify-prompts');
+jest.mock('@aws-amplify/amplify-cli-core');
 printerDependency.printer.info = jest.fn();
 printerDependency.printer.debug = jest.fn();
 printerDependency.printer.warn = jest.fn();
@@ -24,7 +24,7 @@ describe('should notify when packages are missing', () => {
         },
       },
     };
-    notifyMissingPackages(context as unknown as $TSContext);
+    notifyMissingPackages(context as unknown as $TSContext, false);
     expect(printerDependency.printer.debug).toBeCalledTimes(1);
   });
 
@@ -40,7 +40,7 @@ describe('should notify when packages are missing', () => {
         },
       },
     };
-    notifyMissingPackages(context as unknown as $TSContext);
+    notifyMissingPackages(context as unknown as $TSContext, false);
     expect(printerDependency.printer.debug).toBeCalledTimes(1);
   });
 
@@ -52,7 +52,7 @@ describe('should notify when packages are missing', () => {
         },
       },
     };
-    notifyMissingPackages(context as unknown as $TSContext);
+    notifyMissingPackages(context as unknown as $TSContext, true);
     expect(printerDependency.printer.warn).toBeCalledTimes(3);
   });
 
@@ -69,6 +69,18 @@ describe('should notify when packages are missing', () => {
       },
     };
     notifyMissingPackages(context as unknown as $TSContext);
+    expect(printerDependency.printer.warn).toBeCalledTimes(1);
+  });
+
+  it('notifies for all dependencies except storage if user is not using StorageManager', () => {
+    const context = {
+      input: {
+        options: {
+          localEnvFilePath: __dirname + '/mock.json',
+        },
+      },
+    };
+    notifyMissingPackages(context as unknown as $TSContext, false);
     expect(printerDependency.printer.warn).toBeCalledTimes(2);
   });
 });

package/src/__tests__/prePushHandler.test.ts

@@ -1,4 +1,4 @@
-// aws-sdk, amplify-cli-core, amplify-prompts are in package dependencies
+// aws-sdk, @aws-amplify/amplify-cli-core, amplify-prompts are in package dependencies
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
 import { Form } from 'aws-sdk/clients/amplifyuibuilder'; // eslint-disable-line import/no-extraneous-dependencies
 import { printer } from '@aws-amplify/amplify-prompts'; // eslint-disable-line import/no-extraneous-dependencies
@@ -6,7 +6,7 @@ import * as utils from '../commands/utils';
 import { prePushHandler } from '../utils/prePushHandler';
 
 jest.mock('../commands/utils');
-jest.mock('amplify-cli-core');
+jest.mock('@aws-amplify/amplify-cli-core');
 jest.mock('../commands/utils/featureFlags', () => ({
   getTransformerVersion: jest.fn().mockImplementation(() => 2),
 }));

package/src/__tests__/shouldRenderComponents.test.ts

@@ -1,12 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
 import { shouldRenderComponents } from '../commands/utils/shouldRenderComponents';
 
 const awsMock = aws as any;
 
-jest.mock('amplify-cli-core', () => ({
-  ...jest.requireActual('amplify-cli-core'),
+jest.mock('@aws-amplify/amplify-cli-core', () => ({
+  ...jest.requireActual('@aws-amplify/amplify-cli-core'),
   stateManager: {
     getProjectConfig: jest.fn().mockReturnValue({
       providers: ['awscloudformation'],
@@ -66,7 +66,7 @@ describe('should render components', () => {
   });
 
   it("doesn't work if provider is not awscloudformation", async () => {
-    jest.mock('amplify-cli-core', () => ({
+    jest.mock('@aws-amplify/amplify-cli-core', () => ({
       stateManager: {
         getProjectConfig: jest.fn().mockReturnValue({
           providers: [],
@@ -82,7 +82,7 @@ describe('should render components', () => {
   });
 
   it('should return false if frontend is ios', async () => {
-    jest.mock('amplify-cli-core', () => ({
+    jest.mock('@aws-amplify/amplify-cli-core', () => ({
       stateManager: {
         getProjectConfig: jest.fn().mockReturnValue({
           providers: [],
@@ -95,7 +95,7 @@ describe('should render components', () => {
   });
 
   it('should return false if frontend is vue', async () => {
-    jest.mock('amplify-cli-core', () => ({
+    jest.mock('@aws-amplify/amplify-cli-core', () => ({
       stateManager: {
         getProjectConfig: jest.fn().mockReturnValue({
           providers: [],

package/src/__tests__/storageManager.test.ts

@@ -0,0 +1,42 @@
+import { StudioSchema } from '@aws-amplify/codegen-ui';
+import { hasStorageField } from '../commands/utils';
+
+const formWithNoCustomization: StudioSchema = {
+  id: 'f-123456',
+  name: 'BlogCreateForm',
+  formActionType: 'create',
+  dataType: {
+    dataSourceType: 'DataStore',
+    dataTypeName: 'Blog',
+  },
+  fields: {},
+  sectionalElements: {},
+  style: {},
+  cta: {},
+};
+
+const formWithNoStorageField: StudioSchema = {
+  ...formWithNoCustomization,
+  dataType: { dataSourceType: 'Custom', dataTypeName: 'Blog' },
+  fields: {
+    name: { inputType: { type: 'TextField' } },
+  },
+};
+
+const formWithStorageField: StudioSchema = {
+  ...formWithNoCustomization,
+  dataType: { dataSourceType: 'Custom', dataTypeName: 'Blog' },
+  fields: {
+    name: { inputType: { type: 'StorageField' } },
+  },
+};
+
+describe('hasStorageManager', () => {
+  it('should return false for form with no StorageManager config', () => {
+    expect(hasStorageField(formWithNoStorageField)).toBe(false);
+  });
+
+  it('should return true for form with StorageManager config', () => {
+    expect(hasStorageField(formWithStorageField)).toBe(true);
+  });
+});

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -1,5 +1,5 @@
 /* eslint-disable spellcheck/spell-checker */
-import { AmplifyCategories, AmplifySupportedService, stateManager } from 'amplify-cli-core'; // eslint-disable-line import/no-extraneous-dependencies
+import { AmplifyCategories, AmplifySupportedService, stateManager } from '@aws-amplify/amplify-cli-core'; // eslint-disable-line import/no-extraneous-dependencies
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
 import {
   generateUiBuilderComponents,
@@ -13,8 +13,8 @@ import { AmplifyStudioClient } from '../clients';
 import * as createUiBuilderComponentDependency from '../commands/utils/codegenResources';
 import { exampleSchema } from './utils';
 
-jest.mock('amplify-cli-core', () => ({
-  ...jest.requireActual('amplify-cli-core'),
+jest.mock('@aws-amplify/amplify-cli-core', () => ({
+  ...jest.requireActual('@aws-amplify/amplify-cli-core'),
   FeatureFlags: {
     getBoolean: () => false,
     getNumber: () => 0,

package/src/__tests__/version.test.ts

@@ -1,6 +1,6 @@
 import { printer } from '@aws-amplify/amplify-prompts';
 import { run } from '../commands/version';
-jest.mock('amplify-prompts');
+jest.mock('@aws-amplify/amplify-prompts');
 printer.info = jest.fn();
 describe('can run version script', () => {
   it('runs version script', async () => {

package/src/clients/amplify-studio-client.ts

@@ -1,4 +1,4 @@
-import { $TSContext, CloudformationProviderFacade } from 'amplify-cli-core';
+import { $TSContext, CloudformationProviderFacade } from '@aws-amplify/amplify-cli-core';
 import type { ServiceConfigurationOptions } from 'aws-sdk/lib/service';
 import type { CreateComponentData, Component, Theme, Form } from 'aws-sdk/clients/amplifyuibuilder';
 import { AmplifyUIBuilder, AmplifyBackend } from 'aws-sdk';

package/src/commands/cloneComponentsFromEnv.ts

@@ -1,5 +1,5 @@
 import { printer } from '@aws-amplify/amplify-prompts';
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { extractArgs } from './utils';
 import { AmplifyStudioClient } from '../clients';
 

package/src/commands/generateComponents.ts

@@ -2,7 +2,7 @@
 import { StudioSchema } from '@aws-amplify/codegen-ui';
 import ora from 'ora';
 import { printer } from '@aws-amplify/amplify-prompts';
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { AmplifyStudioClient } from '../clients';
 import {
   notifyMissingPackages,
@@ -16,6 +16,8 @@ import {
   isStudioForm,
   isFormDetachedFromModel,
   deleteDetachedForms,
+  hasStorageField,
+  isFormSchema,
 } from './utils';
 
 /**
@@ -60,6 +62,7 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
     let hasSuccessfulForm = false;
     const failedResponseNames: string[] = [];
     const modelNames = dataSchema?.models ? new Set(Object.keys(dataSchema.models)) : new Set<string>();
+    let hasStorageManagerField = false;
 
     Object.entries(generatedResults).forEach(([key, results]) => {
       results.forEach((result) => {
@@ -67,6 +70,10 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
           successfulSchemas.push(result.schema);
           if (key === 'form') {
             hasSuccessfulForm = true;
+
+            if (!hasStorageManagerField && isFormSchema(result.schema) && hasStorageField(result.schema)) {
+              hasStorageManagerField = true;
+            }
           }
         } else {
           const failedSchema = result.schema;
@@ -112,7 +119,7 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
       );
     }
 
-    notifyMissingPackages(context);
+    notifyMissingPackages(context, hasStorageManagerField);
 
     await deleteDetachedForms(detachedForms, studioClient);
   } catch (e) {

package/src/commands/utils/codegenResources.ts

@@ -27,7 +27,7 @@ import {
   ReactThemeStudioTemplateRendererOptions,
 } from '@aws-amplify/codegen-ui-react';
 import { printer } from '@aws-amplify/amplify-prompts';
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 import { ModelIntrospectionSchema } from '@aws-amplify/appsync-modelgen-plugin';
 

package/src/commands/utils/environmentHelpers.ts

@@ -1,4 +1,4 @@
-import { $TSContext, stateManager } from 'amplify-cli-core';
+import { $TSContext, stateManager } from '@aws-amplify/amplify-cli-core';
 import { extractArgs } from './extractArgs';
 
 /**

package/src/commands/utils/extractArgs.ts

@@ -1,4 +1,4 @@
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 
 export const extractArgs = (context: $TSContext) => {
   if (!context.input.options) {

package/src/commands/utils/featureFlags.ts

@@ -1,5 +1,5 @@
 /* eslint-disable spellcheck/spell-checker */
-import { FeatureFlags, pathManager, stateManager } from 'amplify-cli-core';
+import { FeatureFlags, pathManager, stateManager } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 
 // This is copy-pasta from the category api until they can expose the method to plugins

package/src/commands/utils/getUiBuilderComponentsPath.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import fs from 'fs-extra';
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { extractArgs } from './extractArgs';
 
 /**

package/src/commands/utils/index.ts

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

package/src/commands/utils/notifyMissingPackages.ts

@@ -1,4 +1,4 @@
-import { pathManager, JSONUtilities, $TSContext, $TSAny } from 'amplify-cli-core';
+import { pathManager, JSONUtilities, $TSContext, $TSAny } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 import fs from 'fs-extra';
 import path from 'path';
@@ -7,13 +7,14 @@ import { RequiredDependency } from '@aws-amplify/codegen-ui';
 import { ReactRequiredDependencyProvider } from '@aws-amplify/codegen-ui-react';
 import { extractArgs } from './extractArgs';
 
-const getRequiredDependencies = (): RequiredDependency[] => new ReactRequiredDependencyProvider().getRequiredDependencies();
+const getRequiredDependencies = (hasStorageManagerField?: boolean): RequiredDependency[] =>
+  new ReactRequiredDependencyProvider().getRequiredDependencies(hasStorageManagerField);
 
 /**
  * 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 => {
+export const notifyMissingPackages = (context: $TSContext, hasStorageManagerField?: boolean): void => {
   const args = extractArgs(context);
   const localEnvFilePath = args.localEnvFilePath ?? pathManager.getLocalEnvFilePath();
   if (!fs.existsSync(localEnvFilePath)) {
@@ -27,7 +28,7 @@ export const notifyMissingPackages = (context: $TSContext): void => {
     return;
   }
   const packageJson = JSONUtilities.readJson(packageJsonPath) as { dependencies: { [key: string]: string } };
-  getRequiredDependencies().forEach((dependency: $TSAny) => {
+  getRequiredDependencies(hasStorageManagerField).forEach((dependency: $TSAny) => {
     const packageIsInstalled = Object.keys(packageJson.dependencies).includes(dependency.dependencyName);
     if (!packageIsInstalled) {
       printer.warn(

package/src/commands/utils/shouldRenderComponents.ts

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
-import { $TSContext, stateManager } from 'amplify-cli-core';
+import { $TSContext, stateManager } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { AmplifyStudioClient } from '../../clients';
 import { getAppId } from './environmentHelpers';

package/src/commands/utils/storageManager.ts

@@ -0,0 +1,17 @@
+import { StudioForm, StudioFormFieldConfig, StudioGenericFieldConfig, StudioSchema } from '@aws-amplify/codegen-ui';
+
+export const hasStorageField = (form: StudioForm): boolean => {
+  const result = Object.values(form.fields).some((field) => {
+    return isGenericFieldConfig(field) && field.inputType?.type === 'StorageField';
+  });
+
+  return result;
+};
+
+export const isFormSchema = (schema: StudioSchema): schema is StudioForm => {
+  return schema && Object.keys(schema).includes('fields');
+};
+
+export const isGenericFieldConfig = (config: StudioFormFieldConfig): config is StudioGenericFieldConfig => {
+  return !Object.keys(config).includes('excluded');
+};

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,5 +1,5 @@
 import { printer } from '@aws-amplify/amplify-prompts';
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import {
   StudioComponent,
   StudioTheme,

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

@@ -1,4 +1,4 @@
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { run as cloneComponentsFromEnv } from '../commands/cloneComponentsFromEnv';
 

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

@@ -1,4 +1,4 @@
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { run as generateComponents } from '../commands/generateComponents';
 

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

@@ -1,4 +1,4 @@
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { run as generateComponents } from '../commands/generateComponents';
 

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

@@ -1,4 +1,4 @@
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 import { prePushHandler } from '../utils/prePushHandler';
 

package/src/index.ts

@@ -1,4 +1,4 @@
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import path from 'path';
 
 // TODO: remove dynamic require

package/src/utils/prePushHandler.ts

@@ -1,4 +1,4 @@
-import { $TSContext } from 'amplify-cli-core';
+import { $TSContext } from '@aws-amplify/amplify-cli-core';
 import { printer } from '@aws-amplify/amplify-prompts';
 import AmplifyUIBuilder from 'aws-sdk/clients/amplifyuibuilder';
 import { AmplifyStudioClient } from '../clients';