test(🏞): batch upload snapshots to argos-ci.com (#35181)

.github/workflows/ui-upload.yml

@@ -1,6 +1,5 @@
 # Upload 📷 UI snapshots to argos server, help visual regression testing.
-
-name: UI Upload
+name: 📷 UI Upload
 
 on:
   workflow_run:
@@ -21,25 +20,8 @@ jobs:
     if: >
       github.event.workflow_run.conclusion == 'success'
     steps:
-      - name: Download commit artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          workflow: ${{ github.event.workflow_run.workflow_id }}
-          name: commit
-
-      - name: Save commit id
-        id: commit
-        run: echo "::set-output name=id::$(<commit.txt)"
-
-      - name: Download branch artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          workflow: ${{ github.event.workflow_run.workflow_id }}
-          name: branch
-
-      - name: Save branch id
-        id: branch
-        run: echo "::set-output name=id::$(<branch.txt)"
+      - name: checkout
+        uses: actions/checkout@v3
 
       - name: Download snapshots artifact
         uses: dawidd6/action-download-artifact@v2
@@ -47,8 +29,13 @@ jobs:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           workflow_conclusion: success
           name: snapshots
+          path: imageSnapshots
+
+      - name: Install
+        run: npm i fast-glob lodash argos-cli
 
       - name: Upload argos-ci
         id: deploy
-        run: |
-          npx argos-cli upload ./ --token ${{ secrets.ARGOS_TOKEN }} --branch ${{ steps.branch.outputs.id }} --commit ${{ steps.commit.outputs.id }}
+        run: npm run argos
+        env:
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}

.github/workflows/ui.yml

@@ -12,9 +12,6 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -28,6 +25,10 @@ jobs:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
       - name: create package-lock.json
         run: npm i --package-lock-only --ignore-scripts
 
@@ -57,33 +58,3 @@ jobs:
           name: snapshots
           path: imageSnapshots/
           retention-days: 3
-
-      - name: Save commit
-        if: github.event_name == 'pull_request' && github.base_ref == 'master'
-        run: echo ${{ github.event.pull_request.head.sha }} > ./commit.txt
-
-      - name: Save commit
-        if: github.event_name == 'push'
-        run: echo ${{ github.sha }} > ./commit.txt
-
-      - name: Upload commit
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v3
-        with:
-          name: commit
-          path: ./commit.txt
-
-      - name: Save branch
-        if: github.event_name == 'pull_request' && github.base_ref == 'master'
-        run: echo pull/${{ github.event.pull_request.number }}/merge > ./branch.txt
-
-      - name: Save branch
-        if: github.event_name == 'push'
-        run: echo ${GITHUB_REF##*/} > ./branch.txt
-
-      - name: Upload branch
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v3
-        with:
-          name: branch
-          path: ./branch.txt

package.json

@@ -98,11 +98,11 @@
     "tsc": "tsc --noEmit",
     "site:test": "jest --config .jest.site.js --cache=false --force-exit",
     "test-image": "npm run dist && docker-compose run tests",
+    "argos": "node ./scripts/argos-upload.js",
     "version": "node ./scripts/generate-version",
     "install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 enzyme-adapter-react-16",
     "install-react-17": "npm i --no-save --legacy-peer-deps react@17 react-dom@17",
-    "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18 @testing-library/react@13",
-    "argos": "argos upload imageSnapshots"
+    "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18 @testing-library/react@13"
   },
   "browserslist": [
     "> 0.5%",
@@ -163,7 +163,6 @@
     "@ant-design/hitu": "^0.0.0-alpha.13",
     "@ant-design/tools": "^14.0.2",
     "@docsearch/css": "^3.0.0",
-    "docsearch-react-fork": "^0.0.0-alpha.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
     "@testing-library/jest-dom": "^5.16.3",
@@ -186,7 +185,6 @@
     "@typescript-eslint/parser": "^5.0.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "antd-img-crop": "^4.0.0",
-    "argos-cli": "^0.3.0",
     "array-move": "^4.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "bisheng": "^3.2.1",
@@ -200,6 +198,7 @@
     "cross-env": "^7.0.0",
     "css-minimizer-webpack-plugin": "^3.2.0",
     "dekko": "^0.2.1",
+    "docsearch-react-fork": "^0.0.0-alpha.0",
     "docsearch.js": "^2.6.3",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "enquire-js": "^0.2.1",
@@ -218,6 +217,7 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-unicorn": "^42.0.0",
+    "fast-glob": "^3.2.11",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^10.0.0",
     "full-icu": "^1.3.0",

scripts/argos-upload.js

@@ -0,0 +1,65 @@
+// Thanks to material-ui ❤️
+// Create chunks for Argos: https://github.com/mui/material-ui/pull/23518
+// https://github.com/mui/material-ui/blob/af81aae3b292ed180e7652a665fad1be2b38a7b3/scripts/pushArgos.js
+const util = require('util');
+const glob = require('fast-glob');
+const lodashChunk = require('lodash/chunk');
+const childProcess = require('child_process');
+
+const execFileNode = util.promisify(childProcess.execFile);
+
+function execFile(command, args) {
+  return execFileNode(command, args, {
+    cwd: process.cwd(),
+    env: process.env,
+    encoding: 'utf-8',
+  });
+}
+
+const screenshotsBase = 'imageSnapshots';
+const screenshotsTmp = `${screenshotsBase}/temp`;
+const BATCH_SIZE = 200;
+
+async function move2Temp(screenshot, target) {
+  await execFile('mkdir', ['-p', target]);
+  await execFile('mv', [screenshot, target]);
+}
+
+async function run() {
+  const screenshots = await glob(`${screenshotsBase}/**/*`);
+  const chunks = lodashChunk(screenshots, BATCH_SIZE);
+
+  await Promise.all(
+    chunks.map((chunk, chunkIndex) =>
+      Promise.all(
+        chunk.map(screenshot => move2Temp(screenshot, `${screenshotsTmp}/${chunkIndex}`)),
+      ),
+    ),
+  );
+
+  for (let i = 0; i < chunks.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    const argosResults = await execFile('argos', [
+      'upload',
+      `${screenshotsTmp}/${i}`,
+      '--token',
+      process.env.ARGOS_TOKEN,
+      '--batchCount',
+      chunks.length,
+      '--branch',
+      process.env.GITHUB_REF_NAME,
+      '--commit',
+      process.env.GITHUB_SHA,
+      '--external-build-id',
+      process.env.GITHUB_SHA,
+    ]);
+    // eslint-disable-next-line no-console -- pipe stdout
+    console.log(argosResults.stdout);
+  }
+}
+
+run().catch(error => {
+  // eslint-disable-next-line no-console
+  console.error(error);
+  process.exit(1);
+});