chore: Use new Argos CLI (#37496)

* chore(ci): use new argos cli

* chore: fix lint

* chore(ci): simplify ui-upload process

* chore(ci): fix argos-upload permission

* chore(ci): use cp instead mv

* chore(ci): fix fetch-depth

* chore: force failed

* chore: clean up

* test: update demo snapshot

Co-authored-by: Greg Bergé <berge.greg@gmail.com>

.github/workflows/ui-upload.yml

@@ -1,63 +0,0 @@
-# Upload 📷 UI snapshots to argos server, help visual regression testing.
-name: 📷 UI Upload
-
-on:
-  workflow_run:
-    workflows: ["📷 UI"]
-    types:
-      - completed
-
-permissions:
-  contents: read
-
-jobs:
-  upload-ui:
-    permissions:
-      actions: read  # for dawidd6/action-download-artifact to query and download artifacts
-      pull-requests: read  # for dawidd6/action-download-artifact to query commit hash
-    name: deploy preview
-    runs-on: ubuntu-latest
-    if: >
-      github.event.workflow_run.conclusion == 'success'
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - 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: Download snapshots artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          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: npm run argos
-        env:
-          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_GITHUB_BRANCH: ${{ steps.branch.outputs.id }}
-          ARGOS_GITHUB_COMMIT: ${{ steps.commit.outputs.id }}

.github/workflows/ui.yml

@@ -16,6 +16,8 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
 
       - name: cache package-lock.json
         uses: actions/cache@v3
@@ -50,39 +52,12 @@ jobs:
       - name: test
         run: npm run test-image
 
-      - name: upload snapshots artifact
-        uses: actions/upload-artifact@v3
-        with:
-          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: Install dependencies to run Argos upload
+        run: npm i fast-glob lodash @argos-ci/core
 
-      - 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
+      - name: Upload on Argos
+        id: deploy
+        run: npm run argos
+        env:
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+          ARGOS_PARALLEL_NONCE: ${{ github.run_id }}

components/comment/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -320,7 +320,7 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                     class="ant-comment-content-author-time"
                   >
                     <span>
-                      a day ago
+                      8 hours ago
                     </span>
                     <div>
                       <div
@@ -341,7 +341,7 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                             class="ant-tooltip-inner"
                             role="tooltip"
                           >
-                            2016-11-21 00:00:00
+                            2016-11-22 11:22:33
                           </div>
                         </div>
                       </div>
@@ -398,7 +398,7 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                     class="ant-comment-content-author-time"
                   >
                     <span>
-                      2 days ago
+                      9 hours ago
                     </span>
                     <div>
                       <div
@@ -419,7 +419,7 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                             class="ant-tooltip-inner"
                             role="tooltip"
                           >
-                            2016-11-20 00:00:00
+                            2016-11-22 10:22:33
                           </div>
                         </div>
                       </div>

components/comment/__tests__/__snapshots__/demo.test.ts.snap

@@ -248,7 +248,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
                     class="ant-comment-content-author-time"
                   >
                     <span>
-                      a day ago
+                      8 hours ago
                     </span>
                   </span>
                 </div>
@@ -302,7 +302,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
                     class="ant-comment-content-author-time"
                   >
                     <span>
-                      2 days ago
+                      9 hours ago
                     </span>
                   </span>
                 </div>

components/comment/demo/list.md

@@ -15,7 +15,6 @@ Displaying a series of comments using the `antd` List Component.
 
 ```tsx
 import { Comment, List, Tooltip } from 'antd';
-import moment from 'moment';
 import React from 'react';
 
 const data = [
@@ -31,8 +30,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip title={moment('2016-11-22').subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        <span>{moment('2016-11-22').subtract(1, 'days').fromNow()}</span>
+      <Tooltip title="2016-11-22 11:22:33">
+        <span>8 hours ago</span>
       </Tooltip>
     ),
   },
@@ -48,8 +47,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip title={moment('2016-11-22').subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        <span>{moment('2016-11-22').subtract(2, 'days').fromNow()}</span>
+      <Tooltip title="2016-11-22 10:22:33">
+        <span>9 hours ago</span>
       </Tooltip>
     ),
   },

scripts/argos-upload.js

@@ -6,6 +6,9 @@ const glob = require('fast-glob');
 const lodashChunk = require('lodash/chunk');
 const childProcess = require('child_process');
 
+// eslint-disable-next-line import/no-unresolved
+const argos = require('@argos-ci/core');
+
 const execFileNode = util.promisify(childProcess.execFile);
 
 function execFile(command, args) {
@@ -17,12 +20,12 @@ function execFile(command, args) {
 }
 
 const screenshotsBase = 'imageSnapshots';
-const screenshotsTmp = `${screenshotsBase}/temp`;
+const screenshotsChunks = `imageSnapshots-chunks`;
 const BATCH_SIZE = 200;
 
-async function move2Temp(screenshot, target) {
+async function cpToTemp(screenshot, target) {
   await execFile('mkdir', ['-p', target]);
-  await execFile('mv', [screenshot, target]);
+  await execFile('cp', [screenshot, target]);
 }
 
 async function run() {
@@ -32,29 +35,23 @@ async function run() {
   await Promise.all(
     chunks.map((chunk, chunkIndex) =>
       Promise.all(
-        chunk.map(screenshot => move2Temp(screenshot, `${screenshotsTmp}/${chunkIndex}`)),
+        chunk.map(screenshot => cpToTemp(screenshot, `${screenshotsChunks}/${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.ARGOS_GITHUB_BRANCH,
-      '--commit',
-      process.env.ARGOS_GITHUB_COMMIT,
-      '--external-build-id',
-      process.env.ARGOS_GITHUB_COMMIT,
-    ]);
+    const result = await argos.upload({
+      root: `${screenshotsChunks}/${i}`,
+      token: process.env.ARGOS_TOKEN,
+      parallel: {
+        total: chunks.length,
+        nonce: process.env.ARGOS_PARALLEL_NONCE,
+      },
+    });
     // eslint-disable-next-line no-console -- pipe stdout
-    console.log(argosResults.stdout);
+    console.log(result);
   }
 }