@syngrisi/syngrisi 2.2.1

package/src/ui-app/index2/components/Tests/Table/Checks/Check.tsx

@@ -0,0 +1,281 @@
+/* eslint-disable max-len,no-underscore-dangle,react/jsx-no-useless-fragment */
+// noinspection CheckTagEmptyBody
+import * as React from 'react';
+import {
+    Card,
+    Group,
+    Image,
+    Paper,
+    Text,
+    Tooltip,
+    useMantineTheme,
+} from '@mantine/core';
+
+import queryString from 'query-string';
+import { useLocalStorage } from '@mantine/hooks';
+import { encodeQueryParams } from 'use-query-params';
+import { useParams } from '../../../../hooks/useParams';
+import config from '../../../../../config';
+import { AcceptButton } from './AcceptButton';
+import { RemoveButton } from './RemoveButton';
+import { ViewPortLabel } from './ViewPortLabel';
+import { sizes } from './checkSizes';
+import { Status } from '../../../../../shared/components/Check/Status';
+import { PreviewCheckTooltipLabel } from './PreviewCheckTooltipLabel';
+
+interface Props {
+    check: any
+    checksViewMode: string,
+    testUpdateQuery: any,
+    checksQuery: any,
+}
+
+export function Check({ check, checksViewMode, checksQuery, testUpdateQuery }: Props) {
+    const { setQuery, query, queryConfig } = useParams();
+    const [checksViewSize] = useLocalStorage({ key: 'check-view-size', defaultValue: 'medium' });
+
+    const imageWeight: number = 24 * sizes[checksViewSize].coefficient;
+    const theme = useMantineTheme();
+
+    const imageFilename = check.diffId?.filename || check.actualSnapshotId?.filename || check.baselineId?.filename;
+    const imagePreviewSrc = `${config.baseUri}/snapshoots/${imageFilename}`;
+
+    const overlayParamsString = queryString.stringify(
+        encodeQueryParams(
+            queryConfig,
+            { ...query, ['checkId' as string]: check._id },
+        ),
+    );
+    const linkToCheckOverlay = `/?${overlayParamsString}&modalIsOpen=true`;
+
+    const handlePreviewImageClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!e.metaKey && !e.ctrlKey) e.preventDefault();
+        if (e.metaKey || e.ctrlKey) return;
+        setQuery({ checkId: check._id });
+        setQuery({ modalIsOpen: 'true' });
+    };
+
+    return (
+        <>
+            {
+                (checksViewMode === 'list')
+                    ? (
+                        // LIST VIEW
+                        <Group
+                            data-check={check.name}
+                            p="sm"
+                            sx={{
+                                width: '100%',
+                                borderBottom: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2]}`,
+                                '&:hover': {
+                                    // border: `1px solid ${theme.colors.gray[3]}`,
+                                    backgroundColor: theme.colors.dark[5],
+                                },
+                            }}
+                            position="apart"
+                        >
+                            <Paper shadow="md" pb={0}>
+                                <Tooltip.Floating
+                                    multiline
+                                    zIndex={1000}
+                                    withinPortal
+                                    position="right-start"
+                                    color="dark"
+                                    label={
+                                        <PreviewCheckTooltipLabel check={check} />
+                                    }
+                                >
+                                    <a
+                                        style={{ display: 'inline-block', width: '100%', cursor: 'pointer' }}
+                                        data-check-previw-link={check.name}
+                                        href={linkToCheckOverlay}
+                                    >
+                                        <Group
+                                            position="center"
+                                            sx={{ width: '100%', cursor: 'pointer' }}
+                                            onClick={handlePreviewImageClick}
+                                        >
+                                            <Image
+                                                src={imagePreviewSrc}
+                                                data-test-preview-image={check.name}
+                                                fit="contain"
+                                                // fit={'scale-down'}
+                                                // fit={'cover'} //default
+                                                // fit={'none'}
+                                                // fit={'fill'}
+                                                width={`${imageWeight * 4}px`}
+                                                // height="100px"
+                                                withPlaceholder
+                                                alt={check.name}
+                                                // sx={{
+                                                //     cursor: 'pointer',
+                                                //     // border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2]}`
+                                                // }}
+                                                styles={
+                                                    () => ({
+                                                        image: {
+                                                            // cursor: 'pointer',
+                                                            // maxHeight: `${imageWeight * 4}px`,
+                                                            aspectRatio: '1/1',
+                                                            // height: '10%!important',
+                                                        },
+                                                    })
+                                                }
+                                                onClick={handlePreviewImageClick}
+                                            />
+                                        </Group>
+                                    </a>
+                                </Tooltip.Floating>
+                            </Paper>
+                            <Tooltip label={check.name} multiline withinPortal>
+                                <Text
+                                    lineClamp={2}
+                                    sx={{ width: '50%' }}
+                                    data-table-check-name={check.name}
+                                >
+                                    {check.name}
+                                </Text>
+                            </Tooltip>
+
+                            <Group position="right">
+                                <Status check={check} />
+                                <ViewPortLabel
+                                    color="blue"
+                                    check={check}
+                                    sizes={sizes}
+                                    checksViewSize={checksViewSize}
+                                />
+
+                                <Group spacing={4} position="left" noWrap>
+                                    <AcceptButton
+                                        check={check}
+                                        testUpdateQuery={testUpdateQuery}
+                                        checksQuery={checksQuery}
+                                    />
+
+                                    <RemoveButton
+                                        check={check}
+                                        checksQuery={checksQuery}
+                                        testUpdateQuery={testUpdateQuery}
+                                    />
+                                </Group>
+                            </Group>
+                        </Group>
+                    )
+                    : (
+                        // CARD VIEW
+                        <Card
+                            data-check={check.name}
+                            sx={{
+                                width: `${imageWeight}%`,
+                                '&:hover': {
+                                    boxShadow: '0 1px 3px rgb(0 0 0 / 15%), rgb(0 0 0 / 15%) 0px 10px 15px -5px, rgb(0 0 0 / 14%) 0px 7px 7px -5px',
+                                },
+                            }}
+                            m={1}
+                            pt={0}
+                            pb={0}
+                            pl={0}
+                            pr={0}
+                            shadow="sm"
+                        >
+                            <Paper
+                                p="sm"
+                                ml={0}
+                                mr={0}
+                                sx={{
+                                    backgroundColor: (theme.colorScheme === 'dark')
+                                        ? theme.colors.dark[8]
+                                        : theme.colors.gray[2],
+                                }}
+                                radius={0}
+                            >
+                                <Tooltip
+                                    label={check.name}
+                                    multiline
+                                    withinPortal
+                                >
+                                    <Text
+                                        lineClamp={1}
+                                        data-table-check-name={check.name}
+                                    >
+                                        {check.name}
+                                    </Text>
+                                </Tooltip>
+                            </Paper>
+                            <Card.Section m={2}>
+                                <Tooltip
+                                    openDelay={300}
+                                    multiline
+                                    zIndex={1000}
+                                    withinPortal
+                                    position="right-start"
+                                    color="dark"
+                                    label={
+                                        <PreviewCheckTooltipLabel check={check} />
+                                    }
+                                >
+                                    <a
+                                        style={{ display: 'inline-block', width: '100%', cursor: 'pointer' }}
+                                        href={linkToCheckOverlay}
+                                        data-check-previw-link={check.name}
+                                    >
+                                        <Group
+                                            position="center"
+                                            sx={{ width: '100%', cursor: 'pointer' }}
+                                            onClick={handlePreviewImageClick}
+                                        >
+                                            <Image
+                                                data-test-preview-image={check.name}
+                                                src={imagePreviewSrc}
+                                                fit="contain"
+                                                alt={check.name}
+                                                styles={
+                                                    () => ({
+                                                        image: {
+                                                            maxHeight: checksViewMode === 'bounded' ? `${imageWeight * 8}px` : '',
+                                                        },
+                                                    })
+                                                }
+                                            />
+                                        </Group>
+                                    </a>
+
+                                </Tooltip>
+                            </Card.Section>
+
+                            {/* CHECK TOOLBAR */}
+                            <Group position="apart" pl="sm" pr="sm" mt="xs" mb={8} spacing={4} align="center" noWrap>
+                                <Status check={check} variant="filled" />
+
+                                <ViewPortLabel
+                                    check={check}
+                                    sizes={sizes}
+                                    color="blue"
+                                    size="md"
+                                    fontSize="10px"
+                                    checksViewSize={checksViewSize}
+                                    displayed={(checksViewSize !== 'small')}
+                                />
+                                <Group spacing={8} position="right" noWrap>
+                                    <AcceptButton
+                                        size={22}
+                                        check={check}
+                                        testUpdateQuery={testUpdateQuery}
+                                        checksQuery={checksQuery}
+                                    />
+
+                                    <RemoveButton
+                                        size={26}
+                                        checksQuery={checksQuery}
+                                        testUpdateQuery={testUpdateQuery}
+                                        check={check}
+                                    />
+                                </Group>
+                            </Group>
+                        </Card>
+                    )
+            }
+        </>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Canvas/Canvas.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Group, Paper, useMantineTheme } from '@mantine/core';
+
+interface Props {
+    related: any
+    canvasElementRef: React.MutableRefObject<any>
+}
+
+export function Canvas({ related, canvasElementRef }: Props) {
+    const theme = useMantineTheme();
+
+    return (
+        <Group sx={{ width: related.opened ? '90%' : '100%' }}>
+            <Paper
+                shadow="xl"
+                withBorder
+                ref={canvasElementRef}
+                id="snapshoot"
+                style={
+                    {
+                        backgroundColor: (
+                            theme.colorScheme === 'dark'
+                                ? theme.colors.dark[8]
+                                : theme.colors.gray[1]
+                        ),
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                    }
+                }
+            >
+                <canvas style={{ width: '100%' }} id="2d" />
+            </Paper>
+        </Group>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Canvas/helpers.ts

@@ -0,0 +1,72 @@
+/* eslint-disable no-unused-vars */
+
+/* global fabric */
+
+import { fabric } from 'fabric';
+import { log } from '../../../../../../../shared/utils/Logger';
+import { errorMsg } from '../../../../../../../shared/utils';
+
+function imageFromUrl(url: string) {
+    return new Promise(
+        (resolve, reject) => {
+            try {
+                fabric.Image.fromURL(
+                    url, (img) => {
+                        // eslint-disable-next-line no-param-reassign
+                        img.objectCaching = false;
+                        return resolve(img);
+                    },
+                );
+            } catch (e) {
+                log.error(`cannot create image from url, error: '${e}'`);
+                reject(e);
+            }
+        },
+    );
+}
+
+function lockImage(image: fabric.Image) {
+    image.set({
+        lockScalingX: true,
+        lockScalingY: true,
+        lockMovementX: true,
+        lockMovementY: true,
+        hoverCursor: 'default',
+        hasControls: false,
+        selectable: false,
+    });
+    return image;
+}
+
+export {
+    lockImage,
+    imageFromUrl,
+};
+
+function onImageErrorHandler(...e: any) {
+    const imgSrc = e[0].path[0].src;
+    const msg = `Cannot load image: '${imgSrc}'`;
+    log.error(msg, e);
+    errorMsg({ error: msg });
+}
+
+export function createImageAndWaitForLoad(src: string) {
+    const timeout = 90000;
+    const img = new Image();
+    img.addEventListener('error', onImageErrorHandler);
+    img.src = src;
+    return Promise.race([
+        new Promise((resolve, reject) => {
+            img.onload = () => resolve(img);
+            img.onerror = (e) => reject(e);
+        }),
+        new Promise((_, reject) => {
+            setTimeout(
+                () => reject(
+                    new Error(`The image loading timeout is exceeded: '${timeout}' milliseconds, src: '${src}'`),
+                ),
+                timeout,
+            );
+        }),
+    ]);
+}