Web console: work in IE11 (#8804)

* fix IE11

* also support flexbox

web-console/babel.config.js

@@ -25,7 +25,10 @@ module.exports = function (api) {
       {
         "useBuiltIns": "entry",
         "corejs": 3,
-        "forceAllTransforms": true
+        "forceAllTransforms": true,
+        "targets": {
+          "ie": "11"
+        }
       }
     ]
   ];

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

web-console/src/entry.scss

@@ -43,11 +43,6 @@ body {
   }
 }
 
-svg {
-  width: auto;
-  height: auto;
-}
-
 .app-container {
   position: absolute;
   height: 100%;

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'],
                   }),
                 ],
               },