diff --git a/handshake-nodejs-reporters/package-lock.json b/handshake-nodejs-reporters/package-lock.json index 9de32004..634130bd 100644 --- a/handshake-nodejs-reporters/package-lock.json +++ b/handshake-nodejs-reporters/package-lock.json @@ -51,7 +51,7 @@ "dependencies": { "@wdio/cli": "^8.36.1", "@wdio/mocha-framework": "8.36.1", - "wdio-handshake-reporter": "0.5.0" + "wdio-handshake-reporter": "0.6.0" }, "devDependencies": { "@wdio/cucumber-framework": "8.36.1", @@ -61,6 +61,44 @@ "typescript": "^5.4.5" } }, + "apps/test-wdio-cucumber/node_modules/chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "apps/test-wdio-cucumber/node_modules/common-handshakes": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/common-handshakes/-/common-handshakes-0.6.0.tgz", + "integrity": "sha512-+Rg5IcDC1Vu6rlBEz7qixdrsVnUZgjT+zVeNkXwDDCiv+QpDH6PZq1vmXTdlk82QQHzr5p2q1uE9P6o3rZ27kw==", + "hasInstallScript": true, + "dependencies": { + "chalk": "^5.3.0", + "cross-env": "^7.0.3", + "p-queue": "^8.0.1", + "pino": "^9.0.0", + "shell-quote": "^1.8.1", + "superagent": "~9.0.2", + "tsup": "^8.0.2" + } + }, + "apps/test-wdio-cucumber/node_modules/wdio-handshake-reporter": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/wdio-handshake-reporter/-/wdio-handshake-reporter-0.6.0.tgz", + "integrity": "sha512-4qpDQMVOioyLg7qxVez6NHPpPIDKFvs2AIehNZ4G/gnUyeT3nEhYlhrVLJuKpI6My84lmThL69hgrAORdPd7dw==", + "dependencies": { + "@wdio/reporter": "^8.36.1", + "@wdio/types": "^8.36.1", + "common-handshakes": "0.6.0", + "pino": "^9.0.0", + "superagent": "^9.0.1" + } + }, "apps/test-wdio-mocha": { "version": "1.0.0", "license": "ISC", @@ -71,12 +109,50 @@ "@wdio/mocha-framework": "^8.36.1", "@wdio/spec-reporter": "^8.36.1", "ts-node": "^10.9.2", - "wdio-handshake-reporter": "0.5.0" + "wdio-handshake-reporter": "0.6.0" }, "devDependencies": { "cross-env": "^7.0.3" } }, + "apps/test-wdio-mocha/node_modules/chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "apps/test-wdio-mocha/node_modules/common-handshakes": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/common-handshakes/-/common-handshakes-0.6.0.tgz", + "integrity": "sha512-+Rg5IcDC1Vu6rlBEz7qixdrsVnUZgjT+zVeNkXwDDCiv+QpDH6PZq1vmXTdlk82QQHzr5p2q1uE9P6o3rZ27kw==", + "hasInstallScript": true, + "dependencies": { + "chalk": "^5.3.0", + "cross-env": "^7.0.3", + "p-queue": "^8.0.1", + "pino": "^9.0.0", + "shell-quote": "^1.8.1", + "superagent": "~9.0.2", + "tsup": "^8.0.2" + } + }, + "apps/test-wdio-mocha/node_modules/wdio-handshake-reporter": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/wdio-handshake-reporter/-/wdio-handshake-reporter-0.6.0.tgz", + "integrity": "sha512-4qpDQMVOioyLg7qxVez6NHPpPIDKFvs2AIehNZ4G/gnUyeT3nEhYlhrVLJuKpI6My84lmThL69hgrAORdPd7dw==", + "dependencies": { + "@wdio/reporter": "^8.36.1", + "@wdio/types": "^8.36.1", + "common-handshakes": "0.6.0", + "pino": "^9.0.0", + "superagent": "^9.0.1" + } + }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "license": "MIT", @@ -29730,7 +29806,7 @@ } }, "packages/common-handshakes": { - "version": "0.5.0", + "version": "0.6.1", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -29775,7 +29851,7 @@ } }, "packages/handshake-dashboard": { - "version": "0.6.1", + "version": "0.6.3", "license": "MIT", "dependencies": { "@chromatic-com/storybook": "^1.4.0", @@ -30053,12 +30129,12 @@ } }, "packages/wdio-handshake-reporter": { - "version": "0.5.0", + "version": "0.6.1", "license": "MIT", "dependencies": { "@wdio/reporter": "^8.36.1", "@wdio/types": "^8.36.1", - "common-handshakes": "0.6.0", + "common-handshakes": "0.6.1", "pino": "^9.1.0", "superagent": "^9.0.2" }, @@ -30085,21 +30161,6 @@ "funding": { "url": "https://github.com/chalk/chalk?sponsor=1" } - }, - "packages/wdio-handshake-reporter/node_modules/common-handshakes": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/common-handshakes/-/common-handshakes-0.6.0.tgz", - "integrity": "sha512-+Rg5IcDC1Vu6rlBEz7qixdrsVnUZgjT+zVeNkXwDDCiv+QpDH6PZq1vmXTdlk82QQHzr5p2q1uE9P6o3rZ27kw==", - "hasInstallScript": true, - "dependencies": { - "chalk": "^5.3.0", - "cross-env": "^7.0.3", - "p-queue": "^8.0.1", - "pino": "^9.0.0", - "shell-quote": "^1.8.1", - "superagent": "~9.0.2", - "tsup": "^8.0.2" - } } } } diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/package.json b/handshake-nodejs-reporters/packages/handshake-dashboard/package.json index cdd66656..1bc23ca3 100644 --- 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/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/about-test-entities/image-carousel.tsx b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/about-test-entities/image-carousel.tsx index 70c863a8..1c17a71b 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/about-test-entities/image-carousel.tsx +++ b/handshake-nodejs-reporters/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) => ( - - {image.title} - - + + + {image.title} + + + {image?.description} + {properties.onExpand ? ( + + properties.onExpand && + properties.onExpand({ + images: properties.images, + index, + title: '', + }) + } + > + + + ) : ( + <> + )} @@ -31,7 +84,12 @@ export default function ImageCarousel(properties: { {slides} @@ -49,3 +107,24 @@ export function NoAttachmentsAdded() { ); } + +export function ShowImage(properties: { + onClose: () => void; + feed?: PreviewImageFeed; +}): ReactNode { + return ( + + + + ); +} diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/about-test-entities/list-of-tests.tsx b/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/about-test-entities/list-of-tests.tsx index 909ce085..0249c91e 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/components/about-test-entities/list-of-tests.tsx +++ b/handshake-nodejs-reporters/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( @@ -82,7 +84,7 @@ function DetailedTestView(properties: { const toLoad = isLoading || writtenAttachments === undefined; return toLoad ? ( - + ) : ( @@ -91,21 +93,27 @@ function DetailedTestView(properties: { - + {writtenAttachments.length > 0 ? ( + properties.setImagePreview({ + ..._, + title: `Images attached for test: ${properties.test.Title}`, + }) + } /> ) : ( )} - + @@ -158,6 +166,9 @@ export default function ListOfTests(properties: { const router = useRouter(); const [errorsToShow, setErrorsToShow] = useState([]); + 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} /> + setImagePreview(undefined)} + /> ); } diff --git a/handshake-nodejs-reporters/packages/handshake-dashboard/src/pages/_document.tsx b/handshake-nodejs-reporters/packages/handshake-dashboard/src/pages/_document.tsx index 75643b0d..8cfbf60b 100644 --- a/handshake-nodejs-reporters/packages/handshake-dashboard/src/pages/_document.tsx +++ b/handshake-nodejs-reporters/packages/handshake-dashboard/src/pages/_document.tsx @@ -1,6 +1,6 @@ import { TEXT } from 'handshake-utils'; import { Html, Head, Main, NextScript } from 'next/document'; -import Script from 'next/script'; +// import Script from 'next/script'; import type { ReactNode } from 'react'; import React from 'react'; import { ColorSchemeScript } from '@mantine/core'; @@ -10,7 +10,7 @@ export default function Document(): ReactNode { -