From 3ffeeffce258ab307d34ff7f1fbd848455e56032 Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 29 Jun 2020 15:39:19 -0700 Subject: [PATCH 1/8] [ui-shared-deps/theme] implement auto-switching theme vars module --- packages/kbn-ui-shared-deps/entry.js | 3 ++ packages/kbn-ui-shared-deps/index.js | 5 ++- packages/kbn-ui-shared-deps/theme.ts | 40 +++++++++++++++++++ packages/kbn-ui-shared-deps/tsconfig.json | 5 ++- packages/kbn-ui-shared-deps/webpack.config.js | 11 +++++ x-pack/plugins/apm/public/plugin.ts | 7 +--- x-pack/plugins/apm/public/utils/get_theme.ts | 13 ------ 7 files changed, 63 insertions(+), 21 deletions(-) create mode 100644 packages/kbn-ui-shared-deps/theme.ts delete mode 100644 x-pack/plugins/apm/public/utils/get_theme.ts diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js index aaa46ab74714f..02b64157686c1 100644 --- a/packages/kbn-ui-shared-deps/entry.js +++ b/packages/kbn-ui-shared-deps/entry.js @@ -61,5 +61,8 @@ if (window.__kbnThemeVersion__ === 'v7') { ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json'); } +import * as Theme from './theme.ts'; +export { Theme }; + // massive deps that we should really get rid of or reduce in size substantially export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js'); diff --git a/packages/kbn-ui-shared-deps/index.js b/packages/kbn-ui-shared-deps/index.js index 596c31820e80d..40e89f199b6a1 100644 --- a/packages/kbn-ui-shared-deps/index.js +++ b/packages/kbn-ui-shared-deps/index.js @@ -44,6 +44,7 @@ exports.externals = { 'react-router-dom': '__kbnSharedDeps__.ReactRouterDom', 'styled-components': '__kbnSharedDeps__.StyledComponents', '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco', + '@kbn/ui-shared-deps/theme': '__kbnSharedDeps__.Theme', // this is how plugins/consumers from npm load monaco 'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBarePluginApi', @@ -59,8 +60,8 @@ exports.externals = { '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices', '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat', '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme', - '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme', - '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme', + '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.Theme.euiLightVars', + '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.Theme.euiDarkVars', /** * massive deps that we should really get rid of or reduce in size substantially diff --git a/packages/kbn-ui-shared-deps/theme.ts b/packages/kbn-ui-shared-deps/theme.ts new file mode 100644 index 0000000000000..58bcb3e9b8350 --- /dev/null +++ b/packages/kbn-ui-shared-deps/theme.ts @@ -0,0 +1,40 @@ +/* + * 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 Theme from '@elastic/eui/dist/eui_theme_light.json'; + +export let euiLightVars: typeof Theme; +export let euiDarkVars: typeof Theme; +if ((window as any).__kbnThemeVersion__ === 'v7') { + euiLightVars = require('@elastic/eui/dist/eui_theme_light.json'); + euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json'); +} else { + euiLightVars = require('@elastic/eui/dist/eui_theme_amsterdam_light.json'); + euiDarkVars = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json'); +} + +/** + * EUI Theme vars that automatically adjust to light/dark theme + */ +export let euiThemeVars: typeof Theme; +if ((window as any).__kbnDarkTheme__) { + euiThemeVars = euiDarkVars; +} else { + euiThemeVars = euiLightVars; +} diff --git a/packages/kbn-ui-shared-deps/tsconfig.json b/packages/kbn-ui-shared-deps/tsconfig.json index 5aa0f45e4100d..10073d566bb2c 100644 --- a/packages/kbn-ui-shared-deps/tsconfig.json +++ b/packages/kbn-ui-shared-deps/tsconfig.json @@ -1,4 +1,7 @@ { "extends": "../../tsconfig.json", - "include": ["index.d.ts", "./monaco"] + "include": [ + "index.d.ts", + "./theme_vars" + ] } diff --git a/packages/kbn-ui-shared-deps/webpack.config.js b/packages/kbn-ui-shared-deps/webpack.config.js index 831e1e55573b3..c81da4689052a 100644 --- a/packages/kbn-ui-shared-deps/webpack.config.js +++ b/packages/kbn-ui-shared-deps/webpack.config.js @@ -78,6 +78,17 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, + { + include: [require.resolve('./theme.ts')], + use: [ + { + loader: 'babel-loader', + options: { + presets: [require.resolve('@kbn/babel-preset/webpack_preset')], + }, + }, + ], + }, ], }, diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts index 0e495391c94f2..34a15a8273802 100644 --- a/x-pack/plugins/apm/public/plugin.ts +++ b/x-pack/plugins/apm/public/plugin.ts @@ -6,6 +6,7 @@ import { i18n } from '@kbn/i18n'; import { lazy } from 'react'; +import { euiThemeVars } from '@kbn/ui-shared-deps/theme'; import { ConfigSchema } from '.'; import { ObservabilityPluginSetup } from '../../observability/public'; import { @@ -42,7 +43,6 @@ import { fetchLandingPageData, hasData, } from './services/rest/observability_dashboard'; -import { getTheme } from './utils/get_theme'; export type ApmPluginSetup = void; export type ApmPluginStart = void; @@ -79,13 +79,10 @@ export class ApmPlugin implements Plugin { pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry); if (plugins.observability) { - const theme = getTheme({ - isDarkMode: core.uiSettings.get('theme:darkMode'), - }); plugins.observability.dashboard.register({ appName: 'apm', fetchData: async (params) => { - return fetchLandingPageData(params, { theme }); + return fetchLandingPageData(params, { theme: euiThemeVars }); }, hasData, }); diff --git a/x-pack/plugins/apm/public/utils/get_theme.ts b/x-pack/plugins/apm/public/utils/get_theme.ts deleted file mode 100644 index e5020202b7721..0000000000000 --- a/x-pack/plugins/apm/public/utils/get_theme.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ -import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; -import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; - -export type Theme = ReturnType; - -export function getTheme({ isDarkMode }: { isDarkMode: boolean }) { - return isDarkMode ? darkTheme : lightTheme; -} From 883dfb4079030bb6aeadaa818ddac4a99773fe0f Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 29 Jun 2020 17:30:18 -0700 Subject: [PATCH 2/8] support importing `@kbn/ui-shared-deps/theme` in node --- packages/kbn-ui-shared-deps/theme.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/kbn-ui-shared-deps/theme.ts b/packages/kbn-ui-shared-deps/theme.ts index 58bcb3e9b8350..20a41d5546f63 100644 --- a/packages/kbn-ui-shared-deps/theme.ts +++ b/packages/kbn-ui-shared-deps/theme.ts @@ -19,9 +19,11 @@ import Theme from '@elastic/eui/dist/eui_theme_light.json'; +const globals: any = typeof window === 'undefined' ? {} : window; + export let euiLightVars: typeof Theme; export let euiDarkVars: typeof Theme; -if ((window as any).__kbnThemeVersion__ === 'v7') { +if (globals.__kbnThemeVersion__ === 'v7') { euiLightVars = require('@elastic/eui/dist/eui_theme_light.json'); euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json'); } else { @@ -33,7 +35,7 @@ if ((window as any).__kbnThemeVersion__ === 'v7') { * EUI Theme vars that automatically adjust to light/dark theme */ export let euiThemeVars: typeof Theme; -if ((window as any).__kbnDarkTheme__) { +if (globals.__kbnDarkTheme__) { euiThemeVars = euiDarkVars; } else { euiThemeVars = euiLightVars; From 8de5d698143d2a6a437a04a265793aafa8a2da5f Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 29 Jun 2020 17:30:46 -0700 Subject: [PATCH 3/8] associate theme module with the typescript project --- packages/kbn-ui-shared-deps/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-ui-shared-deps/tsconfig.json b/packages/kbn-ui-shared-deps/tsconfig.json index 10073d566bb2c..2ddfe07c2d3c1 100644 --- a/packages/kbn-ui-shared-deps/tsconfig.json +++ b/packages/kbn-ui-shared-deps/tsconfig.json @@ -2,6 +2,6 @@ "extends": "../../tsconfig.json", "include": [ "index.d.ts", - "./theme_vars" + "./theme" ] } From 93a06a2eca9553ad0535038566bb631c902e9fec Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 29 Jun 2020 17:31:28 -0700 Subject: [PATCH 4/8] use `@kbn/ui-shared-deps/theme` in tests --- .../apm/public/services/rest/observability.dashboard.test.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts b/x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts index 1ee8d79ee99a5..dbb5d6029d0f1 100644 --- a/x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts +++ b/x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts @@ -6,9 +6,7 @@ import { fetchLandingPageData, hasData } from './observability_dashboard'; import * as createCallApmApi from './createCallApmApi'; -import { getTheme } from '../../utils/get_theme'; - -const theme = getTheme({ isDarkMode: false }); +import { euiThemeVars as theme } from '@kbn/ui-shared-deps/theme'; describe('Observability dashboard data', () => { const callApmApiMock = jest.spyOn(createCallApmApi, 'callApmApi'); From cc552f9b8977c7a9880d78f33a0392d5df51fe62 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 30 Jun 2020 08:40:21 -0700 Subject: [PATCH 5/8] include extension in tsconfig.json so script can validate project membership --- packages/kbn-ui-shared-deps/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-ui-shared-deps/tsconfig.json b/packages/kbn-ui-shared-deps/tsconfig.json index 2ddfe07c2d3c1..cef9a442d17bc 100644 --- a/packages/kbn-ui-shared-deps/tsconfig.json +++ b/packages/kbn-ui-shared-deps/tsconfig.json @@ -2,6 +2,6 @@ "extends": "../../tsconfig.json", "include": [ "index.d.ts", - "./theme" + "theme.ts" ] } From 8b08a60ea1e20812538db3d4b7d6be012c24da06 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 30 Jun 2020 08:42:39 -0700 Subject: [PATCH 6/8] rename the import rather than changing syntax when passing --- x-pack/plugins/apm/public/plugin.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts index 34a15a8273802..d24cb29eaf24f 100644 --- a/x-pack/plugins/apm/public/plugin.ts +++ b/x-pack/plugins/apm/public/plugin.ts @@ -6,7 +6,7 @@ import { i18n } from '@kbn/i18n'; import { lazy } from 'react'; -import { euiThemeVars } from '@kbn/ui-shared-deps/theme'; +import { euiThemeVars as theme } from '@kbn/ui-shared-deps/theme'; import { ConfigSchema } from '.'; import { ObservabilityPluginSetup } from '../../observability/public'; import { @@ -82,7 +82,7 @@ export class ApmPlugin implements Plugin { plugins.observability.dashboard.register({ appName: 'apm', fetchData: async (params) => { - return fetchLandingPageData(params, { theme: euiThemeVars }); + return fetchLandingPageData(params, { theme }); }, hasData, }); From fe0ab69e42f521e413dc29181c7546d972eeeadf Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 30 Jun 2020 17:26:58 -0700 Subject: [PATCH 7/8] export Theme type for use by consumers --- packages/kbn-ui-shared-deps/theme.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/kbn-ui-shared-deps/theme.ts b/packages/kbn-ui-shared-deps/theme.ts index 20a41d5546f63..ca4714779d39e 100644 --- a/packages/kbn-ui-shared-deps/theme.ts +++ b/packages/kbn-ui-shared-deps/theme.ts @@ -17,12 +17,14 @@ * under the License. */ -import Theme from '@elastic/eui/dist/eui_theme_light.json'; +import LightTheme from '@elastic/eui/dist/eui_theme_light.json'; const globals: any = typeof window === 'undefined' ? {} : window; -export let euiLightVars: typeof Theme; -export let euiDarkVars: typeof Theme; +export type Theme = typeof LightTheme; + +export let euiLightVars: Theme; +export let euiDarkVars: Theme; if (globals.__kbnThemeVersion__ === 'v7') { euiLightVars = require('@elastic/eui/dist/eui_theme_light.json'); euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json'); @@ -34,7 +36,7 @@ if (globals.__kbnThemeVersion__ === 'v7') { /** * EUI Theme vars that automatically adjust to light/dark theme */ -export let euiThemeVars: typeof Theme; +export let euiThemeVars: Theme; if (globals.__kbnDarkTheme__) { euiThemeVars = euiDarkVars; } else { From 60cb2911f44ec201ed099e79a09bfe10655a4809 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 30 Jun 2020 17:38:46 -0700 Subject: [PATCH 8/8] import Theme type from @kbn/ui-shared-deps/theme --- .../plugins/apm/public/services/rest/observability_dashboard.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/services/rest/observability_dashboard.ts b/x-pack/plugins/apm/public/services/rest/observability_dashboard.ts index 4614e06cbd45d..2107565c5facf 100644 --- a/x-pack/plugins/apm/public/services/rest/observability_dashboard.ts +++ b/x-pack/plugins/apm/public/services/rest/observability_dashboard.ts @@ -6,12 +6,12 @@ import { i18n } from '@kbn/i18n'; import { sum } from 'lodash'; +import { Theme } from '@kbn/ui-shared-deps/theme'; import { ApmFetchDataResponse, FetchDataParams, } from '../../../../observability/public'; import { callApmApi } from './createCallApmApi'; -import { Theme } from '../../utils/get_theme'; interface Options { theme: Theme;