change to use local storage

Signed-off-by: Anan Z <[email protected]>

src/plugins/discover/common/index.ts

@@ -15,4 +15,3 @@ 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 DATA_GRID_TABLE = 'table:datagrid';

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

@@ -3,15 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, Fragment } from 'react';
+import React, { useMemo, Fragment, useEffect, useState } 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,
-  DATA_GRID_TABLE,
-} from '../../../../common';
+import { CONTEXT_STEP_SETTING, DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { LOADING_STATUS } from './context/utils/context_query_state';
@@ -21,6 +17,7 @@ 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';
+import { getDataGridTableSetting } from '../utils/local_storage';
 
 export interface Props {
   onAddFilter: DocViewFilterFn;
@@ -44,7 +41,7 @@ export function ContextApp({
   appState,
 }: Props) {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
-  const { uiSettings } = services;
+  const { uiSettings, storage } = services;
   const defaultStepSize = useMemo(() => parseInt(uiSettings.get(CONTEXT_STEP_SETTING), 10), [
     uiSettings,
   ]);
@@ -66,6 +63,15 @@ export function ContextApp({
     successorsStatus.value === LOADING_STATUS.LOADING ||
     successorsStatus.value === LOADING_STATUS.UNINITIALIZED;
 
+  // State for data grid table setting
+  const [useDataGridTable, setUseDataGridTable] = useState(() => getDataGridTableSetting(storage));
+
+  useEffect(() => {
+    const handler = () => setUseDataGridTable(getDataGridTableSetting(storage));
+    window.addEventListener('storage', handler);
+    return () => window.removeEventListener('storage', handler);
+  }, [storage]);
+
   const onChangeCount = useCallback(
     (type: SurrDocType, count: number) => {
       const countType = type === SurrDocType.SUCCESSORS ? 'successorCount' : 'predecessorCount';
@@ -98,7 +104,7 @@ export function ContextApp({
         onChangeCount={onChangeCount}
         type={SurrDocType.PREDECESSORS}
       />
-      {services.uiSettings?.get(DATA_GRID_TABLE) ? (
+      {useDataGridTable ? (
         <div className="dscDocsGrid">
           <DataGridTable
             aria-label={'ContextTable'}

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

@@ -18,14 +18,11 @@ import {
   showSaveModal,
 } from '../../../../../saved_objects/public';
 import { DiscoverState, setSavedSearchId } from '../../utils/state_management';
-import {
-  DOC_HIDE_TIME_COLUMN_SETTING,
-  SORT_DEFAULT_ORDER_SETTING,
-  DATA_GRID_TABLE,
-} from '../../../../common';
+import { DOC_HIDE_TIME_COLUMN_SETTING, SORT_DEFAULT_ORDER_SETTING } from '../../../../common';
 import { getSortForSearchSource } from '../../view_components/utils/get_sort_for_search_source';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
 import { syncQueryStateWithUrl } from '../../../../../data/public';
+import { getDataGridTableSetting, setDataGridTableSetting } from '../utils/local_storage';
 
 export const getTopNavLinks = (
   services: DiscoverViewServices,
@@ -43,7 +40,7 @@ export const getTopNavLinks = (
     store,
     data: { query },
     osdUrlStateStorage,
-    uiSettings,
+    storage,
   } = services;
 
   const newSearch = {
@@ -227,29 +224,28 @@ export const getTopNavLinks = (
   const newTable: TopNavMenuData = {
     id: 'table-datagrid',
     label: i18n.translate('discover.localMenu.newTableTitle', {
-      defaultMessage: 'Try new Discover features',
+      defaultMessage: 'Try new Discover experience',
     }),
     description: i18n.translate('discover.localMenu.newTableDescription', {
       defaultMessage: 'New Data Grid Table Experience',
     }),
     testId: 'datagridTableButton',
     run: async () => {
-      // fetch current state of DATA_GRID_TABLE settings
-      // if data grid table is used, when switch to legacy table, show feedbacks panel
-      // if legacy table is used, when switch to data grid table, simply set table and reload
-      const useDatagridTable = uiSettings.get(DATA_GRID_TABLE);
+      // Read the current state from localStorage
+      const useDatagridTable = getDataGridTableSetting(storage);
       if (useDatagridTable) {
         showTableFeedbacksPanel({
           I18nContext: core.i18n.Context,
           services,
         });
       } else {
-        await uiSettings.set(DATA_GRID_TABLE, true);
+        // Save the new setting to localStorage
+        setDataGridTableSetting(true, storage);
         window.location.reload();
       }
     },
     type: 'toggle' as const,
-    emphasize: uiSettings.get(DATA_GRID_TABLE) ? true : false,
+    emphasize: getDataGridTableSetting(storage),
   };
 
   return [

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

@@ -9,7 +9,7 @@ import { TableFeedbacksPanel } from './table_feedbacks_panel';
 import { I18nStart } from '../../../../../../core/public';
 import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public';
 import { DiscoverViewServices } from '../../../build_services';
-import { DATA_GRID_TABLE } from '../../../../common';
+import { setDataGridTableSetting } from '../utils/local_storage';
 
 let isFeedbackPanelOpen = false;
 
@@ -20,11 +20,11 @@ export function showTableFeedbacksPanel({
   I18nContext: I18nStart['Context'];
   services: DiscoverViewServices;
 }) {
-  // if (isFeedbackPanelOpen) {
-  //   return;
-  // }
+  if (isFeedbackPanelOpen) {
+    return;
+  }
 
-  // isFeedbackPanelOpen = true;
+  isFeedbackPanelOpen = true;
   const container = document.createElement('div');
   const onClose = () => {
     ReactDOM.unmountComponentAtNode(container);
@@ -33,7 +33,8 @@ export function showTableFeedbacksPanel({
   };
 
   const onTurnOff = async () => {
-    await services.uiSettings.set(DATA_GRID_TABLE, false);
+    // Save the new setting to localStorage
+    setDataGridTableSetting(false, services.storage);
     onClose();
     window.location.reload();
   };

src/plugins/discover/public/application/components/utils/local_storage.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Storage } from '../../../../../opensearch_dashboards_utils/public';
+
+export const DATA_GRID_TABLE_KEY = 'discover:dataGridTable';
+
+export const getDataGridTableSetting = (storage: Storage): boolean => {
+  const storedValue = storage.get(DATA_GRID_TABLE_KEY);
+  return storedValue !== null ? JSON.parse(storedValue) : false;
+};
+
+export const setDataGridTableSetting = (value: boolean, storage: Storage) => {
+  storage.set(DATA_GRID_TABLE_KEY, JSON.stringify(value));
+};

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DataGridTable } from '../../components/data_grid/data_grid_table';
@@ -22,7 +22,7 @@ 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 { DATA_GRID_TABLE } from '../../../../common';
+import { getDataGridTableSetting } from '../../components/utils/local_storage';
 import { LegacyHtmlTable } from '../../components/legacy_table/table';
 
 interface Props {
@@ -38,6 +38,7 @@ export const DiscoverTable = ({ rows }: Props) => {
     },
     capabilities,
     indexPatterns,
+    storage,
   } = services;
 
   const { refetch$, indexPattern, savedSearch } = useDiscoverContext();
@@ -92,7 +93,7 @@ export const DiscoverTable = ({ rows }: Props) => {
     return <div>{'loading...'}</div>;
   }
 
-  return services.uiSettings?.get(DATA_GRID_TABLE) ? (
+  return getDataGridTableSetting(storage) ? (
     <DataGridTable
       columns={columns}
       indexPattern={indexPattern}

src/plugins/discover/public/build_services.ts

@@ -58,6 +58,7 @@ import { OpenSearchDashboardsLegacyStart } from '../../opensearch_dashboards_leg
 import { UrlForwardingStart } from '../../url_forwarding/public';
 import { NavigationPublicPluginStart } from '../../navigation/public';
 import { DataExplorerServices } from '../../data_explorer/public';
+import { Storage } from '../../opensearch_dashboards_utils/public';
 
 export interface DiscoverServices {
   addBasePath: (path: string) => string;
@@ -82,6 +83,7 @@ export interface DiscoverServices {
   getSavedSearchUrlById: (id: string) => Promise<string>;
   uiSettings: IUiSettingsClient;
   visualizations: VisualizationsStart;
+  storage: Storage;
 }
 
 export function buildServices(
@@ -97,6 +99,7 @@ export function buildServices(
     overlays: core.overlays,
   };
   const savedObjectService = createSavedSearchesLoader(services);
+  const storage = new Storage(localStorage);
 
   return {
     addBasePath: core.http.basePath.prepend,
@@ -123,6 +126,7 @@ export function buildServices(
     toastNotifications: core.notifications.toasts,
     uiSettings: core.uiSettings,
     visualizations: plugins.visualizations,
+    storage,
   };
 }
 

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

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

src/plugins/discover/server/ui_settings.ts

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