Merge pull request #112 from RahulARanger/build

feat: worked on preview images component
RahulARanger · May 22, 2024 · 7b18505 · 7b18505
2 parents ab79509 + 9081bb5
commit 7b18505
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 38 deletions.
diff --git a/handshake-nodejs-reporters/package-lock.json b/handshake-nodejs-reporters/package-lock.json
diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/package.json b/handshake-nodejs-reporters/packages/handshake-dashboard/package.json
@@ -1,6 +1,6 @@
 {
     "name": "handshake-dashboard",
-    "version": "0.6.2",
+    "version": "0.6.3",
     "license": "MIT",
     "private": "true",
     "scripts": {

diff --git a/...orters/packages/handshake-dashboard/src/components/about-test-entities/image-carousel.tsx b/...orters/packages/handshake-dashboard/src/components/about-test-entities/image-carousel.tsx
@@ -1,27 +1,80 @@
 import { Carousel } from '@mantine/carousel';
 import type { ImageProps } from '@mantine/core';
-import { Card, Center, Image, Paper, Text } from '@mantine/core';
+import {
+    ActionIcon,
+    Card,
+    Center,
+    Image,
+    Modal,
+    Paper,
+    rem,
+    Text,
+    Tooltip,
+} from '@mantine/core';
+import { IconMaximize } from '@tabler/icons-react';
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { ImageRecord } from 'types/test-entity-related';
 
+export interface PreviewImageFeed {
+    images: ImageRecord[];
+    index: number;
+    title: string;
+}
+
 export default function ImageCarousel(properties: {
-    height: ImageProps['h'];
+    height?: ImageProps['h'];
+    index?: number;
     images: ImageRecord[];
+    onExpand?: (_: PreviewImageFeed) => undefined;
 }) {
-    const slides = properties.images.map((image) => (
+    const slides = properties.images.map((image, index) => (
         <Carousel.Slide key={image.url}>
             <Card withBorder shadow="lg" mx="xs" radius="md">
-                <Card.Section withBorder p="sm">
-                    <Text size="sm">{image.title}</Text>
-                </Card.Section>
-                <Card.Section p="sm">
+                <Tooltip label={image.description}>
+                    <Card.Section withBorder p="sm">
+                        <Text size="sm">{image.title}</Text>
+                    </Card.Section>
+                </Tooltip>
+                <Card.Section p="sm" withBorder={!properties.onExpand}>
                     <Image
                         radius="md"
                         src={image.url}
                         w="100%"
+                        p={0}
                         h={properties.height}
+                        alt={image?.description}
                         fallbackSrc="https://placehold.co/600x400?text=Attachment"
                     />
+                    {properties.onExpand ? (
+                        <ActionIcon
+                            variant="white"
+                            size="sm"
+                            style={{
+                                position: 'absolute',
+                                right: '9px',
+                                top: '52px',
+                            }}
+                            onClick={() =>
+                                properties.onExpand &&
+                                properties.onExpand({
+                                    images: properties.images,
+                                    index,
+                                    title: '',
+                                })
+                            }
+                        >
+                            <IconMaximize
+                                style={{
+                                    width: rem(16),
+                                    height: rem(16),
+                                }}
+                                stroke={2.5}
+                            />
+                        </ActionIcon>
+                    ) : (
+                        <></>
+                    )}
                 </Card.Section>
             </Card>
         </Carousel.Slide>
@@ -31,7 +84,12 @@ export default function ImageCarousel(properties: {
         <Carousel
             align="start"
             withIndicators
-            slideSize={Math.min(properties.images.length, 3)}
+            slideSize={
+                properties.onExpand
+                    ? Math.min(properties.images.length, 3)
+                    : '100%'
+            }
+            initialSlide={properties.index ?? 0}
         >
             {slides}
         </Carousel>
@@ -49,3 +107,24 @@ export function NoAttachmentsAdded() {
         </Paper>
     );
 }
+
+export function ShowImage(properties: {
+    onClose: () => void;
+    feed?: PreviewImageFeed;
+}): ReactNode {
+    return (
+        <Modal
+            onClose={properties.onClose}
+            opened={properties.feed !== undefined}
+            size="lg"
+            title={properties.feed?.title}
+            radius={'md'}
+            lockScroll
+        >
+            <ImageCarousel
+                images={properties.feed?.images ?? []}
+                index={properties.feed?.index}
+            />
+        </Modal>
+    );
+}
diff --git a/...porters/packages/handshake-dashboard/src/components/about-test-entities/list-of-tests.tsx b/...porters/packages/handshake-dashboard/src/components/about-test-entities/list-of-tests.tsx
@@ -44,12 +44,14 @@ import { ErrorStack, ErrorsToShow } from './error-card';
 import dayjs from 'dayjs';
 import { IconCaretRightFilled } from '@tabler/icons-react';
 import type { ParsedTestRecord } from 'types/parsed-records';
-import ImageCarousel, { NoAttachmentsAdded } from './image-carousel';
+import type { PreviewImageFeed } from './image-carousel';
+import ImageCarousel, { NoAttachmentsAdded, ShowImage } from './image-carousel';
 
 function DetailedTestView(properties: {
     testID?: string;
     suiteID?: string;
     test: ParsedTestRecord;
+    setImagePreview: (feed: PreviewImageFeed) => undefined;
 }): ReactNode {
     const idForExpandedItem = properties.test.Id.slice(0, -1);
     const { data, isLoading } = useSWRImmutable<EntityLevelAttachments>(
@@ -82,7 +84,7 @@ function DetailedTestView(properties: {
     const toLoad = isLoading || writtenAttachments === undefined;
 
     return toLoad ? (
-        <Skeleton h={300} animate w={'100%'} />
+        <Skeleton h={330} animate w={'100%'} />
     ) : (
         <Card withBorder shadow="xl" p="sm" m="xs">
             <Stack gap={0}>
@@ -91,21 +93,27 @@ function DetailedTestView(properties: {
                 </Card.Section>
                 <Card.Section withBorder p="sm">
                     <Grid>
-                        <Grid.Col span={6} h={250}>
+                        <Grid.Col span={6} h={240}>
                             {writtenAttachments.length > 0 ? (
                                 <ImageCarousel
                                     height={160}
                                     images={writtenAttachments}
+                                    onExpand={(_) =>
+                                        properties.setImagePreview({
+                                            ..._,
+                                            title: `Images attached for test: ${properties.test.Title}`,
+                                        })
+                                    }
                                 />
                             ) : (
                                 <NoAttachmentsAdded />
                             )}
                         </Grid.Col>
                         <Grid.Col span={6}>
-                            <ScrollAreaAutosize h={250}>
+                            <ScrollAreaAutosize h={240}>
                                 <ErrorStack
                                     errors={properties.test.errors}
-                                    h={235}
+                                    h={226}
                                 />
                             </ScrollAreaAutosize>
                         </Grid.Col>
@@ -158,6 +166,9 @@ export default function ListOfTests(properties: {
 
     const router = useRouter();
     const [errorsToShow, setErrorsToShow] = useState<ErrorRecord[]>([]);
+    const [imagePreview, setImagePreview] = useState<
+        PreviewImageFeed | undefined
+    >();
 
     function onRowsChange(
         rows: ParsedTestRecord[],
@@ -202,6 +213,11 @@ export default function ListOfTests(properties: {
                                         testID={properties.testID}
                                         suiteID={properties.suiteID}
                                         test={row}
+                                        setImagePreview={
+                                            setImagePreview as (
+                                                feed: PreviewImageFeed,
+                                            ) => undefined
+                                        }
                                     />
                                 );
                             return (
@@ -436,6 +452,10 @@ export default function ListOfTests(properties: {
                 }}
                 errorsToShow={errorsToShow}
             />
+            <ShowImage
+                feed={imagePreview}
+                onClose={() => setImagePreview(undefined)}
+            />
         </>
     );
 }