PR to add tasks in pipeline for v9 VRT integration (#25606)

apps/vr-tests-react-components/convertStoriesToStoryWright.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
 set -x
-sed -i "s/import.*Screener.*screener'/import { StoryWright, Steps } from 'storywright'/g" src/stories/*
-sed -i "s/Screener.Steps/Steps/g" src/stories/*
-sed -i "s/Screener/StoryWright/g" src/stories/*
+find ./src/stories/ -type f | xargs sed -i "s/import.*Screener.*screener'/import { StoryWright, Steps } from 'storywright'/g"
+find ./src/stories/ -type f | xargs sed -i "s/Screener.Steps/Steps/g"
+find ./src/stories/ -type f | xargs sed -i "s/Screener/StoryWright/g"

azure-pipelines.vrt-baseline.yml

@@ -26,6 +26,10 @@ jobs:
           filePath: yarn-ci.sh
         displayName: yarn (install packages)
 
+      - script: |
+          yarn workspace @fluentui/vr-tests-react-components convert
+        displayName: Convert screener component to storywright
+
       - script: |
           yarn workspace @fluentui/vr-tests-react-components screener:build
         displayName: Build VR tests components package
@@ -45,5 +49,18 @@ jobs:
           ArtifactName: 'vrscreenshot'
           publishLocation: 'Container'
 
-      - bash: node packages/screenshotdiff/dist/index.js release --buildId $(Build.BuildId)
+      # - bash: cd packages/screenshotdiff && yarn build
+      #   displayName: 'Build'
+
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "fluentui" --buildId $(Build.BuildId)
         displayName: 'Run Screenshotdiff update baseline'
+        env:
+          API_URL: $(System.CollectionUri)
+          API_TOKEN: $(TEST_PAT)
+          API_REPOSITORY: $(Build.Repository.Name)
+          API_PROJECT: $(System.TeamProject)
+          GITHUB_API_TOKEN: $(GITHUB_TEST_PAT)
+          STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI)
+          STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI)
+          BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING)
+          VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)

azure-pipelines.vrt-pr.yml

@@ -21,11 +21,44 @@ jobs:
     steps:
       - template: .devops/templates/tools.yml
 
+      - bash: |
+          postPolicy="true";
+          response=$(curl --request POST 'https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47/oauth2/token' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'grant_type=client_credentials' --data-urlencode 'client_id=288a69b6-760d-4c1f-ad6d-0183b5e5740f' --data-urlencode 'client_secret='${VR_APPROVAL_CLIENT_SECRET} )
+            parsedResponse=${response/*"access_token"/}
+            token=${parsedResponse:3:${#parsedResponse}-5}
+            curl --location --request POST 'https://vrt-fluentapp.azurewebsites.net/api/policyState' \
+            --header 'Authorization: Bearer '"$token" \
+            --header 'Content-Type: application/json' \
+            --data-raw '	{
+            "organization": "uifabric",
+            "projectName": "fabricpublic",
+            "prId": $(System.PullRequest.PullRequestNumber),
+            "commitId": "$(Build.SourceVersion)",
+              "generate":true,
+              "blockingPipeline":{
+              },
+              "nonBlockingPipeline":{
+                "202": {
+                  "pipelineStatus": "PENDING",
+                  "pipelineName": "fluent-ui VRT Pipeline"
+                }
+              },
+              "postPolicy": '${postPolicy}',
+              "policyType": "OPTIONAL"
+            }'
+        displayName: 'Call policy State Api'
+        env:
+          VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
+
       - task: Bash@3
         inputs:
           filePath: yarn-ci.sh
         displayName: yarn (install packages)
 
+      - script: |
+          yarn workspace @fluentui/vr-tests-react-components convert
+        displayName: Convert screener component to storywright
+
       - script: |
           yarn workspace @fluentui/vr-tests-react-components screener:build
         displayName: Build vr tests components package
@@ -44,3 +77,29 @@ jobs:
           PathtoPublish: 'screenshots'
           ArtifactName: 'vrscreenshot'
           publishLocation: 'Container'
+
+      - powershell: |
+          $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1"
+          Write-Host "Looking up latest official build via url: $url"
+          $pipelineBuildInfo = Invoke-RestMethod -Uri $url -Headers @{Authorization = "Bearer $env:SYSTEM_ACCESSTOKEN"}
+          Write-Host "Response: $pipelineBuildInfo"
+          [int]$latestBuildId = $pipelineBuildInfo.value.id
+          Write-Host "Setting variable LatestBuildId=$latestBuildId"
+          Write-Host "##vso[task.setvariable variable=LatestBuildId]$latestBuildId"
+        name: GetLatestGreenCIBuild
+        env:
+          SYSTEM_ACCESSTOKEN: $(System.AccessToken)
+          BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID)
+
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "fluentui" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId)
+        displayName: 'Run fluentui-screenshotdiff'
+        env:
+          API_URL: $(System.CollectionUri)
+          API_TOKEN: $(TEST_PAT)
+          API_REPOSITORY: $(Build.Repository.Name)
+          API_PROJECT: $(System.TeamProject)
+          GITHUB_API_TOKEN: $(githubRepoStatusPAT)
+          STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI)
+          STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI)
+          BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING)
+          VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)

package.json

@@ -303,6 +303,7 @@
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslib": "2.4.0",
     "typescript": "4.3.5",
+    "vrscreenshotdiff": "0.0.6",
     "webpack": "5.74.0",
     "webpack-bundle-analyzer": "4.4.2",
     "webpack-cli": "4.10.0",