From 8e50d814597a3962215467844f22d5155f849c79 Mon Sep 17 00:00:00 2001 From: Ken Hibino Date: Mon, 12 Jul 2021 07:26:34 -0700 Subject: [PATCH] Make task table rows clickable --- ui/src/components/ActiveTasksTable.tsx | 20 ++++++++++++++++++-- ui/src/components/ArchivedTasksTable.tsx | 16 ++++++++++++++-- ui/src/components/PendingTasksTable.tsx | 16 ++++++++++++++-- ui/src/components/RetryTasksTable.tsx | 17 +++++++++++++++-- ui/src/components/ScheduledTasksTable.tsx | 16 ++++++++++++++-- 5 files changed, 75 insertions(+), 10 deletions(-) diff --git a/ui/src/components/ActiveTasksTable.tsx b/ui/src/components/ActiveTasksTable.tsx index 3f4cc38..1073602 100644 --- a/ui/src/components/ActiveTasksTable.tsx +++ b/ui/src/components/ActiveTasksTable.tsx @@ -1,4 +1,5 @@ import React, { useState, useCallback } from "react"; +import { useHistory } from "react-router-dom"; import { connect, ConnectedProps } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; @@ -34,6 +35,7 @@ import { usePolling } from "../hooks"; import { ActiveTaskExtended } from "../reducers/tasksReducer"; import { durationBefore, timeAgo, uuidPrefix } from "../utils"; import { TableColumn } from "../types/table"; +import { taskDetailsPath } from "../paths"; const useStyles = makeStyles((theme) => ({ table: { @@ -257,6 +259,12 @@ function ActiveTasksTable(props: Props & ReduxProps) { ); } +const useRowStyles = makeStyles({ + root: { + cursor: "pointer", + }, +}); + interface RowProps { task: ActiveTaskExtended; isSelected: boolean; @@ -269,9 +277,16 @@ interface RowProps { function Row(props: RowProps) { const { task } = props; + const classes = useRowStyles(); + const history = useHistory(); return ( - - + history.push(taskDetailsPath(task.queue, task.id))} + > + e.stopPropagation()}> ) => props.onSelectChange(event.target.checked) @@ -302,6 +317,7 @@ function Row(props: RowProps) { align="center" onMouseEnter={props.onActionCellEnter} onMouseLeave={props.onActionCellLeave} + onClick={(e) => e.stopPropagation()} > {props.showActions ? ( diff --git a/ui/src/components/ArchivedTasksTable.tsx b/ui/src/components/ArchivedTasksTable.tsx index b9ca6c4..d5c333c 100644 --- a/ui/src/components/ArchivedTasksTable.tsx +++ b/ui/src/components/ArchivedTasksTable.tsx @@ -1,4 +1,5 @@ import React, { useCallback, useState } from "react"; +import { useHistory } from "react-router-dom"; import { connect, ConnectedProps } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; @@ -38,6 +39,7 @@ import { timeAgo, uuidPrefix } from "../utils"; import { usePolling } from "../hooks"; import { ArchivedTaskExtended } from "../reducers/tasksReducer"; import { TableColumn } from "../types/table"; +import { taskDetailsPath } from "../paths"; const useStyles = makeStyles((theme) => ({ table: { @@ -288,6 +290,9 @@ function ArchivedTasksTable(props: Props & ReduxProps) { } const useRowStyles = makeStyles((theme) => ({ + root: { + cursor: "pointer", + }, actionCell: { width: "96px", }, @@ -312,9 +317,15 @@ interface RowProps { function Row(props: RowProps) { const { task } = props; const classes = useRowStyles(); + const history = useHistory(); return ( - - + history.push(taskDetailsPath(task.queue, task.id))} + > + e.stopPropagation()}> ) => props.onSelectChange(event.target.checked) @@ -341,6 +352,7 @@ function Row(props: RowProps) { className={classes.actionCell} onMouseEnter={props.onActionCellEnter} onMouseLeave={props.onActionCellLeave} + onClick={(e) => e.stopPropagation()} > {props.showActions ? ( diff --git a/ui/src/components/PendingTasksTable.tsx b/ui/src/components/PendingTasksTable.tsx index f5e7d75..9df0e02 100644 --- a/ui/src/components/PendingTasksTable.tsx +++ b/ui/src/components/PendingTasksTable.tsx @@ -1,4 +1,5 @@ import React, { useCallback, useState } from "react"; +import { useHistory } from "react-router-dom"; import { connect, ConnectedProps } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; @@ -38,6 +39,7 @@ import { usePolling } from "../hooks"; import { uuidPrefix } from "../utils"; import { TableColumn } from "../types/table"; import { PendingTaskExtended } from "../reducers/tasksReducer"; +import { taskDetailsPath } from "../paths"; const useStyles = makeStyles((theme) => ({ table: { @@ -290,6 +292,9 @@ function PendingTasksTable(props: Props & ReduxProps) { } const useRowStyles = makeStyles({ + root: { + cursor: "pointer", + }, actionCell: { width: "96px", }, @@ -314,9 +319,15 @@ interface RowProps { function Row(props: RowProps) { const { task } = props; const classes = useRowStyles(); + const history = useHistory(); return ( - - + history.push(taskDetailsPath(task.queue, task.id))} + > + e.stopPropagation()}> ) => props.onSelectChange(event.target.checked) @@ -343,6 +354,7 @@ function Row(props: RowProps) { className={classes.actionCell} onMouseEnter={props.onActionCellEnter} onMouseLeave={props.onActionCellLeave} + onClick={(e) => e.stopPropagation()} > {props.showActions ? ( diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx index cda44d2..235fdd2 100644 --- a/ui/src/components/RetryTasksTable.tsx +++ b/ui/src/components/RetryTasksTable.tsx @@ -1,4 +1,5 @@ import React, { useCallback, useState } from "react"; +import { useHistory } from "react-router-dom"; import { connect, ConnectedProps } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; @@ -42,6 +43,7 @@ import { durationBefore, uuidPrefix } from "../utils"; import { usePolling } from "../hooks"; import { RetryTaskExtended } from "../reducers/tasksReducer"; import { TableColumn } from "../types/table"; +import { taskDetailsPath } from "../paths"; const useStyles = makeStyles((theme) => ({ table: { @@ -321,6 +323,9 @@ function RetryTasksTable(props: Props & ReduxProps) { } const useRowStyles = makeStyles({ + root: { + cursor: "pointer", + }, actionCell: { width: "140px", }, @@ -346,9 +351,16 @@ interface RowProps { function Row(props: RowProps) { const { task } = props; const classes = useRowStyles(); + const history = useHistory(); + return ( - - + history.push(taskDetailsPath(task.queue, task.id))} + > + e.stopPropagation()}> ) => props.onSelectChange(event.target.checked) @@ -377,6 +389,7 @@ function Row(props: RowProps) { className={classes.actionCell} onMouseEnter={props.onActionCellEnter} onMouseLeave={props.onActionCellLeave} + onClick={(e) => e.stopPropagation()} > {props.showActions ? ( diff --git a/ui/src/components/ScheduledTasksTable.tsx b/ui/src/components/ScheduledTasksTable.tsx index 7dffca1..da61687 100644 --- a/ui/src/components/ScheduledTasksTable.tsx +++ b/ui/src/components/ScheduledTasksTable.tsx @@ -1,4 +1,5 @@ import React, { useState, useCallback } from "react"; +import { useHistory } from "react-router-dom"; import { connect, ConnectedProps } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; @@ -42,6 +43,7 @@ import { durationBefore, uuidPrefix } from "../utils"; import { usePolling } from "../hooks"; import { ScheduledTaskExtended } from "../reducers/tasksReducer"; import { TableColumn } from "../types/table"; +import { taskDetailsPath } from "../paths"; const useStyles = makeStyles((theme) => ({ table: { @@ -318,6 +320,9 @@ function ScheduledTasksTable(props: Props & ReduxProps) { } const useRowStyles = makeStyles({ + root: { + cursor: "pointer", + }, actionCell: { width: "140px", }, @@ -343,9 +348,15 @@ interface RowProps { function Row(props: RowProps) { const { task } = props; const classes = useRowStyles(); + const history = useHistory(); return ( - - + history.push(taskDetailsPath(task.queue, task.id))} + > + e.stopPropagation()}> ) => props.onSelectChange(event.target.checked) @@ -371,6 +382,7 @@ function Row(props: RowProps) { className={classes.actionCell} onMouseEnter={props.onActionCellEnter} onMouseLeave={props.onActionCellLeave} + onClick={(e) => e.stopPropagation()} > {props.showActions ? (