[7.x] Upgrade EUI to 13.6.0 (#43916)

package.json

@@ -103,7 +103,7 @@
     "@babel/register": "^7.5.5",
     "@elastic/charts": "^10.2.0",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.6.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",

src/core/public/chrome/chrome_service.tsx

@@ -33,7 +33,7 @@ import { HttpStart } from '../http';
 import { ChromeNavLinks, NavLinksService } from './nav_links';
 import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
 import { NavControlsService, ChromeNavControls } from './nav_controls';
-import { LoadingIndicator, Header } from './ui';
+import { LoadingIndicator, HeaderWrapper as Header } from './ui';
 import { DocLinksStart } from '../doc_links';
 
 export { ChromeNavControls, ChromeRecentlyAccessed };
@@ -131,27 +131,25 @@ export class ChromeService {
         <React.Fragment>
           <LoadingIndicator loadingCount$={http.getLoadingCount$()} />
 
-          <div className="header-global-wrapper hide-for-sharing" data-test-subj="headerGlobalNav">
-            <Header
-              appTitle$={appTitle$.pipe(takeUntil(this.stop$))}
-              badge$={badge$.pipe(takeUntil(this.stop$))}
-              basePath={http.basePath}
-              breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
-              kibanaDocLink={docLinks.links.kibana}
-              forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
-              helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
-              homeHref={http.basePath.prepend('/app/kibana#/home')}
-              isVisible$={isVisible$.pipe(
-                map(visibility => (FORCE_HIDDEN ? false : visibility)),
-                takeUntil(this.stop$)
-              )}
-              kibanaVersion={injectedMetadata.getKibanaVersion()}
-              navLinks$={navLinks.getNavLinks$()}
-              recentlyAccessed$={recentlyAccessed.get$()}
-              navControlsLeft$={navControls.getLeft$()}
-              navControlsRight$={navControls.getRight$()}
-            />
-          </div>
+          <Header
+            appTitle$={appTitle$.pipe(takeUntil(this.stop$))}
+            badge$={badge$.pipe(takeUntil(this.stop$))}
+            basePath={http.basePath}
+            breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
+            kibanaDocLink={docLinks.links.kibana}
+            forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
+            helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
+            homeHref={http.basePath.prepend('/app/kibana#/home')}
+            isVisible$={isVisible$.pipe(
+              map(visibility => (FORCE_HIDDEN ? false : visibility)),
+              takeUntil(this.stop$)
+            )}
+            kibanaVersion={injectedMetadata.getKibanaVersion()}
+            navLinks$={navLinks.getNavLinks$()}
+            recentlyAccessed$={recentlyAccessed.get$()}
+            navControlsLeft$={navControls.getLeft$()}
+            navControlsRight$={navControls.getRight$()}
+          />
         </React.Fragment>
       ),
 

src/core/public/chrome/ui/header/_index.scss

@@ -1,13 +1,14 @@
 @import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/components/nav_drawer/variables';
 
-.header-global-wrapper {
+.chrHeaderWrapper {
   width: 100%;
   position: fixed;
   top: 0;
   z-index: 10;
 }
 
-.header-global-wrapper + .app-wrapper:not(.hidden-chrome) {
+.chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
   top: $euiHeaderChildSize;
   left: $euiHeaderChildSize;
 
@@ -19,13 +20,6 @@
   }
 }
 
-// Mobile header is smaller
-@include euiBreakpoint('xs', 's') {
-  .header-global-wrapper + .app-wrapper:not(.hidden-chrome) {
-    left: 0;
-  }
-}
-
 .chrHeaderHelpMenu__version {
   text-transform: none;
 }
@@ -34,3 +28,20 @@
   align-self: center;
   margin-right: $euiSize;
 }
+
+// Mobile header is smaller
+@include euiBreakpoint('xs', 's') {
+  .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
+    left: 0;
+  }
+}
+
+@include euiBreakpoint('xl') {
+  .chrHeaderWrapper--navIsLocked {
+    ~ .app-wrapper:not(.hidden-chrome) {
+      // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS)
+      left: $euiNavDrawerWidthExpanded !important; // sass-lint:disable-line no-important
+      transition: left $euiAnimSpeedFast $euiAnimSlightResistance;
+    }
+  }
+}

src/core/public/chrome/ui/header/header.tsx

@@ -163,6 +163,8 @@ interface Props {
   navControlsRight$: Rx.Observable<readonly ChromeNavControl[]>;
   intl: InjectedIntl;
   basePath: HttpStart['basePath'];
+  isLocked?: boolean;
+  onIsLockedUpdate?: (isLocked: boolean) => void;
 }
 
 interface State {
@@ -266,8 +268,10 @@ class HeaderUI extends Component<Props, State> {
       breadcrumbs$,
       helpExtension$,
       intl,
+      isLocked,
       kibanaDocLink,
       kibanaVersion,
+      onIsLockedUpdate,
     } = this.props;
     const {
       appTitle,
@@ -355,7 +359,12 @@ class HeaderUI extends Component<Props, State> {
           </EuiHeaderSection>
         </EuiHeader>
 
-        <EuiNavDrawer ref={this.navDrawerRef} data-test-subj="navDrawer">
+        <EuiNavDrawer
+          ref={this.navDrawerRef}
+          data-test-subj="navDrawer"
+          isLocked={isLocked}
+          onIsLockedUpdate={onIsLockedUpdate}
+        >
           <EuiNavDrawerGroup listItems={recentLinksArray} />
           <EuiHorizontalRule margin="none" />
           <EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />

src/core/public/chrome/ui/header/header_wrapper.tsx

@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FunctionComponent, useState } from 'react';
+import classnames from 'classnames';
+import { Header, HeaderProps } from './';
+
+const IS_LOCKED_KEY = 'core.chrome.isLocked';
+
+export const HeaderWrapper: FunctionComponent<HeaderProps> = props => {
+  const initialIsLocked = localStorage.getItem(IS_LOCKED_KEY);
+  const [isLocked, setIsLocked] = useState(initialIsLocked === 'true');
+  const setIsLockedStored = (locked: boolean) => {
+    localStorage.setItem(IS_LOCKED_KEY, `${locked}`);
+    setIsLocked(locked);
+  };
+  const className = classnames(
+    'chrHeaderWrapper',
+    {
+      'chrHeaderWrapper--navIsLocked': isLocked,
+    },
+    'hide-for-sharing'
+  );
+  return (
+    <div className={className} data-test-subj="headerGlobalNav">
+      <Header {...props} onIsLockedUpdate={setIsLockedStored} isLocked={isLocked} />
+    </div>
+  );
+};

src/core/public/chrome/ui/header/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { Header, HeaderProps } from './header';
+export { HeaderWrapper } from './header_wrapper';

src/core/public/chrome/ui/index.ts

@@ -18,4 +18,4 @@
  */
 
 export { LoadingIndicator } from './loading_indicator';
-export { Header } from './header';
+export { Header, HeaderWrapper } from './header';

src/legacy/ui/public/agg_types/controls/precision.tsx

@@ -41,7 +41,9 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
         min={1}
         max={config.get('visualization:tileMap:maxPrecision')}
         value={value}
-        onChange={ev => setValue(Number(ev.target.value))}
+        onChange={(ev: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
+          setValue(Number(ev.currentTarget.value))
+        }
         data-test-subj={`visEditorMapPrecision${agg.id}`}
         showValue
       />

src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx

@@ -57,7 +57,9 @@ function RadiusRatioOptionControl({ editorStateParams, setValue }: AggControlPro
         min={1}
         max={100}
         value={editorStateParams.radiusRatio || DEFAULT_VALUE}
-        onChange={e => setValue(editorStateParams, PARAM_NAME, parseFloat(e.target.value))}
+        onChange={(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
+          setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value))
+        }
         showRange
         showValue
         valueAppend="%"

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.6.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.6.0",
     "react": "^16.8.0"
   }
 }

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.6.0",
     "react": "^16.8.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.6.0",
     "react": "^16.8.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.6.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }

x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss

@@ -5,8 +5,9 @@ body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements
   }
 
   // remove space for global nav elements
-  .header-global-wrapper + .app-wrapper {
-    left: 0;
+  .chrHeaderWrapper ~ .app-wrapper {
+    // Override locked nav at all breakpoints
+    left: 0 !important; // sass-lint:disable-line no-important
     top: 0;
   }
 
@@ -16,7 +17,7 @@ body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements
   }
 
   // hide all the interface parts
-  .header-global-wrapper, // K7 global top nav
+  .chrHeaderWrapper, // K7 global top nav
   .canvasLayout__stageHeader,
   .canvasLayout__sidebar,
   .canvasLayout__footer,

x-pack/package.json

@@ -182,7 +182,7 @@
     "@babel/runtime": "^7.5.5",
     "@elastic/ctags-langserver": "^0.1.8",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "13.3.0",
+    "@elastic/eui": "13.6.0",
     "@elastic/javascript-typescript-langserver": "^0.2.2",
     "@elastic/lsp-extension": "^0.1.2",
     "@elastic/maki": "6.1.0",

yarn.lock

@@ -1129,10 +1129,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@13.3.0":
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-13.3.0.tgz#05c78ffcb2041ebafd807e23dd3d32553e8c1812"
-  integrity sha512-Z/1KGaqKY2PCJXdJ3XTSTcnZZxjFysafvIWNRs+O0C+IQsyy0cz5Sj8BaM9pUgYVjL2SaO04Hs9Yb09MDJwFGQ==
+"@elastic/eui@13.6.0":
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-13.6.0.tgz#a01b66f84bfc7eec2303df1c8d9a7d7443b59049"
+  integrity sha512-a7hD9jLIvA2yJZi+btDIRGRHRSjCwb/0/en3U29MtNB2cOEnNYQ1MGcI5/eIz6eKi93eb0ASG9qq6xVqVaAezQ==
   dependencies:
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"