Skip to content

Commit 24cf0cb

Browse files
irinaAbramova-devirinaAbramova-dev
committed
update components
1 parent 0717d70 commit 24cf0cb

File tree

10 files changed

+57
-48
lines changed

10 files changed

+57
-48
lines changed

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/interfaces.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ interface JSONCommonProps {
7070
value: IJSONValue;
7171
cardinality?: number;
7272
selectedKey: string | RedisResponseBuffer;
73-
path: string,
73+
path?: string,
7474
parentPath: string;
7575
leftPadding: string;
7676
handleSubmitJsonUpdateValue: (body: UpdateValueBody) => Promise<void>;

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-array/RejsonArray.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
8181
}
8282

8383
const handleOnEsc = (e: KeyboardEvent, type: string) => {
84-
if (e.code.toLowerCase() === 'escape' || e.keyCode === 27) {
84+
if (e.code?.toLowerCase() === 'escape' || e.keyCode === 27) {
8585
e.stopPropagation()
8686
setError(null)
8787

@@ -123,7 +123,6 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
123123
const onClickSetKVPair = () => {
124124
setAddNewKeyValuePair(!addNewKeyValuePair)
125125
setNewValue('')
126-
setError(null)
127126
}
128127

129128
const onClickAddNewKVPair = () => {
@@ -257,14 +256,13 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
257256
<>{value ? (
258257
<RejsonDynamicTypes
259258
data={value}
259+
parentPath={path}
260260
selectedKey={selectedKey}
261-
onClickRemoveKey={onClickRemoveKey}
262-
handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
263261
shouldRejsonDataBeDownloaded={!downloaded}
262+
onClickRemoveKey={onClickRemoveKey}
264263
onJsonKeyExpandAndCollapse={onJsonKeyExpandAndCollapse}
264+
handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
265265
handleSubmitUpdateValue={handleSubmitUpdateValue}
266-
parentPath={path}
267-
onClickFunc={onClickFunc}
268266
handleFetchVisualisationResults={handleFetchVisualisationResults}
269267
handleAppendRejsonArrayItemAction={handleAppendRejsonArrayItemAction}
270268
handleSetRejsonDataAction={handleSetRejsonDataAction}
@@ -287,6 +285,7 @@ const RejsonArrayComponent = (props: JSONArrayProps) => {
287285
component="form"
288286
className="relative"
289287
onSubmit={(e) => handleAppendArrayFormSubmit(e)}
288+
style={{ display: 'flex' }}
290289
noValidate
291290
>
292291
<EuiFlexItem grow component="span">

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details-actions/edit-entire-item-action/EditEntireItemAction.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const EditEntireItemAction = ({
3333
setError
3434
}: Props) => (
3535
<div className={styles.row}>
36-
<div style={{ width: '100%', padding: '10px 0' }}>
36+
<div className={styles.fullWidthContainer}>
3737
<EuiOutsideClickDetector onOutsideClick={() => {
3838
setError(null)
3939
setEditEntireItem(false)
@@ -51,7 +51,7 @@ const EditEntireItemAction = ({
5151
<EuiFlexItem grow component="span">
5252
<EuiTextArea
5353
isInvalid={!!error}
54-
style={{ height: '150px', width: '100%', maxWidth: 'none' }}
54+
className={styles.fullWidthTextArea}
5555
value={valueOfEntireItem ? valueOfEntireItem.toString() : ''}
5656
placeholder="Enter JSON value"
5757
onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setValueOfEntireItem(event.target.value)}

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details/RejsonDetails.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const RejsonDetails = (props: BaseProps) => {
6767
}
6868

6969
const handleOnEsc = (e: KeyboardEvent) => {
70-
if (e.code.toLowerCase() === 'escape' || e.keyCode === 27) {
70+
if (e.code?.toLowerCase() === 'escape' || e.keyCode === 27) {
7171
e.stopPropagation()
7272
handlerResetAddRootKVPair()
7373
}
@@ -100,8 +100,9 @@ const RejsonDetails = (props: BaseProps) => {
100100
const validateRootKVPair = (): string | null => {
101101
const isObject = shouldRejsonDataBeDownloaded && dataType === 'object'
102102
const isArray = !shouldRejsonDataBeDownloaded && !(data instanceof Array)
103+
const isValidKeyAndValue = isValidKey(newRootKey) && isValidJSON(newRootValue as string)
103104

104-
if ((isObject || isArray) && (!isValidKey(newRootKey) || !isValidJSON(newRootValue as string))) {
105+
if ((isObject || isArray) && !isValidKeyAndValue) {
105106
return JSONErrors.keyCorrectSyntax
106107
}
107108

@@ -147,8 +148,8 @@ const RejsonDetails = (props: BaseProps) => {
147148
const body: IJSONObject = {
148149
operation: 'update',
149150
value: newRootValue,
150-
previous_path: path as string,
151-
new_key: newRootKey as string,
151+
previous_path: path,
152+
new_key: newRootKey,
152153
type: null,
153154
path: null
154155
}
@@ -158,7 +159,7 @@ const RejsonDetails = (props: BaseProps) => {
158159
body.path = '.'
159160
handleAppendRejsonArrayItemAction(selectedKey, '.', newRootValue as string)
160161
} else {
161-
const unescapedKey = JSON.parse(newRootKey as string)
162+
const unescapedKey = JSON.parse(newRootKey)
162163
const updatedPath = unescapedKey.includes('"') ? `['${unescapedKey}']` : `["${unescapedKey}"]`
163164
body.path = updatedPath
164165
handleSetRejsonDataAction(selectedKey, updatedPath, newRootValue as string)
@@ -186,8 +187,8 @@ const RejsonDetails = (props: BaseProps) => {
186187
data={data}
187188
parentPath={parentPath}
188189
selectedKey={selectedKey}
189-
onClickRemoveKey={onClickRemoveKey}
190190
shouldRejsonDataBeDownloaded={shouldRejsonDataBeDownloaded}
191+
onClickRemoveKey={onClickRemoveKey}
191192
onJsonKeyExpandAndCollapse={onJsonKeyExpandAndCollapse}
192193
handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
193194
handleSubmitUpdateValue={handleSubmitUpdateValue}

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-dynamic-types/RejsonDynamicTypes.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import {
77
import RejsonArray from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/rejson-array/RejsonArray'
88
import RejsonObject from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/rejson-object/RejsonObject'
99
import { DynamicTypesProps } from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/interfaces'
10-
import { MIN_LEFT_PADDING_NESTING } from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/constants'
10+
import {
11+
MIN_LEFT_PADDING_NESTING,
12+
MAX_LEFT_PADDING_NESTING
13+
} from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/constants'
1114

1215
const RejsonDynamicTypes = (props: DynamicTypesProps) => {
1316
const {
@@ -26,8 +29,10 @@ const RejsonDynamicTypes = (props: DynamicTypesProps) => {
2629

2730
const countBracketedElements = (input: string) => (input.match(/\]/g) || []).length
2831

29-
const calculateLeftPadding = (parentPath: string) =>
30-
String(MIN_LEFT_PADDING_NESTING + (parentPath ? countBracketedElements(parentPath) * 1.5 : 0))
32+
const calculateLeftPadding = (parentPath: string) => {
33+
const calculatedValue = MIN_LEFT_PADDING_NESTING + (parentPath ? countBracketedElements(parentPath) * 1.5 : 0)
34+
return String(Math.min(calculatedValue, MAX_LEFT_PADDING_NESTING))
35+
}
3136

3237
const renderScalar = (data) =>
3338
(
@@ -99,7 +104,7 @@ const RejsonDynamicTypes = (props: DynamicTypesProps) => {
99104
return renderScalar(data)
100105
}
101106

102-
const renderArrayItem = ([key, value], i: number) => {
107+
const renderArrayItem = (key: string | number, value: any) => {
103108
if (Array.isArray(value)) {
104109
return renderJSONArray({
105110
key,
@@ -116,7 +121,7 @@ const RejsonDynamicTypes = (props: DynamicTypesProps) => {
116121
parentPath
117122
})
118123
}
119-
return renderScalar({ key: key || i, value, parentPath })
124+
return renderScalar({ key, value, parentPath })
120125
}
121126

122127
const renderResult = (data) => {
@@ -128,7 +133,11 @@ const RejsonDynamicTypes = (props: DynamicTypesProps) => {
128133
return data.map(renderRejsonDataBeDownloaded)
129134
}
130135

131-
return Object.entries(data).map(renderArrayItem)
136+
if (Array.isArray(data)) {
137+
return data.map((item, i) => renderArrayItem(i, item))
138+
}
139+
140+
return Object.entries(data).map(([key, value]) => renderArrayItem(key, value))
132141
}
133142

134143
return (

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const RejsonObject = (props: JSONObjectProps) => {
8484
}
8585

8686
const handleOnEsc = (e: KeyboardEvent, type: string) => {
87-
if (e.code.toLowerCase() === 'escape' || e.keyCode === 27) {
87+
if (e.code?.toLowerCase() === 'escape' || e.keyCode === 27) {
8888
e.stopPropagation()
8989
setError(null)
9090

@@ -277,14 +277,13 @@ const RejsonObject = (props: JSONObjectProps) => {
277277
? (
278278
<RejsonDynamicTypes
279279
data={value}
280+
parentPath={path}
280281
selectedKey={selectedKey}
281-
onClickRemoveKey={onClickRemoveKey}
282-
handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
283282
shouldRejsonDataBeDownloaded={!downloaded}
283+
onClickRemoveKey={onClickRemoveKey}
284284
onJsonKeyExpandAndCollapse={onJsonKeyExpandAndCollapse}
285+
handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
285286
handleSubmitUpdateValue={handleSubmitUpdateValue}
286-
parentPath={path}
287-
onClickFunc={onClickFunc}
288287
handleFetchVisualisationResults={handleFetchVisualisationResults}
289288
handleAppendRejsonArrayItemAction={handleAppendRejsonArrayItemAction}
290289
handleSetRejsonDataAction={handleSetRejsonDataAction}

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -86,25 +86,20 @@ const RejsonScalar = (props: JSONScalarProps) => {
8686
<>
8787
<div>
8888
{isBigString ? (
89-
<p
90-
style={{ border: 'None', padding: '0em' }}
91-
className={getClassNameByValue(value)}
92-
>
89+
<p className={getClassNameByValue(value)}>
9390
{`${changedValue}`}
9491
</p>
9592
) : (
9693
<div className={styles.row}>
97-
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
98-
<div style={{ display: 'flex', alignItems: 'flex-start', flexGrow: 1, }}>
99-
<span className="flex-row" style={{ alignItems: 'flex-end' }}>
100-
<span
101-
className={cx(styles.keyName, styles.quoted)}
102-
style={{ paddingLeft: `${leftPadding}em`, }}
103-
>
104-
{keyName}
105-
</span>
106-
<span style={{ paddingLeft: '0.2em' }}>:</span>
94+
<div className={styles.rowContainer}>
95+
<div style={{ display: 'flex', alignItems: 'flex-start', flexGrow: 1 }}>
96+
<span
97+
className={cx(styles.quoted, styles.keyName)}
98+
style={{ paddingLeft: `${leftPadding}em`, }}
99+
>
100+
{keyName}
107101
</span>
102+
<div style={{ paddingLeft: '0.2em', display: 'inline-block' }}>:</div>
108103
{editing ? (
109104
<div className="jsonItemEditor">
110105
<InlineItemEditor

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/styles.module.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@
4242
}
4343
}
4444

45+
.fullWidthContainer {
46+
width: 100%;
47+
padding: 10px 0;
48+
}
49+
4550
.placeholder {
4651
display: flex;
4752
justify-content: center;
@@ -79,7 +84,8 @@
7984
width: 100%;
8085
}
8186

82-
.controls, .controlsBottom {
87+
.controls,
88+
.controlsBottom {
8389
background-color: var(--euiColorLightestShade);
8490
height: 24px !important;
8591
z-index: 2;
@@ -250,3 +256,9 @@
250256
align-items: center;
251257
justify-content: center;
252258
}
259+
260+
.fullWidthTextArea {
261+
height: 150px;
262+
width: 100%;
263+
max-width: none;
264+
}

‎redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/utils/utils.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,8 @@ export function isScalar(x: JSONScalarValue) {
1414
return ['string', 'number', 'boolean'].indexOf(typeof x) !== -1 || x === null
1515
}
1616

17-
export const convertStringToNumberOrKeepString = (str: string) => {
18-
const parsedNumber = parseFloat(str)
19-
return Number.isNaN(parsedNumber) ? str : parsedNumber
20-
}
21-
2217
export const generatePath = (parentPath: string, keyName: string | number) => {
2318
const currentPath = typeof keyName === 'number' ? `${keyName}` : `'${keyName}'`
24-
console.log(parentPath ? `${parentPath}[${currentPath}]` : `[${currentPath}]`)
2519
return parentPath ? `${parentPath}[${currentPath}]` : `[${currentPath}]`
2620
}
2721

‎redisinsight/ui/src/slices/browser/rejson.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ export function appendReJSONArrayItemAction(
270270

271271
// Asynchronous thunk action
272272
export function removeReJSONKeyAction(
273-
key: string,
273+
key: string | RedisResponseBuffer,
274274
path = '.',
275275
jsonKeyName = ''
276276
) {

0 commit comments

Comments
 (0)