Move import logic to parent of import overlay

ui/src/shared/components/AddResourceDropdown.tsx

@@ -32,13 +32,14 @@ export default class AddResourceDropdown extends PureComponent<Props> {
   }
 
   private get optionItems(): JSX.Element[] {
+    const importOption = this.importOption
+    const newOption = this.newOption
     return [
-      <Dropdown.Item
-        id={this.newOption}
-        key={this.newOption}
-        value={this.newOption}
-      >
-        {this.newOption}
+      <Dropdown.Item id={newOption} key={newOption} value={newOption}>
+        {newOption}
+      </Dropdown.Item>,
+      <Dropdown.Item id={importOption} key={importOption} value={importOption}>
+        {importOption}
       </Dropdown.Item>,
     ]
   }
@@ -53,11 +54,12 @@ export default class AddResourceDropdown extends PureComponent<Props> {
 
   private handleSelect = (selection: string): void => {
     const {onSelectNew, onSelectImport} = this.props
-    switch (selection) {
-      case this.newOption:
-        onSelectNew()
-      case this.importOption:
-        onSelectImport()
+
+    if (selection === this.newOption) {
+      onSelectNew()
+    }
+    if (selection === this.importOption) {
+      onSelectImport()
     }
   }
 }

ui/src/shared/components/ImportOverlay.tsx

@@ -13,31 +13,22 @@ import {
 } from 'src/clockface'
 import {Button, ComponentColor} from '@influxdata/clockface'
 
-// Constants
-import {importSucceeded, importFailed} from 'src/shared/copy/notifications'
-
 // Styles
 import 'src/shared/components/ImportOverlay.scss'
 
 // Types
-import {Notification} from 'src/types/notifications'
 import TextArea from 'src/clockface/components/inputs/TextArea'
 
 enum ImportOption {
   Upload = 'upload',
   Paste = 'paste',
-  // Url = 'url',
 }
 
 interface Props {
-  isVisible: boolean
   onDismissOverlay: () => void
   resourceName: string
-  isResourceValid: (resource: any) => boolean
-  onImport: (resource: any) => void
-  notify: (message: Notification) => void
-  successNotification?: Notification
-  failureNotification?: Notification
+  onSubmit: (importString: string) => void
+  isVisible?: boolean
 }
 
 interface State {
@@ -47,9 +38,9 @@ interface State {
 
 export default class ImportOverlay extends PureComponent<Props, State> {
   public static defaultProps: Partial<Props> = {
-    successNotification: importSucceeded(),
-    failureNotification: importFailed(),
+    isVisible: true,
   }
+
   public state: State = {
     selectedImportOption: ImportOption.Upload,
     importContent: '',
@@ -126,40 +117,19 @@ export default class ImportOverlay extends PureComponent<Props, State> {
       return (
         <Button
           text={`Import JSON as ${resourceName}`}
-          onClick={this.handleImport}
+          onClick={this.submit}
           color={ComponentColor.Primary}
         />
       )
     }
   }
 
-  private handleImport = (): void => {
-    const {
-      notify,
-      onImport,
-      onDismissOverlay,
-      successNotification,
-      failureNotification,
-    } = this.props
+  private submit = () => {
     const {importContent} = this.state
+    const {onSubmit} = this.props
 
-    try {
-      const resource = JSON.parse(importContent)
-
-      if (_.isEmpty(resource)) {
-        // TODO maybe notify empty???
-        notify(failureNotification)
-        return
-      }
-
-      onImport(resource)
-      onDismissOverlay()
-      notify(successNotification)
-    } catch (error) {
-      notify(failureNotification)
-    }
+    onSubmit(importContent)
   }
-
   private clearImportContent = () => {
     this.handleSetImportContent('')
   }

ui/src/tasks/containers/TasksPage.tsx

@@ -2,6 +2,7 @@
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 import {InjectedRouter} from 'react-router'
+import _ from 'lodash'
 
 // Components
 import TasksHeader from 'src/tasks/components/TasksHeader'
@@ -28,9 +29,15 @@ import {
   removeTaskLabelsAsync,
   runTask,
 } from 'src/tasks/actions/v2'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
 
 // Constants
 import {allOrganizationsID} from 'src/tasks/constants'
+import {
+  taskImportFailed,
+  taskImportSuccess,
+  cantImportInvalidResource,
+} from 'src/shared/copy/v2/notifications'
 
 // Types
 import {Organization} from '@influxdata/influx'
@@ -54,6 +61,7 @@ interface ConnectedDispatchProps {
   onAddTaskLabels: typeof addTaskLabelsAsync
   onRemoveTaskLabels: typeof removeTaskLabelsAsync
   onRunTask: typeof runTask
+  notify: typeof notifyAction
 }
 
 interface ConnectedStateProps {
@@ -186,21 +194,31 @@ class TasksPage extends PureComponent<Props, State> {
 
   private get importOverlay(): JSX.Element {
     const {isImporting} = this.state
-    const {importTask} = this.props
 
     return (
       <ImportOverlay
         isVisible={isImporting}
         resourceName="Task"
         onDismissOverlay={this.handleToggleImportOverlay}
-        onImport={importTask}
-        isResourceValid={this.handleValidateTask}
+        onSubmit={this.importTask}
       />
     )
   }
 
-  private handleValidateTask = (): boolean => {
-    return true
+  private importTask = (importString: string): void => {
+    const {notify, importTask} = this.props
+    try {
+      const resource = JSON.parse(importString)
+      if (_.isEmpty(resource)) {
+        notify(cantImportInvalidResource('Task'))
+        return
+      }
+      importTask(resource)
+      this.handleToggleImportOverlay()
+      notify(taskImportSuccess())
+    } catch (error) {
+      notify(taskImportFailed(error))
+    }
   }
 
   private get filteredTasks(): Task[] {
@@ -261,6 +279,7 @@ const mstp = ({
 }
 
 const mdtp: ConnectedDispatchProps = {
+  notify: notifyAction,
   populateTasks,
   updateTaskStatus,
   updateTaskName,