Skip to content

Commit af17216

Browse files
RaubzeugRaubzeug
committed
feat(Configs): add info about full config
1 parent ffb9777 commit af17216

File tree

43 files changed

+620
-231
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+620
-231
lines changed

‎src/components/ClipboardButton/ClipboardButton.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type {ButtonSize, ButtonView} from '@gravity-ui/uikit';
2+
import {ClipboardButton as ClipboardButtonUikit} from '@gravity-ui/uikit';
3+
4+
import i18n from './i18n';
5+
6+
export interface ClipboardButtonProps {
7+
copyText?: string;
8+
withLabel?: boolean | string;
9+
size?: ButtonSize;
10+
view?: ButtonView;
11+
className?: string;
12+
}
13+
14+
export function ClipboardButton({
15+
size,
16+
className,
17+
copyText,
18+
withLabel,
19+
view,
20+
}: ClipboardButtonProps) {
21+
if (!copyText) {
22+
return null;
23+
}
24+
const label = withLabel === false ? null : withLabel || i18n('copy');
25+
26+
return (
27+
<ClipboardButtonUikit view={view} size={size || 'xs'} className={className} text={copyText}>
28+
{label}
29+
</ClipboardButtonUikit>
30+
);
31+
}

‎src/components/SyntaxHighlighter/i18n/en.json‎ renamed to ‎src/components/ClipboardButton/i18n/en.json‎

File renamed without changes.

‎src/components/SyntaxHighlighter/i18n/index.ts‎ renamed to ‎src/components/ClipboardButton/i18n/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import {registerKeysets} from '../../../utils/i18n';
22

33
import en from './en.json';
44

5-
const COMPONENT = 'ydb-syntax-highlighter';
5+
const COMPONENT = 'ydb-clipboard-button';
66

77
export default registerKeysets(COMPONENT, {en});

‎src/components/FixedHeightQuery/FixedHeightQuery.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const FixedHeightQuery = ({
5555
withLabel: false,
5656
size: 'xs',
5757
}
58-
: false
58+
: undefined
5959
}
6060
/>
6161
</div>

‎src/components/JsonViewer/JsonViewer.scss‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
--data-table-row-height: 20px;
55
--toolbar-background-color: var(--g-color-base-background);
66

7-
width: max-content;
7+
width: 100%;
88

99
&__toolbar {
1010
position: sticky;
1111
z-index: 2;
12-
top: 0;
12+
top: var(--ydb-json-viewer-toolbar-top, 0);
1313
left: 0;
1414

15-
padding-bottom: var(--g-spacing-2);
15+
padding-bottom: var(--g-spacing-5);
1616

1717
background-color: var(--toolbar-background-color);
1818
}
@@ -45,8 +45,6 @@
4545
align-content: center;
4646

4747
text-wrap: nowrap;
48-
49-
color: var(--g-color-text-secondary);
5048
}
5149

5250
&__key {
@@ -103,10 +101,6 @@
103101
@include mixins.body-2-typography();
104102
}
105103

106-
&__extra-tools {
107-
margin-left: 1ex;
108-
}
109-
110104
.data-table__head {
111105
display: none;
112106
}

‎src/components/JsonViewer/JsonViewer.tsx‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React from 'react';
22

3+
import {ChevronsCollapseVertical, ChevronsExpandVertical} from '@gravity-ui/icons';
34
import type * as DT100 from '@gravity-ui/react-data-table';
45
import DataTable from '@gravity-ui/react-data-table';
56
import {ActionTooltip, Button, Flex, Icon} from '@gravity-ui/uikit';
67

78
import {CASE_SENSITIVE_JSON_SEARCH} from '../../utils/constants';
89
import {useSetting} from '../../utils/hooks';
10+
import type {ClipboardButtonProps} from '../ClipboardButton/ClipboardButton';
11+
import {ClipboardButton} from '../ClipboardButton/ClipboardButton';
912

1013
import {Cell} from './components/Cell';
1114
import {Filter} from './components/Filter';
@@ -22,9 +25,6 @@ import type {
2225
} from './unipika/flattenUnipika';
2326
import {unipika} from './unipika/unipika';
2427

25-
import ArrowDownToLineIcon from '@gravity-ui/icons/svgs/arrow-down-to-line.svg';
26-
import ArrowUpFromLineIcon from '@gravity-ui/icons/svgs/arrow-up-from-line.svg';
27-
2828
import './JsonViewer.scss';
2929

3030
interface JsonViewerCommonProps {
@@ -35,6 +35,7 @@ interface JsonViewerCommonProps {
3535
collapsedInitially?: boolean;
3636
maxValueWidth?: number;
3737
toolbarClassName?: string;
38+
withClipboardButton?: Omit<ClipboardButtonProps, 'size' | 'view'>;
3839
}
3940

4041
interface JsonViewerProps extends JsonViewerCommonProps {
@@ -118,6 +119,7 @@ function JsonViewerComponent({
118119
collapsedInitially,
119120
maxValueWidth = 100,
120121
toolbarClassName,
122+
withClipboardButton,
121123
}: JsonViewerComponentProps) {
122124
const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
123125
CASE_SENSITIVE_JSON_SEARCH,
@@ -300,19 +302,12 @@ function JsonViewerComponent({
300302

301303
const renderToolbar = () => {
302304
return (
303-
<Flex gap={2} wrap="nowrap" className={block('toolbar', toolbarClassName)}>
304-
<Flex gap={1} wrap="nowrap">
305-
<ActionTooltip title={i18n('action_expand-all')}>
306-
<Button onClick={onExpandAll} view="flat-secondary">
307-
<Icon data={ArrowDownToLineIcon} />
308-
</Button>
309-
</ActionTooltip>
310-
<ActionTooltip title={i18n('action_collapse-all')}>
311-
<Button onClick={onCollapseAll} view="flat-secondary">
312-
<Icon data={ArrowUpFromLineIcon} />
313-
</Button>
314-
</ActionTooltip>
315-
</Flex>
305+
<Flex
306+
gap={2}
307+
wrap="nowrap"
308+
className={block('toolbar', toolbarClassName)}
309+
justifyContent="space-between"
310+
>
316311
{search && (
317312
<Filter
318313
onUpdate={onFilterChange}
@@ -327,7 +322,22 @@ function JsonViewerComponent({
327322
onUpdateCaseSensitive={handleUpdateCaseSensitive}
328323
/>
329324
)}
330-
<span className={block('extra-tools')}>{extraTools}</span>
325+
<Flex gap={2} wrap="nowrap">
326+
<ActionTooltip title={i18n('action_expand-all')} placement="top-start">
327+
<Button onClick={onExpandAll}>
328+
<Icon data={ChevronsExpandVertical} />
329+
</Button>
330+
</ActionTooltip>
331+
<ActionTooltip title={i18n('action_collapse-all')} placement="top-start">
332+
<Button onClick={onCollapseAll}>
333+
<Icon data={ChevronsCollapseVertical} />
334+
</Button>
335+
</ActionTooltip>
336+
{withClipboardButton && (
337+
<ClipboardButton {...withClipboardButton} size="m" view="normal" />
338+
)}
339+
{extraTools}
340+
</Flex>
331341
</Flex>
332342
);
333343
};

‎src/components/JsonViewer/components/Filter.tsx‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function F
3838
const count = matchedRows.length;
3939
const matchPosition = count ? 1 + (matchIndex % count) : 0;
4040
return (
41-
<React.Fragment>
41+
<Flex gap={2} wrap="nowrap">
4242
<TextInput
4343
ref={ref}
4444
className={block('filter')}
@@ -69,28 +69,32 @@ export const Filter = React.forwardRef<HTMLInputElement, FilterProps>(function F
6969
}
7070
/>
7171
<Flex gap={1} wrap="nowrap">
72-
<Button
73-
className={block('match-btn')}
74-
view="flat-secondary"
75-
title={i18n('action_next')}
76-
onClick={onNextMatch}
77-
disabled={!count}
78-
>
79-
<Icon data={ChevronDownIcon} />
80-
</Button>
81-
<Button
82-
className={block('match-btn')}
83-
view="flat-secondary"
84-
title={i18n('action_back')}
85-
onClick={onPrevMatch}
86-
disabled={!count}
87-
>
88-
<Icon data={ChevronUpIcon} />
89-
</Button>
72+
<ActionTooltip title={i18n('action_next')} placement="top-start">
73+
<Button
74+
className={block('match-btn')}
75+
view="flat-secondary"
76+
onClick={onNextMatch}
77+
disabled={!count}
78+
>
79+
<Icon data={ChevronDownIcon} />
80+
</Button>
81+
</ActionTooltip>
82+
<ActionTooltip title={i18n('action_back')} placement="top-start">
83+
<Button
84+
className={block('match-btn')}
85+
view="flat-secondary"
86+
onClick={onPrevMatch}
87+
disabled={!count}
88+
>
89+
<Icon data={ChevronUpIcon} />
90+
</Button>
91+
</ActionTooltip>
9092
</Flex>
91-
<span className={block('match-counter')} title={i18n('description_matched-rows')}>
92-
{matchPosition} / {count || 0}
93-
</span>
94-
</React.Fragment>
93+
{value && (
94+
<span className={block('match-counter')} title={i18n('description_matched-rows')}>
95+
{matchPosition} / {count || 0}
96+
</span>
97+
)}
98+
</Flex>
9599
);
96100
});

‎src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
position: relative;
55
z-index: 0;
66

7-
height: 100%;
7+
height: var(--ydb-syntax-highlighter-height, 100%);
88

99
&__sticky-container {
1010
z-index: 1;

‎src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx‎

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22

3-
import type {ButtonSize} from '@gravity-ui/uikit';
4-
import {ClipboardButton} from '@gravity-ui/uikit';
53
import {nanoid} from '@reduxjs/toolkit';
64
import {PrismLight as ReactSyntaxHighlighter} from 'react-syntax-highlighter';
75

8-
import i18n from './i18n';
6+
import type {ClipboardButtonProps} from '../ClipboardButton/ClipboardButton';
7+
import {ClipboardButton} from '../ClipboardButton/ClipboardButton';
8+
99
import {b} from './shared';
1010
import {useSyntaxHighlighterStyle} from './themes';
1111
import type {Language} from './types';
@@ -24,15 +24,10 @@ async function registerLanguage(lang: Language) {
2424
}
2525
}
2626

27-
interface ClipboardButtonOptions {
27+
interface WithClipboardButtonProp extends ClipboardButtonProps {
2828
alwaysVisible?: boolean;
29-
copyText?: string;
30-
withLabel?: boolean;
31-
size?: ButtonSize;
3229
}
3330

34-
export type WithClipboardButtonProp = ClipboardButtonOptions | boolean;
35-
3631
type YDBSyntaxHighlighterProps = {
3732
text: string;
3833
language: Language;
@@ -60,37 +55,27 @@ export function YDBSyntaxHighlighter({
6055
registerLangAndUpdateKey();
6156
}, [language]);
6257

63-
const clipboardButtonProps =
64-
typeof withClipboardButton === 'object' ? withClipboardButton : undefined;
65-
6658
const renderCopyButton = () => {
67-
if (withClipboardButton) {
68-
return (
69-
<div className={b('sticky-container')} onClick={(e) => e.stopPropagation()}>
70-
<ClipboardButton
71-
view="flat-secondary"
72-
size={clipboardButtonProps?.size || 'xs'}
73-
className={b('copy', {
74-
visible: clipboardButtonProps?.alwaysVisible,
75-
})}
76-
text={clipboardButtonProps?.copyText || text}
77-
>
78-
{clipboardButtonProps?.withLabel === false ? null : i18n('copy')}
79-
</ClipboardButton>
80-
</div>
81-
);
59+
if (!withClipboardButton) {
60+
return null;
8261
}
83-
84-
return null;
62+
const {alwaysVisible, copyText, ...rest} = withClipboardButton;
63+
return (
64+
<div className={b('sticky-container')} onClick={(e) => e.stopPropagation()}>
65+
<ClipboardButton
66+
{...rest}
67+
copyText={copyText || text}
68+
className={b('copy', {
69+
visible: alwaysVisible,
70+
})}
71+
/>
72+
</div>
73+
);
8574
};
8675

8776
let paddingStyles = {};
8877

89-
if (
90-
withClipboardButton &&
91-
typeof withClipboardButton === 'object' &&
92-
withClipboardButton.alwaysVisible
93-
) {
78+
if (withClipboardButton?.alwaysVisible) {
9479
if (withClipboardButton.withLabel) {
9580
paddingStyles = {paddingRight: 80};
9681
} else {

‎src/components/SyntaxHighlighter/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export type Language =
77
| 'javascript'
88
| 'php'
99
| 'python'
10-
| 'yql';
10+
| 'yql'
11+
| 'yaml';

0 commit comments

Comments
 (0)