fix(ui): add default orderBy 'name'

influxdata · Feb 19, 2019 · 564f858 · 564f858
1 parent a7be442
commit 564f858
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 23 deletions.
diff --git a/ui/src/organizations/components/GetOrgResources.tsx b/ui/src/organizations/components/GetOrgResources.tsx
@@ -9,13 +9,9 @@ import {RemoteDataState} from 'src/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {Organization} from '@influxdata/influx'
 
-interface Props<T> {
+interface PassedProps<T> {
   organization: Organization
   fetcher: (org: Organization) => Promise<T>
-  orderBy?: {
-    keys: string[]
-    orders?: string[]
-  }
   children: (
     resources: T,
     loading: RemoteDataState,
@@ -28,13 +24,27 @@ interface State<T> {
   loading: RemoteDataState
 }
 
+interface DefaultProps<T> {
+  orderBy?: {
+    keys: Array<keyof Unpack<T>>
+    orders?: string[]
+  }
+}
+
+type Props<T> = DefaultProps<T> & PassedProps<T>
+
+type Unpack<T> = T extends Array<infer U> ? U : never
+
+const DEFAULT_SORT_KEY = 'name'
+
 @ErrorHandling
 export default class GetOrgResources<T> extends PureComponent<
   Props<T>,
   State<T>
 > {
   constructor(props: Props<T>) {
     super(props)
+
     this.state = {
       resources: null,
       loading: RemoteDataState.NotStarted,
@@ -61,23 +71,45 @@ export default class GetOrgResources<T> extends PureComponent<
     if (organization) {
       const resources = await fetcher(organization)
       this.setState({
-        resources: this.order(resources),
+        resources: this.order(resources) as T,
         loading: RemoteDataState.Done,
       })
     }
   }
 
-  // Todo: unpack the type for resources
-  private order(resources) {
+  // Todo: improve typing for unpacking array
+  private order(resources: T | Array<Unpack<T>>): T | Array<Unpack<T>> {
     const {orderBy} = this.props
-    const isArray = resources instanceof Array
-
-    if (!orderBy || !isArray) {
+    if (!this.isArray(resources)) {
       return resources
+    } else {
+      const defaultKeys = this.extractDefaultKeys(resources)
+      if (orderBy) {
+        return _.orderBy(resources, orderBy.keys, orderBy.orders)
+      } else if (defaultKeys.length !== 0) {
+        return _.orderBy(resources, defaultKeys)
+      } else {
+        return resources
+      }
     }
+  }
+
+  private extractDefaultKeys(
+    resources: Array<Unpack<T>>
+  ): Array<keyof Unpack<T>> {
+    return this.hasKeyOf(resources, DEFAULT_SORT_KEY) ? [DEFAULT_SORT_KEY] : []
+  }
 
-    const {keys, orders} = orderBy
+  private hasKeyOf(
+    resources: Array<Unpack<T>>,
+    key: string | number | symbol
+  ): key is keyof Unpack<T> {
+    return key in resources[0]
+  }
 
-    return _.orderBy(resources, keys, orders)
+  private isArray(
+    resources: T | Array<Unpack<T>>
+  ): resources is Array<Unpack<T>> {
+    return resources instanceof Array
   }
 }
diff --git a/ui/src/organizations/containers/OrganizationView.tsx b/ui/src/organizations/containers/OrganizationView.tsx
@@ -96,11 +96,7 @@ class OrganizationView extends PureComponent<Props> {
                 url="tasks_tab"
                 title="Tasks"
               >
-                <GetOrgResources<Task[]>
-                  organization={org}
-                  fetcher={getTasks}
-                  orderBy={{keys: ['name']}}
-                >
+                <GetOrgResources<Task[]> organization={org} fetcher={getTasks}>
                   {(tasks, loading, fetch) => (
                     <SpinnerContainer
                       loading={loading}
@@ -125,7 +121,6 @@ class OrganizationView extends PureComponent<Props> {
                 <GetOrgResources<Telegraf[]>
                   organization={org}
                   fetcher={getCollectors}
-                  orderBy={{keys: ['name']}}
                 >
                   {(collectors, loading, fetch) => (
                     <SpinnerContainer
@@ -135,7 +130,6 @@ class OrganizationView extends PureComponent<Props> {
                       <GetOrgResources<Bucket[]>
                         organization={org}
                         fetcher={getBuckets}
-                        orderBy={{keys: ['name']}}
                       >
                         {(buckets, loading) => (
                           <SpinnerContainer
@@ -164,7 +158,6 @@ class OrganizationView extends PureComponent<Props> {
                 <GetOrgResources<ScraperTargetResponse[]>
                   organization={org}
                   fetcher={getScrapers}
-                  orderBy={{keys: ['name']}}
                 >
                   {(scrapers, loading, fetch) => {
                     return (
@@ -175,7 +168,6 @@ class OrganizationView extends PureComponent<Props> {
                         <GetOrgResources<Bucket[]>
                           organization={org}
                           fetcher={getBuckets}
-                          orderBy={{keys: ['name']}}
                         >
                           {(buckets, loading) => (
                             <SpinnerContainer
@@ -204,7 +196,6 @@ class OrganizationView extends PureComponent<Props> {
                 <GetOrgResources<Variable[]>
                   organization={org}
                   fetcher={getVariables}
-                  orderBy={{keys: ['name']}}
                 >
                   {(variables, loading, fetch) => {
                     return (