fix comments

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

src/plugins/discover/public/__mock__/index_pattern_mock.ts

@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { indexPatterns } from '../../../data/public';
+import { IndexPattern } from '../opensearch_dashboards_services';
+import { IIndexPatternFieldList } from '../../../data/common';
+
+// Initial data of index pattern fields
+const fieldsData = [
+  {
+    name: '_id',
+    type: 'string',
+    scripted: false,
+    aggregatable: true,
+    filterable: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: '_index',
+    type: 'string',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: '_source',
+    type: '_source',
+    scripted: false,
+    aggregatable: false,
+    filterable: false,
+    searchable: false,
+    sortable: false,
+  },
+];
+
+// Create a mock object for index pattern fields with methods: getAll, getByName and getByType
+export const indexPatternFieldMock = {
+  getAll: () => fieldsData,
+  getByName: (name) => fieldsData.find((field) => field.name === name),
+  getByType: (type) => fieldsData.filter((field) => field.type === type),
+} as IIndexPatternFieldList;
+
+// Create a mock for the initial index pattern
+export const indexPatternInitialMock = ({
+  id: '123',
+  title: 'test_index',
+  fields: indexPatternFieldMock,
+  timeFieldName: 'order_date',
+  formatHit: jest.fn((hit) => (hit.fields ? hit.fields : hit._source)),
+  flattenHit: undefined,
+  formatField: undefined,
+  metaFields: ['_id', '_index', '_source'],
+  getFieldByName: jest.fn(() => ({})),
+} as unknown) as IndexPattern;
+
+// Add a flattenHit method to the initial index pattern mock using flattenHitWrapper
+const flatternHitMock = indexPatterns.flattenHitWrapper(
+  indexPatternInitialMock,
+  indexPatternInitialMock.metaFields
+);
+indexPatternInitialMock.flattenHit = flatternHitMock;
+
+// Add a formatField method to the initial index pattern mock
+const formatFieldMock = (hit, field) => {
+  return field === '_source' ? hit._source : indexPatternInitialMock.flattenHit(hit)[field];
+};
+indexPatternInitialMock.formatField = formatFieldMock;
+
+// Export the fully set up index pattern mock
+export const indexPatternMock = indexPatternInitialMock;
+
+// Export a function that allows customization of index pattern mocks, by adding extra fields to the fieldsData
+export const getMockedIndexPatternWithCustomizedFields = (fields) => {
+  const customizedFieldsData = [...fieldsData, ...fields];
+  const customizedFieldsMock = {
+    getAll: () => customizedFieldsData,
+    getByName: (name) => customizedFieldsData.find((field) => field.name === name),
+    getByType: (type) => customizedFieldsData.filter((field) => field.type === type),
+  } as IIndexPatternFieldList;
+
+  return {
+    ...indexPatternMock,
+    fields: customizedFieldsMock,
+  };
+};
+
+// Export a function that allows customization of index pattern mocks with both extra fields and time field
+export const getMockedIndexPatternWithTimeField = (fields, timeFiledName: string) => {
+  const indexPatternWithTimeFieldMock = getMockedIndexPatternWithCustomizedFields(fields);
+
+  return {
+    ...indexPatternWithTimeFieldMock,
+    timeFieldName: timeFiledName,
+  };
+};

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './data_grid_table.scss';
 import React, { useState, useMemo, useCallback } from 'react';
 import { EuiDataGrid } from '@elastic/eui';
 import { IndexPattern } from '../../../opensearch_dashboards_services';

src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx

@@ -0,0 +1,187 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import {
+  indexPatternMock,
+  getMockedIndexPatternWithCustomizedFields,
+} from '../../../__mock__/index_pattern_mock';
+import { fetchTableDataCell } from './data_grid_table_cell_value';
+
+const fieldsData = [
+  {
+    name: 'name',
+    scripted: false,
+    filterable: true,
+    aggregatable: false,
+    searchable: true,
+    sortable: false,
+  },
+  {
+    name: 'currency',
+    type: 'string',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: 'order_date',
+    type: 'date',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+];
+
+const dataRowsMock = [
+  {
+    _id: '1',
+    _index: 'test_index',
+    _score: 0,
+    _source: {
+      name: 'Eddie',
+      currency: 'EUR',
+      order_date: '2023-08-07T09:28:48+00:00',
+    },
+    fields: {
+      order_date: ['2023-08-07T09:28:48.000Z'],
+    },
+    _version: 1,
+    _type: '_doc',
+  },
+];
+
+const customizedIndexPatternMock = getMockedIndexPatternWithCustomizedFields(
+  fieldsData
+) as IndexPattern;
+
+describe('Testing fetchTableDataCell function', () => {
+  it('should display empty span if no data', () => {
+    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={100}
+        columnId="order_date"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+            <span>
+              -
+            </span>
+          `);
+  });
+
+  it('should display empty span if field is not defined in index pattern', () => {
+    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="first_name"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+        <span>
+          -
+        </span>
+      `);
+  });
+
+  it('should display JSON string representation of the data if columnId is _source and isDetails is false', () => {
+    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="_source"
+        isDetails={true}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+      <span>
+        {
+        "name": "Eddie",
+        "currency": "EUR",
+        "order_date": "2023-08-07T09:28:48+00:00"
+      }
+      </span>
+    `);
+  });
+
+  it('should display EuiDescriptionList if columnId is _source and isDetails is false', () => {
+    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="_source"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+      <EuiDescriptionList
+        compressed={true}
+        type="inline"
+      >
+        <EuiDescriptionListTitle>
+          order_date
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "2023-08-07T09:28:48.000Z",
+            }
+          }
+        />
+      </EuiDescriptionList>
+    `);
+  });
+
+  it('should correctly display data if columnId is in index pattern and is not _source', () => {
+    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="currency"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "EUR",
+          }
+        }
+      />
+    `);
+  });
+});