fix(ui): Show empty dashboards state

influxdata · Nov 12, 2019 · 7e711bb · 7e711bb
1 parent 7421836
commit 7e711bb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/ui/cypress/e2e/dashboardsIndex.test.ts b/ui/cypress/e2e/dashboardsIndex.test.ts
@@ -19,6 +19,30 @@ describe('Dashboards', () => {
     })
   })
 
+  it('empty state should have a header with certain text', () => {
+    cy.getByTestID('page-contents').within(() => {
+      cy.getByTestID('empty-dashboards-list').within(() => {
+        cy.getByTestID('empty-state--text').should($t => {
+          expect($t).to.have.length(1)
+          expect($t).to.contain(
+            "Looks like you don't have any Dashboards, why not create one?"
+          )
+        })
+      })
+    })
+  })
+
+  it('empty state should have a body with a button to create a dashboard', () => {
+    cy.getByTestID('page-contents').within(() => {
+      cy.getByTestID('empty-dashboards-list').within(() => {
+        cy.getByTestID('add-resource-dropdown--button').should($b => {
+          expect($b).to.have.length(1)
+          expect($b).to.contain('Create Dashboard')
+        })
+      })
+    })
+  })
+
   it('can create a dashboard from empty state', () => {
     cy.getByTestID('empty-dashboards-list').within(() => {
       cy.getByTestID('add-resource-dropdown--button').click()

diff --git a/ui/src/dashboards/components/dashboard_index/Table.tsx b/ui/src/dashboards/components/dashboard_index/Table.tsx
@@ -72,9 +72,9 @@ class DashboardsTable extends PureComponent<Props, State> {
         </ResourceList.Header>
         <ResourceList.Body
           emptyState={this.emptyState}
-          className="dashboards-card-grid"
+          className={dashboards.length ? 'dashboards-card-grid' : ''}
         >
-          {!!dashboards.length && (
+          {dashboards.length ? (
             <DashboardCards
               dashboards={dashboards}
               sortKey={sortKey}
@@ -85,7 +85,7 @@ class DashboardsTable extends PureComponent<Props, State> {
               onUpdateDashboard={onUpdateDashboard}
               onFilterChange={onFilterChange}
             />
-          )}
+          ) : null}
         </ResourceList.Body>
       </ResourceList>
     )
@@ -129,7 +129,7 @@ class DashboardsTable extends PureComponent<Props, State> {
     return (
       <EmptyState size={ComponentSize.Large} testID="empty-dashboards-list">
         <EmptyState.Text>
-          Looks like you don’t have any <b>Dashboards</b>, why not create one?
+          Looks like you don't have any <b>Dashboards</b>, why not create one?
         </EmptyState.Text>
         <AddResourceDropdown
           onSelectNew={onCreateDashboard}