SDA-3937 FOUC fix (#1629)

* SDA-3937 FOUC fix

* SDA-3937 FOUC fix for title bar on Windows

* SDA-3937 FOUC fix for title bar on Windows

* SDA-3937 FOUC fix for title bar on Windows

.vscode/launch.json

@@ -76,7 +76,7 @@
       "outFiles": ["${workspaceFolder}/lib/**/*.js"]
     },
     {
-      "name": "st2",
+      "name": "st3",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceFolder}",
@@ -84,7 +84,7 @@
       "windows": {
         "runtimeExecutable": "${workspaceFolder}/node_modules/electron/dist/Electron.exe"
       },
-      "args": [".", "--url=https://st2.symphony.com"],
+      "args": [".", "--url=https://st3.symphony.com"],
       "env": {
         "ELECTRON_DEBUGGING": "true",
         "ELECTRON_DEV": "true"
@@ -94,7 +94,7 @@
       "outFiles": ["${workspaceFolder}/lib/**/*.js"]
     },
     {
-      "name": "st2 (Build & Run)",
+      "name": "st3 (Build & Run)",
       "type": "node",
       "request": "launch",
       "cwd": "${workspaceFolder}",
@@ -103,7 +103,7 @@
         "runtimeExecutable": "${workspaceFolder}/node_modules/electron/dist/Electron.exe"
       },
       "preLaunchTask": "build",
-      "args": [".", "--url=https://st2.symphony.com"],
+      "args": [".", "--url=https://st3.symphony.com"],
       "env": {
         "ELECTRON_DEBUGGING": "true",
         "ELECTRON_DEV": "true"

gulpfile.js

@@ -5,7 +5,10 @@ const sourcemaps = require('gulp-sourcemaps');
 const tsc = require('gulp-typescript');
 const del = require('del');
 const path = require('path');
-
+const replace = require('gulp-replace');
+const template = require('gulp-template');
+const tap = require('gulp-tap');
+const rename = require('gulp-rename');
 const tsProject = tsc.createProject('./tsconfig.json');
 
 gulp.task('clean', function () {
@@ -35,6 +38,49 @@ gulp.task('less', function () {
     .pipe(gulp.dest(path.join(__dirname, 'lib/src')));
 });
 
+const extractFileNameFromPath = (filePath) => {
+  const basename = path.basename(filePath);
+  const filename = basename.split('.');
+  return filename[0];
+};
+
+gulp.task('templates', () => {
+  return (
+    gulp
+      .src('./lib/src/renderer/components/*.js', { base: './lib' })
+      // tap into the stream to get the current file and compile
+      // the template according to that
+      .pipe(
+        tap(function (file) {
+          const jsFilename = extractFileNameFromPath(file.path);
+          return gulp
+            .src('./src/renderer/react-window.html')
+            .pipe(
+              template({
+                sourcefile: file.path,
+              }),
+            )
+            .pipe(
+              replace(
+                /(<link rel="stylesheet" href="*"[^>]*>)/g,
+                function (_s, _match) {
+                  const cssFilePath = `lib/src/renderer/styles/${jsFilename}.css`;
+                  const doesFileExist = fs.existsSync(cssFilePath);
+                  if (doesFileExist) {
+                    const style = fs.readFileSync(cssFilePath, 'utf8');
+                    return '<style>\n' + style + '\n</style>';
+                  }
+                  return '';
+                },
+              ),
+            )
+            .pipe(rename(`${jsFilename}.html`))
+            .pipe(gulp.dest('./lib/src/renderer'));
+        }),
+      )
+  );
+});
+
 /**
  * Copy all assets to JS codebase
  */
@@ -91,4 +137,7 @@ gulp.task('setExpiry', function (done) {
   });
 });
 
-gulp.task('build', gulp.series('clean', 'compile', 'less', 'copy'));
+gulp.task(
+  'build',
+  gulp.series('clean', 'compile', 'less', 'templates', 'copy'),
+);

jest-config.json

@@ -1,25 +1,14 @@
 {
-  "roots": [
+  "roots": ["<rootDir>/spec"],
-    "<rootDir>/spec"
-  ],
   "transform": {
-    "^.+\\.tsx?$": "ts-jest"
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.svg$": "<rootDir>/svgTransform.js"
   },
   "testRegex": "(test|spec)\\.tsx?$",
-  "moduleFileExtensions": [
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
-    "ts",
-    "tsx",
-    "js",
-    "jsx",
-    "json",
-    "node"
-  ],
   "verbose": true,
   "collectCoverage": true,
-  "coverageReporters": [
+  "coverageReporters": ["text", "html"],
-    "text",
-    "html"
-  ],
   "coverageDirectory": "dist/coverage",
   "collectCoverageFrom": [
     "src/**/*.{ts,tsx}",
@@ -28,17 +17,18 @@
   ],
   "reporters": [
     "default",
-    ["./node_modules/jest-html-reporter", {
+    [
-      "pageTitle": "Symphony Electron Test Result",
+      "./node_modules/jest-html-reporter",
-      "includeFailureMsg": true,
+      {
-      "includeConsoleLog": true,
+        "pageTitle": "Symphony Electron Test Result",
-      "theme": "lightTheme",
+        "includeFailureMsg": true,
-      "sort": "status",
+        "includeConsoleLog": true,
-      "outputPath": "./dist/coverage/UnitTestsReport.html"
+        "theme": "lightTheme",
-    }]
+        "sort": "status",
-  ],
+        "outputPath": "./dist/coverage/UnitTestsReport.html"
-  "setupFiles": [
+      }
-    "./spec/setup/test-setup.js"
+    ]
   ],
+  "setupFiles": ["./spec/setup/test-setup.js"],
   "snapshotSerializers": ["enzyme-to-json/serializer"]
 }

package-lock.json

@@ -51,13 +51,18 @@
         "enzyme-to-json": "^3.3.5",
         "gulp": "4.0.2",
         "gulp-less": "4.0.1",
+        "gulp-rename": "^2.0.0",
+        "gulp-replace": "^1.1.3",
         "gulp-sourcemaps": "2.6.5",
+        "gulp-tap": "^2.0.0",
+        "gulp-template": "^5.0.0",
         "gulp-typescript": "5.0.1",
         "husky": "^4.3.8",
+        "imgurify": "^2.0.1",
         "jest": "25.2.4",
         "jest-html-reporter": "3.7.0",
         "js-yaml": "^4.1.0",
-        "less": "3.13.1",
+        "less": "^3.13.1",
         "ncp": "2.0.0",
         "node-abi": "^3.8.0",
         "npm-run-all": "4.1.5",
@@ -2778,6 +2783,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/expect": {
+      "version": "1.20.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/expect/-/expect-1.20.4.tgz",
+      "integrity": "sha1-gojlFze/fjq118d7+mlYg3RSZOU=",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/fs-extra": {
       "version": "9.0.13",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
@@ -2989,6 +3001,17 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/@types/vinyl": {
+      "version": "2.0.7",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/vinyl/-/vinyl-2.0.7.tgz",
+      "integrity": "sha1-lzmpoq+vmvMnYcVKDoLHNSefcmw=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/expect": "^1.20.4",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "15.0.13",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/yargs/-/yargs-15.0.13.tgz",
@@ -3936,6 +3959,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-unique": {
       "version": "0.3.2",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/array-unique/-/array-unique-0.3.2.tgz",
@@ -4653,6 +4686,19 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "node_modules/binaryextensions": {
+      "version": "2.3.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/binaryextensions/-/binaryextensions-2.3.0.tgz",
+      "integrity": "sha1-HSacv35iQ+qIaqQUU8NlHMvhPCI=",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      },
+      "funding": {
+        "url": "https://bevry.me/fund"
+      }
+    },
     "node_modules/bindings": {
       "version": "1.5.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/bindings/-/bindings-1.5.0.tgz",
@@ -6635,16 +6681,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/del/node_modules/array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/del/node_modules/globby": {
       "version": "6.1.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/globby/-/globby-6.1.0.tgz",
@@ -7173,9 +7209,9 @@
       }
     },
     "node_modules/domelementtype": {
-      "version": "2.1.0",
+      "version": "2.3.0",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domelementtype/-/domelementtype-2.1.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha1-qFHAgKbRw9lDRK7RUdmfZp7fWF4=",
+      "integrity": "sha1-XEXo6GmVJiYzHXqrMm0B2vZdWJ0=",
       "dev": true,
       "funding": [
         {
@@ -7196,13 +7232,13 @@
       }
     },
     "node_modules/domhandler": {
-      "version": "4.0.0",
+      "version": "4.3.1",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domhandler/-/domhandler-4.0.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha1-Aep4Id6ZbYX2kCnoH6hzwhgzCY4=",
+      "integrity": "sha1-jXkgM0FvWdaLwDpap7AYwcqJJ5w=",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "domelementtype": "^2.1.0"
+        "domelementtype": "^2.2.0"
       },
       "engines": {
         "node": ">= 4"
@@ -7212,15 +7248,15 @@
       }
     },
     "node_modules/domutils": {
-      "version": "2.5.0",
+      "version": "2.8.0",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domutils/-/domutils-2.5.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha1-QvSc/9q7kq0kMnizMf12HBwtMDk=",
+      "integrity": "sha1-RDfe9dtuLR9dbuhZvZXKfQIEgTU=",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.0.1",
+        "domelementtype": "^2.2.0",
-        "domhandler": "^4.0.0"
+        "domhandler": "^4.2.0"
       },
       "funding": {
         "url": "https://github.com/fb55/domutils?sponsor=1"
@@ -7307,19 +7343,6 @@
         "object.defaults": "^1.1.0"
       }
     },
-    "node_modules/each-props/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -8862,19 +8885,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/extend-shallow/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/extglob": {
       "version": "2.0.4",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/extglob/-/extglob-2.0.4.tgz",
@@ -9347,19 +9357,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/fined/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/flagged-respawn": {
       "version": "1.0.1",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
@@ -10401,6 +10398,50 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/gulp-rename": {
+      "version": "2.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-rename/-/gulp-rename-2.0.0.tgz",
+      "integrity": "sha1-m7w5YrDA9S/GfNXq/2wiPsW5z2w=",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/gulp-replace": {
+      "version": "1.1.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-replace/-/gulp-replace-1.1.3.tgz",
+      "integrity": "sha1-hkHNynjmg+hXPKSgEufk67fk22A=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.14.41",
+        "@types/vinyl": "^2.0.4",
+        "istextorbinary": "^3.0.0",
+        "replacestream": "^4.0.3",
+        "yargs-parser": ">=5.0.0-security.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gulp-replace/node_modules/@types/node": {
+      "version": "14.18.34",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/node/-/node-14.18.34.tgz",
+      "integrity": "sha1-zS5voNv7CKYlgqe5Z1WOc8MgYew=",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gulp-replace/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha1-kJa87r+ZDSG7MfqVFuDt4pSnfTU=",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/gulp-sourcemaps": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz",
@@ -10444,6 +10485,43 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/gulp-tap": {
+      "version": "2.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-tap/-/gulp-tap-2.0.0.tgz",
+      "integrity": "sha1-b2a3mHDcv8Nkz06+BzW2AIRzIA8=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "through2": "^3.0.1"
+      }
+    },
+    "node_modules/gulp-tap/node_modules/through2": {
+      "version": "3.0.2",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/through2/-/through2-3.0.2.tgz",
+      "integrity": "sha1-mfiJMc/HYex2eLQdXXM2tbage/Q=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "readable-stream": "2 || 3"
+      }
+    },
+    "node_modules/gulp-template": {
+      "version": "5.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-template/-/gulp-template-5.0.0.tgz",
+      "integrity": "sha1-nJWYpPss06yZkQRJm2XajCXMAPM=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.8.2",
+        "plugin-error": "^0.1.2",
+        "safe-buffer": "^5.1.1",
+        "through2": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/gulp-typescript": {
       "version": "5.0.1",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-typescript/-/gulp-typescript-5.0.1.tgz",
@@ -10824,9 +10902,9 @@
       }
     },
     "node_modules/htmlparser2": {
-      "version": "6.0.1",
+      "version": "6.1.0",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/htmlparser2/-/htmlparser2-6.0.1.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha1-QiUhIx721C5WvUEdqLpAqjbpFEY=",
+      "integrity": "sha1-xNditsM3GgXb5l6UrkOp+EX7j7c=",
       "dev": true,
       "funding": [
         "https://github.com/fb55/htmlparser2?sponsor=1",
@@ -10839,7 +10917,7 @@
       "dependencies": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.0.0",
-        "domutils": "^2.4.4",
+        "domutils": "^2.5.2",
         "entities": "^2.0.0"
       }
     },
@@ -11162,6 +11240,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/imgurify": {
+      "version": "2.0.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/imgurify/-/imgurify-2.0.1.tgz",
+      "integrity": "sha1-iDEvvRu3+EKk+Yz3N/DljGj/2yw=",
+      "dev": true,
+      "license": "BSD",
+      "dependencies": {
+        "mime": "^1.3.4",
+        "minimist": "^1.1.3",
+        "through2": "^2.0.1"
+      },
+      "bin": {
+        "imgurify": "cli.js"
+      }
+    },
+    "node_modules/imgurify/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -11612,6 +11718,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-promise/-/is-promise-2.2.2.tgz",
@@ -11884,6 +12003,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/istextorbinary": {
+      "version": "3.3.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/istextorbinary/-/istextorbinary-3.3.0.tgz",
+      "integrity": "sha1-BrHFfZSNoRRhvSN8AM4J6ZApZPI=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binaryextensions": "^2.2.0",
+        "textextensions": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://bevry.me/fund"
+      }
+    },
     "node_modules/jake": {
       "version": "10.8.5",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
@@ -13539,9 +13675,10 @@
     },
     "node_modules/less": {
       "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/less/-/less-3.13.1.tgz",
-      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
+      "integrity": "sha1-DryR0qDpwMZzW4PUlrCrBYMHeQk=",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "copy-anything": "^2.0.1",
         "tslib": "^1.10.0"
@@ -13663,19 +13800,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/liftoff/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -14440,19 +14564,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/mixin-deep/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/mkdirp": {
       "version": "0.5.5",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/mkdirp/-/mkdirp-0.5.5.tgz",
@@ -14917,9 +15028,9 @@
       }
     },
     "node_modules/nth-check": {
-      "version": "2.0.0",
+      "version": "2.1.1",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/nth-check/-/nth-check-2.0.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha1-G7T22scAcvwxPoyc0UF7UHTAoSU=",
+      "integrity": "sha1-yeq0KO/842zWuSySS9sADvHx7R0=",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -16912,6 +17023,44 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/replacestream": {
+      "version": "4.0.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/replacestream/-/replacestream-4.0.3.tgz",
+      "integrity": "sha1-PuV5gJK+Nksc2xSEMISSyz3/LzY=",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.3",
+        "object-assign": "^4.0.1",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/replacestream/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/replacestream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/request": {
       "version": "2.88.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/request/-/request-2.88.0.tgz",
@@ -17632,19 +17781,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/set-value/node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/sha.js": {
       "version": "2.4.11",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/sha.js/-/sha.js-2.4.11.tgz",
@@ -18088,9 +18224,9 @@
       }
     },
     "node_modules/source-map-support": {
-      "version": "0.5.19",
+      "version": "0.5.21",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/source-map-support/-/source-map-support-0.5.19.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha1-qYti+G3K9PZzmWSMCFKRq56P7WE=",
+      "integrity": "sha1-BP58f54e0tZiIzwoyys1ufY/bk8=",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -18947,6 +19083,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/textextensions": {
+      "version": "3.3.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/textextensions/-/textextensions-3.3.0.tgz",
+      "integrity": "sha1-A1MNUoe4Z3PAi3dFhYkUiHDMcdM=",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://bevry.me/fund"
+      }
+    },
     "node_modules/throat": {
       "version": "5.0.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/throat/-/throat-5.0.0.tgz",
@@ -22675,6 +22824,12 @@
         "@types/react": "*"
       }
     },
+    "@types/expect": {
+      "version": "1.20.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/expect/-/expect-1.20.4.tgz",
+      "integrity": "sha1-gojlFze/fjq118d7+mlYg3RSZOU=",
+      "dev": true
+    },
     "@types/fs-extra": {
       "version": "9.0.13",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
@@ -22870,6 +23025,16 @@
       "dev": true,
       "optional": true
     },
+    "@types/vinyl": {
+      "version": "2.0.7",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/vinyl/-/vinyl-2.0.7.tgz",
+      "integrity": "sha1-lzmpoq+vmvMnYcVKDoLHNSefcmw=",
+      "dev": true,
+      "requires": {
+        "@types/expect": "^1.20.4",
+        "@types/node": "*"
+      }
+    },
     "@types/yargs": {
       "version": "15.0.13",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/yargs/-/yargs-15.0.13.tgz",
@@ -23605,6 +23770,12 @@
       "integrity": "sha1-t5hCCtvrHego2ErNii4j0+/oXo0=",
       "dev": true
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "dev": true
+    },
     "array-unique": {
       "version": "0.3.2",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/array-unique/-/array-unique-0.3.2.tgz",
@@ -24143,6 +24314,12 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "binaryextensions": {
+      "version": "2.3.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/binaryextensions/-/binaryextensions-2.3.0.tgz",
+      "integrity": "sha1-HSacv35iQ+qIaqQUU8NlHMvhPCI=",
+      "dev": true
+    },
     "bindings": {
       "version": "1.5.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/bindings/-/bindings-1.5.0.tgz",
@@ -25692,12 +25869,6 @@
             "array-uniq": "^1.0.1"
           }
         },
-        "array-uniq": {
-          "version": "1.0.3",
-          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/array-uniq/-/array-uniq-1.0.3.tgz",
-          "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-          "dev": true
-        },
         "globby": {
           "version": "6.1.0",
           "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/globby/-/globby-6.1.0.tgz",
@@ -26096,9 +26267,9 @@
       "dev": true
     },
     "domelementtype": {
-      "version": "2.1.0",
+      "version": "2.3.0",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domelementtype/-/domelementtype-2.1.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha1-qFHAgKbRw9lDRK7RUdmfZp7fWF4=",
+      "integrity": "sha1-XEXo6GmVJiYzHXqrMm0B2vZdWJ0=",
       "dev": true
     },
     "domexception": {
@@ -26111,23 +26282,23 @@
       }
     },
     "domhandler": {
-      "version": "4.0.0",
+      "version": "4.3.1",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domhandler/-/domhandler-4.0.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha1-Aep4Id6ZbYX2kCnoH6hzwhgzCY4=",
+      "integrity": "sha1-jXkgM0FvWdaLwDpap7AYwcqJJ5w=",
       "dev": true,
       "requires": {
-        "domelementtype": "^2.1.0"
+        "domelementtype": "^2.2.0"
       }
     },
     "domutils": {
-      "version": "2.5.0",
+      "version": "2.8.0",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domutils/-/domutils-2.5.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha1-QvSc/9q7kq0kMnizMf12HBwtMDk=",
+      "integrity": "sha1-RDfe9dtuLR9dbuhZvZXKfQIEgTU=",
       "dev": true,
       "requires": {
         "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.0.1",
+        "domelementtype": "^2.2.0",
-        "domhandler": "^4.0.0"
+        "domhandler": "^4.2.0"
       }
     },
     "dotenv": {
@@ -26205,17 +26376,6 @@
       "requires": {
         "is-plain-object": "^2.0.1",
         "object.defaults": "^1.1.0"
-      },
-      "dependencies": {
-        "is-plain-object": {
-          "version": "2.0.4",
-          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-          "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-          "dev": true,
-          "requires": {
-            "isobject": "^3.0.1"
-          }
-        }
       }
     },
     "ecc-jsbn": {
@@ -27425,15 +27585,6 @@
           "requires": {
             "is-plain-object": "^2.0.4"
           }
-        },
-        "is-plain-object": {
-          "version": "2.0.4",
-          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-          "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-          "dev": true,
-          "requires": {
-            "isobject": "^3.0.1"
-          }
         }
       }
     },
@@ -27807,17 +27958,6 @@
         "object.defaults": "^1.1.0",
         "object.pick": "^1.2.0",
         "parse-filepath": "^1.0.1"
-      },
-      "dependencies": {
-        "is-plain-object": {
-          "version": "2.0.4",
-          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-          "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-          "dev": true,
-          "requires": {
-            "isobject": "^3.0.1"
-          }
-        }
       }
     },
     "flagged-respawn": {
@@ -28634,6 +28774,39 @@
         "vinyl-sourcemaps-apply": "^0.2.0"
       }
     },
+    "gulp-rename": {
+      "version": "2.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-rename/-/gulp-rename-2.0.0.tgz",
+      "integrity": "sha1-m7w5YrDA9S/GfNXq/2wiPsW5z2w=",
+      "dev": true
+    },
+    "gulp-replace": {
+      "version": "1.1.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-replace/-/gulp-replace-1.1.3.tgz",
+      "integrity": "sha1-hkHNynjmg+hXPKSgEufk67fk22A=",
+      "dev": true,
+      "requires": {
+        "@types/node": "^14.14.41",
+        "@types/vinyl": "^2.0.4",
+        "istextorbinary": "^3.0.0",
+        "replacestream": "^4.0.3",
+        "yargs-parser": ">=5.0.0-security.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.18.34",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/node/-/node-14.18.34.tgz",
+          "integrity": "sha1-zS5voNv7CKYlgqe5Z1WOc8MgYew=",
+          "dev": true
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha1-kJa87r+ZDSG7MfqVFuDt4pSnfTU=",
+          "dev": true
+        }
+      }
+    },
     "gulp-sourcemaps": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz",
@@ -28667,6 +28840,39 @@
         }
       }
     },
+    "gulp-tap": {
+      "version": "2.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-tap/-/gulp-tap-2.0.0.tgz",
+      "integrity": "sha1-b2a3mHDcv8Nkz06+BzW2AIRzIA8=",
+      "dev": true,
+      "requires": {
+        "through2": "^3.0.1"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "3.0.2",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/through2/-/through2-3.0.2.tgz",
+          "integrity": "sha1-mfiJMc/HYex2eLQdXXM2tbage/Q=",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.4",
+            "readable-stream": "2 || 3"
+          }
+        }
+      }
+    },
+    "gulp-template": {
+      "version": "5.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-template/-/gulp-template-5.0.0.tgz",
+      "integrity": "sha1-nJWYpPss06yZkQRJm2XajCXMAPM=",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.8.2",
+        "plugin-error": "^0.1.2",
+        "safe-buffer": "^5.1.1",
+        "through2": "^2.0.0"
+      }
+    },
     "gulp-typescript": {
       "version": "5.0.1",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/gulp-typescript/-/gulp-typescript-5.0.1.tgz",
@@ -28938,14 +29144,14 @@
       "dev": true
     },
     "htmlparser2": {
-      "version": "6.0.1",
+      "version": "6.1.0",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/htmlparser2/-/htmlparser2-6.0.1.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha1-QiUhIx721C5WvUEdqLpAqjbpFEY=",
+      "integrity": "sha1-xNditsM3GgXb5l6UrkOp+EX7j7c=",
       "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.0.0",
-        "domutils": "^2.4.4",
+        "domutils": "^2.5.2",
         "entities": "^2.0.0"
       }
     },
@@ -29161,6 +29367,25 @@
       "dev": true,
       "optional": true
     },
+    "imgurify": {
+      "version": "2.0.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/imgurify/-/imgurify-2.0.1.tgz",
+      "integrity": "sha1-iDEvvRu3+EKk+Yz3N/DljGj/2yw=",
+      "dev": true,
+      "requires": {
+        "mime": "^1.3.4",
+        "minimist": "^1.1.3",
+        "through2": "^2.0.1"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=",
+          "dev": true
+        }
+      }
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -29461,6 +29686,15 @@
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
       "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
     },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
     "is-promise": {
       "version": "2.2.2",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-promise/-/is-promise-2.2.2.tgz",
@@ -29648,6 +29882,16 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
+    "istextorbinary": {
+      "version": "3.3.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/istextorbinary/-/istextorbinary-3.3.0.tgz",
+      "integrity": "sha1-BrHFfZSNoRRhvSN8AM4J6ZApZPI=",
+      "dev": true,
+      "requires": {
+        "binaryextensions": "^2.2.0",
+        "textextensions": "^3.2.0"
+      }
+    },
     "jake": {
       "version": "10.8.5",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
@@ -30920,8 +31164,8 @@
     },
     "less": {
       "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/less/-/less-3.13.1.tgz",
-      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
+      "integrity": "sha1-DryR0qDpwMZzW4PUlrCrBYMHeQk=",
       "dev": true,
       "requires": {
         "copy-anything": "^2.0.1",
@@ -31006,17 +31250,6 @@
         "object.map": "^1.0.0",
         "rechoir": "^0.6.2",
         "resolve": "^1.1.7"
-      },
-      "dependencies": {
-        "is-plain-object": {
-          "version": "2.0.4",
-          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-          "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-          "dev": true,
-          "requires": {
-            "isobject": "^3.0.1"
-          }
-        }
       }
     },
     "lines-and-columns": {
@@ -31613,15 +31846,6 @@
           "requires": {
             "is-plain-object": "^2.0.4"
           }
-        },
-        "is-plain-object": {
-          "version": "2.0.4",
-          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-          "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-          "dev": true,
-          "requires": {
-            "isobject": "^3.0.1"
-          }
         }
       }
     },
@@ -31972,9 +32196,9 @@
       }
     },
     "nth-check": {
-      "version": "2.0.0",
+      "version": "2.1.1",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/nth-check/-/nth-check-2.0.0.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha1-G7T22scAcvwxPoyc0UF7UHTAoSU=",
+      "integrity": "sha1-yeq0KO/842zWuSySS9sADvHx7R0=",
       "dev": true,
       "requires": {
         "boolbase": "^1.0.0"
@@ -33457,6 +33681,40 @@
         "remove-trailing-separator": "^1.1.0"
       }
     },
+    "replacestream": {
+      "version": "4.0.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/replacestream/-/replacestream-4.0.3.tgz",
+      "integrity": "sha1-PuV5gJK+Nksc2xSEMISSyz3/LzY=",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.3",
+        "object-assign": "^4.0.1",
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        }
+      }
+    },
     "request": {
       "version": "2.88.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/request/-/request-2.88.0.tgz",
@@ -33995,15 +34253,6 @@
           "requires": {
             "is-extendable": "^0.1.0"
           }
-        },
-        "is-plain-object": {
-          "version": "2.0.4",
-          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-plain-object/-/is-plain-object-2.0.4.tgz",
-          "integrity": "sha1-LBY7P6+xtgbZ0Xko8FwqHDjgdnc=",
-          "dev": true,
-          "requires": {
-            "isobject": "^3.0.1"
-          }
         }
       }
     },
@@ -34322,9 +34571,9 @@
       }
     },
     "source-map-support": {
-      "version": "0.5.19",
+      "version": "0.5.21",
-      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/source-map-support/-/source-map-support-0.5.19.tgz",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha1-qYti+G3K9PZzmWSMCFKRq56P7WE=",
+      "integrity": "sha1-BP58f54e0tZiIzwoyys1ufY/bk8=",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -34998,6 +35247,12 @@
         "minimatch": "^3.0.4"
       }
     },
+    "textextensions": {
+      "version": "3.3.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/textextensions/-/textextensions-3.3.0.tgz",
+      "integrity": "sha1-A1MNUoe4Z3PAi3dFhYkUiHDMcdM=",
+      "dev": true
+    },
     "throat": {
       "version": "5.0.0",
       "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/throat/-/throat-5.0.0.tgz",

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "browserify": "run-s browserify-*",
     "browserify-preload": "browserify -o lib/src/renderer/_preload-main.js -x electron --insert-global-vars=__filename,__dirname lib/src/renderer/preload-main.js",
-    "browserify-preload-component": "browserify -o lib/src/renderer/_preload-component.js -x electron --insert-global-vars=__filename,__dirname lib/src/renderer/preload-component.js",
+    "browserify-preload-component": "browserify -o lib/src/renderer/_preload-component.js -x electron --insert-global-vars=__filename,__dirname -t imgurify lib/src/renderer/preload-component.js",
     "compile": "run-s lint compile:*",
     "compile:project": "gulp build",
     "dev": "gulp build && npm run browserify && cross-env ELECTRON_DEV=true electron .",
@@ -181,13 +181,18 @@
     "enzyme-to-json": "^3.3.5",
     "gulp": "4.0.2",
     "gulp-less": "4.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.3",
     "gulp-sourcemaps": "2.6.5",
+    "gulp-tap": "^2.0.0",
+    "gulp-template": "^5.0.0",
     "gulp-typescript": "5.0.1",
     "husky": "^4.3.8",
+    "imgurify": "^2.0.1",
     "jest": "25.2.4",
     "jest-html-reporter": "3.7.0",
     "js-yaml": "^4.1.0",
-    "less": "3.13.1",
+    "less": "^3.13.1",
     "ncp": "2.0.0",
     "node-abi": "^3.8.0",
     "npm-run-all": "4.1.5",

spec/__snapshots__/aboutApp.spec.ts.snap

@@ -11,7 +11,7 @@ exports[`about app should render correctly 1`] = `
     <img
       alt="Symphony Logo"
       className="AboutApp-logo"
-      src="../renderer/assets/new-symphony-logo.svg"
+      src={Object {}}
     />
   </div>
   <div
@@ -81,7 +81,7 @@ exports[`about app should render correctly 1`] = `
       >
         <img
           alt="Symphony Logo"
-          src="../renderer/assets/copy-icon.svg"
+          src={Object {}}
         />
         <span>
           Copy config to clipboard

spec/__snapshots__/snippingTool.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`Snipping Tool should render correctly 1`] = `
         title="Pen"
       >
         <img
-          src="../renderer/assets/snip-draw.svg"
+          src={Object {}}
         />
       </button>
       <button
@@ -31,7 +31,7 @@ exports[`Snipping Tool should render correctly 1`] = `
         title="Highlight"
       >
         <img
-          src="../renderer/assets/snip-highlight.svg"
+          src={Object {}}
         />
       </button>
       <button
@@ -41,7 +41,7 @@ exports[`Snipping Tool should render correctly 1`] = `
         title="Erase"
       >
         <img
-          src="../renderer/assets/snip-erase.svg"
+          src={Object {}}
         />
       </button>
     </div>

src/app/window-handler.ts

@@ -764,11 +764,12 @@ export class WindowHandler {
           disableBlinkFeatures: AUX_CLICK,
         },
       }) as ICustomBrowserView;
+      const componentName = 'windows-title-bar';
       const titleBarWindowUrl = format({
-        pathname: require.resolve('../renderer/react-window.html'),
+        pathname: require.resolve(`../renderer/${componentName}.html`),
         protocol: 'file',
         query: {
-          componentName: 'title-bar',
+          componentName,
           locale: i18n.getLocale(),
           title: i18n.t('WelcomeText', 'Welcome')(),
         },

src/app/window-utils.ts

@@ -233,7 +233,7 @@ export const createComponentWindow = (
   browserWindow.setMenu(null as any);
 
   const targetUrl = format({
-    pathname: require.resolve('../renderer/react-window.html'),
+    pathname: require.resolve(`../renderer/${componentName}.html`),
     protocol: 'file',
     query: {
       componentName,
@@ -982,20 +982,16 @@ export const updateFeaturesForCloudConfig = async (
     podLevelEntitlements.autoLaunchPath &&
     podLevelEntitlements.autoLaunchPath.match(/\\\\/g)
   ) {
-    podLevelEntitlements.autoLaunchPath = podLevelEntitlements.autoLaunchPath.replace(
+    podLevelEntitlements.autoLaunchPath =
-      /\\+/g,
+      podLevelEntitlements.autoLaunchPath.replace(/\\+/g, '\\');
-      '\\',
-    );
   }
   if (
     podLevelEntitlements &&
     podLevelEntitlements.userDataPath &&
     podLevelEntitlements.userDataPath.match(/\\\\/g)
   ) {
-    podLevelEntitlements.userDataPath = podLevelEntitlements.userDataPath.replace(
+    podLevelEntitlements.userDataPath =
-      /\\+/g,
+      podLevelEntitlements.userDataPath.replace(/\\+/g, '\\');
-      '\\',
-    );
   }
 
   logger.info(
@@ -1208,10 +1204,10 @@ export const loadBrowserViews = async (
   mainWindow.addBrowserView(mainView);
 
   const titleBarWindowUrl = format({
-    pathname: require.resolve('../renderer/react-window.html'),
+    pathname: require.resolve('../renderer/windows-title-bar.html'),
     protocol: 'file',
     query: {
-      componentName: 'title-bar',
+      componentName: 'windows-title-bar',
       locale: i18n.getLocale(),
     },
     slashes: true,

src/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const svgContent: string;
+  export = svgContent;
+}

src/renderer/components/about-app.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { productName } from '../../../package.json';
 import { apiCmds, apiName } from '../../common/api-interface';
 import { i18n } from '../../common/i18n-preload';
+import * as CopyIcon from '../../renderer/assets/copy-icon.svg';
+import * as SymphonyLogo from '../../renderer/assets/new-symphony-logo.svg';
 interface IState {
   userConfig: object;
   globalConfig: object;
@@ -125,7 +127,7 @@ export default class AboutApp extends React.Component<{}, IState> {
         <div className='AboutApp-header-container'>
           <img
             className='AboutApp-logo'
-            src='../renderer/assets/new-symphony-logo.svg'
+            src={SymphonyLogo}
             alt={i18n.t('Symphony Logo', ABOUT_SYMPHONY_NAMESPACE)()}
           />
         </div>
@@ -156,7 +158,7 @@ export default class AboutApp extends React.Component<{}, IState> {
               data-testid={'COPY_BUTTON'}
             >
               <img
-                src='../renderer/assets/copy-icon.svg'
+                src={CopyIcon}
                 alt={i18n.t('Symphony Logo', ABOUT_SYMPHONY_NAMESPACE)()}
               ></img>
               <span>

src/renderer/components/snipping-tool.tsx

@@ -3,6 +3,9 @@ import * as React from 'react';
 import { svgAsPngUri } from 'save-svg-as-png';
 import { i18n } from '../../common/i18n-preload';
 import { ScreenShotAnnotation } from '../../common/ipcEvent';
+import * as PenIcon from '../../renderer/assets/snip-draw.svg';
+import * as EraseIcon from '../../renderer/assets/snip-erase.svg';
+import * as HighlightIcon from '../../renderer/assets/snip-highlight.svg';
 import {
   AnalyticsElements,
   ScreenSnippetActionTypes,
@@ -10,7 +13,6 @@ import {
 import AnnotateArea from './annotate-area';
 import ColorPickerPill, { IColor } from './color-picker-pill';
 import MenuButton from './menu-button';
-
 const { useState, useRef, useEffect, useLayoutEffect } = React;
 
 export enum Tool {
@@ -90,9 +92,8 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
     shouldRenderHighlightColorPicker,
     setShouldRenderHighlightColorPicker,
   ] = useState(false);
-  const [shouldRenderPenColorPicker, setShouldRenderPenColorPicker] = useState(
+  const [shouldRenderPenColorPicker, setShouldRenderPenColorPicker] =
-    false,
+    useState(false);
-  );
 
   const mergeImage = async () => {
     const svg = document.getElementById('annotate-area');
@@ -320,7 +321,7 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
             onClick={usePen}
             title={i18n.t('Pen', SNIPPING_TOOL_NAMESPACE)()}
           >
-            <img src='../renderer/assets/snip-draw.svg' />
+            <img src={PenIcon} />
           </button>
           <button
             data-testid='highlight-button'
@@ -329,7 +330,7 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
             onClick={useHighlight}
             title={i18n.t('Highlight', SNIPPING_TOOL_NAMESPACE)()}
           >
-            <img src='../renderer/assets/snip-highlight.svg' />
+            <img src={HighlightIcon} />
           </button>
           <button
             data-testid='erase-button'
@@ -338,7 +339,7 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
             onClick={useEraser}
             title={i18n.t('Erase', SNIPPING_TOOL_NAMESPACE)()}
           >
-            <img src='../renderer/assets/snip-erase.svg' />
+            <img src={EraseIcon} />
           </button>
         </div>
         <div className='clear-actions'>

src/renderer/preload-component.ts

@@ -24,17 +24,9 @@ const enum components {
   notificationSettings = 'notification-settings',
   welcome = 'welcome',
   snippingTool = 'snipping-tool',
-  titleBar = 'title-bar',
+  titleBar = 'windows-title-bar',
 }
 
-const loadStyle = (style) => {
-  const styles = document.createElement('link');
-  styles.rel = 'stylesheet';
-  styles.type = 'text/css';
-  styles.href = `./styles/${style}.css`;
-  document.getElementsByTagName('head')[0].appendChild(styles);
-};
-
 /**
  * Loads the appropriate component
  */
@@ -46,36 +38,29 @@ const load = () => {
   let component;
   switch (componentName) {
     case components.aboutApp:
-      loadStyle(components.aboutApp);
       component = AboutBox;
       document.title = i18n.t('About Symphony', 'AboutSymphony')();
       break;
     case components.screenPicker:
-      loadStyle(components.screenPicker);
       document.title = i18n.t('Screen Picker - Symphony')();
       component = ScreenPicker;
       break;
     case components.screenSharingIndicator:
-      loadStyle(components.screenSharingIndicator);
       document.title = i18n.t('Screen Sharing Indicator - Symphony')();
       component = ScreenSharingIndicator;
       break;
     case components.screenSharingFrame:
-      loadStyle(components.screenSharingFrame);
       component = ScreenSharingFrame;
       break;
     case components.snippingTool:
-      loadStyle(components.snippingTool);
       document.title = i18n.t('Symphony')();
       component = SnippingTool;
       break;
     case components.basicAuth:
-      loadStyle(components.basicAuth);
       document.title = i18n.t('Basic Authentication - Symphony')();
       component = BasicAuth;
       break;
     case components.notification:
-      loadStyle(components.notification);
       document.title = i18n.t('Notification - Symphony')();
       component = NotificationComp;
       break;
@@ -84,19 +69,16 @@ const load = () => {
         'Notification Settings - Symphony',
         'NotificationSettings',
       )();
-      loadStyle(components.notificationSettings);
       component = NotificationSettings;
       break;
     case components.welcome:
       document.title = i18n.t('WelcomeText', 'Welcome')();
-      loadStyle(components.welcome);
       component = Welcome;
       break;
     case components.titleBar:
       if (title) {
         document.title = title;
       }
-      loadStyle(components.titleBar);
       component = WindowsTitleBar;
       break;
   }

src/renderer/react-window.html

@@ -17,7 +17,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="stylesheet" href="" />
   </head>
+
   <body>
     <div id="Root"></div>
   </body>

svgTransform.js

@@ -0,0 +1,10 @@
+module.exports = {
+  process() {
+    return {
+      code: `module.exports = {};`,
+    };
+  },
+  getCacheKey() {
+    return 'svgTransform';
+  },
+};

tsconfig.json

@@ -25,5 +25,8 @@
     "typeRoots": ["node_modules/@types"]
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "lib", "tests", "spec"]
+  "exclude": ["node_modules", "lib", "tests", "spec"],
+  "exports": {
+    "src/renderer/components/about-app": "./lib/about-app/index.js"
+  }
 }