diff --git a/src/components/ConnectToDB/ConnectToDB.scss b/src/components/ConnectToDB/ConnectToDB.scss
new file mode 100644
index 000000000..2029ec812
--- /dev/null
+++ b/src/components/ConnectToDB/ConnectToDB.scss
@@ -0,0 +1,13 @@
+.ydb-connect-to-db {
+ &__dialog-tabs {
+ margin-top: var(--g-spacing-4);
+ }
+
+ &__docs {
+ margin-top: var(--g-spacing-4);
+ }
+
+ &__snippet-container {
+ height: 270px;
+ }
+}
diff --git a/src/components/ConnectToDB/ConnectToDBDialog.tsx b/src/components/ConnectToDB/ConnectToDBDialog.tsx
new file mode 100644
index 000000000..b2c0fc783
--- /dev/null
+++ b/src/components/ConnectToDB/ConnectToDBDialog.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+
+import NiceModal from '@ebay/nice-modal-react';
+import {Dialog, Tabs} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+
+import {ConnectToDBSyntaxHighlighterLazy} from './ConnectToDBSyntaxHighlighter/lazy';
+import {getDocsLink} from './getDocsLink';
+import i18n from './i18n';
+import {getSnippetCode} from './snippets';
+import type {SnippetLanguage, SnippetParams} from './types';
+
+import './ConnectToDB.scss';
+
+const b = cn('ydb-connect-to-db');
+
+const connectionTabs: {id: SnippetLanguage; title: string}[] = [
+ {id: 'bash', title: 'Bash'},
+ {id: 'cpp', title: 'C++'},
+ {id: 'csharp', title: 'C# (.NET)'},
+ {id: 'go', title: 'Go'},
+ {id: 'java', title: 'Java'},
+ {id: 'javascript', title: 'Node JS'},
+ {id: 'php', title: 'PHP'},
+ {id: 'python', title: 'Python'},
+];
+
+interface ConnectToDBDialogProps extends SnippetParams {
+ open: boolean;
+ onClose: VoidFunction;
+}
+
+function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialogProps) {
+ const [activeTab, setActiveTab] = React.useState<SnippetLanguage>('bash');
+
+ const snippet = getSnippetCode(activeTab, {database, endpoint});
+ const docsLink = getDocsLink(activeTab);
+
+ return (
+ <Dialog open={open} hasCloseButton={true} onClose={onClose} size="l">
+ <Dialog.Header caption={i18n('header')} />
+ <Dialog.Body>
+ <div>{i18n('connection-info-message')}</div>
+ <Tabs
+ size="m"
+ allowNotSelected={false}
+ activeTab={activeTab}
+ items={connectionTabs}
+ onSelectTab={(tab) => setActiveTab(tab as SnippetLanguage)}
+ className={b('dialog-tabs')}
+ />
+ <div className={b('snippet-container')}>
+ <ConnectToDBSyntaxHighlighterLazy language={activeTab} text={snippet} />
+ </div>
+ {docsLink ? (
+ <LinkWithIcon
+ className={b('docs')}
+ title={i18n('documentation')}
+ url={docsLink}
+ />
+ ) : null}
+ </Dialog.Body>
+ <Dialog.Footer onClickButtonCancel={onClose} textButtonCancel={i18n('close')} />
+ </Dialog>
+ );
+}
+
+const ConnectToDBDialogNiceModal = NiceModal.create((props: SnippetParams) => {
+ const modal = NiceModal.useModal();
+
+ const handleClose = () => {
+ modal.hide();
+ modal.remove();
+ };
+
+ return (
+ <ConnectToDBDialog
+ {...props}
+ onClose={() => {
+ modal.resolve(false);
+ handleClose();
+ }}
+ open={modal.visible}
+ />
+ );
+});
+
+const CONNECT_TO_DB_DIALOG = 'connect-to-db-dialog';
+
+NiceModal.register(CONNECT_TO_DB_DIALOG, ConnectToDBDialogNiceModal);
+
+export async function getConnectToDBDialog(params: SnippetParams): Promise<boolean> {
+ return await NiceModal.show(CONNECT_TO_DB_DIALOG, {
+ id: CONNECT_TO_DB_DIALOG,
+ ...params,
+ });
+}
diff --git a/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.scss b/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.scss
new file mode 100644
index 000000000..1520d7541
--- /dev/null
+++ b/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.scss
@@ -0,0 +1,22 @@
+@use '../../../styles/mixins.scss';
+
+.ydb-connect-to-db-syntax-highlighter {
+ &__wrapper {
+ position: relative;
+ z-index: 0;
+
+ height: 100%;
+ }
+
+ &__sticky-container {
+ z-index: 1;
+ top: 52px;
+ @include mixins.sticky-top();
+ }
+
+ &__copy {
+ position: absolute;
+ top: 13px;
+ right: 14px;
+ }
+}
diff --git a/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.tsx b/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.tsx
new file mode 100644
index 000000000..ebc4db80d
--- /dev/null
+++ b/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.tsx
@@ -0,0 +1,82 @@
+import {ClipboardButton, useThemeValue} from '@gravity-ui/uikit';
+import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter';
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import cpp from 'react-syntax-highlighter/dist/esm/languages/prism/cpp';
+import csharp from 'react-syntax-highlighter/dist/esm/languages/prism/csharp';
+import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
+import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import php from 'react-syntax-highlighter/dist/esm/languages/prism/php';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import {vscDarkPlus} from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import {cn} from '../../../utils/cn';
+import {dark, light} from '../../YqlHighlighter/yql';
+import i18n from '../i18n';
+import type {SnippetLanguage} from '../types';
+
+import './ConnectToDBSyntaxHighlighter.scss';
+
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('cpp', cpp);
+SyntaxHighlighter.registerLanguage('csharp', csharp);
+SyntaxHighlighter.registerLanguage('go', go);
+SyntaxHighlighter.registerLanguage('java', java);
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('php', php);
+SyntaxHighlighter.registerLanguage('python', python);
+
+type ConnectToDBSyntaxHighlighterProps = {
+ text: string;
+ language: SnippetLanguage;
+ className?: string;
+};
+const darkTheme: Record<string, React.CSSProperties> = {
+ ...dark,
+ 'pre[class*="language-"]': {
+ ...dark['pre[class*="language-"]'],
+ background: vscDarkPlus['pre[class*="language-"]'].background,
+ scrollbarColor: `var(--g-color-scroll-handle) transparent`,
+ },
+ 'code[class*="language-"]': {
+ ...dark['code[class*="language-"]'],
+ whiteSpace: 'pre',
+ },
+};
+
+const lightTheme: Record<string, React.CSSProperties> = {
+ ...light,
+ 'pre[class*="language-"]': {
+ ...light['pre[class*="language-"]'],
+ background: 'var(--g-color-base-misc-light)',
+ scrollbarColor: `var(--g-color-scroll-handle) transparent`,
+ },
+ 'code[class*="language-"]': {
+ ...light['code[class*="language-"]'],
+ whiteSpace: 'pre',
+ },
+};
+
+const b = cn('ydb-connect-to-db-syntax-highlighter');
+
+export function ConnectToDBSyntaxHighlighter({text, language}: ConnectToDBSyntaxHighlighterProps) {
+ const themeValue = useThemeValue();
+ const isDark = themeValue === 'dark' || themeValue === 'dark-hc';
+
+ return (
+ <div className={b('wrapper')}>
+ <div className={b('sticky-container')}>
+ <ClipboardButton view="flat-secondary" size="s" className={b('copy')} text={text}>
+ {i18n('copy')}
+ </ClipboardButton>
+ </div>
+ <SyntaxHighlighter
+ language={language}
+ style={isDark ? darkTheme : lightTheme}
+ customStyle={{height: '100%'}}
+ >
+ {text}
+ </SyntaxHighlighter>
+ </div>
+ );
+}
diff --git a/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts b/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts
new file mode 100644
index 000000000..b908858c4
--- /dev/null
+++ b/src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts
@@ -0,0 +1,6 @@
+import {lazyComponent} from '../../../utils/lazyComponent';
+
+export const ConnectToDBSyntaxHighlighterLazy = lazyComponent(
+ () => import('./ConnectToDBSyntaxHighlighter'),
+ 'ConnectToDBSyntaxHighlighter',
+);
diff --git a/src/components/ConnectToDB/getDocsLink.ts b/src/components/ConnectToDB/getDocsLink.ts
new file mode 100644
index 000000000..62baaab4d
--- /dev/null
+++ b/src/components/ConnectToDB/getDocsLink.ts
@@ -0,0 +1,34 @@
+import i18n from './i18n';
+import type {SnippetLanguage} from './types';
+
+export function getDocsLink(snippetLang: SnippetLanguage) {
+ switch (snippetLang) {
+ case 'bash': {
+ return i18n('docs_bash');
+ }
+ case 'cpp': {
+ return i18n('docs_cpp');
+ }
+ case 'csharp': {
+ return i18n('docs_dotnet');
+ }
+ case 'go': {
+ return i18n('docs_go');
+ }
+ case 'java': {
+ return i18n('docs_java');
+ }
+ case 'javascript': {
+ return i18n('docs_nodejs');
+ }
+ case 'php': {
+ return i18n('docs_php');
+ }
+ case 'python': {
+ return i18n('docs_python');
+ }
+ default: {
+ return undefined;
+ }
+ }
+}
diff --git a/src/components/ConnectToDB/i18n/en.json b/src/components/ConnectToDB/i18n/en.json
new file mode 100644
index 000000000..055261a99
--- /dev/null
+++ b/src/components/ConnectToDB/i18n/en.json
@@ -0,0 +1,18 @@
+{
+ "header": "Connect to the database",
+ "connection-info-message": "Use the following code to connect to the database",
+
+ "documentation": "Documentation",
+
+ "close": "Close",
+ "copy": "Copy",
+
+ "docs_bash": "https://ydb.tech/docs/en/concepts/connect",
+ "docs_cpp": "https://ydb.tech/docs/en/dev/example-app/example-cpp",
+ "docs_dotnet": "https://ydb.tech/docs/en/dev/example-app/example-dotnet",
+ "docs_go": "https://ydb.tech/docs/en/dev/example-app/go",
+ "docs_java": "https://ydb.tech/docs/en/dev/example-app/java",
+ "docs_nodejs": "https://ydb.tech/docs/en/dev/example-app/example-nodejs",
+ "docs_php": "https://ydb.tech/docs/en/dev/example-app/example-php",
+ "docs_python": "https://ydb.tech/docs/en/dev/example-app/python"
+}
diff --git a/src/components/ConnectToDB/i18n/index.ts b/src/components/ConnectToDB/i18n/index.ts
new file mode 100644
index 000000000..1718a7dc4
--- /dev/null
+++ b/src/components/ConnectToDB/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-connect-to-db';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/components/ConnectToDB/snippets.ts b/src/components/ConnectToDB/snippets.ts
new file mode 100644
index 000000000..4ef14ace8
--- /dev/null
+++ b/src/components/ConnectToDB/snippets.ts
@@ -0,0 +1,229 @@
+import type {SnippetLanguage, SnippetParams} from './types';
+
+export function getBashSnippetCode({database, endpoint}: SnippetParams) {
+ return `ydb -e ${endpoint || '<endpoint>'} --token-file ~/my_token
+ -d ${database ?? '/<database>'} table query execute -q 'SELECT "Hello, world!"'`;
+}
+
+export function getCPPSnippetCode({database, endpoint}: SnippetParams) {
+ return `auto connectionParams = TConnectionsParams()
+ .SetEndpoint("${endpoint ?? '<endpoint>'}")
+ .SetDatabase("${database ?? '/<database>'}")
+ .SetAuthToken(GetEnv("YDB_TOKEN"));
+
+TDriver driver(connectionParams);`;
+}
+
+export function getCSharpSnippetCode({database, endpoint}: SnippetParams) {
+ return `var config = new DriverConfig(
+ endpoint: "${endpoint ?? '<endpoint>'}",
+ database: "${database ?? '/<database>'}",
+ credentials: credentialsProvider
+);
+
+using var driver = new Driver(
+ config: config
+);
+
+await driver.Initialize();`;
+}
+
+export function getGoSnippetCode({database, endpoint}: SnippetParams) {
+ return `package main
+
+import (
+ "context"
+ "os"
+
+ "github.com/ydb-platform/ydb-go-sdk/v3"
+ "github.com/ydb-platform/ydb-go-sdk/v3/table"
+)
+
+func main() {
+ ctx, cancel := context.WithCancel(context.Background())
+ defer cancel()
+ db, err := ydb.Open(ctx,
+ "${endpoint ?? '<endpoint>'}${database ?? '/<database>'}",
+ ydb.WithAccessTokenCredentials(os.Getenv("YDB_ACCESS_TOKEN_CREDENTIALS")),
+ )
+ if err != nil {
+ panic(err)
+ }
+
+ defer db.Close(ctx)
+
+ err = db.Table().Do(ctx,
+ func(ctx context.Context, s table.Session) error {
+ _, res, err := s.Execute(
+ ctx,
+ table.TxControl(table.BeginTx(table.WithOnlineReadOnly()), table.CommitTx()),
+ "SELECT 'Hello, world!'",
+ nil,
+ )
+ if err != nil {
+ return err
+ }
+ defer res.Close()
+ var val string
+
+ for res.NextResultSet(ctx) {
+ for res.NextRow() {
+ err = res.Scan(&val)
+ if err != nil {
+ return err
+ }
+ println(val)
+ }
+ }
+ return res.Err()
+ })
+ if err != nil {
+ panic(err)
+ }
+}`;
+}
+
+export function getJavaSnippetCode({database, endpoint}: SnippetParams) {
+ return `package com.example;
+
+import java.io.IOException;
+import java.nio.charset.Charset;
+
+import tech.ydb.core.grpc.GrpcTransport;
+import tech.ydb.table.SessionRetryContext;
+import tech.ydb.table.TableClient;
+import tech.ydb.table.query.DataQueryResult;
+import tech.ydb.table.result.ResultSetReader;
+import tech.ydb.table.transaction.TxControl;
+import tech.ydb.auth.TokenAuthProvider;
+
+public class YDBConnect {
+ public static void main(String[] args) throws IOException {
+ try (GrpcTransport transport = GrpcTransport.forEndpoint(
+ "${endpoint ?? '<endpoint>'}",
+ "${database ?? '/<database>'}")
+ .withAuthProvider(new TokenAuthProvider(System.getenv("YDB_ACCESS_TOKEN_CREDENTIALS")))
+ .build()) {
+ try (TableClient tableClient = TableClient.newClient(transport)
+ .build()) {
+ SessionRetryContext retryCtx = SessionRetryContext.create(tableClient).build();
+ DataQueryResult queryResult = retryCtx.supplyResult(
+ session -> session.executeDataQuery("SELECT 'Hello, world!'", TxControl.serializableRw())
+ ).join().getValue();
+
+ ResultSetReader rsReader = queryResult.getResultSet(0);
+ while (rsReader.next()) {
+ System.out.println(rsReader.getColumn(0).getBytesAsString(Charset.forName("utf8")));
+ }
+ }
+ }
+ }
+}`;
+}
+
+export function getNodeJSSnippetCode({database, endpoint}: SnippetParams) {
+ return `const {Driver, getCredentialsFromEnv, getLogger} = require('ydb-sdk');
+
+const logger = getLogger({level: 'debug'});
+const endpoint = '${endpoint ?? '<endpoint>'}';
+const database = '${database ?? '/<database>'}';
+const authService = getCredentialsFromEnv();
+const driver = new Driver({endpoint, database, authService});
+
+async function run() {
+ if (!await driver.ready(100)) {
+ logger.fatal('Driver has not become ready in 10 seconds!');
+ process.exit(1);
+ }
+
+ await driver.tableClient.withSession(async (session) => {
+ res = await session.executeQuery("SELECT 'Hello, world!'")
+ console.log(res.resultSets[0].rows[0].items[0].bytesValue.toString())
+ return
+ });
+
+ process.exit(0)
+}
+
+run();`;
+}
+
+export function getPHPSnippetCode({database, endpoint}: SnippetParams) {
+ return `<?php
+
+use YdbPlatform\\Ydb\\Ydb;
+
+$config = [
+ // Database path
+ 'database' => '${database ?? '/<database>'}',
+
+ // Database endpoint
+ 'endpoint' => '${endpoint ?? '<endpoint>'}',
+
+ // Auto discovery (dedicated server only)
+ 'discovery' => false,
+
+ // IAM config
+ 'iam_config' => [
+ // 'root_cert_file' => './CA.pem', Root CA file (uncomment for dedicated server only)
+ ],
+
+ 'credentials' => new AccessTokenAuthentication('<token>') // use from reference/ydb-sdk/auth
+];
+
+$ydb = new Ydb($config);`;
+}
+
+export function getPythonSnippetCode({database, endpoint}: SnippetParams) {
+ return `#!/usr/bin/python3
+import ydb
+
+driver_config = ydb.DriverConfig(
+ '${endpoint || '<endpoint>'}', '${database ?? '/<database>'}',
+ credentials=ydb.credentials_from_env_variables(),
+)
+print(driver_config)
+with ydb.Driver(driver_config) as driver:
+ try:
+ driver.wait(10)
+ session = driver.table_client.session().create()
+ with session.transaction() as tx:
+ query = "SELECT 'Hello, world!'"
+ result_set = tx.execute(query)[0]
+ for row in result_set.rows:
+ print(row)
+ except TimeoutError:
+ print("Connect failed to YDB")
+ print("Last reported errors by discovery:")
+ print(driver.discovery_debug_details())`;
+}
+
+export function getSnippetCode(lang: SnippetLanguage, params: SnippetParams) {
+ switch (lang) {
+ case 'cpp': {
+ return getCPPSnippetCode(params);
+ }
+ case 'csharp': {
+ return getCSharpSnippetCode(params);
+ }
+ case 'go': {
+ return getGoSnippetCode(params);
+ }
+ case 'java': {
+ return getJavaSnippetCode(params);
+ }
+ case 'javascript': {
+ return getNodeJSSnippetCode(params);
+ }
+ case 'php': {
+ return getPHPSnippetCode(params);
+ }
+ case 'python': {
+ return getPythonSnippetCode(params);
+ }
+ case 'bash':
+ default: {
+ return getBashSnippetCode(params);
+ }
+ }
+}
diff --git a/src/components/ConnectToDB/types.ts b/src/components/ConnectToDB/types.ts
new file mode 100644
index 000000000..6cdd67dc7
--- /dev/null
+++ b/src/components/ConnectToDB/types.ts
@@ -0,0 +1,14 @@
+export type SnippetLanguage =
+ | 'bash'
+ | 'cpp'
+ | 'csharp'
+ | 'go'
+ | 'java'
+ | 'javascript'
+ | 'php'
+ | 'python';
+
+export interface SnippetParams {
+ database?: string;
+ endpoint?: string;
+}
diff --git a/src/containers/App/Providers.tsx b/src/containers/App/Providers.tsx
index 400d1fd18..b906e88fa 100644
--- a/src/containers/App/Providers.tsx
+++ b/src/containers/App/Providers.tsx
@@ -35,11 +35,9 @@ export function Providers({
<Router history={history}>
<QueryParamProvider adapter={ReactRouter5Adapter}>
<Theme>
- <NiceModal.Provider>
- <ComponentsProvider registry={componentsRegistry}>
- {children}
- </ComponentsProvider>
- </NiceModal.Provider>
+ <ComponentsProvider registry={componentsRegistry}>
+ <NiceModal.Provider>{children}</NiceModal.Provider>
+ </ComponentsProvider>
</Theme>
</QueryParamProvider>
</Router>
diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx
index 6dcf63c7a..aa9e7bdb8 100644
--- a/src/containers/Header/Header.tsx
+++ b/src/containers/Header/Header.tsx
@@ -1,18 +1,22 @@
import React from 'react';
-import {Breadcrumbs} from '@gravity-ui/uikit';
+import {ArrowUpRightFromSquare, PlugConnection} from '@gravity-ui/icons';
+import {Breadcrumbs, Button, Divider, Flex, Icon} from '@gravity-ui/uikit';
+import {useLocation} from 'react-router-dom';
+import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
import {InternalLink} from '../../components/InternalLink';
-import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
import {cn} from '../../utils/cn';
import {DEVELOPER_UI_TITLE} from '../../utils/constants';
import {createDeveloperUIInternalPageHref} from '../../utils/developerUI/developerUI';
import {useTypedSelector} from '../../utils/hooks';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
import type {RawBreadcrumbItem} from './breadcrumbs';
import {getBreadcrumbs} from './breadcrumbs';
+import {headerKeyset} from './i18n';
import './Header.scss';
@@ -28,6 +32,10 @@ function Header({mainPage}: HeaderProps) {
const clusterInfo = useClusterBaseInfo();
+ const database = useDatabaseFromQuery();
+ const location = useLocation();
+ const isDatabasePage = location.pathname === '/tenant';
+
const clusterName = clusterInfo.title || clusterInfo.name;
const breadcrumbItems = React.useMemo(() => {
@@ -52,6 +60,47 @@ function Header({mainPage}: HeaderProps) {
});
}, [clusterName, mainPage, page, pageBreadcrumbsOptions]);
+ const renderRightControls = () => {
+ const elements: React.ReactNode[] = [];
+
+ if (isDatabasePage && database) {
+ elements.push(
+ <Button view={'flat'} onClick={() => getConnectToDBDialog({database})}>
+ <Icon data={PlugConnection} />
+ {headerKeyset('connect')}
+ </Button>,
+ );
+ }
+
+ if (isUserAllowedToMakeChanges) {
+ elements.push(
+ <Button view="flat" href={createDeveloperUIInternalPageHref()} target="_blank">
+ {DEVELOPER_UI_TITLE}
+ <Icon data={ArrowUpRightFromSquare} />
+ </Button>,
+ );
+ }
+
+ if (elements.length) {
+ return (
+ <Flex direction="row" gap={1}>
+ {elements.map((el, index) => {
+ return (
+ <React.Fragment key={index}>
+ {el}
+ {index === elements.length - 1 ? null : (
+ <Divider orientation="vertical" />
+ )}
+ </React.Fragment>
+ );
+ })}
+ </Flex>
+ );
+ }
+
+ return null;
+ };
+
const renderHeader = () => {
return (
<header className={b()}>
@@ -80,12 +129,7 @@ function Header({mainPage}: HeaderProps) {
}}
/>
- {isUserAllowedToMakeChanges ? (
- <LinkWithIcon
- title={DEVELOPER_UI_TITLE}
- url={createDeveloperUIInternalPageHref()}
- />
- ) : null}
+ {renderRightControls()}
</header>
);
};
diff --git a/src/containers/Header/i18n/en.json b/src/containers/Header/i18n/en.json
index c457ae341..2ffec2e21 100644
--- a/src/containers/Header/i18n/en.json
+++ b/src/containers/Header/i18n/en.json
@@ -5,5 +5,7 @@
"breadcrumbs.vDisk": "VDisk",
"breadcrumbs.tablet": "Tablet",
"breadcrumbs.tablets": "Tablets",
- "breadcrumbs.storageGroup": "Storage Group"
+ "breadcrumbs.storageGroup": "Storage Group",
+
+ "connect": "Connect"
}
diff --git a/src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx b/src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx
index 988c1f609..d12151034 100644
--- a/src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx
+++ b/src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx
@@ -5,6 +5,7 @@ import React from 'react';
import {NavigationTree} from 'ydb-ui-components';
+import {getConnectToDBDialog} from '../../../../components/ConnectToDB/ConnectToDBDialog';
import {useCreateDirectoryFeatureAvailable} from '../../../../store/reducers/capabilities/hooks';
import {selectUserInput} from '../../../../store/reducers/query/query';
import {schemaApi} from '../../../../store/reducers/schema/schema';
@@ -25,6 +26,7 @@ import {
import {getActions} from '../../utils/schemaActions';
import {CreateDirectoryDialog} from '../CreateDirectoryDialog/CreateDirectoryDialog';
import {useDispatchTreeKey, useTreeKey} from '../UpdateTreeContext';
+import {isDomain} from '../transformPath';
interface SchemaTreeProps {
rootPath: string;
@@ -50,6 +52,10 @@ export function SchemaTree(props: SchemaTreeProps) {
const setSchemaTreeKey = useDispatchTreeKey();
const schemaTreeKey = useTreeKey();
+ const rootNodeType = isDomain(rootPath, rootType)
+ ? 'database'
+ : mapPathTypeToNavigationTreeType(rootType);
+
const fetchPath = async (path: string) => {
let schemaData: TEvDescribeSchemeResult | undefined;
do {
@@ -122,7 +128,7 @@ export function SchemaTree(props: SchemaTreeProps) {
? handleOpenCreateDirectoryDialog
: undefined,
getConfirmation: input ? getConfirmation : undefined,
-
+ getConnectToDBDialog,
schemaData: actionsSchemaData,
isSchemaDataLoading: isActionsDataFetching,
},
@@ -154,7 +160,7 @@ export function SchemaTree(props: SchemaTreeProps) {
rootState={{
path: rootPath,
name: rootName,
- type: mapPathTypeToNavigationTreeType(rootType),
+ type: rootNodeType,
collapsed: false,
}}
fetchPath={fetchPath}
diff --git a/src/containers/Tenant/i18n/en.json b/src/containers/Tenant/i18n/en.json
index 0cba4a7a9..b36c217d8 100644
--- a/src/containers/Tenant/i18n/en.json
+++ b/src/containers/Tenant/i18n/en.json
@@ -25,6 +25,7 @@
"actions.copied": "The path is copied to the clipboard",
"actions.notCopied": "Couldn’t copy the path",
"actions.copyPath": "Copy path",
+ "actions.connectToDB": "Connect to DB",
"actions.dropIndex": "Drop index",
"actions.openPreview": "Open preview",
"actions.createTable": "Create table...",
diff --git a/src/containers/Tenant/utils/schemaActions.tsx b/src/containers/Tenant/utils/schemaActions.tsx
index 4d97c673a..f7e0adab2 100644
--- a/src/containers/Tenant/utils/schemaActions.tsx
+++ b/src/containers/Tenant/utils/schemaActions.tsx
@@ -1,7 +1,9 @@
+import {Copy, PlugConnection} from '@gravity-ui/icons';
import {Flex, Spin} from '@gravity-ui/uikit';
import copy from 'copy-to-clipboard';
import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
+import type {SnippetParams} from '../../../components/ConnectToDB/types';
import type {AppDispatch} from '../../../store';
import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
@@ -40,6 +42,7 @@ interface ActionsAdditionalParams {
setActivePath: (path: string) => void;
showCreateDirectoryDialog?: (path: string) => void;
getConfirmation?: () => Promise<boolean>;
+ getConnectToDBDialog?: (params: SnippetParams) => Promise<boolean>;
schemaData?: SchemaData[];
isSchemaDataLoading?: boolean;
}
@@ -56,8 +59,13 @@ const bindActions = (
dispatch: AppDispatch,
additionalEffects: ActionsAdditionalParams,
) => {
- const {setActivePath, showCreateDirectoryDialog, getConfirmation, schemaData} =
- additionalEffects;
+ const {
+ setActivePath,
+ showCreateDirectoryDialog,
+ getConfirmation,
+ getConnectToDBDialog,
+ schemaData,
+ } = additionalEffects;
const inputQuery = (tmpl: TemplateFn) => () => {
const applyInsert = () => {
@@ -85,6 +93,7 @@ const bindActions = (
showCreateDirectoryDialog(params.path);
}
: undefined,
+ getConnectToDBDialog: () => getConnectToDBDialog?.({database: params.path}),
createTable: inputQuery(createTableTemplate),
createColumnTable: inputQuery(createColumnTableTemplate),
createAsyncReplication: inputQuery(createAsyncReplicationTemplate),
@@ -152,26 +161,42 @@ export const getActions =
dispatch,
additionalEffects,
);
- const copyItem = {text: i18n('actions.copyPath'), action: actions.copyPath};
+ const copyItem: ActionsSet[0] = {
+ text: i18n('actions.copyPath'),
+ action: actions.copyPath,
+ iconEnd: <Copy />,
+ };
+ const connectToDBItem = {
+ text: i18n('actions.connectToDB'),
+ action: actions.getConnectToDBDialog,
+ iconEnd: <PlugConnection />,
+ };
- const DIR_SET: ActionsSet = [
- [copyItem],
- [
- {text: i18n('actions.createTable'), action: actions.createTable},
- {text: i18n('actions.createColumnTable'), action: actions.createColumnTable},
- {
- text: i18n('actions.createAsyncReplication'),
- action: actions.createAsyncReplication,
- },
- {text: i18n('actions.createTopic'), action: actions.createTopic},
- {text: i18n('actions.createView'), action: actions.createView},
- ],
+ const createEntitiesSet = [
+ {text: i18n('actions.createTable'), action: actions.createTable},
+ {text: i18n('actions.createColumnTable'), action: actions.createColumnTable},
+ {
+ text: i18n('actions.createAsyncReplication'),
+ action: actions.createAsyncReplication,
+ },
+ {text: i18n('actions.createTopic'), action: actions.createTopic},
+ {text: i18n('actions.createView'), action: actions.createView},
];
+
+ const DB_SET: ActionsSet = [[copyItem, connectToDBItem], createEntitiesSet];
+
+ const DIR_SET: ActionsSet = [[copyItem], createEntitiesSet];
+
if (actions.createDirectory) {
- DIR_SET.splice(1, 0, [
- {text: i18n('actions.createDirectory'), action: actions.createDirectory},
- ]);
+ const createDirectoryItem = {
+ text: i18n('actions.createDirectory'),
+ action: actions.createDirectory,
+ };
+
+ DB_SET.splice(1, 0, [createDirectoryItem]);
+ DIR_SET.splice(1, 0, [createDirectoryItem]);
}
+
const ROW_TABLE_SET: ActionsSet = [
[copyItem],
[
@@ -250,7 +275,8 @@ export const getActions =
const nodeTypeToActions: Record<NavigationTreeNodeType, ActionsSet> = {
async_replication: ASYNC_REPLICATION_SET,
- database: DIR_SET,
+ database: DB_SET,
+
directory: DIR_SET,
table: ROW_TABLE_SET,
diff --git a/tests/suites/internalViewer/internalViewer.test.ts b/tests/suites/internalViewer/internalViewer.test.ts
index cd44ac1c5..cd4125c0a 100644
--- a/tests/suites/internalViewer/internalViewer.test.ts
+++ b/tests/suites/internalViewer/internalViewer.test.ts
@@ -3,7 +3,7 @@ import {expect, test} from '@playwright/test';
test.describe('Test InternalViewer', async () => {
test('Test internalViewer header link', async ({page}) => {
page.goto('');
- const link = page.locator('header').locator('a').getByText('Developer UI');
+ const link = page.locator('header').locator('a').filter({hasText: 'Developer UI'});
const href = await link.getAttribute('href');
expect(href).not.toBeNull();