fix(Task): Change layout, fix breadcrumbs, fix overflow of param

tavern/internal/www/src/components/UserImageAndName.tsx

@@ -7,10 +7,6 @@ import PlaceholderUser from "../assets/PlaceholderUser.png";
 const UserImageAndName: FC<{ userData: UserType | null | undefined }> = ({ userData }) => {
     const creatorImage = (userData?.photoURL && userData?.photoURL !== "") ? userData.photoURL : PlaceholderUser;
 
-    if (!userData) {
-        return <div className="text-sm text-gray-500">Not available</div>;
-    }
-
     return (
         <div className="flex flex-row gap-4 items-center" key={userData?.id}>
             <Image
@@ -19,8 +15,8 @@ const UserImageAndName: FC<{ userData: UserType | null | undefined }> = ({ userD
                 src={creatorImage}
                 alt={`Profile of ${userData?.name}`}
             />
-            <div className="text-sm text-gray-500">
-                {userData?.name}
+            <div className="text-gray-600 text-sm">
+                {userData?.name ? userData.name : 'Not found'}
             </div>
         </div>
     );

tavern/internal/www/src/features/task-card/TaskCard.tsx

@@ -3,10 +3,12 @@ import { FC } from "react";
 import TaskTimeStamp from "./components/TaskTimeStamp";
 import TaskHostBeacon from "./components/TaskHostBeacon";
 import TaskParameters from "./components/TaskParameters";
-import TaskResults from "./components/TaskResults";
 import UserImageAndName from "../../components/UserImageAndName";
 import TaskStatusBadge from "../../components/TaskStatusBadge";
 import TaskShells from "./components/TaskShells";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import { CommandLineIcon, DocumentTextIcon, NoSymbolIcon } from "@heroicons/react/24/outline";
+import TaskResults from "./components/TaskResults";
 
 interface TaskCardType {
     task: Task
@@ -15,26 +17,42 @@ interface TaskCardType {
 const TaskCard: FC<TaskCardType> = (
     { task }
 ) => {
-    return (
-        <div className=" border-2 border-gray-200 px-8 py-5 w-full rounded-lg gap-4 grid grid-cols-1 lg:grid-cols-2">
-            <div className="flex flex-col gap-6 col-span-1">
-                <div className="flex flex-col gap-1">
-                    <div className="flex flex-row gap-2 items-center">
-                        <h3 className="text-lg font-semibold">
-                            {task.quest?.name}
-                        </h3>
-                        <TaskStatusBadge task={task} />
-                    </div>
-                </div>
-                <TaskHostBeacon beaconData={task.beacon} />
-                <TaskTimeStamp {...task} />
-                <TaskParameters quest={task?.quest} />
-                <UserImageAndName userData={task?.quest?.creator} />
 
+    // If Task has an error, start with error tab open
+    const defaultOpenTabIndex = task?.error ? 1 : 0;
+
+    return (
+        <div className="rounded-lg shadow border-gray-200 border-2">
+            <div className="flex flex-row gap-4 items-center p-4 bg-gray-100">
+                <h3 className="text-lg font-semibold">{task.quest?.name}</h3>
+                <TaskStatusBadge task={task} />
             </div>
-            <div className="flex flex-col gap-6 col-span-1">
-                <TaskResults output={task?.output} error={task?.error} quest={task?.quest} />
-                <TaskShells shells={task?.shells} />
+            <div className="grid grid-cols-1 lg:grid-cols-2">
+                <div className="border-t-4 border-gray-100 flex flex-col gap-4 px-4 py-2 w-full">
+                    <TaskHostBeacon beaconData={task.beacon} />
+                    <TaskTimeStamp {...task} />
+                    <TaskParameters quest={task?.quest} />
+                    <UserImageAndName userData={task?.quest?.creator} />
+                </div>
+                <TabGroup className="border-t-4 border-l-4 border-gray-100 rounded flex flex-col gap-1 -mt-10" defaultIndex={defaultOpenTabIndex}>
+                    <TabList className="flex flex-row gap-2 text-gray-600 bg-gray-100">
+                        <Tab className={({ selected }) => `flex flex-row gap-1 items-center py-2 px-4 ${selected && 'bg-white rounded border-t-2 border-gray-200'}`}><DocumentTextIcon className="w-4" /> Output</Tab>
+                        {task?.error && <Tab className={({ selected }) => `flex flex-row gap-1 items-center py-2 px-4 ${selected && 'bg-white rounded border-t-2 border-gray-200'}`}><NoSymbolIcon className="w-4" /> Error</Tab>}
+                        {task?.shells?.length > 0 && <Tab className={({ selected }) => `flex flex-row gap-1 items-center py-2 px-4 ${selected && 'bg-white rounded border-t-2 border-gray-200'}`}><CommandLineIcon className="w-4" /> Shells</Tab>}
+                    </TabList>
+                    <TabPanels className="px-4">
+                        <TabPanel>
+                            <TaskResults result={task?.output} />
+                        </TabPanel>
+                        {task?.error &&
+                            <TabPanel>
+                                <TaskResults result={task?.error} />
+                            </TabPanel>}
+                        {task?.shells?.length > 0 && <TabPanel>
+                            <TaskShells shells={task?.shells} />
+                        </TabPanel>}
+                    </TabPanels>
+                </TabGroup>
             </div>
         </div>
     );

tavern/internal/www/src/features/task-card/components/TaskParameters.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { QuestProps, TomeParams } from "../../../utils/consts";
 import { constructTomeParams } from "../../../utils/utils";
-import { WrenchScrewdriverIcon } from "@heroicons/react/24/outline";
+import { BookOpenIcon } from "@heroicons/react/24/outline";
 
 interface TaskParametersType {
     quest?: QuestProps
@@ -13,10 +13,10 @@ const TaskParameters: FC<TaskParametersType> = ({
 
     return (
         <div className="flex flex-row gap-4">
-            <WrenchScrewdriverIcon className="h-5 w-5 mt-1" />
+            <BookOpenIcon className="h-5 w-5 mt-1" />
             <div className="flex flex-col gap-1 ">
                 <div className="text-gray-600">
-                    Tome parameters
+                    {quest?.tome?.name}
                 </div>
                 {params.map((paramDef: TomeParams) => {
                     if (paramDef.value) {
@@ -25,7 +25,7 @@ const TaskParameters: FC<TaskParametersType> = ({
                                 <div className="font-semibold">
                                     {paramDef.name}:
                                 </div>
-                                <div>
+                                <div className="break-all">
                                     {paramDef.value}
                                 </div>
                             </div>

tavern/internal/www/src/features/task-card/components/TaskResults.tsx

@@ -1,47 +1,24 @@
-import { FC } from "react";
-import { Task } from "../../../utils/consts";
 import { CodeBlock, tomorrow } from "react-code-blocks";
-import { BookOpenIcon } from "@heroicons/react/24/outline";
 
-interface TaskResultsType extends Pick<Task, 'error' | 'output' | 'quest'> { };
-
-const TaskResults: FC<TaskResultsType> = ({
-    error,
-    output,
-    quest
-}) => {
+const TaskResults = ({
+    result
+}: { result?: string }) => {
     return (
-        <div className="flex flex-row gap-4">
-            <BookOpenIcon className="h-5 w-5 mt-1" />
-            <div className="flex flex-col gap-1 w-full">
-                <div className="text-gray-600">
-                    Tome: {quest?.tome?.name}
-                </div>
-                <div className="flex flex-col gap-2 text-sm max-h-80 overflow-y-scroll overflow-x-scroll">
-                    <div className="max-w-fit">
-                        {error ? (
-                            <CodeBlock
-                                className="-ml-2"
-                                text={error}
-                                language={""}
-                                showLineNumbers={false}
-                                theme={tomorrow}
-                                codeBlock
-                            />
-                        ) : output && output?.length > 0 ? (
-                            <CodeBlock
-                                className="-ml-2"
-                                text={output}
-                                language={""}
-                                showLineNumbers={false}
-                                theme={tomorrow}
-                                codeBlock
-                            />
-                        ) : (
-                            <div className="mt-2 text-gray-600">No output available</div>
-                        )}
+        <div className="text-sm max-h-80 overflow-y-scroll overflow-x-scroll py-1">
+            <div className="max-w-fit">
+                {result && result.length > 0 ? (
+                    <div className="-ml-2">
+                        <CodeBlock
+                            text={result}
+                            language={""}
+                            showLineNumbers={false}
+                            theme={tomorrow}
+                            codeBlock
+                        />
                     </div>
-                </div>
+                ) : (
+                    <div className="mt-2 text-gray-600">Not available</div>
+                )}
             </div>
         </div>
     );

tavern/internal/www/src/features/task-card/components/TaskShells.tsx

@@ -14,7 +14,7 @@ const TaskShells = ({ shells }: { shells: Array<Shell> }) => {
     }
 
     return (
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 max-h-80 overflow-y-scroll overflow-x-scroll">
             {shells.map((shell) => {
                 const closeAtTime = new Date(shell.closedAt || "");
 

tavern/internal/www/src/pages/tasks/EditablePageHeader.tsx

@@ -21,7 +21,7 @@ export const EditablePageHeader: FC<EditablePageHeaderProps> = ({ questId, data
         },
         {
             label: questsName,
-            link: `/hosts/${questId}`
+            link: `/tasks/${questId}`
         }
     ]
 

tavern/internal/www/src/pages/tasks/Tasks.tsx

@@ -41,9 +41,7 @@ const Tasks = () => {
 
     return (
         <PageWrapper currNavItem={PageNavItem.quests}>
-            <div className="border-b border-gray-200 pb-5 sm:flex sm:items-center sm:justify-between">
-                <EditablePageHeader questId={questId} data={questData} loading={questLoading} error={questError} />
-            </div>
+            <EditablePageHeader questId={questId} data={questData} loading={questLoading} error={questError} />
             <div className="bg-white rounded-lg mt-2">
                 <FilterBar setSearch={setSearch} filtersSelected={filtersSelected} setFiltersSelected={handleFilterSelected} />
             </div>
@@ -55,7 +53,7 @@ const Tasks = () => {
                 <div>
                     {data?.tasks?.edges.length > 0 ? (
                         <div>
-                            <div className=" w-full flex flex-col gap-2 my-4">
+                            <div className=" w-full flex flex-col gap-4 my-4">
                                 {data.tasks.edges.map((task: { node: Task }) => {
                                     return (
                                         <TaskCard key={task.node.id} task={task.node} />