From b078a06c05bb7a7857ce38cbdb8e4a8940fda2d0 Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Wed, 7 Feb 2024 02:38:59 -0800 Subject: [PATCH] [Discover] Simplify feedback modal (#5837) * Simplify feedback modal Signed-off-by: Ashwin P Chandran * renames datagrid settng to newDiscover setting Signed-off-by: Ashwin P Chandran * removes sub module from branch Signed-off-by: Ashwin P Chandran --------- Signed-off-by: Ashwin P Chandran --- dashboards-observability | 1 - .../components/data_grid/data_grid_table.tsx | 10 +-- .../table_feedbacks_panel.test.tsx.snap | 46 ------------ .../components/top_nav/get_top_nav_links.tsx | 70 ++++++++++++++----- .../top_nav/show_open_search_panel.tsx | 70 ------------------- .../top_nav/show_table_feedbacks_panel.tsx | 51 -------------- .../top_nav/table_feedbacks_panel.test.tsx | 34 --------- .../top_nav/table_feedbacks_panel.tsx | 50 ------------- .../components/utils/local_storage.ts | 10 +-- 9 files changed, 62 insertions(+), 280 deletions(-) delete mode 160000 dashboards-observability delete mode 100644 src/plugins/discover/public/application/components/top_nav/__snapshots__/table_feedbacks_panel.test.tsx.snap delete mode 100644 src/plugins/discover/public/application/components/top_nav/show_open_search_panel.tsx delete mode 100644 src/plugins/discover/public/application/components/top_nav/show_table_feedbacks_panel.tsx delete mode 100644 src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.test.tsx delete mode 100644 src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.tsx diff --git a/dashboards-observability b/dashboards-observability deleted file mode 160000 index 8f091bd3a384..000000000000 --- a/dashboards-observability +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 8f091bd3a38411000fc66d532fbf094312709070 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 58eb1e10befe..edfc7f1a2d40 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 @@ -26,7 +26,7 @@ import { } from '../../../../common'; import { UI_SETTINGS } from '../../../../../data/common'; import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table'; -import { getDataGridTableSetting } from '../utils/local_storage'; +import { getNewDiscoverSetting } from '../utils/local_storage'; import { SortDirection, SortOrder } from '../../../saved_searches/types'; import { useToolbarOptions } from './data_grid_toolbar'; @@ -160,7 +160,7 @@ export const DataGridTable = ({ ]; }, []); - const datagridActive = getDataGridTableSetting(services.storage); + const newDiscoverEnabled = getNewDiscoverSetting(services.storage); const legacyDiscoverTable = useMemo( () => ( @@ -232,7 +232,7 @@ export const DataGridTable = ({ ] ); - const tablePanelProps = datagridActive + const tablePanelProps = newDiscoverEnabled ? { paddingSize: 'none' as const, style: { @@ -267,9 +267,9 @@ export const DataGridTable = ({ className="eui-xScrollWithShadows" > - {datagridActive ? dataGridTable : legacyDiscoverTable} + {newDiscoverEnabled ? dataGridTable : legacyDiscoverTable} - {datagridActive && inspectedHit && ( + {newDiscoverEnabled && inspectedHit && ( - - -

- Share your thoughts on the latest Discover features -

- - - - -

- Help drive future improvements by - - - providing feedback - - - about your experience. -

- - - - - Cancel - - - Turn off new features - - - -`; 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 a4e1a7ca51ad..1b20c444e860 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 @@ -5,8 +5,8 @@ import { i18n } from '@osd/i18n'; import React from 'react'; +import { EuiText } from '@elastic/eui'; import { DiscoverViewServices } from '../../../build_services'; -import { showOpenSearchPanel } from './show_open_search_panel'; import { SavedSearch } from '../../../saved_searches'; import { Adapters } from '../../../../../inspector/public'; import { TopNavMenuData } from '../../../../../navigation/public'; @@ -16,14 +16,17 @@ import { SavedObjectSaveModal, showSaveModal, } from '../../../../../saved_objects/public'; +import { + OpenSearchDashboardsContextProvider, + toMountPoint, +} from '../../../../../opensearch_dashboards_react/public'; import { DiscoverState, setSavedSearchId } from '../../utils/state_management'; 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 { showTableFeedbacksPanel } from './show_table_feedbacks_panel'; -import { getDataGridTableSetting, setDataGridTableSetting } from '../utils/local_storage'; +import { getNewDiscoverSetting, setNewDiscoverSetting } from '../utils/local_storage'; +import { OpenSearchPanel } from './open_search_panel'; export const getTopNavLinks = ( services: DiscoverViewServices, @@ -166,11 +169,20 @@ export const getTopNavLinks = ( }), testId: 'discoverOpenButton', run: () => { - showOpenSearchPanel({ - makeUrl: (searchId) => `#/view/${encodeURIComponent(searchId)}`, - I18nContext: core.i18n.Context, - services, - }); + const flyoutSession = services.overlays.openFlyout( + toMountPoint( + + { + if (flyoutSession) { + flyoutSession.close(); + } + }} + makeUrl={(searchId) => `#/view/${encodeURIComponent(searchId)}`} + /> + + ) + ); }, }; @@ -201,7 +213,7 @@ export const getTopNavLinks = ( ...sharingData, title: savedSearch.title, }, - isDirty: !savedSearch.id || state.isDirty, + isDirty: !savedSearch.id || state.isDirty || false, }); }, }; @@ -228,7 +240,7 @@ export const getTopNavLinks = ( const oldDiscoverButtonLabel = i18n.translate('discover.localMenu.discoverButton.label.old', { defaultMessage: 'Use legacy Discover', }); - const isNewDiscover = getDataGridTableSetting(storage); + const isNewDiscover = getNewDiscoverSetting(storage); const newTable: TopNavMenuData = { id: 'table-datagrid', label: isNewDiscover ? oldDiscoverButtonLabel : newDiscoverButtonLabel, @@ -238,15 +250,37 @@ export const getTopNavLinks = ( testId: 'datagridTableButton', run: async () => { // Read the current state from localStorage - const useDatagridTable = getDataGridTableSetting(storage); - if (useDatagridTable) { - showTableFeedbacksPanel({ - I18nContext: core.i18n.Context, - services, - }); + const newDiscoverEnabled = getNewDiscoverSetting(storage); + if (newDiscoverEnabled) { + const confirmed = await services.overlays.openConfirm( + toMountPoint( + +

+ Help drive future improvements by{' '} + + providing feedback + {' '} + about your experience. +

+ + ), + { + title: i18n.translate('discover.localMenu.newTableConfirmModalTitle', { + defaultMessage: 'Share your thoughts on the latest Discover features', + }), + cancelButtonText: 'Cancel', + confirmButtonText: 'Turn off new features', + defaultFocusedButton: 'confirm', + } + ); + + if (confirmed) { + setNewDiscoverSetting(false, storage); + window.location.reload(); + } } else { // Save the new setting to localStorage - setDataGridTableSetting(true, storage); + setNewDiscoverSetting(true, storage); window.location.reload(); } }, diff --git a/src/plugins/discover/public/application/components/top_nav/show_open_search_panel.tsx b/src/plugins/discover/public/application/components/top_nav/show_open_search_panel.tsx deleted file mode 100644 index 5bc95b1b9cf2..000000000000 --- a/src/plugins/discover/public/application/components/top_nav/show_open_search_panel.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/* - * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - * - * Any modifications Copyright OpenSearch Contributors. See - * GitHub history for details. - */ - -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React from 'react'; -import ReactDOM from 'react-dom'; -import { OpenSearchPanel } from './open_search_panel'; -import { I18nStart } from '../../../../../../core/public'; -import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public'; -import { DiscoverViewServices } from '../../../build_services'; - -let isOpen = false; - -export function showOpenSearchPanel({ - makeUrl, - I18nContext, - services, -}: { - makeUrl: (id: string) => string; - I18nContext: I18nStart['Context']; - services: DiscoverViewServices; -}) { - if (isOpen) { - return; - } - - isOpen = true; - const container = document.createElement('div'); - const onClose = () => { - ReactDOM.unmountComponentAtNode(container); - document.body.removeChild(container); - isOpen = false; - }; - - document.body.appendChild(container); - const element = ( - - - - - - ); - ReactDOM.render(element, container); -} 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 deleted file mode 100644 index 50db0cf5b6fa..000000000000 --- a/src/plugins/discover/public/application/components/top_nav/show_table_feedbacks_panel.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import ReactDOM from 'react-dom'; - -import { I18nStart } from '../../../../../../core/public'; -import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public'; -import { DiscoverViewServices } from '../../../build_services'; -import { setDataGridTableSetting } from '../utils/local_storage'; -import { TableFeedbacksPanel } from './table_feedbacks_panel'; -let isFeedbackPanelOpen = false; - -export function showTableFeedbacksPanel({ - I18nContext, - services, -}: { - I18nContext: I18nStart['Context']; - services: DiscoverViewServices; -}) { - if (isFeedbackPanelOpen) { - return; - } - - isFeedbackPanelOpen = true; - const container = document.createElement('div'); - const onClose = () => { - ReactDOM.unmountComponentAtNode(container); - document.body.removeChild(container); - isFeedbackPanelOpen = false; - }; - - const onTurnOff = async () => { - // Save the new setting to localStorage - setDataGridTableSetting(false, services.storage); - onClose(); - window.location.reload(); - }; - - document.body.appendChild(container); - const element = ( - - - - - - ); - ReactDOM.render(element, container); -} diff --git a/src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.test.tsx b/src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.test.tsx deleted file mode 100644 index 72e08dc61670..000000000000 --- a/src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { shallow, ShallowWrapper } from 'enzyme'; -import { TableFeedbacksPanel } from './table_feedbacks_panel'; - -describe('TableFeedbacksPanel', () => { - let onCloseMock: jest.Mock; - let onTurnOffMock: jest.Mock; - let wrapper: ShallowWrapper; - - beforeEach(() => { - onCloseMock = jest.fn(); - onTurnOffMock = jest.fn(); - wrapper = shallow(); - }); - - it('renders correctly', () => { - expect(wrapper).toMatchSnapshot(); - }); - - it('calls onClose when the Cancel button is clicked', () => { - wrapper.find('EuiButtonEmpty').simulate('click'); - expect(onCloseMock).toHaveBeenCalled(); - }); - - it('calls onTurnOff when the Turn off new features button is clicked', () => { - wrapper.find('EuiButton').simulate('click'); - expect(onTurnOffMock).toHaveBeenCalled(); - }); -}); diff --git a/src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.tsx b/src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.tsx deleted file mode 100644 index 212f1c99ca25..000000000000 --- a/src/plugins/discover/public/application/components/top_nav/table_feedbacks_panel.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { - EuiModal, - EuiModalHeader, - EuiModalHeaderTitle, - EuiModalBody, - EuiModalFooter, - EuiButton, - EuiText, - EuiButtonEmpty, -} from '@elastic/eui'; - -interface TableFeedbacksPanelProps { - onClose: () => void; - onTurnOff: () => Promise; -} - -export const TableFeedbacksPanel = ({ onClose, onTurnOff }: TableFeedbacksPanelProps) => ( - - - -

Share your thoughts on the latest Discover features

- - - - - -

- Help drive future improvements by{' '} - - providing feedback - {' '} - about your experience. -

- - - - - Cancel - - Turn off new features - - - -); diff --git a/src/plugins/discover/public/application/components/utils/local_storage.ts b/src/plugins/discover/public/application/components/utils/local_storage.ts index ae2d8218c3c6..5e812de8e97d 100644 --- a/src/plugins/discover/public/application/components/utils/local_storage.ts +++ b/src/plugins/discover/public/application/components/utils/local_storage.ts @@ -5,13 +5,13 @@ import { Storage } from '../../../../../opensearch_dashboards_utils/public'; -export const DATA_GRID_TABLE_KEY = 'discover:dataGridTable'; +export const NEW_DISCOVER_KEY = 'discover:newExpereince'; -export const getDataGridTableSetting = (storage: Storage): boolean => { - const storedValue = storage.get(DATA_GRID_TABLE_KEY); +export const getNewDiscoverSetting = (storage: Storage): boolean => { + const storedValue = storage.get(NEW_DISCOVER_KEY); return storedValue !== null ? JSON.parse(storedValue) : false; }; -export const setDataGridTableSetting = (value: boolean, storage: Storage) => { - storage.set(DATA_GRID_TABLE_KEY, JSON.stringify(value)); +export const setNewDiscoverSetting = (value: boolean, storage: Storage) => { + storage.set(NEW_DISCOVER_KEY, JSON.stringify(value)); };