Upgrade EUI to v94.1.0 (major EuiTable refactors)

examples/data_view_field_editor_example/public/app.tsx

@@ -7,6 +7,7 @@
  */
 
 import {
+  EuiProvider,
   DefaultItemAction,
   EuiButton,
   EuiCheckbox,
@@ -121,7 +122,6 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
         items={fields}
         columns={columns}
         pagination={true}
-        hasActions={true}
         sorting={{
           sort: {
             field: 'name',
@@ -135,10 +135,12 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
   );
 
   return (
-    <EuiPageTemplate offset={0}>
-      <EuiPageTemplate.Header pageTitle="Data view field editor demo" />
-      <EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>
-    </EuiPageTemplate>
+    <EuiProvider>
+      <EuiPageTemplate offset={0}>
+        <EuiPageTemplate.Header pageTitle="Data view field editor demo" />
+        <EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>
+      </EuiPageTemplate>
+    </EuiProvider>
   );
 };
 

examples/field_formats_example/public/app.tsx

@@ -14,6 +14,7 @@ import {
   EuiCodeBlock,
   EuiLink,
   EuiPageTemplate,
+  EuiProvider,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -61,7 +62,6 @@ const UsingAnExistingFieldFormatExample: React.FC<{ deps: Deps }> = (props) => {
       <EuiBasicTable
         data-test-subj={'example1 sample table'}
         items={sample}
-        textOnly={true}
         columns={[
           {
             field: 'raw',
@@ -100,7 +100,6 @@ const CreatingCustomFieldFormat: React.FC<{ deps: Deps }> = (props) => {
       <EuiSpacer size={'s'} />
       <EuiBasicTable
         items={sample}
-        textOnly={true}
         data-test-subj={'example2 sample table'}
         columns={[
           {
@@ -168,29 +167,31 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
 
 export const App: React.FC<{ deps: Deps }> = (props) => {
   return (
-    <EuiPageTemplate offset={0}>
-      <EuiPageTemplate.Header pageTitle="Field formats examples" />
-      <EuiPageTemplate.Section grow={false}>
-        <EuiTitle size="m">
-          <h2>Using an existing field format</h2>
-        </EuiTitle>
-        <EuiSpacer />
-        <UsingAnExistingFieldFormatExample deps={props.deps} />
-      </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section grow={false}>
-        <EuiTitle size="m">
-          <h2>Creating a custom field format</h2>
-        </EuiTitle>
-        <EuiSpacer />
-        <CreatingCustomFieldFormat deps={props.deps} />
-      </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section grow={false}>
-        <EuiTitle size="m">
-          <h2>Creating a custom field format editor</h2>
-        </EuiTitle>
-        <EuiSpacer />
-        <CreatingCustomFieldFormatEditor deps={props.deps} />
-      </EuiPageTemplate.Section>
-    </EuiPageTemplate>
+    <EuiProvider>
+      <EuiPageTemplate offset={0}>
+        <EuiPageTemplate.Header pageTitle="Field formats examples" />
+        <EuiPageTemplate.Section grow={false}>
+          <EuiTitle size="m">
+            <h2>Using an existing field format</h2>
+          </EuiTitle>
+          <EuiSpacer />
+          <UsingAnExistingFieldFormatExample deps={props.deps} />
+        </EuiPageTemplate.Section>
+        <EuiPageTemplate.Section grow={false}>
+          <EuiTitle size="m">
+            <h2>Creating a custom field format</h2>
+          </EuiTitle>
+          <EuiSpacer />
+          <CreatingCustomFieldFormat deps={props.deps} />
+        </EuiPageTemplate.Section>
+        <EuiPageTemplate.Section grow={false}>
+          <EuiTitle size="m">
+            <h2>Creating a custom field format editor</h2>
+          </EuiTitle>
+          <EuiSpacer />
+          <CreatingCustomFieldFormatEditor deps={props.deps} />
+        </EuiPageTemplate.Section>
+      </EuiPageTemplate>
+    </EuiProvider>
   );
 };

examples/files_example/public/components/app.tsx

@@ -12,6 +12,7 @@ import type { FileJSON } from '@kbn/files-plugin/common';
 import type { FilesClientResponses } from '@kbn/files-plugin/public';
 
 import {
+  EuiProvider,
   EuiPageTemplate,
   EuiInMemoryTable,
   EuiInMemoryTableProps,
@@ -131,7 +132,7 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
   ];
 
   return (
-    <>
+    <EuiProvider>
       <EuiPageTemplate restrictWidth>
         <EuiPageTemplate.Header pageTitle="Files example" />
         <EuiPageTemplate.Section>
@@ -185,6 +186,6 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
           }}
         />
       )}
-    </>
+    </EuiProvider>
   );
 };

examples/partial_results_example/public/app/app.tsx

@@ -9,6 +9,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { pluck } from 'rxjs';
 import {
+  EuiProvider,
   EuiBasicTable,
   EuiCallOut,
   EuiCodeBlock,
@@ -40,35 +41,36 @@ export function App() {
   }, [expressions]);
 
   return (
-    <EuiPageTemplate offset={0}>
-      <EuiPageTemplate.Header pageTitle="Partial Results Demo" />
-      <EuiPageTemplate.Section>
-        <EuiText data-test-subj="example-help">
-          <p>
-            This example listens for the window events and adds them to the table along with a
-            trigger counter.
-          </p>
-        </EuiText>
-        <EuiSpacer size={'m'} />
-        <EuiCodeBlock>{expression}</EuiCodeBlock>
-        <EuiSpacer size={'m'} />
-        {datatable ? (
-          <EuiBasicTable
-            textOnly={true}
-            data-test-subj={'example-table'}
-            columns={datatable.columns?.map(({ id: field, name }) => ({
-              field,
-              name,
-              'data-test-subj': `example-column-${field.toLowerCase()}`,
-            }))}
-            items={datatable.rows ?? []}
-          />
-        ) : (
-          <EuiCallOut color="success">
-            <p>Click or press any key.</p>
-          </EuiCallOut>
-        )}
-      </EuiPageTemplate.Section>
-    </EuiPageTemplate>
+    <EuiProvider>
+      <EuiPageTemplate offset={0}>
+        <EuiPageTemplate.Header pageTitle="Partial Results Demo" />
+        <EuiPageTemplate.Section>
+          <EuiText data-test-subj="example-help">
+            <p>
+              This example listens for the window events and adds them to the table along with a
+              trigger counter.
+            </p>
+          </EuiText>
+          <EuiSpacer size={'m'} />
+          <EuiCodeBlock>{expression}</EuiCodeBlock>
+          <EuiSpacer size={'m'} />
+          {datatable ? (
+            <EuiBasicTable
+              data-test-subj={'example-table'}
+              columns={datatable.columns?.map(({ id: field, name }) => ({
+                field,
+                name,
+                'data-test-subj': `example-column-${field.toLowerCase()}`,
+              }))}
+              items={datatable.rows ?? []}
+            />
+          ) : (
+            <EuiCallOut color="success">
+              <p>Click or press any key.</p>
+            </EuiCallOut>
+          )}
+        </EuiPageTemplate.Section>
+      </EuiPageTemplate>
+    </EuiProvider>
   );
 }

package.json

@@ -107,7 +107,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.13.0",
     "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "93.6.0",
+    "@elastic/eui": "94.1.0-backport.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/content-management/table_list_view_table/src/components/table.tsx

@@ -242,7 +242,6 @@ export function Table<T extends UserContentCommonSchema>({
       data-test-subj="itemsInMemTable"
       rowHeader="attributes.title"
       tableCaption={tableCaption}
-      isSelectable
     />
   );
 }

packages/core/apps/core-apps-browser-internal/src/status/components/status_table.tsx

@@ -104,7 +104,6 @@ export const StatusTable: FunctionComponent<StatusTableProps> = ({ statuses }) =
       columns={tableColumns}
       itemId={(item) => item.id}
       items={statuses}
-      isExpandable={true}
       itemIdToExpandedRowMap={itemIdToExpandedRowMap}
       rowProps={({ state }) => ({
         className: `status-table-row-${state.uiColor}`,

packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx

@@ -38,10 +38,12 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Select all rows',
       description: 'ARIA and displayed label on a checkbox to select all table rows',
     }),
-    'euiBasicTable.selectThisRow': i18n.translate('core.euiBasicTable.selectThisRow', {
-      defaultMessage: 'Select this row',
-      description: 'ARIA and displayed label on a checkbox to select a single table row',
-    }),
+    'euiBasicTable.selectThisRow': ({ index }: EuiValues) =>
+      i18n.translate('core.euiBasicTable.selectThisRow', {
+        defaultMessage: 'Select row {index}',
+        values: { index },
+        description: 'ARIA and displayed label on a checkbox to select a single table row',
+      }),
     'euiBasicTable.tableCaptionWithPagination': ({ tableCaption, page, pageCount }: EuiValues) =>
       i18n.translate('core.euiBasicTable.tableCaptionWithPagination', {
         defaultMessage: '{tableCaption}; Page {page} of {pageCount}.',

packages/kbn-search-connectors/components/sync_jobs/sync_jobs_table.tsx

@@ -140,7 +140,6 @@ export const SyncJobsTable: React.FC<SyncJobHistoryTableProps> = ({
         data-test-subj={`entSearchContent-index-${type}-syncJobs-table`}
         items={syncJobs}
         columns={columns}
-        hasActions
         onChange={onPaginate}
         pagination={pagination}
         tableLayout="fixed"

packages/kbn-test-jest-helpers/src/testbed/testbed.ts

@@ -263,11 +263,11 @@ export function registerTestBed<T extends string = string, P extends object = an
           .slice(1) // we remove the first row as it is the table header
           .map((row) => ({
             reactWrapper: row,
-            columns: row.find('.euiTableCellContent').map((col) => ({
+            columns: row.find('div.euiTableCellContent').map((col) => ({
               reactWrapper: col,
               // We can't access the td value with col.text() because
               // eui adds an extra div in td on mobile => (.euiTableRowCell__mobileHeader)
-              value: col.find('.euiTableCellContent').text(),
+              value: col.find('div.euiTableCellContent').text(),
             })),
           }));
 

packages/kbn-text-based-editor/src/query_history.test.tsx

@@ -153,7 +153,7 @@ describe('QueryHistory', () => {
         />
       );
       expect(screen.getByRole('table')).toHaveTextContent(
-        'Time ranRecent queriesLast durationTime ranMar. 25, 24 08:45:27Recent queriesfrom kibana_sample_data_flights | limit 10Last duration2ms'
+        'Time ranRecent queriesLast durationMar. 25, 24 08:45:27from kibana_sample_data_flights | limit 102ms'
       );
     });
   });

packages/kbn-text-based-editor/src/query_history.tsx

@@ -319,7 +319,7 @@ export function QueryHistory({
             defaultMessage: 'Queries history table',
           }
         )}
-        responsive={false}
+        responsiveBreakpoint={false}
         items={historyItems}
         columns={columns}
         sorting={sorting}

packages/kbn-unified-field-list/src/components/field_stats/field_number_summary.tsx

@@ -88,7 +88,7 @@ export const FieldNumberSummary: React.FC<FieldNumberSummaryProps> = ({
       columns={summaryTableColumns}
       tableCaption={summaryTableTitle}
       data-test-subj={`${dataTestSubject}-numberSummary`}
-      responsive={false}
+      responsiveBreakpoint={false}
       css={css`
         & .euiTableHeaderCell {
           ${euiScreenReaderOnly()}

src/dev/license_checker/config.ts

@@ -86,7 +86,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@93.6.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@94.1.0-backport.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/plugins/data/public/search/session/sessions_mgmt/components/table/table.test.tsx

@@ -100,8 +100,7 @@ describe('Background Search Session Management Table', () => {
         );
       });
 
-      expect(table.find('thead th .euiTableCellContent__text').map((node) => node.text()))
-        .toMatchInlineSnapshot(`
+      expect(table.find('thead th').map((node) => node.text())).toMatchInlineSnapshot(`
         Array [
           "App",
           "Name",
@@ -136,12 +135,12 @@ describe('Background Search Session Management Table', () => {
 
       expect(table.find('tbody td').map((node) => node.text())).toMatchInlineSnapshot(`
         Array [
-          "App",
-          "Namevery background search Info",
-          "# Searches0",
-          "StatusExpired",
-          "Created2 Dec, 2020, 00:19:32",
-          "Expiration--",
+          "",
+          "very background search Info",
+          "0",
+          "Expired",
+          "2 Dec, 2020, 00:19:32",
+          "--",
           "",
           "",
         ]