feat(amplify-util-uibuilder): amplify js backwards compatibility (#13288)

letsbelopez · David Lopez · web-flow · commit 2db3e181cf06 · 2023-10-02T09:22:06.000-07:00
* feat(amplify-util-uibuilder): add dependencies to codegen job for amplify js backwards compatibility

* feat: force minor version bump in cli-npm package

* chore: fix typos

* chore: increase linux arm compressed threshold

---------

Co-authored-by: David Lopez &lt;lopezbnd@amazon.com&gt;
diff --git a/.circleci/local_publish_helpers_codebuild.sh b/.circleci/local_publish_helpers_codebuild.sh
@@ -142,7 +142,7 @@ function verifyPkgCli {
     verifySinglePkg "amplify-pkg-linux-x64" "amplify-pkg-linux-x64.tgz" $((750 * 1024 * 1024))
     verifySinglePkg "amplify-pkg-macos-x64" "amplify-pkg-macos-x64.tgz" $((750 * 1024 * 1024))
     verifySinglePkg "amplify-pkg-win-x64.exe" "amplify-pkg-win-x64.tgz" $((750 * 1024 * 1024))
-    verifySinglePkg "amplify-pkg-linux-arm64" "amplify-pkg-linux-arm64.tgz" $((600 * 1024 * 1024))
+    verifySinglePkg "amplify-pkg-linux-arm64" "amplify-pkg-linux-arm64.tgz" $((660 * 1024 * 1024))
 }
 
 function unsetNpmRegistryUrl {
diff --git a/package.json b/package.json
@@ -160,7 +160,7 @@
   },
   "packageManager": "yarn@3.5.0",
   "resolutions": {
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "cross-fetch": "^2.2.6",
     "glob-parent": "^6.0.2",
     "got": "^11.8.5",
diff --git a/packages/amplify-appsync-simulator/package.json b/packages/amplify-appsync-simulator/package.json
@@ -35,7 +35,7 @@
     "@graphql-tools/schema": "^8.3.1",
     "@graphql-tools/utils": "^8.5.1",
     "amplify-velocity-template": "1.4.12",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "chalk": "^4.1.1",
     "cors": "^2.8.5",
     "dataloader": "^2.0.0",
diff --git a/packages/amplify-category-auth/package.json b/packages/amplify-category-auth/package.json
@@ -37,7 +37,7 @@
     "amplify-headless-interface": "1.17.4",
     "amplify-util-headless-input": "1.9.15",
     "aws-cdk-lib": "~2.80.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "axios": "^0.26.0",
     "chalk": "^4.1.1",
     "change-case": "^4.1.1",
diff --git a/packages/amplify-category-function/package.json b/packages/amplify-category-function/package.json
@@ -31,7 +31,7 @@
     "@aws-amplify/amplify-function-plugin-interface": "1.11.0",
     "@aws-amplify/amplify-prompts": "2.8.4",
     "archiver": "^5.3.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "chalk": "^4.1.1",
     "cloudform-types": "^4.2.0",
     "enquirer": "^2.3.6",
diff --git a/packages/amplify-category-geo/package.json b/packages/amplify-category-geo/package.json
@@ -32,7 +32,7 @@
     "amplify-headless-interface": "1.17.4",
     "amplify-util-headless-input": "1.9.15",
     "aws-cdk-lib": "~2.80.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "constructs": "^10.0.5",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.21",
diff --git a/packages/amplify-category-notifications/package.json b/packages/amplify-category-notifications/package.json
@@ -30,7 +30,7 @@
     "@aws-amplify/amplify-environment-parameters": "1.8.2",
     "@aws-amplify/amplify-prompts": "2.8.4",
     "@aws-amplify/amplify-provider-awscloudformation": "8.6.1",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "chalk": "^4.1.1",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.21",
diff --git a/packages/amplify-category-predictions/package.json b/packages/amplify-category-predictions/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@aws-amplify/amplify-cli-core": "4.2.7",
     "@aws-amplify/amplify-prompts": "2.8.4",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "chalk": "^4.1.1",
     "fs-extra": "^8.1.0",
     "uuid": "^8.3.2"
diff --git a/packages/amplify-category-storage/package.json b/packages/amplify-category-storage/package.json
@@ -35,7 +35,7 @@
     "amplify-headless-interface": "1.17.4",
     "amplify-util-headless-input": "1.9.15",
     "aws-cdk-lib": "~2.80.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "chalk": "^4.1.1",
     "constructs": "^10.0.5",
     "enquirer": "^2.3.6",
diff --git a/packages/amplify-cli-npm/index.ts b/packages/amplify-cli-npm/index.ts
@@ -16,4 +16,4 @@ export const install = async (): Promise<void> => {
   return binary.install();
 };
 
-// force version bump to 12.5.0
+// force version bump to 12.6.0
diff --git a/packages/amplify-cli/package.json b/packages/amplify-cli/package.json
@@ -74,7 +74,7 @@
     "amplify-nodejs-function-runtime-provider": "2.5.7",
     "amplify-python-function-runtime-provider": "2.4.30",
     "aws-cdk-lib": "~2.80.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "chalk": "^4.1.1",
     "ci-info": "^3.8.0",
     "cli-table3": "^0.6.0",
diff --git a/packages/amplify-console-integration-tests/package.json b/packages/amplify-console-integration-tests/package.json
@@ -24,7 +24,7 @@
     "@aws-amplify/amplify-cli-core": "4.2.7",
     "@aws-amplify/amplify-e2e-core": "5.3.2",
     "@types/ini": "^1.3.30",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "dotenv": "^8.2.0",
     "execa": "^5.1.1",
     "fs-extra": "^8.1.0",
diff --git a/packages/amplify-dynamodb-simulator/package.json b/packages/amplify-dynamodb-simulator/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@aws-amplify/amplify-cli-core": "4.2.7",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "detect-port": "^1.3.0",
     "execa": "^5.1.1",
     "fs-extra": "^8.1.0",
diff --git a/packages/amplify-e2e-core/package.json b/packages/amplify-e2e-core/package.json
@@ -28,7 +28,7 @@
     "amplify-headless-interface": "1.17.4",
     "aws-amplify": "^4.2.8",
     "aws-appsync": "^4.1.1",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "chalk": "^4.1.1",
     "dotenv": "^8.2.0",
     "execa": "^5.1.1",
diff --git a/packages/amplify-e2e-tests/package.json b/packages/amplify-e2e-tests/package.json
@@ -42,7 +42,7 @@
     "aws-amplify": "^4.2.8",
     "aws-appsync": "^4.1.1",
     "aws-cdk-lib": "~2.80.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "axios": "^0.26.0",
     "constructs": "^10.0.5",
     "dotenv": "^8.2.0",
diff --git a/packages/amplify-environment-parameters/package.json b/packages/amplify-environment-parameters/package.json
@@ -32,7 +32,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "mkdirp": "^1.0.4",
     "ts-json-schema-generator": "~1.1.2"
   },
diff --git a/packages/amplify-opensearch-simulator/package.json b/packages/amplify-opensearch-simulator/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@aws-amplify/amplify-cli-core": "4.2.7",
     "@aws-amplify/amplify-prompts": "2.8.4",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "detect-port": "^1.3.0",
     "execa": "^5.1.1",
     "fs-extra": "^8.1.0",
diff --git a/packages/amplify-provider-awscloudformation/package.json b/packages/amplify-provider-awscloudformation/package.json
@@ -40,7 +40,7 @@
     "amplify-codegen": "^4.6.2",
     "archiver": "^5.3.0",
     "aws-cdk-lib": "~2.80.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "bottleneck": "2.19.5",
     "chalk": "^4.1.1",
     "cloudform-types": "^4.2.0",
diff --git a/packages/amplify-util-mock/package.json b/packages/amplify-util-mock/package.json
@@ -78,7 +78,7 @@
     "amplify-nodejs-function-runtime-provider": "2.5.7",
     "aws-appsync": "^4.1.4",
     "aws-cdk-lib": "~2.80.0",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "aws-sdk-mock": "^5.8.0",
     "axios": "^0.26.0",
     "constructs": "^10.0.5",
diff --git a/packages/amplify-util-uibuilder/package.json b/packages/amplify-util-uibuilder/package.json
@@ -20,7 +20,7 @@
     "@aws-amplify/codegen-ui": "2.14.2",
     "@aws-amplify/codegen-ui-react": "2.14.2",
     "amplify-codegen": "^4.6.2",
-    "aws-sdk": "^2.1426.0",
+    "aws-sdk": "^2.1464.0",
     "fs-extra": "^8.1.0",
     "node-fetch": "^2.6.7",
     "ora": "^4.0.3",
diff --git a/packages/amplify-util-uibuilder/src/__tests__/generateComponents.test.ts b/packages/amplify-util-uibuilder/src/__tests__/generateComponents.test.ts
@@ -1,9 +1,9 @@
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
+import { getCodegenConfig } from 'amplify-codegen';
+import { isDataStoreEnabled } from '@aws-amplify/amplify-category-api';
 import * as utils from '../commands/utils';
 import { run } from '../commands/generateComponents';
-import { isDataStoreEnabled } from '@aws-amplify/amplify-category-api';
 import { getTransformerVersion } from '../commands/utils/featureFlags';
-import { getCodegenConfig } from 'amplify-codegen';
 import { getUiBuilderComponentsPath } from '../commands/utils/getUiBuilderComponentsPath';
 
 jest.mock('../commands/utils');
@@ -40,6 +40,10 @@ utilsMock.extractUIComponents = jest.fn().mockReturnValue(undefined);
 utilsMock.waitForSucceededJob = jest
   .fn()
   .mockReturnValue({ asset: { downloadUrl: 'amazon.com' }, statusMessage: `{\"codegenErrors\": [{\"schemaName\": \"BlogUpdateForm\"}]}` });
+utilsMock.parsePackageJsonFile = jest.fn().mockReturnValue({ dependencies: {} });
+utilsMock.getStartCodegenJobDependencies = jest
+  .fn()
+  .mockReturnValue({ '@aws-amplify/ui-react': '4.6.0', 'aws-amplify': '^5.0.2', '@aws-amplify/ui-react-storage': '^1.2.0' });
 
 jest.mock('../commands/utils/featureFlags', () => ({
   getTransformerVersion: jest.fn().mockReturnValue(2),
@@ -312,6 +316,28 @@ describe('can generate components', () => {
       });
     });
 
+    it('should include dependencies', async () => {
+      isDataStoreEnabledMocked.mockResolvedValue(false);
+      getMetadataPromise.mockReturnValue({
+        features: {
+          ...defaultStudioFeatureFlags,
+          isGraphQLEnabled: 'true',
+        },
+      });
+      await run(context, 'PostPull');
+      expect(mockStartCodegenJob).toHaveBeenCalledWith({
+        appId: 'testAppId',
+        environmentName: 'testEnvName',
+        codegenJobToCreate: expect.objectContaining({
+          renderConfig: {
+            react: expect.objectContaining({
+              dependencies: { '@aws-amplify/ui-react': '4.6.0', 'aws-amplify': '^5.0.2', '@aws-amplify/ui-react-storage': '^1.2.0' },
+            }),
+          },
+        }),
+      });
+    });
+
     it('should inclue noApi configuration when dataStore is disabled and no valid GraphQL Api', async () => {
       isDataStoreEnabledMocked.mockResolvedValue(false);
       getMetadataPromise.mockReturnValue({
diff --git a/packages/amplify-util-uibuilder/src/__tests__/notifyMissingPackages.test.ts b/packages/amplify-util-uibuilder/src/__tests__/notifyMissingPackages.test.ts
@@ -1,19 +1,37 @@
 import * as printerDependency from '@aws-amplify/amplify-prompts';
 import * as JSONUtilitiesDependency from '@aws-amplify/amplify-cli-core';
-import { notifyMissingPackages } from '../commands/utils/notifyMissingPackages';
+import { getStartCodegenJobDependencies, notifyMissingPackages } from '../commands/utils/notifyMissingPackages';
 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();
 
+const dependencies = [
+  {
+    name: '@aws-amplify/ui-react',
+    supportedVersion: '>=4.6.0  <6.0.0',
+    reason: 'Required to leverage Amplify UI primitives, and Amplify Studio component functions.',
+  },
+  {
+    name: 'aws-amplify',
+    supportedVersion: '^5.0.2',
+    reason: 'Required to leverage DataStore.',
+  },
+  {
+    name: '@aws-amplify/ui-react-storage',
+    supportedVersion: '^1.1.0',
+    reason: 'Required to leverage StorageManager.',
+  },
+];
+
 describe('should notify when packages are missing', () => {
   beforeEach(() => {
     jest.resetAllMocks();
     JSONUtilitiesDependency.JSONUtilities.readJson = jest.fn().mockImplementation(() => ({
       projectPath: __dirname,
-      dependencies: [],
+      dependencies: {},
     }));
   });
   it('skips notification if localEnv path cannot be determined', async () => {
@@ -25,13 +43,13 @@ describe('should notify when packages are missing', () => {
       },
     };
     notifyMissingPackages(context as unknown as $TSContext, false);
-    expect(printerDependency.printer.debug).toBeCalledTimes(1);
+    expect(printerDependency.printer.debug).toBeCalledTimes(2);
   });
 
   it('skips notification if package.json cannot be determined', async () => {
     JSONUtilitiesDependency.JSONUtilities.readJson = jest.fn().mockImplementation(() => ({
       projectPath: 'asdf',
-      dependencies: [],
+      dependencies: {},
     }));
     const context = {
       input: {
@@ -41,7 +59,7 @@ describe('should notify when packages are missing', () => {
       },
     };
     notifyMissingPackages(context as unknown as $TSContext, false);
-    expect(printerDependency.printer.debug).toBeCalledTimes(1);
+    expect(printerDependency.printer.debug).toBeCalledTimes(2);
   });
 
   it('notifies for all missing dependencies', async () => {
@@ -52,7 +70,7 @@ describe('should notify when packages are missing', () => {
         },
       },
     };
-    notifyMissingPackages(context as unknown as $TSContext, true);
+    notifyMissingPackages(context as unknown as $TSContext, true, dependencies);
     expect(printerDependency.printer.warn).toBeCalledTimes(3);
   });
 
@@ -68,7 +86,7 @@ describe('should notify when packages are missing', () => {
         },
       },
     };
-    notifyMissingPackages(context as unknown as $TSContext);
+    notifyMissingPackages(context as unknown as $TSContext, false, dependencies);
     expect(printerDependency.printer.warn).toBeCalledTimes(1);
   });
 
@@ -80,7 +98,17 @@ describe('should notify when packages are missing', () => {
         },
       },
     };
-    notifyMissingPackages(context as unknown as $TSContext, false);
+    notifyMissingPackages(context as unknown as $TSContext, false, dependencies);
     expect(printerDependency.printer.warn).toBeCalledTimes(2);
   });
+
+  it('should return required dependencies from package.json', () => {
+    const packageJsonDependencies = {
+      '@aws-amplify/ui-react': '4.6.0',
+      'aws-amplify': '^5.0.2',
+      '@aws-amplify/ui-react-storage': '^1.2.0',
+    };
+    const deps = getStartCodegenJobDependencies({ dependencies: { ...packageJsonDependencies, 'random-dependency': '1.0.0' } });
+    expect(deps).toMatchObject(packageJsonDependencies);
+  });
 });
diff --git a/packages/amplify-util-uibuilder/src/commands/generateComponents.ts b/packages/amplify-util-uibuilder/src/commands/generateComponents.ts
@@ -13,6 +13,8 @@ import {
   mapGenericDataSchemaToCodegen,
   waitForSucceededJob,
   extractUIComponents,
+  parsePackageJsonFile,
+  getStartCodegenJobDependencies,
 } from './utils';
 import { getUiBuilderComponentsPath } from './utils/getUiBuilderComponentsPath';
 import { AmplifyUIBuilder } from 'aws-sdk';
@@ -51,6 +53,11 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
 
     const genericDataSchema = dataSchema ? mapGenericDataSchemaToCodegen(dataSchema) : undefined;
 
+    const packageJsonFile = parsePackageJsonFile(context);
+    let startCodegenJobDependencies: { [key: string]: string } = {};
+    if (packageJsonFile) {
+      startCodegenJobDependencies = getStartCodegenJobDependencies(packageJsonFile);
+    }
     const job: AmplifyUIBuilder.StartCodegenJobData = {
       renderConfig: {
         react: {
@@ -59,6 +66,7 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
           script: 'jsx',
           renderTypeDeclarations: true,
           apiConfiguration,
+          dependencies: startCodegenJobDependencies,
         } as AmplifyUIBuilder.ReactStartCodegenJobData,
       },
       autoGenerateForms: studioClient.metadata.autoGenerateForms && studioClient.isGraphQLSupported && hasDataAPI,
@@ -115,7 +123,7 @@ export const run = async (context: $TSContext, eventType: 'PostPush' | 'PostPull
       );
     }
 
-    notifyMissingPackages(context, hasStorageManagerField);
+    notifyMissingPackages(context, hasStorageManagerField, finishedJob.dependencies);
 
     await deleteDetachedForms(detachedForms, studioClient);
   } catch (e) {
diff --git a/packages/amplify-util-uibuilder/src/commands/utils/notifyMissingPackages.ts b/packages/amplify-util-uibuilder/src/commands/utils/notifyMissingPackages.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -142,7 +142,7 @@ function verifyPkgCli {`
`142`	`142`	`verifySinglePkg "amplify-pkg-linux-x64" "amplify-pkg-linux-x64.tgz" $((750 * 1024 * 1024))`
`143`	`143`	`verifySinglePkg "amplify-pkg-macos-x64" "amplify-pkg-macos-x64.tgz" $((750 * 1024 * 1024))`
`144`	`144`	`verifySinglePkg "amplify-pkg-win-x64.exe" "amplify-pkg-win-x64.tgz" $((750 * 1024 * 1024))`
`145`		`- verifySinglePkg "amplify-pkg-linux-arm64" "amplify-pkg-linux-arm64.tgz" $((600 * 1024 * 1024))`
	`145`	`+ verifySinglePkg "amplify-pkg-linux-arm64" "amplify-pkg-linux-arm64.tgz" $((660 * 1024 * 1024))`
`146`	`146`	`}`
`147`	`147`
`148`	`148`	`function unsetNpmRegistryUrl {`