fix(me): sort dashboards list (#16919)

* fix(me): sort dashboards list

* chore(changelog): update changelog

* chore(me): remove extra spaces

* fix(me): adding localeCompare

CHANGELOG.md

@@ -1,3 +1,10 @@
+## v2.0.0-beta.5 [unreleased]
+
+### Features
+
+### Bug Fixes
+1. [16919](https://github.com/influxdata/influxdb/pull/16919): Sort dashboards on homepage alphabetically
+
 ## v2.0.0-beta.4 [2020-02-14]
 
 ### Features

ui/src/me/components/DashboardsList.tsx

@@ -9,6 +9,7 @@ import {EmptyState} from '@influxdata/clockface'
 // Types
 import {Dashboard, Organization, AppState, ResourceType} from 'src/types'
 import {ComponentSize} from '@influxdata/clockface'
+import {getSortedDashboardNames} from 'src/me/constants'
 
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
@@ -51,10 +52,17 @@ class DashboardList extends PureComponent<Props> {
   }
 }
 
-const mstp = (state: AppState): StateProps => ({
-  dashboards: getAll<Dashboard>(state, ResourceType.Dashboards),
-  org: getOrg(state),
-})
+const mstp = (state: AppState): StateProps => {
+  // map names and sort via a selector
+  const dashboards = getSortedDashboardNames(
+    getAll<Dashboard>(state, ResourceType.Dashboards)
+  )
+
+  return {
+    dashboards: dashboards,
+    org: getOrg(state),
+  }
+}
 
 export default connect<StateProps, {}, {}>(
   mstp,

ui/src/me/constants/index.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import {Dashboard} from 'src/types'
 
 interface Greeting {
   text: string
@@ -159,3 +160,13 @@ const randomGreetings: Greeting[] = [
 export const generateRandomGreeting = (): Greeting => {
   return _.sample(randomGreetings)
 }
+
+const sortFunc = (a: Dashboard, b: Dashboard) => {
+  const firstDashboard = `${a.name || ''}`.toLowerCase()
+  const secondDashboard = `${b.name || ''}`.toLowerCase()
+  return firstDashboard.localeCompare(secondDashboard)
+}
+
+export const getSortedDashboardNames = (dashboards: Dashboard[]) => {
+  return dashboards.sort(sortFunc)
+}