feat: add tastRaw onglet in task page (#73) (#76)

* feat: implement theme provider and mode toggle for light/dark mode support

* fix: update icon color from 'text-secondary' to 'text-foreground' in multiple preview tables

* feat: update styles for improved UI consistency across components

* fix: reduce transition duration for improved responsiveness across components

* feat: enhance ModeToggle component with system theme option and improve button styling

* feat: update borderTypeColor to include background colors and dark mode support

* feat: enhance CopyButton tooltip styling and improve TableBody dark mode support

* feat: update component styles for improved UI consistency and responsiveness

* refactor: simplify header layout in account route component

* feat: update brand and muted foreground colors for improved accessibility

* feat: update InteractiveJsonViewer styles for improved color consistency and accessibility

* feat: update AddressChip button styles for improved visual consistency and accessibility; refine SchemaSearch layout for better readability

* feat: update ring color variable to use primary color for improved theming consistency

* refactor: update Tabs component layout and styling for improved consistency

* feat: implement dynamic tab indicator positioning and styling

* refactor: improve SchemaSearch component layout and button text for clarity

* feat: add default JSON view styles and integrate into JsonBlock and InteractiveJsonViewer components

* refactor: simplify Button component structure in SmartLinkGroup

* feat: enhance DataTable with row click navigation and keyboard accessibility

* fix: address or id not showing on small screen

* refactor: remove unused imports from account layout component

* feat: add buttonText prop to CopyButton for customizable button label

* feat: implement TaskRawData component and integrate with TasksRoute for improved task detail display

* refactor: remove unused copyText prop from JsonBlock component

* fix: add className prop to CopyButton for consistent styling in JsonBlock

* feat: enhance TaskRawData component to accept taskWorkerpoolId for improved data fetching

Author: ErwanDecoster

src/components/CopyButton.tsx

@@ -10,11 +10,15 @@ import {
 const CopyButton = ({
   textToCopy,
   displayText,
+  buttonText,
   tooltipWithText = false,
+  className,
 }: {
   textToCopy: string;
   displayText?: string;
+  buttonText?: string;
   tooltipWithText?: boolean;
+  className?: string;
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
   const [tooltipMessage, setTooltipMessage] = useState('Copy');
@@ -43,7 +47,7 @@ const CopyButton = ({
   return (
     <TooltipProvider delayDuration={0}>
       <Tooltip open={showTooltip}>
-        <TooltipTrigger asChild>
+        <TooltipTrigger asChild className={className}>
           <span className="box-content flex max-w-full items-center gap-1">
             {displayText && (
               <span className="overflow-hidden overflow-ellipsis">
@@ -60,6 +64,7 @@ const CopyButton = ({
               onMouseLeave={handleMouseLeave}
               className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
             >
+              {buttonText && <span className="mr-1 text-sm">{buttonText}</span>}
               <Copy className="size-4 flex-none" />
             </button>
           </span>

src/modules/tasks/task/TaskRawData.tsx

@@ -0,0 +1,78 @@
+import { TABLE_REFETCH_INTERVAL } from '@/config';
+import { useQuery } from '@tanstack/react-query';
+import { getIExec } from '@/externals/iexecSdkClient';
+import { ErrorAlert } from '@/modules/ErrorAlert';
+import JsonBlock from '@/modules/JsonBlock';
+import useUserStore from '@/stores/useUser.store';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+
+function useTaskRawData({
+  taskWorkerpoolId,
+  taskId,
+}: {
+  taskWorkerpoolId?: string;
+  taskId: string;
+}) {
+  const { chainId } = useUserStore();
+
+  const queryKey = [chainId, 'task', 'raw', taskWorkerpoolId, taskId];
+
+  const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
+    {
+      queryKey,
+      queryFn: async () => {
+        const iexec = await getIExec();
+        const apiUrl = await iexec.workerpool.getWorkerpoolApiUrl(
+          taskWorkerpoolId!
+        );
+
+        const response = await fetch(`${apiUrl}/tasks/${taskId}`);
+        if (!response.ok) {
+          throw new Error('Failed to fetch task raw data');
+        }
+        return response.json();
+      },
+      refetchInterval: TABLE_REFETCH_INTERVAL,
+      placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+      enabled: !!taskWorkerpoolId && !!taskId,
+    }
+  );
+
+  return {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError: isError || errorUpdateCount > 0,
+  };
+}
+
+export function TaskRawData({
+  taskWorkerpoolId,
+  taskId,
+}: {
+  taskWorkerpoolId?: string;
+  taskId: string;
+}) {
+  const {
+    data: tasks,
+    hasPastError,
+    isLoading,
+  } = useTaskRawData({ taskWorkerpoolId, taskId });
+
+  return hasPastError && (!tasks || !tasks.length) ? (
+    <ErrorAlert
+      message={
+        "Unable to load raw task data: the workerpool associated with this task doesn't expose a public API"
+      }
+    />
+  ) : (
+    <div className="dark:bg-tooltip min-h-40 rounded-3xl border bg-[#fafaff] p-6">
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <JsonBlock collapsed={5}>{tasks}</JsonBlock>
+      )}
+    </div>
+  );
+}

src/routes/$chainSlug/_layout/task/$taskId.tsx

@@ -5,10 +5,13 @@ import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import TaskIcon from '@/components/icons/TaskIcon';
 import { BackButton } from '@/components/ui/BackButton';
+import { useTabParam } from '@/hooks/usePageParam';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
+import { Tabs } from '@/modules/Tabs';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import { TaskBreadcrumbs } from '@/modules/tasks/task/TaskBreadcrumbs';
+import { TaskRawData } from '@/modules/tasks/task/TaskRawData';
 import { buildTaskDetails } from '@/modules/tasks/task/buildTaskDetails';
 import { taskQuery } from '@/modules/tasks/task/taskQuery';
 import useUserStore from '@/stores/useUser.store';
@@ -64,6 +67,8 @@ function TasksRoute() {
     isValid,
     error,
   } = useTaskData((taskId as string).toLowerCase(), chainId!);
+  const tabLabels = ['DETAILS', 'RAW DATA'];
+  const [currentTab, setCurrentTab] = useTabParam('dealTab', tabLabels, 0);
 
   const taskDetails = task ? buildTaskDetails({ task }) : undefined;
 
@@ -99,11 +104,25 @@ function TasksRoute() {
         </div>
       </div>
 
-      {hasPastError && !taskDetails ? (
-        <ErrorAlert message="An error occurred during task details loading." />
-      ) : (
-        <DetailsTable details={taskDetails || {}} />
-      )}
+      <Tabs
+        currentTab={currentTab}
+        tabLabels={tabLabels}
+        onTabChange={setCurrentTab}
+      />
+      <div>
+        {currentTab === 0 &&
+          (hasPastError && !taskDetails ? (
+            <ErrorAlert message="An error occurred during task details loading." />
+          ) : (
+            <DetailsTable details={taskDetails || {}} />
+          ))}
+        {currentTab === 1 && (
+          <TaskRawData
+            taskWorkerpoolId={task?.deal.workerpool.address}
+            taskId={taskId}
+          />
+        )}
+      </div>
     </div>
   );
 }