Merge pull request #32 from stratoula/esql-redesign-on-the-redesign

Move the switcher to the Discover menu
stratoula · Aug 2, 2024 · 33d4a26 · 33d4a26
2 parents f8ea546 + bc4663c
commit 33d4a26
Show file tree

Hide file tree

Showing 34 changed files with 374 additions and 630 deletions.
diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx
@@ -63,8 +63,6 @@ describe('TextBasedLanguagesEditor', () => {
       query: { esql: 'from test' },
       onTextLangQueryChange: jest.fn(),
       onTextLangQuerySubmit: jest.fn(),
-      isHelpMenuOpen: false,
-      setIsHelpMenuOpen: jest.fn(),
     };
   });
   it('should  render the editor component', async () => {

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -75,9 +75,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   allowQueryCancellation,
   hideTimeFilterInfo,
   hideQueryHistory,
-  isHelpMenuOpen,
   hasOutline,
-  setIsHelpMenuOpen,
 }: TextBasedLanguagesEditorProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const datePickerOpenStatusRef = useRef<boolean>(false);
@@ -497,20 +495,6 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     [esqlCallbacks]
   );
 
-  const helpMenuPopoverProps = useMemo(() => {
-    if (setIsHelpMenuOpen) {
-      return {
-        isHelpMenuOpen: isHelpMenuOpen ?? false,
-        setIsHelpMenuOpen,
-      };
-    }
-
-    return {
-      isHelpMenuOpen: isLanguagePopoverOpen,
-      setIsHelpMenuOpen: setIsLanguagePopoverOpen,
-    };
-  }, [isHelpMenuOpen, isLanguagePopoverOpen, setIsHelpMenuOpen]);
-
   const onErrorClick = useCallback(({ startLineNumber, startColumn }: MonacoMessage) => {
     if (!editor1.current) {
       return;
@@ -725,8 +709,8 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
         measuredContainerWidth={measuredEditorWidth}
         hideQueryHistory={hideHistoryComponent}
         refetchHistoryItems={refetchHistoryItems}
-        isHelpMenuOpen={helpMenuPopoverProps.isHelpMenuOpen}
-        setIsHelpMenuOpen={helpMenuPopoverProps.setIsHelpMenuOpen}
+        isHelpMenuOpen={isLanguagePopoverOpen}
+        setIsHelpMenuOpen={setIsLanguagePopoverOpen}
       />
       <ResizableButton
         onMouseDownResizeHandler={onMouseDownResizeHandler}

diff --git a/packages/kbn-text-based-editor/src/types.ts b/packages/kbn-text-based-editor/src/types.ts
@@ -22,10 +22,6 @@ export interface TextBasedLanguagesEditorProps {
     query?: AggregateQuery,
     abortController?: AbortController
   ) => Promise<void>;
-  /** inline docs popover status, controlled from outside the editor **/
-  isHelpMenuOpen?: boolean;
-  /** sets the inline docs popover status, controlled from outside the editor **/
-  setIsHelpMenuOpen?: (status: boolean) => void;
   /** If it is true, the editor displays the message @timestamp found
    * The text based queries are relying on adhoc dataviews which
    * can have an @timestamp timefield or nothing

diff --git a/src/plugins/discover/common/constants.ts b/src/plugins/discover/common/constants.ts
@@ -21,3 +21,6 @@ export enum VIEW_MODE {
 export const getDefaultRowsPerPage = (uiSettings: IUiSettingsClient): number => {
   return parseInt(uiSettings.get(SAMPLE_ROWS_PER_PAGE_SETTING), 10) || DEFAULT_ROWS_PER_PAGE;
 };
+
+// local storage key for the ES|QL to Dataviews transition modal
+export const ESQL_TRANSITION_MODAL_KEY = 'data.textLangTransitionModal';
diff --git a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx
@@ -11,11 +11,8 @@ import { type DataView, DataViewType } from '@kbn/data-views-plugin/public';
 import { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
 import { ENABLE_ESQL } from '@kbn/esql-utils';
 import { TextBasedLanguages } from '@kbn/esql-utils';
-import {
-  useSavedSearch,
-  useSavedSearchHasChanged,
-  useSavedSearchInitial,
-} from '../../state_management/discover_state_provider';
+import { useSavedSearchInitial } from '../../state_management/discover_state_provider';
+import { ESQL_TRANSITION_MODAL_KEY } from '../../../../../common/constants';
 import { useInternalStateSelector } from '../../state_management/discover_internal_state_container';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import type { DiscoverStateContainer } from '../../state_management/discover_state';
@@ -25,6 +22,7 @@ import { addLog } from '../../../../utils/add_log';
 import { useAppStateSelector } from '../../state_management/discover_app_state_container';
 import { useDiscoverTopNav } from './use_discover_topnav';
 import { useIsEsqlMode } from '../../hooks/use_is_esql_mode';
+import { ESQLToDataViewTransitionModal } from './esql_dataview_transition';
 
 export interface DiscoverTopNavProps {
   savedQuery?: string;
@@ -59,6 +57,9 @@ export const DiscoverTopNav = ({
   const adHocDataViews = useInternalStateSelector((state) => state.adHocDataViews);
   const dataView = useInternalStateSelector((state) => state.dataView!);
   const savedDataViews = useInternalStateSelector((state) => state.savedDataViews);
+  const isESQLToDataViewTransitionModalVisible = useInternalStateSelector(
+    (state) => state.isESQLToDataViewTransitionModalVisible
+  );
   const savedSearch = useSavedSearchInitial();
   const isEsqlMode = useIsEsqlMode();
   const showDatePicker = useMemo(() => {
@@ -150,17 +151,34 @@ export const DiscoverTopNav = ({
     }
   };
 
-  const onEsqlSavedAndExit = useCallback(
-    ({ onSave, onCancel }) => {
-      onSaveSearch({
-        savedSearch: stateContainer.savedSearchState.getState(),
-        services,
-        state: stateContainer,
-        onClose: onCancel,
-        onSaveCb: onSave,
-      });
+  const onESQLToDataViewTransitionModalClose = useCallback(
+    (shouldDismissModal?: boolean, needsSave?: boolean) => {
+      if (shouldDismissModal) {
+        services.storage.set(ESQL_TRANSITION_MODAL_KEY, true);
+      }
+      stateContainer.internalState.transitions.setIsESQLToDataViewTransitionModalVisible(false);
+      // the user dismissed the modal, we don't need to save the search or switch to the data view mode
+      if (needsSave == null) {
+        return;
+      }
+      if (needsSave) {
+        onSaveSearch({
+          savedSearch: stateContainer.savedSearchState.getState(),
+          services,
+          state: stateContainer,
+          onClose: () =>
+            stateContainer.internalState.transitions.setIsESQLToDataViewTransitionModalVisible(
+              false
+            ),
+          onSaveCb: () => {
+            stateContainer.actions.transitionFromESQLToDataview(dataView.id ?? '');
+          },
+        });
+      } else {
+        stateContainer.actions.transitionFromESQLToDataview(dataView.id ?? '');
+      }
     },
-    [services, stateContainer]
+    [dataView.id, services, stateContainer]
   );
 
   const { topNavBadges, topNavMenu } = useDiscoverTopNav({ stateContainer });
@@ -181,8 +199,6 @@ export const DiscoverTopNav = ({
     topNavMenu,
   ]);
 
-  const savedSearchId = useSavedSearch().id;
-  const savedSearchHasChanged = useSavedSearchHasChanged();
   const dataViewPickerProps: DataViewPickerProps = useMemo(() => {
     const isESQLModeEnabled = uiSettings.get(ENABLE_ESQL);
     const supportedTextBasedLanguages: DataViewPickerProps['textBasedLanguages'] = isESQLModeEnabled
@@ -201,7 +217,6 @@ export const DiscoverTopNav = ({
       onCreateDefaultAdHocDataView: stateContainer.actions.createAndAppendAdHocDataView,
       onChangeDataView: stateContainer.actions.onChangeDataView,
       textBasedLanguages: supportedTextBasedLanguages,
-      shouldShowTextBasedLanguageTransitionModal: !savedSearchId || savedSearchHasChanged,
       adHocDataViews,
       savedDataViews,
       onEditDataView,
@@ -213,8 +228,6 @@ export const DiscoverTopNav = ({
     dataView,
     onEditDataView,
     savedDataViews,
-    savedSearchHasChanged,
-    savedSearchId,
     stateContainer,
     uiSettings,
   ]);
@@ -230,40 +243,44 @@ export const DiscoverTopNav = ({
     !!searchBarCustomization?.CustomDataViewPicker || !!searchBarCustomization?.hideDataViewPicker;
 
   return (
-    <SearchBar
-      {...topNavProps}
-      appName="discover"
-      indexPatterns={[dataView]}
-      onQuerySubmit={stateContainer.actions.onUpdateQuery}
-      onCancel={onCancelClick}
-      isLoading={isLoading}
-      onSavedQueryIdChange={updateSavedQueryId}
-      query={query}
-      savedQueryId={savedQuery}
-      screenTitle={savedSearch.title}
-      showDatePicker={showDatePicker}
-      saveQueryMenuVisibility={
-        services.capabilities.discover.saveQuery ? 'allowed_by_app_privilege' : 'globally_managed'
-      }
-      showSearchBar={true}
-      useDefaultBehaviors={true}
-      dataViewPickerOverride={
-        searchBarCustomization?.CustomDataViewPicker ? (
-          <searchBarCustomization.CustomDataViewPicker />
-        ) : undefined
-      }
-      dataViewPickerComponentProps={
-        shouldHideDefaultDataviewPicker ? undefined : dataViewPickerProps
-      }
-      displayStyle="detached"
-      textBasedLanguageModeErrors={esqlModeErrors ? [esqlModeErrors] : undefined}
-      textBasedLanguageModeWarning={esqlModeWarning}
-      onTextBasedSavedAndExit={onEsqlSavedAndExit}
-      prependFilterBar={
-        searchBarCustomization?.PrependFilterBar ? (
-          <searchBarCustomization.PrependFilterBar />
-        ) : undefined
-      }
-    />
+    <>
+      <SearchBar
+        {...topNavProps}
+        appName="discover"
+        indexPatterns={[dataView]}
+        onQuerySubmit={stateContainer.actions.onUpdateQuery}
+        onCancel={onCancelClick}
+        isLoading={isLoading}
+        onSavedQueryIdChange={updateSavedQueryId}
+        query={query}
+        savedQueryId={savedQuery}
+        screenTitle={savedSearch.title}
+        showDatePicker={showDatePicker}
+        saveQueryMenuVisibility={
+          services.capabilities.discover.saveQuery ? 'allowed_by_app_privilege' : 'globally_managed'
+        }
+        showSearchBar={true}
+        useDefaultBehaviors={true}
+        dataViewPickerOverride={
+          searchBarCustomization?.CustomDataViewPicker ? (
+            <searchBarCustomization.CustomDataViewPicker />
+          ) : undefined
+        }
+        dataViewPickerComponentProps={
+          shouldHideDefaultDataviewPicker ? undefined : dataViewPickerProps
+        }
+        displayStyle="detached"
+        textBasedLanguageModeErrors={esqlModeErrors ? [esqlModeErrors] : undefined}
+        textBasedLanguageModeWarning={esqlModeWarning}
+        prependFilterBar={
+          searchBarCustomization?.PrependFilterBar ? (
+            <searchBarCustomization.PrependFilterBar />
+          ) : undefined
+        }
+      />
+      {isESQLToDataViewTransitionModalVisible && (
+        <ESQLToDataViewTransitionModal closeModal={onESQLToDataViewTransitionModalClose} />
+      )}
+    </>
   );
 };