feat: move query templates to a hierarchical menu at query editor (#1327)

Author: astandrik

src/containers/Tenant/Query/NewSQL/NewSQL.tsx

@@ -0,0 +1,151 @@
+import {ChevronDown} from '@gravity-ui/icons';
+import {Button, DropdownMenu} from '@gravity-ui/uikit';
+
+import {useTypedDispatch} from '../../../../utils/hooks';
+import {bindActions} from '../../utils/newSQLQueryActions';
+
+import i18n from './i18n';
+
+export function NewSQL() {
+    const dispatch = useTypedDispatch();
+    const actions = bindActions(dispatch);
+
+    const items = [
+        {
+            text: i18n('menu.tables'),
+            items: [
+                {
+                    text: i18n('action.create-row-table'),
+                    action: actions.createRowTable,
+                },
+                {
+                    text: i18n('action.create-column-table'),
+                    action: actions.createColumnTable,
+                },
+                {
+                    text: i18n('action.create-external-table'),
+                    action: actions.createExternalTable,
+                },
+                {
+                    text: i18n('action.upsert-to-table'),
+                    action: actions.upsertQuery,
+                },
+                {
+                    text: i18n('action.update-table'),
+                    action: actions.updateTable,
+                },
+                {
+                    text: i18n('action.alter-table'),
+                    action: actions.alterTable,
+                },
+                {
+                    text: i18n('action.select-rows'),
+                    action: actions.selectQuery,
+                },
+                {
+                    text: i18n('action.select-from-external-table'),
+                    action: actions.selectQueryFromExternalTable,
+                },
+                {
+                    text: i18n('action.delete-rows'),
+                    action: actions.deleteRows,
+                },
+                {
+                    text: i18n('action.drop-table'),
+                    action: actions.dropTable,
+                },
+                {
+                    text: i18n('action.drop-external-table'),
+                    action: actions.dropExternalTable,
+                },
+            ],
+        },
+        {
+            text: i18n('menu.topics'),
+            items: [
+                {
+                    text: i18n('action.create-topic'),
+                    action: actions.createTopic,
+                },
+                {
+                    text: i18n('action.alter-topic'),
+                    action: actions.alterTopic,
+                },
+                {
+                    text: i18n('action.drop-topic'),
+                    action: actions.dropTopic,
+                },
+            ],
+        },
+        {
+            text: i18n('menu.replication'),
+            items: [
+                {
+                    text: i18n('action.create-async-replication'),
+                    action: actions.createAsyncReplication,
+                },
+                {
+                    text: i18n('action.alter-async-replication'),
+                    action: actions.alterAsyncReplication,
+                },
+                {
+                    text: i18n('action.drop-async-replication'),
+                    action: actions.dropAsyncReplication,
+                },
+            ],
+        },
+        {
+            text: i18n('menu.capture'),
+            items: [
+                {
+                    text: i18n('action.create-cdc-stream'),
+                    action: actions.createCdcStream,
+                },
+            ],
+        },
+        {
+            text: i18n('menu.users'),
+            items: [
+                {
+                    text: i18n('action.create-user'),
+                    action: actions.createUser,
+                },
+                {
+                    text: i18n('action.create-group'),
+                    action: actions.createGroup,
+                },
+                {
+                    text: i18n('action.drop-user'),
+                    action: actions.dropUser,
+                },
+                {
+                    text: i18n('action.drop-group'),
+                    action: actions.dropGroup,
+                },
+                {
+                    text: i18n('action.grant-privilege'),
+                    action: actions.grantPrivilege,
+                },
+                {
+                    text: i18n('action.revoke-privilege'),
+                    action: actions.revokePrivilege,
+                },
+            ],
+        },
+    ];
+
+    return (
+        <DropdownMenu
+            items={items}
+            renderSwitcher={(props) => (
+                <Button {...props}>
+                    {i18n('button.new-sql')}
+                    <Button.Icon>
+                        <ChevronDown />
+                    </Button.Icon>
+                </Button>
+            )}
+            popupProps={{placement: 'top'}}
+        />
+    );
+}

src/containers/Tenant/Query/NewSQL/i18n/en.json

@@ -0,0 +1,32 @@
+{
+  "button.new-sql": "New SQL",
+  "action.create-row-table": "Create row table",
+  "action.create-column-table": "Create column table",
+  "action.create-external-table": "Create external table",
+  "action.upsert-to-table": "Upsert into table",
+  "action.update-table": "Update table",
+  "action.alter-table": "Alter table",
+  "action.select-rows": "Select from a table",
+  "action.select-from-external-table": "Select from external table",
+  "action.delete-rows": "Delete rows",
+  "action.drop-table": "Drop table",
+  "action.drop-external-table": "Drop external table",
+  "menu.tables": "Tables",
+  "menu.topics": "Topics",
+  "menu.capture": "Change data capture",
+  "menu.replication": "Async replication",
+  "menu.users": "Users",
+  "action.create-topic": "Create Topic",
+  "action.drop-topic": "Drop Topic",
+  "action.alter-topic": "Alter Topic",
+  "action.create-cdc-stream": "Create CDC Stream",
+  "action.create-async-replication": "Create async replication",
+  "action.create-user": "Create user",
+  "action.create-group": "Create group",
+  "action.drop-user": "Drop user",
+  "action.drop-group": "Drop group",
+  "action.grant-privilege": "Grant privilege",
+  "action.revoke-privilege": "Revoke privilege",
+  "action.alter-async-replication": "Alter async replication",
+  "action.drop-async-replication": "Drop async replication"
+}

src/containers/Tenant/Query/NewSQL/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-new-sql';
+
+export default registerKeysets(COMPONENT, {en});

src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss

@@ -8,6 +8,7 @@
     min-height: 40px;
     padding: 5px 0px;
 
+    &__right,
     &__left {
         display: flex;
         gap: 12px;

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

@@ -6,6 +6,7 @@ import QuerySettingsDescription from '../../../../components/QuerySettingsDescri
 import type {QueryAction} from '../../../../types/store/query';
 import {cn} from '../../../../utils/cn';
 import {useChangedQuerySettings} from '../../../../utils/hooks/useChangedQuerySettings';
+import {NewSQL} from '../NewSQL/NewSQL';
 import {SaveQuery} from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
 
@@ -107,7 +108,10 @@ export const QueryEditorControls = ({
                 </Button>
                 <SettingsButton onClick={onSettingsButtonClick} runIsLoading={isLoading} />
             </div>
-            <SaveQuery isSaveButtonDisabled={disabled} />
+            <div className={b('right')}>
+                <NewSQL />
+                <SaveQuery isSaveButtonDisabled={disabled} />
+            </div>
         </div>
     );
 };

src/containers/Tenant/utils/newSQLQueryActions.ts

@@ -0,0 +1,62 @@
+import {changeUserInput} from '../../../store/reducers/executeQuery';
+
+import {
+    alterAsyncReplicationTemplate,
+    alterTableTemplate,
+    alterTopicTemplate,
+    createAsyncReplicationTemplate,
+    createCdcStreamTemplate,
+    createColumnTableTemplate,
+    createExternalTableTemplate,
+    createGroupTemplate,
+    createTableTemplate,
+    createTopicTemplate,
+    createUserTemplate,
+    createViewTemplate,
+    deleteRowsTemplate,
+    dropAsyncReplicationTemplate,
+    dropExternalTableTemplate,
+    dropGroupTemplate,
+    dropTableTemplate,
+    dropTopicTemplate,
+    dropUserTemplate,
+    grantPrivilegeTemplate,
+    revokePrivilegeTemplate,
+    selectQueryTemplate,
+    updateTableTemplate,
+    upsertQueryTemplate,
+} from './newSQLQueryTemplates';
+
+export const bindActions = (dispatch: React.Dispatch<any>) => {
+    const inputQuery = (query: () => string) => () => {
+        dispatch(changeUserInput({input: query()}));
+    };
+
+    return {
+        createRowTable: inputQuery(createTableTemplate),
+        createColumnTable: inputQuery(createColumnTableTemplate),
+        createAsyncReplication: inputQuery(createAsyncReplicationTemplate),
+        alterAsyncReplication: inputQuery(alterAsyncReplicationTemplate),
+        dropAsyncReplication: inputQuery(dropAsyncReplicationTemplate),
+        alterTable: inputQuery(alterTableTemplate),
+        selectQuery: inputQuery(selectQueryTemplate),
+        upsertQuery: inputQuery(upsertQueryTemplate),
+        createExternalTable: inputQuery(createExternalTableTemplate),
+        dropExternalTable: inputQuery(dropExternalTableTemplate),
+        selectQueryFromExternalTable: inputQuery(selectQueryTemplate),
+        createTopic: inputQuery(createTopicTemplate),
+        alterTopic: inputQuery(alterTopicTemplate),
+        dropTopic: inputQuery(dropTopicTemplate),
+        createView: inputQuery(createViewTemplate),
+        dropTable: inputQuery(dropTableTemplate),
+        deleteRows: inputQuery(deleteRowsTemplate),
+        updateTable: inputQuery(updateTableTemplate),
+        createUser: inputQuery(createUserTemplate),
+        createGroup: inputQuery(createGroupTemplate),
+        createCdcStream: inputQuery(createCdcStreamTemplate),
+        grantPrivilege: inputQuery(grantPrivilegeTemplate),
+        revokePrivilege: inputQuery(revokePrivilegeTemplate),
+        dropUser: inputQuery(dropUserTemplate),
+        dropGroup: inputQuery(dropGroupTemplate),
+    };
+};