diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx b/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx index fbd4a9209c..289a351da6 100644 --- a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx +++ b/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import NiceModal from '@ebay/nice-modal-react'; import {isEqual} from 'lodash'; import throttle from 'lodash/throttle'; import type Monaco from 'monaco-editor'; @@ -54,7 +55,7 @@ import {ExplainResult} from '../ExplainResult/ExplainResult'; import {Preview} from '../Preview/Preview'; import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls'; import {QuerySettingsDialog} from '../QuerySettingsDialog/QuerySettingsDialog'; -import {SaveQueryDialog} from '../SaveQuery/SaveQuery'; +import {SAVE_QUERY_DIALOG} from '../SaveQuery/SaveQuery'; import i18n from '../i18n'; import {useEditorOptions} from './helpers'; @@ -289,7 +290,7 @@ export default function QueryEditor(props: QueryEditorProps) { label: i18n('action.save-query'), keybindings: [keybindings.saveQuery], run: () => { - dispatch(setQueryAction('save')); + NiceModal.show(SAVE_QUERY_DIALOG); }, }); }; @@ -368,7 +369,6 @@ export default function QueryEditor(props: QueryEditorProps) { /> - ); diff --git a/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx b/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx index 6897ee0f4a..ec6f8d010f 100644 --- a/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx +++ b/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx @@ -1,12 +1,12 @@ import React from 'react'; +import NiceModal from '@ebay/nice-modal-react'; import type {ButtonProps} from '@gravity-ui/uikit'; import {Button, Dialog, DropdownMenu, TextInput} from '@gravity-ui/uikit'; import { clearQueryNameToEdit, saveQuery, - selectQueryAction, selectQueryName, setQueryAction, } from '../../../../store/reducers/queryActions/queryActions'; @@ -24,20 +24,25 @@ interface SaveQueryProps { buttonProps?: ButtonProps; } -function useSaveQueryHandler() { +function useSaveQueryHandler(dialogProps?: SaveQueryDialogCommonProps) { const dispatch = useTypedDispatch(); const onSaveQueryClick = React.useCallback(() => { - dispatch(setQueryAction('save')); + NiceModal.show(SAVE_QUERY_DIALOG, dialogProps); dispatch(clearQueryNameToEdit()); - }, [dispatch]); + }, [dispatch, dialogProps]); return onSaveQueryClick; } -export function SaveQueryButton(props: ButtonProps) { - const onSaveQueryClick = useSaveQueryHandler(); +interface SaveQueryButtonProps extends ButtonProps { + dialogProps?: SaveQueryDialogCommonProps; +} + +export function SaveQueryButton({dialogProps, ...buttonProps}: SaveQueryButtonProps) { + const onSaveQueryClick = useSaveQueryHandler(dialogProps); + return ( - ); @@ -80,15 +85,19 @@ export function SaveQuery({buttonProps = {}}: SaveQueryProps) { return queryNameToEdit ? renderSaveDropdownMenu() : ; } -interface SaveQueryDialogProps { +interface SaveQueryDialogCommonProps { onSuccess?: () => void; onCancel?: () => void; + onClose?: () => void; } -export function SaveQueryDialog({onSuccess, onCancel}: SaveQueryDialogProps) { +interface SaveQueryDialogProps extends SaveQueryDialogCommonProps { + open: boolean; +} + +function SaveQueryDialog({onSuccess, onCancel, onClose, open}: SaveQueryDialogProps) { const savedQueries = useSavedQueries(); const dispatch = useTypedDispatch(); - const queryAction = useTypedSelector(selectQueryAction); const [queryName, setQueryName] = React.useState(''); const [validationError, setValidationError] = React.useState(); @@ -106,6 +115,7 @@ export function SaveQueryDialog({onSuccess, onCancel}: SaveQueryDialogProps) { dispatch(setQueryAction('idle')); setQueryName(''); setValidationError(undefined); + onClose?.(); }; const onCloseWithoutSave = () => { @@ -125,12 +135,7 @@ export function SaveQueryDialog({onSuccess, onCancel}: SaveQueryDialogProps) { }; return ( - +
{ @@ -175,3 +180,27 @@ export function SaveQueryDialog({onSuccess, onCancel}: SaveQueryDialogProps) {
); } + +export const SAVE_QUERY_DIALOG = 'save-query-dialog'; + +export const SaveQueryDialogNiceModal = NiceModal.create((props: SaveQueryDialogProps) => { + const modal = NiceModal.useModal(); + + const handleClose = () => { + modal.hide(); + modal.remove(); + }; + + return ( + { + props.onClose?.(); + handleClose(); + }} + open={modal.visible} + /> + ); +}); + +NiceModal.register(SAVE_QUERY_DIALOG, SaveQueryDialogNiceModal); diff --git a/src/store/reducers/queryActions/types.ts b/src/store/reducers/queryActions/types.ts index 494015a37d..47873ccd52 100644 --- a/src/store/reducers/queryActions/types.ts +++ b/src/store/reducers/queryActions/types.ts @@ -1,4 +1,4 @@ -export type QueryActions = 'save' | 'idle' | 'settings'; +export type QueryActions = 'idle' | 'settings'; export interface QueryActionsState { queryName: string | null; diff --git a/src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.tsx b/src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.tsx index 215fd60fe8..d4c0871746 100644 --- a/src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.tsx +++ b/src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.tsx @@ -4,10 +4,7 @@ import NiceModal from '@ebay/nice-modal-react'; import {useTypedSelector} from '..'; import {CONFIRMATION_DIALOG} from '../../../components/ConfirmationDialog/ConfirmationDialog'; -import { - SaveQueryButton, - SaveQueryDialog, -} from '../../../containers/Tenant/Query/SaveQuery/SaveQuery'; +import {SaveQueryButton} from '../../../containers/Tenant/Query/SaveQuery/SaveQuery'; import {selectUserInput} from '../../../store/reducers/executeQuery'; import i18n from './i18n'; @@ -15,24 +12,28 @@ import i18n from './i18n'; function ExtendedSaveQueryButton() { const modal = NiceModal.useModal(CONFIRMATION_DIALOG); - const closeModal = () => { + const closeModal = React.useCallback(() => { modal.hide(); modal.remove(); - }; - const handleSaveQuerySuccess = () => { + }, [modal]); + const handleSaveQuerySuccess = React.useCallback(() => { modal.resolve(true); closeModal(); - }; - const handleCancelQuerySave = () => { + }, [modal, closeModal]); + const handleCancelQuerySave = React.useCallback(() => { modal.resolve(false); closeModal(); - }; - return ( - - - - + }, [closeModal, modal]); + + const dialogProps = React.useMemo( + () => ({ + onSuccess: handleSaveQuerySuccess, + onCancel: handleCancelQuerySave, + }), + [handleSaveQuerySuccess, handleCancelQuerySave], ); + + return ; } export async function getConfirmation(): Promise {