feat(ConfirmationDialog): add saving query before replace (#1629)

Author: Raubzeug

src/components/ConfirmationDialog/ConfirmationDialog.scss

@@ -1,5 +1,6 @@
 .confirmation-dialog {
-    &__message {
+    &__message,
+    &__caption {
         white-space: pre-wrap;
     }
 }

src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -1,5 +1,7 @@
+import React from 'react';
+
 import * as NiceModal from '@ebay/nice-modal-react';
-import type {ButtonView} from '@gravity-ui/uikit';
+import type {ButtonView, DialogFooterProps} from '@gravity-ui/uikit';
 import {Dialog} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
@@ -23,11 +25,11 @@ interface CommonDialogProps {
     onConfirm?: () => void;
 }
 
-interface ConfirmationDialogNiceModalProps extends CommonDialogProps {
+interface ConfirmationDialogNiceModalProps extends CommonDialogProps, DialogFooterProps {
     onClose?: () => void;
 }
 
-interface ConfirmationDialogProps extends CommonDialogProps {
+interface ConfirmationDialogProps extends CommonDialogProps, DialogFooterProps {
     onClose: () => void;
     open: boolean;
     children?: React.ReactNode;
@@ -44,6 +46,7 @@ function ConfirmationDialog({
     textButtonCancel,
     buttonApplyView = 'normal',
     className,
+    renderButtons,
     open,
 }: ConfirmationDialogProps) {
     return (
@@ -54,7 +57,7 @@ function ConfirmationDialog({
             disableOutsideClick
             open={open}
         >
-            <Dialog.Header caption={caption} />
+            <Dialog.Header caption={<span className={block('caption')}>{caption}</span>} />
             <Dialog.Body>{children}</Dialog.Body>
             <Dialog.Footer
                 onClickButtonApply={onConfirm}
@@ -63,6 +66,7 @@ function ConfirmationDialog({
                 textButtonCancel={textButtonCancel ?? confirmationDialogKeyset('action_cancel')}
                 onClickButtonCancel={onClose}
                 loading={progress}
+                renderButtons={renderButtons}
             />
         </Dialog>
     );

src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -110,7 +110,7 @@ export const QueryEditorControls = ({
             </div>
             <div className={b('right')}>
                 <NewSQL />
-                <SaveQuery isSaveButtonDisabled={disabled} />
+                <SaveQuery buttonProps={{disabled}} />
             </div>
         </div>
     );

src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type {ButtonProps} from '@gravity-ui/uikit';
 import {Button, Dialog, DropdownMenu, TextInput} from '@gravity-ui/uikit';
 
 import {
@@ -20,31 +21,38 @@ import './SaveQuery.scss';
 const b = cn('ydb-save-query');
 
 interface SaveQueryProps {
-    isSaveButtonDisabled?: boolean;
+    buttonProps?: ButtonProps;
 }
 
-export function SaveQuery({isSaveButtonDisabled}: SaveQueryProps) {
+function useSaveQueryHandler() {
     const dispatch = useTypedDispatch();
-    const queryNameToEdit = useTypedSelector(selectQueryName);
-
-    const onSaveQueryClick = () => {
+    const onSaveQueryClick = React.useCallback(() => {
         dispatch(setQueryAction('save'));
         dispatch(clearQueryNameToEdit());
-    };
+    }, [dispatch]);
+
+    return onSaveQueryClick;
+}
+
+export function SaveQueryButton(props: ButtonProps) {
+    const onSaveQueryClick = useSaveQueryHandler();
+    return (
+        <Button onClick={onSaveQueryClick} {...props}>
+            {i18n('action.save')}
+        </Button>
+    );
+}
+
+export function SaveQuery({buttonProps = {}}: SaveQueryProps) {
+    const dispatch = useTypedDispatch();
+    const queryNameToEdit = useTypedSelector(selectQueryName);
+    const onSaveQueryClick = useSaveQueryHandler();
 
     const onEditQueryClick = () => {
         dispatch(saveQuery(queryNameToEdit));
         dispatch(clearQueryNameToEdit());
     };
 
-    const renderSaveButton = () => {
-        return (
-            <Button onClick={onSaveQueryClick} disabled={isSaveButtonDisabled}>
-                {i18n('action.save')}
-            </Button>
-        );
-    };
-
     const renderSaveDropdownMenu = () => {
         const items = [
             {
@@ -60,7 +68,7 @@ export function SaveQuery({isSaveButtonDisabled}: SaveQueryProps) {
             <DropdownMenu
                 items={items}
                 renderSwitcher={(props) => (
-                    <Button {...props} disabled={isSaveButtonDisabled}>
+                    <Button {...props} {...buttonProps}>
                         {i18n('action.edit')}
                     </Button>
                 )}
@@ -69,10 +77,15 @@ export function SaveQuery({isSaveButtonDisabled}: SaveQueryProps) {
         );
     };
 
-    return queryNameToEdit ? renderSaveDropdownMenu() : renderSaveButton();
+    return queryNameToEdit ? renderSaveDropdownMenu() : <SaveQueryButton />;
 }
 
-export function SaveQueryDialog() {
+interface SaveQueryDialogProps {
+    onSuccess?: () => void;
+    onCancel?: () => void;
+}
+
+export function SaveQueryDialog({onSuccess, onCancel}: SaveQueryDialogProps) {
     const savedQueries = useSavedQueries();
     const dispatch = useTypedDispatch();
     const queryAction = useTypedSelector(selectQueryAction);
@@ -95,6 +108,11 @@ export function SaveQueryDialog() {
         setValidationError(undefined);
     };
 
+    const onCloseWithoutSave = () => {
+        onCancel?.();
+        onCloseDialog();
+    };
+
     const handleQueryNameChange = (value: string) => {
         setQueryName(value);
         setValidationError(undefined);
@@ -103,14 +121,15 @@ export function SaveQueryDialog() {
     const onSaveClick = () => {
         dispatch(saveQuery(queryName));
         onCloseDialog();
+        onSuccess?.();
     };
 
     return (
         <Dialog
             open={queryAction === 'save'}
             hasCloseButton={false}
             size="s"
-            onClose={onCloseDialog}
+            onClose={onCloseWithoutSave}
         >
             <Dialog.Header caption={i18n('action.save')} />
             <form
@@ -147,7 +166,7 @@ export function SaveQueryDialog() {
                 <Dialog.Footer
                     textButtonApply={i18n('button-apply')}
                     textButtonCancel={i18n('button-cancel')}
-                    onClickButtonCancel={onCloseDialog}
+                    onClickButtonCancel={onCloseWithoutSave}
                     propsButtonApply={{
                         type: 'submit',
                     }}

src/utils/hooks/withConfirmation/i18n/en.json

@@ -1,4 +1,4 @@
 {
-  "action_apply": "Proceed",
-  "context_unsaved-changes-warning": "You have unsaved changes in query editor. Do you want to proceed?"
+  "action_apply": "Don't save",
+  "context_unsaved-changes-warning": "You have unsaved changes in query editor.\nDo you want to proceed?"
 }

src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.ts renamed to src/utils/hooks/withConfirmation/useChangeInputWithConfirmation.tsx

@@ -4,15 +4,52 @@ 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 {selectUserInput} from '../../../store/reducers/executeQuery';
 
 import i18n from './i18n';
 
+function ExtendedSaveQueryButton() {
+    const modal = NiceModal.useModal(CONFIRMATION_DIALOG);
+
+    const closeModal = () => {
+        modal.hide();
+        modal.remove();
+    };
+    const handleSaveQuerySuccess = () => {
+        modal.resolve(true);
+        closeModal();
+    };
+    const handleCancelQuerySave = () => {
+        modal.resolve(false);
+        closeModal();
+    };
+    return (
+        <React.Fragment>
+            <SaveQueryDialog onSuccess={handleSaveQuerySuccess} onCancel={handleCancelQuerySave} />
+            <SaveQueryButton view="action" size="l" />
+        </React.Fragment>
+    );
+}
+
 export async function getConfirmation(): Promise<boolean> {
     return await NiceModal.show(CONFIRMATION_DIALOG, {
         id: CONFIRMATION_DIALOG,
         caption: i18n('context_unsaved-changes-warning'),
         textButtonApply: i18n('action_apply'),
+        propsButtonApply: {view: 'l'},
+        renderButtons: (buttonApply: React.ReactNode, buttonCancel: React.ReactNode) => {
+            return (
+                <React.Fragment>
+                    {buttonCancel}
+                    <ExtendedSaveQueryButton />
+                    {buttonApply}
+                </React.Fragment>
+            );
+        },
     });
 }