Allow switch between legacy table of a placeholder and data grid

src/plugins/discover/common/index.ts

@@ -15,3 +15,4 @@ export const CONTEXT_DEFAULT_SIZE_SETTING = 'context:defaultSize';
 export const CONTEXT_STEP_SETTING = 'context:step';
 export const CONTEXT_TIE_BREAKER_FIELDS_SETTING = 'context:tieBreakerFields';
 export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';
+export const TABLE_LEGACY = 'table:legacy';

src/plugins/discover/public/application/components/doc_views/context_app.tsx

@@ -7,7 +7,11 @@ import React, { useMemo, Fragment } from 'react';
 import { useCallback } from 'react';
 import { SurrDocType } from './context/api/context';
 import { ActionBar } from './context/components/action_bar/action_bar';
-import { CONTEXT_STEP_SETTING, DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
+import {
+  CONTEXT_STEP_SETTING,
+  DOC_HIDE_TIME_COLUMN_SETTING,
+  TABLE_LEGACY,
+} from '../../../../common';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { LOADING_STATUS } from './context/utils/context_query_state';
@@ -16,6 +20,7 @@ import { DataGridTable } from '../data_grid/data_grid_table';
 import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { AppState } from './context/utils/context_state';
+import { LegacyHtmlTable } from '../legacy_table/table';
 
 export interface Props {
   onAddFilter: DocViewFilterFn;
@@ -93,24 +98,28 @@ export function ContextApp({
         onChangeCount={onChangeCount}
         type={SurrDocType.PREDECESSORS}
       />
-      <div className="dscDocsGrid">
-        <DataGridTable
-          aria-label={'ContextTable'}
-          columns={columns}
-          indexPattern={indexPattern}
-          onAddColumn={() => {}}
-          onFilter={onAddFilter}
-          onRemoveColumn={() => {}}
-          onSetColumns={() => {}}
-          onSort={() => {}}
-          sort={sort}
-          rows={rows}
-          displayTimeColumn={displayTimeColumn}
-          services={services}
-          isToolbarVisible={false}
-          isContextView={true}
-        />
-      </div>
+      {services.uiSettings?.get(TABLE_LEGACY) ? (
+        <LegacyHtmlTable />
+      ) : (
+        <div className="dscDocsGrid">
+          <DataGridTable
+            aria-label={'ContextTable'}
+            columns={columns}
+            indexPattern={indexPattern}
+            onAddColumn={() => {}}
+            onFilter={onAddFilter}
+            onRemoveColumn={() => {}}
+            onSetColumns={() => {}}
+            onSort={() => {}}
+            sort={sort}
+            rows={rows}
+            displayTimeColumn={displayTimeColumn}
+            services={services}
+            isToolbarVisible={false}
+            isContextView={true}
+          />
+        </div>
+      )}
       <ActionBar
         defaultStepSize={defaultStepSize}
         docCount={successorCount}

src/plugins/discover/public/application/components/legacy_table/table.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export const LegacyHtmlTable = () => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+          <th>Column 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};

src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx

@@ -17,7 +17,11 @@ import {
   showSaveModal,
 } from '../../../../../saved_objects/public';
 import { DiscoverState, setSavedSearchId } from '../../utils/state_management';
-import { DOC_HIDE_TIME_COLUMN_SETTING, SORT_DEFAULT_ORDER_SETTING } from '../../../../common';
+import {
+  DOC_HIDE_TIME_COLUMN_SETTING,
+  SORT_DEFAULT_ORDER_SETTING,
+  TABLE_LEGACY,
+} from '../../../../common';
 import { getSortForSearchSource } from '../../view_components/utils/get_sort_for_search_source';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
 import { syncQueryStateWithUrl } from '../../../../../data/public';
@@ -38,6 +42,7 @@ export const getTopNavLinks = (
     store,
     data: { query },
     osdUrlStateStorage,
+    uiSettings,
   } = services;
 
   const newSearch = {
@@ -218,7 +223,26 @@ export const getTopNavLinks = (
     },
   };
 
+  const newTable: TopNavMenuData = {
+    id: 'table-new',
+    label: i18n.translate('discover.localMenu.newTableTitle', {
+      defaultMessage: 'New Table',
+    }),
+    description: i18n.translate('discover.localMenu.newTableDescription', {
+      defaultMessage: 'New Data Grid Table Experience',
+    }),
+    testId: 'tableNewButton',
+    run: async () => {
+      const useLegacyTable = uiSettings.get(TABLE_LEGACY);
+      await uiSettings.set(TABLE_LEGACY, !useLegacyTable);
+      window.location.reload();
+    },
+    type: 'toggle' as const,
+    emphasize: uiSettings.get(TABLE_LEGACY) ? false : true,
+  };
+
   return [
+    newTable,
     newSearch,
     ...(capabilities.discover?.save ? [saveSearch] : []),
     openSearch,

src/plugins/discover/public/application/view_components/canvas/discover_table.tsx

@@ -22,6 +22,8 @@ import { SortOrder } from '../../../saved_searches/types';
 import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
 import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { popularizeField } from '../../helpers/popularize_field';
+import { TABLE_LEGACY } from '../../../../common';
+import { LegacyHtmlTable } from '../../components/legacy_table/table';
 
 interface Props {
   rows?: OpenSearchSearchHit[];
@@ -90,7 +92,9 @@ export const DiscoverTable = ({ rows }: Props) => {
     return <div>{'loading...'}</div>;
   }
 
-  return (
+  return services.uiSettings?.get(TABLE_LEGACY) ? (
+    <LegacyHtmlTable />
+  ) : (
     <DataGridTable
       columns={columns}
       indexPattern={indexPattern}

src/plugins/discover/public/embeddable/search_embeddable_component.tsx

@@ -12,6 +12,9 @@ import {
   DataGridTableProps,
 } from '../application/components/data_grid/data_grid_table';
 import { VisualizationNoResults } from '../../../visualizations/public';
+import { TABLE_LEGACY } from '../../common';
+import { getServices } from '../opensearch_dashboards_services';
+import { LegacyHtmlTable } from '../application/components/legacy_table/table';
 import './search_embeddable.scss';
 
 interface SearchEmbeddableProps {
@@ -26,6 +29,7 @@ export const DataGridTableMemoized = React.memo((props: DataGridTableProps) => (
 ));
 
 export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps) {
+  const services = getServices();
   const discoverEmbeddableProps = {
     columns: searchProps.columns,
     indexPattern: searchProps.indexPattern,
@@ -51,15 +55,21 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
         responsive={false}
         data-test-subj="embeddedSavedSearchDocTable"
       >
+        (
         {discoverEmbeddableProps.totalHitCount !== 0 ? (
-          <EuiFlexItem style={{ minHeight: 0 }} className="osdDocTable__container">
-            <DataGridTableMemoized {...discoverEmbeddableProps} />
-          </EuiFlexItem>
+          services.uiSettings?.get(TABLE_LEGACY) ? (
+            <LegacyHtmlTable />
+          ) : (
+            <EuiFlexItem style={{ minHeight: 0 }} className="osdDocTable__container">
+              <DataGridTableMemoized {...discoverEmbeddableProps} />
+            </EuiFlexItem>
+          )
         ) : (
           <EuiFlexItem>
             <VisualizationNoResults />
           </EuiFlexItem>
         )}
+        )
       </EuiFlexGroup>
     </I18nProvider>
   );

src/plugins/discover/server/ui_settings.ts

@@ -44,6 +44,7 @@ import {
   CONTEXT_STEP_SETTING,
   CONTEXT_TIE_BREAKER_FIELDS_SETTING,
   MODIFY_COLUMNS_ON_SWITCH,
+  TABLE_LEGACY,
 } from '../common';
 
 export const uiSettings: Record<string, UiSettingsParams> = {
@@ -186,4 +187,17 @@ export const uiSettings: Record<string, UiSettingsParams> = {
     category: ['discover'],
     schema: schema.boolean(),
   },
+  [TABLE_LEGACY]: {
+    name: i18n.translate('discover.advancedSettings.useLegacyTable', {
+      defaultMessage: 'Use legacy table',
+    }),
+    value: true,
+    description: i18n.translate('discover.advancedSettings.useLegacyTableDescription', {
+      defaultMessage:
+        'Discover adopts a data grid table layout that includes better sorting and resizable columns. ' +
+        'Disable this option if would like to try out the new table view.',
+    }),
+    category: ['discover'],
+    schema: schema.boolean(),
+  },
 };