RI-6371 fix sorting, added empty list view

Author: kchepikava

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

@@ -3,15 +3,17 @@ import { EuiFieldText, EuiIcon, EuiPopover, EuiSpacer, EuiTab, EuiTabs, EuiText
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
+import { orderBy } from 'lodash'
 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, 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 InstancesList from './components/instances-list'
 import styles from './styles.module.scss'
 
@@ -38,11 +40,48 @@ 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 filterAndSort = (
+      arr: Instance[] | RdiInstance[],
+      search: string,
+      sort: { field: string, direction: 'asc' | 'desc' }
+    ): (Instance | RdiInstance
+      )[] => {
+      if (!arr?.length) return arr
+      const filtered = arr.filter((instance) => {
+        const label = `${instance.name} ${getDbIndex(instance.db)}`
+        return label.toLowerCase?.().includes(search)
+      })
+
+      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
+      )
+    }
+
+    const dbSort = localStorageService.get(BrowserStorageItem.instancesSorting) ?? {
+      field: 'lastConnection',
+      direction: 'asc'
+    }
+
+    const dbFiltered = filterAndSort(dbInstances, searchFilter, dbSort)
+
+    const rdiSort = localStorageService.get(BrowserStorageItem.rdiInstancesSorting) ?? {
+      field: 'lastConnection',
+      direction: 'asc'
+    }
+
+    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/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

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