#RI-5033 - Refactor key details version 2

Author: egor-zalenski

redisinsight/ui/src/pages/browser/modules/key-details-header/constants/resolutions.ts renamed to redisinsight/ui/src/constants/browser/keyDetailsHeader.ts

@@ -31,4 +31,5 @@ export * from './serverVersions'
 export * from './customErrorCodes'
 export * from './securityField'
 export * from './redisearch'
+export * from './browser/keyDetailsHeader'
 export { ApiEndpoints, BrowserStorageItem, ApiStatusCode, apiErrors }

redisinsight/ui/src/constants/index.ts

@@ -90,38 +90,6 @@ export type KeyTypesActions = {
   }
 }
 
-export const KEY_TYPES_ACTIONS: KeyTypesActions = Object.freeze({
-  [KeyTypes.Hash]: {
-    addItems: {
-      name: 'Add Fields',
-    },
-  },
-  [KeyTypes.List]: {
-    addItems: {
-      name: 'Add Element',
-    },
-    removeItems: {
-      name: 'Remove Elements',
-    },
-  },
-  [KeyTypes.Set]: {
-    addItems: {
-      name: 'Add Members',
-    },
-  },
-  [KeyTypes.ZSet]: {
-    addItems: {
-      name: 'Add Members',
-    },
-  },
-  [KeyTypes.String]: {
-    editItem: {
-      name: 'Edit Value',
-    },
-  },
-  [KeyTypes.ReJSON]: {}
-})
-
 export const STREAM_ADD_GROUP_VIEW_TYPES = [
   StreamViewType.Groups,
   StreamViewType.Consumers,

redisinsight/ui/src/constants/keys.ts

@@ -14,13 +14,11 @@ import {
 import {
   addHashKey, addKeyStateSelector,
 } from 'uiSrc/slices/browser/keys'
-import {
-  IHashFieldState,
-  INITIAL_HASH_FIELD_STATE
-} from 'uiSrc/pages/browser/modules/key-details/components/key-details-add-items'
+
 import AddItemsActions from 'uiSrc/pages/browser/components/add-items-actions/AddItemsActions'
 
 import { Maybe, stringToBuffer } from 'uiSrc/utils'
+import { IHashFieldState, INITIAL_HASH_FIELD_STATE } from 'uiSrc/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields'
 import { CreateHashWithExpireDto } from 'apiSrc/modules/browser/dto/hash.dto'
 import {
   AddHashFormConfig as config

redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx

@@ -16,10 +16,8 @@ import {
   addSetKey, addKeyStateSelector,
 } from 'uiSrc/slices/browser/keys'
 import AddItemsActions from 'uiSrc/pages/browser/components/add-items-actions/AddItemsActions'
-import {
-  INITIAL_SET_MEMBER_STATE,
-  ISetMemberState
-} from 'uiSrc/pages/browser/modules/key-details/components/key-details-add-items'
+
+import { INITIAL_SET_MEMBER_STATE, ISetMemberState } from 'uiSrc/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers'
 import { CreateSetWithExpireDto } from 'apiSrc/modules/browser/dto/set.dto'
 
 import {

redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx

@@ -10,8 +10,8 @@ import {
 } from '@elastic/eui'
 import { addStreamKey } from 'uiSrc/slices/browser/keys'
 import { entryIdRegex, isRequiredStringsValid, Maybe, stringToBuffer } from 'uiSrc/utils'
-import { StreamEntryFields } from 'uiSrc/pages/browser/modules/key-details/components/key-details-add-items'
 import { AddStreamFormConfig as config } from 'uiSrc/pages/browser/components/add-key/constants/fields-config'
+import { StreamEntryFields } from 'uiSrc/pages/browser/modules/key-details/components/stream-details/add-stream-entity'
 import { CreateStreamDto } from 'apiSrc/modules/browser/dto/stream.dto'
 import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
 

redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx

@@ -17,10 +17,8 @@ import { isNaNConvertedString } from 'uiSrc/utils/numbers'
 import { addZsetKey, addKeyStateSelector } from 'uiSrc/slices/browser/keys'
 
 import AddItemsActions from 'uiSrc/pages/browser/components/add-items-actions/AddItemsActions'
-import {
-  INITIAL_ZSET_MEMBER_STATE,
-  IZsetMemberState
-} from 'uiSrc/pages/browser/modules/key-details/components/key-details-add-items'
+
+import { INITIAL_ZSET_MEMBER_STATE, IZsetMemberState } from 'uiSrc/pages/browser/modules/key-details/components/zset-details/add-zset-members/AddZsetMembers'
 import { CreateZSetWithExpireDto } from 'apiSrc/modules/browser/dto/z-set.dto'
 import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
 import { AddZsetFormConfig as config } from '../constants/fields-config'

redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { mock } from 'ts-mockito'
 import { cloneDeep } from 'lodash'
 import { render, screen, fireEvent, mockedStore, cleanup } from 'uiSrc/utils/test-utils'
-import { stringDataSelector } from 'uiSrc/slices/browser/string'
 import { KeyTypes } from 'uiSrc/constants'
 import { deleteSelectedKey } from 'uiSrc/slices/browser/keys'
 import { KeyDetailsHeaderProps, KeyDetailsHeader } from './KeyDetailsHeader'
@@ -12,7 +11,6 @@ const mockedProps = mock<KeyDetailsHeaderProps>()
 const KEY_INPUT_TEST_ID = 'edit-key-input'
 const KEY_BTN_TEST_ID = 'edit-key-btn'
 const TTL_INPUT_TEST_ID = 'edit-ttl-input'
-const EDIT_VALUE_BTN_TEST_ID = 'edit-key-value-btn'
 const DELETE_KEY_BTN_TEST_ID = 'delete-key-btn'
 const DELETE_KEY_CONFIRM_BTN_TEST_ID = 'delete-key-confirm-btn'
 
@@ -95,38 +93,6 @@ describe('KeyDetailsHeader', () => {
     expect(screen.getByTestId(TTL_INPUT_TEST_ID)).toHaveValue('100')
   })
 
-  it('should be able to change value (long string fully load)', () => {
-    render(
-      <KeyDetailsHeader
-        {...mockedProps}
-        keyType={KeyTypes.String}
-      />
-    )
-
-    const editValueBtn = screen.getByTestId(`${EDIT_VALUE_BTN_TEST_ID}`)
-    expect(editValueBtn).toHaveProperty('disabled', false)
-  })
-
-  it('should not be able to change value (long string not fully load)', () => {
-    const stringDataSelectorMock = jest.fn().mockReturnValue({
-      value: {
-        type: 'Buffer',
-        data: [49, 50, 51],
-      }
-    })
-    stringDataSelector.mockImplementation(stringDataSelectorMock)
-
-    render(
-      <KeyDetailsHeader
-        {...mockedProps}
-        keyType={KeyTypes.String}
-      />
-    )
-
-    const editValueBtn = screen.getByTestId(`${EDIT_VALUE_BTN_TEST_ID}`)
-    expect(editValueBtn).toHaveProperty('disabled', true)
-  })
-
   describe('should call onRefresh', () => {
     test.each(Object.values(KeyTypes))('should call onRefresh for keyType: %s', (keyType) => {
       const component = render(<KeyDetailsHeader {...mockedProps} keyType={keyType} />)

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

@@ -5,12 +5,13 @@ import {
   EuiLoadingContent,
   EuiToolTip,
 } from '@elastic/eui'
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
 import { GroupBadge, AutoRefresh, FullScreen } from 'uiSrc/components'
 import {
+  HIDE_LAST_REFRESH,
   KeyTypes,
   ModulesKeyTypes,
 } from 'uiSrc/constants'
@@ -29,13 +30,12 @@ import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { resetStringValue } from 'uiSrc/slices/browser/string'
+import { Nullable } from 'uiSrc/utils'
 import { KeyDetailsHeaderFormatter } from './components/key-details-header-formatter'
 import { KeyDetailsHeaderName } from './components/key-details-header-name'
 import { KeyDetailsHeaderTTL } from './components/key-details-header-ttl'
-import { KeyDetailsHeaderActions } from './components/key-details-header-actions'
 import { KeyDetailsHeaderDelete } from './components/key-details-header-delete'
 import { KeyDetailsHeaderSizeLength } from './components/key-details-header-size-length'
-import { HIDE_LAST_REFRESH } from './constants'
 
 import styles from './styles.module.scss'
 
@@ -44,12 +44,10 @@ export interface KeyDetailsHeaderProps {
   onCloseKey: (key: RedisResponseBuffer) => void
   onRemoveKey: () => void
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer, onFailure?: () => void) => void
-  onAddItem?: () => void
-  onEditItem?: () => void
-  onRemoveItem?: () => void
   isFullScreen: boolean
   arePanelsCollapsed: boolean
   onToggleFullScreen: () => void
+  Actions: (props: { width: number }) => Nullable<ReactElement>
 }
 
 const KeyDetailsHeader = ({
@@ -60,9 +58,7 @@ const KeyDetailsHeader = ({
   onRemoveKey,
   onEditKey,
   keyType,
-  onAddItem = () => {},
-  onEditItem = () => {},
-  onRemoveItem = () => {},
+  Actions = () => null,
 }: KeyDetailsHeaderProps) => {
   const { loading, lastRefreshTime } = useSelector(selectedKeySelector)
   const {
@@ -190,15 +186,7 @@ const KeyDetailsHeader = ({
                     {Object.values(KeyTypes).includes(keyType as KeyTypes) && (
                       <KeyDetailsHeaderFormatter width={width} />
                     )}
-                    {keyType && (
-                      <KeyDetailsHeaderActions
-                        width={width}
-                        keyType={keyType}
-                        onAddItem={onAddItem}
-                        onEditItem={onEditItem}
-                        onRemoveItem={onRemoveItem}
-                      />
-                    )}
+                    {keyType && <Actions width={width} /> }
                     <KeyDetailsHeaderDelete onDelete={handleDeleteKey} />
                   </div>
                 </EuiFlexItem>