From bef76fee6074c7bd9ba45e2f0afe6716af38768d Mon Sep 17 00:00:00 2001
From: Anan Zhuang <ananzh@amazon.com>
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 <ananzh@amazon.com>
---
 .../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 98943784237f..d304034d3760 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<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)}
           />
         )}
       </>
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 (
-    <EuiToolTip content={`Expand row ${rowIndex}`}>
-      <EuiButtonIcon
-        onClick={() => setExpandedHit(isCurrentExpanded ? undefined : currentExpanded)}
-        iconType={isCurrentExpanded ? 'minimize' : 'expand'}
-        aria-label={`Expand row ${rowIndex}`}
-      />
-    </EuiToolTip>
-  );
-};
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 (
+    <EuiToolTip content={inspectHintMsg}>
+      <EuiButtonIcon
+        onClick={() => setInspectedHit(isCurrentInspected ? undefined : currentInspected)}
+        iconType={isCurrentInspected ? 'minimize' : 'inspect'}
+        aria-label={inspectHintMsg}
+      />
+    </EuiToolTip>
+  );
+};