fix(ui): add ordering to org resources

CHANGELOG.md

@@ -24,6 +24,7 @@
 ### UI Improvements
 1. [11764](https://github.com/influxdata/influxdb/pull/11764): Move the download telegraf config button to view config overlay
 1. [11879](https://github.com/influxdata/influxdb/pull/11879): Combine permissions for user by type
+1. [11938](https://github.com/influxdata/influxdb/pull/11938): Add ordering to UI list items
 
 ## v2.0.0-alpha.2 [2019-02-07]
 

ui/src/configuration/components/GetLabels.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import {PureComponent} from 'react'
+import _ from 'lodash'
 
 // APIs
 import {client} from 'src/utils/api'
@@ -26,7 +27,10 @@ export default class GetLabels extends PureComponent<Props, State> {
 
   public async componentDidMount() {
     const labels = await client.labels.getAll()
-    this.setState({labels, loading: RemoteDataState.Done})
+    this.setState({
+      labels: _.orderBy(labels, ['name']),
+      loading: RemoteDataState.Done,
+    })
   }
 
   public render() {

ui/src/organizations/components/GetOrgResources.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import {PureComponent} from 'react'
+import _ from 'lodash'
 
 // Types
 import {RemoteDataState} from 'src/types'
@@ -8,28 +9,40 @@ 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>
+  fetcher: (org: Organization) => Promise<T[]>
   children: (
-    resources: T,
+    resources: T[],
     loading: RemoteDataState,
     fetch?: () => void
   ) => JSX.Element
 }
 
 interface State<T> {
-  resources: T
+  resources: T[]
   loading: RemoteDataState
 }
 
+interface DefaultProps<T> {
+  orderBy?: {
+    keys: Array<keyof T>
+    orders?: string[]
+  }
+}
+
+type Props<T> = DefaultProps<T> & PassedProps<T>
+
+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,
@@ -55,7 +68,35 @@ export default class GetOrgResources<T> extends PureComponent<
     const {fetcher, organization} = this.props
     if (organization) {
       const resources = await fetcher(organization)
-      this.setState({resources, loading: RemoteDataState.Done})
+      this.setState({
+        resources: this.order(resources),
+        loading: RemoteDataState.Done,
+      })
+    }
+  }
+
+  // Todo: improve typing for unpacking array
+  private order(resources: T[]): T[] {
+    const {orderBy} = this.props
+
+    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: T[]): Array<keyof T> {
+    return this.hasKeyOf(resources, DEFAULT_SORT_KEY) ? [DEFAULT_SORT_KEY] : []
+  }
+
+  private hasKeyOf(
+    resources: T[],
+    key: string | number | symbol
+  ): key is keyof T {
+    return key in resources[0]
+  }
 }

ui/src/organizations/containers/OrgBucketsIndex.tsx

@@ -67,7 +67,7 @@ class OrgBucketsIndex extends Component<Props> {
                   url="buckets_tab"
                   title="Buckets"
                 >
-                  <GetOrgResources<Bucket[]>
+                  <GetOrgResources<Bucket>
                     organization={org}
                     fetcher={getBuckets}
                   >

ui/src/organizations/containers/OrgDashboardsIndex.tsx

@@ -62,7 +62,7 @@ class OrgDashboardsIndex extends Component<Props> {
                   url="dashboards_tab"
                   title="Dashboards"
                 >
-                  <GetOrgResources<Dashboard[]>
+                  <GetOrgResources<Dashboard>
                     organization={org}
                     fetcher={getDashboards}
                   >

ui/src/organizations/containers/OrgMembersIndex.tsx

@@ -66,7 +66,7 @@ class OrgMembersIndex extends Component<Props> {
                   url="members_tab"
                   title="Members"
                 >
-                  <GetOrgResources<ResourceOwner[]>
+                  <GetOrgResources<ResourceOwner>
                     organization={org}
                     fetcher={getOwnersAndMembers}
                   >

ui/src/organizations/containers/OrganizationView.tsx

@@ -96,7 +96,7 @@ class OrganizationView extends PureComponent<Props> {
                 url="tasks_tab"
                 title="Tasks"
               >
-                <GetOrgResources<Task[]> organization={org} fetcher={getTasks}>
+                <GetOrgResources<Task> organization={org} fetcher={getTasks}>
                   {(tasks, loading, fetch) => (
                     <SpinnerContainer
                       loading={loading}
@@ -118,7 +118,7 @@ class OrganizationView extends PureComponent<Props> {
                 url="telegrafs_tab"
                 title="Telegraf"
               >
-                <GetOrgResources<Telegraf[]>
+                <GetOrgResources<Telegraf>
                   organization={org}
                   fetcher={getCollectors}
                 >
@@ -127,7 +127,7 @@ class OrganizationView extends PureComponent<Props> {
                       loading={loading}
                       spinnerComponent={<TechnoSpinner />}
                     >
-                      <GetOrgResources<Bucket[]>
+                      <GetOrgResources<Bucket>
                         organization={org}
                         fetcher={getBuckets}
                       >
@@ -155,7 +155,7 @@ class OrganizationView extends PureComponent<Props> {
                 url="scrapers_tab"
                 title="Scrapers"
               >
-                <GetOrgResources<ScraperTargetResponse[]>
+                <GetOrgResources<ScraperTargetResponse>
                   organization={org}
                   fetcher={getScrapers}
                 >
@@ -165,7 +165,7 @@ class OrganizationView extends PureComponent<Props> {
                         loading={loading}
                         spinnerComponent={<TechnoSpinner />}
                       >
-                        <GetOrgResources<Bucket[]>
+                        <GetOrgResources<Bucket>
                           organization={org}
                           fetcher={getBuckets}
                         >
@@ -193,7 +193,7 @@ class OrganizationView extends PureComponent<Props> {
                 url="variables_tab"
                 title="Variables"
               >
-                <GetOrgResources<Variable[]>
+                <GetOrgResources<Variable>
                   organization={org}
                   fetcher={getVariables}
                 >

ui/src/shared/components/FetchLabels.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import _ from 'lodash'
 
 // Components
 import {EmptyState, SpinnerContainer, TechnoSpinner} from 'src/clockface'
@@ -36,7 +37,10 @@ class FetchLabels extends PureComponent<Props, State> {
 
   public async componentDidMount() {
     const labels = await client.labels.getAll()
-    this.setState({loading: RemoteDataState.Done, labels})
+    this.setState({
+      loading: RemoteDataState.Done,
+      labels: _.orderBy(labels, ['name']),
+    })
   }
 
   public render() {

ui/src/tasks/components/TaskForm.tsx

@@ -157,7 +157,7 @@ export default class TaskForm extends PureComponent<Props, State> {
             {isInOverlay && (
               <Grid.Column widthXS={Columns.Six}>
                 <Form.Element label="Output Bucket">
-                  <GetOrgResources<Bucket[]>
+                  <GetOrgResources<Bucket>
                     organization={this.toOrganization}
                     fetcher={getBuckets}
                   >