Feature/display adhooc or scheduled (#731)

* Add scheduled sufix to the requester name Signed-off-by: Angatupyry <fierrofenix@gmail.com> * Include icon in the requester column Signed-off-by: Angatupyry <fierrofenix@gmail.com> * Remove __shceduled and display only the username from schedule task and add Tooltip to the icons Signed-off-by: Angatupyry <fierrofenix@gmail.com> --------- Signed-off-by: Angatupyry <fierrofenix@gmail.com>
open-rmf · Aug 4, 2023 · 0aa093d · 0aa093d
1 parent 87bcb6f
commit 0aa093d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/packages/react-components/lib/tasks/create-task.tsx b/packages/react-components/lib/tasks/create-task.tsx
@@ -884,8 +884,10 @@ export function CreateTaskForm({
       return;
     }
 
+    const requester = scheduling ? `${user}__scheduled` : user;
+
     for (const t of taskRequests) {
-      t.requester = user;
+      t.requester = requester;
       t.unix_millis_request_time = Date.now();
     }
 

diff --git a/packages/react-components/lib/tasks/task-table-datagrid.tsx b/packages/react-components/lib/tasks/task-table-datagrid.tsx
@@ -11,9 +11,10 @@ import {
   GridFilterModel,
   GridSortModel,
 } from '@mui/x-data-grid';
-import { styled, TextField } from '@mui/material';
+import { styled, TextField, Stack, Typography, Tooltip } from '@mui/material';
 import * as React from 'react';
 import { TaskState, Status } from 'api-client';
+import { InsertInvitation as ScheduleIcon, Person as UserIcon } from '@mui/icons-material/';
 
 const classes = {
   taskActiveCell: 'MuiDataGrid-cell-active-cell',
@@ -79,6 +80,37 @@ export interface TableDataGridState {
   setSortFields: React.Dispatch<React.SetStateAction<SortFields>>;
 }
 
+const TaskRequester = (requester: string | null): JSX.Element => {
+  if (!requester) {
+    return <Typography variant="body1">unknown</Typography>;
+  }
+
+  /** When a task is created as scheduled,
+   we save the requester as USERNAME__scheduled.
+   Therefore, we remove the __schedule because the different icon is enough indicator to know
+   if the task was adhoc or scheduled.
+  */
+  return (
+    <Stack direction="row" alignItems="center" gap={1}>
+      {requester.includes('scheduled') ? (
+        <>
+          <Tooltip title="User scheduled">
+            <ScheduleIcon />
+          </Tooltip>
+          <Typography variant="body1">{requester.split('__')[0]}</Typography>
+        </>
+      ) : (
+        <>
+          <Tooltip title="User submitted">
+            <UserIcon />
+          </Tooltip>
+          <Typography variant="body1">{requester}</Typography>
+        </>
+      )}
+    </Stack>
+  );
+};
+
 export function TaskDataGridTable({
   tasks,
   onTaskClick,
@@ -134,11 +166,10 @@ export function TaskDataGridTable({
     {
       field: 'requester',
       headerName: 'Requester',
-      width: 150,
+      minWidth: 160,
       editable: false,
-      valueGetter: (params: GridValueGetterParams) =>
-        params.row.booking.requester ? params.row.booking.requester : 'unknown',
-      flex: 1,
+      renderCell: (cellValues) => TaskRequester(cellValues.row.booking.requester),
+      flex: 2,
       filterOperators: getMinimalStringFilterOperators,
       filterable: true,
     },