ci: separate VRT pipelines in GHA compliant pattern for future enablement

.github/actions/run-publish-vr-screenshot/action.yml

@@ -84,58 +84,64 @@ runs:
         path: screenshots
 
     # ==========================================================
-    # STEPS BELOW WILL FAIL TO RUN ON GITHUB ACTIONS - see TODOs
+    # STEPS BELOW WILL FAIL TO RUN ON GITHUB ACTIONS - see @TODOs
     # ==========================================================
+    #
+    # @TODO: will need Federated Identity to be added to tool similarly like we have for monosize azure plugin https://github.com/microsoft/monosize/blob/main/packages/monosize-storage-azure/src/createTableClient.mts#L27
+    # - name: VR App - Create Policy
+    #   if: ${{ env.isPR == 'true' && env.vrTestSkip == 'no' }}
+    #   shell: bash
+    #   run: |
+    #     set -exuo pipefail
+    #     npx [email protected] create-policy --nonBlockingPipelines '{"${{ env.pipelineId }}":{"pipelineStatus": "PENDING","pipelineName": "${{ env.pipelineName }}"}}' --clientType 'FLUENTUI'
+    # env:
+    # VR_APP_API_URL: ${{ secrets.VR_APP_API_URL }}
+    # TENANT_ID: ${{ secrets.TenantId }}
+    # PRINCIPAL_CLIENT_ID: ${{ secrets.PrincipalClientId }}
+    # SERVICE_CONNECTION_ID: ${{ secrets.ServiceConnectionId }}
+    # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-    # TODO: will need Federated Identity to be added to tool similarly like we have for monosize azure plugin https://github.com/microsoft/monosize/blob/main/packages/monosize-storage-azure/src/createTableClient.mts#L27
-    - name: VR App - Create Policy
-      if: ${{ env.isPR == 'true' }}
-      shell: bash
-      run: |
-        set -exuo pipefail
-        npx [email protected] create-policy --nonBlockingPipelines '{"${{ env.pipelineId }}":{"pipelineStatus": "PENDING","pipelineName": "${{ env.pipelineName }}"}}' --clientType 'FLUENTUI'
-      env:
-        VR_APP_API_URL: ${{ secrets.VR_APP_API_URL }}
-        TENANT_ID: ${{ secrets.TenantId }}
-        PRINCIPAL_CLIENT_ID: ${{ secrets.PrincipalClientId }}
-        SERVICE_CONNECTION_ID: ${{ secrets.ServiceConnectionId }}
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    # @TODO: will need azure/login@v2 to be added to the workflow {@link file://./../../workflows/pr-website-deploy-comment.yml#49}
+    # - name: Run screenshotdiff
+    #   if: ${{ env.isPR == 'true' && env.vrTestSkip == 'no' }}
+    #   uses: azure/cli@v2
+    #   env:
+    # ciDefinitionId is set to 205 because that is the ID of the baseline pipeline (https://uifabric.visualstudio.com/fabricpublic/_build?definitionId=205) used by the master branch
+    # TODO: not sure how this will be used on GHA cc @evancharlton @TristanWatanabe
+    # CI_DEFINITION_ID: 205
+    # API_TOKEN: ${{ secrets.fabric-public-pipeline-access-PAT }}
+    # GITHUB_API_TOKEN: ${{ secrets.githubRepoStatusPAT }}
+    # VR_APP_API_URL: ${{ secrets.VR_APP_API_URL }}
+    # STORAGE_ACCOUNT_ID: ${{ secrets.StorageAccountId }}
+    # TENANT_ID: ${{ secrets.TenantId }}
+    # PRINCIPAL_CLIENT_ID: ${{ secrets.PrincipalClientId }}
+    # SERVICE_CONNECTION_ID: ${{ secrets.ServiceConnectionId }}
+    # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    # with:
+    #   azcliversion: latest
+    #   inlineScript: |
+    #     npx [email protected] run-diff --screenshotsDirectory ./screenshots --buildType pr --clientType "FLUENTUI" --ciDefinitionId ${{ env.CI_DEFINITION_ID }} --groupName ${{ env.pipelineName }} --locationPrefix ${{ inputs.locationPrefix }} --locationPostfix ${{ inputs.locationPostfix }} --pipelineId ${{ env.pipelineId }} --clientName ${{ inputs.clientName }} --threshold '0.04' --cumThreshold '1'
 
-    # TODO: will need azure/login@v2 to be added to the workflow {@ling file://./../../workflows/pr-website-deploy-comment.yml#49}
-    - name: Run screenshotdiff
-      if: ${{ env.isPR == 'true' && env.vrTestSkip == 'no' }}
-      uses: azure/cli@v2
-      env:
-        # ciDefinitionId is set to 205 because that is the ID of the baseline pipeline (https://uifabric.visualstudio.com/fabricpublic/_build?definitionId=205) used by the master branch
-        # TODO: not sure how this will be used on GHA cc @evancharlton @TristanWatanabe
-        CI_DEFINITION_ID: 205
-        API_TOKEN: ${{ secrets.fabric-public-pipeline-access-PAT }}
-        GITHUB_API_TOKEN: ${{ secrets.githubRepoStatusPAT }}
-        VR_APP_API_URL: ${{ secrets.VR_APP_API_URL }}
-        STORAGE_ACCOUNT_ID: ${{ secrets.StorageAccountId }}
-        TENANT_ID: ${{ secrets.TenantId }}
-        PRINCIPAL_CLIENT_ID: ${{ secrets.PrincipalClientId }}
-        SERVICE_CONNECTION_ID: ${{ secrets.ServiceConnectionId }}
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        azcliversion: latest
-        inlineScript: |
-          npx [email protected] run-diff --screenshotsDirectory ./screenshots --buildType pr --clientType "FLUENTUI" --ciDefinitionId ${{ env.CI_DEFINITION_ID }} --groupName ${{ env.pipelineName }} --locationPrefix ${{ inputs.locationPrefix }} --locationPostfix ${{ inputs.locationPostfix }} --pipelineId ${{ env.pipelineId }} --clientName ${{ inputs.clientName }} --threshold '0.04' --cumThreshold '1'
+    # ============
+    # NON PR STEPS
+    # ============
 
-    # TODO: will need azure/login@v2 to be added to the workflow {@ling file://./../../workflows/pr-website-deploy-comment.yml#49}
-    - name: Run screenshotdiff - update baseline (non PR)
-      if: ${{ github.event_name != 'pull_request' }}
-      uses: azure/cli@v2
-      env:
-        API_TOKEN: ${{ secrets.fabric-public-pipeline-access-PAT }}
-        GITHUB_API_TOKEN: ${{ secrets.githubRepoStatusPAT }}
-        VR_APP_API_URL: ${{ secrets.VR_APP_API_URL }}
-        STORAGE_ACCOUNT_ID: ${{ secrets.StorageAccountId }}
-        TENANT_ID: ${{ secrets.TenantId }}
-        PRINCIPAL_CLIENT_ID: ${{ secrets.PrincipalClientId }}
-        SERVICE_CONNECTION_ID: ${{ secrets.ServiceConnectionId }}
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        azcliversion: latest
-        inlineScript: |
-          npx [email protected] run-diff --buildType release --screenshotsDirectory ./screenshots --clientType "FLUENTUI" --locationPrefix ${{ inputs.locationPrefix }} --locationPostfix ${{ inputs.locationPostfix }} --pipelineId ${{ env.pipelineId }}
+    # @NOTE: this step runs via ADO from master branch only for now {@link file://./../../../azure-pipelines.vrt-baseline.yml }
+
+    # @TODO: will need azure/login@v2 to be added to the workflow {@link file://./../../workflows/pr-website-deploy-comment.yml#49}
+    # - name: Run screenshotdiff - update baseline (non PR)
+    # if: ${{ github.event_name != 'pull_request' }}
+    # uses: azure/cli@v2
+    # env:
+    # API_TOKEN: ${{ secrets.fabric-public-pipeline-access-PAT }}
+    # GITHUB_API_TOKEN: ${{ secrets.githubRepoStatusPAT }}
+    # VR_APP_API_URL: ${{ secrets.VR_APP_API_URL }}
+    # STORAGE_ACCOUNT_ID: ${{ secrets.StorageAccountId }}
+    # TENANT_ID: ${{ secrets.TenantId }}
+    # PRINCIPAL_CLIENT_ID: ${{ secrets.PrincipalClientId }}
+    # SERVICE_CONNECTION_ID: ${{ secrets.ServiceConnectionId }}
+    # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    # with:
+    #   azcliversion: latest
+    #   inlineScript: |
+    #     npx [email protected] run-diff --buildType release --screenshotsDirectory ./screenshots --clientType "FLUENTUI" --locationPrefix ${{ inputs.locationPrefix }} --locationPostfix ${{ inputs.locationPostfix }} --pipelineId ${{ env.pipelineId }}

.github/scripts/prepare-vr-screenshots-for-upload.js

@@ -0,0 +1,46 @@
+// @ts-check
+
+const { join } = require('node:path');
+const { existsSync, cpSync, mkdirSync, writeFileSync } = require('node:fs');
+const { createProjectGraphAsync } = require('@nx/devkit');
+
+module.exports = main;
+
+/**
+ *
+ * @param {import('../../scripts/triage-bot/src/types.ts').GithubScriptsParams & {config:{projects:string[]}} } options
+ * @returns
+ */
+async function main(options) {
+  const rootDir = 'screenshots';
+  const graph = await createProjectGraphAsync();
+
+  /**
+   * @type {{[project_name:string]:{path:string}}}
+   */
+  const report = {};
+
+  options.config.projects.forEach(project => {
+    const projectConfig = graph.nodes[project];
+    const screenshotsPath = join(projectConfig.data.root, 'dist/screenshots');
+
+    if (!existsSync(screenshotsPath)) {
+      return;
+    }
+
+    const destinationFolder = join(rootDir, project);
+
+    mkdirSync(destinationFolder, { recursive: true });
+
+    cpSync(screenshotsPath, destinationFolder, {
+      recursive: true,
+    });
+
+    console.info(`✅ ${screenshotsPath} contents copied to ${destinationFolder}`);
+    report[project] = { path: project };
+  });
+
+  writeFileSync(join(rootDir, 'screenshots-report.json'), JSON.stringify(report, null, 2));
+
+  return rootDir;
+}

.github/workflows/pr-vrt-comment.yml

@@ -0,0 +1,147 @@
+name: VRT CI | Comment on PR
+on:
+  workflow_run:
+    workflows: ['VRT CI']
+    types:
+      - completed
+
+concurrency:
+  # see https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-only-cancel-in-progress-jobs-or-runs-for-the-current-workflow
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NX_PARALLEL: 4 # ubuntu-latest = 4-core CPU / 16 GB of RAM | macos-14-xlarge (arm) = 6-core CPU / 14 GB of RAM
+  NX_PREFER_TS_NODE: true
+  NX_VERBOSE_LOGGING: true
+
+jobs:
+  run_vr_diff:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' }}
+    outputs:
+      pr_number: ${{ steps.pr_number.outputs.result }}
+    permissions:
+      # necessary to write comments to the PR from the vr-approval-cli
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            .github
+
+      # downloaded artifacts will contain screenshots from affected project including 'screenshots-report.json' which contains proper image mappings for affected project
+      # - see @{link file://./../scripts/prepare-vr-screenshots-for-upload.js#43}
+      # - see @{link file://./pr-vrt.yml#56}
+      - uses: actions/download-artifact@v4
+        with:
+          name: vrscreenshot
+          path: ./screenshots
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: pr-number
+          path: ./results
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Load PR number
+        uses: actions/github-script@v7
+        id: pr_number
+        with:
+          script: |
+            const run = require('./.github/scripts/validate-pr-number');
+            const result = run({filePath:'results/pr.txt'});
+            return result;
+          result-encoding: string
+
+      - name: VR App - Create Policy
+        run: |
+          echo "MAKE THIS WORK"
+
+      - name: Run screenshotdiff
+        run: |
+          echo "MAKE THIS WORK"
+          npx [email protected] run-diff --screenshotsDirectory ./screenshots --buildType pr --clientType "FLUENTUI" --threshold '0.04' --cumThreshold '1'
+
+# 💡 NOTE:
+#   - following is manually provided setup used in previous ADO pipeline {@link file://./../../azure-pipelines.vrt-baseline.yml }
+#   - keeping for future reference
+
+# web_components:
+#   runs-on: ubuntu-latest
+#   env:
+#     pipelineId: '315'
+#     pipelineName: 'fluent-ui_VRT_Pipeline_web-components'
+#   steps:
+#     - uses: actions/checkout@v4
+#       with:
+#         fetch-depth: 0
+#     - name: Run and publish VR screenshot
+#       uses: ./.github/actions/run-publish-vr-screenshot
+#       with:
+#         fluentVersion: webcomponents
+#         vrTestPackageName: 'vr-tests-web-components'
+#         vrTestPackagePath: 'apps/vr-tests-web-components'
+#         locationPrefix: 'FluentUI-web-components'
+#         locationPostfix: 'vrscreenshotwebcomponents'
+#         clientName: 'fluentui-web-components-v3'
+
+# react_components:
+#   runs-on: ubuntu-latest
+#   env:
+#     pipelineId: '311'
+#     pipelineName: 'fluent-ui_VRT_Pipeline_v9'
+#   steps:
+#     - uses: actions/checkout@v4
+#       with:
+#         fetch-depth: 0
+#     - name: Run and publish VR screenshot
+#       uses: ./.github/actions/run-publish-vr-screenshot
+#       with:
+#         fluentVersion: v9
+#         vrTestPackageName: 'vr-tests-react-components'
+#         vrTestPackagePath: 'apps/vr-tests-react-components'
+#         locationPrefix: 'fluentuiv9'
+#         locationPostfix: 'vrscreenshotv9'
+#         clientName: 'fluentuiv9'
+
+# react:
+#   runs-on: ubuntu-latest
+#   env:
+#     pipelineId: '312'
+#     pipelineName: 'fluent-ui_VRT_Pipeline_v8'
+#   steps:
+#     - uses: actions/checkout@v4
+#       with:
+#         fetch-depth: 0
+#     - name: Run and publish VR screenshot
+#       uses: ./.github/actions/run-publish-vr-screenshot
+#       with:
+#         fluentVersion: v8
+#         vrTestPackageName: 'vr-tests'
+#         vrTestPackagePath: 'apps/vr-tests'
+#         locationPrefix: 'fluentuiv8'
+#         locationPostfix: 'vrscreenshotv8'
+#         clientName: 'fluentuiv8'
+
+# react_northstar:
+#   runs-on: ubuntu-latest
+#   env:
+#     pipelineId: '313'
+#     pipelineName: 'fluent-ui_VRT_Pipeline_v0'
+#   steps:
+#     - uses: actions/checkout@v4
+#       with:
+#         fetch-depth: 0
+#     - name: Run and publish VR screenshot
+#       uses: ./.github/actions/run-publish-vr-screenshot
+#       with:
+#         fluentVersion: v0
+#         vrTestPackageName: 'docs'
+#         vrTestPackagePath: 'packages/fluentui/docs'
+#         locationPrefix: 'FluentUI-v0'
+#         locationPostfix: 'vrscreenshotv0'
+#         clientName: 'FluentUIV0'