feat: add connect to DB dialog (#1838)

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

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

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

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

src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts

@@ -0,0 +1,6 @@
+import {lazyComponent} from '../../../utils/lazyComponent';
+
+export const ConnectToDBSyntaxHighlighterLazy = lazyComponent(
+    () => import('./ConnectToDBSyntaxHighlighter'),
+    'ConnectToDBSyntaxHighlighter',
+);

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

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"
+}

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