Upgrade EUI; theme refactor

gatsby-config.js

@@ -17,7 +17,12 @@ module.exports = {
     },
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
-    'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-plugin-sass',
+      options: {
+        implementation: require('node-sass'),
+      },
+    },
     'gatsby-plugin-typescript',
     {
       resolve: 'gatsby-plugin-manifest',

gatsby-node.js

@@ -4,17 +4,9 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
-exports.onCreateWebpackConfig = ({ stage, loaders, plugins, actions }) => {
+exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
   if (stage === 'build-html') {
     actions.setWebpackConfig({
-      module: {
-        rules: [
-          {
-            test: /react-ace/,
-            use: loaders.null(),
-          },
-        ],
-      },
       plugins: [
         plugins.define({
           HTMLElement: {},

package.json

@@ -10,41 +10,44 @@
     "@elastic/charts": "^17.0.2",
     "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
-    "@elastic/eui": "^27.3.0",
+    "@elastic/eui": "^43.1.1",
+    "@emotion/cache": "^11.7.1",
+    "@emotion/react": "^11.7.1",
     "@types/enzyme": "^3.10.3",
     "enzyme": "^3.10.0",
     "eslint-plugin-json": "^1.4.0",
-    "gatsby": "^2.19.10",
-    "gatsby-image": "^2.1.0",
-    "gatsby-plugin-manifest": "^2.2.40",
-    "gatsby-plugin-offline": "^2.1.1",
-    "gatsby-plugin-react-helmet": "^3.0.12",
-    "gatsby-plugin-sass": "^2.0.11",
-    "gatsby-plugin-sharp": "^2.0.37",
-    "gatsby-plugin-typescript": "^2.0.14",
-    "gatsby-source-filesystem": "^2.0.37",
-    "gatsby-transformer-sharp": "^2.1.19",
+    "gatsby": "^3.0.0",
+    "gatsby-image": "^3.0.0",
+    "gatsby-plugin-manifest": "^3.0.0",
+    "gatsby-plugin-offline": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-sass": "^4.0.0",
+    "gatsby-plugin-sharp": "^3.0.0",
+    "gatsby-plugin-typescript": "^3.0.0",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.0.0",
     "gh-pages": "^2.0.1",
+    "lodash": "^4.17.21",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
-    "node-sass": "^4.12.0",
+    "node-sass": "^6.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.2",
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-proposal-class-properties": "^7.4.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.6.2",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.6.0",
+    "@babel/preset-typescript": "^7.16.5",
     "@types/node": "^12.7.7",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
     "@types/react-virtualized": "^9.21.2",
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
@@ -63,7 +66,7 @@
     "husky": "^3.0.4",
     "lint-staged": "^9.2.4",
     "prettier": "^1.18.2",
-    "typescript": "^3.5.3"
+    "typescript": "4.1.3"
   },
   "keywords": [
     "gatsby",

src/components/chrome/chrome.tsx

@@ -4,8 +4,9 @@
  *
  * See: https://www.gatsbyjs.org/docs/static-query/
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import _ from 'lodash';
+import createCache from '@emotion/cache';
 
 import {
   EuiPopover,
@@ -24,6 +25,7 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiShowFor,
+  EuiProvider,
 } from '@elastic/eui';
 
 import {
@@ -36,13 +38,20 @@ import { HeaderSpacesMenu } from './header_spaces_menu';
 
 import HeaderUpdates from './header_updates';
 
-export const ThemeContext = React.createContext('dark');
+import '../../themes/theme_dark.scss';
+import '../../themes/theme_light.scss';
+
+const toggleTheme = (theme: string) => {
+  if (theme === 'dark') {
+    document.body.classList.remove('theme-light');
+    document.body.classList.add('theme-dark');
+  } else {
+    document.body.classList.remove('theme-dark');
+    document.body.classList.add('theme-light');
+  }
+};
 
-if (localStorage.getItem('theme') === 'dark') {
-  require('../../themes/theme_dark.scss');
-} else {
-  require('../../themes/theme_light.scss');
-}
+export const ThemeContext = React.createContext('dark');
 
 const TopLinks: EuiPinnableListGroupItemProps[] = [
   {
@@ -74,20 +83,24 @@ const LearnLinks: EuiPinnableListGroupItemProps[] = [
 export const Chrome = ({ children }: any) => {
   const initialTheme =
     localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
-  const [themeIsLoading, setThemeIsLoading] = useState(false);
   const [isAccountOpen, setIsAccountOpen] = useState(false);
-  const [theme, setTheme] = useState(initialTheme);
+  const [theme, _setTheme] = useState(initialTheme);
+  toggleTheme(initialTheme);
   document.body.classList.add('euiBody--headerIsFixed--double');
 
-  useEffect(() => {
+  const emotionCache = createCache({
+    key: 'eui-styles',
+    container: document.querySelector(
+      'meta[name="eui-styles-global"]'
+    ) as HTMLElement,
+  });
+
+  const setTheme = () => {
     const newTheme = theme === 'light' ? 'dark' : 'light';
-    return () => {
-      // Clean up the subscription
-      localStorage.setItem('theme', newTheme);
-      setThemeIsLoading(true);
-      window.location.reload();
-    };
-  }, [theme]);
+    _setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    toggleTheme(newTheme);
+  };
 
   const breadcrumbs = [
     {
@@ -308,13 +321,7 @@ export const Chrome = ({ children }: any) => {
                 isOpen={isAccountOpen}
                 closePopover={() => setIsAccountOpen(false)}>
                 <div>
-                  <EuiButton
-                    size="s"
-                    iconType="invert"
-                    onClick={() =>
-                      setTheme(theme === 'light' ? 'dark' : 'light')
-                    }
-                    isLoading={themeIsLoading}>
+                  <EuiButton size="s" iconType="invert" onClick={setTheme}>
                     Switch Theme
                   </EuiButton>
                 </div>
@@ -343,9 +350,11 @@ export const Chrome = ({ children }: any) => {
 
   return (
     <ThemeContext.Provider value={theme}>
-      <EuiSpacer />
-      {headers}
-      {children}
+      <EuiProvider colorMode={theme} cache={emotionCache}>
+        <EuiSpacer />
+        {headers}
+        {children}
+      </EuiProvider>
     </ThemeContext.Provider>
   );
 };

src/global_styling/index.scss

@@ -1,10 +1,5 @@
 // Imported global styling from EUI
-@import '~@elastic/eui/src/themes/eui-amsterdam/global_styling/index';
-
-// We use the fixed header from EUI so need this mixin
-body {
-  @include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);
-}
+@import '~@elastic/eui/src/themes/amsterdam/global_styling/index';
 
 // Site specific global styling
 @import './mixins/index';

src/html.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function HTML(props) {
+  return (
+    <html lang="en" {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <meta name="eui-styles-global" />
+        {props.headComponents}
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <div
+          key={'body'}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+      </body>
+    </html>
+  );
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+};

src/themes/theme_dark.scss

@@ -1,12 +1,14 @@
 // This file generates a blob file that has a dark background
 
+.theme-dark {
 // If you want to change the dark theme, replace this line
-@import '~@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_dark';
-@import '~@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
+@import '~@elastic/eui/src/themes/amsterdam/colors_dark';
+@import '~@elastic/eui/src/themes/amsterdam/globals';
+
+@include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);
 
 // These are required
 @import '../global_styling/index';
 @import '~@elastic/eui/src/components/index';
 @import '../components/index';
-
-@import '~@elastic/eui/src/themes/eui-amsterdam/overrides/index';
+}

src/themes/theme_light.scss

@@ -1,12 +1,14 @@
 // This file generates a blob file that has a light background
 
+.theme-light {
 // If you want to change the dark theme, replace this line
-@import '~@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light';
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
+@import '~@elastic/eui/src/themes/amsterdam/colors_light';
+@import '~@elastic/eui/src/themes/amsterdam/globals';
+
+@include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);
 
 // These are required
 @import '../global_styling/index';
 @import '~@elastic/eui/src/components/index';
 @import '../components/index';
-
-@import '~@elastic/eui/src/themes/eui-amsterdam/overrides/index';
+}