Skip to content

Commit 209df57

Browse files
artemmufazalovartemmufazalov
committed
feat: add connect to DB dialog
1 parent ae8aa6d commit 209df57

File tree

15 files changed

+631
-35
lines changed

15 files changed

+631
-35
lines changed

‎src/components/ConnectToDB/ConnectToDB.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@use '../../styles/mixins.scss';
2+
3+
.ydb-connect-to-db {
4+
&__dialog-tabs {
5+
margin-top: var(--g-spacing-4);
6+
}
7+
8+
&__docs {
9+
margin-top: var(--g-spacing-4);
10+
}
11+
12+
&__syntax-highlighter-wrapper {
13+
position: relative;
14+
z-index: 0;
15+
16+
height: 270px;
17+
}
18+
19+
&__sticky-container {
20+
z-index: 1;
21+
top: 52px;
22+
@include mixins.sticky-top();
23+
}
24+
25+
&__snippet-copy {
26+
position: absolute;
27+
top: 13px;
28+
right: 14px;
29+
}
30+
}

‎src/components/ConnectToDB/ConnectToDBDialog.tsx

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

‎src/components/ConnectToDB/ConnectToDBSyntaxHighlighter.tsx

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

‎src/components/ConnectToDB/getDocsLink.ts

Lines changed: 34 additions & 0 deletions
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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"header": "Connection string",
3+
"connection-info-message": "Use the following string to connect to you 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

Lines changed: 7 additions & 0 deletions
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});

‎src/components/ConnectToDB/shared.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {cn} from '../../utils/cn';
2+
3+
export const b = cn('ydb-connect-to-db');

0 commit comments

Comments
 (0)