Skip to content

Commit abe059d

Browse files
ksvfsksvfs
committed
feat: update UI
1 parent 1c129c5 commit abe059d

39 files changed

Lines changed: 1007 additions & 1052 deletions

‎src/components/RangeInputPicker/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/containers/Tenant/TableFormDialog/TableFormDialog.scss‎

Lines changed: 149 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,51 @@
11
.ydb-table-form-dialog {
2-
&__modal {
3-
overscroll-behavior: none;
4-
}
2+
max-height: 90vh;
53

64
&__body {
5+
display: flex;
6+
flex: 1 1 auto;
7+
flex-direction: column;
8+
9+
min-height: 0;
710
padding-top: var(--g-spacing-5);
11+
padding-bottom: 0;
812
}
913

1014
&__form {
15+
display: flex;
16+
flex: 1 1 auto;
17+
flex-direction: column;
18+
1119
width: 100%;
20+
min-height: 0;
21+
}
22+
23+
&__scroll-container {
24+
overflow: hidden auto;
25+
overscroll-behavior: none;
26+
flex: 1 1 auto;
27+
28+
min-height: 0;
29+
margin-inline: calc(-1 * var(--_--side-padding));
30+
padding-inline: var(--_--side-padding);
31+
32+
background:
33+
linear-gradient(var(--g-color-base-modal), var(--g-color-base-modal)) bottom / 100% 5px
34+
no-repeat local,
35+
linear-gradient(var(--g-color-line-generic), var(--g-color-line-generic)) bottom / 100%
36+
1px no-repeat scroll;
37+
background-color: var(--g-color-base-modal);
38+
}
39+
40+
&__scroll-content {
41+
padding-bottom: var(--g-spacing-2);
1242
}
1343

1444
&__section + &__section {
1545
margin-top: var(--g-spacing-6);
46+
padding-top: var(--g-spacing-6);
47+
48+
border-top: 1px solid var(--g-color-line-generic);
1649
}
1750

1851
&__section-title {
@@ -42,6 +75,8 @@
4275
padding-top: 7px;
4376

4477
font-weight: 500;
78+
79+
color: var(--g-color-text-secondary);
4580
}
4681

4782
&__label-title {
@@ -56,10 +91,6 @@
5691
max-width: 300px;
5792
}
5893

59-
&__required {
60-
color: var(--g-color-text-danger);
61-
}
62-
6394
&__field-error {
6495
color: var(--g-color-text-danger);
6596
}
@@ -84,8 +115,16 @@
84115
gap: var(--g-spacing-2);
85116
}
86117

87-
&__table-type-info {
88-
max-width: 320px;
118+
&__type-select-row {
119+
display: flex;
120+
align-items: center;
121+
gap: var(--g-spacing-2);
122+
}
123+
124+
&__type-select-control,
125+
&__type-select-control.g-select {
126+
width: 320px;
127+
max-width: 100%;
89128
}
90129

91130
&__special-columns {
@@ -109,14 +148,12 @@
109148
&__columns-head {
110149
display: grid;
111150
align-items: center;
112-
grid-template-columns:
113-
minmax(160px, 1.2fr) minmax(140px, 0.8fr) 105px 145px minmax(160px, 1.2fr)
114-
28px;
115-
gap: var(--g-spacing-3);
151+
grid-template-columns: 180px 180px 100px 100px 170px 28px;
152+
gap: var(--g-spacing-4);
116153

117154
font-weight: 500;
118155

119-
color: var(--g-color-text-secondary);
156+
color: var(--g-color-text-primary);
120157
}
121158

122159
&__columns-head-cell {
@@ -129,18 +166,14 @@
129166

130167
&__columns-table_update &__columns-head,
131168
&__columns-table_update &__columns-row {
132-
grid-template-columns:
133-
minmax(160px, 1.2fr) minmax(140px, 0.8fr) 145px minmax(160px, 1.2fr)
134-
28px;
169+
grid-template-columns: 205px 180px 180px 180px 28px;
135170
}
136171

137172
&__columns-row {
138173
display: grid;
139174
align-items: start;
140-
grid-template-columns:
141-
minmax(160px, 1.2fr) minmax(140px, 0.8fr) 105px 145px minmax(160px, 1.2fr)
142-
28px;
143-
gap: var(--g-spacing-3);
175+
grid-template-columns: 180px 180px 100px 100px 170px 28px;
176+
gap: var(--g-spacing-4);
144177
}
145178

146179
&__columns-row_readonly {
@@ -272,12 +305,63 @@
272305
gap: var(--g-spacing-2);
273306
}
274307

308+
&__split-points-field {
309+
display: flex;
310+
flex-direction: column;
311+
gap: var(--g-spacing-3);
312+
313+
margin-top: var(--g-spacing-4);
314+
}
315+
316+
&__split-points-header {
317+
display: flex;
318+
align-items: center;
319+
gap: var(--g-spacing-1);
320+
}
321+
322+
&__split-points-title {
323+
font-weight: 500;
324+
}
325+
326+
&__split-points-content {
327+
width: 420px;
328+
max-width: 100%;
329+
}
330+
275331
&__split-point-row {
276332
display: flex;
277333
align-items: center;
278334
gap: var(--g-spacing-2);
279335
}
280336

337+
&__split-point-index {
338+
flex: 0 0 auto;
339+
340+
min-width: 20px;
341+
}
342+
343+
&__split-point-display,
344+
&__split-point-display.g-text-input {
345+
flex: 1 1 auto;
346+
347+
width: 100%;
348+
min-width: 0;
349+
max-width: 100%;
350+
}
351+
352+
&__split-point-dialog {
353+
--split-point-dialog-min-width: 460px;
354+
--split-point-dialog-max-width: 720px;
355+
--split-point-column-gap: var(--g-spacing-10);
356+
--split-point-inner-gap: var(--g-spacing-3);
357+
--split-point-input-min-width: 248px;
358+
359+
box-sizing: border-box;
360+
width: fit-content;
361+
min-width: min(var(--split-point-dialog-min-width), calc(100vw - var(--g-spacing-8)));
362+
max-width: min(var(--split-point-dialog-max-width), calc(100vw - var(--g-spacing-8)));
363+
}
364+
281365
&__split-point-body {
282366
display: flex;
283367
flex-direction: column;
@@ -293,38 +377,57 @@
293377
}
294378

295379
&__split-point-fields {
296-
display: flex;
297-
flex-direction: column;
298-
gap: var(--g-spacing-3);
380+
display: grid;
381+
align-items: start;
382+
grid-template-columns:
383+
fit-content(
384+
calc(
385+
var(--split-point-dialog-max-width) - var(--split-point-input-min-width) - var(
386+
--split-point-column-gap
387+
)
388+
)
389+
)
390+
minmax(var(--split-point-input-min-width), 1fr);
391+
gap: var(--g-spacing-3) var(--split-point-column-gap);
392+
393+
width: 100%;
394+
min-width: 0;
395+
max-width: 100%;
299396
}
300397

301398
&__split-point-dialog-row {
302-
display: grid;
303-
align-items: start;
304-
grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
305-
gap: var(--g-spacing-4);
399+
display: contents;
306400
}
307401

308402
&__split-point-meta {
309-
padding-top: 7px;
403+
min-width: 0;
404+
padding-top: 5px;
310405
}
311406

312407
&__split-point-control {
313408
display: flex;
314-
flex-direction: column;
315-
gap: var(--g-spacing-2);
409+
align-items: flex-start;
410+
gap: var(--split-point-inner-gap);
316411

317412
width: 100%;
318413
min-width: 0;
319414
}
320415

321416
&__split-point-toggle {
322417
display: flex;
418+
flex: 0 0 auto;
419+
justify-content: flex-start;
323420
align-items: center;
324421

325422
min-height: 28px;
326423
}
327424

425+
&__split-point-value {
426+
flex: 1 1 auto;
427+
428+
min-width: 0;
429+
}
430+
328431
&__split-point-input,
329432
&__split-point-input.g-text-input,
330433
&__split-point-input.g-text-area {
@@ -339,16 +442,27 @@
339442
align-items: center;
340443
gap: var(--g-spacing-1);
341444

445+
min-width: 0;
446+
overflow-wrap: anywhere;
447+
342448
font-weight: 500;
343449
}
344450

345451
&__split-point-type {
346452
font-weight: 400;
453+
cursor: help;
347454

348455
color: var(--g-color-text-secondary);
349456
}
350457

458+
&__split-point-type-popover {
459+
max-width: 300px;
460+
padding: var(--g-spacing-3);
461+
}
462+
351463
&__not-null-label {
464+
margin-inline-start: var(--g-spacing-1);
465+
352466
cursor: default;
353467
user-select: none;
354468
}
@@ -383,6 +497,10 @@
383497
min-height: 28px;
384498
}
385499

500+
&__columns-type-popup.g-select-popup {
501+
max-height: 350px;
502+
}
503+
386504
&__input-suffix {
387505
margin-right: var(--g-spacing-1);
388506

‎src/containers/Tenant/TableFormDialog/TableFormDialog.tsx‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import type {TEvDescribeSchemeResult} from '../../../types/api/schema/schema';
1818
import {cn} from '../../../utils/cn';
1919
import createToast from '../../../utils/createToast';
2020
import {prepareCommonErrorMessage} from '../../../utils/errors';
21-
import {transformPath} from '../ObjectSummary/transformPath';
2221

2322
import {
2423
TABLE_FORM_DIALOG,
@@ -225,27 +224,23 @@ function TableForm({
225224
<FormProvider {...methods}>
226225
<form onSubmit={handleFormSubmit} className={b('form')}>
227226
<Dialog.Body className={b('body')}>
228-
<GeneralSection
229-
mode={mode}
230-
insidePath={
231-
mode === 'create'
232-
? transformPath(parentPath ?? databaseFullPath, databaseFullPath)
233-
: undefined
234-
}
235-
nameInputRef={nameInputRef}
236-
/>
237-
<YdbColumnsSection
238-
mode={mode}
239-
types={columnTypes}
240-
pkTypes={pkTypes}
241-
keyNullable={keyNullable}
242-
originalInfo={originalInfo}
243-
onRequestTtlColumnDeletion={handleTtlColumnDeletionRequest}
244-
/>
245-
{showIndexes ? <YdbIndexesSection /> : null}
246-
<TTLSection originalInfo={originalInfo} />
247-
{showSettings ? <SettingsSection mode={mode} /> : null}
248-
{showPartitioning ? <PartitioningSection pkTypes={pkTypes} /> : null}
227+
<div className={b('scroll-container')}>
228+
<div className={b('scroll-content')}>
229+
<GeneralSection mode={mode} nameInputRef={nameInputRef} />
230+
<YdbColumnsSection
231+
mode={mode}
232+
types={columnTypes}
233+
pkTypes={pkTypes}
234+
keyNullable={keyNullable}
235+
originalInfo={originalInfo}
236+
onRequestTtlColumnDeletion={handleTtlColumnDeletionRequest}
237+
/>
238+
{showIndexes ? <YdbIndexesSection /> : null}
239+
<TTLSection originalInfo={originalInfo} />
240+
{showSettings ? <SettingsSection mode={mode} /> : null}
241+
{showPartitioning ? <PartitioningSection pkTypes={pkTypes} /> : null}
242+
</div>
243+
</div>
249244
</Dialog.Body>
250245
<Dialog.Footer
251246
textButtonApply={

‎src/containers/Tenant/TableFormDialog/__test__/columnValueValidation.test.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {isValueForTypeValid} from '../columnValueValidation';
2+
3+
describe('columnValueValidation', () => {
4+
test.each([
5+
['Date', '2025-00-01'],
6+
['Date', '2025-01-00'],
7+
['Date32', '2025-00-01'],
8+
['Date32', '2025-01-00'],
9+
['Datetime', '2025-00-01T00:00:00Z'],
10+
['Datetime', '2025-01-00T00:00:00Z'],
11+
['Datetime64', '2025-00-01T00:00:00Z'],
12+
['Datetime64', '2025-01-00T00:00:00Z'],
13+
['Timestamp', '2025-00-01T00:00:00.000001Z'],
14+
['Timestamp', '2025-01-00T00:00:00.000001Z'],
15+
['Timestamp64', '2025-00-01T00:00:00.000001Z'],
16+
['Timestamp64', '2025-01-00T00:00:00.000001Z'],
17+
])('rejects invalid %s values with zero month or day', (type, value) => {
18+
expect(isValueForTypeValid(value, type)).toBe(false);
19+
});
20+
21+
test.each([
22+
['Date', '2025-01-02'],
23+
['Date32', '2025-01-02'],
24+
['Datetime', '2025-01-02T03:04:05Z'],
25+
['Datetime64', '2025-01-02T03:04:05Z'],
26+
['Timestamp', '2025-01-02T03:04:05.000001Z'],
27+
['Timestamp64', '2025-01-02T03:04:05.000001Z'],
28+
])('keeps accepting valid %s values', (type, value) => {
29+
expect(isValueForTypeValid(value, type)).toBe(true);
30+
});
31+
});

0 commit comments

Comments
 (0)