[Human App] Improve the task cancellation UI (#3675)

Author: KirillKirill

packages/apps/human-app/frontend/serve.json

@@ -18,7 +18,7 @@
         },
         {
           "key": "Content-Security-Policy",
-          "value": "frame-ancestors: 'none';"
+          "value": "frame-ancestors 'none';"
         },
         {
           "key": "Strict-Transport-Security",

packages/apps/human-app/frontend/src/modules/worker/jobs/components/more-button.tsx

@@ -6,6 +6,7 @@ import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useModal } from '@/shared/contexts/modal-context';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { TopNotificationType, useNotification } from '@/shared/hooks';
 import { useResignJobMutation } from '../my-jobs/hooks';
 import { type MyJob } from '../schemas';
 import { ReportAbuseModal } from './report-abuse-modal';
@@ -18,19 +19,28 @@ interface MoreButtonProps {
 export function MoreButton({ job, isDisabled }: MoreButtonProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const { address: oracleAddress } = useParams<{ address: string }>();
-  const { mutate: rejectTaskMutation } = useResignJobMutation();
+  const { mutateAsync: rejectTaskMutation } = useResignJobMutation();
   const { openModal, closeModal } = useModal();
   const isMobile = useIsMobile();
   const { t } = useTranslation();
+  const { showNotification } = useNotification();
 
   const isOpen = Boolean(anchorEl);
 
-  const handleCancelTask = () => {
+  const handleCancelTask = async () => {
     setAnchorEl(null);
-    rejectTaskMutation({
-      oracle_address: oracleAddress ?? '',
-      assignment_id: job.assignment_id,
-    });
+    try {
+      await rejectTaskMutation({
+        oracle_address: oracleAddress ?? '',
+        assignment_id: job.assignment_id,
+      });
+    } catch (error) {
+      showNotification({
+        message: 'Something went wrong',
+        type: TopNotificationType.WARNING,
+        durationMs: 5000,
+      });
+    }
   };
 
   const handleOpenReportAbuseModal = () => {
@@ -90,7 +100,7 @@ export function MoreButton({ job, isDisabled }: MoreButtonProps) {
         }}
       >
         <MenuList>
-          <ListItemButton onClick={handleCancelTask}>
+          <ListItemButton onClick={() => void handleCancelTask()}>
             {t('worker.reportAbuse.cancel')}
           </ListItemButton>
           <ListItemButton onClick={handleOpenReportAbuseModal}>

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/hooks/use-refresh-jobs.ts

@@ -18,6 +18,7 @@ export function useRefreshJobsMutation(callbacks?: {
         void callbacks.onSuccess();
       }
       await queryClient.invalidateQueries({ queryKey: ['fetchMyJobs'] });
+      await queryClient.invalidateQueries({ queryKey: ['myJobsInfinite'] });
     },
     onError: (error) => {
       if (callbacks?.onError) {

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/hooks/use-resign-job.ts

@@ -18,6 +18,7 @@ export function useResignJobMutation(callbacks?: {
         void callbacks.onSuccess();
       }
       await queryClient.invalidateQueries({ queryKey: ['fetchMyJobs'] });
+      await queryClient.invalidateQueries({ queryKey: ['myJobsInfinite'] });
     },
     onError: (error) => {
       if (callbacks?.onError) {

packages/apps/human-app/server/src/modules/job-assignment/job-assignment.service.ts

@@ -69,7 +69,7 @@ export class JobAssignmentService {
       );
     assignmentsParamsCommand.token = command.token;
 
-    void this.updateAssignmentsCache(assignmentsParamsCommand);
+    await this.updateAssignmentsCache(assignmentsParamsCommand);
 
     return response;
   }
@@ -82,7 +82,7 @@ export class JobAssignmentService {
     assignmentsParamsCommand.oracleAddress = command.oracleAddress;
     assignmentsParamsCommand.token = command.token;
 
-    void this.updateAssignmentsCache(assignmentsParamsCommand);
+    await this.updateAssignmentsCache(assignmentsParamsCommand);
 
     return response;
   }

packages/apps/job-launcher/client/serve.json

@@ -18,7 +18,7 @@
         },
         {
           "key": "Content-Security-Policy",
-          "value": "frame-ancestors: 'none';"
+          "value": "frame-ancestors 'none';"
         },
         {
           "key": "Strict-Transport-Security",

packages/apps/staking/serve.json

@@ -18,7 +18,7 @@
         },
         {
           "key": "Content-Security-Policy",
-          "value": "frame-ancestors: 'none';"
+          "value": "frame-ancestors 'none';"
         },
         {
           "key": "Strict-Transport-Security",

packages/sdk/typescript/human-protocol-sdk/package.json

@@ -51,6 +51,7 @@
     "vitest": "^3.0.9"
   },
   "devDependencies": {
+    "@types/validator": "^13.15.4",
     "eslint": "^8.55.0",
     "prettier": "^3.4.2",
     "ts-node": "^10.9.2",

yarn.lock

@@ -4981,6 +4981,7 @@ __metadata:
   resolution: "@human-protocol/sdk@workspace:packages/sdk/typescript/human-protocol-sdk"
   dependencies:
     "@human-protocol/core": "workspace:*"
+    "@types/validator": "npm:^13.15.4"
     axios: "npm:^1.4.0"
     eslint: "npm:^8.55.0"
     ethers: "npm:~6.15.0"
@@ -11703,7 +11704,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/validator@npm:^13.11.8":
+"@types/validator@npm:^13.11.8, @types/validator@npm:^13.15.4":
   version: 13.15.4
   resolution: "@types/validator@npm:13.15.4"
   checksum: 10c0/fca230ddae859f5a66d74b466608ed16c0bfd34700558972fcab789d50d4beb7b14a6419ee2d0aab9c288e82d1706029d1c5519225c4b8dacb20f72bc05d7722