feat: Dashboards maintain sort order after navigating away

CHANGELOG.md

@@ -8,6 +8,7 @@
 1. [18344](https://github.com/influxdata/influxdb/pull/18344): Extend influx CLI with version and User-Agent.
 1. [18355](https://github.com/influxdata/influxdb/pull/18355): Integrate RedirectTo functionality so CLOUD users now get navigated back to the originally linked page after login
 1. [18392](https://github.com/influxdata/influxdb/pull/18392): Consolidate pkg influx commands under templates. This removes some nesting of the CLI commands as part of that.
+1. [18400](https://github.com/influxdata/influxdb/pull/18400): Dashboards maintain sort order after navigating away
 
 ### Bug Fixes
 

ui/mocks/dummyData.ts

@@ -32,6 +32,9 @@ import {
   Permission,
   PermissionResource,
 } from '@influxdata/influx'
+import {SortTypes} from 'src/shared/utils/sort'
+import {Sort} from '@influxdata/clockface'
+import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
 
 export const links: Links = {
   authorizations: '/api/v2/authorizations',
@@ -147,6 +150,12 @@ export const query = {
   shifts: [],
 }
 
+const defaultSortOptions = {
+  sortDirection: Sort.Ascending,
+  sortType: SortTypes.String,
+  sortKey: 'name' as DashboardSortKey,
+}
+
 // Dashboards
 export const dashboard: Dashboard = {
   id: '1',
@@ -163,6 +172,7 @@ export const dashboard: Dashboard = {
   },
   labels: [],
   status: RemoteDataState.Done,
+  sortOptions: defaultSortOptions,
 }
 
 export const labels: Label[] = [
@@ -203,6 +213,7 @@ export const dashboardWithLabels: Dashboard = {
   },
   status: RemoteDataState.Done,
   labels: labelIDs,
+  sortOptions: defaultSortOptions,
 }
 
 export const cell: Cell = {

ui/src/dashboards/actions/creators.ts

@@ -1,5 +1,9 @@
 // Types
-import {RemoteDataState, DashboardEntities} from 'src/types'
+import {
+  RemoteDataState,
+  DashboardEntities,
+  DashboardSortParams,
+} from 'src/types'
 import {NormalizedSchema} from 'normalizr'
 import {setLabelOnResource} from 'src/labels/actions/creators'
 
@@ -10,6 +14,7 @@ export const REMOVE_DASHBOARD = 'REMOVE_DASHBOARD'
 export const REMOVE_DASHBOARD_LABEL = 'REMOVE_DASHBOARD_LABEL'
 export const SET_DASHBOARD = 'SET_DASHBOARD'
 export const SET_DASHBOARDS = 'SET_DASHBOARDS'
+export const SET_DASHBOARD_SORT = 'SET_DASHBOARD_SORT'
 
 export type Action =
   | ReturnType<typeof editDashboard>
@@ -18,6 +23,7 @@ export type Action =
   | ReturnType<typeof setDashboard>
   | ReturnType<typeof setDashboards>
   | ReturnType<typeof setLabelOnResource>
+  | ReturnType<typeof setDashboardSort>
 
 // R is the type of the value of the "result" key in normalizr's normalization
 type DashboardSchema<R extends string | string[]> = NormalizedSchema<
@@ -42,6 +48,12 @@ export const setDashboards = (
     schema,
   } as const)
 
+export const setDashboardSort = (sortOptions: DashboardSortParams) =>
+  ({
+    type: SET_DASHBOARD_SORT,
+    sortOptions,
+  } as const)
+
 export const setDashboard = (
   id: string,
   status: RemoteDataState,

ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -22,20 +22,23 @@ import {extractDashboardLimits} from 'src/cloud/utils/limits'
 
 // Actions
 import {createDashboard as createDashboardAction} from 'src/dashboards/actions/thunks'
+import {setDashboardSort} from 'src/dashboards/actions/creators'
 
 // Types
-import {AppState, ResourceType} from 'src/types'
+import {AppState, ResourceType, DashboardSortParams} from 'src/types'
 import {LimitStatus} from 'src/cloud/actions/limits'
 import {ComponentStatus, Sort} from '@influxdata/clockface'
 import {SortTypes} from 'src/shared/utils/sort'
 import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
 
 interface DispatchProps {
   createDashboard: typeof createDashboardAction
+  setDashboardSort: typeof setDashboardSort
 }
 
 interface StateProps {
   limitStatus: LimitStatus
+  sortOptions: DashboardSortParams
 }
 
 interface OwnProps {
@@ -47,9 +50,6 @@ type Props = DispatchProps & StateProps & OwnProps
 
 interface State {
   searchTerm: string
-  sortDirection: Sort
-  sortType: SortTypes
-  sortKey: DashboardSortKey
 }
 
 @ErrorHandling
@@ -59,15 +59,12 @@ class DashboardIndex extends PureComponent<Props, State> {
 
     this.state = {
       searchTerm: '',
-      sortDirection: Sort.Ascending,
-      sortType: SortTypes.String,
-      sortKey: 'name',
     }
   }
 
   public render() {
-    const {createDashboard, limitStatus} = this.props
-    const {searchTerm, sortDirection, sortType, sortKey} = this.state
+    const {createDashboard, limitStatus, sortOptions} = this.props
+    const {searchTerm} = this.state
     return (
       <>
         <Page
@@ -87,9 +84,9 @@ class DashboardIndex extends PureComponent<Props, State> {
               />
               <ResourceSortDropdown
                 resourceType={ResourceType.Dashboards}
-                sortDirection={sortDirection}
-                sortKey={sortKey}
-                sortType={sortType}
+                sortDirection={sortOptions.sortDirection}
+                sortKey={sortOptions.sortKey}
+                sortType={sortOptions.sortType}
                 onSelect={this.handleSort}
               />
             </Page.ControlBarLeft>
@@ -117,9 +114,9 @@ class DashboardIndex extends PureComponent<Props, State> {
               <DashboardsIndexContents
                 searchTerm={searchTerm}
                 onFilterChange={this.handleFilterDashboards}
-                sortDirection={sortDirection}
-                sortType={sortType}
-                sortKey={sortKey}
+                sortDirection={sortOptions.sortDirection}
+                sortType={sortOptions.sortType}
+                sortKey={sortOptions.sortKey}
               />
             </GetAssetLimits>
           </Page.Contents>
@@ -134,7 +131,7 @@ class DashboardIndex extends PureComponent<Props, State> {
     sortDirection: Sort,
     sortType: SortTypes
   ): void => {
-    this.setState({sortKey, sortDirection, sortType})
+    this.props.setDashboardSort({sortKey, sortDirection, sortType})
   }
 
   private handleFilterDashboards = (searchTerm: string): void => {
@@ -170,14 +167,17 @@ const mstp = (state: AppState): StateProps => {
   const {
     cloud: {limits},
   } = state
+  const sortOptions = state.resources.dashboards['sortOptions']
 
   return {
     limitStatus: extractDashboardLimits(limits),
+    sortOptions,
   }
 }
 
 const mdtp: DispatchProps = {
   createDashboard: createDashboardAction,
+  setDashboardSort,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/dashboards/constants/index.ts

@@ -6,6 +6,10 @@ import {Cell, Dashboard, RemoteDataState} from 'src/types'
 import {DecimalPlaces} from 'src/types'
 import {DEFAULT_TIME_FORMAT} from 'src/shared/constants'
 
+import {SortTypes} from 'src/shared/utils/sort'
+import {Sort} from '@influxdata/clockface'
+import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
+
 export const UNTITLED_GRAPH: string = 'Untitled Graph'
 
 export const DEFAULT_DECIMAL_PLACES: DecimalPlaces = {
@@ -68,18 +72,26 @@ export type EmptyDefaultDashboard = Pick<
   cells: NewDefaultCell[]
 }
 
+export const DEFAULT_DASHBOARD_SORT_OPTIONS = {
+  sortDirection: Sort.Ascending,
+  sortType: SortTypes.String,
+  sortKey: 'name' as DashboardSortKey,
+}
+
 export const EMPTY_DASHBOARD: EmptyDefaultDashboard = {
   id: '0',
   name: '',
   cells: [NEW_DEFAULT_DASHBOARD_CELL],
   status: RemoteDataState.Done,
+  sortOptions: DEFAULT_DASHBOARD_SORT_OPTIONS,
 }
 
 export const DashboardTemplate: EmptyDefaultDashboard = {
   id: '0',
   name: 'Create a New Dashboard',
   cells: [],
   status: RemoteDataState.Done,
+  sortOptions: DEFAULT_DASHBOARD_SORT_OPTIONS,
 }
 
 type NewDefaultDashboard = Pick<

ui/src/dashboards/reducers/dashboards.ts

@@ -13,6 +13,7 @@ import {
 import {
   Action,
   SET_DASHBOARD,
+  SET_DASHBOARD_SORT,
   REMOVE_DASHBOARD,
   SET_DASHBOARDS,
   REMOVE_DASHBOARD_LABEL,
@@ -35,12 +36,15 @@ import {
   setRelation,
 } from 'src/resources/reducers/helpers'
 
+import {DEFAULT_DASHBOARD_SORT_OPTIONS} from 'src/dashboards/constants'
+
 type DashboardsState = ResourceState['dashboards']
 
 const initialState = () => ({
   byID: {},
   allIDs: [],
   status: RemoteDataState.NotStarted,
+  sortOptions: DEFAULT_DASHBOARD_SORT_OPTIONS,
 })
 
 export const dashboardsReducer = (
@@ -67,6 +71,14 @@ export const dashboardsReducer = (
         return
       }
 
+      case SET_DASHBOARD_SORT: {
+        const {sortOptions} = action
+
+        draftState['sortOptions'] = sortOptions
+
+        return
+      }
+
       case EDIT_DASHBOARD: {
         editResource<Dashboard>(draftState, action, ResourceType.Dashboards)
 

ui/src/dashboards/resources.ts

@@ -9,6 +9,8 @@ import {
   RemoteDataState,
 } from 'src/types'
 
+import {DEFAULT_DASHBOARD_SORT_OPTIONS} from 'src/dashboards/constants'
+
 export const dbCell: Cell = {
   x: 1,
   y: 2,
@@ -34,6 +36,7 @@ export const dashboard: Dashboard = {
     self: '/v2/dashboards/1',
     cells: '/v2/dashboards/cells',
   },
+  sortOptions: DEFAULT_DASHBOARD_SORT_OPTIONS,
 }
 
 export const axes: Axes = {

ui/src/shared/utils/mocks/resourceToTemplate.ts

@@ -7,6 +7,8 @@ import {
   RemoteDataState,
 } from 'src/types'
 
+import {DEFAULT_DASHBOARD_SORT_OPTIONS} from 'src/dashboards/constants'
+
 export const myCell = {
   dashboardID: 'dash_1',
   id: 'cell_view_1',
@@ -25,6 +27,7 @@ export const myDashboard: Dashboard = {
   cells: [myCell.id],
   labels: [],
   status: RemoteDataState.NotStarted,
+  sortOptions: DEFAULT_DASHBOARD_SORT_OPTIONS,
 }
 
 export const myView: View = {

ui/src/types/dashboards.ts

@@ -7,6 +7,9 @@ import {
   BuilderConfig,
 } from 'src/client'
 import {RemoteDataState} from 'src/types'
+import {Sort} from '@influxdata/clockface'
+import {SortTypes} from 'src/shared/utils/sort'
+import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
 
 export type FieldOption = RenamableField
 
@@ -15,6 +18,15 @@ export interface SortOptions {
   direction: string
 }
 
+export {Sort} from '@influxdata/clockface'
+export {SortTypes} from 'src/shared/utils/sort'
+
+export interface DashboardSortParams {
+  sortDirection: Sort
+  sortType: SortTypes
+  sortKey: DashboardSortKey
+}
+
 export interface DashboardDraftQuery extends DashboardQuery {
   hidden: boolean
 }
@@ -34,6 +46,7 @@ export interface Dashboard extends Omit<GenDashboard, 'cells' | 'labels'> {
   cells: string[]
   labels: string[]
   status: RemoteDataState
+  sortOptions: DashboardSortParams
 }
 
 export type Omit<K, V> = Pick<K, Exclude<keyof K, V>>