@microlight/core 0.9.9 → 0.11.0

package/dist/server/app/tasks/[slug]/ViewTask.js

@@ -1,7 +1,6 @@
 'use client';
 
-import OpenInNew from '@mui/icons-material/OpenInNew';
-import { Container, Typography, Box, Card, ButtonGroup, Button, Table, Chip, Link as MuiLink } from '@mui/joy';
+import { ExternalLink } from 'lucide-react';
 import PageHeader from "../../../components/PageHeader";
 import MLInput from "../../../components/MLInput";
 import { useState } from 'react';
@@ -10,6 +9,10 @@ import { redirect } from 'next/navigation';
 import StatusChip from "../../../components/StatusChip";
 import cronstrue from 'cronstrue';
 import Link from "../../../components/Link";
+import { Typography } from "../../../components/ui/typography";
+import { Card } from "../../../components/ui/card";
+import { Button } from "../../../components/ui/button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../components/ui/table";
 function generateBreadcrumbs({
   task
 }) {
@@ -46,18 +49,14 @@ export default function ViewTask({
   });
   const [loading, setLoading] = useState(false);
   const RightButtons = function () {
-    return <>
-      {task?.links?.map((link, index) => {
-        return <MuiLink key={index} underline="none" variant="outlined" color="neutral" target='_blank' href={link.href} startDecorator={<i className="fa-solid fa-up-right-from-square"></i>} sx={{
-          mx: 0.5,
-          px: 1,
-          py: 0.5,
-          borderRadius: 'md'
-        }}>
-            {link.title}
-          </MuiLink>;
+    return <div className="flex gap-1">
+        {task?.links?.map((link, index) => {
+        return <a key={index} href={link.href} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 px-2 py-1 text-sm border rounded-md hover:bg-accent transition-colors">
+              <ExternalLink className="h-3 w-3" />
+              {link.title}
+            </a>;
       })}
-    </>;
+      </div>;
   };
   const handleSubmit = async event => {
     event.preventDefault();
@@ -70,175 +69,84 @@ export default function ViewTask({
     });
     if (result.success) redirect(`/tasks/${task.slug}/runs/${result.run.id}`);
   };
-  return <Container>
+  return <div className="max-w-7xl mx-auto">
       <PageHeader breadcrumbs={breadcrumbs} header={{
       part1: 'Task:',
       part2: task.name
     }} RightButtons={RightButtons} />
       <Typography level="body-sm">{task.description}</Typography>
-      
-      
-      <Card sx={{
-      mt: 2,
-      backgroundColor: 'transparent',
-      maxWidth: 400
-    }}>
+
+
+      <Card className="mt-4 bg-transparent max-w-[400px] p-4">
         <form onSubmit={handleSubmit}>
           {Object.keys(task.inputs).map(slug => <MLInput key={slug} slug={slug} def={task.inputs[slug]} searchParams={searchParams} />)}
-          <ButtonGroup spacing={1}>
-            {/* <Button type="submit" fullWidth color="primary" variant="solid" startDecorator={<FilterAltIcon />}>Apply filter</Button> */}
-            <Button loading={loading} disabled={loading} type="submit" color='primary' variant="solid">Execute task</Button>
-            {/* <Button loading={loading} disabled={loading} type="submit" color='primary' sx={{bgcolor:'#6435c9',borderRadius:3}} variant="solid">Execute task</Button> */}
-            {/* <Button variant="outlined" onClick={handleReset}>Reset</Button> */}
-            {/* <Button disabled={loading.apply} loading={loading.reset} fullWidth variant="outlined" color="primary" onClick={handleReset} >Reset</Button> */}
-          </ButtonGroup>
+          <div className="flex gap-2">
+            <Button loading={loading} disabled={loading} type="submit">Execute task</Button>
+          </div>
         </form>
       </Card>
-      <Typography level="title-lg" sx={{
-      mt: 3
-    }}>Schedules:</Typography>
+      <Typography level="title-lg" className="mt-6">Schedules:</Typography>
+
+      <div className="mt-2 max-w-[800px]">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Schedule</TableHead>
+              <TableHead className="w-[150px]">Description</TableHead>
+              <TableHead className="w-[300px]">Payload</TableHead>
+              <TableHead>Is Enabled?</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {task?.schedules?.map((schedule, index) => <TableRow key={index}>
+                <TableCell>{schedule.schedule}</TableCell>
+                <TableCell>
+                  {cronstrue.toString(schedule.schedule)}
+                </TableCell>
+                <TableCell className="overflow-auto scrollbar-hide">
+                  <pre className="m-0">{schedule?.inputs ? JSON.stringify(schedule?.inputs, null, 2).slice(2, -2) : ""}</pre>
+                </TableCell>
+                <TableCell>
+                  {schedule.is_enabled ? 'enabled' : 'disabled'}
+                </TableCell>
+              </TableRow>)}
+          </TableBody>
+        </Table>
+      </div>
 
-      <Table variant='outlined' aria-label="task runs table" size='md' sx={{
-      mt: 1,
-      maxWidth: 800,
-      '& th': {
-        height: {
-          sm: "22px",
-          md: "26px",
-          lg: "30px"
-        }
-      },
-      '& td': {
-        height: {
-          sm: "23px",
-          md: "27px",
-          lg: "31px"
-        }
-      }
-    }}>
-        <thead>
-          <tr>
-            {/* <th ></th> */}
-            <th style={{
-            width: 100
-          }}>Schedule</th>
-            <th style={{
-            width: 150
-          }}>Description</th>
-            <th style={{
-            width: 300
-          }}>Payload</th>
-            <th>Is Enabled?</th>
-            {/* <th>User</th> */}
-          </tr>
-        </thead>
-        <tbody>
-          {task?.schedules?.map((schedule, index) => <tr key={index}>
-              <td>{schedule.schedule}</td>
-              <td>
-                {cronstrue.toString(schedule.schedule)}
-              </td>
-              <td style={{
-            overflow: 'auto',
-            '&::WebkitScrollbar': {
-              display: 'none'
-            },
-            height: 0,
-            scrollbarWidth: 'none',
-            // Firefox
-            msOverflowStyle: 'none' // IE and Edge
-          }}>
-                <pre style={{
-              margin: 0
-            }}>{schedule?.inputs ? JSON.stringify(schedule?.inputs, null, 2).slice(2, -2) : ""}</pre>
-              </td>
-              <td>
-                {schedule.is_enabled ? 'enabled' : 'disabled'}
-              </td>
+      <Typography level="title-lg" className="mt-6">Recent runs:</Typography>
 
-              {/* <td>{run.user}</td> */}
-            </tr>)}
-        </tbody>
-      </Table>
-      <Typography level="title-lg" sx={{
-      mt: 3
-    }}>Recent runs:</Typography>
-      {/* <pre>{JSON.stringify(runs,null,2)}</pre> */}
-      
-      <Table variant='outlined' aria-label="task runs table" size='md' sx={{
-      mt: 1,
-      maxWidth: 800,
-      '& th': {
-        height: {
-          sm: "22px",
-          md: "26px",
-          lg: "30px"
-        }
-      },
-      '& td': {
-        height: {
-          sm: "23px",
-          md: "27px",
-          lg: "31px"
-        }
-      }
-    }}>
-        <thead>
-          <tr>
-            {/* <th ></th> */}
-            <th style={{
-            width: 100
-          }}>Created At</th>
-            <th style={{
-            width: 150
-          }}>ID</th>
-            <th style={{
-            width: 300
-          }}>Payload</th>
-            <th>Status</th>
-            <th style={{
-            width: '58px'
-          }}>Duration</th>
-            <th>By</th>
-            {/* <th>User</th> */}
-          </tr>
-        </thead>
-        <tbody>
-          {runs.map(run => <tr key={run.id}>
-              <td>{new Date(run.updated_at).toLocaleString()}</td>
-              <td>
-                <Link href={`/tasks/${params.slug}/runs/${run.id}`} level="body-sm">
-                  {task.slug} #{run.id}
-                </Link>
-              </td>
-              <td style={{
-            overflow: 'auto',
-            '&::WebkitScrollbar': {
-              display: 'none'
-            },
-            height: 0,
-            scrollbarWidth: 'none',
-            // Firefox
-            msOverflowStyle: 'none' // IE and Edge
-          }}>
-                <pre style={{
-              margin: 0
-            }}>{JSON.stringify(run?.inputs, null, 1).slice(2, -2)}</pre>
-              </td>
-              <td>
-                <StatusChip status={run.status} />
-              </td>
-              <td style={{
-            textAlign: 'right'
-          }}>{run.duration / 1000 || 0}s</td>
-              <td>{run.triggered_by || 'user'}</td>
-              {/* <td>{run.user}</td> */}
-            </tr>)}
-        </tbody>
-      </Table>
-      {/* Add your task execution UI components here */}
-      
-      {/* Uncomment for debugging */}
-      {/* <pre>{JSON.stringify(task, null, 2)}</pre> */}
-    </Container>;
+      <div className="mt-2 max-w-[800px]">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Created At</TableHead>
+              <TableHead className="w-[150px]">ID</TableHead>
+              <TableHead className="w-[300px]">Payload</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="w-[58px]">Duration</TableHead>
+              <TableHead>By</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {runs.map(run => <TableRow key={run.id}>
+                <TableCell>{new Date(run.updated_at).toLocaleString()}</TableCell>
+                <TableCell>
+                  <Link href={`/tasks/${params.slug}/runs/${run.id}`}>
+                    {task.slug} #{run.id}
+                  </Link>
+                </TableCell>
+                <TableCell className="overflow-auto scrollbar-hide">
+                  <pre className="m-0">{JSON.stringify(run?.inputs, null, 1).slice(2, -2)}</pre>
+                </TableCell>
+                <TableCell>
+                  <StatusChip status={run.status} />
+                </TableCell>
+                <TableCell className="text-right">{run.duration / 1000 || 0}s</TableCell>
+                <TableCell>{run.triggered_by || 'user'}</TableCell>
+              </TableRow>)}
+          </TableBody>
+        </Table>
+      </div>
+    </div>;
 }

package/dist/server/app/tasks/[slug]/runs/[r_id]/ViewRun.js

@@ -1,11 +1,13 @@
 'use client';
 
 import PageHeader from "../../../../../components/PageHeader";
-import { Container, Table, Link, Chip, Typography, Sheet, Alert } from "@mui/joy";
 import { useRouter } from 'next/navigation';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import StatusChip from "../../../../../components/StatusChip";
 import DropdownActions from "./_components/DropdownActions/DropdownActions";
+import { Typography } from "../../../../../components/ui/typography";
+import { Alert, AlertDescription } from "../../../../../components/ui/alert";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../components/ui/table";
 function generateBreadcrumbs({
   task,
   params
@@ -47,9 +49,7 @@ export default function ViewRun({
   });
   const router = useRouter();
   let RightButtons = function () {
-    return <>
-      <DropdownActions run={run} />
-    </>;
+    return <DropdownActions run={run} />;
   };
   useEffect(() => {
     let intervalId;
@@ -65,172 +65,76 @@ export default function ViewRun({
       }
     };
   }, [run]);
-  return <>
-    <Container>
+  return <div className="max-w-7xl mx-auto">
       <PageHeader breadcrumbs={breadcrumbs} header={{
-        part1: 'Task Run:',
-        part2: task.name
-      }} RightButtons={RightButtons}
-      // icon={<SendIcon sx={{color: '#6435c9'}} />}
-      />
-      <Table variant='outlined' borderAxis="bothBetween" aria-label="task runs table" size='md' sx={{
-        mt: 1,
-        maxWidth: 500,
-        '& th': {
-          height: {
-            sm: "22px",
-            md: "26px",
-            lg: "30px"
-          }
-        },
-        '& td': {
-          height: {
-            sm: "23px",
-            md: "27px",
-            lg: "31px"
-          }
-        }
-      }}>
-        <thead>
-          <tr>
-            {/* <th ></th> */}
-            <th>Created At</th>
-            <th>Started At</th>
-            {/* <th >ID</th> */}
-            <th>Status</th>
-            <th style={{
-              width: '58px'
-            }}>Duration</th>
-            <th>By</th>
-            {/* <th>User</th> */}
-          </tr>
-        </thead>
-        <tbody>
-          <tr key={run.id}>
-            <td>{new Date(run.created_at).toLocaleString()}</td>
-            <td>{run.started_at && new Date(run.started_at).toLocaleString()}</td>
-            
-            <td><StatusChip status={run.status} /></td>
-            <td style={{
-              textAlign: 'right'
-            }}>{run.duration / 1000 || 0}s</td>
-            <td>{run.by || 'user'}</td>
-            {/* <td>{run.user}</td> */}
-          </tr>
-        </tbody>
-      </Table>
-      <Typography level="title-lg" sx={{
-        mt: 3,
-        mb: 1
-      }}>Payload:</Typography>
+      part1: 'Task Run:',
+      part2: task.name
+    }} RightButtons={RightButtons} />
+      <div className="mt-2 max-w-[500px]">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Created At</TableHead>
+              <TableHead>Started At</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="w-[58px]">Duration</TableHead>
+              <TableHead>By</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>{new Date(run.created_at).toLocaleString()}</TableCell>
+              <TableCell>{run.started_at && new Date(run.started_at).toLocaleString()}</TableCell>
+              <TableCell><StatusChip status={run.status} /></TableCell>
+              <TableCell className="text-right">{run.duration / 1000 || 0}s</TableCell>
+              <TableCell>{run.by || 'user'}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+
+      <Typography level="title-lg" className="mt-6 mb-2">Payload:</Typography>
       <pre>{JSON.stringify(run.inputs, null, 2)}</pre>
-      <Typography level="title-lg" sx={{
-        mt: 3,
-        mb: 1
-      }}>Logs:</Typography>
-      <Sheet sx={{
-        bgcolor: 'white'
-      }}>
-        <Table borderAxis="xBetween" size="md" variant="outlined" sx={{
-          border: '1px solid #d9dada',
-          '--TableCell-borderColor': '#ebebeb'
-        }}>
-          <tbody>
-            {logs.map((log, index) => <tr key={index}>
-                <td style={{
-                width: 90,
-                padding: 7,
-                paddingLeft: 14,
-                verticalAlign: 'top',
-                height: 'auto'
-              }}>
-                  <Typography level="body-sm" fontFamily="monospace">
+
+      <Typography level="title-lg" className="mt-6 mb-2">Logs:</Typography>
+      <div className="bg-white border rounded-md">
+        <Table>
+          <TableBody>
+            {logs.map((log, index) => <TableRow key={index}>
+                <TableCell className="w-[90px] p-2 pl-4 align-top">
+                  <Typography level="body-sm" className="font-mono">
                     {new Date(log.created_at).toLocaleTimeString()}
                   </Typography>
-                </td>
-                <td style={{
-                padding: 7,
-                verticalAlign: 'top',
-                height: 'auto'
-              }}>
-                  {log.type == 'markdown' ? <Alert variant='soft' color="primary" sx={{
-                  p: 2,
-                  pb: 0,
-                  // bgcolor:'#e3fbe3',
-                  bgcolor: '#f8ffff',
-                  color: '#276f85',
-                  border: '1px solid #a8d4dd',
-                  '& h4, & h3,': {
-                    mt: 0
-                  }
-                }}>
-                      <div className='' dangerouslySetInnerHTML={{
+                </TableCell>
+                <TableCell className="p-2 align-top">
+                  {log.type == 'markdown' ? <Alert className="bg-sky-50 border-sky-200 text-sky-800">
+                      <AlertDescription>
+                        <div dangerouslySetInnerHTML={{
                     __html: log.content
                   }} />
-                    </Alert> : log.type == 'json' ? <div style={{
-                  height: '300px',
-                  backgroundColor: '#e5d2fc',
-                  overflowY: 'scroll'
-                }}>
-                      <pre className="json-renderer" style={{
-                    padding: 0,
-                    margin: 0
-                  }}>
+                      </AlertDescription>
+                    </Alert> : log.type == 'json' ? <div className="h-[300px] bg-purple-100 overflow-y-scroll">
+                      <pre className="p-0 m-0">
                         {JSON.stringify(JSON.parse(log.content), null, 2)}
                       </pre>
-                    </div> : log.type == 'error' ? <Alert variant='soft' color="danger" sx={{
-                  p: 2,
-                  pb: 0,
-                  overflow: 'auto',
-                  '&::-webkit-scrollbar': {
-                    display: 'none'
-                  },
-                  scrollbarWidth: 'none',
-                  // Firefox
-                  msOverflowStyle: 'none',
-                  // IE and Edge
-                  // bgcolor:'#e3fbe3',
-                  // bgcolor:'#f8ffff',
-                  // color:'#276f85',
-                  border: '1px solid #e0b4b4',
-                  '& h4, & h3,': {
-                    mt: 0
-                  }
-                }}>
-                      <div>
-                      <h4>Error : {JSON.parse(log.content)?.message}</h4>
-                      {JSON.parse(log.content)?.stack}
-                      
-                      </div>
-                    </Alert> : log.type == 'warn' ? <Alert variant='soft' color="warning" sx={{
-                  py: 1,
-                  my: -0.4
-                }}>
-                      {log.content}
-                    </Alert> : log.type == 'info' ? <Alert variant='soft' color="primary" sx={{
-                  py: 1,
-                  my: -0.4
-                }}>
-                      {log.content}
-                    </Alert> : log.type == 'danger' ? <Alert variant='soft' color="danger" sx={{
-                  py: 1,
-                  my: -0.4
-                }}>
-                      {log.content}
-                    </Alert> : log.type == 'success' ? <Alert variant='soft' color="success" sx={{
-                  py: 1,
-                  my: -0.4
-                }}>
-                      {log.content}
-                    </Alert> : <Typography level="body-sm" fontFamily="monospace">{log.content}</Typography>}
-                </td>
-              </tr>)}
-          </tbody>
+                    </div> : log.type == 'error' ? <Alert variant="destructive" className="overflow-auto scrollbar-hide">
+                      <AlertDescription>
+                        <h4 className="font-semibold">Error: {JSON.parse(log.content)?.message}</h4>
+                        <pre className="text-xs mt-2 whitespace-pre-wrap">{JSON.parse(log.content)?.stack}</pre>
+                      </AlertDescription>
+                    </Alert> : log.type == 'warn' ? <Alert variant="warning" className="py-2">
+                      <AlertDescription>{log.content}</AlertDescription>
+                    </Alert> : log.type == 'info' ? <Alert className="py-2 bg-blue-50 border-blue-200 text-blue-800">
+                      <AlertDescription>{log.content}</AlertDescription>
+                    </Alert> : log.type == 'danger' ? <Alert variant="destructive" className="py-2">
+                      <AlertDescription>{log.content}</AlertDescription>
+                    </Alert> : log.type == 'success' ? <Alert variant="success" className="py-2">
+                      <AlertDescription>{log.content}</AlertDescription>
+                    </Alert> : <Typography level="body-sm" className="font-mono">{log.content}</Typography>}
+                </TableCell>
+              </TableRow>)}
+          </TableBody>
         </Table>
-      </Sheet>
-      <br />
-      {/* <pre>{JSON.stringify(task,null,2)}</pre> */}
-      {/* <pre>{JSON.stringify(run,null,2)}</pre> */}
-    </Container>
-  </>;
+      </div>
+    </div>;
 }

package/dist/server/app/tasks/[slug]/runs/[r_id]/_components/DropdownActions/DropdownActions.js

@@ -1,10 +1,8 @@
 'use client';
 
-import { Menu, MenuItem, MenuButton, Dropdown } from '@mui/joy';
-import * as React from 'react';
-import Button from '@mui/joy/Button';
-// import Divider from '@mui/joy/Divider';
-
+import { EllipsisVertical } from 'lucide-react';
+import { Button } from "../../../../../../../components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../../../../components/ui/dropdown-menu";
 import { deleteRun } from "./action";
 export default function DropdownActions({
   run
@@ -22,25 +20,21 @@ export default function DropdownActions({
     const curlCommand = `curl -X POST "${baseUrl}?${queryParams.toString()}"`;
     await navigator.clipboard.writeText(curlCommand);
   }
-  return <>
-      <Dropdown size='sm'>
-        <MenuButton aria-label="master-data more options" variant="outlined" color="primary" size="sm" sx={{
-        // Add these styles to match IconButton
-        aspectRatio: '1',
-        // borderRadius: '50%',
-        p: 0.5,
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }} onClick={event => {
-        event.preventDefault();
+  return <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className="h-8 w-8" aria-label="more options" onClick={event => {
         event.stopPropagation();
-      }}><i class="fa-solid fa-ellipsis-vertical fa-lg"></i></MenuButton>
-        <Menu placement='bottom-end'>
-          <MenuItem disabled onClick={onClickCreateVersion}>Rerun job</MenuItem>
-          <MenuItem onClick={onClickCopyRerunAsCurl}>Copy rerun as curl</MenuItem>
-          {/* <MenuItem color='danger' onClick={()=>{setOpen(true);}}>Delete Part</MenuItem> */}
-        </Menu>
-      </Dropdown>
-		</>;
+      }}>
+          <EllipsisVertical className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem disabled onClick={onClickCreateVersion}>
+          Rerun job
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onClickCopyRerunAsCurl}>
+          Copy rerun as curl
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>;
 }