Upgrade to EUI v40.1.0 (#116692) (#117037)

* Upgrade EUI to v40.1.0

* [Discover] Remove temp fix + update snapshot

* Fix deprecated `popperPlacement` prop

* Update test snapshots with table cell change

Co-authored-by: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Constance <constancecchen@users.noreply.github.com>
Co-authored-by: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
This commit is contained in:
Kibana Machine 2021-11-01 19:34:53 -04:00 committed by GitHub
parent bd75d8047a
commit e414cb6b57
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 72 additions and 88 deletions

View file

@ -102,7 +102,7 @@
"@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35",
"@elastic/ems-client": "8.0.0",
"@elastic/eui": "40.0.0",
"@elastic/eui": "40.1.0",
"@elastic/filesaver": "1.1.2",
"@elastic/maki": "6.3.0",
"@elastic/node-crypto": "1.2.1",

View file

@ -75,6 +75,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@40.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
'@elastic/eui@40.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODCBy license https://github.com/mattcg/language-subtag-registry
};

View file

@ -1158,7 +1158,7 @@ exports[`Inspector Data View component should render single table without select
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -2744,7 +2744,7 @@ exports[`Inspector Data View component should support multiple datatables 1`] =
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,

View file

@ -341,7 +341,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
class="euiTableRow"
>
<td
class="euiTableRowCell"
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@ -355,7 +355,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
</div>
</td>
<td
class="euiTableRowCell"
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@ -377,7 +377,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
class="euiTableRow"
>
<td
class="euiTableRowCell"
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@ -391,7 +391,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
</div>
</td>
<td
class="euiTableRowCell"
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@ -413,7 +413,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
class="euiTableRow"
>
<td
class="euiTableRowCell"
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@ -427,7 +427,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
</div>
</td>
<td
class="euiTableRowCell"
class="euiTableRowCell euiTableRowCell--middle"
>
<div
class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"

View file

@ -17,7 +17,6 @@ exports[`TableVisBasic should init data grid 1`] = `
"header": "underline",
}
}
key="0"
minSizeForControls={1}
onColumnResize={[Function]}
renderCellValue={[Function]}
@ -56,7 +55,6 @@ exports[`TableVisBasic should init data grid with title provided - for split mod
"header": "underline",
}
}
key="0"
minSizeForControls={1}
onColumnResize={[Function]}
renderCellValue={[Function]}
@ -88,7 +86,6 @@ exports[`TableVisBasic should render the toolbar 1`] = `
"header": "underline",
}
}
key="0"
minSizeForControls={1}
onColumnResize={[Function]}
renderCellValue={[Function]}

View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import React, { memo, useCallback, useMemo, useEffect, useState, useRef } from 'react';
import React, { memo, useCallback, useMemo } from 'react';
import { EuiDataGrid, EuiDataGridProps, EuiDataGridSorting, EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { orderBy } from 'lodash';
@ -111,26 +111,6 @@ export const TableVisBasic = memo(
[columns, setColumnsWidth]
);
const firstRender = useRef(true);
const [dataGridUpdateCounter, setDataGridUpdateCounter] = useState(0);
// key was added as temporary solution to force re-render if we change autoFitRowToContent or we get new data
// cause we have problem with correct updating height cache in EUI datagrid when we use auto-height
// will be removed as soon as fix problem on EUI side
useEffect(() => {
// skip first render
if (firstRender.current) {
firstRender.current = false;
return;
}
// skip if auto height was turned off
if (!visConfig.autoFitRowToContent) {
return;
}
// update counter to remount grid from scratch
setDataGridUpdateCounter((counter) => counter + 1);
}, [visConfig.autoFitRowToContent, table, sort, pagination, columnsWidth]);
return (
<>
{title && (
@ -139,7 +119,6 @@ export const TableVisBasic = memo(
</EuiTitle>
)}
<EuiDataGrid
key={String(dataGridUpdateCounter)}
aria-label={dataGridAriaLabel}
columns={gridColumns}
gridStyle={{

View file

@ -353,7 +353,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -382,7 +382,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": "20%",
@ -401,7 +401,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": "20%",
@ -420,7 +420,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -527,7 +527,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -556,7 +556,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": "20%",
@ -575,7 +575,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": "20%",
@ -594,7 +594,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -701,7 +701,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -730,7 +730,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": "20%",
@ -749,7 +749,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": "20%",
@ -768,7 +768,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
</div>
</td>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,

View file

@ -65,7 +65,7 @@ export const WaffleTimeControls = withTheme(({ interval }: Props) => {
injectTimes={currentMoment ? [currentMoment] : []}
isLoading={isAutoReloading}
onChange={handleChangeDate}
popperPlacement="top-end"
popoverPlacement="top-end"
selected={currentMoment}
shouldCloseOnSelect
showTimeSelect

View file

@ -410,7 +410,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -467,7 +467,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -509,7 +509,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -580,7 +580,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -1490,7 +1490,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -1547,7 +1547,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -1589,7 +1589,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -1660,7 +1660,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -2570,7 +2570,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -2627,7 +2627,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -2669,7 +2669,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -2722,7 +2722,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -3679,7 +3679,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -3736,7 +3736,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -3778,7 +3778,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -3849,7 +3849,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -4816,7 +4816,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -4873,7 +4873,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -4915,7 +4915,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -4968,7 +4968,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -5925,7 +5925,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -5982,7 +5982,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -6024,7 +6024,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -6077,7 +6077,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -7034,7 +7034,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -7091,7 +7091,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -7133,7 +7133,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -7186,7 +7186,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -8143,7 +8143,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -8200,7 +8200,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -8242,7 +8242,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -8332,7 +8332,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -9289,7 +9289,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -9346,7 +9346,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -9388,7 +9388,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell"
className="euiTableRowCell euiTableRowCell--middle"
style={
Object {
"width": undefined,
@ -9478,7 +9478,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
textOnly={false}
>
<td
className="euiTableRowCell euiTableRowCell--hasActions"
className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
style={
Object {
"width": undefined,

View file

@ -2411,10 +2411,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@40.0.0":
version "40.0.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-40.0.0.tgz#9556a87fa5eb7d9061e85f71ea9d3e6a9022dc3e"
integrity sha512-Zsz8eczEjthMgU00YhnsNmkKA8j4hxQpWNnrgecMgpcFEIj+Nn5WBofL/TJux/latS/mB4WWmrq4FTiSIyv/+Q==
"@elastic/eui@40.1.0":
version "40.1.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-40.1.0.tgz#d5ad63e9ed4ae482037a637e9b3f2598712c9e94"
integrity sha512-xlmbu4ZjdKtpgkQZ6GNMWCyyjSJaNFPMj97pLs11UEag2L1W0IwISlGF9+K45Qp4KLatR6iphwiyLFGmqGOOTA==
dependencies:
"@types/chroma-js" "^2.0.0"
"@types/lodash" "^4.14.160"
@ -2444,6 +2444,7 @@
rehype-raw "^5.0.0"
rehype-react "^6.0.0"
rehype-stringify "^8.0.0"
remark-breaks "^2.0.2"
remark-emoji "^2.1.0"
remark-parse "^8.0.3"
remark-rehype "^8.0.0"
@ -24896,6 +24897,13 @@ release-zalgo@^1.0.0:
dependencies:
es6-error "^4.0.1"
remark-breaks@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/remark-breaks/-/remark-breaks-2.0.2.tgz#55fdec6c7da84f659aa7fdb1aa95b632870cee8d"
integrity sha512-LsQnPPQ7Fzp9RTjj4IwdEmjPOr9bxe9zYKWhs9ZQOg9hMg8rOfeeqQ410cvVdIK87Famqza1CKRxNkepp2EvUA==
dependencies:
unist-util-visit "^2.0.0"
remark-emoji@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.1.0.tgz#69165d1181b98a54ad5d9ef811003d53d7ebc7db"