Direct dispatch to fleet or robot

packages/dashboard/src/components/appbar.tsx

@@ -43,12 +43,12 @@ import {
 import { AlertRequest, FireAlarmTriggerState, TaskFavorite } from 'api-client';
 import { formatDistance } from 'date-fns';
 import React from 'react';
-import { ConfirmationDialog, CreateTaskForm, CreateTaskFormProps } from 'react-components';
+import { ConfirmationDialog, TaskForm, TaskFormProps } from 'react-components';
 import { Subscription } from 'rxjs';
 
 import { useAppController } from '../hooks/use-app-controller';
 import { useAuthenticator } from '../hooks/use-authenticator';
-import { useCreateTaskFormData } from '../hooks/use-create-task-form';
+import { useTaskFormData } from '../hooks/use-create-task-form';
 import { useResources } from '../hooks/use-resources';
 import { useRmfApi } from '../hooks/use-rmf-api';
 import { useSettings } from '../hooks/use-settings';
@@ -117,7 +117,7 @@ export const AppBar = React.memo(
     >(undefined);
 
     const { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames, fleets } =
-      useCreateTaskFormData(rmfApi);
+      useTaskFormData(rmfApi);
     const username = profile.user.username;
 
     async function handleLogout(): Promise<void> {
@@ -147,7 +147,7 @@ export const AppBar = React.memo(
       return () => subs.forEach((s) => s.unsubscribe());
     }, [rmfApi]);
 
-    const dispatchTaskCallback = React.useCallback<Required<CreateTaskFormProps>['onDispatchTask']>(
+    const dispatchTaskCallback = React.useCallback<Required<TaskFormProps>['onDispatchTask']>(
       async (taskRequest, robotDispatchTarget) => {
         if (!rmfApi) {
           throw new Error('tasks api not available');
@@ -158,7 +158,7 @@ export const AppBar = React.memo(
       [rmfApi],
     );
 
-    const scheduleTaskCallback = React.useCallback<Required<CreateTaskFormProps>['onScheduleTask']>(
+    const scheduleTaskCallback = React.useCallback<Required<TaskFormProps>['onScheduleTask']>(
       async (taskRequest, schedule) => {
         if (!rmfApi) {
           throw new Error('tasks api not available');
@@ -182,19 +182,15 @@ export const AppBar = React.memo(
       return () => sub.unsubscribe();
     }, [rmfApi]);
 
-    const submitFavoriteTask = React.useCallback<
-      Required<CreateTaskFormProps>['submitFavoriteTask']
-    >(
+    const submitFavoriteTask = React.useCallback<Required<TaskFormProps>['submitFavoriteTask']>(
       async (taskFavoriteRequest) => {
         await rmfApi.tasksApi.postFavoriteTaskFavoriteTasksPost(taskFavoriteRequest);
         AppEvents.refreshFavoriteTasks.next();
       },
       [rmfApi],
     );
 
-    const deleteFavoriteTask = React.useCallback<
-      Required<CreateTaskFormProps>['deleteFavoriteTask']
-    >(
+    const deleteFavoriteTask = React.useCallback<Required<TaskFormProps>['deleteFavoriteTask']>(
       async (favoriteTask) => {
         if (!favoriteTask.id) {
           throw new Error('Id is needed');
@@ -457,7 +453,7 @@ export const AppBar = React.memo(
         </Menu>
 
         {openCreateTaskForm && (
-          <CreateTaskForm
+          <TaskForm
             user={username ? username : 'unknown user'}
             fleets={fleets}
             tasksToDisplay={taskRegistry.taskDefinitions}
@@ -472,6 +468,7 @@ export const AppBar = React.memo(
             onClose={() => setOpenCreateTaskForm(false)}
             onDispatchTask={dispatchTaskCallback}
             onScheduleTask={scheduleTaskCallback}
+            onEditScheduleTask={undefined}
             submitFavoriteTask={submitFavoriteTask}
             deleteFavoriteTask={deleteFavoriteTask}
             onSuccess={() => {

packages/dashboard/src/components/tasks/task-schedule.tsx

@@ -13,14 +13,14 @@ import { ScheduledTask, ScheduledTaskScheduleOutput as ApiSchedule } from 'api-c
 import React from 'react';
 import {
   ConfirmationDialog,
-  CreateTaskForm,
-  CreateTaskFormProps,
   EventEditDeletePopup,
   Schedule,
+  TaskForm,
+  TaskFormProps,
 } from 'react-components';
 
 import { useAppController } from '../../hooks/use-app-controller';
-import { useCreateTaskFormData } from '../../hooks/use-create-task-form';
+import { useTaskFormData } from '../../hooks/use-create-task-form';
 import { useRmfApi } from '../../hooks/use-rmf-api';
 import { useTaskRegistry } from '../../hooks/use-task-registry';
 import { useUserProfile } from '../../hooks/use-user-profile';
@@ -72,7 +72,7 @@ export const TaskSchedule = () => {
   const { showAlert } = useAppController();
 
   const { waypointNames, pickupPoints, dropoffPoints, cleaningZoneNames, fleets } =
-    useCreateTaskFormData(rmfApi);
+    useTaskFormData(rmfApi);
   const username = useUserProfile().user.username;
   const taskRegistry = useTaskRegistry();
   const [eventScope, setEventScope] = React.useState<string>(EventScopes.CURRENT);
@@ -191,7 +191,7 @@ export const TaskSchedule = () => {
     );
   };
 
-  const dispatchTaskCallback = React.useCallback<Required<CreateTaskFormProps>['onDispatchTask']>(
+  const dispatchTaskCallback = React.useCallback<Required<TaskFormProps>['onDispatchTask']>(
     async (taskRequest, robotDispatchTarget) => {
       if (!rmfApi) {
         throw new Error('tasks api not available');
@@ -203,7 +203,7 @@ export const TaskSchedule = () => {
   );
 
   const editScheduledTaskCallback = React.useCallback<
-    Required<CreateTaskFormProps>['onScheduleTask']
+    Required<TaskFormProps>['onEditScheduleTask']
   >(
     async (taskRequest, schedule) => {
       if (!rmfApi) {
@@ -220,6 +220,9 @@ export const TaskSchedule = () => {
           `Editing schedule id [${currentScheduleTask.id}] with new schedule: ${schedule}`,
         );
         await editScheduledTaskSchedule(rmfApi, taskRequest, schedule, currentScheduleTask.id);
+
+        setEventScope(EventScopes.CURRENT);
+        AppEvents.refreshTaskSchedule.next();
         return;
       }
 
@@ -334,7 +337,7 @@ export const TaskSchedule = () => {
         onSelectedDateChange={setSelectedDate}
       />
       {openCreateTaskForm && (
-        <CreateTaskForm
+        <TaskForm
           user={username ? username : 'unknown user'}
           fleets={fleets}
           tasksToDisplay={taskRegistry.taskDefinitions}
@@ -343,15 +346,16 @@ export const TaskSchedule = () => {
           pickupPoints={pickupPoints}
           dropoffPoints={dropoffPoints}
           open={openCreateTaskForm}
-          scheduleToEdit={scheduleToEdit}
-          requestTask={currentScheduleTask?.task_request}
+          schedule={scheduleToEdit}
+          taskRequest={currentScheduleTask?.task_request}
           onClose={() => {
             setOpenCreateTaskForm(false);
             setEventScope(EventScopes.CURRENT);
             AppEvents.refreshTaskSchedule.next();
           }}
           onDispatchTask={dispatchTaskCallback}
-          onScheduleTask={editScheduledTaskCallback}
+          onScheduleTask={undefined}
+          onEditScheduleTask={editScheduledTaskCallback}
           onSuccess={() => {
             setOpenCreateTaskForm(false);
             showAlert('success', 'Successfully created task');

packages/dashboard/src/hooks/use-create-task-form.tsx

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs';
 
 import { RmfApi } from '../services/rmf-api';
 
-export const useCreateTaskFormData = (rmfApi: RmfApi | undefined) => {
+export const useTaskFormData = (rmfApi: RmfApi | undefined) => {
   const [waypointNames, setWaypointNames] = React.useState<string[]>([]);
   const [cleaningZoneNames, setCleaningZoneNames] = React.useState<string[]>([]);
   const [pickupPoints, setPickupPoints] = React.useState<Record<string, string>>({});

packages/react-components/lib/tasks/index.ts

@@ -1,6 +1,6 @@
 export * from './booking-label';
-export * from './create-task';
 export * from './task-booking-label-utils';
+export * from './task-form';
 export * from './task-info';
 export * from './task-logs';
 export * from './task-schedule-event-edit-delete-popup';

packages/react-components/lib/tasks/create-task.stories.tsx → packages/react-components/lib/tasks/task-form.stories.tsx

@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { CreateTaskForm } from './create-task';
+import { TaskForm } from './task-form';
 
 export default {
   title: 'Tasks/Create Task',
-  component: CreateTaskForm,
+  component: TaskForm,
 } satisfies Meta;
 
-type Story = StoryObj<typeof CreateTaskForm>;
+type Story = StoryObj<typeof TaskForm>;
 
-export const CreateTask: Story = {
+export const OpenTaskForm: Story = {
   args: {
     onDispatchTask: async () => new Promise((res) => setTimeout(res, 500)),
     onScheduleTask: async () => new Promise((res) => setTimeout(res, 500)),
@@ -19,6 +19,6 @@ export const CreateTask: Story = {
     dropoffPoints: { test_waypoint_1: 'test_waypoint_1' },
   },
   render: (args) => {
-    return <CreateTaskForm {...args} open></CreateTaskForm>;
+    return <TaskForm {...args} open></TaskForm>;
   },
 };