[Discover] Fix grid theme (#158231)

Addresses https://github.com/elastic/kibana/issues/158201

## Summary

This PR fixes grid row selection in dark mode.

Before:
<img width="300" alt="Screenshot 2023-05-23 at 09 53 11"
src="e447ebb5-ca75-4778-84a7-ec654aca3709">

After:
<img width="300" alt="Screenshot 2023-05-23 at 09 52 44"
src="86f7ccd0-a306-426b-9fcb-91d9131a7da6">

For testing:
Enable dark mode on User Profile page.
This commit is contained in:
Julia Rechkunova 2023-05-30 07:31:25 +02:00 committed by GitHub
parent 3ce1e44b2b
commit e928b519f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -9,6 +9,8 @@
import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
import classnames from 'classnames';
import { FormattedMessage } from '@kbn/i18n-react';
import { of } from 'rxjs';
import useObservable from 'react-use/lib/useObservable';
import './discover_grid.scss';
import {
EuiDataGridSorting,
@ -25,7 +27,7 @@ import type { DataView } from '@kbn/data-views-plugin/public';
import type { SortOrder } from '@kbn/saved-search-plugin/public';
import { Filter } from '@kbn/es-query';
import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
import { ToastsStart, IUiSettingsClient, HttpStart } from '@kbn/core/public';
import type { ToastsStart, IUiSettingsClient, HttpStart, CoreStart } from '@kbn/core/public';
import { DataViewFieldEditorStart } from '@kbn/data-view-field-editor-plugin/public';
import { DocViewFilterFn } from '../../services/doc_views/doc_views_types';
import { getSchemaDetectors } from './discover_grid_schema';
@ -52,6 +54,8 @@ import { useRowHeightsOptions } from '../../hooks/use_row_heights_options';
import { convertValueToString } from '../../utils/convert_value_to_string';
import { getRowsPerPageOptions, getDefaultRowsPerPage } from '../../utils/rows_per_page';
const themeDefault = { darkMode: false };
interface SortObj {
id: string;
direction: string;
@ -199,6 +203,7 @@ export interface DiscoverGridProps {
* Service dependencies
*/
services: {
core: CoreStart;
fieldFormats: FieldFormatsStart;
addBasePath: HttpStart['basePath']['prepend'];
uiSettings: IUiSettingsClient;
@ -249,6 +254,7 @@ export const DiscoverGrid = ({
services,
}: DiscoverGridProps) => {
const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings } = services;
const { darkMode } = useObservable(services.core.theme?.theme$ ?? of(themeDefault), themeDefault);
const dataGridRef = useRef<EuiDataGridRefProps>(null);
const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
const [isFilterActive, setIsFilterActive] = useState(false);
@ -571,7 +577,7 @@ export const DiscoverGrid = ({
rows: displayedRows,
onFilter,
dataView,
isDarkMode: services.uiSettings.get('theme:darkMode'),
isDarkMode: darkMode,
selectedDocs: usedSelectedDocs,
setSelectedDocs: (newSelectedDocs) => {
setSelectedDocs(newSelectedDocs);