fix: 156 obsolete browsers

client/configuration/webpack/obsoleteBrowsers.js

@@ -0,0 +1,22 @@
+/* eslint-disable @blueprintjs/classes-constants -- do not import files */
+const dataset =
+  typeof document !== "undefined" &&
+  document.querySelector("#obsolete-browsers").dataset;
+
+const datasetRegex = dataset.regex;
+
+const regex = new RegExp(datasetRegex.slice(1, -1));
+
+if (dataset && !regex.test(navigator.userAgent)) {
+  const root = document.getElementById("root");
+  root.remove();
+  const portals = document.getElementsByClassName("bp3-portal");
+  for (let i = 0; i < portals.length; i += 1) {
+    portals[i].remove();
+  }
+
+  const element = document.createElement("div");
+  element.innerHTML = dataset.template;
+  document.body.appendChild(element);
+}
+/* eslint-enable @blueprintjs/classes-constants -- do not import files */

client/configuration/webpack/obsoleteHTMLTemplate.html

@@ -1,12 +1,3 @@
-<script>
-  /** Reflect ANY changes to this script in the script hash in `server/eb/app.py` **/
-  var root = document.getElementById("root");
-  root.remove();
-  var portals = document.getElementsByClassName("bp3-portal");
-  for (var i = 0; i < portals.length; i += 1) {
-    portals[i].remove();
-  }
-</script>
 <div
   style="
     display: flex;

client/configuration/webpack/webpack.config.dev.js

@@ -8,8 +8,6 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 // eslint-disable-next-line @typescript-eslint/no-var-requires --- FIXME: disabled temporarily on migrate to TS.
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
 // eslint-disable-next-line @typescript-eslint/no-var-requires --- FIXME: disabled temporarily on migrate to TS.
-const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
-// eslint-disable-next-line @typescript-eslint/no-var-requires --- FIXME: disabled temporarily on migrate to TS.
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires --- FIXME: disabled temporarily on migrate to TS.
@@ -83,9 +81,6 @@ const devConfig = {
         CXG_SERVER_PORT: process.env.CXG_SERVER_PORT || "5005",
       }),
     }),
-    new ScriptExtHtmlWebpackPlugin({
-      async: "obsolete",
-    }),
   ],
   infrastructureLogging: {
     level: "warn",

client/configuration/webpack/webpack.config.shared.js

@@ -2,9 +2,9 @@
 const path = require("path");
 const fs = require("fs");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const ObsoleteWebpackPlugin = require("obsolete-webpack-plugin");
-const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
 const webpack = require("webpack");
+const CopyPlugin = require("copy-webpack-plugin");
+const SUPPORTED_BROWSERS_REGEX = require("./SUPPORTED_BROWSERS_REGEX");
 
 const src = path.resolve("src");
 const nodeModules = path.resolve("node_modules");
@@ -16,7 +16,7 @@ const rawObsoleteHTMLTemplate = fs.readFileSync(
   "utf8"
 );
 
-const obsoleteHTMLTemplate = rawObsoleteHTMLTemplate.replace(/'/g, '"');
+const obsoleteHTMLTemplate = rawObsoleteHTMLTemplate.replace(/"/g, "'");
 
 const deploymentStage = process.env.DEPLOYMENT_STAGE || "test";
 
@@ -68,21 +68,23 @@ module.exports = {
     ],
   },
   plugins: [
-    new ObsoleteWebpackPlugin({
-      name: "obsolete",
-      template: obsoleteHTMLTemplate,
-      promptOnNonTargetBrowser: false,
-    }),
-    new ScriptExtHtmlWebpackPlugin({
-      async: "obsolete",
-    }),
     new webpack.DefinePlugin({
+      OBSOLETE_TEMPLATE: JSON.stringify(obsoleteHTMLTemplate),
+      OBSOLETE_REGEX: JSON.stringify(String(SUPPORTED_BROWSERS_REGEX)),
       PLAUSIBLE_DATA_DOMAIN: JSON.stringify(
         deploymentStage === "prod"
           ? "cellxgene.cziscience.com"
           : "cellxgene.staging.single-cell.czi.technology"
       ),
     }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "configuration/webpack/obsoleteBrowsers.js",
+          to: "static/obsoleteBrowsers.js",
+        },
+      ],
+    }),
   ],
 };
 /* eslint-enable @blueprintjs/classes-constants -- we don't import blueprint here  */

client/index.html

@@ -42,5 +42,12 @@
     >
 
     <div id="root"></div>
+    <script
+      async
+      src="static/obsoleteBrowsers.js"
+      id="obsolete-browsers"
+      data-template="<%= OBSOLETE_TEMPLATE %>"
+      data-regex="<%= OBSOLETE_REGEX %>"
+    ></script>
   </body>
 </html>

client/index_template.html

@@ -55,6 +55,13 @@
     </noscript>
 
     <div id="root"></div>
+    <script
+      async
+      src="static/obsoleteBrowsers.js"
+      id="obsolete-browsers"
+      data-template="<%= OBSOLETE_TEMPLATE %>"
+      data-regex="<%= OBSOLETE_REGEX %>"
+    ></script>
     {% for script in SCRIPTS -%}
     <script type="text/javascript"
       {{ ('integrity="%s"' % script.integrity) | safe if script.integrity }}