feat: subscriptions list (#4189)

* feat: search by name, sort by name and date

* feat: change to updated at, add to details card

* fix: types, lint

* fix: use luxon

Author: helenosheaa

src/shared/components/resource_sort_dropdown/generateSortItems.ts

@@ -401,15 +401,15 @@ export const generateSortItems = (
           sortDirection: Sort.Descending,
         },
         {
-          label: 'Description (Ascending)',
-          sortKey: 'description',
-          sortType: SortTypes.String,
+          label: 'Updated (Oldest)',
+          sortKey: 'updatedAt',
+          sortType: SortTypes.Date,
           sortDirection: Sort.Ascending,
         },
         {
-          label: 'Description (Descending)',
-          sortKey: 'description',
-          sortType: SortTypes.String,
+          label: 'Updated (Newest)',
+          sortKey: 'updatedAt',
+          sortType: SortTypes.Date,
           sortDirection: Sort.Descending,
         },
       ]

src/types/subscriptions.ts

@@ -22,8 +22,8 @@ export interface Subscription {
   status?: string
   bucket?: string
   qos?: number
-  createdAt?: string
-  updatedAt?: string
+  createdAt?: Date
+  updatedAt?: Date
   tokenID?: string
   token?: string
 }

src/writeData/subscriptions/components/SubscriptionCard.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {FC, useContext} from 'react'
+import {DateTime} from 'luxon'
 
 // Components
 import {
@@ -22,6 +23,7 @@ interface Props {
 
 const SubscriptionCard: FC<Props> = ({subscription}) => {
   const {deleteSubscription} = useContext(SubscriptionListContext)
+  const timeSince = new DateTime.fromISO(subscription.updatedAt).toRelative()
   return (
     <ResourceCard
       key={`subscription-card-id--${subscription.id}`}
@@ -42,7 +44,13 @@ const SubscriptionCard: FC<Props> = ({subscription}) => {
       }
     >
       <ResourceCard.Name name={subscription.name} />
-      <ResourceCard.Description description={subscription.description} />
+      <ResourceCard.Description
+        description={`${subscription.brokerHost}:${subscription.brokerPort}/${subscription.topic}`}
+      />
+      <ResourceCard.Meta>
+        <>{subscription.status}</>
+        <>Last Modified: {timeSince}</>
+      </ResourceCard.Meta>
     </ResourceCard>
   )
 }

src/writeData/subscriptions/components/SubscriptionsLanding.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, useContext} from 'react'
+import React, {FC, useContext, useState} from 'react'
 import {useHistory} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 
@@ -35,6 +35,7 @@ import {getOrg} from 'src/organizations/selectors'
 // Types
 import {ResourceType} from 'src/types'
 import {ORGS, SUBSCRIPTIONS} from 'src/shared/constants/routes'
+import {Subscription} from 'src/types/subscriptions'
 
 // Styles
 import 'src/writeData/subscriptions/components/SubscriptionsLanding.scss'
@@ -43,6 +44,48 @@ const SubscriptionsLanding: FC = () => {
   const {subscriptions, loading} = useContext(SubscriptionListContext)
   const history = useHistory()
   const org = useSelector(getOrg)
+  const [search, setSearch] = useState('')
+  const [sortOptions, setSortOptions] = useState({
+    sortKey: 'name' as keyof Subscription,
+    sortType: SortTypes.String,
+    sortDirection: Sort.Ascending,
+  })
+  const filteredSubscriptions =
+    subscriptions && search
+      ? subscriptions.filter(
+          s => s.name.toLowerCase() === search.toLowerCase().trim()
+        )
+      : subscriptions
+  const handleSort = (subscriptions: Subscription[]): Subscription[] => {
+    let sortedSubscriptions
+    if (sortOptions.sortDirection === Sort.Ascending) {
+      sortedSubscriptions = subscriptions.sort((a, b) =>
+        (a[sortOptions.sortKey] as string)
+          .toLowerCase()
+          .localeCompare((b[sortOptions.sortKey] as string).toLowerCase())
+      )
+    } else if (sortOptions.sortDirection === Sort.Descending) {
+      sortedSubscriptions = subscriptions.sort((a, b) =>
+        (b[sortOptions.sortKey] as string)
+          .toLowerCase()
+          .localeCompare((a[sortOptions.sortKey] as string).toLowerCase())
+      )
+    }
+    return sortedSubscriptions
+  }
+  const setSort = (sortKey, sortDirection, sortType) => {
+    if (
+      sortKey === sortOptions.sortKey &&
+      sortDirection === sortOptions.sortDirection
+    ) {
+      return
+    }
+    setSortOptions({
+      sortKey,
+      sortType,
+      sortDirection,
+    })
+  }
   return (
     <Page
       className="subscriptions-landing"
@@ -55,15 +98,15 @@ const SubscriptionsLanding: FC = () => {
             <Page.ControlBarLeft>
               <SearchWidget
                 placeholderText="Filter subscriptions..."
-                searchTerm=""
-                onSearch={() => {}}
+                searchTerm={search}
+                onSearch={setSearch}
               />
               <ResourceSortDropdown
                 resourceType={ResourceType.Subscriptions}
-                sortDirection={Sort.Ascending}
-                sortKey="name"
-                sortType={SortTypes.String}
-                onSelect={() => {}}
+                sortDirection={sortOptions.sortDirection}
+                sortKey={sortOptions.sortKey}
+                sortType={sortOptions.sortType}
+                onSelect={setSort}
               />
             </Page.ControlBarLeft>
             <Page.ControlBarRight>
@@ -83,7 +126,9 @@ const SubscriptionsLanding: FC = () => {
             </Page.ControlBarRight>
           </Page.ControlBar>
           {subscriptions && subscriptions.length ? (
-            <SubscriptionsList subscriptions={subscriptions} />
+            <SubscriptionsList
+              subscriptions={handleSort(filteredSubscriptions)}
+            />
           ) : (
             <EmptySubscriptionState />
           )}