Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move the switcher to the Discover menu #32

Merged
merged 9 commits into from
Aug 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
20 changes: 2 additions & 18 deletions packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 0 additions & 4 deletions packages/kbn-text-based-editor/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions src/plugins/discover/common/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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 });
Expand All @@ -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
Expand All @@ -201,7 +217,6 @@ export const DiscoverTopNav = ({
onCreateDefaultAdHocDataView: stateContainer.actions.createAndAppendAdHocDataView,
onChangeDataView: stateContainer.actions.onChangeDataView,
textBasedLanguages: supportedTextBasedLanguages,
shouldShowTextBasedLanguageTransitionModal: !savedSearchId || savedSearchHasChanged,
adHocDataViews,
savedDataViews,
onEditDataView,
Expand All @@ -213,8 +228,6 @@ export const DiscoverTopNav = ({
dataView,
onEditDataView,
savedDataViews,
savedSearchHasChanged,
savedSearchId,
stateContainer,
uiSettings,
]);
Expand All @@ -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} />
)}
</>
);
};
Loading
Loading