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, useRef} from 'react';
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, Popup, TextInput, Button} from '@yandex-cloud/uikit';
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 && !validationError) {
61
- onSaveQuery(queryName);
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 open={isDialogVisible} hasCloseButton={false} size="s" onClose={onCloseDialog}>
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
- <span className={b('field-title', 'required')}>Query name</span>
77
- <div className={b('control-wrapper')}>
78
- <TextInput
79
- placeholder="Enter query name"
80
- text={queryName}
81
- onUpdate={onQueryNameChange}
82
- hasClear
83
- />
84
- <span className={b('error')}>{validationError}</span>
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-body {
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: 32px;
14
+ line-height: 28px;
13
15
  white-space: nowrap;
14
- @include body2-typography();
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')}>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ydb-embedded-ui",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "files": [
5
5
  "dist"
6
6
  ],