feat(cmdClick-task): Added command click functionality to tasks names…

… to open in separate tab (#18480)
influxdata · Jun 12, 2020 · daad4b5 · daad4b5
1 parent 78b9475
commit daad4b5
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## v2.0.0-beta.13 [unreleased]
+
+### Features
+
+1. [18480](https://github.com/influxdata/influxdb/pull/18480): Allows tasks to open in new tabs
+
 ## v2.0.0-beta.12 [2020-06-11]
 
 ### Features

diff --git a/ui/src/tasks/actions/thunks.ts b/ui/src/tasks/actions/thunks.ts
@@ -282,15 +282,6 @@ export const setAllTaskOptionsByID = (taskID: string) => async (
   }
 }
 
-export const selectTask = (taskID: string) => (
-  dispatch: Dispatch<Action>,
-  getState: GetState
-) => {
-  const org = getOrg(getState())
-
-  dispatch(push(`/orgs/${org.id}/tasks/${taskID}`))
-}
-
 export const goToTasks = () => (
   dispatch: Dispatch<Action>,
   getState: GetState

diff --git a/ui/src/tasks/components/TaskCard.tsx b/ui/src/tasks/components/TaskCard.tsx
@@ -19,11 +19,7 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 import LastRunTaskStatus from 'src/shared/components/lastRunTaskStatus/LastRunTaskStatus'
 
 // Actions
-import {
-  addTaskLabel,
-  deleteTaskLabel,
-  selectTask,
-} from 'src/tasks/actions/thunks'
+import {addTaskLabel, deleteTaskLabel} from 'src/tasks/actions/thunks'
 
 // Types
 import {ComponentColor} from '@influxdata/clockface'
@@ -36,7 +32,6 @@ interface PassedProps {
   task: Task
   onActivate: (task: Task) => void
   onDelete: (task: Task) => void
-  onSelect: typeof selectTask
   onClone: (task: Task) => void
   onRunTask: (taskID: string) => void
   onUpdate: (name: string, taskID: string) => void
@@ -139,10 +134,18 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
-  private handleNameClick = (e: MouseEvent) => {
-    e.preventDefault()
-
-    this.props.onSelect(this.props.task.id)
+  private handleNameClick = (event: MouseEvent) => {
+    const {
+      params: {orgID},
+      router,
+      task,
+    } = this.props
+    const url = `/orgs/${orgID}/tasks/${task.id}`
+    if (event.metaKey) {
+      window.open(url, '_blank')
+    } else {
+      router.push(url)
+    }
   }
 
   private handleViewRuns = () => {

diff --git a/ui/src/tasks/components/TasksList.tsx b/ui/src/tasks/components/TasksList.tsx
@@ -11,7 +11,7 @@ import EmptyTasksList from 'src/tasks/components/EmptyTasksList'
 import {Task} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 import {Sort} from '@influxdata/clockface'
-import {selectTask, addTaskLabel, runTask} from 'src/tasks/actions/thunks'
+import {addTaskLabel, runTask} from 'src/tasks/actions/thunks'
 import {checkTaskLimits as checkTaskLimitsAction} from 'src/cloud/actions/limits'
 import {TaskSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
 
@@ -27,7 +27,6 @@ interface Props {
   onClone: (task: Task) => void
   onFilterChange: (searchTerm: string) => void
   totalCount: number
-  onSelect: typeof selectTask
   onAddTaskLabel: typeof addTaskLabel
   onRunTask: typeof runTask
   onUpdate: (name: string, taskID: string) => void
@@ -100,7 +99,6 @@ export default class TasksList extends PureComponent<Props, State> {
       sortType,
       onActivate,
       onDelete,
-      onSelect,
       onClone,
       onUpdate,
       onRunTask,
@@ -121,7 +119,6 @@ export default class TasksList extends PureComponent<Props, State> {
         onActivate={onActivate}
         onDelete={onDelete}
         onClone={onClone}
-        onSelect={onSelect}
         onUpdate={onUpdate}
         onRunTask={onRunTask}
         onFilterChange={onFilterChange}

diff --git a/ui/src/tasks/containers/TasksPage.tsx b/ui/src/tasks/containers/TasksPage.tsx
@@ -20,7 +20,6 @@ import {
   updateTaskStatus,
   updateTaskName,
   deleteTask,
-  selectTask,
   cloneTask,
   addTaskLabel,
   runTask,
@@ -56,7 +55,6 @@ interface ConnectedDispatchProps {
   updateTaskName: typeof updateTaskName
   deleteTask: typeof deleteTask
   cloneTask: typeof cloneTask
-  selectTask: typeof selectTask
   setSearchTerm: typeof setSearchTermAction
   setShowInactive: typeof setShowInactiveAction
   onAddTaskLabel: typeof addTaskLabel
@@ -109,7 +107,6 @@ class TasksPage extends PureComponent<Props, State> {
   public render(): JSX.Element {
     const {sortKey, sortDirection, sortType} = this.state
     const {
-      selectTask,
       setSearchTerm,
       updateTaskName,
       searchTerm,
@@ -160,7 +157,6 @@ class TasksPage extends PureComponent<Props, State> {
                       onDelete={this.handleDelete}
                       onCreate={this.handleCreateTask}
                       onClone={this.handleClone}
-                      onSelect={selectTask}
                       onAddTaskLabel={onAddTaskLabel}
                       onRunTask={onRunTask}
                       onFilterChange={setSearchTerm}
@@ -293,7 +289,6 @@ const mdtp: ConnectedDispatchProps = {
   updateTaskStatus,
   updateTaskName,
   deleteTask,
-  selectTask,
   cloneTask,
   setSearchTerm: setSearchTermAction,
   setShowInactive: setShowInactiveAction,