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,32 @@ function getCurrentHash() {
 
  return '';
 }
+/**
+ *
+ * @param {Object} options
+ * @param {string} options.screenerApiKey
+ * @param {string} options.sourceBranchName
+ * @param {string} options.deployUrl
+ * @param {string} options.targetBranch
+ * @returns
+ */
+function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch }) {
+ const baseBranch = targetBranch ? 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: screenerApiKey,
+ resolution: '1024x768',
+ baseBranch,
+ failureExitCode: 0,
+ alwaysAcceptBaseBranch: true,
+ ...(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,33 @@ function getCurrentHash() {
  return '';
 }
 
-const baseBranch = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH
- ? process.env.SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '')
- : 'master';
+/**
+ *
+ * @param {Object} options
+ * @param {string} options.screenerApiKey
+ * @param {string} options.sourceBranchName
+ * @param {string} options.deployUrl
+ * @param {string} options.targetBranch
+ * @returns
+ */
+function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch }) {
+ const baseBranch = targetBranch ? 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: screenerApiKey,
+  resolution: '1024x768',
+  baseBranch,
+  failureExitCode: 0,
+  alwaysAcceptBaseBranch: true,
+  ...(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,11 @@ task('screener:runner', cb => {
  process.exit(1);
  });
 
- const screenerConfig = require(screenerConfigPath);
+ const getConfig = require(screenerConfigPath);
+ const screenerConfig = getConfig({
+ screenerApiKey: process.env.SCREENER_API_KEY,
+ sourceBranchName: process.env.BUILD_SOURCEBRANCHNAME,
+ });
 
  handlePromiseExit(screenerRunner(screenerConfig));
 });

scripts/screener/screener.config.js

@@ -30,34 +30,43 @@ 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 {Object} options
+ * @param {string} options.screenerApiKey
+ * @param {string} options.sourceBranchName
+ * @returns
+ */
+function getConfig({ screenerApiKey, sourceBranchName }) {
+ // https://github.com/screener-io/screener-runner
+ return {
+ apiKey: screenerApiKey,
+ 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,
+
+ ...(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({
+ screenerApiKey: process.env.SCREENER_API_KEY,
+ sourceBranchName: process.env.BUILD_SOURCEBRANCHNAME,
+ deployUrl: process.env.DEPLOYURL,
+ targetBranch: process.env.SYSYEM_PULLREQUEST_TARGETBRANCH,
+ });
  console.log('screener config for run:');
  console.log(JSON.stringify(screenerConfig, null, 2));