Skip to content

Commit 992cd24

Browse files
egor-zalenskiegor-zalenski
committed
#RI-5033 - Refactor key details version 2
1 parent e928062 commit 992cd24

Some content is hidden

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

55 files changed

+3323
-2902
lines changed

‎redisinsight/ui/src/pages/browser/modules/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { KeyDetails } from './key-details'
22
export { KeyDetailsHeader } from './key-details-header'
3+
export type { KeyDetailsHeaderProps } from './key-details-header'

‎redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { render, screen, fireEvent, mockedStore, cleanup } from 'uiSrc/utils/tes
55
import { stringDataSelector } from 'uiSrc/slices/browser/string'
66
import { KeyTypes } from 'uiSrc/constants'
77
import { deleteSelectedKey } from 'uiSrc/slices/browser/keys'
8-
import { Props, KeyDetailsHeader } from './KeyDetailsHeader'
8+
import { KeyDetailsHeaderProps, KeyDetailsHeader } from './KeyDetailsHeader'
99

10-
const mockedProps = mock<Props>()
10+
const mockedProps = mock<KeyDetailsHeaderProps>()
1111

1212
const KEY_INPUT_TEST_ID = 'edit-key-input'
1313
const KEY_BTN_TEST_ID = 'edit-key-btn'

‎redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ import { HIDE_LAST_REFRESH } from './constants'
3939

4040
import styles from './styles.module.scss'
4141

42-
export interface Props {
42+
export interface KeyDetailsHeaderProps {
4343
keyType: KeyTypes | ModulesKeyTypes
44-
onClose: (key: RedisResponseBuffer) => void
44+
onCloseKey: (key: RedisResponseBuffer) => void
4545
onRemoveKey: () => void
4646
onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer, onFailure?: () => void) => void
4747
onAddItem?: () => void
@@ -56,14 +56,14 @@ const KeyDetailsHeader = ({
5656
isFullScreen,
5757
arePanelsCollapsed,
5858
onToggleFullScreen = () => {},
59-
onClose,
59+
onCloseKey,
6060
onRemoveKey,
6161
onEditKey,
6262
keyType,
6363
onAddItem = () => {},
6464
onEditItem = () => {},
6565
onRemoveItem = () => {},
66-
}: Props) => {
66+
}: KeyDetailsHeaderProps) => {
6767
const { loading, lastRefreshTime } = useSelector(selectedKeySelector)
6868
const {
6969
type,
@@ -158,7 +158,7 @@ const KeyDetailsHeader = ({
158158
color="primary"
159159
aria-label="Close key"
160160
className={styles.closeBtn}
161-
onClick={() => onClose(keyProp)}
161+
onClick={() => onCloseKey(keyProp)}
162162
data-testid="close-key-btn"
163163
/>
164164
</EuiToolTip>

‎redisinsight/ui/src/pages/browser/modules/key-details-header/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export { KeyDetailsHeader } from './KeyDetailsHeader'
1+
export { KeyDetailsHeader } from './KeyDetailsHeader'
2+
export type { KeyDetailsHeaderProps } from './KeyDetailsHeader'

‎redisinsight/ui/src/pages/browser/modules/key-details/KeyDetails.tsx‎

Lines changed: 32 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React, { useEffect } from 'react'
22
import { isNull, isUndefined } from 'lodash'
33
import { useDispatch, useSelector } from 'react-redux'
44
import { useParams } from 'react-router-dom'
@@ -10,17 +10,13 @@ import {
1010
selectedKeyDataSelector,
1111
selectedKeySelector,
1212
} from 'uiSrc/slices/browser/keys'
13-
import { KeyTypes, STREAM_ADD_GROUP_VIEW_TYPES } from 'uiSrc/constants'
13+
import { KeyTypes } from 'uiSrc/constants'
1414

1515
import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
1616
import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
1717
import { Nullable } from 'uiSrc/utils'
18-
import { KeyDetailsHeader } from 'uiSrc/pages/browser/modules'
19-
import { streamSelector } from 'uiSrc/slices/browser/stream'
2018
import { NoKeySelected } from './components/no-key-selected'
2119
import { DynamicTypeDetails } from './components/dynamic-type-details'
22-
import { AddItemsPanel } from './components/add-items-panel'
23-
import { RemoveListElements } from './components/key-details-remove-items'
2420

2521
import styles from './styles.module.scss'
2622

@@ -39,8 +35,6 @@ export interface Props {
3935
const KeyDetails = (props: Props) => {
4036
const {
4137
onCloseKey,
42-
onEditKey,
43-
onRemoveKey,
4438
keyProp,
4539
totalKeys,
4640
keysLastRefreshTime,
@@ -50,15 +44,10 @@ const KeyDetails = (props: Props) => {
5044
const { viewType } = useSelector(keysSelector)
5145
const { loading, error = '', data } = useSelector(selectedKeySelector)
5246
const isKeySelected = !isNull(useSelector(selectedKeyDataSelector))
53-
const { viewType: streamViewType } = useSelector(streamSelector)
5447
const { type: keyType, name: keyName, length: keyLength } = useSelector(selectedKeyDataSelector) ?? {
5548
type: KeyTypes.String,
5649
}
5750

58-
const [isAddItemPanelOpen, setIsAddItemPanelOpen] = useState<boolean>(false)
59-
const [isRemoveItemPanelOpen, setIsRemoveItemPanelOpen] = useState<boolean>(false)
60-
const [editItem, setEditItem] = useState<boolean>(false)
61-
6251
const dispatch = useDispatch()
6352

6453
useEffect(() => {
@@ -87,48 +76,32 @@ const KeyDetails = (props: Props) => {
8776
}
8877
}, [keyName])
8978

90-
const openAddItemPanel = () => {
91-
setIsRemoveItemPanelOpen(false)
92-
setIsAddItemPanelOpen(true)
93-
if (!STREAM_ADD_GROUP_VIEW_TYPES.includes(streamViewType)) {
94-
sendEventTelemetry({
95-
event: getBasedOnViewTypeEvent(
96-
viewType,
97-
TelemetryEvent.BROWSER_KEY_ADD_VALUE_CLICKED,
98-
TelemetryEvent.TREE_VIEW_KEY_ADD_VALUE_CLICKED
99-
),
100-
eventData: {
101-
databaseId: instanceId,
102-
keyType
103-
}
104-
})
105-
}
79+
const onCloseAddItemPanel = () => {
80+
sendEventTelemetry({
81+
event: getBasedOnViewTypeEvent(
82+
viewType,
83+
TelemetryEvent.BROWSER_KEY_ADD_VALUE_CANCELLED,
84+
TelemetryEvent.TREE_VIEW_KEY_ADD_VALUE_CANCELLED,
85+
),
86+
eventData: {
87+
databaseId: instanceId,
88+
keyType,
89+
}
90+
})
10691
}
10792

108-
const openRemoveItemPanel = () => {
109-
setIsAddItemPanelOpen(false)
110-
setIsRemoveItemPanelOpen(true)
111-
}
112-
113-
const closeAddItemPanel = (isCancelled?: boolean) => {
114-
if (isCancelled && isAddItemPanelOpen && !STREAM_ADD_GROUP_VIEW_TYPES.includes(streamViewType)) {
115-
sendEventTelemetry({
116-
event: getBasedOnViewTypeEvent(
117-
viewType,
118-
TelemetryEvent.BROWSER_KEY_ADD_VALUE_CANCELLED,
119-
TelemetryEvent.TREE_VIEW_KEY_ADD_VALUE_CANCELLED,
120-
),
121-
eventData: {
122-
databaseId: instanceId,
123-
keyType,
124-
}
125-
})
126-
}
127-
setIsAddItemPanelOpen(false)
128-
}
129-
130-
const closeRemoveItemPanel = () => {
131-
setIsRemoveItemPanelOpen(false)
93+
const onOpenAddItemPanel = () => {
94+
sendEventTelemetry({
95+
event: getBasedOnViewTypeEvent(
96+
viewType,
97+
TelemetryEvent.BROWSER_KEY_ADD_VALUE_CLICKED,
98+
TelemetryEvent.TREE_VIEW_KEY_ADD_VALUE_CLICKED
99+
),
100+
eventData: {
101+
databaseId: instanceId,
102+
keyType,
103+
}
104+
})
132105
}
133106

134107
return (
@@ -143,47 +116,12 @@ const KeyDetails = (props: Props) => {
143116
onClosePanel={onCloseKey}
144117
/>
145118
) : (
146-
<div className="fluid flex-column relative">
147-
<KeyDetailsHeader
148-
{...props}
149-
key="key-details-header"
150-
keyType={keyType}
151-
onAddItem={openAddItemPanel}
152-
onRemoveItem={openRemoveItemPanel}
153-
onEditItem={() => setEditItem(!editItem)}
154-
onRemoveKey={onRemoveKey}
155-
onClose={onCloseKey}
156-
onEditKey={onEditKey}
157-
/>
158-
<div className="key-details-body" key="key-details-body">
159-
{!loading && (
160-
<div className="flex-column" style={{ flex: '1', height: '100%' }}>
161-
<DynamicTypeDetails
162-
selectedKeyType={keyType}
163-
isAddItemPanelOpen={isAddItemPanelOpen}
164-
onRemoveKey={onRemoveKey}
165-
editItem={editItem}
166-
setEditItem={setEditItem}
167-
isRemoveItemPanelOpen={isRemoveItemPanelOpen}
168-
/>
169-
</div>
170-
)}
171-
{isAddItemPanelOpen && (
172-
<AddItemsPanel
173-
selectedKeyType={keyType}
174-
streamViewType={streamViewType}
175-
closeAddItemPanel={closeAddItemPanel}
176-
/>
177-
)}
178-
{isRemoveItemPanelOpen && (
179-
<div className={cx('formFooterBar', styles.contentActive)}>
180-
{keyType === KeyTypes.List && (
181-
<RemoveListElements onCancel={closeRemoveItemPanel} onRemoveKey={onRemoveKey} />
182-
)}
183-
</div>
184-
)}
185-
</div>
186-
</div>
119+
<DynamicTypeDetails
120+
{...props}
121+
keyType={keyType}
122+
onOpenAddItemPanel={onOpenAddItemPanel}
123+
onCloseAddItemPanel={onCloseAddItemPanel}
124+
/>
187125
)}
188126
</div>
189127
</div>

‎redisinsight/ui/src/pages/browser/modules/key-details/components/add-items-panel/AddItemsPanel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import styles from './styles.module.scss'
1515

1616
export interface Props {
1717
selectedKeyType: KeyTypes | ModulesKeyTypes
18-
streamViewType: StreamViewType
18+
streamViewType?: StreamViewType
1919
closeAddItemPanel: (isCancelled?: boolean) => void
2020
}
2121

@@ -45,7 +45,7 @@ const AddItemsPanel = (props: Props) => {
4545
{streamViewType === StreamViewType.Data && (
4646
<AddStreamEntries onCancel={closeAddItemPanel} />
4747
)}
48-
{STREAM_ADD_GROUP_VIEW_TYPES.includes(streamViewType) && (
48+
{STREAM_ADD_GROUP_VIEW_TYPES.includes(streamViewType!) && (
4949
<AddStreamGroup onCancel={closeAddItemPanel} />
5050
)}
5151
</>

‎redisinsight/ui/src/pages/browser/modules/key-details/components/dynamic-type-details/DynamicTypeDetails.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ describe('DynamicTypeDetails', () => {
2727
(type: KeyTypes, testId: string) => {
2828
const { queryByTestId } = render(<DynamicTypeDetails
2929
{...instance(mockedProps)}
30-
selectedKeyType={type}
30+
keyType={type}
3131
/>)
3232
expect(queryByTestId(testId)).toBeInTheDocument()
3333
})

‎redisinsight/ui/src/pages/browser/modules/key-details/components/dynamic-type-details/DynamicTypeDetails.tsx‎

Lines changed: 20 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,32 @@
11
import React from 'react'
2-
import { useDispatch } from 'react-redux'
32
import { KeyTypes, MODULES_KEY_TYPES_NAMES, ModulesKeyTypes } from 'uiSrc/constants'
4-
import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
5-
import { IFetchKeyArgs } from 'uiSrc/constants/prop-types/keys'
6-
import { refreshKey } from 'uiSrc/slices/browser/keys'
7-
import ZSetDetails from '../zset-details/ZSetDetails'
8-
import SetDetails from '../set-details/SetDetails'
9-
import StringDetails from '../string-details/StringDetails'
10-
import HashDetails from '../hash-details/HashDetails'
11-
import ListDetails from '../list-details/ListDetails'
12-
import RejsonDetailsWrapper from '../rejson-details/RejsonDetailsWrapper'
13-
import StreamDetailsWrapper from '../stream-details'
3+
import { KeyDetailsHeaderProps } from 'uiSrc/pages/browser/modules'
144
import ModulesTypeDetails from '../modules-type-details/ModulesTypeDetails'
155
import UnsupportedTypeDetails from '../unsupported-type-details/UnsupportedTypeDetails'
16-
17-
export interface Props {
18-
selectedKeyType: KeyTypes | ModulesKeyTypes
19-
isAddItemPanelOpen: boolean
20-
isRemoveItemPanelOpen: boolean
21-
editItem: boolean
22-
onRemoveKey: ()=> void
23-
setEditItem: (isEdit: boolean) => void
6+
import { RejsonDetailsWrapper } from '../rejson-details'
7+
import { StringDetails } from '../string-details'
8+
import { ZSetDetails } from '../zset-details'
9+
import { SetDetails } from '../set-details'
10+
import { HashDetails } from '../hash-details'
11+
import { ListDetails } from '../list-details'
12+
import { StreamDetails } from '../stream-details'
13+
14+
export interface Props extends KeyDetailsHeaderProps {
15+
onOpenAddItemPanel: () => void
16+
onCloseAddItemPanel: () => void
2417
}
2518

2619
const DynamicTypeDetails = (props: Props) => {
27-
const {
28-
selectedKeyType,
29-
isAddItemPanelOpen,
30-
onRemoveKey,
31-
isRemoveItemPanelOpen,
32-
editItem,
33-
setEditItem,
34-
} = props
35-
36-
const dispatch = useDispatch()
37-
38-
const handleRefreshKey = (key: RedisResponseBuffer, type: KeyTypes | ModulesKeyTypes, args: IFetchKeyArgs) => {
39-
dispatch(refreshKey(key, type, args))
40-
}
20+
const { keyType: selectedKeyType } = props
4121

4222
const TypeDetails: any = {
43-
[KeyTypes.ZSet]: <ZSetDetails isFooterOpen={isAddItemPanelOpen} onRemoveKey={onRemoveKey} />,
44-
[KeyTypes.Set]: <SetDetails isFooterOpen={isAddItemPanelOpen} onRemoveKey={onRemoveKey} />,
45-
[KeyTypes.String]: (
46-
<StringDetails
47-
isEditItem={editItem}
48-
setIsEdit={(isEdit) => setEditItem(isEdit)}
49-
onRefresh={handleRefreshKey}
50-
/>
51-
),
52-
[KeyTypes.Hash]: <HashDetails isFooterOpen={isAddItemPanelOpen} onRemoveKey={onRemoveKey} />,
53-
[KeyTypes.List]: <ListDetails isFooterOpen={isAddItemPanelOpen || isRemoveItemPanelOpen} />,
54-
[KeyTypes.ReJSON]: <RejsonDetailsWrapper />,
55-
[KeyTypes.Stream]: <StreamDetailsWrapper isFooterOpen={isAddItemPanelOpen} />,
23+
[KeyTypes.ZSet]: <ZSetDetails {...props} />,
24+
[KeyTypes.Set]: <SetDetails {...props} />,
25+
[KeyTypes.String]: <StringDetails {...props} />,
26+
[KeyTypes.Hash]: <HashDetails {...props} />,
27+
[KeyTypes.List]: <ListDetails {...props} />,
28+
[KeyTypes.ReJSON]: <RejsonDetailsWrapper {...props} />,
29+
[KeyTypes.Stream]: <StreamDetails {...props} />,
5630
}
5731

5832
// Supported key type

0 commit comments

Comments
 (0)