src/containers/Tenant/Query/NewSQL/NewSQL.tsx - main - githubmirror/ydb-embedded-ui

src/containers/Tenant/Query/NewSQL/NewSQL.tsx
292 строки10 KB
Anton Standrik
feat: add explain analyze query action (#4096)
05 авг 2026, 21:29
05 авг 2026, 21:291f24bef
import React from 'react';

import {ChevronDown, Persons} from '@gravity-ui/icons';
import type {DropdownMenuItem} from '@gravity-ui/uikit';
import {Button, DropdownMenu} from '@gravity-ui/uikit';
import {
    AsyncReplicationIcon,
    SecretIcon,
    StreamingQueryIcon,
    TableIcon,
    TopicIcon,
    TransferIcon,
} from 'ydb-ui-components';

import {useMultiTabQueryEditorEnabled} from '../../../../store/reducers/capabilities/hooks';
import {useTypedDispatch} from '../../../../utils/hooks';
import {useSchemaSecretsFeature} from '../../../../utils/hooks/useSchemaSecretsFeature';
import {useTopicsSqlIoOperationsFeature} from '../../../../utils/hooks/useTopicsSqlIoOperationsFeature';
import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
import {insertSnippetToEditor} from '../../../../utils/monaco/insertSnippet';
import {bindActions} from '../../utils/newSQLQueryActions';

import i18n from './i18n';

interface NewSQLProps {
    database: string;
}

export function NewSQL({database}: NewSQLProps) {
    const dispatch = useTypedDispatch();
    const isMultiTabEnabled = useMultiTabQueryEditorEnabled();
    const {topicsSqlIoOperationsEnabled} = useTopicsSqlIoOperationsFeature(database);
    const {schemaSecretsEnabled} = useSchemaSecretsFeature(database);

    const [shouldReturnFocus, setShouldReturnFocus] = React.useState(true);

    const insertTemplate = React.useCallback((input: string) => {
        setShouldReturnFocus(false);
        insertSnippetToEditor(input);
    }, []);

    const insertTemplateWithConfirmation = useChangeInputWithConfirmation(
        insertTemplate,
        isMultiTabEnabled,
    );

    const onTemplateClick = React.useCallback(
        (input: string) => {
            return insertTemplateWithConfirmation(input);
        },
        [insertTemplateWithConfirmation],
    );

    const handleOpenToggle = React.useCallback((open: boolean) => {
        if (open) {
            setShouldReturnFocus(true);
        }
    }, []);

    const actions = bindActions(dispatch, onTemplateClick, isMultiTabEnabled);

    const items: DropdownMenuItem[] = [
        {
            text: i18n('menu.tables'),
            iconStart: <TableIcon />,
            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.delete-rows'),
                    action: actions.deleteRows,
                },
                {
                    text: i18n('action.drop-table'),
                    action: actions.dropTable,
                },
                {
                    text: i18n('action.drop-external-table'),
                    action: actions.dropExternalTable,
                },
                {
                    text: i18n('action.add-index'),
                    action: actions.addTableIndex,
                },
                {
                    text: i18n('action.add-vector-index'),
                    action: actions.addVectorIndex,
                },
                {
                    text: i18n('action.add-fulltext-index'),
                    action: actions.addFulltextIndex,
                },
                {
                    text: i18n('action.add-min-max-index'),
                    action: actions.addMinMaxIndex,
                },
                {
                    text: i18n('action.drop-index'),
                    action: actions.dropTableIndex,
                },
                {
                    text: i18n('action.show-create-table'),
                    action: actions.showCreateTable,
                },
            ],
        },
        {
            text: i18n('menu.topics'),
            iconStart: <TopicIcon />,
            items: [
                {
                    text: i18n('action.create-topic'),
                    action: actions.createTopic,
                },
                ...(topicsSqlIoOperationsEnabled
                    ? [
                          {
                              text: i18n('action.select-topic'),
                              action: actions.selectTopicQuery,
                          },
                      ]
                    : []),
                {
                    text: i18n('action.alter-topic'),
                    action: actions.alterTopic,
                },
                {
                    text: i18n('action.drop-topic'),
                    action: actions.dropTopic,
                },
            ],
        },
        {
            text: i18n('menu.streaming-query'),
            iconStart: <StreamingQueryIcon />,
            items: [
                {
                    text: i18n('action.create-streaming-query'),
                    action: actions.createStreamingQuery,
                },
                {
                    text: i18n('action.alter-streaming-query-settings'),
                    action: actions.alterStreamingQuerySettings,
                },
                {
                    text: i18n('action.drop-streaming-query'),
                    action: actions.dropStreamingQuery,
                },
            ],
        },
        {
            text: i18n('menu.replication'),
            iconStart: <AsyncReplicationIcon />,
            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.transfer'),
            iconStart: <TransferIcon />,
            items: [
                {
                    text: i18n('action.create-transfer'),
                    action: actions.createTransfer,
                },
                {
                    text: i18n('action.alter-transfer'),
                    action: actions.alterTransfer,
                },
                {
                    text: i18n('action.drop-transfer'),
                    action: actions.dropTransfer,
                },
            ],
        },
        ...(schemaSecretsEnabled
            ? [
                  {
                      text: i18n('menu.secrets'),
                      iconStart: <SecretIcon />,
                      items: [
                          {
                              text: i18n('action.create-secret'),
                              action: actions.createSecret,
                          },
                          {
                              text: i18n('action.alter-secret'),
                              action: actions.alterSecret,
                          },
                          {
                              text: i18n('action.drop-secret'),
                              action: actions.dropSecret,
                          },
                      ],
                  },
              ]
            : []),
        {
            text: i18n('menu.capture'),
            iconStart: <TopicIcon />,
            items: [
                {
                    text: i18n('action.create-cdc-stream'),
                    action: actions.createCdcStream,
                },
            ],
        },
        {
            text: i18n('menu.users'),
            iconStart: <Persons />,
            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} qa="new-sql-dropdown-switcher">
                    {i18n('button.new-sql')}
                    <Button.Icon>
                        <ChevronDown />
                    </Button.Icon>
                </Button>
            )}
            onOpenToggle={handleOpenToggle}
            popupProps={{placement: 'top', returnFocus: shouldReturnFocus}}
        />
    );
}