From 16aaf7227eb3b6eeeeeffd77c66813ac9660d70d Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Thu, 31 Oct 2019 21:03:05 -0700
Subject: [PATCH] Web console: work in IE11 (#8804)

* fix IE11

* also support flexbox
---
 web-console/babel.config.js                     |  5 ++++-
 .../src/components/header-bar/header-bar.tsx    |  8 +++++++-
 web-console/src/entry.scss                      |  5 -----
 web-console/webpack.config.js                   | 17 ++++++++++++-----
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/web-console/babel.config.js b/web-console/babel.config.js
index 941e4704701f..c425c2c9d3ec 100644
--- a/web-console/babel.config.js
+++ b/web-console/babel.config.js
@@ -25,7 +25,10 @@ module.exports = function (api) {
       {
         "useBuiltIns": "entry",
         "corejs": 3,
-        "forceAllTransforms": true
+        "forceAllTransforms": true,
+        "targets": {
+          "ie": "11"
+        }
       }
     ]
   ];
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 3a87b40812b0..e81ee12743a2 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -61,7 +61,13 @@ export type HeaderActiveTab =
 function Logo() {
   return (
     <div className="logo">
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 134">
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 288 134"
+        width="288"
+        height="134"
+      >
         <path
           fill="#FFFFFF"
           d="M136.7,67.5c0.5-6.1,5-10.4,10.6-10.4c3.9,0,6.5,2,7.4,4.3l1.1-12.4c0-0.1,0.3-0.2,0.7-0.2
diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss
index 2f2709cf23d1..22508e9c24fb 100644
--- a/web-console/src/entry.scss
+++ b/web-console/src/entry.scss
@@ -43,11 +43,6 @@ body {
   }
 }
 
-svg {
-  width: auto;
-  height: auto;
-}
-
 .app-container {
   position: absolute;
   height: 100%;
diff --git a/web-console/webpack.config.js b/web-console/webpack.config.js
index c3ffcf023622..1dec2f401f08 100644
--- a/web-console/webpack.config.js
+++ b/web-console/webpack.config.js
@@ -21,8 +21,6 @@ const path = require('path');
 const postcssPresetEnv = require('postcss-preset-env');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-const ALWAYS_BABEL = false;
-
 const { version } = require('./package.json');
 
 function friendlyErrorFormatter(e) {
@@ -40,7 +38,15 @@ module.exports = env => {
   };
 
   const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
-  console.log(`Webpack running in ${mode} mode`);
+  const useBabel = process.env.babel || mode === 'production';
+  console.log(`Webpack running in ${mode} mode. ${useBabel ? 'Will' : 'Wont'} use babel.`);
+
+  function babelTest(s) {
+    // https://github.com/zloirock/core-js/issues/514
+    if (s.includes('/node_modules/core-js/')) return false;
+    return /\.m?js$/.test(s);
+  }
+
   return {
     mode: mode,
     devtool: 'hidden-source-map',
@@ -98,7 +104,7 @@ module.exports = env => {
           ],
         },
         {
-          test: ALWAYS_BABEL || mode === 'production' ? /\.m?js$/ : /^xxx$/,
+          test: useBabel ? babelTest : /^xxx_nothing_will_match_$/,
           use: {
             loader: 'babel-loader',
           },
@@ -114,7 +120,8 @@ module.exports = env => {
                 ident: 'postcss',
                 plugins: () => [
                   postcssPresetEnv({
-                    browsers: ['> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1'],
+                    autoprefixer: { grid: "no-autoplace" },
+                    browsers: ['> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1', 'ie 11'],
                   }),
                 ],
               },