[Data Explorer][Discover 2.0] Change to inspect icon and update hint …

…msg (opensearch-project#4827)

Issue Resolve
opensearch-project#4826

Signed-off-by: ananzh <[email protected]>

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<OpenSearchSearchHit | undefined>();
+  const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   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 (
     <DiscoverGridContextProvider
       value={{
-        expandedHit,
+        inspectedHit,
         onFilter,
-        setExpandedHit,
+        setInspectedHit,
         rows: rows || [],
         indexPattern,
       }}
@@ -148,15 +148,15 @@ export const DataGridTable = ({
             {table}
           </EuiPanel>
         </EuiPanel>
-        {expandedHit && (
+        {inspectedHit && (
           <DataGridFlyout
             indexPattern={indexPattern}
-            hit={expandedHit}
+            hit={inspectedHit}
             columns={columns}
             onRemoveColumn={onRemoveColumn}
             onAddColumn={onAddColumn}
             onFilter={onFilter}
-            onClose={() => setExpandedHit(undefined)}
+            onClose={() => setInspectedHit(undefined)}
           />
         )}
       </>

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;
 }

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 (
+    <EuiToolTip content={inspectHintMsg}>
+      <EuiButtonIcon
+        onClick={() => setInspectedHit(isCurrentInspected ? undefined : currentInspected)}
+        iconType={isCurrentInspected ? 'minimize' : 'inspect'}
+        aria-label={inspectHintMsg}
+      />
+    </EuiToolTip>
+  );
+};