fix(SaveQueryDialog): should not duplicate component in DOM (#1649)

Author: Raubzeug

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) {
                     />
                 </div>
             </SplitPane>
-            <SaveQueryDialog />
             <QuerySettingsDialog />
         </div>
     );

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 (
-        <Button onClick={onSaveQueryClick} {...props}>
+        <Button onClick={onSaveQueryClick} {...buttonProps}>
             {i18n('action.save')}
         </Button>
     );
@@ -80,15 +85,19 @@ export function SaveQuery({buttonProps = {}}: SaveQueryProps) {
     return queryNameToEdit ? renderSaveDropdownMenu() : <SaveQueryButton />;
 }
 
-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<string>();
 
@@ -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 (
-        <Dialog
-            open={queryAction === 'save'}
-            hasCloseButton={false}
-            size="s"
-            onClose={onCloseWithoutSave}
-        >
+        <Dialog open={open} hasCloseButton={false} size="s" onClose={onCloseWithoutSave}>
             <Dialog.Header caption={i18n('action.save')} />
             <form
                 onSubmit={(e) => {
@@ -175,3 +180,27 @@ export function SaveQueryDialog({onSuccess, onCancel}: SaveQueryDialogProps) {
         </Dialog>
     );
 }
+
+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 (
+        <SaveQueryDialog
+            {...props}
+            onClose={() => {
+                props.onClose?.();
+                handleClose();
+            }}
+            open={modal.visible}
+        />
+    );
+});
+
+NiceModal.register(SAVE_QUERY_DIALOG, SaveQueryDialogNiceModal);

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;

src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.tsx

@@ -4,35 +4,36 @@ 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';
 
 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 (
-        <React.Fragment>
-            <SaveQueryDialog onSuccess={handleSaveQuerySuccess} onCancel={handleCancelQuerySave} />
-            <SaveQueryButton view="action" size="l" />
-        </React.Fragment>
+    }, [closeModal, modal]);
+
+    const dialogProps = React.useMemo(
+        () => ({
+            onSuccess: handleSaveQuerySuccess,
+            onCancel: handleCancelQuerySave,
+        }),
+        [handleSaveQuerySuccess, handleCancelQuerySave],
     );
+
+    return <SaveQueryButton view="action" size="l" dialogProps={dialogProps} />;
 }
 
 export async function getConfirmation(): Promise<boolean> {