From 50da9ca4f42b27782fb8e169811bce5b3e535faf Mon Sep 17 00:00:00 2001 From: Anan Z Date: Sat, 27 Jan 2024 00:47:53 +0000 Subject: [PATCH] change to use local storage Signed-off-by: Anan Z --- src/plugins/discover/common/index.ts | 1 - .../components/doc_views/context_app.tsx | 22 ++++++++++++------- .../table_feedbacks_panel.test.tsx.snap | 3 ++- .../components/top_nav/get_top_nav_links.tsx | 22 ++++++++----------- .../top_nav/show_table_feedbacks_panel.tsx | 13 ++++++----- .../components/utils/local_storage.ts | 17 ++++++++++++++ .../view_components/canvas/discover_table.tsx | 7 +++--- src/plugins/discover/public/build_services.ts | 4 ++++ .../search_embeddable_component.tsx | 8 +++---- src/plugins/discover/server/ui_settings.ts | 14 ------------ 10 files changed, 60 insertions(+), 51 deletions(-) create mode 100644 src/plugins/discover/public/application/components/utils/local_storage.ts diff --git a/src/plugins/discover/common/index.ts b/src/plugins/discover/common/index.ts index 38a33b5eafa7..45887df880ae 100644 --- a/src/plugins/discover/common/index.ts +++ b/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'; diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx index 02d6f5f2ec0b..ff1f59f38c9a 100644 --- a/src/plugins/discover/public/application/components/doc_views/context_app.tsx +++ b/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(); - 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 ? (

- Event tables: Documents are now expanded through a flyout. Density, column order, and sorting controls have been improved. + Event tables: Documents are now expanded through a flyout. Density, column order, and sorting controls have been improved. + diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx index 93855859204a..8b58fcba6971 100644 --- a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx +++ b/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 [ diff --git a/src/plugins/discover/public/application/components/top_nav/show_table_feedbacks_panel.tsx b/src/plugins/discover/public/application/components/top_nav/show_table_feedbacks_panel.tsx index c7009013bde9..f74b95a71f11 100644 --- a/src/plugins/discover/public/application/components/top_nav/show_table_feedbacks_panel.tsx +++ b/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(); }; diff --git a/src/plugins/discover/public/application/components/utils/local_storage.ts b/src/plugins/discover/public/application/components/utils/local_storage.ts new file mode 100644 index 000000000000..ae2d8218c3c6 --- /dev/null +++ b/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)); +}; diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx index 26bfeeabc3cd..8b38a9261df6 100644 --- a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx +++ b/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

; } - return services.uiSettings?.get(DATA_GRID_TABLE) ? ( + return getDataGridTableSetting(storage) ? ( string; @@ -82,6 +83,7 @@ export interface DiscoverServices { getSavedSearchUrlById: (id: string) => Promise; 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, }; } diff --git a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx index b3a84d3c2840..672204267163 100644 --- a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx +++ b/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) ? ( @@ -69,7 +68,6 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps )} - ) ); diff --git a/src/plugins/discover/server/ui_settings.ts b/src/plugins/discover/server/ui_settings.ts index 2368acfb28b9..70eab306e7fb 100644 --- a/src/plugins/discover/server/ui_settings.ts +++ b/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 = { @@ -187,17 +186,4 @@ export const uiSettings: Record = { 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(), - }, };