remove all references to v7 theme (#113570)
Co-authored-by: spalger <spalger@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Spencer
GitHub
parent
b481bff349
commit
30872e9063
|
|
@ -623,7 +623,7 @@ by your code until the circular dependencies on these have been solved.
|
|||
|
||||
When writing a new component, create a sibling SASS file of the same name and import directly into the **top** of the JS/TS component file. Doing so ensures the styles are never separated or lost on import and allows for better modularization (smaller individual plugin asset footprint).
|
||||
|
||||
All SASS (.scss) files will automatically build with the [EUI](https://elastic.github.io/eui/#/guidelines/sass) & Kibana invisibles (SASS variables, mixins, functions) from the [`globals_[theme].scss` file](src/core/public/core_app/styles/_globals_v7light.scss).
|
||||
All SASS (.scss) files will automatically build with the [EUI](https://elastic.github.io/eui/#/guidelines/sass) & Kibana invisibles (SASS variables, mixins, functions) from the [`globals_[theme].scss` file](src/core/public/core_app/styles/_globals_v8light.scss).
|
||||
|
||||
While the styles for this component will only be loaded if the component exists on the page,
|
||||
the styles **will** be global and so it is recommended to use a three letter prefix on your
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ Set to `true` to enable a dark mode for the {kib} UI. You must refresh the page
|
|||
to apply the setting.
|
||||
|
||||
[[theme-version]]`theme:version`::
|
||||
Specifies the {kib} theme. If you change the setting, refresh the page to apply the setting.
|
||||
Kibana only ships with the v8 theme now, so this setting can no longer be edited.
|
||||
|
||||
[[timepicker-quickranges]]`timepicker:quickRanges`::
|
||||
The list of ranges to show in the Quick section of the time filter. This should
|
||||
|
|
|
|||
|
|
@ -44,19 +44,16 @@ Any import in a bundle which resolves into another bundles "context" directory,
|
|||
|
||||
## Themes
|
||||
|
||||
SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `v7light` and `v7dark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.
|
||||
SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `v8light` and `v8dark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.
|
||||
|
||||
To customize the themes that are built for development you can specify the `KBN_OPTIMIZER_THEMES` environment variable to one or more theme tags, or use `*` to build styles for all themes. Unfortunately building more than one theme significantly impacts build performance, so try to be strategic about which themes you build.
|
||||
|
||||
Currently supported theme tags: `v7light`, `v7dark`, `v8light`, `v8dark`
|
||||
Currently supported theme tags: `v8light`, `v8dark`
|
||||
|
||||
Examples:
|
||||
```sh
|
||||
# start Kibana with only a single theme
|
||||
KBN_OPTIMIZER_THEMES=v7light yarn start
|
||||
|
||||
# start Kibana with dark themes for version 7 and 8
|
||||
KBN_OPTIMIZER_THEMES=v7dark,v8dark yarn start
|
||||
KBN_OPTIMIZER_THEMES=v8light yarn start
|
||||
|
||||
# start Kibana with all the themes
|
||||
KBN_OPTIMIZER_THEMES=* yarn start
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@ it('returns default tags when passed undefined', () => {
|
|||
it('returns all tags when passed *', () => {
|
||||
expect(parseThemeTags('*')).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
"v7dark",
|
||||
"v7light",
|
||||
"v8dark",
|
||||
"v8light",
|
||||
]
|
||||
|
|
@ -37,38 +35,37 @@ it('returns specific tag when passed a single value', () => {
|
|||
});
|
||||
|
||||
it('returns specific tags when passed a comma separated list', () => {
|
||||
expect(parseThemeTags('v8light, v7dark,v7light')).toMatchInlineSnapshot(`
|
||||
expect(parseThemeTags('v8light,v8dark')).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
"v7dark",
|
||||
"v7light",
|
||||
"v8dark",
|
||||
"v8light",
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('returns specific tags when passed an array', () => {
|
||||
expect(parseThemeTags(['v8light', 'v7light'])).toMatchInlineSnapshot(`
|
||||
expect(parseThemeTags(['v8light', 'v8dark'])).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
"v7light",
|
||||
"v8dark",
|
||||
"v8light",
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('throws when an invalid tag is in the array', () => {
|
||||
expect(() => parseThemeTags(['v8light', 'v7light', 'bar'])).toThrowErrorMatchingInlineSnapshot(
|
||||
`"Invalid theme tags [bar], options: [v7dark, v7light, v8dark, v8light]"`
|
||||
expect(() => parseThemeTags(['v8light', 'v7light'])).toThrowErrorMatchingInlineSnapshot(
|
||||
`"Invalid theme tags [v7light], options: [v8dark, v8light]"`
|
||||
);
|
||||
});
|
||||
|
||||
it('throws when an invalid tags in comma separated list', () => {
|
||||
expect(() => parseThemeTags('v8light ,v7light,bar,box ')).toThrowErrorMatchingInlineSnapshot(
|
||||
`"Invalid theme tags [bar, box], options: [v7dark, v7light, v8dark, v8light]"`
|
||||
expect(() => parseThemeTags('v8light ,v7light')).toThrowErrorMatchingInlineSnapshot(
|
||||
`"Invalid theme tags [v7light], options: [v8dark, v8light]"`
|
||||
);
|
||||
});
|
||||
|
||||
it('returns tags in alphabetical order', () => {
|
||||
const tags = parseThemeTags(['v7light', 'v8light']);
|
||||
const tags = parseThemeTags(['v8dark', 'v8light']);
|
||||
expect(tags).toEqual(tags.slice().sort((a, b) => a.localeCompare(b)));
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ const isArrayOfStrings = (input: unknown): input is string[] =>
|
|||
Array.isArray(input) && input.every((v) => typeof v === 'string');
|
||||
|
||||
export type ThemeTags = readonly ThemeTag[];
|
||||
export type ThemeTag = 'v7light' | 'v7dark' | 'v8light' | 'v8dark';
|
||||
export type ThemeTag = 'v8light' | 'v8dark';
|
||||
export const DEFAULT_THEMES = tags('v8light', 'v8dark');
|
||||
export const ALL_THEMES = tags('v7light', 'v7dark', 'v8light', 'v8dark');
|
||||
export const ALL_THEMES = tags('v8light', 'v8dark');
|
||||
|
||||
export function parseThemeTags(input?: any): ThemeTags {
|
||||
if (!input) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,7 +10,7 @@ import { stringifyRequest, getOptions } from 'loader-utils';
|
|||
import webpack from 'webpack';
|
||||
import { parseThemeTags, ALL_THEMES, ThemeTag } from '../common';
|
||||
|
||||
const getVersion = (tag: ThemeTag) => (tag.includes('v7') ? 7 : 8);
|
||||
const getVersion = (tag: ThemeTag) => 8;
|
||||
const getIsDark = (tag: ThemeTag) => tag.includes('dark');
|
||||
const compare = (a: ThemeTag, b: ThemeTag) =>
|
||||
(getVersion(a) === getVersion(b) ? 1 : 0) + (getIsDark(a) === getIsDark(b) ? 1 : 0);
|
||||
|
|
|
|||
|
|
@ -25,14 +25,12 @@ export function ThemeSwitcher() {
|
|||
const links: Link[] = [
|
||||
{
|
||||
id: 'v8.light',
|
||||
title: 'Amsterdam: Light',
|
||||
title: 'Light',
|
||||
},
|
||||
{
|
||||
id: 'v8.dark',
|
||||
title: 'Amsterdam: Dark',
|
||||
title: 'Dark',
|
||||
},
|
||||
{ id: 'v7.light', title: 'Light' },
|
||||
{ id: 'v7.dark', title: 'Dark' },
|
||||
].map((link) => ({
|
||||
...link,
|
||||
onClick: (_event, item) => {
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export default function ({ config: storybookConfig }: { config: Configuration })
|
|||
additionalData(content: string, loaderContext: any) {
|
||||
return `@import ${stringifyRequest(
|
||||
loaderContext,
|
||||
resolve(REPO_ROOT, 'src/core/public/core_app/styles/_globals_v7light.scss')
|
||||
resolve(REPO_ROOT, 'src/core/public/core_app/styles/_globals_v8light.scss')
|
||||
)};\n${content}`;
|
||||
},
|
||||
implementation: require('node-sass'),
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {'v8'} ThemeVersion
|
||||
*/
|
||||
|
||||
const Path = require('path');
|
||||
|
||||
/**
|
||||
|
|
@ -25,23 +29,27 @@ exports.dllFilename = 'kbn-ui-shared-deps-npm.dll.js';
|
|||
|
||||
/**
|
||||
* Filename of the light-theme css file in the distributable directory
|
||||
* @param {ThemeVersion} themeVersion
|
||||
*/
|
||||
exports.lightCssDistFilename = 'kbn-ui-shared-deps-npm.v7.light.css';
|
||||
exports.lightCssDistFilename = (themeVersion) => {
|
||||
if (themeVersion !== 'v8') {
|
||||
throw new Error(`unsupported theme version [${themeVersion}]`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filename of the light-theme css file in the distributable directory
|
||||
*/
|
||||
exports.lightV8CssDistFilename = 'kbn-ui-shared-deps-npm.v8.light.css';
|
||||
return 'kbn-ui-shared-deps-npm.v8.light.css';
|
||||
};
|
||||
|
||||
/**
|
||||
* Filename of the dark-theme css file in the distributable directory
|
||||
* @param {ThemeVersion} themeVersion
|
||||
*/
|
||||
exports.darkCssDistFilename = 'kbn-ui-shared-deps-npm.v7.dark.css';
|
||||
exports.darkCssDistFilename = (themeVersion) => {
|
||||
if (themeVersion !== 'v8') {
|
||||
throw new Error(`unsupported theme version [${themeVersion}]`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filename of the dark-theme css file in the distributable directory
|
||||
*/
|
||||
exports.darkV8CssDistFilename = 'kbn-ui-shared-deps-npm.v8.dark.css';
|
||||
return 'kbn-ui-shared-deps-npm.v8.dark.css';
|
||||
};
|
||||
|
||||
/**
|
||||
* Webpack loader for configuring the public path lookup from `window.__kbnPublicPath__`.
|
||||
|
|
|
|||
|
|
@ -44,8 +44,6 @@ module.exports = (_, argv) => {
|
|||
'@elastic/eui/dist/eui_charts_theme',
|
||||
'@elastic/eui/lib/services',
|
||||
'@elastic/eui/lib/services/format',
|
||||
'@elastic/eui/dist/eui_theme_light.json',
|
||||
'@elastic/eui/dist/eui_theme_dark.json',
|
||||
'@elastic/eui/dist/eui_theme_amsterdam_light.json',
|
||||
'@elastic/eui/dist/eui_theme_amsterdam_dark.json',
|
||||
'@elastic/numeral',
|
||||
|
|
@ -71,8 +69,6 @@ module.exports = (_, argv) => {
|
|||
'styled-components',
|
||||
'tslib',
|
||||
],
|
||||
'kbn-ui-shared-deps-npm.v7.dark': ['@elastic/eui/dist/eui_theme_dark.css'],
|
||||
'kbn-ui-shared-deps-npm.v7.light': ['@elastic/eui/dist/eui_theme_light.css'],
|
||||
'kbn-ui-shared-deps-npm.v8.dark': ['@elastic/eui/dist/eui_theme_amsterdam_dark.css'],
|
||||
'kbn-ui-shared-deps-npm.v8.light': ['@elastic/eui/dist/eui_theme_amsterdam_light.css'],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,30 +6,21 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { default as v7Light } from '@elastic/eui/dist/eui_theme_light.json';
|
||||
import { default as v7Dark } from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
|
||||
import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
|
||||
|
||||
const globals: any = typeof window === 'undefined' ? {} : window;
|
||||
|
||||
export type Theme = typeof v7Light | typeof v8Light;
|
||||
export type Theme = typeof v8Light;
|
||||
|
||||
// in the Kibana app we can rely on this global being defined, but in
|
||||
// some cases (like jest) the global is undefined
|
||||
export const tag: string = globals.__kbnThemeTag__ || 'v7light';
|
||||
export const version = tag.startsWith('v7') ? 7 : 8;
|
||||
export const tag: string = globals.__kbnThemeTag__ || 'v8light';
|
||||
export const version = 8;
|
||||
export const darkMode = tag.endsWith('dark');
|
||||
|
||||
export let euiLightVars: Theme;
|
||||
export let euiDarkVars: Theme;
|
||||
if (version === 7) {
|
||||
euiLightVars = v7Light;
|
||||
euiDarkVars = v7Dark;
|
||||
} else {
|
||||
euiLightVars = v8Light;
|
||||
euiDarkVars = v8Dark;
|
||||
}
|
||||
export const euiLightVars: Theme = v8Light;
|
||||
export const euiDarkVars: Theme = v8Dark;
|
||||
|
||||
/**
|
||||
* EUI Theme vars that automatically adjust to light/dark theme
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
// v7dark global scope
|
||||
//
|
||||
// prepended to all .scss imports (from JS, when v7dark theme selected)
|
||||
|
||||
@import '@elastic/eui/src/themes/eui/eui_colors_dark';
|
||||
@import '@elastic/eui/src/themes/eui/eui_globals';
|
||||
|
||||
@import './mixins';
|
||||
|
||||
$kbnThemeVersion: 'v7dark';
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// v7light global scope
|
||||
//
|
||||
// prepended to all .scss imports (from JS, when v7light theme selected)
|
||||
|
||||
@import '@elastic/eui/src/themes/eui/eui_colors_light';
|
||||
@import '@elastic/eui/src/themes/eui/eui_globals';
|
||||
|
||||
@import './mixins';
|
||||
|
||||
$kbnThemeVersion: 'v7light';
|
||||
|
|
@ -120,31 +120,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin kbnThemeStyle($theme, $mode: 'both') {
|
||||
$themes: 'v7', 'v8';
|
||||
@if (index($themes, $theme)) {
|
||||
@if ($mode == 'both') {
|
||||
$themeLight: $theme + 'light';
|
||||
$themeDark: $theme + 'dark';
|
||||
// $kbnThemeVersion comes from the active theme's globals file (e.g. _globals_v8light.scss)
|
||||
@if ($kbnThemeVersion == $themeLight or $kbnThemeVersion == $themeDark) {
|
||||
@content;
|
||||
}
|
||||
} @else if ($mode == 'light') {
|
||||
$themeLight: $theme + 'light';
|
||||
@if ($kbnThemeVersion == $themeLight) {
|
||||
@content;
|
||||
}
|
||||
} @else if ($mode == 'dark') {
|
||||
$themeDark: $theme + 'dark';
|
||||
@if ($kbnThemeVersion == $themeDark) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn 'The second parameter must be a valid mode (light, dark, or both) -- got #{$mode}';
|
||||
}
|
||||
} @else {
|
||||
@warn 'Invalid $theme. Valid options are: #{$themes}. Got #{$theme} instead';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,92 +0,0 @@
|
|||
Copyright (c) 2016-2018 The Inter UI Project Authors (me@rsms.me)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION AND CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
|
|
@ -33,7 +33,7 @@ function kbnBundlesLoader() {
|
|||
|
||||
var kbnCsp = JSON.parse(document.querySelector('kbn-csp').getAttribute('data'));
|
||||
window.__kbnStrictCsp__ = kbnCsp.strictCsp;
|
||||
window.__kbnThemeTag__ = \\"v7\\";
|
||||
window.__kbnThemeTag__ = \\"v8light\\";
|
||||
window.__kbnPublicPath__ = {\\"foo\\": \\"bar\\"};
|
||||
window.__kbnBundles__ = kbnBundlesLoader();
|
||||
|
||||
|
|
|
|||
|
|
@ -85,15 +85,12 @@ describe('bootstrapRenderer', () => {
|
|||
uiSettingsClient,
|
||||
});
|
||||
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledTimes(2);
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledTimes(1);
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledWith('theme:darkMode');
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledWith('theme:version');
|
||||
});
|
||||
|
||||
it('calls getThemeTag with the correct parameters', async () => {
|
||||
uiSettingsClient.get.mockImplementation((settingName) => {
|
||||
return Promise.resolve(settingName === 'theme:darkMode' ? true : 'v8');
|
||||
});
|
||||
uiSettingsClient.get.mockResolvedValue(true);
|
||||
|
||||
const request = httpServerMock.createKibanaRequest();
|
||||
|
||||
|
|
@ -126,15 +123,12 @@ describe('bootstrapRenderer', () => {
|
|||
uiSettingsClient,
|
||||
});
|
||||
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledTimes(2);
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledTimes(1);
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledWith('theme:darkMode');
|
||||
expect(uiSettingsClient.get).toHaveBeenCalledWith('theme:version');
|
||||
});
|
||||
|
||||
it('calls getThemeTag with the correct parameters', async () => {
|
||||
uiSettingsClient.get.mockImplementation((settingName) => {
|
||||
return Promise.resolve(settingName === 'theme:darkMode' ? true : 'v8');
|
||||
});
|
||||
uiSettingsClient.get.mockResolvedValue(true);
|
||||
|
||||
const request = httpServerMock.createKibanaRequest();
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
import { createHash } from 'crypto';
|
||||
import { PackageInfo } from '@kbn/config';
|
||||
import { ThemeVersion } from '@kbn/ui-shared-deps-npm';
|
||||
import { UiPlugins } from '../../plugins';
|
||||
import { IUiSettingsClient } from '../../ui_settings';
|
||||
import { HttpAuth, KibanaRequest } from '../../http';
|
||||
|
|
@ -50,12 +51,11 @@ export const bootstrapRendererFactory: BootstrapRendererFactory = ({
|
|||
|
||||
return async function bootstrapRenderer({ uiSettingsClient, request }) {
|
||||
let darkMode = false;
|
||||
let themeVersion = 'v8';
|
||||
const themeVersion: ThemeVersion = 'v8';
|
||||
|
||||
try {
|
||||
const authenticated = isAuthenticated(request);
|
||||
darkMode = authenticated ? await uiSettingsClient.get('theme:darkMode') : false;
|
||||
themeVersion = authenticated ? await uiSettingsClient.get('theme:version') : 'v8';
|
||||
} catch (e) {
|
||||
// just use the default values in case of connectivity issues with ES
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,22 +9,6 @@
|
|||
import { getThemeTag } from './get_theme_tag';
|
||||
|
||||
describe('getThemeTag', () => {
|
||||
it('returns the correct value for version:v7 and darkMode:false', () => {
|
||||
expect(
|
||||
getThemeTag({
|
||||
themeVersion: 'v7',
|
||||
darkMode: false,
|
||||
})
|
||||
).toEqual('v7light');
|
||||
});
|
||||
it('returns the correct value for version:v7 and darkMode:true', () => {
|
||||
expect(
|
||||
getThemeTag({
|
||||
themeVersion: 'v7',
|
||||
darkMode: true,
|
||||
})
|
||||
).toEqual('v7dark');
|
||||
});
|
||||
it('returns the correct value for version:v8 and darkMode:false', () => {
|
||||
expect(
|
||||
getThemeTag({
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import type { ThemeVersion } from '@kbn/ui-shared-deps-npm';
|
||||
|
||||
/**
|
||||
* Computes the themeTag that will be used on the client-side as `__kbnThemeTag__`
|
||||
* @see `packages/kbn-ui-shared-deps-src/theme.ts`
|
||||
|
|
@ -14,8 +16,8 @@ export const getThemeTag = ({
|
|||
themeVersion,
|
||||
darkMode,
|
||||
}: {
|
||||
themeVersion: string;
|
||||
themeVersion: ThemeVersion;
|
||||
darkMode: boolean;
|
||||
}) => {
|
||||
return `${themeVersion === 'v7' ? 'v7' : 'v8'}${darkMode ? 'dark' : 'light'}`;
|
||||
return `${themeVersion}${darkMode ? 'dark' : 'light'}`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { renderTemplate } from './render_template';
|
|||
|
||||
function mockParams() {
|
||||
return {
|
||||
themeTag: 'v7',
|
||||
themeTag: 'v8light',
|
||||
jsDependencyPaths: ['/js-1', '/js-2'],
|
||||
styleSheetPaths: ['/style-1', '/style-2'],
|
||||
publicPathMap: '{"foo": "bar"}',
|
||||
|
|
|
|||
|
|
@ -10,25 +10,6 @@ import { getStylesheetPaths } from './render_utils';
|
|||
|
||||
describe('getStylesheetPaths', () => {
|
||||
describe('when darkMode is `true`', () => {
|
||||
describe('when themeVersion is `v7`', () => {
|
||||
it('returns the correct list', () => {
|
||||
expect(
|
||||
getStylesheetPaths({
|
||||
darkMode: true,
|
||||
themeVersion: 'v7',
|
||||
basePath: '/base-path',
|
||||
buildNum: 9000,
|
||||
})
|
||||
).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
"/base-path/9000/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.dark.css",
|
||||
"/base-path/9000/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css",
|
||||
"/base-path/node_modules/@kbn/ui-framework/dist/kui_dark.css",
|
||||
"/base-path/ui/legacy_dark_theme.css",
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
describe('when themeVersion is `v8`', () => {
|
||||
it('returns the correct list', () => {
|
||||
expect(
|
||||
|
|
@ -50,25 +31,6 @@ describe('getStylesheetPaths', () => {
|
|||
});
|
||||
});
|
||||
describe('when darkMode is `false`', () => {
|
||||
describe('when themeVersion is `v7`', () => {
|
||||
it('returns the correct list', () => {
|
||||
expect(
|
||||
getStylesheetPaths({
|
||||
darkMode: false,
|
||||
themeVersion: 'v7',
|
||||
basePath: '/base-path',
|
||||
buildNum: 42,
|
||||
})
|
||||
).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
"/base-path/42/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css",
|
||||
"/base-path/42/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css",
|
||||
"/base-path/node_modules/@kbn/ui-framework/dist/kui_light.css",
|
||||
"/base-path/ui/legacy_light_theme.css",
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
describe('when themeVersion is `v8`', () => {
|
||||
it('returns the correct list', () => {
|
||||
expect(
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const getStylesheetPaths = ({
|
|||
basePath,
|
||||
buildNum,
|
||||
}: {
|
||||
themeVersion: string;
|
||||
themeVersion: UiSharedDepsNpm.ThemeVersion;
|
||||
darkMode: boolean;
|
||||
buildNum: number;
|
||||
basePath: string;
|
||||
|
|
@ -37,17 +37,17 @@ export const getStylesheetPaths = ({
|
|||
return [
|
||||
...(darkMode
|
||||
? [
|
||||
themeVersion === 'v7'
|
||||
? `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.darkCssDistFilename}`
|
||||
: `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.darkV8CssDistFilename}`,
|
||||
`${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.darkCssDistFilename(
|
||||
themeVersion
|
||||
)}`,
|
||||
`${regularBundlePath}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
|
||||
`${basePath}/node_modules/@kbn/ui-framework/dist/kui_dark.css`,
|
||||
`${basePath}/ui/legacy_dark_theme.css`,
|
||||
]
|
||||
: [
|
||||
themeVersion === 'v7'
|
||||
? `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename}`
|
||||
: `${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightV8CssDistFilename}`,
|
||||
`${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename(
|
||||
themeVersion
|
||||
)}`,
|
||||
`${regularBundlePath}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
|
||||
`${basePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
|
||||
`${basePath}/ui/legacy_light_theme.css`,
|
||||
|
|
|
|||
|
|
@ -112,9 +112,6 @@ function renderTestCases(
|
|||
if (settingName === 'theme:darkMode') {
|
||||
return true;
|
||||
}
|
||||
if (settingName === 'theme:version') {
|
||||
return 'v8';
|
||||
}
|
||||
return settingName;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import React from 'react';
|
|||
import { renderToStaticMarkup } from 'react-dom/server';
|
||||
import { take } from 'rxjs/operators';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { ThemeVersion } from '@kbn/ui-shared-deps-npm';
|
||||
|
||||
import { UiPlugins } from '../plugins';
|
||||
import { CoreContext } from '../core_context';
|
||||
|
|
@ -93,7 +94,7 @@ export class RenderingService {
|
|||
};
|
||||
|
||||
const darkMode = getSettingValue('theme:darkMode', settings, Boolean);
|
||||
const themeVersion = getSettingValue('theme:version', settings, String);
|
||||
const themeVersion: ThemeVersion = 'v8';
|
||||
|
||||
const stylesheetPaths = getStylesheetPaths({
|
||||
darkMode,
|
||||
|
|
@ -109,8 +110,8 @@ export class RenderingService {
|
|||
i18n: i18n.translate,
|
||||
locale: i18n.getLocale(),
|
||||
darkMode,
|
||||
stylesheetPaths,
|
||||
themeVersion,
|
||||
stylesheetPaths,
|
||||
injectedMetadata: {
|
||||
version: env.packageInfo.version,
|
||||
buildNumber: env.packageInfo.buildNum,
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { ThemeVersion } from '@kbn/ui-shared-deps-npm';
|
||||
|
||||
import { EnvironmentMode, PackageInfo } from '../config';
|
||||
import { ICspConfig } from '../csp';
|
||||
|
|
@ -24,7 +25,7 @@ export interface RenderingMetadata {
|
|||
i18n: typeof i18n.translate;
|
||||
locale: string;
|
||||
darkMode: boolean;
|
||||
themeVersion?: string;
|
||||
themeVersion: ThemeVersion;
|
||||
stylesheetPaths: string[];
|
||||
injectedMetadata: {
|
||||
version: string;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import { RenderingMetadata } from '../types';
|
|||
|
||||
interface Props {
|
||||
url: RenderingMetadata['uiPublicUrl'];
|
||||
themeVersion?: string;
|
||||
}
|
||||
|
||||
interface FontFace {
|
||||
|
|
@ -165,158 +164,6 @@ const getInter = (url: string): FontFace => {
|
|||
};
|
||||
};
|
||||
|
||||
const getInterUi = (url: string): FontFace => {
|
||||
return {
|
||||
family: 'Inter UI',
|
||||
variants: [
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 100,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-Thin-BETA.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-Thin-BETA.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 100,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-ThinItalic-BETA.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-ThinItalic-BETA.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 200,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraLight-BETA.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraLight-BETA.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 200,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraLightItalic-BETA.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraLightItalic-BETA.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 300,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-Light-BETA.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-Light-BETA.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 300,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-LightItalic-BETA.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-LightItalic-BETA.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 400,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-Regular.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-Regular.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 400,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-Italic.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-Italic.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 500,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-Medium.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-Medium.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 500,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-MediumItalic.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-MediumItalic.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 600,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-SemiBold.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-SemiBold.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 600,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-SemiBoldItalic.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-SemiBoldItalic.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 700,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-Bold.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-Bold.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 700,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-BoldItalic.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-BoldItalic.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 800,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraBold.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraBold.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 800,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraBoldItalic.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-ExtraBoldItalic.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'normal',
|
||||
weight: 900,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-Black.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-Black.woff`,
|
||||
],
|
||||
},
|
||||
{
|
||||
style: 'italic',
|
||||
weight: 900,
|
||||
sources: [
|
||||
`${url}/fonts/inter_ui/Inter-UI-BlackItalic.woff2`,
|
||||
`${url}/fonts/inter_ui/Inter-UI-BlackItalic.woff`,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const getRoboto = (url: string): FontFace => {
|
||||
return {
|
||||
family: 'Roboto Mono',
|
||||
|
|
@ -372,11 +219,8 @@ const getRoboto = (url: string): FontFace => {
|
|||
};
|
||||
};
|
||||
|
||||
export const Fonts: FunctionComponent<Props> = ({ url, themeVersion }) => {
|
||||
/**
|
||||
* If `themeVersion` is not provided, we want to fallback to the newest font family `Inter`
|
||||
*/
|
||||
const sansFont = themeVersion === 'v7' ? getInterUi(url) : getInter(url);
|
||||
export const Fonts: FunctionComponent<Props> = ({ url }) => {
|
||||
const sansFont = getInter(url);
|
||||
const codeFont = getRoboto(url);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ export const Template: FunctionComponent<Props> = ({
|
|||
uiPublicUrl,
|
||||
locale,
|
||||
darkMode,
|
||||
themeVersion,
|
||||
stylesheetPaths,
|
||||
injectedMetadata,
|
||||
i18n,
|
||||
|
|
@ -37,7 +36,7 @@ export const Template: FunctionComponent<Props> = ({
|
|||
<meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>Elastic</title>
|
||||
<Fonts themeVersion={themeVersion} url={uiPublicUrl} />
|
||||
<Fonts url={uiPublicUrl} />
|
||||
{/* The alternate icon is a fallback for Safari which does not yet support SVG favicons */}
|
||||
<link rel="alternate icon" type="image/png" href={`${uiPublicUrl}/favicons/favicon.png`} />
|
||||
<link rel="icon" type="image/svg+xml" href={`${uiPublicUrl}/favicons/favicon.svg`} />
|
||||
|
|
|
|||
|
|
@ -186,4 +186,28 @@ describe('ui_settings 8.0.0 migrations', () => {
|
|||
migrationVersion: {},
|
||||
});
|
||||
});
|
||||
test('removes custom theme:version setting', () => {
|
||||
const doc = {
|
||||
type: 'config',
|
||||
id: '8.0.0',
|
||||
attributes: {
|
||||
buildNum: 9007199254740991,
|
||||
'theme:version': 'v7',
|
||||
},
|
||||
references: [],
|
||||
updated_at: '2020-06-09T20:18:20.349Z',
|
||||
migrationVersion: {},
|
||||
};
|
||||
|
||||
expect(migration(doc)).toEqual({
|
||||
type: 'config',
|
||||
id: '8.0.0',
|
||||
attributes: {
|
||||
buildNum: 9007199254740991,
|
||||
},
|
||||
references: [],
|
||||
updated_at: '2020-06-09T20:18:20.349Z',
|
||||
migrationVersion: {},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ export const migrations = {
|
|||
// owner: Team:Core
|
||||
'telemetry:optIn',
|
||||
'xPackMonitoring:allowReport',
|
||||
'theme:version',
|
||||
].includes(key)
|
||||
? {
|
||||
...acc,
|
||||
|
|
|
|||
|
|
@ -29,72 +29,28 @@ describe('theme settings', () => {
|
|||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('theme:version', () => {
|
||||
const validate = getValidationFn(themeSettings['theme:version']);
|
||||
|
||||
it('should only accept valid values', () => {
|
||||
expect(() => validate('v7')).not.toThrow();
|
||||
expect(() => validate('v8')).not.toThrow();
|
||||
expect(() => validate('v12')).toThrowErrorMatchingInlineSnapshot(`
|
||||
"types that failed validation:
|
||||
- [0]: expected value to equal [v7]
|
||||
- [1]: expected value to equal [v8]"
|
||||
`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('process.env.KBN_OPTIMIZER_THEMES handling', () => {
|
||||
it('provides valid options based on tags', () => {
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v7light,v8dark';
|
||||
let settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:version'].options).toEqual(['v7', 'v8']);
|
||||
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8dark,v7light';
|
||||
settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:version'].options).toEqual(['v7', 'v8']);
|
||||
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8dark,v7light,v7dark,v8light';
|
||||
settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:version'].options).toEqual(['v7', 'v8']);
|
||||
|
||||
process.env.KBN_OPTIMIZER_THEMES = '*';
|
||||
settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:version'].options).toEqual(['v7', 'v8']);
|
||||
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v7light';
|
||||
settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:version'].options).toEqual(['v7']);
|
||||
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8light';
|
||||
settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:version'].options).toEqual(['v8']);
|
||||
});
|
||||
|
||||
it('defaults to properties of first tag', () => {
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8dark,v7light';
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8dark,v8light';
|
||||
let settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:darkMode'].value).toBe(true);
|
||||
expect(settings['theme:version'].value).toBe('v8');
|
||||
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v7light,v8dark';
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8light,v8dark';
|
||||
settings = getThemeSettings({ isDist: false });
|
||||
expect(settings['theme:darkMode'].value).toBe(false);
|
||||
expect(settings['theme:version'].value).toBe('v7');
|
||||
});
|
||||
|
||||
it('ignores the value when isDist is undefined', () => {
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v7light';
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8dark';
|
||||
const settings = getThemeSettings({ isDist: undefined });
|
||||
expect(settings['theme:darkMode'].value).toBe(false);
|
||||
expect(settings['theme:version'].options).toEqual(['v7', 'v8']);
|
||||
});
|
||||
|
||||
it('ignores the value when isDist is true', () => {
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v7light';
|
||||
process.env.KBN_OPTIMIZER_THEMES = 'v8dark';
|
||||
const settings = getThemeSettings({ isDist: true });
|
||||
expect(settings['theme:darkMode'].value).toBe(false);
|
||||
expect(settings['theme:version'].options).toEqual(['v7', 'v8']);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,19 +6,16 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { schema, Type } from '@kbn/config-schema';
|
||||
import { schema } from '@kbn/config-schema';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { ThemeVersion } from '@kbn/ui-shared-deps-npm';
|
||||
import { UiSettingsParams } from '../../../types';
|
||||
|
||||
function parseThemeTags() {
|
||||
if (!process.env.KBN_OPTIMIZER_THEMES) {
|
||||
if (!process.env.KBN_OPTIMIZER_THEMES || process.env.KBN_OPTIMIZER_THEMES === '*') {
|
||||
return ['v8light', 'v8dark'];
|
||||
}
|
||||
|
||||
if (process.env.KBN_OPTIMIZER_THEMES === '*') {
|
||||
return ['v8light', 'v8dark', 'v7light', 'v7dark'];
|
||||
}
|
||||
|
||||
return process.env.KBN_OPTIMIZER_THEMES.split(',').map((t) => t.trim());
|
||||
}
|
||||
|
||||
|
|
@ -26,16 +23,12 @@ function getThemeInfo(options: GetThemeSettingsOptions) {
|
|||
if (options?.isDist ?? true) {
|
||||
return {
|
||||
defaultDarkMode: false,
|
||||
defaultVersion: 'v8',
|
||||
availableVersions: ['v7', 'v8'],
|
||||
};
|
||||
}
|
||||
|
||||
const themeTags = parseThemeTags();
|
||||
return {
|
||||
defaultDarkMode: themeTags[0].endsWith('dark'),
|
||||
defaultVersion: themeTags[0].slice(0, 2),
|
||||
availableVersions: ['v7', 'v8'].filter((v) => themeTags.some((t) => t.startsWith(v))),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -46,9 +39,7 @@ interface GetThemeSettingsOptions {
|
|||
export const getThemeSettings = (
|
||||
options: GetThemeSettingsOptions = {}
|
||||
): Record<string, UiSettingsParams> => {
|
||||
const { availableVersions, defaultDarkMode, defaultVersion } = getThemeInfo(options);
|
||||
|
||||
const onlyOneThemeAvailable = !options?.isDist && availableVersions.length === 1;
|
||||
const { defaultDarkMode } = getThemeInfo(options);
|
||||
|
||||
return {
|
||||
'theme:darkMode': {
|
||||
|
|
@ -62,29 +53,17 @@ export const getThemeSettings = (
|
|||
requiresPageReload: true,
|
||||
schema: schema.boolean(),
|
||||
},
|
||||
/**
|
||||
* Theme is sticking around as there are still a number of places reading it and
|
||||
* we might use it again in the future.
|
||||
*/
|
||||
'theme:version': {
|
||||
name: i18n.translate('core.ui_settings.params.themeVersionTitle', {
|
||||
defaultMessage: 'Theme version',
|
||||
}),
|
||||
value: defaultVersion,
|
||||
type: 'select',
|
||||
options: availableVersions,
|
||||
description: i18n.translate('core.ui_settings.params.themeVersionText', {
|
||||
defaultMessage:
|
||||
'Switch between the theme used for the current and next version of Kibana. A page refresh is required for the setting to be applied. {lessOptions}',
|
||||
values: {
|
||||
lessOptions: onlyOneThemeAvailable
|
||||
? '<br><br> There is only one theme available, set <code>KBN_OPTIMIZER_THEMES=v7light,v7dark,v8light,v8dark</code> to get more options.'
|
||||
: undefined,
|
||||
},
|
||||
}),
|
||||
requiresPageReload: true,
|
||||
schema: schema.oneOf(availableVersions.map((v) => schema.literal(v)) as [Type<string>]),
|
||||
optionLabels: onlyOneThemeAvailable
|
||||
? {
|
||||
[availableVersions[0]]: `${availableVersions[0]} (only)`,
|
||||
}
|
||||
: undefined,
|
||||
value: 'v8' as ThemeVersion,
|
||||
readonly: true,
|
||||
schema: schema.literal('v8'),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,19 +14,17 @@
|
|||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
position: relative;
|
||||
background-color: $euiFormBackgroundColor;
|
||||
border-radius: $euiFormControlBorderRadius;
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
background-color: $euiFormBackgroundColor;
|
||||
border-radius: $euiFormControlBorderRadius;
|
||||
&.kbnQueryBar__textareaWrap--hasPrepend {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.kbnQueryBar__textareaWrap--hasPrepend {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.kbnQueryBar__textareaWrap--hasAppend {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&.kbnQueryBar__textareaWrap--hasAppend {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -39,24 +37,17 @@
|
|||
// shadow to line up correctly.
|
||||
padding: $euiSizeS;
|
||||
box-shadow: 0 0 0 1px $euiFormBorderColor;
|
||||
padding-bottom: $euiSizeS + 1px;
|
||||
// Firefox adds margin to textarea
|
||||
margin: 0;
|
||||
|
||||
@include kbnThemeStyle('v7') {
|
||||
padding-top: $euiSizeS + 2px;
|
||||
&.kbnQueryBar__textarea--hasPrepend {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
padding-bottom: $euiSizeS + 1px;
|
||||
// Firefox adds margin to textarea
|
||||
margin: 0;
|
||||
|
||||
&.kbnQueryBar__textarea--hasPrepend {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.kbnQueryBar__textarea--hasAppend {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&.kbnQueryBar__textarea--hasAppend {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {
|
||||
|
|
|
|||
|
|
@ -5,10 +5,8 @@
|
|||
// todo: once issue https://github.com/elastic/eui/issues/4730 is merged, this code might be safe to remove
|
||||
// Some toolbar buttons are just icons, but EuiButton comes with margin and min-width that need to be removed
|
||||
min-width: 0;
|
||||
@include kbnThemeStyle('v8') {
|
||||
border-width: $euiBorderWidthThin;
|
||||
border-style: solid;
|
||||
}
|
||||
border-width: $euiBorderWidthThin;
|
||||
border-style: solid;
|
||||
|
||||
&[class*='--text'] {
|
||||
// Lighten the border color for all states
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
.kbnTopNavMenu {
|
||||
@include kbnThemeStyle('v7') {
|
||||
margin-right: $euiSizeXS;
|
||||
}
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,8 @@
|
|||
// Lighten the border color for all states
|
||||
border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
&[class*='--text'] {
|
||||
border-width: $euiBorderWidthThin;
|
||||
border-style: solid;
|
||||
}
|
||||
&[class*='--text'] {
|
||||
border-width: $euiBorderWidthThin;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
.quickButtonGroup {
|
||||
.quickButtonGroup__button {
|
||||
background-color: $euiColorEmptyShade;
|
||||
@include kbnThemeStyle('v8') {
|
||||
// sass-lint:disable-block no-important
|
||||
border-width: $euiBorderWidthThin !important;
|
||||
border-style: solid !important;
|
||||
border-color: $euiBorderColor !important;
|
||||
}
|
||||
// sass-lint:disable-block no-important
|
||||
border-width: $euiBorderWidthThin !important;
|
||||
border-style: solid !important;
|
||||
border-color: $euiBorderColor !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ module.exports = {
|
|||
additionalData(content, loaderContext) {
|
||||
return `@import ${stringifyRequest(
|
||||
loaderContext,
|
||||
path.resolve(KIBANA_ROOT, 'src/core/public/core_app/styles/_globals_v7light.scss')
|
||||
path.resolve(KIBANA_ROOT, 'src/core/public/core_app/styles/_globals_v8light.scss')
|
||||
)};\n${content}`;
|
||||
},
|
||||
implementation: require('node-sass'),
|
||||
|
|
|
|||
|
|
@ -50,16 +50,10 @@
|
|||
|
||||
// Removes EUI focus ring
|
||||
@mixin removeEuiFocusRing {
|
||||
@include kbnThemeStyle('v7') {
|
||||
animation: none !important; // sass-lint:disable-line no-important
|
||||
}
|
||||
outline: none;
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
outline: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline-style: none;
|
||||
}
|
||||
&:focus-visible {
|
||||
outline-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,23 +63,14 @@
|
|||
|
||||
#{$target} {
|
||||
@include euiFocusBackground;
|
||||
|
||||
@include kbnThemeStyle('v7') {
|
||||
@include euiFocusRing;
|
||||
}
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
|
||||
}
|
||||
outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
|
||||
}
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
&:focus-visible #{$target} {
|
||||
outline-style: auto; // Chrome
|
||||
}
|
||||
|
||||
&:not(:focus-visible) #{$target} {
|
||||
outline: none;
|
||||
}
|
||||
&:focus-visible #{$target} {
|
||||
outline-style: auto; // Chrome
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:focus-visible) #{$target} {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,15 +20,8 @@
|
|||
transform: translate(-12px, 8px);
|
||||
z-index: $lnsZLevel3;
|
||||
pointer-events: none;
|
||||
|
||||
@include kbnThemeStyle('v7') {
|
||||
box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
|
||||
}
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
|
||||
outline-style: auto; // Chrome
|
||||
}
|
||||
outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
|
||||
outline-style: auto; // Chrome
|
||||
}
|
||||
|
||||
// Draggable item
|
||||
|
|
@ -211,4 +204,4 @@
|
|||
&.lnsDragDrop-incompatibleExtraDrop {
|
||||
color: $euiColorWarningText;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,10 +104,6 @@
|
|||
min-height: $euiSizeXXL - 2;
|
||||
word-break: break-word;
|
||||
font-weight: $euiFontWeightRegular;
|
||||
|
||||
@include kbnThemeStyle('v7') {
|
||||
font-size: $euiFontSizeS;
|
||||
}
|
||||
}
|
||||
|
||||
.lnsLayerPanel__triggerTextLabel {
|
||||
|
|
@ -152,4 +148,4 @@
|
|||
@include passDownFocusRing('.lnsLayerPanel__triggerTextLabel');
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
height: 100%;
|
||||
|
||||
.lnsWorkspacePanelWrapper__pageContentBody {
|
||||
@include euiBottomShadowMedium;
|
||||
@include euiScrollBar;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
|
|
@ -19,14 +20,6 @@
|
|||
background: $euiColorEmptyShade;
|
||||
height: 100%;
|
||||
|
||||
@include kbnThemeStyle('v7') {
|
||||
@include euiBottomShadowSmall;
|
||||
}
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
@include euiBottomShadowMedium;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
|
|
@ -42,13 +35,7 @@
|
|||
}
|
||||
|
||||
.lnsWorkspacePanel__dragDrop {
|
||||
@include kbnThemeStyle('v7') {
|
||||
border: $euiBorderThin;
|
||||
}
|
||||
|
||||
@include kbnThemeStyle('v8') {
|
||||
border: $euiBorderWidthThin solid transparent;
|
||||
}
|
||||
border: $euiBorderWidthThin solid transparent;
|
||||
|
||||
&.lnsDragDrop-isDropTarget {
|
||||
@include lnsDroppable;
|
||||
|
|
|
|||
|
|
@ -54,9 +54,3 @@
|
|||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.lnsIndexPatternDimensionEditor__warning {
|
||||
@include kbnThemeStyle('v7') {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
@mixin mapToolbarButtonGroupBorderRadius {
|
||||
@include kbnThemeStyle($theme: 'v7') {
|
||||
border-radius: $euiBorderRadius;
|
||||
}
|
||||
|
||||
@include kbnThemeStyle($theme: 'v8') {
|
||||
border-radius: $euiBorderRadiusSmall;
|
||||
}
|
||||
|
||||
border-radius: $euiBorderRadiusSmall;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,17 +10,6 @@
|
|||
position: relative;
|
||||
transition: transform $euiAnimSpeedNormal ease-in-out, background $euiAnimSpeedNormal ease-in-out;
|
||||
|
||||
@include kbnThemeStyle($theme: 'v7') {
|
||||
// Overrides the .euiPanel default border
|
||||
// sass-lint:disable-block no-important
|
||||
border: none !important;
|
||||
|
||||
// Overrides the .euiPanel--hasShadow
|
||||
&.euiPanel.euiPanel--hasShadow {
|
||||
@include euiBottomShadowLarge;
|
||||
}
|
||||
}
|
||||
|
||||
.euiButtonIcon:not(.euiButtonIcon--fill) {
|
||||
color: $euiTextColor !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
|
||||
exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
|
||||
|
||||
exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
|
||||
exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">We couldn't log you in</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can't log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></div></div></body></html>"`;
|
||||
exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">We couldn't log you in</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can't log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></div></div></body></html>"`;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></body></html>"`;
|
||||
exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></body></html>"`;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export function PromptPage({
|
|||
const regularBundlePath = `${basePath.serverBasePath}/${buildNumber}/bundles`;
|
||||
const styleSheetPaths = [
|
||||
`${regularBundlePath}/kbn-ui-shared-deps-src/${UiSharedDepsSrc.cssDistFilename}`,
|
||||
`${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename}`,
|
||||
`${regularBundlePath}/kbn-ui-shared-deps-npm/${UiSharedDepsNpm.lightCssDistFilename('v8')}`,
|
||||
`${basePath.serverBasePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
|
||||
`${basePath.serverBasePath}/ui/legacy_light_theme.css`,
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in a new issue