feat: added ability to export tasks using v2 template (#3973)

* feat: added ability to export import in tasks

* test: update create task test

* chore: clean up

* feat: make dropdown btn width dynamic

* test: updated create task e2e test

Author: blegesse-w

cypress/e2e/shared/tasks.test.ts

@@ -101,9 +101,8 @@ http.post(url: "https://foo.bar/baz", data: bytes(v: "body"))`
   })
 
   it('can create a task with an option parameter', () => {
-    cy.getByTestID('create-task--button')
-      .first()
-      .click()
+    cy.getByTestID('add-resource-dropdown--button').click()
+    cy.getByTestID('add-resource-dropdown--new').click()
 
     cy.focused()
 
@@ -633,9 +632,8 @@ from(bucket: "defbuck")
     ]
 
     tasks.forEach(task => {
-      cy.getByTestID('create-task--button')
-        .first()
-        .click()
+      cy.getByTestID('add-resource-dropdown--button').click()
+      cy.getByTestID('add-resource-dropdown--new').click()
 
       // Fill Task Form
       // focused() waits for monoco editor to get input focus

src/shared/components/AddResourceDropdown.tsx

@@ -47,7 +47,7 @@ class AddResourceDropdown extends PureComponent<Props> {
     const {titleText, status} = this.props
     return (
       <Dropdown
-        style={{width: '232px'}}
+        style={{width: 'fit-content'}}
         testID="add-resource-dropdown"
         button={(active, onClick) => (
           <Dropdown.Button

src/shared/containers/SetOrg.tsx

@@ -31,6 +31,7 @@ import {
   ScrapersIndex,
   SecretsIndex,
   TaskEditPage,
+  TaskImportOverlay,
   TaskPage,
   TaskRunsPage,
   TasksPage,
@@ -129,6 +130,10 @@ const SetOrg: FC = () => {
           <Route path={`${orgPath}/tasks/:id/runs`} component={TaskRunsPage} />
           <Route path={`${orgPath}/tasks/:id/edit`} component={TaskEditPage} />
           <Route path={`${orgPath}/tasks/new`} component={TaskPage} />
+          <Route
+            path={`${orgPath}/tasks/import`}
+            component={TaskImportOverlay}
+          />
           <Route path={`${orgPath}/tasks`} component={TasksPage} />
           {/* Data Explorer */}
           <Route

src/shared/containers/index.tsx

@@ -16,6 +16,9 @@ export const TaskRunsPage = lazy(() =>
 export const TaskEditPage = lazy(() =>
   import('src/tasks/containers/TaskEditPage')
 )
+export const TaskImportOverlay = lazy(() =>
+  import('src/tasks/components/TaskImportOverlay')
+)
 export const DashboardsIndex = lazy(() =>
   import('src/dashboards/components/dashboard_index/DashboardsIndex')
 )

src/tasks/actions/thunks.ts

@@ -5,6 +5,7 @@ import {normalize} from 'normalizr'
 
 // APIs
 import * as api from 'src/client'
+import {createResourceFromPkgerTemplate} from 'src/templates/api'
 
 // Schemas
 import {taskSchema, arrayOfTasks} from 'src/schemas/tasks'
@@ -52,6 +53,7 @@ import {checkTaskLimits} from 'src/cloud/actions/limits'
 import {getOrg} from 'src/organizations/selectors'
 import {getAll, getStatus} from 'src/resources/selectors'
 import {incrementCloneName} from 'src/utils/naming'
+import {event} from 'src/cloud/utils/reporting'
 
 // Types
 import {TASK_LIMIT} from 'src/resources/constants'
@@ -499,6 +501,33 @@ export const cancel = () => (dispatch: Dispatch<Action | RouterAction>) => {
   dispatch(goBack())
 }
 
+export const createTaskFromTemplate = (template: api.Template) => async (
+  dispatch: Dispatch<Action>,
+  getState: GetState
+) => {
+  try {
+    const state = getState()
+    const org = getOrg(state)
+
+    const variableName = template[0].spec.name
+
+    await createResourceFromPkgerTemplate(template, org.id)
+    await getTasks()(dispatch, getState)
+
+    event('task.create.from_template.success', {
+      name: variableName,
+    })
+
+    dispatch(notify(copy.taskImportSuccess()))
+  } catch (error) {
+    event('task.create.from_template.failure', {
+      template: template[0].meta.name,
+    })
+    console.error(error)
+    dispatch(notify(copy.taskImportFailed(error.message)))
+  }
+}
+
 export const updateScript = () => async (
   dispatch: Dispatch<Action>,
   getState: GetState

src/tasks/apis/index.ts

@@ -0,0 +1,24 @@
+// Utils
+import {downloadTextFile} from 'src/shared/utils/download'
+
+import {postTemplatesExport} from 'src/client'
+
+export const downloadTaskTemplate = async (task): Promise<void> => {
+  const resp = await postTemplatesExport({
+    data: {
+      resources: [
+        {
+          kind: 'Task',
+          id: task.id,
+        },
+      ],
+    },
+  })
+
+  if (resp.status === 500) {
+    throw new Error(resp.data.message)
+  }
+
+  const data = await resp.data
+  downloadTextFile(JSON.stringify(data), task.name, '.json', 'text/json')
+}

src/tasks/components/TaskCard.tsx

@@ -51,6 +51,7 @@ import {
   pinnedItemSuccess,
 } from 'src/shared/copy/notifications'
 import {notify} from 'src/shared/actions/notifications'
+import {downloadTaskTemplate} from 'src/tasks/apis'
 
 interface PassedProps {
   task: Task
@@ -293,12 +294,8 @@ export class TaskCard extends PureComponent<
   }
 
   private handleExport = () => {
-    const {
-      history,
-      task,
-      location: {pathname},
-    } = this.props
-    history.push(`${pathname}/${task.id}/export`)
+    const {task} = this.props
+    downloadTaskTemplate(task)
   }
 
   private get labels(): JSX.Element {

src/tasks/components/TaskImportOverlay.tsx

@@ -0,0 +1,80 @@
+import React, {PureComponent} from 'react'
+import {withRouter, RouteComponentProps} from 'react-router-dom'
+import {connect, ConnectedProps} from 'react-redux'
+
+// Components
+import ImportOverlay from 'src/shared/components/ImportOverlay'
+
+// Copy
+import {invalidJSON} from 'src/shared/copy/notifications'
+
+// Actions
+import {createTaskFromTemplate as createTaskFromTemplateAction} from 'src/tasks/actions/thunks'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+// Types
+import {ComponentStatus} from '@influxdata/clockface'
+
+// Utils
+import jsonlint from 'jsonlint-mod'
+
+interface State {
+  status: ComponentStatus
+}
+
+type ReduxProps = ConnectedProps<typeof connector>
+type Props = RouteComponentProps<{orgID: string}> & ReduxProps
+
+class TaskImportOverlay extends PureComponent<Props> {
+  public state: State = {
+    status: ComponentStatus.Default,
+  }
+
+  public render() {
+    return (
+      <ImportOverlay
+        onDismissOverlay={this.onDismiss}
+        resourceName="Task"
+        onSubmit={this.handleImportTask}
+        status={this.state.status}
+        updateStatus={this.updateOverlayStatus}
+      />
+    )
+  }
+
+  private onDismiss = () => {
+    const {history} = this.props
+
+    history.goBack()
+  }
+
+  private updateOverlayStatus = (status: ComponentStatus) =>
+    this.setState(() => ({status}))
+
+  private handleImportTask = (uploadContent: string) => {
+    const {createTaskFromTemplate, notify} = this.props
+
+    let template
+    this.updateOverlayStatus(ComponentStatus.Default)
+    try {
+      template = jsonlint.parse(uploadContent)
+    } catch (error) {
+      this.updateOverlayStatus(ComponentStatus.Error)
+      notify(invalidJSON(error.message))
+      return
+    }
+
+    createTaskFromTemplate(template)
+
+    this.onDismiss()
+  }
+}
+
+const mdtp = {
+  createTaskFromTemplate: createTaskFromTemplateAction,
+  notify: notifyAction,
+}
+
+const connector = connect(null, mdtp)
+
+export default connector(withRouter(TaskImportOverlay))

src/tasks/components/TasksHeader.tsx

@@ -4,8 +4,6 @@ import {Link} from 'react-router-dom'
 
 // Components
 import {
-  Button,
-  ComponentColor,
   InputLabel,
   SlideToggle,
   ComponentSize,
@@ -16,6 +14,7 @@ import {
   Icon,
   IconFont,
 } from '@influxdata/clockface'
+import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import ResourceSortDropdown from 'src/shared/components/resource_sort_dropdown/ResourceSortDropdown'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
@@ -36,6 +35,7 @@ import 'src/shared/components/cta.scss'
 
 interface Props {
   onCreateTask: () => void
+  onImportTask: () => void
   setShowInactive: () => void
   showInactive: boolean
   searchTerm: string
@@ -59,6 +59,7 @@ const TasksHeader: FC<Props> = ({
   sortKey,
   sortType,
   sortDirection,
+  onImportTask,
   onSort,
 }) => {
   const {flowsCTA, setFlowsCTA} = useContext(AppSettingContext)
@@ -67,6 +68,10 @@ const TasksHeader: FC<Props> = ({
     onCreateTask()
   }
 
+  const handleOpenImportOverlay = () => {
+    onImportTask()
+  }
+
   const recordClick = () => {
     event('Tasks List Page - Clicked Notebooks CTA')
   }
@@ -121,13 +126,10 @@ const TasksHeader: FC<Props> = ({
               onChange={setShowInactive}
             />
           </FlexBox>
-          <Button
-            icon={IconFont.Plus_New}
-            color={ComponentColor.Primary}
-            text="Create Task"
-            titleText="Click to create a Task"
-            onClick={creator}
-            testID="create-task--button"
+          <AddResourceDropdown
+            resourceName="Task"
+            onSelectNew={creator}
+            onSelectImport={handleOpenImportOverlay}
           />
         </Page.ControlBarRight>
       </Page.ControlBar>

src/tasks/containers/TasksPage.test.tsx

@@ -218,7 +218,13 @@ describe('Tasks.Containers.TasksPage', () => {
 
   describe('create tasks', () => {
     it('triggers create a new task', () => {
-      fireEvent.click(screen.getByTestId('create-task--button'))
+      const dropdownCreateButton = ui.getByTestId(
+        'add-resource-dropdown--button'
+      )
+      fireEvent.click(dropdownCreateButton)
+
+      const newTaskButton = ui.getByTestId('add-resource-dropdown--new')
+      fireEvent.click(newTaskButton)
 
       expect(localHistory.entries).toEqual(
         expect.arrayContaining([