From 519cefc665e5926fe10341da119bf376093ca47b Mon Sep 17 00:00:00 2001 From: Tyler Smalley Date: Thu, 20 Sep 2018 19:01:06 -0700 Subject: [PATCH] Moves styleSheetPath to uiExports (#23007) This was previously defined in uiExports.app, which limited plugins which are not an app of providing a stylesheet. This allows any plugin to define a stylesheet which will be available on page load. --- .../sao_template/template/index.js | 6 +- src/core_plugins/kibana/index.js | 3 +- src/core_plugins/status_page/index.js | 4 +- .../status_page/public/index.scss | 2 +- src/dev/build/tasks/transpile_scss_task.js | 4 +- src/server/sass/build_all.js | 11 ++- src/server/sass/index.js | 3 +- src/ui/public/chrome/chrome.js | 3 + src/ui/ui_apps/__tests__/ui_app.js | 15 ---- src/ui/ui_apps/ui_app.js | 23 ----- src/ui/ui_exports/ui_export_defaults.js | 2 + src/ui/ui_exports/ui_export_types/index.js | 4 + .../ui_export_types/style_sheet_paths.js | 67 +++++++++++++++ .../ui_export_types/style_sheet_paths.test.js | 60 ++++++++++++++ src/ui/ui_exports/ui_export_types/ui_apps.js | 10 --- src/ui/ui_render/bootstrap/template.js.hbs | 83 ++++++++++--------- src/ui/ui_render/ui_render_mixin.js | 11 ++- x-pack/plugins/canvas/index.js | 2 +- .../plugins/canvas/public/style/hackery.scss | 38 +++++---- x-pack/plugins/canvas/public/style/index.scss | 2 +- x-pack/plugins/canvas/public/style/main.scss | 2 +- x-pack/plugins/dashboard_mode/index.js | 3 +- .../plugins/dashboard_mode/public/index.scss | 3 - x-pack/plugins/graph/index.js | 2 +- x-pack/plugins/ml/index.js | 1 - x-pack/plugins/ml/public/index.scss | 3 - x-pack/plugins/monitoring/public/_hacks.scss | 44 +++++----- x-pack/plugins/monitoring/ui_exports.js | 4 +- 28 files changed, 253 insertions(+), 162 deletions(-) create mode 100644 src/ui/ui_exports/ui_export_types/style_sheet_paths.js create mode 100644 src/ui/ui_exports/ui_export_types/style_sheet_paths.test.js delete mode 100644 x-pack/plugins/dashboard_mode/public/index.scss delete mode 100644 x-pack/plugins/ml/public/index.scss diff --git a/packages/kbn-plugin-generator/sao_template/template/index.js b/packages/kbn-plugin-generator/sao_template/template/index.js index 11655cbff1aca..b75eab070bfd6 100755 --- a/packages/kbn-plugin-generator/sao_template/template/index.js +++ b/packages/kbn-plugin-generator/sao_template/template/index.js @@ -12,9 +12,6 @@ export default function (kibana) { title: '<%= startCase(name) %>', description: '<%= description %>', main: 'plugins/<%= snakeCase(name) %>/app', - <%_ if (generateScss) { -%> - styleSheetPath: require('path').resolve(__dirname, 'public/app.scss'), - <%_ } -%> }, <%_ } -%> <%_ if (generateHack) { -%> @@ -22,6 +19,9 @@ export default function (kibana) { 'plugins/<%= snakeCase(name) %>/hack' ] <%_ } -%> + <%_ if (generateScss) { -%> + styleSheetPaths: require('path').resolve(__dirname, 'public/app.scss'), + <%_ } -%> }, config(Joi) { diff --git a/src/core_plugins/kibana/index.js b/src/core_plugins/kibana/index.js index e32a174fcb3e8..91bc29d6097f4 100644 --- a/src/core_plugins/kibana/index.js +++ b/src/core_plugins/kibana/index.js @@ -66,9 +66,8 @@ export default function (kibana) { listed: false, description: 'the kibana you know and love', main: 'plugins/kibana/kibana', - styleSheetPath: `${__dirname}/public/index.scss`, }, - + styleSheetPaths: `${__dirname}/public/index.scss`, links: [ { id: 'kibana:discover', diff --git a/src/core_plugins/status_page/index.js b/src/core_plugins/status_page/index.js index 1bf964d3b1400..d54117625ed33 100644 --- a/src/core_plugins/status_page/index.js +++ b/src/core_plugins/status_page/index.js @@ -25,8 +25,8 @@ export default function (kibana) { main: 'plugins/status_page/status_page', hidden: true, url: '/status', - styleSheetPath: `${__dirname}/public/index.scss` - } + }, + styleSheetPaths: `${__dirname}/public/index.scss`, } }); } diff --git a/src/core_plugins/status_page/public/index.scss b/src/core_plugins/status_page/public/index.scss index 8bab6ef41e158..85c5bf15f3161 100644 --- a/src/core_plugins/status_page/public/index.scss +++ b/src/core_plugins/status_page/public/index.scss @@ -1,6 +1,6 @@ @import 'ui/public/styles/styling_constants'; // SASSTODO: Remove when K7 applies background color to body -.stsPage { +#status_page-app .stsPage { min-height: 100vh; } \ No newline at end of file diff --git a/src/dev/build/tasks/transpile_scss_task.js b/src/dev/build/tasks/transpile_scss_task.js index 04a5ed03bd639..7d167599d3aff 100644 --- a/src/dev/build/tasks/transpile_scss_task.js +++ b/src/dev/build/tasks/transpile_scss_task.js @@ -20,6 +20,7 @@ import { toArray } from 'rxjs/operators'; import { buildAll } from '../../../server/sass/build_all'; import { findPluginSpecs } from '../../../plugin_discovery/find_plugin_specs'; +import { collectUiExports } from '../../../ui/ui_exports/collect_ui_exports'; export const TranspileScssTask = { description: 'Transpiling SCSS to CSS', @@ -30,9 +31,10 @@ export const TranspileScssTask = { const { spec$ } = findPluginSpecs({ plugins: { scanDirs, paths } }); const enabledPlugins = await spec$.pipe(toArray()).toPromise(); + const uiExports = collectUiExports(enabledPlugins); try { - const bundles = await buildAll(enabledPlugins); + const bundles = await buildAll(uiExports.styleSheetPaths); bundles.forEach(bundle => log.info(`Compiled SCSS: ${bundle.source}`)); } catch (error) { const { message, line, file } = error; diff --git a/src/server/sass/build_all.js b/src/server/sass/build_all.js index 7c616ceeb9248..540c2440c4843 100644 --- a/src/server/sass/build_all.js +++ b/src/server/sass/build_all.js @@ -18,16 +18,15 @@ */ import { Build } from './build'; -import { collectUiExports } from '../../ui/ui_exports'; -export async function buildAll(enabledPluginSpecs) { - const { uiAppSpecs = [] } = collectUiExports(enabledPluginSpecs); - const bundles = await Promise.all(uiAppSpecs.map(async uiAppSpec => { - if (!uiAppSpec.styleSheetPath) { +export async function buildAll(styleSheets = []) { + const bundles = await Promise.all(styleSheets.map(async styleSheet => { + + if (!styleSheet.localPath.endsWith('.scss')) { return; } - const bundle = new Build(uiAppSpec.styleSheetPath); + const bundle = new Build(styleSheet.localPath); await bundle.build(); return bundle; diff --git a/src/server/sass/index.js b/src/server/sass/index.js index 5463052e1236a..f7c23a4719e0e 100644 --- a/src/server/sass/index.js +++ b/src/server/sass/index.js @@ -24,7 +24,6 @@ export async function sassMixin(kbnServer, server, config) { return; } - /** * Build assets * @@ -40,7 +39,7 @@ export async function sassMixin(kbnServer, server, config) { let trackedFiles = new Set(); try { - scssBundles = await buildAll(kbnServer.pluginSpecs); + scssBundles = await buildAll(kbnServer.uiExports.styleSheetPaths); scssBundles.forEach(bundle => { bundle.includedFiles.forEach(file => trackedFiles.add(file)); diff --git a/src/ui/public/chrome/chrome.js b/src/ui/public/chrome/chrome.js index 57922d39f6136..257224e08baed 100644 --- a/src/ui/public/chrome/chrome.js +++ b/src/ui/public/chrome/chrome.js @@ -83,6 +83,9 @@ const waitForBootstrap = new Promise(resolve => { require('uiExports/chromeNavControls'); require('uiExports/hacks'); + // sets attribute on body for stylesheet sandboxing + document.body.setAttribute('id', `${internals.app.id}-app`); + chrome.setupAngular(); targetDomElement.setAttribute('id', 'kibana-body'); targetDomElement.setAttribute('kbn-chrome', 'true'); diff --git a/src/ui/ui_apps/__tests__/ui_app.js b/src/ui/ui_apps/__tests__/ui_app.js index 87b57a556ca4f..af2a73a23df9b 100644 --- a/src/ui/ui_apps/__tests__/ui_app.js +++ b/src/ui/ui_apps/__tests__/ui_app.js @@ -90,10 +90,6 @@ describe('ui apps / UiApp', () => { expect(app.getMainModuleId()).to.be(undefined); }); - it('has no styleSheetPath', () => { - expect(app.getStyleSheetUrlPath()).to.be(undefined); - }); - it('has a mostly empty JSON representation', () => { expect(JSON.parse(JSON.stringify(app))).to.eql({ id: spec.id, @@ -312,15 +308,4 @@ describe('ui apps / UiApp', () => { expect(app.getMainModuleId()).to.be('bar'); }); }); - - describe('#getStyleSheetUrlPath', () => { - it('returns public path to styleSheetPath', () => { - const app = createUiApp( - createStubUiAppSpec({ pluginId: 'foo', id: 'foo', styleSheetPath: '/bar/public/baz/style.scss' }), - createStubKbnServer({ plugins: [{ id: 'foo', publicDir: '/bar/public' }] }) - ); - - expect(app.getStyleSheetUrlPath()).to.eql('plugins/foo/baz/style.css'); - }); - }); }); diff --git a/src/ui/ui_apps/ui_app.js b/src/ui/ui_apps/ui_app.js index a4c1f4a15a27e..7aea264ae0e5f 100644 --- a/src/ui/ui_apps/ui_app.js +++ b/src/ui/ui_apps/ui_app.js @@ -17,7 +17,6 @@ * under the License. */ -import path from 'path'; import { UiNavLink } from '../ui_nav_links'; export class UiApp { @@ -34,7 +33,6 @@ export class UiApp { linkToLastSubUrl, listed, url = `/app/${id}`, - styleSheetPath, } = spec; if (!id) { @@ -53,7 +51,6 @@ export class UiApp { this._url = url; this._pluginId = pluginId; this._kbnServer = kbnServer; - this._styleSheetPath = styleSheetPath; if (this._pluginId && !this._getPlugin()) { throw new Error(`Unknown plugin id "${this._pluginId}"`); @@ -105,25 +102,6 @@ export class UiApp { return this._main; } - getStyleSheetUrlPath() { - if (!this._styleSheetPath) { - return; - } - - const plugin = this._getPlugin(); - - // get the path of the stylesheet relative to the public dir for the plugin - let relativePath = path.relative(plugin.publicDir, this._styleSheetPath); - - // replace back slashes on windows - relativePath = relativePath.split('\\').join('/'); - - // replace the extension of relativePath to be .css - relativePath = relativePath.slice(0, -path.extname(relativePath).length) + '.css'; - - return `plugins/${plugin.id}/${relativePath}`; - } - _getPlugin() { const pluginId = this._pluginId; const { plugins } = this._kbnServer; @@ -142,7 +120,6 @@ export class UiApp { main: this._main, navLink: this._navLink, linkToLastSubUrl: this._linkToLastSubUrl, - styleSheetPath: this._styleSheetPath, }; } } diff --git a/src/ui/ui_exports/ui_export_defaults.js b/src/ui/ui_exports/ui_export_defaults.js index 34f06b1c70681..fd6d76011e2a1 100644 --- a/src/ui/ui_exports/ui_export_defaults.js +++ b/src/ui/ui_exports/ui_export_defaults.js @@ -37,6 +37,8 @@ export const UI_EXPORT_DEFAULTS = { translationPaths: [], + styleSheetPaths: [], + appExtensions: { fieldFormatEditors: [ 'ui/field_editor/components/field_format_editor/register' diff --git a/src/ui/ui_exports/ui_export_types/index.js b/src/ui/ui_exports/ui_export_types/index.js index 1da233efa16b4..ed350cefd23ad 100644 --- a/src/ui/ui_exports/ui_export_types/index.js +++ b/src/ui/ui_exports/ui_export_types/index.js @@ -68,6 +68,10 @@ export { links, } from './ui_nav_links'; +export { + styleSheetPaths +} from './style_sheet_paths'; + export { uiSettingDefaults, } from './ui_settings'; diff --git a/src/ui/ui_exports/ui_export_types/style_sheet_paths.js b/src/ui/ui_exports/ui_export_types/style_sheet_paths.js new file mode 100644 index 0000000000000..569c80379fb7f --- /dev/null +++ b/src/ui/ui_exports/ui_export_types/style_sheet_paths.js @@ -0,0 +1,67 @@ +/* + * 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 path from 'path'; +import { flatConcatAtType } from './reduce'; +import { mapSpec, wrap } from './modify_reduce'; + +const OK_EXTNAMES = ['.css', '.scss']; + +function normalize(localPath, type, pluginSpec) { + const pluginId = pluginSpec.getId(); + const publicDir = pluginSpec.getPublicDir(); + const extname = path.extname(localPath); + + if (!OK_EXTNAMES.includes(extname)) { + throw new Error( + `[plugin:${pluginId}] uiExports.styleSheetPaths supported extensions [${OK_EXTNAMES.join(', ')}], got "${extname}"` + ); + } + + if (!path.isAbsolute(localPath)) { + throw new Error( + `[plugin:${pluginId}] uiExports.styleSheetPaths must be an absolute path, got "${localPath}"` + ); + } + + if (!localPath.startsWith(publicDir)) { + throw new Error( + `[plugin:${pluginId}] uiExports.styleSheetPaths must be child of publicDir [${publicDir}]` + ); + } + + // get the path of the stylesheet relative to the public dir for the plugin + let relativePath = path.relative(publicDir, localPath); + + // replace back slashes on windows + relativePath = relativePath.split('\\').join('/'); + + // replace the extension of relativePath to be .css + // publicPath will always point to the css file + relativePath = relativePath.slice(0, -extname.length) + '.css'; + + const publicPath = `plugins/${pluginSpec.getId()}/${relativePath}`; + + return { + localPath, + publicPath + }; +} + +export const styleSheetPaths = wrap(mapSpec(normalize), flatConcatAtType); \ No newline at end of file diff --git a/src/ui/ui_exports/ui_export_types/style_sheet_paths.test.js b/src/ui/ui_exports/ui_export_types/style_sheet_paths.test.js new file mode 100644 index 0000000000000..7fa7fec412b44 --- /dev/null +++ b/src/ui/ui_exports/ui_export_types/style_sheet_paths.test.js @@ -0,0 +1,60 @@ +/* + * 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 { styleSheetPaths } from './style_sheet_paths'; + +describe('uiExports.styleSheetPaths', () => { + const pluginSpec = { + getId: () => 'test', + getPublicDir: () => '/kibana/public' + }; + + it('does not support relative paths', () => { + expect(() => styleSheetPaths([], 'public/bar.css', 'styleSheetPaths', pluginSpec)) + .toThrowError('[plugin:test] uiExports.styleSheetPaths must be an absolute path, got "public/bar.css"'); + }); + + it('path must be child of public path', () => { + expect(() => styleSheetPaths([], '/another/public/bar.css', 'styleSheetPaths', pluginSpec)) + .toThrowError('[plugin:test] uiExports.styleSheetPaths must be child of publicDir [/kibana/public]'); + }); + + it('only supports css or scss extensions', () => { + expect(() => styleSheetPaths([], '/kibana/public/bar.bad', 'styleSheetPaths', pluginSpec)) + .toThrowError('[plugin:test] uiExports.styleSheetPaths supported extensions [.css, .scss], got ".bad"'); + }); + + it('provides publicPath for scss extensions', () => { + const localPath = '/kibana/public/bar.scss'; + const uiExports = styleSheetPaths([], localPath, 'styleSheetPaths', pluginSpec); + + expect(uiExports.styleSheetPaths).toHaveLength(1); + expect(uiExports.styleSheetPaths[0].localPath).toEqual(localPath); + expect(uiExports.styleSheetPaths[0].publicPath).toEqual('plugins/test/bar.css'); + }); + + it('provides publicPath for css extensions', () => { + const localPath = '/kibana/public/bar.css'; + const uiExports = styleSheetPaths([], localPath, 'styleSheetPaths', pluginSpec); + + expect(uiExports.styleSheetPaths).toHaveLength(1); + expect(uiExports.styleSheetPaths[0].localPath).toEqual(localPath); + expect(uiExports.styleSheetPaths[0].publicPath).toEqual('plugins/test/bar.css'); + }); +}); \ No newline at end of file diff --git a/src/ui/ui_exports/ui_export_types/ui_apps.js b/src/ui/ui_exports/ui_export_types/ui_apps.js index 3ee874fd5f629..56f7a4f5f7237 100644 --- a/src/ui/ui_exports/ui_export_types/ui_apps.js +++ b/src/ui/ui_exports/ui_export_types/ui_apps.js @@ -17,7 +17,6 @@ * under the License. */ -import { isAbsolute, normalize } from 'path'; import { flatConcatAtType } from './reduce'; import { alias, mapSpec, wrap } from './modify_reduce'; @@ -48,14 +47,6 @@ function applySpecDefaults(spec, type, pluginSpec) { ); } - const styleSheetPath = spec.styleSheetPath ? normalize(spec.styleSheetPath) : undefined; - - if (styleSheetPath && (!isAbsolute(styleSheetPath) || !styleSheetPath.startsWith(pluginSpec.getPublicDir()))) { - throw new Error( - `[plugin:${pluginId}] uiExports.app.styleSheetPath must be an absolute path within the public directory` - ); - } - return { pluginId, id, @@ -68,7 +59,6 @@ function applySpecDefaults(spec, type, pluginSpec) { linkToLastSubUrl, listed, url, - styleSheetPath, }; } diff --git a/src/ui/ui_render/bootstrap/template.js.hbs b/src/ui/ui_render/bootstrap/template.js.hbs index ca4501a23eff1..50430e098f210 100644 --- a/src/ui/ui_render/bootstrap/template.js.hbs +++ b/src/ui/ui_render/bootstrap/template.js.hbs @@ -1,57 +1,58 @@ window.onload = function () { - function createAnchor(href) { - var anchor = document.createElement('a'); - anchor.setAttribute('href', href); - return anchor.href; + var files = [ + '{{bundlePath}}/vendors.bundle.js', + '{{bundlePath}}/commons.bundle.js', + '{{bundlePath}}/{{appId}}.bundle.js' + ]; + + var failure = function () { + // make subsequent calls to failure() noop + failure = function () {}; + + var err = document.createElement('h1'); + err.style['color'] = 'white'; + err.style['font-family'] = 'monospace'; + err.style['text-align'] = 'center'; + err.style['background'] = '#F44336'; + err.style['padding'] = '25px'; + err.innerText = '{{i18n 'common.ui.welcomeError' '{"defaultMessage": "Kibana did not load properly. Check the server output for more information."}'}}'; + + document.body.innerHTML = err.outerHTML; } - var files = [ - createAnchor('{{bundlePath}}/vendors.style.css'), - createAnchor('{{bundlePath}}/commons.style.css'), - createAnchor('{{bundlePath}}/{{appId}}.style.css'), + function loadStyleSheet(path) { + var dom = document.createElement('link'); - createAnchor('{{bundlePath}}/vendors.bundle.js'), - createAnchor('{{bundlePath}}/commons.bundle.js'), - createAnchor('{{bundlePath}}/{{appId}}.bundle.js') - ]; + dom.addEventListener('error', failure); + dom.setAttribute('rel', 'stylesheet'); + dom.setAttribute('href', path); + document.head.appendChild(dom); + } + + function createJavascriptElement(path) { + var dom = document.createElement('script'); - if ('{{styleSheetPath}}' !== '') { - files.push(createAnchor('{{styleSheetPath}}')); + dom.setAttribute('async', ''); + dom.addEventListener('error', failure); + dom.setAttribute('src', file); + dom.addEventListener('load', next); + document.head.appendChild(dom); } + {{#each styleSheetPaths}} + loadStyleSheet('{{this}}'); + {{/each}} + (function next() { var file = files.shift(); if (!file) return; - var failure = function () { - // make subsequent calls to failure() noop - failure = function () {}; - - var err = document.createElement('h1'); - err.style['color'] = 'white'; - err.style['font-family'] = 'monospace'; - err.style['text-align'] = 'center'; - err.style['background'] = '#F44336'; - err.style['padding'] = '25px'; - err.innerText = '{{i18n 'common.ui.welcomeError' '{"defaultMessage": "Kibana did not load properly. Check the server output for more information."}'}}'; + var dom = document.createElement('script'); - document.body.innerHTML = err.outerHTML; - } - - var type = /\.js(\?.+)?$/.test(file) ? 'script' : 'link'; - var dom = document.createElement(type); dom.setAttribute('async', ''); dom.addEventListener('error', failure); - - if (type === 'script') { - dom.setAttribute('src', file); - dom.addEventListener('load', next); - document.head.appendChild(dom); - } else { - dom.setAttribute('rel', 'stylesheet'); - dom.setAttribute('href', file); - document.head.appendChild(dom); - next(); - } + dom.setAttribute('src', file); + dom.addEventListener('load', next); + document.head.appendChild(dom); }()); }; diff --git a/src/ui/ui_render/ui_render_mixin.js b/src/ui/ui_render/ui_render_mixin.js index f94781cfddf04..bc19a27498dc9 100644 --- a/src/ui/ui_render/ui_render_mixin.js +++ b/src/ui/ui_render/ui_render_mixin.js @@ -63,11 +63,18 @@ export function uiRenderMixin(kbnServer, server, config) { } const basePath = config.get('server.basePath'); + const bundlePath = `${basePath}/bundles`; + const styleSheetPaths = [ + `${bundlePath}/vendors.style.css`, + `${bundlePath}/commons.style.css`, + `${bundlePath}/${app.getId()}.style.css`, + ].concat(kbnServer.uiExports.styleSheetPaths.map(path => `${basePath}/${path.publicPath}`).reverse()); + const bootstrap = new AppBootstrap({ templateData: { appId: app.getId(), - bundlePath: `${basePath}/bundles`, - styleSheetPath: app.getStyleSheetUrlPath() ? `${basePath}/${app.getStyleSheetUrlPath()}` : null, + bundlePath, + styleSheetPaths, }, translations: await server.getUiTranslations() }); diff --git a/x-pack/plugins/canvas/index.js b/x-pack/plugins/canvas/index.js index 3404f8c573788..8f702ed972e16 100644 --- a/x-pack/plugins/canvas/index.js +++ b/x-pack/plugins/canvas/index.js @@ -21,8 +21,8 @@ export function canvas(kibana) { description: 'Data driven workpads', icon: 'plugins/canvas/icon.svg', main: 'plugins/canvas/app', - styleSheetPath: `${__dirname}/public/style/index.scss`, }, + styleSheetPaths: `${__dirname}/public/style/index.scss`, hacks: [ // window.onerror override 'plugins/canvas/lib/window_error_handler.js', diff --git a/x-pack/plugins/canvas/public/style/hackery.scss b/x-pack/plugins/canvas/public/style/hackery.scss index 7ce2fd1435188..edc8fb82dd193 100644 --- a/x-pack/plugins/canvas/public/style/hackery.scss +++ b/x-pack/plugins/canvas/public/style/hackery.scss @@ -3,28 +3,30 @@ when the UI framework implements everything we need */ -// Give buttons some room to the right -.euiAccordion__childWrapper { - overflow-x: hidden; -} - -.clickable { - cursor: pointer; -} +#canvas-app { + // Give buttons some room to the right + .euiAccordion__childWrapper { + overflow-x: hidden; + } -// Temp EUI issue. -.canvasPalettePicker__swatchesPopover { - display: block; + .clickable { + cursor: pointer; + } - .euiPopover__anchor { + // Temp EUI issue. + .canvasPalettePicker__swatchesPopover { display: block; + + .euiPopover__anchor { + display: block; + } } -} -// TODO: remove if fix is provided for https://github.com/elastic/eui/issues/833 -// temp fix for SVGs not appearing in the EuiImage fullscreen view -.euiImageFullScreen { - min-width: 100px; + // TODO: remove if fix is provided for https://github.com/elastic/eui/issues/833 + // temp fix for SVGs not appearing in the EuiImage fullscreen view + .euiImageFullScreen { + min-width: 100px; + } } // TODO: remove this once a fixed height prop is added to EuiModal @@ -34,4 +36,4 @@ width: 75vw; height: 75vh; max-height: 680px; // limit for large screen displays -} \ No newline at end of file +} diff --git a/x-pack/plugins/canvas/public/style/index.scss b/x-pack/plugins/canvas/public/style/index.scss index 8b586dbed2056..c41b5fee9b86b 100644 --- a/x-pack/plugins/canvas/public/style/index.scss +++ b/x-pack/plugins/canvas/public/style/index.scss @@ -53,4 +53,4 @@ @import '../components/toolbar/tray/tray'; @import '../components/workpad/workpad'; @import '../components/workpad_loader/workpad_dropzone/workpad_dropzone'; -@import '../components/workpad_page/workpad_page'; \ No newline at end of file +@import '../components/workpad_page/workpad_page'; diff --git a/x-pack/plugins/canvas/public/style/main.scss b/x-pack/plugins/canvas/public/style/main.scss index d6079ec13e3f9..d3e0b00894c6b 100644 --- a/x-pack/plugins/canvas/public/style/main.scss +++ b/x-pack/plugins/canvas/public/style/main.scss @@ -29,7 +29,7 @@ max-width: 100%; } -body { +#canvas-app body { overflow-y: hidden; // Todo: replace this with EuiToast diff --git a/x-pack/plugins/dashboard_mode/index.js b/x-pack/plugins/dashboard_mode/index.js index 9129040155032..514e45de1d10a 100644 --- a/x-pack/plugins/dashboard_mode/index.js +++ b/x-pack/plugins/dashboard_mode/index.js @@ -40,7 +40,6 @@ export function dashboardMode(kibana) { hidden: true, description: 'view dashboards', main: 'plugins/dashboard_mode/dashboard_viewer', - styleSheetPath: `${__dirname}/public/index.scss`, links: [ { id: 'kibana:dashboard', @@ -52,7 +51,7 @@ export function dashboardMode(kibana) { icon: 'plugins/kibana/assets/dashboard.svg', } ], - } + }, }, config(Joi) { diff --git a/x-pack/plugins/dashboard_mode/public/index.scss b/x-pack/plugins/dashboard_mode/public/index.scss deleted file mode 100644 index 940cb113b679f..0000000000000 --- a/x-pack/plugins/dashboard_mode/public/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'ui/public/styles/styling_constants'; - -@import 'core_plugins/kibana/public/dashboard/index'; diff --git a/x-pack/plugins/graph/index.js b/x-pack/plugins/graph/index.js index ee7dba276fffd..5950713f582a5 100644 --- a/x-pack/plugins/graph/index.js +++ b/x-pack/plugins/graph/index.js @@ -23,8 +23,8 @@ export function graph(kibana) { icon: 'plugins/graph/icon.png', description: 'Graph exploration', main: 'plugins/graph/app', - styleSheetPath: `${__dirname}/public/index.scss`, }, + styleSheetPaths: `${__dirname}/public/index.scss`, hacks: ['plugins/graph/hacks/toggle_app_link_in_nav'], home: ['plugins/graph/register_feature'], mappings diff --git a/x-pack/plugins/ml/index.js b/x-pack/plugins/ml/index.js index 5cde829ce883b..ce511ad3f7d84 100644 --- a/x-pack/plugins/ml/index.js +++ b/x-pack/plugins/ml/index.js @@ -38,7 +38,6 @@ export const ml = (kibana) => { description: 'Machine Learning for the Elastic Stack', icon: 'plugins/ml/ml.svg', main: 'plugins/ml/app', - styleSheetPath: `${__dirname}/public/index.scss`, }, hacks: ['plugins/ml/hacks/toggle_app_link_in_nav'], home: ['plugins/ml/register_feature'] diff --git a/x-pack/plugins/ml/public/index.scss b/x-pack/plugins/ml/public/index.scss deleted file mode 100644 index daaeb91856f74..0000000000000 --- a/x-pack/plugins/ml/public/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'ui/public/styles/styling_constants'; - -@import 'core_plugins/kibana/public/visualize/index'; diff --git a/x-pack/plugins/monitoring/public/_hacks.scss b/x-pack/plugins/monitoring/public/_hacks.scss index 52a9d8d7d8789..8a09f1a39a637 100644 --- a/x-pack/plugins/monitoring/public/_hacks.scss +++ b/x-pack/plugins/monitoring/public/_hacks.scss @@ -1,26 +1,28 @@ -// SASSTODO: We need background colors till more of Kibana is converted -.tab-no-data, .tab-overview, .tab-license { - background: $euiColorLightestShade; -} +#monitoring-app { + // SASSTODO: We need background colors till more of Kibana is converted + .tab-no-data, .tab-overview, .tab-license { + background: $euiColorLightestShade; + } -// SASSTODO: PUI tooltips can be replaced with EuiToolTip -.pui-tooltip-inner { - font-size: $euiFontSizeXS; -} + // SASSTODO: PUI tooltips can be replaced with EuiToolTip + .pui-tooltip-inner { + font-size: $euiFontSizeXS; + } -.monitoring-tooltip__trigger, -.monitoring-tooltip__trigger:hover { - color: $euiTextColor; -} + .monitoring-tooltip__trigger, + .monitoring-tooltip__trigger:hover { + color: $euiTextColor; + } -// SASSTODO: Remove font awesome -.betaIcon { - color: $euiColorDarkShade; -} + // SASSTODO: Remove font awesome + .betaIcon { + color: $euiColorDarkShade; + } -// SASSTOD: Remove this, it comes from xpack_main/styles/main.less and was imported into monitoring -.xpack-breadcrumbs { - min-height: 37px; - padding: 8px 10px; - margin: 0; + // SASSTOD: Remove this, it comes from xpack_main/styles/main.less and was imported into monitoring + .xpack-breadcrumbs { + min-height: 37px; + padding: 8px 10px; + margin: 0; + } } diff --git a/x-pack/plugins/monitoring/ui_exports.js b/x-pack/plugins/monitoring/ui_exports.js index 2d9a4d0d30c72..eb21475456eaa 100644 --- a/x-pack/plugins/monitoring/ui_exports.js +++ b/x-pack/plugins/monitoring/ui_exports.js @@ -18,7 +18,6 @@ export const uiExports = { icon: 'plugins/monitoring/icons/monitoring.svg', linkToLastSubUrl: false, main: 'plugins/monitoring/monitoring', - styleSheetPath: `${__dirname}/public/index.scss`, }, injectDefaultVars(server) { const config = server.config(); @@ -27,5 +26,6 @@ export const uiExports = { }; }, hacks: [ 'plugins/monitoring/hacks/toggle_app_link_in_nav' ], - home: [ 'plugins/monitoring/register_feature' ] + home: [ 'plugins/monitoring/register_feature' ], + styleSheetPaths: `${__dirname}/public/index.scss`, };