diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.scss b/src/components/ConfirmationDialog/ConfirmationDialog.scss
index 44fce835c0..3d6047d517 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.scss
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.scss
@@ -1,5 +1,6 @@
.confirmation-dialog {
- &__message {
+ &__message,
+ &__caption {
white-space: pre-wrap;
}
}
diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/src/components/ConfirmationDialog/ConfirmationDialog.tsx
index 0b4f47e689..ce3655232e 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/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}
>
-
+ {caption}} />
{children}
);
diff --git a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx
index 64d252c953..a662edf418 100644
--- a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx
+++ b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx
@@ -110,7 +110,7 @@ export const QueryEditorControls = ({
-
+
);
diff --git a/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx b/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx
index ae38233098..6897ee0f4a 100644
--- a/src/containers/Tenant/Query/SaveQuery/SaveQuery.tsx
+++ b/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 (
+
+ );
+}
+
+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 (
-
- );
- };
-
const renderSaveDropdownMenu = () => {
const items = [
{
@@ -60,7 +68,7 @@ export function SaveQuery({isSaveButtonDisabled}: SaveQueryProps) {
(
-