ci(.github): migrate infra to GHA (#33070)

Co-authored-by: Tudor Popa <[email protected]>

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

@@ -0,0 +1,140 @@
+name: 'Run and Publish VR Screenshot'
+description: 'Runs and publishes visual regression screenshots'
+inputs:
+  fluentVersion:
+    description: 'Fluent version'
+    required: true
+    default: 'v8'
+  vrTestPackageName:
+    description: 'VR test package name'
+    required: true
+    default: 'vr-tests'
+  vrTestPackagePath:
+    description: 'VR test package path'
+    required: true
+    default: 'apps/vr-tests'
+  locationPrefix:
+    description: 'Location prefix'
+    required: true
+    default: 'fluentuiv8'
+  locationPostfix:
+    description: 'Location postfix'
+    required: true
+    default: 'vrscreenshotv8'
+  clientName:
+    description: 'Client name'
+    required: true
+    default: 'fluentuiv8'
+
+runs:
+  using: 'composite'
+  steps:
+    - uses: nrwl/nx-set-shas@v4
+      with:
+        main-branch-name: 'master'
+
+    - uses: actions/setup-node@v4
+      with:
+        cache: 'yarn'
+        node-version: '20'
+
+    - run: yarn install --frozen-lockfile
+      shell: bash
+
+    - run: yarn playwright install --with-deps
+      shell: bash
+
+    - name: Check if vrTests should be skipped
+      shell: bash
+      run: |
+        isPR=${{ github.event_name == 'pull_request' }}
+        echo "isPR=$isPR" >> $GITHUB_ENV
+        if [[ $isPR == true ]]; then
+          packageAffected=$(yarn --silent check:affected --project ${{ inputs.vrTestPackageName }})
+          if [[ $packageAffected == false ]]; then
+            echo "In PR pipeline but NOT affecting test package. Skipping test run"
+            echo "vrTestSkip=yes" >> $GITHUB_ENV
+          else
+            echo "In PR pipeline and affecting test package. NOT Skipping test run"
+            echo "vrTestSkip=no" >> $GITHUB_ENV
+          fi
+        else
+          echo "Not in PR pipeline. NOT Skipping test run"
+          echo "vrTestSkip=no" >> $GITHUB_ENV
+        fi
+
+    - name: Run VR tests
+      if: ${{ env.vrTestSkip == 'no' }}
+      shell: bash
+      run: yarn nx run ${{ inputs.vrTestPackageName }}:test-vr --nxBail
+
+    - name: Collate Artifacts
+      if: ${{ env.vrTestSkip == 'no' }}
+      shell: bash
+      run: |
+        mkdir -p screenshots
+        cp -rf ${{ inputs.vrTestPackagePath }}/dist/screenshots/*.png screenshots/
+
+    - name: Upload VR screenshots
+      if: ${{ env.vrTestSkip == 'no' }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: vrscreenshot${{ inputs.fluentVersion }}
+        path: screenshots
+
+    # ==========================================================
+    # 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' }}
+      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 {@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'
+
+    # 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 }}

.github/workflows/bundle-size-comment.yml

@@ -0,0 +1,32 @@
+name: Bundle size | Comment on PR
+on:
+  workflow_run:
+    workflows: ['Bundle size']
+    types:
+      - completed
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' }}
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: monosize-report
+          path: ./results
+          run_id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Load PR number
+        id: pr_number
+        run: echo "::set-output name=id::$(cat pr.txt)"
+        working-directory: ./results
+
+      - name: 'Comment on PR'
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          number: ${{ steps.pr_number.outputs.id }}
+          path: ./results/monosize-report.md

.github/workflows/bundle-size.yml

@@ -0,0 +1,93 @@
+name: Bundle size
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+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:
+  env:
+  NX_PARALLEL: 6 # 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
+
+  BROWSERSLIST_IGNORE_OLD_DATA: true
+
+jobs:
+  bundle-size:
+    runs-on: macos-14-xlarge
+    permissions:
+      contents: 'read'
+      actions: 'read'
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v4
+        with:
+          main-branch-name: 'master'
+
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'yarn'
+          node-version: '20'
+
+      - run: echo number of CPUs "$(getconf _NPROCESSORS_ONLN)"
+
+      - run: yarn install --frozen-lockfile
+
+      - name: Build packages & create reports (PR only)
+        if: github.event_name == 'pull_request'
+        run: yarn nx affected -t bundle-size --nxBail
+
+      - name: Compare bundle size with base (PR only)
+        if: github.event_name == 'pull_request'
+        run: npx monosize compare-reports --branch=${{ github.event.pull_request.base.ref }} --output=markdown --quiet > ./monosize-report.md
+
+      - name: Save PR number
+        run: echo ${{ github.event.number }} > pr.txt
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ github.event_name == 'pull_request' }}
+        with:
+          name: monosize-report
+          if-no-files-found: error
+          path: |
+            monosize-report.md
+            pr.txt
+
+      # ===================================
+      #   NON PR (MASTER) WORKFLOW STEPS
+      # ===================================
+
+      - name: Build all packages & create reports (non-PR)
+        if: github.event_name != 'pull_request'
+        run: yarn nx run-many -t bundle-size --nxBail
+
+      - name: Login via Azure CLI (non-PR)
+        if: github.event_name != 'pull_request'
+        uses: azure/login@v2
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Upload a report (non-PR)
+        if: github.event_name != 'pull_request'
+        uses: azure/cli@v2
+        with:
+          azcliversion: latest
+          inlineScript: |
+            yarn monosize upload-report --branch=${{ github.ref }} --commit-sha ${{ github.sha }}
+        env:
+          AZCOPY_AUTO_LOGIN_TYPE: 'AZCLI'
+          SYSTEM_ACCESSTOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BUNDLESIZE_ACCOUNT_NAME: ${{ secrets.BUNDLESIZE_ACCOUNT_NAME }}

.github/workflows/pr-vrt.yml

@@ -0,0 +1,98 @@
+name: VRT CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+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
+
+permissions:
+  contents: 'read'
+  actions: 'read'
+
+jobs:
+  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'