Merge pull request #3891 from influxdata/fix/stale-dashboard-switcher

Fix stale dashboard switcher

ui/src/dashboards/apis/index.ts

@@ -2,7 +2,7 @@ import AJAX from 'src/utils/ajax'
 
 import {
   linksFromDashboards,
-  updateActiveDashboardLink,
+  updateDashboardLinks,
 } from 'src/dashboards/utils/dashboardSwitcherLinks'
 
 import {AxiosResponse} from 'axios'
@@ -30,7 +30,7 @@ export const loadDashboardLinks = async (
   } = await dashboardsAJAX()
 
   const links = linksFromDashboards(dashboards, source)
-  const dashboardLinks = updateActiveDashboardLink(links, activeDashboard)
+  const dashboardLinks = updateDashboardLinks(links, activeDashboard)
 
   return dashboardLinks
 }

ui/src/dashboards/containers/DashboardPage.tsx

@@ -24,6 +24,7 @@ import * as notifyActions from 'src/shared/actions/notifications'
 import idNormalizer, {TYPE_ID} from 'src/normalizers/id'
 import {millisecondTimeRange} from 'src/dashboards/utils/time'
 import {getDeep} from 'src/utils/wrappers'
+import {updateDashboardLinks} from 'src/dashboards/utils/dashboardSwitcherLinks'
 
 // APIs
 import {loadDashboardLinks} from 'src/dashboards/apis'
@@ -352,7 +353,17 @@ class DashboardPage extends Component<Props, State> {
   private getDashboard = async () => {
     const {dashboardID, source, getDashboardWithTemplatesAsync} = this.props
 
-    return getDashboardWithTemplatesAsync(dashboardID, source)
+    await getDashboardWithTemplatesAsync(dashboardID, source)
+    this.updateActiveDashboard()
+  }
+
+  private updateActiveDashboard(): void {
+    this.setState((prevState, props) => ({
+      dashboardLinks: updateDashboardLinks(
+        prevState.dashboardLinks,
+        props.dashboard
+      ),
+    }))
   }
 
   private inView = (cell: DashboardsModels.Cell): boolean => {
@@ -434,6 +445,7 @@ class DashboardPage extends Component<Props, State> {
 
     this.props.updateDashboard(newDashboard)
     await this.props.putDashboard(newDashboard)
+    this.updateActiveDashboard()
   }
 
   private handleDeleteDashboardCell = (cell: DashboardsModels.Cell): void => {

ui/src/dashboards/utils/dashboardSwitcherLinks.ts

@@ -21,7 +21,20 @@ export const linksFromDashboards = (
   return {links, active: null}
 }
 
-export const updateActiveDashboardLink = (
+export const updateDashboardLinks = (
+  dashboardLinks: DashboardSwitcherLinks,
+  activeDashboard: Dashboard
+) => {
+  const {active} = dashboardLinks
+
+  if (!active || active.key !== String(activeDashboard.id)) {
+    return updateActiveDashboardLink(dashboardLinks, activeDashboard)
+  }
+
+  return updateActiveDashboardLinkName(dashboardLinks, activeDashboard)
+}
+
+const updateActiveDashboardLink = (
   dashboardLinks: DashboardSwitcherLinks,
   dashboard: Dashboard
 ) => {
@@ -35,3 +48,23 @@ export const updateActiveDashboardLink = (
 
   return {...dashboardLinks, active}
 }
+
+const updateActiveDashboardLinkName = (
+  dashboardLinks: DashboardSwitcherLinks,
+  dashboard: Dashboard
+): DashboardSwitcherLinks => {
+  const {name} = dashboard
+  let {active} = dashboardLinks
+
+  const links = dashboardLinks.links.map(link => {
+    if (link.key === String(dashboard.id)) {
+      active = {...link, text: name}
+
+      return active
+    }
+
+    return link
+  })
+
+  return {links, active}
+}

ui/test/dashboards/utils/dashboardSwitcherLinks.test.ts

@@ -1,6 +1,6 @@
 import {
   linksFromDashboards,
-  updateActiveDashboardLink,
+  updateDashboardLinks,
 } from 'src/dashboards/utils/dashboardSwitcherLinks'
 import {dashboard, source} from 'test/resources'
 
@@ -34,7 +34,19 @@ describe('dashboards.utils.dashboardSwitcherLinks', () => {
     })
   })
 
-  describe('updateActiveDashboardLink', () => {
+  describe('updateDashboardLinks', () => {
+    const link1 = {
+      key: '9001',
+      text: 'Low Dash',
+      to: '/sources/897/dashboards/9001',
+    }
+
+    const link2 = {
+      key: '2282',
+      text: 'Other Dash',
+      to: '/sources/897/dashboards/2282',
+    }
+
     const activeDashboard = {
       ...dashboard,
       id: 123,
@@ -47,25 +59,10 @@ describe('dashboards.utils.dashboardSwitcherLinks', () => {
       to: '/sources/897/dashboards/123',
     }
 
-    const link1 = {
-      key: '9001',
-      text: 'Low Dash',
-      to: '/sources/897/dashboards/9001',
-    }
-
-    const link2 = {
-      key: '2282',
-      text: 'Low Dash',
-      to: '/sources/897/dashboards/2282',
-    }
-
     const links = [link1, activeLink, link2]
     it('can set the active link', () => {
       const loadedLinks = {links, active: null}
-      const actualLinks = updateActiveDashboardLink(
-        loadedLinks,
-        activeDashboard
-      )
+      const actualLinks = updateDashboardLinks(loadedLinks, activeDashboard)
       const expectedLinks = {links, active: activeLink}
 
       expect(actualLinks).toEqual(expectedLinks)
@@ -73,10 +70,51 @@ describe('dashboards.utils.dashboardSwitcherLinks', () => {
 
     it('can handle a missing dashboard', () => {
       const loadedLinks = {links, active: null}
-      const actualLinks = updateActiveDashboardLink(loadedLinks, undefined)
+      const actualLinks = updateDashboardLinks(loadedLinks, undefined)
       const expectedLinks = {links, active: null}
 
       expect(actualLinks).toEqual(expectedLinks)
     })
+
+    const staleDashboard = {
+      ...dashboard,
+      id: 3000,
+      name: 'Stale Dashboard Name',
+    }
+
+    const staleLink = {
+      key: '3000',
+      text: 'Stale Dashboard Name',
+      to: '/sources/897/dashboards/3000',
+    }
+
+    const staleLinks = [link1, staleLink, link2]
+    const updatedDashboard = {...staleDashboard, name: 'New Dashboard Name'}
+
+    const staleDashboardLinks = {
+      links: staleLinks,
+      active: staleLink,
+    }
+
+    it('can update name for dashboard', () => {
+      const actualLinks = updateDashboardLinks(
+        staleDashboardLinks,
+        updatedDashboard
+      )
+
+      const renamedLink = {
+        key: '3000',
+        text: 'New Dashboard Name',
+        to: '/sources/897/dashboards/3000',
+      }
+
+      const expectedDashlinks = {
+        links: [link1, renamedLink, link2],
+        active: renamedLink,
+      }
+
+      expect(actualLinks).toEqual(expectedDashlinks)
+      expect(actualLinks.active).toBe(actualLinks.links[1])
+    })
   })
 })