feat: move amplify js v6 to latest

.github/workflows/canaries.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Install test app dependencies
         working-directory: e2e-test-app
         run: |
-          npm i aws-amplify @aws-amplify/ui-react
+          npm i aws-amplify@^5.0.0 @aws-amplify/ui-react@^5.0.0
           npm i --save-dev cypress
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1
@@ -110,7 +110,7 @@ jobs:
       - name: Install test app dependencies
         working-directory: e2e-test-app
         run: |
-          npm i aws-amplify @aws-amplify/ui-react
+          npm i aws-amplify@^5.0.0 @aws-amplify/ui-react@^5.0.0
           npm i --save-dev cypress
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1

.github/workflows/check.yml

@@ -12,7 +12,7 @@ permissions:
   contents: read # This is required for actions/checkout
 
 jobs:
-  amplify-cli-tests:
+  amplify-cli-tests-v5:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Studio Codegen
@@ -59,7 +59,7 @@ jobs:
       - name: Install test app dependencies
         working-directory: e2e-test-app
         run: |
-          npm i aws-amplify @aws-amplify/ui-react
+          npm i aws-amplify@^5.0.0 @aws-amplify/ui-react@^5.0.0
           npm i --save-dev cypress
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1
@@ -105,6 +105,99 @@ jobs:
           name: cypress-videos
           path: /home/runner/work/amplify-codegen-ui/amplify-codegen-ui/e2e-test-app/cypress/videos
 
+  amplify-cli-tests-v6:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Studio Codegen
+        uses: actions/checkout@v2
+        with:
+          path: amplify-codegen-ui
+          repository: aws-amplify/amplify-codegen-ui
+      - name: Checkout Amplify CLI
+        uses: actions/checkout@v2
+        with:
+          path: amplify-cli
+          repository: aws-amplify/amplify-cli
+      - name: Setup Node.js LTS/gallium
+        uses: actions/setup-node@v2
+        with:
+          node-version: lts/gallium
+      - name: Build amplify-codegen-ui
+        working-directory: amplify-codegen-ui
+        run: |
+          npm ci
+          npx lerna bootstrap
+          npm run build
+      - name: Package amplify-codegen-ui
+        working-directory: amplify-codegen-ui
+        run: npx lerna exec npm pack
+      - name: Build amplify-cli
+        working-directory: amplify-cli
+        run: |
+          yarn install
+          yarn setup-dev
+      - name: Install updated codegen libraries
+        working-directory: amplify-cli/packages/amplify-util-uibuilder
+        run: |
+          yarn add ../../../amplify-codegen-ui/packages/codegen-ui/aws-amplify-codegen-ui-*.tgz
+          yarn add ../../../amplify-codegen-ui/packages/codegen-ui-react/aws-amplify-codegen-ui-react-*.tgz
+      - name: Build amplify-cli with updated codegen libraries
+        working-directory: amplify-cli
+        run: |
+          yarn install
+          yarn build
+          echo "$HOME/work/amplify-codegen-ui/amplify-codegen-ui/amplify-cli/.bin" >> $GITHUB_PATH
+      - name: Create a test react app
+        run: npx create-react-app e2e-test-app
+      - name: Install test app dependencies
+        working-directory: e2e-test-app
+        run: |
+          npm i aws-amplify@^6.0.0 @aws-amplify/ui-react@^6.0.0
+          npm i --save-dev cypress
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          role-to-assume: ${{ secrets.E2E_TEST_ROLE_ARN }}
+          aws-region: us-west-2
+      - name: Create temp AWS credentials file
+        working-directory: e2e-test-app
+        run: |
+          aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
+          aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
+          aws configure set aws_session_token $AWS_SESSION_TOKEN && \
+          aws configure set default.region $AWS_REGION
+      - name: Run CLI Pull in test app
+        working-directory: e2e-test-app
+        run: |
+          FORCE_RENDER=1 amplify-dev pull --appId ${{ secrets.E2E_TEST_APP_ID }} --envName staging -y --providers "{\
+            \"awscloudformation\":{\
+              \"configLevel\":\"project\",\
+              \"useProfile\":true,\
+              \"profileName\":\"default\",\
+            }\
+          }"
+      - name: Write test files
+        working-directory: e2e-test-app
+        run: cp -r ../amplify-codegen-ui/packages/test-generator/e2e-test-templates-amplify-js-v6/. .
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          working-directory: e2e-test-app
+          install: false
+          start: npm start
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 120
+          config-file: cypress.config.js
+        env:
+          REACT_APP_USER_EMAIL: ${{ secrets.E2E_TEST_USER_EMAIL }}
+          REACT_APP_USER_PASSWORD: ${{ secrets.E2E_TEST_USER_PASSWORD }}
+      - name: Upload Cypress videos
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-videos
+          path: /home/runner/work/amplify-codegen-ui/amplify-codegen-ui/e2e-test-app-v6/cypress/videos
+
   functional-tests:
     runs-on: ubuntu-latest
     steps:

packages/codegen-ui-react/lib/helpers/amplify-js-versioning.ts

@@ -20,7 +20,7 @@ import { AMPLIFY_JS_V5, AMPLIFY_JS_V6 } from '../utils/constants';
 import { ImportValue } from '../imports';
 
 export function isAmplifyJSV6RenderingEnabled(): boolean {
-  return false;
+  return true;
 }
 
 export function getLatestAmplifyJSV6RenderingEnabled(

packages/test-generator/e2e-test-templates-amplify-js-v6/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/extensions': 'off',
+  },
+};

packages/test-generator/e2e-test-templates-amplify-js-v6/cypress.config.js

@@ -0,0 +1,23 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    supportFile: false,
+  },
+});

packages/test-generator/e2e-test-templates-amplify-js-v6/cypress/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['plugin:cypress/recommended'],
+};

packages/test-generator/e2e-test-templates-amplify-js-v6/cypress/e2e/e2e-tests.cy.js

@@ -0,0 +1,28 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+
+describe('e2e-tests', () => {
+  before(() => {
+    cy.visit('localhost:3000');
+  });
+
+  it('renders datastore collection', () => {
+    // wait to log in
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(4000);
+    cy.get('#blogPosts').contains('Working on E2E Tests');
+  });
+});

packages/test-generator/e2e-test-templates-amplify-js-v6/src/App.js

@@ -0,0 +1,57 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+import { Amplify } from 'aws-amplify';
+import { signIn } from 'aws-amplify/auth';
+import { DataStore, AuthModeStrategyType } from 'aws-amplify/datastore';
+import '@aws-amplify/ui-react/styles.css';
+import { ThemeProvider } from '@aws-amplify/ui-react';
+import { useEffect, useRef, useState } from 'react';
+import amplifyconfig from './amplifyconfiguration.json';
+import { BlogPosts } from './ui-components';
+
+Amplify.configure(amplifyconfig);
+DataStore.configure({
+  DataStore: {
+    authModeStrategyType: AuthModeStrategyType.MULTI_AUTH,
+  },
+});
+
+function App() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const initialized = useRef(false);
+
+  useEffect(() => {
+    if (initialized.current) {
+      return;
+    }
+    initialized.current = true;
+    signIn({ username: process.env.REACT_APP_USER_EMAIL, password: process.env.REACT_APP_USER_PASSWORD }).then(() => {
+      setIsLoggedIn(true);
+    });
+  }, []);
+
+  if (isLoggedIn) {
+    return (
+      <ThemeProvider>
+        <BlogPosts id="blogPosts" />
+      </ThemeProvider>
+    );
+  }
+
+  return null;
+}
+
+export default App;

packages/test-generator/lib/generators/GenerateTestApp.ts

@@ -16,6 +16,12 @@
 import { ModuleKind, ScriptTarget, ScriptKind } from '@aws-amplify/codegen-ui-react/dist/lib/react-render-config';
 import { NodeTestGenerator } from './NodeTestGenerator';
 
+const { DEPENDENCIES } = process.env;
+
+if (!DEPENDENCIES) {
+  throw new Error('DEPENDENCIES env var not found');
+}
+
 const GOLDEN_COMPONENTS = [
   'GoldenBasicComponent',
   'GoldenCollectionWithDataBindingAndPagination',
@@ -68,6 +74,7 @@ const jsxGenerator = new NodeTestGenerator({
     target: ScriptTarget.ES2020,
     script: ScriptKind.JSX,
     renderTypeDeclarations: true,
+    dependencies: JSON.parse(DEPENDENCIES),
   },
   outputConfigOverride: {
     outputPathDir: INTEG_TEST_PATH,