feat: ✨ displayed image attachment instead of base64 string (#13)

WasiqB · Sep 27, 2024 · f33d052 · f33d052
1 parent 4b30082
commit f33d052
Show file tree

Hide file tree

Showing 5 changed files with 403 additions and 354 deletions.
diff --git a/app/(app)/results/page.tsx b/app/(app)/results/page.tsx
@@ -100,7 +100,7 @@ const ResultsPage = (): JSX.Element => {
 
   return (
     <section className='container mx-auto space-y-6 p-4'>
-      <h1 className='mb-8 text-center text-3xl font-bold'>
+      <h1 className='mb-8 text-balance text-center text-3xl font-bold'>
         Ultra Report for {date}
       </h1>
       <div className='grid grid-cols-1 gap-6'>
@@ -110,28 +110,28 @@ const ResultsPage = (): JSX.Element => {
             <CardDescription>Overall Test execution statistics</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className='grid grid-cols-4 gap-4'>
-              <div className='rounded-lg bg-blue-200 p-4'>
+            <div className='grid grid-cols-2 gap-4 md:grid-cols-4'>
+              <Card className='rounded-lg bg-blue-200 p-4'>
                 <CardDescription>Total Tests</CardDescription>
                 <CardTitle>{passed + failed + skipped}</CardTitle>
-              </div>
-              <div className='rounded-lg bg-green-200 p-4'>
+              </Card>
+              <Card className='rounded-lg bg-green-200 p-4'>
                 <CardDescription>Passed</CardDescription>
                 <CardTitle>{passed}</CardTitle>
-              </div>
-              <div className='rounded-lg bg-red-200 p-4'>
+              </Card>
+              <Card className='rounded-lg bg-red-200 p-4'>
                 <CardDescription>Failed</CardDescription>
                 <CardTitle>{failed}</CardTitle>
-              </div>
-              <div className='rounded-lg bg-yellow-200 p-4'>
+              </Card>
+              <Card className='rounded-lg bg-yellow-200 p-4'>
                 <CardDescription>Skipped</CardDescription>
                 <CardTitle>{skipped}</CardTitle>
-              </div>
+              </Card>
             </div>
           </CardContent>
         </Card>
       </div>
-      <div className='grid grid-cols-2 gap-6'>
+      <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
         <DoughNutComponent
           title='Test Summary Counts'
           description='Status based distribution of Test results'

diff --git a/components/data-table/attachment.tsx b/components/data-table/attachment.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Link } from 'lucide-react';
+
+interface AttachmentDialogProps {
+  content: string;
+  title: string;
+  description?: string;
+}
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const isBase64Image = (str: string): boolean => {
+  try {
+    return btoa(atob(str)) === str;
+  } catch (err) {
+    return false;
+  }
+};
+
+export function AttachmentDialog({
+  content,
+  title,
+  description,
+}: AttachmentDialogProps): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false);
+  const isImage = isBase64Image(content);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button variant='outline'>
+          <Link className='h-4 w-4' />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className='flex flex-col sm:max-h-[90vh] sm:max-w-[90vw]'>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <div className='mt-4 flex-grow overflow-auto'>
+          {isImage ? (
+            <div className='relative h-full min-h-[300px] w-full border border-gray-500'>
+              <img
+                src={`data:image/png;base64,${content}`}
+                alt='Attachment'
+                className='h-full w-full object-contain'
+              />
+            </div>
+          ) : (
+            <div className='max-h-[60vh] overflow-y-auto'>
+              <p className='whitespace-pre-wrap text-lg text-gray-800'>
+                {content}
+              </p>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/data-table/columns.tsx b/components/data-table/columns.tsx
@@ -25,6 +25,7 @@ import { formatDuration, formatTime } from '@/lib/formatting';
 import { GearIcon } from '@radix-ui/react-icons';
 import { TooltipWrapper } from '@/components/utils/tooltip-wrapper';
 import { useState } from 'react';
+import { AttachmentDialog } from './attachment';
 
 export const columns: ColumnDef<TestResultData>[] = [
   {
@@ -129,7 +130,7 @@ export const columns: ColumnDef<TestResultData>[] = [
                   <CircleAlert className='h-4 w-4 text-red-500' />
                 </Button>
               </DialogTrigger>
-              <DialogContent className='sm:max-w-[75%]'>
+              <DialogContent className='flex flex-col sm:max-h-[90vh] sm:max-w-[90vw]'>
                 <DialogHeader>
                   <DialogTitle>Exception</DialogTitle>
                   <DialogDescription>
@@ -152,6 +153,7 @@ export const columns: ColumnDef<TestResultData>[] = [
                           <pre className='mockup-code max-h-[300px] overflow-auto'>
                             {exception.stack_trace.map((line, index) => (
                               <code key={index} className='block pl-2'>
+                                {line.startsWith('at') && '\t'}
                                 {line.trim()}
                               </code>
                             ))}
@@ -174,39 +176,16 @@ export const columns: ColumnDef<TestResultData>[] = [
     accessorKey: 'attachment',
     header: () => <Link className='h-4 w-4' />,
     cell: ({ row }) => {
-      const [isOpen, setIsOpen] = useState(false);
       const attachment = row.getValue('attachment') as TestLog;
+      const content = attachment.line?.trim();
       return (
-        <>
-          {attachment && (
-            <div className='flex items-center'>
-              <Dialog open={isOpen} onOpenChange={setIsOpen}>
-                <DialogTrigger asChild>
-                  <Button
-                    variant='outline'
-                    onClick={() => setIsOpen(true)}
-                    className='w-15'
-                  >
-                    <Link className='h-4 w-4' />
-                  </Button>
-                </DialogTrigger>
-                <DialogContent className='sm:max-w-[75%]'>
-                  <DialogHeader>
-                    <DialogTitle>Attachment</DialogTitle>
-                    <DialogDescription>
-                      Below is the attachment from your Test
-                    </DialogDescription>
-                  </DialogHeader>
-                  <div className='grid gap-4 py-4'>
-                    <div className='grid grid-cols-4 items-center gap-4'>
-                      {attachment.line?.trim()}
-                    </div>
-                  </div>
-                </DialogContent>
-              </Dialog>
-            </div>
-          )}
-        </>
+        attachment && (
+          <AttachmentDialog
+            title='Attachment'
+            description='Below is the attachment from your Test'
+            content={content}
+          />
+        )
       );
     },
   },

diff --git a/package.json b/package.json
@@ -48,8 +48,8 @@
     "@next/eslint-plugin-next": "^14.2.13",
     "@stylistic/eslint-plugin-js": "^2.8.0",
     "@stylistic/eslint-plugin-ts": "^2.8.0",
-    "@types/node": "^22.7.2",
-    "@types/react": "^18.3.9",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18",
     "@types/xml2js": "^0.4.14",
     "daisyui": "^4.12.10",