diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx index 3f99c009e56a..d16d7e3fc75e 100644 --- a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx +++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx @@ -8,7 +8,7 @@ import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui'; import { IndexPattern } from '../../../opensearch_dashboards_services'; import { fetchTableDataCell } from './data_grid_table_cell_value'; import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns'; -import { DocViewExpandButton } from './data_grid_table_docview_expand_button'; +import { DocViewInspectButton } from './data_grid_table_docview_inspect_button'; import { DataGridFlyout } from './data_grid_table_flyout'; import { DiscoverGridContextProvider } from './data_grid_table_context'; import { toolbarVisibility } from './constants'; @@ -45,7 +45,7 @@ export const DataGridTable = ({ displayTimeColumn, isToolbarVisible = true, }: DataGridTableProps) => { - const [expandedHit, setExpandedHit] = useState(); + const [inspectedHit, setInspectedHit] = useState(); const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]); const pagination = usePagination(rowCount); @@ -94,9 +94,9 @@ export const DataGridTable = ({ const leadingControlColumns = useMemo(() => { return [ { - id: 'expandCollapseColumn', + id: 'inspectCollapseColumn', headerCellRender: () => null, - rowCellRender: DocViewExpandButton, + rowCellRender: DocViewInspectButton, width: 40, }, ]; @@ -134,9 +134,9 @@ export const DataGridTable = ({ return ( - {expandedHit && ( + {inspectedHit && ( setExpandedHit(undefined)} + onClose={() => setInspectedHit(undefined)} /> )} diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_context.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_context.tsx index c3568d44082a..886b6fa60f8d 100644 --- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_context.tsx +++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_context.tsx @@ -8,9 +8,9 @@ import { IndexPattern } from '../../../opensearch_dashboards_services'; import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types'; export interface DataGridContextProps { - expandedHit?: OpenSearchSearchHit; + inspectedHit?: OpenSearchSearchHit; onFilter: DocViewFilterFn; - setExpandedHit: (hit?: OpenSearchSearchHit) => void; + setInspectedHit: (hit?: OpenSearchSearchHit) => void; rows: OpenSearchSearchHit[]; indexPattern: IndexPattern; } diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_expand_button.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_expand_button.tsx deleted file mode 100644 index beb8e7de278a..000000000000 --- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_expand_button.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { EuiToolTip, EuiButtonIcon, EuiDataGridCellValueElementProps } from '@elastic/eui'; -import { useDataGridContext } from './data_grid_table_context'; - -export const DocViewExpandButton = ({ - rowIndex, - setCellProps, -}: EuiDataGridCellValueElementProps) => { - const { expandedHit, setExpandedHit, rows } = useDataGridContext(); - const currentExpanded = rows[rowIndex]; - const isCurrentExpanded = currentExpanded === expandedHit; - - return ( - - setExpandedHit(isCurrentExpanded ? undefined : currentExpanded)} - iconType={isCurrentExpanded ? 'minimize' : 'expand'} - aria-label={`Expand row ${rowIndex}`} - /> - - ); -}; diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_inspect_button.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_inspect_button.tsx new file mode 100644 index 000000000000..df5e691240e3 --- /dev/null +++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_inspect_button.tsx @@ -0,0 +1,28 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { i18n } from '@osd/i18n'; +import { EuiToolTip, EuiButtonIcon, EuiDataGridCellValueElementProps } from '@elastic/eui'; +import { useDataGridContext } from './data_grid_table_context'; + +export const DocViewInspectButton = ({ rowIndex }: EuiDataGridCellValueElementProps) => { + const { inspectedHit, setInspectedHit, rows } = useDataGridContext(); + const currentInspected = rows[rowIndex]; + const isCurrentInspected = currentInspected === inspectedHit; + const inspectHintMsg = i18n.translate('discover.docViews.table.inspectAriaLabel', { + defaultMessage: 'Inspect document details', + }); + + return ( + + setInspectedHit(isCurrentInspected ? undefined : currentInspected)} + iconType={isCurrentInspected ? 'minimize' : 'inspect'} + aria-label={inspectHintMsg} + /> + + ); +};