Merge pull request #11156 from influxdata/feat/delete-task-adminui

Add the ability to delete a task from organization

ui/src/organizations/components/TaskList.tsx

@@ -1,16 +1,17 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {Link} from 'react-router'
 
 // Components
 import {IndexList} from 'src/clockface'
 
 // Types
 import {Task} from 'src/api'
+import TaskRow from 'src/organizations/components/TaskRow'
 
 interface Props {
   tasks: Task[]
   emptyState: JSX.Element
+  onDelete: (taskID: string) => void
 }
 
 export default class TaskList extends PureComponent<Props> {
@@ -30,14 +31,9 @@ export default class TaskList extends PureComponent<Props> {
   }
 
   private get rows(): JSX.Element[] {
-    return this.props.tasks.map(task => (
+    const {tasks, onDelete} = this.props
-      <IndexList.Row key={task.id}>
+    return tasks.map(task => (
-        <IndexList.Cell>
+      <TaskRow key={task.id} task={task} onDelete={onDelete} />
-          <Link to={`/tasks/${task.id}`}>{task.name}</Link>
-        </IndexList.Cell>
-        <IndexList.Cell>{task.owner.name}</IndexList.Cell>
-        <IndexList.Cell revealOnHover={true}>DELETE</IndexList.Cell>
-      </IndexList.Row>
     ))
   }
 }

ui/src/organizations/components/TaskRow.tsx

@@ -0,0 +1,48 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {Link} from 'react-router'
+
+// Components
+import {
+  ComponentSize,
+  IndexList,
+  ConfirmationButton,
+  Alignment,
+} from 'src/clockface'
+
+// Api
+import {Task} from 'src/api'
+
+interface Props {
+  task: Task
+  onDelete: (taskID: string) => void
+}
+
+export default class TaskRow extends PureComponent<Props> {
+  public render() {
+    const {task} = this.props
+
+    return (
+      <>
+        <IndexList.Row key={task.id}>
+          <IndexList.Cell>
+            <Link to={`/tasks/${task.id}`}>{task.name}</Link>
+          </IndexList.Cell>
+          <IndexList.Cell>{task.owner.name}</IndexList.Cell>
+          <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
+            <ConfirmationButton
+              size={ComponentSize.ExtraSmall}
+              text="Delete"
+              confirmText="Confirm"
+              onConfirm={this.handleDeleteTask}
+            />
+          </IndexList.Cell>
+        </IndexList.Row>
+      </>
+    )
+  }
+
+  private handleDeleteTask = (): void => {
+    this.props.onDelete(this.props.task.id)
+  }
+}

ui/src/organizations/components/Tasks.tsx

@@ -10,10 +10,12 @@ import FilterList from 'src/shared/components/Filter'
 
 // Types
 import {Task} from 'src/api'
+import {deleteTask} from 'src/tasks/api/v2/index'
 
 interface Props {
   tasks: Task[]
   orgName: string
+  onChange: () => void
 }
 
 interface State {
@@ -46,10 +48,16 @@ export default class Tasks extends PureComponent<Props, State> {
         </TabbedPageHeader>
         <FilterList<Task>
           searchTerm={searchTerm}
-          searchKeys={['name', 'owner.name']}
+          searchKeys={['name']}
           list={tasks}
         >
-          {ts => <TaskList tasks={ts} emptyState={this.emptyState} />}
+          {ts => (
+            <TaskList
+              tasks={ts}
+              emptyState={this.emptyState}
+              onDelete={this.handleDeleteTask}
+            />
+          )}
         </FilterList>
       </>
     )
@@ -84,4 +92,9 @@ export default class Tasks extends PureComponent<Props, State> {
       </EmptyState>
     )
   }
+
+  private handleDeleteTask = async (taskID: string) => {
+    await deleteTask(taskID)
+    this.props.onChange()
+  }
 }

ui/src/organizations/containers/OrganizationView.tsx

@@ -138,9 +138,13 @@ class OrganizationView extends PureComponent<Props> {
                 title="Tasks"
               >
                 <GetOrgResources<Task[]> organization={org} fetcher={getTasks}>
-                  {(tasks, loading) => (
+                  {(tasks, loading, fetch) => (
                     <Spinner loading={loading}>
-                      <Tasks tasks={tasks} orgName={org.name} />
+                      <Tasks
+                        tasks={tasks}
+                        orgName={org.name}
+                        onChange={fetch}
+                      />
                     </Spinner>
                   )}
                 </GetOrgResources>