Merge pull request #11756 from influxdata/fix/orgtasks-inline-edit

Fix the inline edit for org tasks page
influxdata · Feb 7, 2019 · 2376491 · 2376491
2 parents cee8c6a + 28bb4ab
commit 2376491
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/ui/src/organizations/components/OrgTasksPage.tsx b/ui/src/organizations/components/OrgTasksPage.tsx
@@ -31,6 +31,7 @@ import {
 import {Task as TaskAPI, Organization} from '@influxdata/influx'
 import {Task} from 'src/tasks/containers/TasksPage'
 import {AppState} from 'src/types/v2'
+import {client} from 'src/utils/api'
 
 interface PassedInProps {
   tasks: Task[]
@@ -127,6 +128,7 @@ class OrgTasksPage extends PureComponent<Props, State> {
                 onSelect={this.handleSelectTask}
                 onAddTaskLabels={onAddTaskLabels}
                 onRemoveTaskLabels={onRemoveTaskLabels}
+                onUpdate={this.handleUpdateTask}
               />
             )}
           </FilterList>
@@ -136,6 +138,11 @@ class OrgTasksPage extends PureComponent<Props, State> {
     )
   }
 
+  private handleUpdateTask = async (task: Task) => {
+    await client.tasks.update(task.id, task)
+    this.props.onChange()
+  }
+
   private handleSelectTask = (task: Task) => {
     const {selectTask, orgID} = this.props
 

diff --git a/ui/src/shared/components/EditableName.tsx b/ui/src/shared/components/EditableName.tsx
@@ -15,7 +15,7 @@ import 'src/shared/components/EditableName.scss'
 interface Props {
   onUpdate: (name: string) => void
   name: string
-  onEditName: () => void
+  onEditName: (e?: any) => void
   hrefValue?: string
   placeholder?: string
 }

diff --git a/ui/src/tasks/components/TaskRow.tsx b/ui/src/tasks/components/TaskRow.tsx
@@ -26,6 +26,7 @@ interface Task extends TaskAPI {
 
 // Constants
 import {IconFont} from 'src/clockface/types/index'
+import EditableName from 'src/shared/components/EditableName'
 
 interface Props {
   task: Task
@@ -34,6 +35,7 @@ interface Props {
   onSelect: (task: Task) => void
   onClone: (task: Task) => void
   onEditLabels: (task: Task) => void
+  onUpdate?: (task: Task) => void
 }
 
 export class TaskRow extends PureComponent<Props & WithRouterProps> {
@@ -47,13 +49,7 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
             stackChildren={Stack.Columns}
             align={Alignment.Right}
           >
-            <a
-              href="#"
-              onClick={this.handleClick}
-              className="index-list--resource-name"
-            >
-              {task.name}
-            </a>
+            {this.resourceNames}
             {this.labels}
           </ComponentSpacer>
         </IndexList.Cell>
@@ -98,6 +94,33 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
     )
   }
 
+  private get resourceNames(): JSX.Element {
+    const {onUpdate, task} = this.props
+    if (onUpdate) {
+      return (
+        <EditableName
+          onUpdate={this.handleUpdateTask}
+          name={task.name}
+          onEditName={this.handleClick}
+        />
+      )
+    }
+    return (
+      <a
+        href="#"
+        onClick={this.handleClick}
+        className="index-list--resource-name"
+      >
+        {task.name}
+      </a>
+    )
+  }
+
+  private handleUpdateTask = (name: string) => {
+    const {onUpdate, task} = this.props
+    onUpdate({...task, name})
+  }
+
   private handleClick = e => {
     e.preventDefault()
 

diff --git a/ui/src/tasks/components/TasksList.tsx b/ui/src/tasks/components/TasksList.tsx
@@ -31,6 +31,7 @@ interface Props {
   totalCount: number
   onRemoveTaskLabels: typeof removeTaskLabelsAsync
   onAddTaskLabels: typeof addTaskLabelsAsync
+  onUpdate?: (task: Task) => void
 }
 
 type SortKey = keyof Task | 'organization.name'
@@ -121,7 +122,7 @@ export default class TasksList extends PureComponent<Props, State> {
   }
 
   private rows = (tasks: Task[]): JSX.Element => {
-    const {onActivate, onDelete, onSelect, onClone} = this.props
+    const {onActivate, onDelete, onSelect, onClone, onUpdate} = this.props
     const taskrows = (
       <>
         {tasks.map(t => (
@@ -133,6 +134,7 @@ export default class TasksList extends PureComponent<Props, State> {
             onClone={onClone}
             onSelect={onSelect}
             onEditLabels={this.handleStartEditingLabels}
+            onUpdate={onUpdate}
           />
         ))}
       </>