feat(QueryEditor): save query on Cmd/Ctrl + S

src/containers/Tenant/Query/Query.tsx

@@ -5,10 +5,8 @@ import {Helmet} from 'react-helmet-async';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 import type {EPathType} from '../../../types/api/schema';
-import type {SavedQuery} from '../../../types/store/query';
 import {cn} from '../../../utils/cn';
-import {SAVED_QUERIES_KEY} from '../../../utils/constants';
-import {useSetting, useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
+import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
 
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import QueryEditor from './QueryEditor/QueryEditor';
@@ -31,15 +29,6 @@ export const Query = (props: QueryProps) => {
 
     const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant);
 
-    const [savedQueries, setSavedQueries] = useSetting<SavedQuery[]>(SAVED_QUERIES_KEY, []);
-
-    const handleDeleteQuery = (queryName: string) => {
-        const newSavedQueries = savedQueries.filter(
-            (el) => el.name.toLowerCase() !== queryName.toLowerCase(),
-        );
-        setSavedQueries(newSavedQueries);
-    };
-
     const handleUserInputChange = (value: {input: string}) => {
         dispatch(changeUserInput(value));
     };
@@ -58,13 +47,7 @@ export const Query = (props: QueryProps) => {
                 return <QueriesHistory changeUserInput={handleUserInputChange} />;
             }
             case TENANT_QUERY_TABS_ID.saved: {
-                return (
-                    <SavedQueries
-                        changeUserInput={handleUserInputChange}
-                        savedQueries={savedQueries}
-                        onDeleteQuery={handleDeleteQuery}
-                    />
-                );
+                return <SavedQueries changeUserInput={handleUserInputChange} />;
             }
             default: {
                 return null;

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -16,18 +16,18 @@ import {
 } from '../../../../store/reducers/executeQuery';
 import {explainQueryApi} from '../../../../store/reducers/explainQuery/explainQuery';
 import type {PreparedExplainResponse} from '../../../../store/reducers/explainQuery/types';
+import {setQueryAction} from '../../../../store/reducers/queryActions';
 import {setShowPreview} from '../../../../store/reducers/schema/schema';
 import type {EPathType} from '../../../../types/api/schema';
 import type {ValueOf} from '../../../../types/common';
 import type {ExecuteQueryState} from '../../../../types/store/executeQuery';
-import type {IQueryResult, QueryAction, QueryMode, SavedQuery} from '../../../../types/store/query';
+import type {IQueryResult, QueryAction, QueryMode} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     LAST_USED_QUERY_ACTION_KEY,
     QUERY_USE_MULTI_SCHEMA_KEY,
-    SAVED_QUERIES_KEY,
 } from '../../../../utils/constants';
 import {useQueryModes, useSetting} from '../../../../utils/hooks';
 import {LANGUAGE_YQL_ID} from '../../../../utils/monaco/yql/constants';
@@ -41,9 +41,11 @@ import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
 import {ExplainResult} from '../ExplainResult/ExplainResult';
 import {Preview} from '../Preview/Preview';
 import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
+import {SaveQueryDialog} from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 
 import {useEditorOptions} from './helpers';
+import {getKeyBindings} from './keybindings';
 
 import './QueryEditor.scss';
 
@@ -72,6 +74,7 @@ interface QueryEditorProps {
     goToNextQuery: (...args: Parameters<typeof goToNextQuery>) => void;
     goToPreviousQuery: (...args: Parameters<typeof goToPreviousQuery>) => void;
     setTenantPath: (...args: Parameters<typeof setTenantPath>) => void;
+    setQueryAction: (...args: Parameters<typeof setQueryAction>) => void;
     executeQuery: ExecuteQueryState;
     theme: string;
     type?: EPathType;
@@ -86,6 +89,7 @@ function QueryEditor(props: QueryEditorProps) {
         tenantName,
         path,
         setTenantPath: setPath,
+        setQueryAction,
         executeQuery,
         type,
         theme,
@@ -102,7 +106,6 @@ function QueryEditor(props: QueryEditorProps) {
     const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting<QueryAction>(
         LAST_USED_QUERY_ACTION_KEY,
     );
-    const [savedQueries, setSavedQueries] = useSetting<SavedQuery[]>(SAVED_QUERIES_KEY);
     const [monacoHotKey, setMonacoHotKey] = React.useState<ValueOf<
         typeof MONACO_HOT_KEY_ACTIONS
     > | null>(null);
@@ -257,15 +260,13 @@ function QueryEditor(props: QueryEditorProps) {
     }, [monacoHotKey]);
 
     const editorDidMount = (editor: Monaco.editor.IStandaloneCodeEditor, monaco: typeof Monaco) => {
+        const keybindings = getKeyBindings(monaco);
         editorRef.current = editor;
         editor.focus();
         editor.addAction({
             id: 'sendQuery',
             label: i18n('action.send-query'),
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-            ],
+            keybindings: [keybindings.sendQuery],
             // A precondition for this action.
             precondition: undefined,
             // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
@@ -288,10 +289,7 @@ function QueryEditor(props: QueryEditorProps) {
         editor.addAction({
             id: 'sendSelectedQuery',
             label: i18n('action.send-selected-query'),
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.Enter,
-            ],
+            keybindings: [keybindings.sendSelectedQuery],
             precondition: 'canSendSelectedText',
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 1,
@@ -301,10 +299,7 @@ function QueryEditor(props: QueryEditorProps) {
         editor.addAction({
             id: 'previous-query',
             label: i18n('action.previous-query'),
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.UpArrow,
-            ],
+            keybindings: [keybindings.selectPreviousQuery],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 2,
             run: () => {
@@ -314,16 +309,21 @@ function QueryEditor(props: QueryEditorProps) {
         editor.addAction({
             id: 'next-query',
             label: i18n('action.next-query'),
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.DownArrow,
-            ],
+            keybindings: [keybindings.selectNextQuery],
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 3,
             run: () => {
                 props.goToNextQuery();
             },
         });
+        editor.addAction({
+            id: 'save-query',
+            label: i18n('action.save-query'),
+            keybindings: [keybindings.saveQuery],
+            run: () => {
+                setQueryAction('save');
+            },
+        });
     };
 
     const onChange = (newValue: string) => {
@@ -341,32 +341,13 @@ function QueryEditor(props: QueryEditorProps) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.clear);
     };
 
-    const onSaveQueryHandler = (queryName: string) => {
-        const {input} = executeQuery;
-
-        const queryIndex = savedQueries.findIndex(
-            (el) => el.name.toLowerCase() === queryName.toLowerCase(),
-        );
-        const newSavedQueries = [...savedQueries];
-        const newQuery = {name: queryName, body: input};
-        if (queryIndex === -1) {
-            newSavedQueries.push(newQuery);
-        } else {
-            newSavedQueries[queryIndex] = newQuery;
-        }
-
-        setSavedQueries(newSavedQueries);
-    };
-
     const renderControls = () => {
         return (
             <QueryEditorControls
                 onRunButtonClick={handleSendExecuteClick}
                 runIsLoading={executeQueryResult.isLoading}
                 onExplainButtonClick={handleGetExplainQueryClick}
                 explainIsLoading={explainQueryResult.isLoading}
-                onSaveQueryClick={onSaveQueryHandler}
-                savedQueries={savedQueries}
                 disabled={!executeQuery.input}
                 onUpdateQueryMode={setQueryMode}
                 queryMode={queryMode}
@@ -424,6 +405,7 @@ function QueryEditor(props: QueryEditorProps) {
                     />
                 </div>
             </SplitPane>
+            <SaveQueryDialog />
         </div>
     );
 }
@@ -441,6 +423,7 @@ const mapDispatchToProps = {
     goToNextQuery,
     setShowPreview,
     setTenantPath,
+    setQueryAction,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(QueryEditor);

src/containers/Tenant/Query/QueryEditor/keybindings.ts

@@ -0,0 +1,17 @@
+import type Monaco from 'monaco-editor';
+
+export function getKeyBindings(monaco: typeof Monaco) {
+    const {KeyMod, KeyCode} = monaco;
+
+    const ctrlKey = KeyMod.CtrlCmd;
+
+    /* eslint-disable no-bitwise */
+    return {
+        sendQuery: ctrlKey | KeyCode.Enter,
+        sendSelectedQuery: ctrlKey | KeyMod.Shift | monaco.KeyCode.Enter,
+        selectPreviousQuery: ctrlKey | KeyCode.UpArrow,
+        selectNextQuery: ctrlKey | KeyCode.DownArrow,
+        saveQuery: ctrlKey | KeyCode.KeyS,
+        saveSelectedQuery: ctrlKey | KeyMod.Shift | KeyCode.KeyS,
+    };
+}

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

@@ -8,7 +8,7 @@ import {LabelWithPopover} from '../../../../components/LabelWithPopover';
 import type {QueryAction, QueryMode} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
 import {QUERY_MODES, QUERY_MODES_TITLES} from '../../../../utils/query';
-import SaveQuery from '../SaveQuery/SaveQuery';
+import {SaveQuery} from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 
 import './QueryEditorControls.scss';
@@ -46,8 +46,6 @@ interface QueryEditorControlsProps {
     runIsLoading: boolean;
     onExplainButtonClick: (mode?: QueryMode) => void;
     explainIsLoading: boolean;
-    onSaveQueryClick: (queryName: string) => void;
-    savedQueries: unknown;
     disabled: boolean;
     onUpdateQueryMode: (mode: QueryMode) => void;
     queryMode: QueryMode;
@@ -59,8 +57,6 @@ export const QueryEditorControls = ({
     runIsLoading,
     onExplainButtonClick,
     explainIsLoading,
-    onSaveQueryClick,
-    savedQueries,
     disabled,
     onUpdateQueryMode,
     queryMode,
@@ -132,11 +128,7 @@ export const QueryEditorControls = ({
                     />
                 </div>
             </div>
-            <SaveQuery
-                savedQueries={savedQueries}
-                onSaveQuery={onSaveQueryClick}
-                saveButtonDisabled={disabled}
-            />
+            <SaveQuery isSaveButtonDisabled={disabled} />
         </div>
     );
 };