feat: add MoreButton, add modal for reporting abuse, add handler, responsive design,

Author: KirillKirill

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

@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^9.7.0",
     "@fontsource/inter": "^5.0.17",
+    "@fontsource/roboto": "^5.2.6",
     "@hcaptcha/react-hcaptcha": "^0.3.6",
     "@hookform/resolvers": "^5.0.1",
     "@human-protocol/sdk": "workspace:*",

packages/apps/human-app/frontend/src/main.tsx

@@ -12,6 +12,9 @@ import '@fontsource/inter/400.css';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 import '@fontsource/inter/800.css';
+import '@fontsource/roboto';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
 import { WalletConnectProvider } from '@/shared/contexts/wallet-connect';
 import { Web3AuthProvider } from '@/modules/auth-web3/context/web3-auth-context';
 import { JWTExpirationCheck } from '@/shared/contexts/jwt-expiration-check';

packages/apps/human-app/frontend/src/modules/worker/jobs/components/index.ts

@@ -2,6 +2,7 @@ export * from './evm-address';
 export * from './jobs-tab-panel';
 export * from './my-jobs-table-actions';
 export * from './escrow-address-search-form';
-export * from './reject-button';
 export * from './reward-amount';
 export * from './sorting';
+export * from './more-button';
+export * from './report-abuse-modal';

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

@@ -0,0 +1,97 @@
+/* eslint-disable camelcase -- ...*/
+import { useState } from 'react';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { Button, MenuList, ListItemButton, Popover } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import { useModal } from '@/shared/contexts/modal-context';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { useResignJobMutation } from '../my-jobs/hooks';
+import { type MyJob } from '../schemas';
+import { ReportAbuseModal } from './report-abuse-modal';
+
+interface MoreButtonProps {
+  job: MyJob;
+  isDisabled: boolean;
+}
+
+export function MoreButton({ job, isDisabled }: Readonly<MoreButtonProps>) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { address: oracleAddress } = useParams<{ address: string }>();
+  const { mutate: rejectTaskMutation } = useResignJobMutation();
+  const { openModal, closeModal } = useModal();
+  const isMobile = useIsMobile();
+
+  const isOpen = Boolean(anchorEl);
+
+  const handleCancelTask = () => {
+    setAnchorEl(null);
+    rejectTaskMutation({
+      oracle_address: oracleAddress ?? '',
+      assignment_id: job.assignment_id,
+    });
+  };
+
+  const handleOpenReportAbuseModal = () => {
+    setAnchorEl(null);
+    openModal({
+      content: (
+        <ReportAbuseModal
+          close={closeModal}
+          escrowAddress={job.escrow_address}
+          chainId={job.chain_id}
+        />
+      ),
+      showCloseButton: false,
+    });
+  };
+
+  return (
+    <>
+      <Button
+        disabled={isDisabled}
+        sx={{
+          minWidth: 'unset',
+          width: { xs: '48px', md: '30px' },
+          height: { xs: '48px', md: '30px' },
+          p: 1,
+          border: isMobile ? '1px solid #858EC6' : 'none',
+          borderRadius: '4px',
+        }}
+        onClick={(e) => {
+          !isDisabled && setAnchorEl(e.currentTarget);
+        }}
+      >
+        <MoreHorizIcon sx={{ color: '#858EC6' }} />
+      </Button>
+      <Popover
+        open={isOpen}
+        anchorEl={anchorEl}
+        onClose={() => {
+          setAnchorEl(null);
+        }}
+        anchorOrigin={{
+          vertical: isMobile ? 'top' : 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: isMobile ? 'bottom' : 'top',
+          horizontal: 'right',
+        }}
+        slotProps={{
+          paper: {
+            sx: {
+              mt: isMobile ? 0 : 1,
+            },
+          },
+        }}
+      >
+        <MenuList>
+          <ListItemButton onClick={handleCancelTask}>Cancel</ListItemButton>
+          <ListItemButton onClick={handleOpenReportAbuseModal}>
+            Report Abuse
+          </ListItemButton>
+        </MenuList>
+      </Popover>
+    </>
+  );
+}

packages/apps/human-app/frontend/src/modules/worker/jobs/components/my-jobs-table-actions.tsx

@@ -1,11 +1,9 @@
-/* eslint-disable camelcase -- ...*/
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { TableButton } from '@/shared/components/ui/table-button';
-import { useResignJobMutation } from '../my-jobs/hooks';
 import { MyJobStatus } from '../types';
 import { type MyJob } from '../schemas';
-import { RejectButton } from './reject-button';
+import { MoreButton } from './more-button';
 
 interface MyJobsTableRejectActionProps {
   job: MyJob;
@@ -15,10 +13,7 @@ export function MyJobsTableActions({
   job,
 }: Readonly<MyJobsTableRejectActionProps>) {
   const { t } = useTranslation();
-  const { mutate: rejectTaskMutation, isPending: isRejectPending } =
-    useResignJobMutation();
-  const { address: oracleAddress } = useParams<{ address: string }>();
-  const buttonDisabled = job.status !== MyJobStatus.ACTIVE || isRejectPending;
+  const isDisabled = job.status !== MyJobStatus.ACTIVE;
 
   if (!job.url) {
     return null;
@@ -28,24 +23,19 @@ export function MyJobsTableActions({
     <>
       <TableButton
         component={Link}
-        disabled={buttonDisabled}
+        disabled={isDisabled}
         fullWidth
         target="_blank"
         to={job.url}
-        sx={{ maxWidth: { xs: 'unset', sm: '160px' } }}
+        sx={{
+          height: { xs: '48px', md: '30px' },
+          maxWidth: { xs: 'unset', sm: '160px' },
+          flex: { xs: 1, md: 'unset' },
+        }}
       >
         {t('worker.jobs.solve')}
       </TableButton>
-      <RejectButton
-        disabled={buttonDisabled}
-        loading={isRejectPending}
-        onClick={() => {
-          rejectTaskMutation({
-            oracle_address: oracleAddress ?? '',
-            assignment_id: job.assignment_id,
-          });
-        }}
-      />
+      <MoreButton job={job} isDisabled={isDisabled} />
     </>
   );
 }

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

@@ -0,0 +1,72 @@
+/* eslint-disable camelcase */
+import { useState } from 'react';
+import { Box, Button, Stack, Typography, TextField } from '@mui/material';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { reportAbuse } from '../services/jobs.service';
+
+interface ReportAbuseModalProps {
+  escrowAddress: string;
+  chainId: number;
+  close: () => void;
+}
+
+export function ReportAbuseModal({
+  escrowAddress,
+  chainId,
+  close,
+}: Readonly<ReportAbuseModalProps>) {
+  const [reason, setReason] = useState('');
+  const isMobile = useIsMobile();
+
+  const handleReportAbuse = () => {
+    close();
+    void reportAbuse({
+      escrow_address: escrowAddress,
+      chain_id: chainId,
+      reason: reason.trim(),
+    });
+  };
+
+  return (
+    <Stack
+      px={{ xs: 1, md: 5 }}
+      pt={{ xs: 0, md: 3.5 }}
+      pb={{ xs: 1.5, md: 5.5 }}
+    >
+      <Typography variant="h4" mb={2}>
+        Report Abuse
+      </Typography>
+      <Typography variant={isMobile ? 'body2' : 'body1'}>
+        Notice something inappropriate or incorrect? Let us know if this task
+        contains harmful, offensive, or misleading content. Your report will be
+        reviewed confidentially.
+      </Typography>
+      <TextField
+        fullWidth
+        multiline
+        rows={3}
+        label="Reason"
+        value={reason}
+        sx={{
+          my: { xs: 4, md: 5 },
+        }}
+        onChange={(e) => {
+          setReason(e.target.value);
+        }}
+      />
+      <Box display="flex" gap={2}>
+        <Button fullWidth onClick={close} variant="outlined">
+          Cancel
+        </Button>
+        <Button
+          fullWidth
+          onClick={handleReportAbuse}
+          variant="contained"
+          disabled={!reason.trim()}
+        >
+          {isMobile ? 'Report' : 'Report Abuse'}
+        </Button>
+      </Box>
+    </Stack>
+  );
+}

packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx

@@ -135,7 +135,14 @@ export const getColumnsDefinition = ({
     size: 100,
     enableSorting: true,
     Cell: (props) => (
-      <Grid sx={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem' }}>
+      <Grid
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+          gap: 2,
+        }}
+      >
         <MyJobsTableActions job={props.row.original} />
       </Grid>
     ),

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/columns.tsx

@@ -181,7 +181,7 @@ export function MyJobsListMobile() {
                     sx={{
                       display: 'flex',
                       justifyContent: 'flex-end',
-                      gap: '1rem',
+                      gap: 1,
                       width: '100%',
                     }}
                   >

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx

@@ -10,6 +10,7 @@ import {
   type RefreshJobsBody,
   type RejectTaskBody,
   type AvailableJobsSuccessResponse,
+  type ReportAbuseBody,
 } from '../types';
 
 const apiPaths = {
@@ -19,6 +20,7 @@ const apiPaths = {
   resignJob: '/assignment/resign-job',
   refreshJobs: '/assignment/refresh',
   uiConfig: '/ui-config',
+  reportAbuse: '/abuse/report',
 };
 
 async function fetchAvailableJobs(args: JobsBody) {
@@ -102,4 +104,24 @@ async function refreshJobs(data: RefreshJobsBody) {
   }
 }
 
-export { fetchAvailableJobs, fetchMyJobs, assignJob, resignJob, refreshJobs };
+async function reportAbuse(data: ReportAbuseBody) {
+  try {
+    await authorizedHumanAppApiClient.post(apiPaths.reportAbuse, {
+      body: { ...data },
+    });
+  } catch (error: unknown) {
+    if (error instanceof ApiClientError) {
+      throw error;
+    }
+    throw new Error('Failed to report abuse');
+  }
+}
+
+export {
+  fetchAvailableJobs,
+  fetchMyJobs,
+  assignJob,
+  resignJob,
+  refreshJobs,
+  reportAbuse,
+};