chore(explorer): enable safari fix browser page (#704)

* Enable Safari
* Fix Supported Browser page

client/configuration/webpack/obsoleteHTMLTemplate.html

@@ -11,10 +11,7 @@
     font-family: 'Inter, sans serif';
   "
 >
-  <img
-    src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/cellxgene-logo.png"
-    style="width: 320px"
-  />
+  <img src="/images/cellxgene.png" style="width: 320px" />
   <div
     style="
       margin-top: 16px;
@@ -38,27 +35,35 @@
       <a
         href="https://www.google.com/chrome/?hl=en%22"
         aria-label="Download Google Chrome"
+        target="_blank"
       >
-        <img
-          src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/chrome.png"
-          style="width: 80px; height: 80px"
-        />
+        <img src="/images/chrome.png" style="width: 80px; height: 80px" />
         <div>Chrome &gt; 60</div>
       </a>
-      <a href="https://www.mozilla.com/firefox/" aria-label="Download Firefox">
-        <img
-          src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/firefox.png"
-          style="width: 80px; height: 80px"
-        />
+      <a
+        href="https://www.mozilla.com/firefox/"
+        aria-label="Download Firefox"
+        target="_blank"
+      >
+        <img src="/images/firefox.png" style="width: 80px; height: 80px" />
         <div>Firefox ≥ 60</div>
       </a>
-      <a href="//www.microsoft.com/edge" aria-label="Download Edge">
-        <img
-          src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/edge.png"
-          style="width: 80px; height: 80px"
-        />
+      <a
+        href="https://www.microsoft.com/edge"
+        aria-label="Download Edge"
+        target="_blank"
+      >
+        <img src="/images/edge.png" style="width: 80px; height: 80px" />
         <div>Edge ≥ 79</div>
       </a>
+      <a
+        href="https://www.apple.com/ca/safari/"
+        aria-label="Download Safari"
+        target="_blank"
+      >
+        <img src="/images/safari.png" style="width: 80px; height: 80px" />
+        <div>Safari ≥ 12</div>
+      </a>
     </div>
   </div>
 </div>

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

@@ -31,6 +31,7 @@ const devConfig = {
     // so it ignores the base_url (/d, /e) and dataset in the url.
     // e.g., http://localhost:3000/static/assets/heatmap.svg
     publicPath: "/",
+    assetModuleFilename: "images/[name][ext][query]",
   },
   module: {
     rules: [
@@ -41,12 +42,7 @@ const devConfig = {
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
-        loader: "file-loader",
-        options: {
-          name: "static/assets/[name].[ext]",
-          // (thuang): This is needed to make sure @font url path is '/static/assets/'
-          publicPath: "/",
-        },
+        type: "asset/resource",
       },
     ],
   },
@@ -57,7 +53,7 @@ const devConfig = {
     }),
     new FaviconsWebpackPlugin({
       logo: "./favicon.png",
-      prefix: "static/img/",
+      prefix: "static/assets/",
       favicons: {
         icons: {
           android: false,

client/configuration/webpack/webpack.config.prod.js

@@ -35,6 +35,7 @@ const prodConfig = {
   cache: false,
   output: {
     filename: "static/[name]-[contenthash].js",
+    assetModuleFilename: "images/[name][ext][query]",
   },
   optimization: {
     minimize: true,
@@ -55,10 +56,7 @@ const prodConfig = {
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
-        loader: "file-loader",
-        options: {
-          name: "static/assets/[name]-[contenthash].[ext]",
-        },
+        type: "asset/resource",
       },
     ],
   },

client/package.json

@@ -36,8 +36,8 @@
     "iOS >= 10.3",
     "Firefox >= 60",
     "Edge >= 79",
-    "not Explorer > 0",
-    "not Safari > 0"
+    "Safari >= 12",
+    "not Explorer > 0"
   ],
   "dependencies": {
     "@aws-sdk/client-secrets-manager": "^3.13.0",

client/src/index.tsx

@@ -9,6 +9,16 @@ import "./index.css";
 import App from "./components/app";
 import store from "./reducers";
 
+/**
+ * These are imported for Webpack asset/resource module
+ * to bundle in order to be used in obsolete browser template
+ */
+import "./assets/img/safari.png";
+import "./assets/img/chrome.png";
+import "./assets/img/firefox.png";
+import "./assets/img/edge.png";
+import "./assets/img/cellxgene.png";
+
 FocusStyleManager.onlyShowFocusOnTabs();
 
 ReactDOM.render(