From 965a59832599c0ff14a8eb4e7b7d0678caa2343e Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie.gray@gmail.com>
Date: Tue, 2 Apr 2019 13:44:44 -0700
Subject: [PATCH] test(dashboards): create dashboard from template in dashboard
 index

---
 ui/cypress/e2e/dashboardsIndex.test.ts        | 19 +++++++++++
 ui/cypress/index.d.ts                         |  2 ++
 ui/cypress/support/commands.ts                | 32 +++++++++++++++++++
 .../components/card_select/CardSelectCard.tsx |  5 ++-
 .../DashboardImportFromTemplateOverlay.tsx    |  2 ++
 5 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/ui/cypress/e2e/dashboardsIndex.test.ts b/ui/cypress/e2e/dashboardsIndex.test.ts
index 6faa8bc6d25..be308f2d664 100644
--- a/ui/cypress/e2e/dashboardsIndex.test.ts
+++ b/ui/cypress/e2e/dashboardsIndex.test.ts
@@ -51,6 +51,25 @@ describe('Dashboards', () => {
     cy.getByTestID('dashboard-card').should('have.length', 1)
   })
 
+  it('can create a dashboard from a Template', () => {
+    cy.getByTestID('dashboard-card').should('have.length', 0)
+    cy.get<Organization>('@org').then(({id}) => {
+      cy.createDashboardTemplate(id)
+    })
+
+    cy.get('.page-header--container')
+      .contains('Create')
+      .click()
+
+    cy.getByTestID('dropdown--item From a Template').click()
+
+    cy.getByTestID('card-select-Bashboard-Template').click()
+
+    cy.getByTestID('create-dashboard-button').click()
+
+    cy.getByTestID('dashboard-card').should('have.length', 1)
+  })
+
   describe('Dashboard List', () => {
     beforeEach(() => {
       cy.get<Organization>('@org').then(({id}) => {
diff --git a/ui/cypress/index.d.ts b/ui/cypress/index.d.ts
index 24d383c63a9..44b12740fdd 100644
--- a/ui/cypress/index.d.ts
+++ b/ui/cypress/index.d.ts
@@ -17,6 +17,7 @@ import {
   createScraper,
   fluxEqual,
   createTelegraf,
+  createDashboardTemplate,
 } from './support/commands'
 
 declare global {
@@ -27,6 +28,7 @@ declare global {
       createSource: typeof createSource
       createTask: typeof createTask
       createVariable: typeof createVariable
+      createDashboardTemplate: typeof createDashboardTemplate
       createDashboard: typeof createDashboard
       createOrg: typeof createOrg
       flush: typeof flush
diff --git a/ui/cypress/support/commands.ts b/ui/cypress/support/commands.ts
index e446af18cbf..496b826c21c 100644
--- a/ui/cypress/support/commands.ts
+++ b/ui/cypress/support/commands.ts
@@ -28,6 +28,37 @@ export const createDashboard = (
   })
 }
 
+export const createDashboardTemplate = (
+  orgID?: string,
+  name: string = 'Bashboard'
+): Cypress.Chainable<Cypress.Response> => {
+  return cy.request({
+    method: 'POST',
+    url: '/api/v2/documents/templates',
+    body: {
+      content: {
+        data: {
+          attributes: {name, description: ''},
+          relationships: {
+            label: {data: []},
+            cell: {data: []},
+            variable: {data: []},
+          },
+          type: 'dashboard',
+        },
+        included: [],
+      },
+      labels: [],
+      meta: {
+        description: `template created from dashboard: ${name}`,
+        version: '1',
+        name: `${name}-Template`,
+      },
+      orgID,
+    },
+  })
+}
+
 export const createOrg = (): Cypress.Chainable<Cypress.Response> => {
   return cy.request({
     method: 'POST',
@@ -270,6 +301,7 @@ Cypress.Commands.add('setupUser', setupUser)
 
 // dashboards
 Cypress.Commands.add('createDashboard', createDashboard)
+Cypress.Commands.add('createDashboardTemplate', createDashboardTemplate)
 
 // orgs
 Cypress.Commands.add('createOrg', createOrg)
diff --git a/ui/src/clockface/components/card_select/CardSelectCard.tsx b/ui/src/clockface/components/card_select/CardSelectCard.tsx
index c5c60f68c77..eeeabfa1ba3 100644
--- a/ui/src/clockface/components/card_select/CardSelectCard.tsx
+++ b/ui/src/clockface/components/card_select/CardSelectCard.tsx
@@ -13,6 +13,7 @@ interface Props {
   hideImage?: boolean
   checked: boolean
   disabled: boolean
+  testID?: string
 }
 
 @ErrorHandling
@@ -23,11 +24,13 @@ class CardSelectCard extends PureComponent<Props> {
   }
 
   public render() {
-    const {id, label, checked, name, disabled} = this.props
+    const {id, label, checked, name, disabled, testID} = this.props
+
     return (
       <div
         data-toggle="card_toggle"
         onClick={this.handleClick}
+        data-testid={testID}
         className={classnames('card-select--card', {
           'card-select--checked': checked,
           'card-select--disabled': disabled,
diff --git a/ui/src/dashboards/components/DashboardImportFromTemplateOverlay.tsx b/ui/src/dashboards/components/DashboardImportFromTemplateOverlay.tsx
index 85696be350f..9ddb73138eb 100644
--- a/ui/src/dashboards/components/DashboardImportFromTemplateOverlay.tsx
+++ b/ui/src/dashboards/components/DashboardImportFromTemplateOverlay.tsx
@@ -121,6 +121,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
           checked={_.get(selectedTemplateSummary, 'id', '') === t.id}
           label={t.meta.name}
           hideImage={true}
+          testID={`card-select-${t.meta.name}`}
         />
       )
     })
@@ -133,6 +134,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
         text="Create Dashboard"
         onClick={this.onSubmit}
         key="submit-button"
+        testID="create-dashboard-button"
         color={ComponentColor.Primary}
       />,
     ]