Merge pull request #3470 from RedisInsight/fe/feature/RI-5379-hash-fields-ttl

#RI-5379 - hash fields expire

Author: rsergeenko

redisinsight/ui/src/components/virtual-table/styles.module.scss

@@ -183,18 +183,7 @@ $footerHeight: 38px;
 :global(.key-details-table) {
   height: calc(100% - 94px);
   position: relative;
-  &:global(.footerOpened) {
-    :global(.ReactVirtualized__Table__Grid) {
-      padding-bottom: 254px;
-      overflow-y: auto !important;
-    }
-    &:global(.footerOpened--short) {
-      :global(.ReactVirtualized__Table__Grid) {
-        padding-bottom: 134px;
-        overflow-y: auto !important;
-      }
-    }
-  }
+
   :global(.ReactVirtualized__Table__row) {
     font-size: 13px;
     align-items: normal;
@@ -206,6 +195,12 @@ $footerHeight: 38px;
     overflow: visible !important;
     // fix border alignment, need to investigate why this happens
     margin-right: 1px !important;
+
+    &:global(.actions.singleAction) {
+      .tableRowCell {
+        padding: 4px 8px !important;
+      }
+    }
   }
 
   :global(.ReactVirtualized__Table__Grid) {
@@ -246,8 +241,6 @@ $footerHeight: 38px;
 
   :global {
     .value-table-actions {
-      margin-right: 5px;
-
       .editFieldBtn {
         margin-right: 10px;
       }

redisinsight/ui/src/constants/api.ts

@@ -44,6 +44,7 @@ enum ApiEndpoints {
   HASH = 'hash',
   HASH_FIELDS = 'hash/fields',
   HASH_GET_FIELDS = 'hash/get-fields',
+  HASH_TTL = 'hash/ttl',
 
   LIST = 'list',
   LIST_GET_ELEMENTS = 'list/get-elements',

redisinsight/ui/src/constants/commandsVersions.ts

@@ -8,4 +8,7 @@ export const CommandsVersions = {
   SPUBLISH_NOT_SUPPORTED: {
     since: '7.0',
   },
+  HASH_TTL: {
+    since: '7.4'
+  },
 }

redisinsight/ui/src/constants/featureFlags.ts

@@ -4,4 +4,5 @@ export enum FeatureFlags {
   cloudSsoRecommendedSettings = 'cloudSsoRecommendedSettings',
   databaseChat = 'databaseChat',
   documentationChat = 'documentationChat',
+  hashFieldExpiration = 'hashFieldExpiration',
 }

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -235,15 +235,14 @@ const BrowserPage = () => {
     <div className={`browserPage ${styles.container}`}>
       {arePanelsCollapsed && isRightPanelOpen && !isBrowserFullScreen && (
         <EuiButton
-          fill
           color="secondary"
           iconType="arrowLeft"
           size="s"
           onClick={closePanel}
           className={styles.backBtn}
           data-testid="back-right-panel-btn"
         >
-          Browser
+          Back
         </EuiButton>
       )}
       <div className={cx({

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

@@ -20,13 +20,13 @@ import { isContainJSONModule, Maybe, stringToBuffer } from 'uiSrc/utils'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 
 import { ADD_KEY_TYPE_OPTIONS } from './constants/key-type-options'
-import AddKeyHash from './AddKeyHash/AddKeyHash'
-import AddKeyZset from './AddKeyZset/AddKeyZset'
-import AddKeyString from './AddKeyString/AddKeyString'
-import AddKeySet from './AddKeySet/AddKeySet'
-import AddKeyList from './AddKeyList/AddKeyList'
-import AddKeyReJSON from './AddKeyReJSON/AddKeyReJSON'
-import AddKeyStream from './AddKeyStream/AddKeyStream'
+import AddKeyHash from './AddKeyHash'
+import AddKeyZset from './AddKeyZset'
+import AddKeyString from './AddKeyString'
+import AddKeySet from './AddKeySet'
+import AddKeyList from './AddKeyList'
+import AddKeyReJSON from './AddKeyReJSON'
+import AddKeyStream from './AddKeyStream'
 
 import styles from './styles.module.scss'
 
@@ -134,7 +134,7 @@ const AddKey = (props: Props) => {
               </EuiToolTip>
             )}
           </EuiFlexItem>
-          <div className="eui-yScroll">
+          <div className={cx('eui-yScroll', styles.scrollContainer)}>
             <div className={styles.contentFields}>
               <AddKeyCommonFields
                 typeSelected={typeSelected}

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import { instance, mock } from 'ts-mockito'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import AddKeyHash, { Props } from './AddKeyHash'
 
 const mockedProps = mock<Props>()
@@ -32,12 +32,12 @@ describe('AddKeyHash', () => {
 
   it('should render add button', () => {
     render(<AddKeyHash {...instance(mockedProps)} />)
-    expect(screen.getByTestId('add-new-item')).toBeTruthy()
+    expect(screen.getByTestId('add-item')).toBeTruthy()
   })
 
   it('should render one more field name & value inputs after click add item', () => {
     render(<AddKeyHash {...instance(mockedProps)} />)
-    fireEvent.click(screen.getByTestId('add-new-item'))
+    fireEvent.click(screen.getByTestId('add-item'))
 
     expect(screen.getAllByTestId('field-name')).toHaveLength(2)
     expect(screen.getAllByTestId('field-value')).toHaveLength(2)
@@ -55,7 +55,7 @@ describe('AddKeyHash', () => {
       fieldValue,
       { target: { value: 'val' } }
     )
-    fireEvent.click(screen.getByLabelText(/clear item/i))
+    fireEvent.click(screen.getByTestId('remove-item'))
 
     expect(fieldName).toHaveValue('')
     expect(fieldValue).toHaveValue('')