Merge pull request #4269 from RedisInsight/fe/bugfix/RI-6580-instance-nav-bugfixes

RI-6371 fix sorting, added empty list view

Author: mariasergeenko

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

@@ -6,12 +6,13 @@ 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 { 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'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
-import { getDbIndex } from 'uiSrc/utils'
+import { localStorageService } from 'uiSrc/services'
+import { filterAndSort } from 'uiSrc/utils'
 import InstancesList from './components/instances-list'
 import styles from './styles.module.scss'
 
@@ -38,11 +39,13 @@ const InstancesNavigationPopover = ({ name }: Props) => {
   const history = useHistory()
 
   useEffect(() => {
-    const dbFiltered = dbInstances?.filter((db) => {
-      const label = `${db.name} ${getDbIndex(db.db)}`
-      return label.toLowerCase?.().includes(searchFilter)
-    })
-    const rdiFiltered = rdiInstances?.filter((rdi) => rdi.name?.toLowerCase?.().includes(searchFilter))
+    const dbSort = localStorageService.get(BrowserStorageItem.instancesSorting) ?? DEFAULT_SORT
+
+    const dbFiltered = filterAndSort(dbInstances, searchFilter, dbSort)
+
+    const rdiSort = localStorageService.get(BrowserStorageItem.rdiInstancesSorting) ?? DEFAULT_SORT
+
+    const rdiFiltered = filterAndSort(rdiInstances, searchFilter, rdiSort)
     setFilteredDbInstances(dbFiltered)
     setFilteredRdiInstances(rdiFiltered)
   }, [dbInstances, rdiInstances, searchFilter])

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

@@ -37,8 +37,6 @@ const InstancesList = ({
   const instances = selectedTab === InstancesTabs.Databases ? filteredDbInstances : filteredRdiInstances
 
   const connectToInstance = (id = '') => {
-    dispatch(resetRdiContext())
-
     dispatch(setConnectedInstanceId(id))
     setLoading(false)
     history.push(Pages.browser(id))
@@ -95,6 +93,13 @@ const InstancesList = ({
     return id === rdiInstanceId
   }
 
+  if (!instances?.length) {
+    const emptyMsg = selectedTab === InstancesTabs.Databases ? 'No databases' : 'No RDI endpoints'
+    return (
+      <div className={styles.emptyMsg}>{emptyMsg}</div>
+    )
+  }
+
   return (
     <div className={styles.listContainer}>
       <EuiListGroup flush maxWidth="none" gutterSize="none">

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/styles.module.scss

@@ -60,6 +60,14 @@
   }
 }
 
+.emptyMsg {
+  padding: 20px;
+  text-align: center;
+  font-size: 14px !important;
+  line-height: 16.8px !important;
+  color: var(--euiTextSubduedColor) !important;
+}
+
 .listContainer {
   @include eui.scrollBar;
   max-height: 160px;
@@ -74,7 +82,6 @@
   .loading {
     margin-right: 8px;
     border-color: var(--separatorDropdownColor) !important;
-
     border-top-color: var(--euiColorGhost) !important;
   }
 }

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.test.tsx

@@ -161,6 +161,7 @@ describe('DatabasesListWrapper', () => {
       eventData: {
         databaseId: 'e37cc441-a4f2-402c-8bdb-fc2413cbbaff',
         provider: 'provider',
+        source: 'db_list',
         RediSearch: {
           loaded: false
         },

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('')
@@ -152,6 +149,7 @@ const DatabasesListWrapper = (props: Props) => {
       eventData: {
         databaseId: id,
         provider,
+        source: 'db_list',
         ...modulesSummary,
       }
     })

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/index.ts

@@ -2,6 +2,7 @@ import getUrl from './getUrlInstance'
 
 export * from './instanceModules'
 export * from './instanceOptions'
+export * from './instanceNavigation'
 
 export {
   getUrl

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

@@ -0,0 +1,32 @@
+import { orderBy } from 'lodash'
+import { PropertySort } from '@elastic/eui'
+import { Instance, RdiInstance } from 'uiSrc/slices/interfaces'
+import { getDbIndex } from '../longNames'
+
+export const filterAndSort = (
+  arr: Array<Instance | RdiInstance>,
+  search: string,
+  sort: PropertySort
+): Array<Instance | RdiInstance> => {
+  if (!arr?.length) return arr
+  const filtered = arr.filter((instance) => {
+    const label = `${instance.name} ${getDbIndex(instance.db)}`
+    return label.toLowerCase?.().includes(search.toLowerCase())
+  })
+
+  const sortingFunc = (ins) => {
+    if (sort.field === 'lastConnection') {
+      return ins.lastConnection ? -new Date(`${ins.lastConnection}`) : -Infinity
+    }
+    if (sort.field === 'host') {
+      return `${ins.host}:${ins.port}`
+    }
+    return sort.field
+  }
+
+  return orderBy(
+    filtered,
+    sortingFunc,
+    sort.direction
+  )
+}