RI-6371 refactored code, added specs

Author: kchepikava

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx

@@ -6,7 +6,7 @@ import { useHistory, useParams } from 'react-router-dom'
 import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances'
 import { instancesSelector as dbInstancesSelector } from 'uiSrc/slices/instances/instances'
 import Divider from 'uiSrc/components/divider/Divider'
-import { BrowserStorageItem, Pages } from 'uiSrc/constants'
+import { BrowserStorageItem, DEFAULT_SORT, Pages } from 'uiSrc/constants'
 import Down from 'uiSrc/assets/img/Down.svg?react'
 import Search from 'uiSrc/assets/img/Search.svg'
 import { Instance, RdiInstance } from 'uiSrc/slices/interfaces'
@@ -39,17 +39,11 @@ const InstancesNavigationPopover = ({ name }: Props) => {
   const history = useHistory()
 
   useEffect(() => {
-    const dbSort = localStorageService.get(BrowserStorageItem.instancesSorting) ?? {
-      field: 'lastConnection',
-      direction: 'asc'
-    }
+    const dbSort = localStorageService.get(BrowserStorageItem.instancesSorting) ?? DEFAULT_SORT
 
     const dbFiltered = filterAndSort(dbInstances, searchFilter, dbSort)
 
-    const rdiSort = localStorageService.get(BrowserStorageItem.rdiInstancesSorting) ?? {
-      field: 'lastConnection',
-      direction: 'asc'
-    }
+    const rdiSort = localStorageService.get(BrowserStorageItem.rdiInstancesSorting) ?? DEFAULT_SORT
 
     const rdiFiltered = filterAndSort(rdiInstances, searchFilter, rdiSort)
     setFilteredDbInstances(dbFiltered)

redisinsight/ui/src/constants/index.ts

@@ -33,4 +33,5 @@ export * from './redisearch'
 export * from './browser/keyDetailsHeader'
 export * from './tutorials'
 export * from './datetime'
+export * from './sorting'
 export { ApiEndpoints, BrowserStorageItem, ApiStatusCode, apiErrors }

redisinsight/ui/src/constants/sorting.ts

@@ -0,0 +1,6 @@
+import { PropertySort } from '@elastic/eui'
+
+export const DEFAULT_SORT: PropertySort = {
+  field: 'lastConnection',
+  direction: 'asc'
+}

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx

@@ -25,7 +25,7 @@ import RediStackLightLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLog
 import CloudLinkIcon from 'uiSrc/assets/img/oauth/cloud_link.svg?react'
 import DatabaseListModules from 'uiSrc/components/database-list-modules/DatabaseListModules'
 import ItemList from 'uiSrc/components/item-list'
-import { BrowserStorageItem, FeatureFlags, Pages, Theme } from 'uiSrc/constants'
+import { BrowserStorageItem, DEFAULT_SORT, FeatureFlags, Pages, Theme } from 'uiSrc/constants'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
@@ -93,10 +93,7 @@ const DatabasesListWrapper = (props: Props) => {
   const [width, setWidth] = useState(0)
   const [, forceRerender] = useState({})
   const sortingRef = useRef<PropertySort>(
-    localStorageService.get(BrowserStorageItem.instancesSorting) ?? {
-      field: 'lastConnection',
-      direction: 'asc'
-    }
+    localStorageService.get(BrowserStorageItem.instancesSorting) ?? DEFAULT_SORT
   )
 
   const deletingIdRef = useRef('')

redisinsight/ui/src/pages/rdi/home/instance-list/RdiInstancesListWrapper.tsx

@@ -5,7 +5,7 @@ import { useHistory, useLocation } from 'react-router-dom'
 
 import cx from 'classnames'
 import ItemList from 'uiSrc/components/item-list'
-import { BrowserStorageItem, Pages } from 'uiSrc/constants'
+import { BrowserStorageItem, DEFAULT_SORT, Pages } from 'uiSrc/constants'
 import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
 import { localStorageService } from 'uiSrc/services'
 import { Instance, RdiInstance } from 'uiSrc/slices/interfaces'
@@ -230,10 +230,7 @@ const RdiInstancesListWrapper = ({ width, onEditInstance, editedInstance, onDele
     }
   }
 
-  const sort: PropertySort = localStorageService.get(BrowserStorageItem.rdiInstancesSorting) ?? {
-    field: 'lastConnection',
-    direction: 'asc'
-  }
+  const sort: PropertySort = localStorageService.get(BrowserStorageItem.rdiInstancesSorting) ?? DEFAULT_SORT
 
   return (
     <div className={styles.container}>

redisinsight/ui/src/utils/instance/instanceNavigation.ts

@@ -1,13 +1,13 @@
 import { orderBy } from 'lodash'
+import { PropertySort } from '@elastic/eui'
 import { Instance, RdiInstance } from 'uiSrc/slices/interfaces'
 import { getDbIndex } from '../longNames'
 
 export const filterAndSort = (
-  arr: Instance[] | RdiInstance[],
+  arr: Array<Instance | RdiInstance>,
   search: string,
-  sort: { field: string, direction: 'asc' | 'desc' }
-): (Instance | RdiInstance
-  )[] => {
+  sort: PropertySort
+): Array<Instance | RdiInstance> => {
   if (!arr?.length) return arr
   const filtered = arr.filter((instance) => {
     const label = `${instance.name} ${getDbIndex(instance.db)}`

redisinsight/ui/src/utils/tests/instance/instanceNavigation.spec.ts

@@ -0,0 +1,67 @@
+import { filterAndSort } from 'uiSrc/utils'
+import { Instance, RdiInstance } from 'uiSrc/slices/interfaces'
+
+const instances: Array<Instance | RdiInstance> = [
+  {
+    name: 'Instance12',
+    db: 1,
+    lastConnection: '2023-10-01',
+    host: 'host4',
+    port: 5432,
+  },
+  {
+    name: 'Instance2',
+    db: 2,
+    lastConnection: '2023-10-02',
+    host: 'host1',
+    port: 5432,
+  },
+  {
+    name: 'InstanceThree',
+    db: 3,
+    lastConnection: '2023-10-03',
+    host: 'host2',
+    port: 5433,
+  },
+]
+
+describe('filterAndSort', () => {
+  it('should return an empty array if input array is empty', () => {
+    expect(filterAndSort([], 'test', { field: 'name', direction: 'asc' })).toEqual([])
+  })
+
+  it('should filter instances by name', () => {
+    const result = filterAndSort(instances, 'instance2', { field: 'name', direction: 'asc' })
+    expect(result).toEqual([instances[1]])
+  })
+
+  it('should filter instances by db index', () => {
+    const result = filterAndSort(instances, '3', { field: 'name', direction: 'asc' })
+    expect(result).toEqual([instances[2]])
+  })
+
+  it('should sort instances by lastConnection in ascending order', () => {
+    const result = filterAndSort(instances, '', { field: 'lastConnection', direction: 'asc' })
+    expect(result).toEqual([instances[2], instances[1], instances[0]])
+  })
+
+  it('should sort instances by lastConnection in descending order', () => {
+    const result = filterAndSort(instances, '', { field: 'lastConnection', direction: 'desc' })
+    expect(result).toEqual([instances[0], instances[1], instances[2]])
+  })
+
+  it('should sort instances by host in ascending order', () => {
+    const result = filterAndSort(instances, '', { field: 'host', direction: 'asc' })
+    expect(result).toEqual([instances[1], instances[2], instances[0]])
+  })
+
+  it('should sort instances by host in descending order', () => {
+    const result = filterAndSort(instances, '', { field: 'host', direction: 'desc' })
+    expect(result).toEqual([instances[0], instances[2], instances[1]])
+  })
+
+  it('should handle mixed filtering and sorting', () => {
+    const result = filterAndSort(instances, '2', { field: 'lastConnection', direction: 'asc' })
+    expect(result).toEqual([instances[1], instances[0]])
+  })
+})