Skip to content

Commit 41b4141

Browse files
artemmufazalovartemmufazalov
committed
feat: add connect to DB dialog
1 parent ae8aa6d commit 41b4141

File tree

17 files changed

+637
-36
lines changed

17 files changed

+637
-36
lines changed

‎src/components/ConnectToDB/ConnectToDB.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.ydb-connect-to-db {
2+
&__dialog-tabs {
3+
margin-top: var(--g-spacing-4);
4+
}
5+
6+
&__docs {
7+
margin-top: var(--g-spacing-4);
8+
}
9+
10+
&__snippet-container {
11+
height: 270px;
12+
}
13+
}

‎src/components/ConnectToDB/ConnectToDBDialog.tsx

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from 'react';
2+
3+
import NiceModal from '@ebay/nice-modal-react';
4+
import {Dialog, Tabs} from '@gravity-ui/uikit';
5+
6+
import {cn} from '../../utils/cn';
7+
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
8+
9+
import {ConnectToDBSyntaxHighlighter} from './ConnectToDBSyntaxHighlighter/lazy';
10+
import {getDocsLink} from './getDocsLink';
11+
import i18n from './i18n';
12+
import {getSnippetCode} from './snippets';
13+
import type {SnippetLanguage, SnippetParams} from './types';
14+
15+
import './ConnectToDB.scss';
16+
17+
const b = cn('ydb-connect-to-db');
18+
19+
const connectionTabs: {id: SnippetLanguage; title: string}[] = [
20+
{id: 'bash', title: 'Bash'},
21+
{id: 'cpp', title: 'C++'},
22+
{id: 'csharp', title: 'C# (.NET)'},
23+
{id: 'go', title: 'Go'},
24+
{id: 'java', title: 'Java'},
25+
{id: 'javascript', title: 'Node JS'},
26+
{id: 'php', title: 'PHP'},
27+
{id: 'python', title: 'Python'},
28+
];
29+
30+
interface ConnectToDBDialogProps extends SnippetParams {
31+
open: boolean;
32+
onClose: VoidFunction;
33+
}
34+
35+
function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialogProps) {
36+
const [activeTab, setActiveTab] = React.useState<SnippetLanguage>('bash');
37+
38+
const snippet = getSnippetCode(activeTab, {database, endpoint});
39+
const docsLink = getDocsLink(activeTab);
40+
41+
return (
42+
<Dialog open={open} hasCloseButton={true} onClose={onClose} size="l">
43+
<Dialog.Header caption={i18n('header')} />
44+
<Dialog.Body>
45+
<div>{i18n('connection-info-message')}</div>
46+
<Tabs
47+
size="m"
48+
allowNotSelected={false}
49+
activeTab={activeTab}
50+
items={connectionTabs}
51+
onSelectTab={(tab) => setActiveTab(tab as SnippetLanguage)}
52+
className={b('dialog-tabs')}
53+
/>
54+
<div className={b('snippet-container')}>
55+
<ConnectToDBSyntaxHighlighter language={activeTab} text={snippet} />
56+
</div>
57+
{docsLink ? (
58+
<LinkWithIcon
59+
className={b('docs')}
60+
title={i18n('documentation')}
61+
url={docsLink}
62+
/>
63+
) : null}
64+
</Dialog.Body>
65+
<Dialog.Footer onClickButtonCancel={onClose} textButtonCancel={i18n('close')} />
66+
</Dialog>
67+
);
68+
}
69+
70+
const ConnectToDBDialogNiceModal = NiceModal.create((props: SnippetParams) => {
71+
const modal = NiceModal.useModal();
72+
73+
const handleClose = () => {
74+
modal.hide();
75+
modal.remove();
76+
};
77+
78+
return (
79+
<ConnectToDBDialog
80+
{...props}
81+
onClose={() => {
82+
modal.resolve(false);
83+
handleClose();
84+
}}
85+
open={modal.visible}
86+
/>
87+
);
88+
});
89+
90+
const CONNECT_TO_DB_DIALOG = 'connect-to-db-dialog';
91+
92+
NiceModal.register(CONNECT_TO_DB_DIALOG, ConnectToDBDialogNiceModal);
93+
94+
export async function getConnectToDBDialog(params: SnippetParams): Promise<boolean> {
95+
return await NiceModal.show(CONNECT_TO_DB_DIALOG, {
96+
id: CONNECT_TO_DB_DIALOG,
97+
...params,
98+
});
99+
}

‎src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.scss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@use '../../../styles/mixins.scss';
2+
3+
.ydb-connect-to-db-syntax-highlighter {
4+
&__wrapper {
5+
position: relative;
6+
z-index: 0;
7+
8+
height: 100%;
9+
}
10+
11+
&__sticky-container {
12+
z-index: 1;
13+
top: 52px;
14+
@include mixins.sticky-top();
15+
}
16+
17+
&__copy {
18+
position: absolute;
19+
top: 13px;
20+
right: 14px;
21+
}
22+
}

‎src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import {ClipboardButton, useThemeValue} from '@gravity-ui/uikit';
2+
import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter';
3+
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
4+
import cpp from 'react-syntax-highlighter/dist/esm/languages/prism/cpp';
5+
import csharp from 'react-syntax-highlighter/dist/esm/languages/prism/csharp';
6+
import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
7+
import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
8+
import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
9+
import php from 'react-syntax-highlighter/dist/esm/languages/prism/php';
10+
import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
11+
import {vscDarkPlus} from 'react-syntax-highlighter/dist/esm/styles/prism';
12+
13+
import {cn} from '../../../utils/cn';
14+
import {dark, light} from '../../YqlHighlighter/yql';
15+
import i18n from '../i18n';
16+
import type {SnippetLanguage} from '../types';
17+
18+
import './ConnectToDBSyntaxHighlighter.scss';
19+
20+
SyntaxHighlighter.registerLanguage('bash', bash);
21+
SyntaxHighlighter.registerLanguage('cpp', cpp);
22+
SyntaxHighlighter.registerLanguage('csharp', csharp);
23+
SyntaxHighlighter.registerLanguage('go', go);
24+
SyntaxHighlighter.registerLanguage('java', java);
25+
SyntaxHighlighter.registerLanguage('javascript', javascript);
26+
SyntaxHighlighter.registerLanguage('php', php);
27+
SyntaxHighlighter.registerLanguage('python', python);
28+
29+
interface ConnectToDBSyntaxHighlighterProps {
30+
text: string;
31+
language: SnippetLanguage;
32+
className?: string;
33+
}
34+
const darkTheme: Record<string, React.CSSProperties> = {
35+
...dark,
36+
'pre[class*="language-"]': {
37+
...dark['pre[class*="language-"]'],
38+
background: vscDarkPlus['pre[class*="language-"]'].background,
39+
scrollbarColor: `var(--g-color-scroll-handle) transparent`,
40+
},
41+
'code[class*="language-"]': {
42+
...dark['code[class*="language-"]'],
43+
whiteSpace: 'pre',
44+
},
45+
};
46+
47+
const lightTheme: Record<string, React.CSSProperties> = {
48+
...light,
49+
'pre[class*="language-"]': {
50+
...light['pre[class*="language-"]'],
51+
background: 'var(--g-color-base-misc-light)',
52+
scrollbarColor: `var(--g-color-scroll-handle) transparent`,
53+
},
54+
'code[class*="language-"]': {
55+
...light['code[class*="language-"]'],
56+
whiteSpace: 'pre',
57+
},
58+
};
59+
60+
const b = cn('ydb-connect-to-db-syntax-highlighter');
61+
62+
export function ConnectToDBSyntaxHighlighter({text, language}: ConnectToDBSyntaxHighlighterProps) {
63+
const themeValue = useThemeValue();
64+
const isDark = themeValue === 'dark' || themeValue === 'dark-hc';
65+
66+
return (
67+
<div className={b('wrapper')}>
68+
<div className={b('sticky-container')}>
69+
<ClipboardButton view="flat-secondary" size="s" className={b('copy')} text={text}>
70+
{i18n('copy')}
71+
</ClipboardButton>
72+
</div>
73+
<SyntaxHighlighter
74+
language={language}
75+
style={isDark ? darkTheme : lightTheme}
76+
customStyle={{height: '100%'}}
77+
>
78+
{text}
79+
</SyntaxHighlighter>
80+
</div>
81+
);
82+
}

‎src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {lazyComponent} from '../../../utils/lazyComponent';
2+
3+
export const ConnectToDBSyntaxHighlighter = lazyComponent(
4+
() => import('./ConnectToDBSyntaxHighlighter'),
5+
'ConnectToDBSyntaxHighlighter',
6+
);

‎src/components/ConnectToDB/getDocsLink.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import i18n from './i18n';
2+
import type {SnippetLanguage} from './types';
3+
4+
export function getDocsLink(snippetLang: SnippetLanguage) {
5+
switch (snippetLang) {
6+
case 'bash': {
7+
return i18n('docs_bash');
8+
}
9+
case 'cpp': {
10+
return i18n('docs_cpp');
11+
}
12+
case 'csharp': {
13+
return i18n('docs_dotnet');
14+
}
15+
case 'go': {
16+
return i18n('docs_go');
17+
}
18+
case 'java': {
19+
return i18n('docs_java');
20+
}
21+
case 'javascript': {
22+
return i18n('docs_nodejs');
23+
}
24+
case 'php': {
25+
return i18n('docs_php');
26+
}
27+
case 'python': {
28+
return i18n('docs_python');
29+
}
30+
default: {
31+
return undefined;
32+
}
33+
}
34+
}

‎src/components/ConnectToDB/i18n/en.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"header": "Connect to the database",
3+
"connection-info-message": "Use the following code to connect to the database",
4+
5+
"documentation": "Documentation",
6+
7+
"close": "Close",
8+
"copy": "Copy",
9+
10+
"docs_bash": "https://ydb.tech/docs/en/concepts/connect",
11+
"docs_cpp": "https://ydb.tech/docs/en/dev/example-app/example-cpp",
12+
"docs_dotnet": "https://ydb.tech/docs/en/dev/example-app/example-dotnet",
13+
"docs_go": "https://ydb.tech/docs/en/dev/example-app/go",
14+
"docs_java": "https://ydb.tech/docs/en/dev/example-app/java",
15+
"docs_nodejs": "https://ydb.tech/docs/en/dev/example-app/example-nodejs",
16+
"docs_php": "https://ydb.tech/docs/en/dev/example-app/example-php",
17+
"docs_python": "https://ydb.tech/docs/en/dev/example-app/python"
18+
}

‎src/components/ConnectToDB/i18n/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {registerKeysets} from '../../../utils/i18n';
2+
3+
import en from './en.json';
4+
5+
const COMPONENT = 'ydb-connect-to-db';
6+
7+
export default registerKeysets(COMPONENT, {en});

0 commit comments

Comments
 (0)