github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade EUI to v46.1.0 (#123652)

Browse source 
* eui to 46.1.0

* use optimize build

* dataGridWrapper -> euiDataGridBody

* remove unused dep from bazel

* use column-index and row-index attrs

* datagrid test fixes

* prevent duplicate global styles

* snapshot updates

* rendering_service test

* update comment

* clean up

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Greg Thompson 2022-01-28 08:53:36 -06:00 • committed by GitHub
parent 28eb46d4a7
commit e84f370ef0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 87 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -107,7 +107,7 @@
"@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2",
"@elastic/ems-client": "8.0.0",
"@elastic/eui": "44.0.0",
"@elastic/eui": "46.1.0",
"@elastic/filesaver": "1.1.2",
"@elastic/node-crypto": "1.2.1",
"@elastic/numeral": "^2.5.1",

1
packages/kbn-ui-shared-deps-npm/BUILD.bazel
View file

@ -36,7 +36,6 @@ RUNTIME_DEPS = [
"@npm//@elastic/numeral",
"@npm//@emotion/react",
"@npm//babel-loader",
"@npm//babel-plugin-transform-react-remove-prop-types",
"@npm//core-js",
"@npm//css-loader",
"@npm//fflate",

24
packages/kbn-ui-shared-deps-npm/webpack.config.js
View file

@ -129,30 +129,12 @@ module.exports = (_, argv) => {
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /[\\\/]@elastic[\\\/]eui[\\\/].*\.js$/,
use: [
{
loader: 'babel-loader',
options: {
plugins: [
[
require.resolve('babel-plugin-transform-react-remove-prop-types'),
{
mode: 'remove',
removeImport: true,
},
],
],
},
},
],
},
],
},
resolve: {
alias: {
'@elastic/eui$': '@elastic/eui/optimize/es',
moment: MOMENT_SRC,
// NOTE: Used to include react profiling on bundles
// https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
@ -179,8 +161,8 @@ module.exports = (_, argv) => {
new CleanWebpackPlugin({
protectWebpackAssets: false,
cleanAfterEveryBuildPatterns: [
'kbn-ui-shared-deps-npm.{v7,v8}.{dark,light}.{dll.js,dll.js.map}',
'kbn-ui-shared-deps-npm.{v7,v8}.{dark,light}-manifest.json',
'kbn-ui-shared-deps-npm.v8.{dark,light}.{dll.js,dll.js.map}',
'kbn-ui-shared-deps-npm.v8.{dark,light}-manifest.json',
],
}),
new MiniCssExtractPlugin({

1
packages/kbn-ui-shared-deps-src/webpack.config.js
View file

@ -74,6 +74,7 @@ module.exports = {
extensions: ['.js', '.ts'],
symlinks: false,
alias: {
'@elastic/eui$': '@elastic/eui/optimize/es',
moment: MOMENT_SRC,
// NOTE: Used to include react profiling on bundles
// https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4

4
src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap generated
View file

@ -53,6 +53,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -77,6 +78,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -127,6 +129,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -151,6 +154,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,

38
src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap generated
View file

@ -19,6 +19,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -43,6 +44,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -103,6 +105,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -125,6 +128,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -152,6 +156,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -172,6 +177,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -232,6 +238,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -254,6 +261,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -279,6 +287,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -303,6 +312,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -323,6 +333,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -346,6 +357,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -396,6 +408,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -418,6 +431,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -443,6 +457,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -467,6 +482,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -487,6 +503,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -510,6 +527,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -565,6 +583,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -587,6 +606,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -612,6 +632,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -636,6 +657,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -656,6 +678,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -679,6 +702,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -729,6 +753,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -751,6 +776,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -776,6 +802,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -800,6 +827,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -820,6 +848,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -843,6 +872,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -932,6 +962,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -956,6 +987,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -1006,6 +1038,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -1030,6 +1063,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -1085,6 +1119,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -1109,6 +1144,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -1159,6 +1195,7 @@ Array [
Array [
Object {
"children": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,
@ -1183,6 +1220,7 @@ Array [
Object {
"type": "return",
"value": <CoreThemeProvider
globalStyles={false}
theme$={
Observable {
"_isScalar": false,

5
src/core/public/rendering/rendering_service.test.tsx
View file

@ -104,4 +104,9 @@ describe('RenderingService#start', () => {
</div>
`);
});
it('adds global styles via `CoreContextProvider` `globalStyles` configuration', () => {
startService();
expect(document.querySelector(`style[data-emotion="eui-styles-global"]`)).toBeDefined();
});
});

2
src/core/public/rendering/rendering_service.tsx
View file

@ -51,7 +51,7 @@ export class RenderingService {
});
ReactDOM.render(
<CoreContextProvider i18n={i18n} theme={theme}>
<CoreContextProvider i18n={i18n} theme={theme} globalStyles={true}>
<>
{/* Fixed headers */}
{chromeHeader}

10
src/core/public/theme/core_theme_provider.tsx
View file

@ -10,7 +10,7 @@ import React, { FC, useMemo } from 'react';
import { Observable } from 'rxjs';
import useObservable from 'react-use/lib/useObservable';
import createCache from '@emotion/cache';
import { EuiProvider } from '@elastic/eui';
import { EuiProvider, EuiProviderProps } from '@elastic/eui';
import { EUI_STYLES_GLOBAL } from '../../utils';
import { CoreTheme } from './types';
import { convertCoreTheme } from './convert_core_theme';
@ -21,6 +21,7 @@ const defaultTheme: CoreTheme = {
interface CoreThemeProviderProps {
theme$: Observable<CoreTheme>;
globalStyles?: EuiProviderProps<{}>['globalStyles'];
}
const emotionCache = createCache({
@ -32,11 +33,16 @@ const emotionCache = createCache({
* Wrapper around `EuiProvider` converting (and exposing) core's theme to EUI theme.
* @internal Only meant to be used within core for internal usages of EUI/React
*/
export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({ theme$, children }) => {
export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({
theme$,
children,
globalStyles,
}) => {
const coreTheme = useObservable(theme$, defaultTheme);
const euiTheme = useMemo(() => convertCoreTheme(coreTheme), [coreTheme]);
return (
<EuiProvider
globalStyles={globalStyles}
colorMode={euiTheme.colorMode}
theme={euiTheme.euiThemeSystem}
cache={emotionCache}

16
src/core/public/utils/core_context_provider.tsx
View file

@ -14,15 +14,27 @@ import type { I18nStart } from '../i18n';
interface CoreContextProviderProps {
theme: ThemeServiceStart;
i18n: I18nStart;
globalStyles?: boolean;
}
/**
* utility component exposing all the context providers required by core when integrating with react
**/
export const CoreContextProvider: FC<CoreContextProviderProps> = ({ i18n, theme, children }) => {
export const CoreContextProvider: FC<CoreContextProviderProps> = ({
i18n,
theme,
children,
globalStyles = false,
}) => {
// `globalStyles` default value is inverted from that of `EuiProvider`.
// Default to `false` (does not add EUI global styles) because more instances use that value.
// A value of `true` (does add EUI global styles) will have `EuiProvider` use its default value.
const includeGlobalStyles = globalStyles === false ? false : undefined;
return (
<i18n.Context>
<CoreThemeProvider theme$={theme.theme$}>{children}</CoreThemeProvider>
<CoreThemeProvider theme$={theme.theme$} globalStyles={includeGlobalStyles}>
{children}
</CoreThemeProvider>
</i18n.Context>
);
};

2
src/dev/license_checker/config.ts
View file

@ -77,6 +77,6 @@ export const LICENSE_OVERRIDES = {
'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
'@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
'@elastic/ems-client@8.0.0': ['Elastic License 2.0'],
'@elastic/eui@44.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
'@elastic/eui@46.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
};

2
test/functional/page_objects/visualize_chart_page.ts
View file

@ -364,7 +364,7 @@ export class VisualizeChartPageObject extends FtrService {
public async getTableVisContent({ stripEmptyRows = true } = {}) {
return await this.retry.try(async () => {
const container = await this.testSubjects.find('tbvChart');
const allTables = await this.testSubjects.findAllDescendant('dataGridWrapper', container);
const allTables = await this.testSubjects.findAllDescendant('euiDataGridBody', container);
if (allTables.length === 0) {
return [];

4
test/functional/services/data_grid.ts
View file

@ -72,7 +72,7 @@ export class DataGridService extends FtrService {
* Returns an array of data grid headers names
*/
public async getHeaders() {
const header = await this.testSubjects.find('dataGridWrapper > dataGridHeader');
const header = await this.testSubjects.find('euiDataGridBody > dataGridHeader');
const $ = await header.parseDomContent();
return $('.euiDataGridHeaderCell__content')
.toArray()
@ -86,7 +86,7 @@ export class DataGridService extends FtrService {
*/
public async getCellElement(rowIndex: number = 0, columnIndex: number = 0) {
return await this.find.byCssSelector(
`[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRowCell"][data-gridcell-id="${rowIndex},${columnIndex}"]`
`[data-test-subj="euiDataGridBody"] [data-test-subj="dataGridRowCell"][data-gridcell-column-index="${columnIndex}"][data-gridcell-row-index="${rowIndex}"]`
);
}

2
x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
View file

@ -26,7 +26,7 @@ export const createGridCell = (
const IS_DARK_THEME = uiSettings.get('theme:darkMode');
return ({ rowIndex, columnId, setCellProps }: EuiDataGridCellValueElementProps) => {
const { table, alignments, minMaxByColumnId, getColorForValue } = useContext(DataContext);
const rowValue = table?.rows[rowIndex][columnId];
const rowValue = table?.rows[rowIndex]?.[columnId];
const content = formatters[columnId]?.convert(rowValue, 'html');
const currentAlignment = alignments && alignments[columnId];
const alignmentClassName = `lnsTableCell--${currentAlignment}`;

2
x-pack/plugins/security_solution/cypress/screens/alerts.ts
View file

@ -23,7 +23,7 @@ export const ALERT_RISK_SCORE = '[data-test-subj="formatted-field-kibana.alert.r
export const ALERT_SEVERITY = '[data-test-subj="formatted-field-kibana.alert.severity"]';
export const ALERT_DATA_GRID = '[data-test-subj="dataGridWrapper"]';
export const ALERT_DATA_GRID = '[data-test-subj="euiDataGridBody"]';
export const ALERTS = '[data-test-subj="events-viewer-panel"][data-test-subj="event"]';

2
x-pack/plugins/timelines/public/components/t_grid/body/index.test.tsx
View file

@ -126,7 +126,7 @@ describe('Body', () => {
</TestProviders>
);
expect(wrapper.find('div.euiDataGrid__overflow').first().exists()).toEqual(true);
expect(wrapper.find('div.euiDataGrid__virtualized').first().exists()).toEqual(true);
});
test('it renders events', () => {

2
x-pack/test/functional/page_objects/lens_page.ts
View file

@ -932,7 +932,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
async getDatatableCell(rowIndex = 0, colIndex = 0) {
return await find.byCssSelector(
`[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRowCell"][data-gridcell-id="${rowIndex},${colIndex}"]`
`[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRowCell"][data-gridcell-column-index="${colIndex}"][data-gridcell-row-index="${rowIndex}"]`
);
},

8
yarn.lock
View file

@ -1505,10 +1505,10 @@
resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
"@elastic/eui@44.0.0":
version "44.0.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-44.0.0.tgz#5d2dde9715fce5448b7d98367fd274dce974fe0a"
integrity sha512-Co3hSmvHn91upvylKvk5IJDR02KL+hdLQcJWU5DfRxTUv3iua3ZLmCMwG3WeoV/XE7kTsxDlNslRO5I3hk5uWg==
"@elastic/eui@46.1.0":
version "46.1.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-46.1.0.tgz#b1d77a56d529001858b7fc91f6c2953288549336"
integrity sha512-j65NMzqKluVPtk3b6UYdVVaBha74Y8Y/N6QaHin9MmqUKoAPgevqHWvi0n/OmMpADdRCI0ldxkse6tgAvdaEHQ==
dependencies:
"@types/chroma-js" "^2.0.0"
"@types/lodash" "^4.14.160"