Merge branch 'feature/RIVS-244_Hash_field_expiration' into feature/RIVS-231_Rename_application

Author: egor-zalenski

package.json

@@ -117,7 +117,7 @@
     "watch": "tsc -watch -p ./",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
-    "test:watch": "vitest watch --dir ./src/webviews/src/modules/key-details/components/hash-details HashDetails",
+    "test:watch": "vitest watch --dir ./src/webviews/src",
     "test:watch:ui": "vitest watch --ui --coverage --dir ./src/webviews/src",
     "test:cov": "vitest run --silent --coverage --dir ./src/webviews/src",
     "package:prod": "npx mkdirp release && npx @vscode/vsce package",

src/webviews/src/actions/selectKeyAction.ts

@@ -1,29 +1,31 @@
 import { StorageItem, VscodeMessageAction } from 'uiSrc/constants'
 import { PostMessage } from 'uiSrc/interfaces'
 import { sessionStorageService } from 'uiSrc/services'
-import { fetchKeyInfo, resetZustand, useSelectedKeyStore } from 'uiSrc/store'
+import { fetchKeyInfo, resetZustand, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
 import { TelemetryEvent, isEqualBuffers, sendEventTelemetry } from 'uiSrc/utils'
 
 export const selectKeyAction = (message: PostMessage) => {
   if (message.action !== VscodeMessageAction.SelectKey) {
     return
   }
 
-  const { key, databaseId } = message?.data
+  const { key, database } = message?.data
   const prevKey = useSelectedKeyStore.getState().data?.name
 
   if (isEqualBuffers(key, prevKey)) {
     return
   }
-  sessionStorageService.set(StorageItem.databaseId, databaseId)
+
+  sessionStorageService.set(StorageItem.databaseId, database?.id)
   resetZustand()
 
   fetchKeyInfo({ key }, true, ({ type: keyType, length }) => {
+    useDatabasesStore.getState().setConnectedDatabase(database)
     sendEventTelemetry({
       event: TelemetryEvent.TREE_VIEW_KEY_VALUE_VIEWED,
       eventData: {
         keyType,
-        databaseId,
+        databaseId: database?.id,
         length,
       },
     })

src/webviews/src/constants/database/commandsVersions.ts

@@ -9,6 +9,6 @@ export const CommandsVersions = {
     since: '7.0',
   },
   HASH_FIELD_TTL: {
-    since: '7.4',
+    since: '7.3',
   },
 }

src/webviews/src/interfaces/vscode/api.ts

@@ -16,11 +16,11 @@ export interface ResetSelectedKeyAction {
 export interface SelectKeyAction {
   action: VscodeMessageAction.SelectKey
   data: {
-    key: RedisString,
-    keyString: string,
-    keyType: AllKeyTypes,
-    databaseId: string,
-    displayedKeyType?: string,
+    key: RedisString
+    keyString: string
+    keyType: AllKeyTypes
+    database: Database
+    displayedKeyType?: string
   }
 }
 
@@ -48,7 +48,7 @@ export interface SelectedKeyAction {
   data: {
     key?: RedisString,
     type: SelectedKeyActionType,
-    databaseId: string,
+    database: Database,
     keyType?: KeyTypes,
     newKey?: RedisString,
     keyString?: string

src/webviews/src/modules/add-key/AddKey.tsx

@@ -23,7 +23,7 @@ import styles from './styles.module.scss'
 export const AddKey = () => {
   const loading = useKeysInContext((state) => state.addKeyLoading)
   const keysApi = useKeysApi()
-  const databaseId = useDatabasesStore((state) => state.connectedDatabase?.id)
+  const database = useDatabasesStore((state) => state.connectedDatabase)
 
   useEffect(
     () =>
@@ -59,7 +59,7 @@ export const AddKey = () => {
         keyString: keyName,
         keyType,
         displayedKeyType: getGroupTypeDisplay(keyType),
-        databaseId: databaseId!,
+        database: database!,
         type: SelectedKeyActionType.Added,
       },
     })

src/webviews/src/modules/key-details-header/KeyDetailsHeader.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import { isUndefined } from 'lodash'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { useShallow } from 'zustand/react/shallow'
@@ -27,8 +27,7 @@ export interface KeyDetailsHeaderProps {
   onCloseKey?: (key?: RedisString) => void
   onRemoveKey?: () => void
   onEditKey?: (key: RedisString, newKey: RedisString, onFailure?: () => void) => void
-  Actions?: (props: { width: number }) => Maybe<ReactElement>
-  ActionsBeforeRefresh?: (props: { width: number }) => Maybe<ReactElement>
+  Actions?: (props: { width: number, children: ReactNode }) => Maybe<ReactNode>
 }
 
 const KeyDetailsHeader = ({
@@ -37,7 +36,6 @@ const KeyDetailsHeader = ({
   onEditKey,
   keyType,
   Actions,
-  ActionsBeforeRefresh,
 }: KeyDetailsHeaderProps) => {
   const { data, refreshDisabled, lastRefreshTime } = useSelectedKeyStore(useShallow((state) => ({
     data: state.data,
@@ -87,6 +85,16 @@ const KeyDetailsHeader = ({
     })
   }
 
+  const RefreshButton = () => (
+    <RefreshBtn
+      lastRefreshTime={lastRefreshTime}
+      disabled={refreshDisabled}
+      triggerClassName={styles.actionBtn}
+      onClick={handleRefreshKey}
+      triggerTestid="refresh-key-btn"
+    />
+  )
+
   return (
     <div className={`key-details-header ${styles.container}`} data-testid="key-details-header">
       {/* {loading && (
@@ -109,15 +117,12 @@ const KeyDetailsHeader = ({
               <KeyDetailsHeaderTTL onEditTTL={handleEditTTL} />
               <div className="flex ml-auto">
                 <div className={styles.subtitleActionBtns}>
-                  {!isUndefined(ActionsBeforeRefresh) && <ActionsBeforeRefresh width={width} />}
-                  <RefreshBtn
-                    lastRefreshTime={lastRefreshTime}
-                    disabled={refreshDisabled}
-                    triggerClassName={styles.actionBtn}
-                    onClick={handleRefreshKey}
-                    triggerTestid="refresh-key-btn"
-                  />
-                  {!isUndefined(Actions) && <Actions width={width} />}
+                  {isUndefined(Actions) && <RefreshButton />}
+                  {!isUndefined(Actions) && (
+                    <Actions width={width}>
+                      <RefreshButton />
+                    </Actions>
+                  )}
                   {Object.values(KeyTypes).includes(keyType as KeyTypes) && (
                     <KeyDetailsHeaderFormatter width={width} />
                   )}

src/webviews/src/modules/key-details/components/hash-details/HashDetails.spec.tsx

@@ -26,7 +26,7 @@ describe('HashDetails', () => {
     vi.spyOn(utils, 'sendEventTelemetry');
 
     (vi.spyOn(useDatabases, 'useDatabasesStore') as Mock).mockImplementation(() => ({
-      databaseVersion: '7.4',
+      databaseVersion: '7.3',
     }))
 
     render(<HashDetails {...instance(mockedProps)} />)

src/webviews/src/modules/key-details/components/hash-details/HashDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { PropsWithChildren, useState } from 'react'
 import cx from 'classnames'
 import * as l10n from '@vscode/l10n'
 
@@ -72,21 +72,19 @@ const HashDetails = (props: Props) => {
     })
   }
 
-  const Actions = () => (
-    <AddItemsAction title={l10n.t('Add Fields')} openAddItemPanel={openAddItemPanel} />
-  )
-
-  const ActionsBeforeRefresh = () => (
-    isExpireFieldsAvailable ? (
+  const Actions = ({ children }: PropsWithChildren) => ([
+    isExpireFieldsAvailable && (
       <Checkbox
         checked={showTtl}
         containerClassName="mr-2"
         data-testid="show-ttl-column-checkbox"
         onChange={(e) => handleSelectShow(e.target.checked)}
         labelText={l10n.t('Show TTL per row')}
       />
-    ) : undefined
-  )
+    ),
+    children,
+    <AddItemsAction title={l10n.t('Add Fields')} openAddItemPanel={openAddItemPanel} />,
+  ])
 
   return (
     <div className="fluid flex-column relative">
@@ -95,7 +93,6 @@ const HashDetails = (props: Props) => {
         key="key-details-header"
         keyType={keyType}
         Actions={Actions}
-        ActionsBeforeRefresh={ActionsBeforeRefresh}
       />
       <div className="key-details-body" key="key-details-body">
         {!loading && (

src/webviews/src/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.spec.tsx

@@ -71,8 +71,8 @@ describe('AddHashFields', () => {
     expect(fieldValue).toHaveValue('')
   })
 
-  it('should render ttl input if redis version > 7.4', () => {
-    (vi.spyOn(useDatabases, 'useDatabasesStore') as Mock).mockImplementation(() => '7.4')
+  it('should render ttl input if redis version > 7.3', () => {
+    (vi.spyOn(useDatabases, 'useDatabasesStore') as Mock).mockImplementation(() => '7.3')
 
     render(<AddHashFields {...instance(mockedProps)} />)
     fireEvent.click(screen.getByTestId('add-new-item'))

src/webviews/src/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx

@@ -199,6 +199,12 @@ const HashDetailsTable = (props: Props) => {
 
     updateHashTTLAction(data, false, (keyRemoved: boolean) => {
       keyRemoved && onRemoveKey?.()
+      sendEventTelemetry({
+        event: TelemetryEvent.TREE_VIEW_FIELD_TTL_EDITED,
+        eventData: {
+          databaseId,
+        },
+      })
       handleEditField(rowIndex, false, 'ttl')
     })
   }
@@ -471,10 +477,10 @@ const HashDetailsTable = (props: Props) => {
               {expire === -1 ? l10n.t('No Limit') : (
                 <Tooltip
                   title={l10n.t('Time to Live')}
-                  className="truncate"
+                  position="left center"
                   content={truncateNumberToDuration(expire || 0)}
                 >
-                  <>{expire}</>
+                  <div>{expire}</div>
                 </Tooltip>
               )}
             </div>