feat: add connect to DB dialog

Author: artemmufazalov

src/components/ConnectToDB/ConnectToDB.scss

@@ -0,0 +1,13 @@
+@use '../../styles/mixins.scss';
+
+.ydb-connect-to-db {
+    &__dialog-body {
+        height: 600px;
+        padding-top: 0px;
+    }
+    &__dialog-tabs {
+        padding-top: 10px;
+
+        @include mixins.sticky-top();
+    }
+}

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import NiceModal from '@ebay/nice-modal-react';
+import {Dialog, Tabs} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+import {lazyComponent} from '../../utils/lazyComponent';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+
+import {getDocsLink} from './documentationLinks';
+import i18n from './i18n';
+import {getSnippetCode} from './snippets';
+import type {SnippetLanguage, SnippetParams} from './types';
+
+import './ConnectToDB.scss';
+
+const ConnectToDBSyntaxHighlighter = lazyComponent(
+    () => import('./ConnectToDBSyntaxHighlighter'),
+    'ConnectToDBSyntaxHighlighter',
+);
+
+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('connect-to-database')} />
+            <Dialog.Body className={b('dialog-body')}>
+                <Tabs
+                    size="l"
+                    allowNotSelected={false}
+                    activeTab={activeTab}
+                    items={connectionTabs}
+                    onSelectTab={(tab) => setActiveTab(tab as SnippetLanguage)}
+                    className={b('dialog-tabs')}
+                />
+                <ConnectToDBSyntaxHighlighter language={activeTab} text={snippet} />
+                {docsLink ? <LinkWithIcon title={i18n('documentation')} url={docsLink} /> : null}
+            </Dialog.Body>
+            <Dialog.Footer onClickButtonCancel={onClose} textButtonCancel={i18n('close')} />
+        </Dialog>
+    );
+}
+
+export 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,
+    });
+}

src/components/ConnectToDB/ConnectToDBSyntaxHighlighter.tsx

@@ -0,0 +1,42 @@
+import {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 as darkTheme,
+    materialLight as lightTheme,
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import type {SnippetLanguage} from './types';
+
+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);
+
+interface ConnectToDBSyntaxHighlighterProps {
+    text: string;
+    language: SnippetLanguage;
+    className?: string;
+}
+
+export function ConnectToDBSyntaxHighlighter({text, language}: ConnectToDBSyntaxHighlighterProps) {
+    const themeValue = useThemeValue();
+    const isDark = themeValue === 'dark' || themeValue === 'dark-hc';
+
+    return (
+        <SyntaxHighlighter language={language} style={isDark ? darkTheme : lightTheme}>
+            {text}
+        </SyntaxHighlighter>
+    );
+}

src/components/ConnectToDB/documentationLinks.ts

@@ -0,0 +1,60 @@
+import {currentLang} from '../../utils/i18n';
+
+import type {SnippetLanguage} from './types';
+
+function getBashDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/concepts/connect`;
+}
+function getCPPDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/dev/example-app/example-cpp`;
+}
+function getCSharpDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/dev/example-app/example-dotnet`;
+}
+function getGoDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/dev/example-app/go`;
+}
+function getJavaDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/dev/example-app/java`;
+}
+function getNodeJSDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/dev/example-app/example-nodejs`;
+}
+function getPHPDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/dev/example-app/example-php`;
+}
+function getPythonDocsLink() {
+    return `https://ydb.tech/docs/${currentLang}/dev/example-app/python`;
+}
+
+export function getDocsLink(snippetLang: SnippetLanguage) {
+    switch (snippetLang) {
+        case 'bash': {
+            return getBashDocsLink();
+        }
+        case 'cpp': {
+            return getCPPDocsLink();
+        }
+        case 'csharp': {
+            return getCSharpDocsLink();
+        }
+        case 'go': {
+            return getGoDocsLink();
+        }
+        case 'java': {
+            return getJavaDocsLink();
+        }
+        case 'javascript': {
+            return getNodeJSDocsLink();
+        }
+        case 'php': {
+            return getPHPDocsLink();
+        }
+        case 'python': {
+            return getPythonDocsLink();
+        }
+        default: {
+            return undefined;
+        }
+    }
+}

src/components/ConnectToDB/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "connect-to-database": "Connect to Database",
+
+  "documentation": "Documentation",
+
+  "close": "Close"
+}

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});