Cleanup env variables

.github/workflows/screener-build.yml

@@ -20,15 +20,12 @@ jobs:
       # BROWSERSLIST_IGNORE_OLD_DATA = Prevents failures on CI when "caniuse-lite" becomes outdated
       # DEPLOYHOST = address of host for screener tests deployment
       # BUILD_BUILDID = unique ID of the workflow run within the repo
-      # BUILD_SOURCEBRANCH = branch that triggered the workflow -> refs/pull/<pr_number>/merge
       ###########################################
       - name: Set base env variables
         run: |
           cat <<EOT >> artifacts/environment
           BROWSERSLIST_IGNORE_OLD_DATA=true
-          DEPLOYHOST='fluentuipr.z22.web.core.windows.net'
           BUILD_BUILDID=${{ github.run_id }}
-          BUILD_SOURCEBRANCH=${{ github.ref }}
           SCREENER_BUILD=1
           EOT
 
@@ -77,12 +74,11 @@ jobs:
         run: |
           cat <<EOT >> artifacts/environment
           SYSTEM_PULLREQUEST_TARGETBRANCH=${{ github.event.pull_request.base.ref }}
-          SYSTEM_PULLREQUEST_SOURCEBRANCH=${{ github.event.pull_request.head.ref }}
           SYSTEM_PULLREQUEST_PULLREQUESTID=${{ github.event.pull_request.id }}
           SYSTEM_PULLREQUEST_SOURCECOMMITID=${{ github.event.pull_request.head.sha }}
           DEPLOYBASEPATH=pull/${{github.event.pull_request.number}}
           DEPLOYURL=https://${{env.DEPLOYHOST}}/pull/${{github.event.pull_request.number}}
-          BUILD_SOURCEBRANCHNAME='merge'
+          BUILD_SOURCEBRANCHNAME=${{ github.event.pull_request.head.ref }}
           EOT
         if: ${{ github.event_name == 'pull_request' && env.SKIP_SCREENER == ''}}
 

apps/vr-tests-react-components/screener.config.js

@@ -17,26 +17,33 @@ function getCurrentHash() {
 
   return '';
 }
+/**
+ *
+ * @param {string} SCREENER_API_KEY
+ * @param {string} BUILD_SOURCEBRANCHNAME
+ * @param {string} DEPLOYURL
+ * @param {string} SYSTEM_PULLREQUEST_TARGETBRANCH
+ * @returns
+ */
+function getConfig(SCREENER_API_KEY, BUILD_SOURCEBRANCHNAME, DEPLOYURL, SYSTEM_PULLREQUEST_TARGETBRANCH) {
+  const baseBranch = SYSTEM_PULLREQUEST_TARGETBRANCH
+    ? SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '')
+    : 'master';
+  // https://github.com/screener-io/screener-storybook#additional-configuration-options
+  const config = {
+    projectRepo: 'microsoft/fluentui/react-components',
+    storybookStaticBuildDir: 'dist/storybook',
+    storybookConfigDir: '.storybook',
+    apiKey: SCREENER_API_KEY,
+    resolution: '1024x768',
+    baseBranch,
+    failureExitCode: 0,
+    alwaysAcceptBaseBranch: true,
+    ...(BUILD_SOURCEBRANCHNAME !== 'master' ? { commit: getCurrentHash() } : null),
+    baseUrl: `${DEPLOYURL}/react-components-screener/iframe.html`,
+  };
+  console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2));
+  return config;
+}
 
-const baseBranch = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH
-  ? process.env.SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '')
-  : 'master';
-
-// https://github.com/screener-io/screener-storybook#additional-configuration-options
-const config = {
-  projectRepo: 'microsoft/fluentui/react-components',
-  storybookStaticBuildDir: 'dist/storybook',
-  storybookConfigDir: '.storybook',
-  apiKey: process.env.SCREENER_API_KEY,
-  resolution: '1024x768',
-  baseBranch,
-  failureExitCode: 0,
-  alwaysAcceptBaseBranch: true,
-  ...(process.env.BUILD_SOURCEBRANCH && process.env.BUILD_SOURCEBRANCH.indexOf('refs/pull') > -1
-    ? { commit: getCurrentHash() }
-    : null),
-  baseUrl: `${process.env.DEPLOYURL}/react-components-screener/iframe.html`,
-};
-console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2));
-
-module.exports = config;
+module.exports = getConfig;

apps/vr-tests/screener.config.js

@@ -20,25 +20,39 @@ function getCurrentHash() {
   return '';
 }
 
-const baseBranch = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH
-  ? process.env.SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '')
-  : 'master';
+/**
+ *
+ * @param {string} SCREENER_API_KEY
+ * @param {string} BUILD_SOURCEBRANCHNAME
+ * @param {string} DEPLOYURL
+ * @param {string} SYSTEM_PULLREQUEST_TARGETBRANCH
+ * @returns
+ */
+function getConfig(
+  SCREENER_API_KEY,
+  BUILD_SOURCEBRANCHNAME,
+  DEPLOYURL,
+  SYSTEM_PULLREQUEST_TARGETBRANCH,
+) {
+  const baseBranch = SYSTEM_PULLREQUEST_TARGETBRANCH
+    ? SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '')
+    : 'master';
 
-// https://github.com/screener-io/screener-storybook#additional-configuration-options
-const config = {
-  projectRepo: 'microsoft/fluentui',
-  storybookStaticBuildDir: 'dist/storybook',
-  storybookConfigDir: '.storybook',
-  apiKey: process.env.SCREENER_API_KEY,
-  resolution: '1024x768',
-  baseBranch,
-  failureExitCode: 0,
-  alwaysAcceptBaseBranch: true,
-  ...(process.env.BUILD_SOURCEBRANCH && process.env.BUILD_SOURCEBRANCH.indexOf('refs/pull') > -1
-    ? { commit: getCurrentHash() }
-    : null),
-  baseUrl: `${process.env.DEPLOYURL}/react-screener/iframe.html`,
-};
-console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2));
+  // https://github.com/screener-io/screener-storybook#additional-configuration-options
+  const config = {
+    projectRepo: 'microsoft/fluentui',
+    storybookStaticBuildDir: 'dist/storybook',
+    storybookConfigDir: '.storybook',
+    apiKey: SCREENER_API_KEY,
+    resolution: '1024x768',
+    baseBranch,
+    failureExitCode: 0,
+    alwaysAcceptBaseBranch: true,
+    ...(BUILD_SOURCEBRANCHNAME !== 'master' ? { commit: getCurrentHash() } : null),
+    baseUrl: `${DEPLOYURL}/react-screener/iframe.html`,
+  };
+  console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2));
+  return config;
+}
 
-module.exports = config;
+module.exports = getConfig;

scripts/config.ts

@@ -1,6 +1,7 @@
 import * as path from 'path';
 import * as _ from 'lodash';
 import * as webpack from 'webpack';
+import { URL } from 'url';
 
 // ------------------------------------
 // Environment vars
@@ -9,14 +10,16 @@ const env = process.env.NODE_ENV || 'development';
 const __DEV__ = env === 'development';
 const __PERF__ = !!process.env.PERF;
 const __PROD__ = env === 'production';
-let __BASENAME__ = process.env.DEPLOYBASEPATH
+const deployUrl = process.env.DEPLOYURL ? new URL(process.env.DEPLOYURL) : undefined;
+const deployBasePath = deployUrl ? deployUrl.pathname : undefined;
+let __BASENAME__ = deployBasePath
   ? // This needs a trailing slash or images won't work.
     // The path is different for standard PR deploy and screener deploy.
-    `/${process.env.DEPLOYBASEPATH}/${process.env.SCREENER_BUILD ? 'react-northstar-screener' : 'react-northstar'}/`
+    `${deployBasePath}/${process.env.SCREENER_BUILD ? 'react-northstar-screener' : 'react-northstar'}/`
   : '/';
 
 if (process.env.OFFICIALRELEASE) {
-  __BASENAME__ = `/${process.env.DEPLOYBASEPATH}/`;
+  __BASENAME__ = `/${deployBasePath}/`;
 }
 
 const __SKIP_ERRORS__ = !!process.env.SKIP_ERRORS;

scripts/gulp/tasks/screener.ts

@@ -36,7 +36,8 @@ task('screener:runner', cb => {
         process.exit(1);
       });
 
-  const screenerConfig = require(screenerConfigPath);
+  const getConfig = require(screenerConfigPath);
+  const screenerConfig = getConfig(process.env.SCREENER_API_KEY, process.env.BUILD_SOURCEBRANCHNAME);
 
   handlePromiseExit(screenerRunner(screenerConfig));
 });

scripts/screener/screener.config.js

@@ -30,34 +30,42 @@ require('tsconfig-paths').register({
 });
 
 const baseBranch = 'master';
-const sourceBranch = process.env.BUILD_SOURCEBRANCH;
-
-// https://github.com/screener-io/screener-runner
-module.exports = {
-  apiKey: process.env.SCREENER_API_KEY,
-  projectRepo: 'microsoft/fluentui/fluentui',
-
-  diffOptions: {
-    structure: true,
-    layout: true,
-    style: true,
-    content: true,
-    minLayoutPosition: 1, // Optional threshold for Layout changes. Defaults to 4 pixels.
-    minLayoutDimension: 1, // Optional threshold for Layout changes. Defaults to 10 pixels.
-    minShiftGraphic: 1, // Optional threshold for pixel shifts in graphics.
-    compareSVGDOM: false, // Pass if SVG DOM is the same. Defaults to false.
-  },
-
-  // screenshot every example in maximized mode
-  states: require('./screener.states').default,
-
-  alwaysAcceptBaseBranch: true,
-  baseBranch,
-  failureExitCode: 0,
-
-  ...(sourceBranch && sourceBranch.indexOf('refs/pull') > -1
-    ? {
-        commit: getCurrentHash(),
-      }
-    : null),
-};
+
+/**
+ *
+ * @param {string} SCREENER_API_KEY
+ * @param {string} BUILD_SOURCEBRANCHNAME
+ * @returns
+ */
+function getConfig(SCREENER_API_KEY, BUILD_SOURCEBRANCHNAME) {
+  // https://github.com/screener-io/screener-runner
+  return {
+    apiKey: SCREENER_API_KEY,
+    projectRepo: 'microsoft/fluentui/fluentui',
+
+    diffOptions: {
+      structure: true,
+      layout: true,
+      style: true,
+      content: true,
+      minLayoutPosition: 1, // Optional threshold for Layout changes. Defaults to 4 pixels.
+      minLayoutDimension: 1, // Optional threshold for Layout changes. Defaults to 10 pixels.
+      minShiftGraphic: 1, // Optional threshold for pixel shifts in graphics.
+      compareSVGDOM: false, // Pass if SVG DOM is the same. Defaults to false.
+    },
+
+    // screenshot every example in maximized mode
+    states: require('./screener.states').default,
+
+    alwaysAcceptBaseBranch: true,
+    baseBranch,
+    failureExitCode: 0,
+
+    ...(BUILD_SOURCEBRANCHNAME !== 'master'
+      ? {
+          commit: getCurrentHash(),
+        }
+      : null),
+  };
+}
+module.exports = getConfig;

scripts/screener/screener.runner.ts

@@ -76,10 +76,10 @@ export async function screenerRunner(screenerConfig: ScreenerRunnerConfig) {
   // https://github.com/microsoft/azure-pipelines-tasks/issues/9801
   const commit = process.env.SYSTEM_PULLREQUEST_SOURCECOMMITID;
   // https://github.com/screener-io/screener-runner/blob/2a8291fb1b0219c96c8428ea6644678b0763a1a1/src/ci.js#L101
-  let branchName = process.env.SYSTEM_PULLREQUEST_SOURCEBRANCH || process.env.BUILD_SOURCEBRANCHNAME;
+  let branchName = process.env.BUILD_SOURCEBRANCHNAME;
 
   if (!branchName) {
-    throw new Error('SYSTEM_PULLREQUEST_SOURCEBRANCH or BUILD_SOURCEBRANCHNAME env variable doesnt exist');
+    throw new Error('BUILD_SOURCEBRANCHNAME env variable doesnt exist');
   }
   if (!process.env.BUILD_BUILDID) {
     throw new Error('BUILD_BUILDID env variable doesnt exist');

scripts/tasks/screener.ts

@@ -10,7 +10,13 @@ import { getStorybook } from '@storybook/react';
  */
 export async function screener() {
   const screenerConfigPath = path.resolve(process.cwd(), './screener.config.js');
-  const screenerConfig: ScreenerRunnerConfig = require(screenerConfigPath);
+  const getConfig = require(screenerConfigPath);
+  const screenerConfig: ScreenerRunnerConfig = getConfig(
+    process.env.SCREENER_API_KEY,
+    process.env.BUILD_SOURCEBRANCHNAME,
+    process.env.DEPLOYURL,
+    process.env.SYSYEM_PULLREQUEST_TARGETBRANCH,
+  );
   console.log('screener config for run:');
   console.log(JSON.stringify(screenerConfig, null, 2));