ydb-embedded-ui 1.4.1 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,19 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
### [1.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.4.1...v1.4.2) (2022-05-23)
|
4
|
+
|
5
|
+
|
6
|
+
### UI Updates
|
7
|
+
|
8
|
+
* **QueryEditor:** replace warning for query losing with note about how query are saved ([89820ca](https://github.com/ydb-platform/ydb-embedded-ui/commit/89820ca7e2d02f880eb81d484b8947d599798d5f))
|
9
|
+
|
10
|
+
|
11
|
+
### Bug Fixes
|
12
|
+
|
13
|
+
* **QueryEditor:** confirm query deletion with enter ([d3dadbd](https://github.com/ydb-platform/ydb-embedded-ui/commit/d3dadbd0244fead5f41bd98445669c4f5ce23c43))
|
14
|
+
* **QueryEditor:** field autofocus in query save dialog ([9225238](https://github.com/ydb-platform/ydb-embedded-ui/commit/92252384dc68c40191f7898fff9a2c1106b0b2f1))
|
15
|
+
* **QueryEditor:** save query with enter ([5f9c450](https://github.com/ydb-platform/ydb-embedded-ui/commit/5f9c450aedc90f0e162515294a74000c006f9be7))
|
16
|
+
|
3
17
|
### [1.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.4.0...v1.4.1) (2022-05-17)
|
4
18
|
|
5
19
|
|
@@ -1,31 +1,24 @@
|
|
1
|
-
import React, {useState
|
1
|
+
import React, {useState} from 'react';
|
2
2
|
import _ from 'lodash';
|
3
3
|
import cn from 'bem-cn-lite';
|
4
4
|
import {useDispatch, useSelector} from 'react-redux';
|
5
|
-
import {Dialog, DropdownMenu,
|
5
|
+
import {Dialog, DropdownMenu, TextInput, Button} from '@yandex-cloud/uikit';
|
6
6
|
|
7
|
-
import Icon from '../../../../components/Icon/Icon';
|
8
7
|
import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
|
9
8
|
|
10
9
|
import './SaveQuery.scss';
|
11
10
|
|
12
11
|
const b = cn('kv-save-query');
|
13
12
|
|
14
|
-
const EMBEDDED_VERSION_WARNING =
|
15
|
-
'Please be aware: after cookies delete your saved queries will be lost.';
|
16
|
-
|
17
13
|
function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
|
18
14
|
const singleClusterMode = useSelector((state) => state.singleClusterMode);
|
19
15
|
const [isDialogVisible, setIsDialogVisible] = useState(false);
|
20
|
-
const [isEmbeddedWarningVisible, setIsEmbeddedWarningVisible] = useState(false);
|
21
16
|
const [queryName, setQueryName] = useState('');
|
22
17
|
const [validationError, setValidationError] = useState(null);
|
23
18
|
|
24
19
|
const queryNameToEdit = useSelector((state) => state.saveQuery);
|
25
20
|
const dispatch = useDispatch();
|
26
21
|
|
27
|
-
const warningRef = useRef();
|
28
|
-
|
29
22
|
const onSaveQueryClick = () => {
|
30
23
|
setIsDialogVisible(true);
|
31
24
|
dispatch(setQueryNameToEdit(null));
|
@@ -42,13 +35,6 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
|
|
42
35
|
setValidationError(validateQueryName(value));
|
43
36
|
};
|
44
37
|
|
45
|
-
const onEmbeddedWarningOpen = () => {
|
46
|
-
setIsEmbeddedWarningVisible(true);
|
47
|
-
};
|
48
|
-
const onEmbeddedWarningClose = () => {
|
49
|
-
setIsEmbeddedWarningVisible(false);
|
50
|
-
};
|
51
|
-
|
52
38
|
const validateQueryName = (value) => {
|
53
39
|
if (_.some(savedQueries, (q) => q.name.toLowerCase() === value.trim().toLowerCase())) {
|
54
40
|
return 'This name already exists';
|
@@ -57,9 +43,11 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
|
|
57
43
|
};
|
58
44
|
|
59
45
|
const onSaveClick = () => {
|
60
|
-
if (queryName
|
61
|
-
|
46
|
+
if (!queryName || validationError) {
|
47
|
+
return;
|
62
48
|
}
|
49
|
+
|
50
|
+
onSaveQuery(queryName);
|
63
51
|
onCloseDialog();
|
64
52
|
};
|
65
53
|
|
@@ -70,18 +58,38 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
|
|
70
58
|
|
71
59
|
const renderDialog = () => {
|
72
60
|
return (
|
73
|
-
<Dialog
|
61
|
+
<Dialog
|
62
|
+
open={isDialogVisible}
|
63
|
+
hasCloseButton={false}
|
64
|
+
size="s"
|
65
|
+
onClose={onCloseDialog}
|
66
|
+
onEnterKeyDown={onSaveClick}
|
67
|
+
>
|
74
68
|
<Dialog.Header caption="Save query" />
|
75
69
|
<Dialog.Body className={b('dialog-body')}>
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
70
|
+
{singleClusterMode && (
|
71
|
+
<div className={b('dialog-row')}>
|
72
|
+
The query will be saved in your browser
|
73
|
+
</div>
|
74
|
+
)}
|
75
|
+
<div className={b('dialog-row')}>
|
76
|
+
<label
|
77
|
+
htmlFor="queryName"
|
78
|
+
className={b('field-title', 'required')}
|
79
|
+
>
|
80
|
+
Query name
|
81
|
+
</label>
|
82
|
+
<div className={b('control-wrapper')}>
|
83
|
+
<TextInput
|
84
|
+
id="queryName"
|
85
|
+
placeholder="Enter query name"
|
86
|
+
text={queryName}
|
87
|
+
onUpdate={onQueryNameChange}
|
88
|
+
hasClear
|
89
|
+
autoFocus
|
90
|
+
/>
|
91
|
+
<span className={b('error')}>{validationError}</span>
|
92
|
+
</div>
|
85
93
|
</div>
|
86
94
|
</Dialog.Body>
|
87
95
|
<Dialog.Footer
|
@@ -121,36 +129,10 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
|
|
121
129
|
);
|
122
130
|
};
|
123
131
|
|
124
|
-
const renderEmbeddedVersionWarning = () => {
|
125
|
-
return (
|
126
|
-
<React.Fragment>
|
127
|
-
<Popup
|
128
|
-
className={b('embedded-popup')}
|
129
|
-
anchorRef={warningRef}
|
130
|
-
placement={['top']}
|
131
|
-
open={isEmbeddedWarningVisible}
|
132
|
-
hasArrow
|
133
|
-
>
|
134
|
-
{EMBEDDED_VERSION_WARNING}
|
135
|
-
</Popup>
|
136
|
-
<div
|
137
|
-
className={b('embedded-tooltip')}
|
138
|
-
ref={warningRef}
|
139
|
-
onMouseEnter={onEmbeddedWarningOpen}
|
140
|
-
onMouseLeave={onEmbeddedWarningClose}
|
141
|
-
>
|
142
|
-
<Icon name="question" height={18} width={18} viewBox="0 0 24 24" />
|
143
|
-
</div>
|
144
|
-
</React.Fragment>
|
145
|
-
);
|
146
|
-
};
|
147
|
-
|
148
132
|
return (
|
149
133
|
<React.Fragment>
|
150
134
|
{queryNameToEdit ? renderSaveDropdownMenu() : renderSaveButton(onSaveQueryClick)}
|
151
135
|
{isDialogVisible && renderDialog()}
|
152
|
-
|
153
|
-
{singleClusterMode && renderEmbeddedVersionWarning()}
|
154
136
|
</React.Fragment>
|
155
137
|
);
|
156
138
|
}
|
@@ -1,17 +1,19 @@
|
|
1
|
-
@import '../../../../styles/mixins.scss';
|
2
|
-
|
3
1
|
.kv-save-query {
|
4
|
-
&__dialog-
|
2
|
+
&__dialog-row {
|
5
3
|
display: flex;
|
6
4
|
align-items: flex-start;
|
5
|
+
|
6
|
+
& + & {
|
7
|
+
margin-top: var(--yc-text-body-line-height);
|
8
|
+
}
|
7
9
|
}
|
8
10
|
&__field-title {
|
9
11
|
margin-right: 12px;
|
10
12
|
|
11
13
|
font-weight: 500;
|
12
|
-
line-height:
|
14
|
+
line-height: 28px;
|
13
15
|
white-space: nowrap;
|
14
|
-
|
16
|
+
|
15
17
|
&.required {
|
16
18
|
&::after {
|
17
19
|
content: '*';
|
@@ -71,6 +71,7 @@ function SavedQueries({savedQueries, changeUserInput, onDeleteQuery}) {
|
|
71
71
|
hasCloseButton={false}
|
72
72
|
size="s"
|
73
73
|
onClose={onClickCancelDelete}
|
74
|
+
onEnterKeyDown={onConfirmDeleteClick}
|
74
75
|
>
|
75
76
|
<Dialog.Header caption="Delete query" />
|
76
77
|
<Dialog.Body className={b('dialog-body')}>
|