From bef76fee6074c7bd9ba45e2f0afe6716af38768d Mon Sep 17 00:00:00 2001 From: Anan Zhuang Date: Fri, 25 Aug 2023 17:08:51 -0700 Subject: [PATCH] [Data Explorer][Discover 2.0] Change to inspect icon and update hint msg (#4827) Issue Resolve https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4826 Signed-off-by: ananzh --- .../components/data_grid/data_grid_table.tsx | 18 ++++++------ .../data_grid/data_grid_table_context.tsx | 4 +-- .../data_grid_table_docview_expand_button.tsx | 27 ------------------ ...data_grid_table_docview_inspect_button.tsx | 28 +++++++++++++++++++ 4 files changed, 39 insertions(+), 38 deletions(-) delete mode 100644 src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_expand_button.tsx create mode 100644 src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_inspect_button.tsx 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 98943784237..d304034d376 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'; @@ -46,7 +46,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); @@ -95,9 +95,9 @@ export const DataGridTable = ({ const leadingControlColumns = useMemo(() => { return [ { - id: 'expandCollapseColumn', + id: 'inspectCollapseColumn', headerCellRender: () => null, - rowCellRender: DocViewExpandButton, + rowCellRender: DocViewInspectButton, width: 40, }, ]; @@ -135,9 +135,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 c3568d44082..886b6fa60f8 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 beb8e7de278..00000000000 --- 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 00000000000..df5e691240e --- /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} + /> + + ); +};