Add styles to empty state dropdown

Add dropdown to Dashboards empty state
Add dropdown to tasks empty state
Add missing import property
Fix e2e tests

ui/cypress/e2e/dashboardsIndex.test.ts

@@ -22,6 +22,8 @@ describe('Dashboards', () => {
       .contains('Create')
       .click()
 
+    cy.getByTestID('dropdown--item New Dashboard').click()
+
     cy.visit('/dashboards')
 
     cy.getByTestID('dashboard-card').should('have.length', 1)

ui/cypress/e2e/tasks.test.ts

@@ -18,6 +18,8 @@ describe('Tasks', () => {
       cy.contains('Create').click()
     })
 
+    cy.getByTestID('dropdown--item New Task').click()
+
     cy.getByInputName('name').type(taskName)
     cy.getByInputName('interval').type('1d')
     cy.getByInputName('offset').type('20m')
@@ -98,6 +100,8 @@ describe('Tasks', () => {
       cy.contains('Create').click()
     })
 
+    cy.getByTestID('dropdown--item New Task').click()
+
     cy.getByInputName('name').type('🦄ask')
     cy.getByInputName('interval').type('1d')
     cy.getByInputName('offset').type('20m')

ui/src/clockface/components/empty_state/EmptyState.scss

@@ -38,7 +38,13 @@
     margin-top: ceil($fontSize * 0.75);
   }
 
-  .button {
+  .empty-state--text + .button,
+  .empty-state--text + .dropdown {
+    margin-top: $padding;
+  }
+
+  .empty-state--sub-text + .button,
+  .empty-state--sub-text + .dropdown {
     margin-top: $padding;
   }
 

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

@@ -115,6 +115,7 @@ class DashboardIndex extends PureComponent<Props, State> {
                 searchTerm={searchTerm}
                 showOwnerColumn={true}
                 onFilterChange={this.handleFilterDashboards}
+                onImportDashboard={this.summonImportOverlay}
               />
             </div>
           </Page.Contents>

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

@@ -25,6 +25,7 @@ interface Props {
   searchTerm: string
   showOwnerColumn: boolean
   filterComponent?: () => JSX.Element
+  onImportDashboard: () => void
 }
 
 @ErrorHandling
@@ -40,6 +41,7 @@ export default class DashboardsIndexContents extends Component<Props> {
       dashboards,
       filterComponent,
       onFilterChange,
+      onImportDashboard,
     } = this.props
 
     return (
@@ -61,6 +63,7 @@ export default class DashboardsIndexContents extends Component<Props> {
               onUpdateDashboard={onUpdateDashboard}
               showOwnerColumn={showOwnerColumn}
               onFilterChange={onFilterChange}
+              onImportDashboard={onImportDashboard}
             />
           )}
         </FilterList>

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

@@ -4,13 +4,9 @@ import {withRouter, WithRouterProps} from 'react-router'
 import _ from 'lodash'
 
 // Components
-import {
-  Button,
-  IconFont,
-  ComponentSize,
-  ComponentColor,
-} from '@influxdata/clockface'
+import {ComponentSize} from '@influxdata/clockface'
 import {EmptyState, ResourceList} from 'src/clockface'
+import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 import DashboardCards from 'src/dashboards/components/dashboard_index/DashboardCards'
 import SortingHat from 'src/shared/components/sorting_hat/SortingHat'
 
@@ -28,6 +24,7 @@ interface Props {
   onFilterChange: (searchTerm: string) => void
   showOwnerColumn: boolean
   filterComponent?: () => JSX.Element
+  onImportDashboard: () => void
 }
 
 interface DatedDashboard extends Dashboard {
@@ -146,7 +143,7 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
   }
 
   private get emptyState(): JSX.Element {
-    const {onCreateDashboard, searchTerm} = this.props
+    const {onCreateDashboard, searchTerm, onImportDashboard} = this.props
 
     if (searchTerm) {
       return (
@@ -162,12 +159,10 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
           text="Looks like you don’t have any Dashboards , why not create one?"
           highlightWords={['Dashboards']}
         />
-        <Button
-          text="Create a Dashboard"
-          icon={IconFont.Plus}
-          color={ComponentColor.Primary}
-          onClick={onCreateDashboard}
-          size={ComponentSize.Medium}
+        <AddResourceDropdown
+          onSelectNew={onCreateDashboard}
+          onSelectImport={onImportDashboard}
+          resourceName="Dashboard"
         />
       </EmptyState>
     )

ui/src/organizations/components/Dashboards.tsx

@@ -92,6 +92,7 @@ class Dashboards extends PureComponent<Props, State> {
           searchTerm={searchTerm}
           showOwnerColumn={false}
           onFilterChange={this.handleFilterUpdate}
+          onImportDashboard={this.summonImportOverlay}
         />
       </>
     )

ui/src/organizations/components/OrgTasksPage.tsx

@@ -123,6 +123,7 @@ class OrgTasksPage extends PureComponent<Props, State> {
                 onUpdate={this.handleUpdateTask}
                 onRunTask={onRunTask}
                 onFilterChange={setSearchTerm}
+                onImportTask={this.handleImportTask}
               />
             )}
           </FilterList>

ui/src/tasks/components/EmptyTasksList.tsx

@@ -2,23 +2,20 @@
 import React, {PureComponent} from 'react'
 
 // Components
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  IconFont,
-} from '@influxdata/clockface'
+import {ComponentSize} from '@influxdata/clockface'
+import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 import {EmptyState} from 'src/clockface'
 
 interface Props {
   searchTerm: string
   onCreate: () => void
   totalCount: number
+  onImportTask: () => void
 }
 
 export default class EmptyTasksLists extends PureComponent<Props> {
   public render() {
-    const {searchTerm, onCreate, totalCount} = this.props
+    const {searchTerm, onCreate, totalCount, onImportTask} = this.props
 
     if (totalCount && searchTerm === '') {
       return (
@@ -37,12 +34,10 @@ export default class EmptyTasksLists extends PureComponent<Props> {
             text={"Looks like you don't have any Tasks , why not create one?"}
             highlightWords={['Tasks']}
           />
-          <Button
-            size={ComponentSize.Medium}
-            color={ComponentColor.Primary}
-            icon={IconFont.Plus}
-            text="Create Task"
-            onClick={onCreate}
+          <AddResourceDropdown
+            onSelectNew={onCreate}
+            onSelectImport={onImportTask}
+            resourceName="Task"
           />
         </EmptyState>
       )

ui/src/tasks/components/TasksList.test.tsx

@@ -19,6 +19,7 @@ const setup = (override?) => {
     onDelete: oneTestFunction,
     onCreate: secondTestFunction,
     onSelect: oneTestFunction,
+    onImportTask: oneTestFunction,
     ...override,
   }
 

ui/src/tasks/components/TasksList.tsx

@@ -33,6 +33,7 @@ interface Props {
   onRunTask: typeof runTask
   onUpdate: (task: Task) => void
   filterComponent?: () => JSX.Element
+  onImportTask: () => void
 }
 
 type SortKey = keyof Task | 'organization.name'
@@ -56,7 +57,13 @@ export default class TasksList extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {searchTerm, onCreate, totalCount, filterComponent} = this.props
+    const {
+      searchTerm,
+      onCreate,
+      totalCount,
+      filterComponent,
+      onImportTask,
+    } = this.props
     const {sortKey, sortDirection} = this.state
 
     const headerKeys: SortKey[] = [
@@ -108,6 +115,7 @@ export default class TasksList extends PureComponent<Props, State> {
                 searchTerm={searchTerm}
                 onCreate={onCreate}
                 totalCount={totalCount}
+                onImportTask={onImportTask}
               />
             }
           >

ui/src/tasks/components/__snapshots__/TasksList.test.tsx.snap

@@ -39,6 +39,7 @@ exports[`TasksList rendering renders 1`] = `
       emptyState={
         <EmptyTasksLists
           onCreate={[Function]}
+          onImportTask={[Function]}
           searchTerm=""
         />
       }

ui/src/tasks/containers/TasksPage.tsx

@@ -137,6 +137,7 @@ class TasksPage extends PureComponent<Props, State> {
                       onFilterChange={setSearchTerm}
                       filterComponent={() => this.search}
                       onUpdate={updateTaskName}
+                      onImportTask={this.summonOverlay}
                     />
                   )}
                 </FilterList>