From 6171aceafefc77689537cdc03aebaec0f00a0c0d Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie.gray@gmail.com>
Date: Thu, 14 Feb 2019 16:02:16 -0800
Subject: [PATCH] Create a generic dropdown for creating/importing a resource

---
 .../dashboard_index/DashboardsIndex.tsx       |  9 +-
 ui/src/organizations/components/Variables.tsx | 89 ++++++++++---------
 .../components/AddResourceDropdown.tsx}       | 47 ++++++----
 3 files changed, 80 insertions(+), 65 deletions(-)
 rename ui/src/{dashboards/components/dashboard_index/CreateDashboardDropdown.tsx => shared/components/AddResourceDropdown.tsx} (50%)

diff --git a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
index 5d751dde55e..770e229930e 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
@@ -9,7 +9,7 @@ import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/D
 import {Page} from 'src/pageLayout'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import {OverlayTechnology} from 'src/clockface'
-import CreateDashboardDropdown from 'src/dashboards/components/dashboard_index/CreateDashboardDropdown'
+import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 import ImportOverlay from 'src/shared/components/ImportOverlay'
 import ExportOverlay from 'src/shared/components/ExportOverlay'
 import EditLabelsOverlay from 'src/shared/components/EditLabelsOverlay'
@@ -119,9 +119,10 @@ class DashboardIndex extends PureComponent<Props, State> {
                 placeholderText="Filter dashboards by name..."
                 onSearch={this.filterDashboards}
               />
-              <CreateDashboardDropdown
-                onNewDashboard={this.handleCreateDashboard}
-                onToggleOverlay={this.handleToggleImportOverlay}
+              <AddResourceDropdown
+                onSelectNew={this.handleCreateDashboard}
+                onSelectImport={this.handleToggleImportOverlay}
+                resourceName="Dashboard"
               />
             </Page.Header.Right>
           </Page.Header>
diff --git a/ui/src/organizations/components/Variables.tsx b/ui/src/organizations/components/Variables.tsx
index f20b33cecb1..71de8975fc3 100644
--- a/ui/src/organizations/components/Variables.tsx
+++ b/ui/src/organizations/components/Variables.tsx
@@ -9,6 +9,7 @@ import {Button, ComponentSize} from '@influxdata/clockface'
 import VariableList from 'src/organizations/components/VariableList'
 import {Input, OverlayTechnology, EmptyState} from 'src/clockface'
 import FilterList from 'src/shared/components/Filter'
+import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 
 // Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
@@ -35,21 +36,50 @@ interface Props {
 
 interface State {
   searchTerm: string
-  overlayState: OverlayState
+  createOverlayState: OverlayState
+  importOverlayState: OverlayState
 }
 
 export default class Variables extends PureComponent<Props, State> {
+  private get emptyState(): JSX.Element {
+    const {orgName} = this.props
+    const {searchTerm} = this.state
+
+    if (_.isEmpty(searchTerm)) {
+      return (
+        <EmptyState size={ComponentSize.Medium}>
+          <EmptyState.Text
+            text={`${orgName} does not own any Variables , why not create one?`}
+            highlightWords={['Buckets']}
+          />
+          <Button
+            text="Create Variable"
+            icon={IconFont.Plus}
+            color={ComponentColor.Primary}
+            onClick={this.handleOpenCreateOverlay}
+          />
+        </EmptyState>
+      )
+    }
+
+    return (
+      <EmptyState size={ComponentSize.Medium}>
+        <EmptyState.Text text="No Variables match your query" />
+      </EmptyState>
+    )
+  }
   constructor(props: Props) {
     super(props)
     this.state = {
       searchTerm: '',
-      overlayState: OverlayState.Closed,
+      createOverlayState: OverlayState.Closed,
+      importOverlayState: OverlayState.Closed,
     }
   }
 
   public render() {
     const {variables, orgID} = this.props
-    const {searchTerm, overlayState} = this.state
+    const {searchTerm, createOverlayState} = this.state
 
     return (
       <>
@@ -62,11 +92,10 @@ export default class Variables extends PureComponent<Props, State> {
             onChange={this.handleFilterChange}
             onBlur={this.handleFilterBlur}
           />
-          <Button
-            text="Create Variable"
-            icon={IconFont.Plus}
-            color={ComponentColor.Primary}
-            onClick={this.handleOpenModal}
+          <AddResourceDropdown
+            resourceName="Variable"
+            onSelectImport={this.handleOpenImportOverlay}
+            onSelectNew={this.handleOpenCreateOverlay}
           />
         </TabbedPageHeader>
         <FilterList<Variable>
@@ -82,10 +111,10 @@ export default class Variables extends PureComponent<Props, State> {
             />
           )}
         </FilterList>
-        <OverlayTechnology visible={overlayState === OverlayState.Open}>
+        <OverlayTechnology visible={createOverlayState === OverlayState.Open}>
           <CreateVariableOverlay
             onCreateVariable={this.handleCreateVariable}
-            onCloseModal={this.handleCloseModal}
+            onCloseModal={this.handleCloseCreateOverlay}
             orgID={orgID}
           />
         </OverlayTechnology>
@@ -100,12 +129,14 @@ export default class Variables extends PureComponent<Props, State> {
 
   private handleFilterBlur() {}
 
-  private handleOpenModal = (): void => {
-    this.setState({overlayState: OverlayState.Open})
+  private handleOpenImportOverlay = (): void => {}
+
+  private handleOpenCreateOverlay = (): void => {
+    this.setState({createOverlayState: OverlayState.Open})
   }
 
-  private handleCloseModal = (): void => {
-    this.setState({overlayState: OverlayState.Closed})
+  private handleCloseCreateOverlay = (): void => {
+    this.setState({createOverlayState: OverlayState.Closed})
   }
 
   private handleCreateVariable = async (variable: Variable): Promise<void> => {
@@ -119,7 +150,7 @@ export default class Variables extends PureComponent<Props, State> {
     }
 
     onChange()
-    this.handleCloseModal()
+    this.handleCloseCreateOverlay()
   }
 
   private handleDeleteVariable = async (variable: Variable): Promise<void> => {
@@ -134,32 +165,4 @@ export default class Variables extends PureComponent<Props, State> {
 
     onChange()
   }
-
-  private get emptyState(): JSX.Element {
-    const {orgName} = this.props
-    const {searchTerm} = this.state
-
-    if (_.isEmpty(searchTerm)) {
-      return (
-        <EmptyState size={ComponentSize.Medium}>
-          <EmptyState.Text
-            text={`${orgName} does not own any Variables , why not create one?`}
-            highlightWords={['Buckets']}
-          />
-          <Button
-            text="Create Variable"
-            icon={IconFont.Plus}
-            color={ComponentColor.Primary}
-            onClick={this.handleOpenModal}
-          />
-        </EmptyState>
-      )
-    }
-
-    return (
-      <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text text="No Variables match your query" />
-      </EmptyState>
-    )
-  }
 }
diff --git a/ui/src/dashboards/components/dashboard_index/CreateDashboardDropdown.tsx b/ui/src/shared/components/AddResourceDropdown.tsx
similarity index 50%
rename from ui/src/dashboards/components/dashboard_index/CreateDashboardDropdown.tsx
rename to ui/src/shared/components/AddResourceDropdown.tsx
index 3c91b2bad83..50016c0e565 100644
--- a/ui/src/dashboards/components/dashboard_index/CreateDashboardDropdown.tsx
+++ b/ui/src/shared/components/AddResourceDropdown.tsx
@@ -8,14 +8,10 @@ import {Dropdown, DropdownMode} from 'src/clockface'
 // Types
 import {IconFont, ComponentColor, ComponentSize} from '@influxdata/clockface'
 
-enum CreateOption {
-  New = 'New Dashboard',
-  Import = 'Import Dashboard',
-}
-
 interface Props {
-  onNewDashboard: () => void
-  onToggleOverlay: () => void
+  onSelectNew: () => void
+  onSelectImport: () => void
+  resourceName: string
 }
 
 export default class CreateDashboardDropdown extends PureComponent<Props> {
@@ -23,7 +19,7 @@ export default class CreateDashboardDropdown extends PureComponent<Props> {
     return (
       <Dropdown
         mode={DropdownMode.ActionList}
-        titleText={'Create Dashboard'}
+        titleText={`Create ${this.props.resourceName}`}
         icon={IconFont.Plus}
         buttonColor={ComponentColor.Primary}
         buttonSize={ComponentSize.Small}
@@ -38,22 +34,37 @@ export default class CreateDashboardDropdown extends PureComponent<Props> {
   private get optionItems(): JSX.Element[] {
     return [
       <Dropdown.Item
-        id={CreateOption.New}
-        key={CreateOption.New}
-        value={CreateOption.New}
+        id={this.newOption}
+        key={this.newOption}
+        value={this.newOption}
+      >
+        {this.newOption}
+      </Dropdown.Item>,
+      <Dropdown.Item
+        id={this.importOption}
+        key={this.importOption}
+        value={this.importOption}
       >
-        {CreateOption.New}
+        {this.importOption}
       </Dropdown.Item>,
     ]
   }
 
-  private handleSelect = (selection: CreateOption): void => {
-    const {onNewDashboard, onToggleOverlay} = this.props
+  private get newOption(): string {
+    return `New ${this.props.resourceName}`
+  }
+
+  private get importOption(): string {
+    return `Import ${this.props.resourceName}`
+  }
+
+  private handleSelect = (selection: string): void => {
+    const {onSelectNew, onSelectImport} = this.props
     switch (selection) {
-      case CreateOption.New:
-        onNewDashboard()
-      case CreateOption.Import:
-        onToggleOverlay()
+      case this.newOption:
+        onSelectNew()
+      case this.importOption:
+        onSelectImport()
     }
   }
 }