From 075445d7dd433b3e745db3c2a270d5114e05c242 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 23 Aug 2019 15:50:10 -0500 Subject: [PATCH 1/9] eui to 13.6.0 --- package.json | 2 +- .../plugins/kbn_tp_run_pipeline/package.json | 2 +- .../kbn_tp_custom_visualizations/package.json | 2 +- .../kbn_tp_embeddable_explorer/package.json | 2 +- .../kbn_tp_sample_panel_action/package.json | 2 +- .../kbn_tp_visualize_embedding/package.json | 2 +- x-pack/package.json | 2 +- yarn.lock | 18 +++++------------- 8 files changed, 12 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index b3ca135eea9c3..9f91544c07557 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@babel/register": "^7.5.5", "@elastic/charts": "^10.0.1", "@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", diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json index 4bd1eece12f87..f870e9518dcfd 100644 --- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json +++ b/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" } diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json index dfa3dacb4fb8b..f970f0d219b62 100644 --- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json +++ b/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" } } diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json index 69f4cdaa895e2..cd1ca420f41d4 100644 --- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json +++ b/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": { diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json index 1d5f5f4202015..ae9ff2956c4bb 100644 --- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json +++ b/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": { diff --git a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json index fc80e03cc1f4a..47c8ac5a9df89 100644 --- a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json +++ b/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" } diff --git a/x-pack/package.json b/x-pack/package.json index afeeaf1baf9ff..4593c261c4bb0 100644 --- a/x-pack/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 26ab312da1ad6..5b46184a11c64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -948,15 +948,7 @@ pirates "^4.0.0" source-map-support "^0.5.9" -"@babel/runtime-corejs2@^7.2.0": - version "7.5.5" - resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.5.5.tgz#c3214c08ef20341af4187f1c9fbdc357fbec96b2" - integrity sha512-FYATQVR00NSNi7mUfpPDp7E8RYMXDuO8gaix7u/w3GekfUinKgX1AcTxs7SoiEmoEW9mbpjrwqWSW6zCmw5h8A== - dependencies: - core-js "^2.6.5" - regenerator-runtime "^0.13.2" - -"@babel/runtime-corejs2@^7.4.2": +"@babel/runtime-corejs2@^7.2.0", "@babel/runtime-corejs2@^7.4.2": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.5.5.tgz#c3214c08ef20341af4187f1c9fbdc357fbec96b2" integrity sha512-FYATQVR00NSNi7mUfpPDp7E8RYMXDuO8gaix7u/w3GekfUinKgX1AcTxs7SoiEmoEW9mbpjrwqWSW6zCmw5h8A== @@ -1137,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" From 7af2a125601939af63bee5798a6a3d0b6c1ffb53 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 23 Aug 2019 15:50:33 -0500 Subject: [PATCH 2/9] euirange updates --- src/legacy/ui/public/agg_types/controls/precision.tsx | 4 +++- .../vis/editors/default/controls/radius_ratio_option.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/legacy/ui/public/agg_types/controls/precision.tsx b/src/legacy/ui/public/agg_types/controls/precision.tsx index 2aa8566f67c04..a458c29933f02 100644 --- a/src/legacy/ui/public/agg_types/controls/precision.tsx +++ b/src/legacy/ui/public/agg_types/controls/precision.tsx @@ -41,7 +41,9 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps setValue(Number(ev.target.value))} + onChange={(ev: React.ChangeEvent | React.MouseEvent) => + setValue(Number(ev.currentTarget.value)) + } data-test-subj={`visEditorMapPrecision${agg.id}`} showValue /> diff --git a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx b/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx index 141897e797504..f2625c628c3f1 100644 --- a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx +++ b/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 | React.MouseEvent) => + setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value)) + } showRange showValue valueAppend="%" From 335077494f860fb3177682e99187adfded1ffe7e Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 23 Aug 2019 16:04:43 -0500 Subject: [PATCH 3/9] euipage snapshot updates --- .../no_data/__tests__/__snapshots__/no_data.test.js.snap | 4 ++-- .../__tests__/__snapshots__/page_loading.test.js.snap | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap index b7c4d4cd03812..7c663a26bc9df 100644 --- a/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap +++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap @@ -9,7 +9,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = ` style="max-width:600px" >
Date: Mon, 26 Aug 2019 16:17:50 -0500 Subject: [PATCH 4/9] add classname toggle for nav locking --- src/core/public/chrome/chrome_service.tsx | 12 +++++++++++- src/core/public/chrome/ui/header/header.tsx | 8 +++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx index 668bce522bf4e..b96b47b1bc75c 100644 --- a/src/core/public/chrome/chrome_service.tsx +++ b/src/core/public/chrome/chrome_service.tsx @@ -104,6 +104,7 @@ export class ChromeService { const appTitle$ = new BehaviorSubject('Kibana'); const brand$ = new BehaviorSubject({}); const isVisible$ = new BehaviorSubject(true); + const isLocked$ = new BehaviorSubject(false); const isCollapsed$ = new BehaviorSubject(!!localStorage.getItem(IS_COLLAPSED_KEY)); const applicationClasses$ = new BehaviorSubject>(new Set()); const helpExtension$ = new BehaviorSubject(undefined); @@ -122,6 +123,14 @@ export class ChromeService { ); } + const BASE_SELECTOR = 'header-global-wrapper'; + isLocked$.subscribe(isLocked => { + const el = document.querySelector(`.${BASE_SELECTOR}`); + if (el) { + el.classList.toggle(`${BASE_SELECTOR}--navIsLocked`, isLocked); + } + }); + return { navControls, navLinks, @@ -131,7 +140,7 @@ export class ChromeService { -
+
isLocked$.next(isLocked)} />
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 04c1a11824870..d2f505258affa 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -163,6 +163,7 @@ interface Props { navControlsRight$: Rx.Observable; intl: InjectedIntl; basePath: HttpStart['basePath']; + onIsLockedUpdate?: (isLocked: boolean) => void; } interface State { @@ -268,6 +269,7 @@ class HeaderUI extends Component { intl, kibanaDocLink, kibanaVersion, + onIsLockedUpdate, } = this.props; const { appTitle, @@ -355,7 +357,11 @@ class HeaderUI extends Component { - + From 4bb1437faecfc8e87e389d07ec65dce1c785e33d Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 26 Aug 2019 16:59:59 -0500 Subject: [PATCH 5/9] new header wrapper component; removed observable --- src/core/public/chrome/chrome_service.tsx | 50 +++++++++-------------- src/core/public/chrome/ui/header.tsx | 38 +++++++++++++++++ 2 files changed, 57 insertions(+), 31 deletions(-) create mode 100644 src/core/public/chrome/ui/header.tsx diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx index b96b47b1bc75c..36ea733084847 100644 --- a/src/core/public/chrome/chrome_service.tsx +++ b/src/core/public/chrome/chrome_service.tsx @@ -104,7 +104,6 @@ export class ChromeService { const appTitle$ = new BehaviorSubject('Kibana'); const brand$ = new BehaviorSubject({}); const isVisible$ = new BehaviorSubject(true); - const isLocked$ = new BehaviorSubject(false); const isCollapsed$ = new BehaviorSubject(!!localStorage.getItem(IS_COLLAPSED_KEY)); const applicationClasses$ = new BehaviorSubject>(new Set()); const helpExtension$ = new BehaviorSubject(undefined); @@ -123,14 +122,6 @@ export class ChromeService { ); } - const BASE_SELECTOR = 'header-global-wrapper'; - isLocked$.subscribe(isLocked => { - const el = document.querySelector(`.${BASE_SELECTOR}`); - if (el) { - el.classList.toggle(`${BASE_SELECTOR}--navIsLocked`, isLocked); - } - }); - return { navControls, navLinks, @@ -140,28 +131,25 @@ export class ChromeService { -
-
(FORCE_HIDDEN ? false : visibility)), - takeUntil(this.stop$) - )} - kibanaVersion={injectedMetadata.getKibanaVersion()} - navLinks$={navLinks.getNavLinks$()} - recentlyAccessed$={recentlyAccessed.get$()} - navControlsLeft$={navControls.getLeft$()} - navControlsRight$={navControls.getRight$()} - onIsLockedUpdate={(isLocked: boolean) => isLocked$.next(isLocked)} - /> -
+
(FORCE_HIDDEN ? false : visibility)), + takeUntil(this.stop$) + )} + kibanaVersion={injectedMetadata.getKibanaVersion()} + navLinks$={navLinks.getNavLinks$()} + recentlyAccessed$={recentlyAccessed.get$()} + navControlsLeft$={navControls.getLeft$()} + navControlsRight$={navControls.getRight$()} + /> ), diff --git a/src/core/public/chrome/ui/header.tsx b/src/core/public/chrome/ui/header.tsx new file mode 100644 index 0000000000000..1d2016e8bea11 --- /dev/null +++ b/src/core/public/chrome/ui/header.tsx @@ -0,0 +1,38 @@ +/* + * 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 as HeaderUI, HeaderProps } from './header/header'; + +export const Header: FunctionComponent = props => { + const [isLocked, setIsLocked] = useState(false); + const className = classnames( + 'header-global-wrapper', + { + 'header-global-wrapper--isNavLocked': isLocked, + }, + 'hide-for-sharing' + ); + return ( +
+ +
+ ); +}; From 188532901f107f0891983ff91bf4fe5dc343ca14 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 26 Aug 2019 18:36:46 -0400 Subject: [PATCH 6/9] Add styles for locked nav And updated BEM naming of `header-global-wrapper` --- src/core/public/chrome/ui/header.tsx | 4 +-- src/core/public/chrome/ui/header/_index.scss | 29 +++++++++++++------ .../components/fullscreen/fullscreen.scss | 7 +++-- 3 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/core/public/chrome/ui/header.tsx b/src/core/public/chrome/ui/header.tsx index 1d2016e8bea11..78ff3dc34b444 100644 --- a/src/core/public/chrome/ui/header.tsx +++ b/src/core/public/chrome/ui/header.tsx @@ -24,9 +24,9 @@ import { Header as HeaderUI, HeaderProps } from './header/header'; export const Header: FunctionComponent = props => { const [isLocked, setIsLocked] = useState(false); const className = classnames( - 'header-global-wrapper', + 'chrHeaderWrapper', { - 'header-global-wrapper--isNavLocked': isLocked, + 'chrHeaderWrapper--navIsLocked': isLocked, }, 'hide-for-sharing' ); diff --git a/src/core/public/chrome/ui/header/_index.scss b/src/core/public/chrome/ui/header/_index.scss index 2b841eca6e01d..f19728a52dd70 100644 --- a/src/core/public/chrome/ui/header/_index.scss +++ b/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; + } + } +} diff --git a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss index d366aac096bed..8dad4aaba5eb1 100644 --- a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss +++ b/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, From ec91c423d4fb7d39986887531755f8bf32253c2c Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 26 Aug 2019 18:13:39 -0500 Subject: [PATCH 7/9] move headerwrapper --- src/core/public/chrome/chrome_service.tsx | 2 +- .../chrome/ui/{header.tsx => header/header_wrapper.tsx} | 6 +++--- src/core/public/chrome/ui/header/index.ts | 1 + src/core/public/chrome/ui/index.ts | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) rename src/core/public/chrome/ui/{header.tsx => header/header_wrapper.tsx} (86%) diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx index 36ea733084847..2fa6206f0ea01 100644 --- a/src/core/public/chrome/chrome_service.tsx +++ b/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 }; diff --git a/src/core/public/chrome/ui/header.tsx b/src/core/public/chrome/ui/header/header_wrapper.tsx similarity index 86% rename from src/core/public/chrome/ui/header.tsx rename to src/core/public/chrome/ui/header/header_wrapper.tsx index 78ff3dc34b444..de4225f8f3732 100644 --- a/src/core/public/chrome/ui/header.tsx +++ b/src/core/public/chrome/ui/header/header_wrapper.tsx @@ -19,9 +19,9 @@ import React, { FunctionComponent, useState } from 'react'; import classnames from 'classnames'; -import { Header as HeaderUI, HeaderProps } from './header/header'; +import { Header, HeaderProps } from './'; -export const Header: FunctionComponent = props => { +export const HeaderWrapper: FunctionComponent = props => { const [isLocked, setIsLocked] = useState(false); const className = classnames( 'chrHeaderWrapper', @@ -32,7 +32,7 @@ export const Header: FunctionComponent = props => { ); return (
- +
); }; diff --git a/src/core/public/chrome/ui/header/index.ts b/src/core/public/chrome/ui/header/index.ts index f4c7127b93bfb..f9c122b864dce 100644 --- a/src/core/public/chrome/ui/header/index.ts +++ b/src/core/public/chrome/ui/header/index.ts @@ -18,3 +18,4 @@ */ export { Header, HeaderProps } from './header'; +export { HeaderWrapper } from './header_wrapper'; diff --git a/src/core/public/chrome/ui/index.ts b/src/core/public/chrome/ui/index.ts index 0136f3e2b203d..69582f6f1ed52 100644 --- a/src/core/public/chrome/ui/index.ts +++ b/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'; From fae3240b1f7f7771a2899975a030efb88667d7b9 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 27 Aug 2019 09:41:58 -0500 Subject: [PATCH 8/9] isLocked localStorage --- src/core/public/chrome/ui/header/header.tsx | 3 +++ src/core/public/chrome/ui/header/header_wrapper.tsx | 13 ++++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index d2f505258affa..4dc64c57fa244 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -163,6 +163,7 @@ interface Props { navControlsRight$: Rx.Observable; intl: InjectedIntl; basePath: HttpStart['basePath']; + isLocked?: boolean; onIsLockedUpdate?: (isLocked: boolean) => void; } @@ -267,6 +268,7 @@ class HeaderUI extends Component { breadcrumbs$, helpExtension$, intl, + isLocked, kibanaDocLink, kibanaVersion, onIsLockedUpdate, @@ -360,6 +362,7 @@ class HeaderUI extends Component { diff --git a/src/core/public/chrome/ui/header/header_wrapper.tsx b/src/core/public/chrome/ui/header/header_wrapper.tsx index de4225f8f3732..f4ecce5beab0c 100644 --- a/src/core/public/chrome/ui/header/header_wrapper.tsx +++ b/src/core/public/chrome/ui/header/header_wrapper.tsx @@ -17,12 +17,19 @@ * under the License. */ -import React, { FunctionComponent, useState } from 'react'; +import React, { FunctionComponent, useEffect, useState } from 'react'; import classnames from 'classnames'; import { Header, HeaderProps } from './'; +const IS_LOCKED_KEY = 'core.chrome.isLocked'; + export const HeaderWrapper: FunctionComponent = props => { - const [isLocked, setIsLocked] = useState(false); + const initialIsLocked = localStorage.getItem(IS_LOCKED_KEY); + const [isLocked, setIsLocked] = useState(initialIsLocked === 'true' ? true : false); + useEffect(() => { + if (initialIsLocked === `${isLocked}`) return; + localStorage.setItem(IS_LOCKED_KEY, `${isLocked}`); + }, [isLocked]); const className = classnames( 'chrHeaderWrapper', { @@ -32,7 +39,7 @@ export const HeaderWrapper: FunctionComponent = props => { ); return (
-
+
); }; From 2fe88cf62163bbf2e342d1b7bc00ad9ed50f7383 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 27 Aug 2019 11:46:48 -0500 Subject: [PATCH 9/9] remove useEffect --- .../public/chrome/ui/header/header_wrapper.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/core/public/chrome/ui/header/header_wrapper.tsx b/src/core/public/chrome/ui/header/header_wrapper.tsx index f4ecce5beab0c..5306faa209586 100644 --- a/src/core/public/chrome/ui/header/header_wrapper.tsx +++ b/src/core/public/chrome/ui/header/header_wrapper.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { FunctionComponent, useEffect, useState } from 'react'; +import React, { FunctionComponent, useState } from 'react'; import classnames from 'classnames'; import { Header, HeaderProps } from './'; @@ -25,11 +25,11 @@ const IS_LOCKED_KEY = 'core.chrome.isLocked'; export const HeaderWrapper: FunctionComponent = props => { const initialIsLocked = localStorage.getItem(IS_LOCKED_KEY); - const [isLocked, setIsLocked] = useState(initialIsLocked === 'true' ? true : false); - useEffect(() => { - if (initialIsLocked === `${isLocked}`) return; - localStorage.setItem(IS_LOCKED_KEY, `${isLocked}`); - }, [isLocked]); + const [isLocked, setIsLocked] = useState(initialIsLocked === 'true'); + const setIsLockedStored = (locked: boolean) => { + localStorage.setItem(IS_LOCKED_KEY, `${locked}`); + setIsLocked(locked); + }; const className = classnames( 'chrHeaderWrapper', { @@ -39,7 +39,7 @@ export const HeaderWrapper: FunctionComponent = props => { ); return (
-
+
); };