From eeecae953d68bf5bf27b6dec0604cc084e186e5e Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Fri, 1 Jun 2018 16:57:23 -0700
Subject: [PATCH] Fix error when dashboard import does not contain template
 variables

---
 ui/src/dashboards/actions/index.ts            | 25 +++++++------
 .../dashboards/components/DashboardsTable.tsx | 36 +++++++++++--------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/ui/src/dashboards/actions/index.ts b/ui/src/dashboards/actions/index.ts
index 30d29f793e..729af20c9d 100644
--- a/ui/src/dashboards/actions/index.ts
+++ b/ui/src/dashboards/actions/index.ts
@@ -35,8 +35,9 @@ import {
 import {CellType} from 'src/types/dashboard'
 import {makeQueryForTemplate} from 'src/dashboards/utils/templateVariableQueryGenerator'
 import parsers from 'src/shared/parsing'
+import {getDeep} from 'src/utils/wrappers'
 
-import {Dashboard, TimeRange, Cell, Query, Source} from 'src/types'
+import {Dashboard, TimeRange, Cell, Query, Source, Template} from 'src/types'
 
 interface LoadDashboardsAction {
   type: 'LOAD_DASHBOARDS'
@@ -477,17 +478,19 @@ export const getChronografVersion = () => async (): Promise<string | void> => {
   }
 }
 
-const removeUnselectedTemplateValues = (dashboard: Dashboard) => {
-  const templates = dashboard.templates.map(template => {
-    if (template.type === 'csv') {
-      return template
+const removeUnselectedTemplateValues = (dashboard: Dashboard): Template[] => {
+  const templates = getDeep<Template[]>(dashboard, 'templates', []).map(
+    template => {
+      if (template.type === 'csv') {
+        return template
+      }
+
+      const value = template.values.find(val => val.selected)
+      const values = value ? [value] : []
+
+      return {...template, values}
     }
-
-    const value = template.values.find(val => val.selected)
-    const values = value ? [value] : []
-
-    return {...template, values}
-  })
+  )
   return templates
 }
 
diff --git a/ui/src/dashboards/components/DashboardsTable.tsx b/ui/src/dashboards/components/DashboardsTable.tsx
index 66e012266d..1892d0b763 100644
--- a/ui/src/dashboards/components/DashboardsTable.tsx
+++ b/ui/src/dashboards/components/DashboardsTable.tsx
@@ -5,7 +5,9 @@ import _ from 'lodash'
 import Authorized, {EDITOR_ROLE, VIEWER_ROLE} from 'src/auth/Authorized'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 
-import {Dashboard} from 'src/types'
+import {getDeep} from 'src/utils/wrappers'
+
+import {Dashboard, Template} from 'src/types'
 
 interface Props {
   dashboards: Dashboard[]
@@ -49,17 +51,7 @@ class DashboardsTable extends PureComponent<Props> {
                   {dashboard.name}
                 </Link>
               </td>
-              <td>
-                {dashboard.templates.length ? (
-                  dashboard.templates.map(tv => (
-                    <code className="table--temp-var" key={tv.id}>
-                      {tv.tempVar}
-                    </code>
-                  ))
-                ) : (
-                  <span className="empty-string">None</span>
-                )}
-              </td>
+              <td>{this.getDashboardTemplates(dashboard)}</td>
               <td className="text-right">
                 <Authorized
                   requiredRole={VIEWER_ROLE}
@@ -101,7 +93,23 @@ class DashboardsTable extends PureComponent<Props> {
     )
   }
 
-  private get emptyStateDashboard() {
+  private getDashboardTemplates = (
+    dashboard: Dashboard
+  ): JSX.Element | JSX.Element[] => {
+    const templates = getDeep<Template[]>(dashboard, 'templates', [])
+
+    if (templates.length) {
+      return templates.map(tv => (
+        <code className="table--temp-var" key={tv.id}>
+          {tv.tempVar}
+        </code>
+      ))
+    }
+
+    return <span className="empty-string">None</span>
+  }
+
+  private get emptyStateDashboard(): JSX.Element {
     const {onCreateDashboard} = this.props
     return (
       <Authorized
@@ -125,7 +133,7 @@ class DashboardsTable extends PureComponent<Props> {
     )
   }
 
-  private get unauthorizedEmptyState() {
+  private get unauthorizedEmptyState(): JSX.Element {
     return (
       <div className="generic-empty-state">
         <h4 style={{margin: '90px 0'}}>