@syngrisi/syngrisi 2.2.1

package/src/ui-app/index2/components/Tests/Table/Cells/BrowserName.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Group, Text, Tooltip } from '@mantine/core';
+import { tableColumns } from '../tableColumns';
+import { BrowserIcon } from '../../../../../shared/components/Check/BrowserIcon';
+
+interface Props {
+    type: string
+    test: any
+    itemValue: string
+}
+
+export function BrowserName({ type, test, itemValue }: Props) {
+    return (
+        <td
+            key={type}
+            data-test={`table-row-${tableColumns[type].label}`}
+            style={{ ...tableColumns[type].cellStyle }}
+        >
+            <Tooltip label={test[type]} multiline withinPortal>
+                <Group spacing={6} align="center" noWrap>
+                    <BrowserIcon size={24} browser={itemValue} />
+                    <Text
+                        lineClamp={1}
+                        sx={{ wordBreak: 'break-all' }}
+                    >
+                        {itemValue}
+                    </Text>
+                </Group>
+            </Tooltip>
+        </td>
+
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Cells/BrowserVersion.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Group, Text, Tooltip } from '@mantine/core';
+import { tableColumns } from '../tableColumns';
+
+interface Props {
+    type: string
+    test: any
+    itemValue: string
+}
+
+export function BrowserVersion({ type, test, itemValue }: Props) {
+    return (
+        <td
+            key={type}
+            data-test={`table-row-${tableColumns[type].label}`}
+            style={{ ...tableColumns[type].cellStyle }}
+        >
+            <Tooltip label={test[type]} multiline withinPortal>
+                <Group spacing={6} align="center" noWrap>
+                    <Text
+                        lineClamp={1}
+                        sx={{ wordBreak: 'break-all' }}
+                    >
+                        {itemValue}
+                    </Text>
+                </Group>
+            </Tooltip>
+        </td>
+
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Cells/CellWrapper.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Text, Tooltip } from '@mantine/core';
+import { Status } from './Status';
+import { StartDate } from './StartDate';
+import { Os } from './Os';
+import { BrowserName } from './BrowserName';
+import { BrowserVersion } from './BrowserVersion';
+import { Branch } from './Branch';
+import { Viewport } from './ViewPort';
+import { tableColumns } from '../tableColumns';
+
+interface Props {
+    type: string
+    test: any
+    itemValue: string
+}
+
+export function CellWrapper({ type, test, itemValue }: Props) {
+    const cellsMap: { [key: string]: any } = {
+        status: (<Status type={type} key={type} test={test} />),
+        startDate: (<StartDate type={type} key={type} test={test} itemValue={itemValue} />),
+        os: (<Os type={type} key={type} test={test} itemValue={itemValue} />),
+        browserName: (<BrowserName type={type} key={type} test={test} itemValue={itemValue} />),
+        browserVersion: (<BrowserVersion type={type} key={type} test={test} itemValue={itemValue} />),
+        branch: (<Branch type={type} key={type} test={test} itemValue={itemValue} />),
+        viewport: (<Viewport type={type} key={type} test={test} />),
+    };
+    return cellsMap[type] || (
+        <td
+            key={type}
+            data-test={`table-row-${tableColumns[type].label}`}
+            style={{ ...tableColumns[type].cellStyle }}
+        >
+            <Tooltip label={test[type]} multiline withinPortal>
+                <Text
+                    lineClamp={1}
+                    sx={{ wordBreak: 'break-all' }}
+                    {
+                        ...{
+                            [`data-table-test-${type.toLowerCase()}`]: itemValue,
+                        }
+                    }
+                >
+                    {itemValue}
+                </Text>
+            </Tooltip>
+        </td>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Cells/Os.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Group, Text, Tooltip } from '@mantine/core';
+import { tableColumns } from '../tableColumns';
+import { OsIcon } from '../../../../../shared/components/Check/OsIcon';
+
+interface Props {
+    type: string
+    test: any
+    itemValue: string
+}
+
+export function Os({ type, test, itemValue }: Props) {
+    return (
+        <td
+            key={type}
+            data-test={`table-row-${tableColumns[type].label}`}
+            style={{ ...tableColumns[type].cellStyle }}
+        >
+            <Tooltip label={test[type]} multiline withinPortal>
+                <Group spacing={6} align="center" noWrap>
+                    <OsIcon size={18} os={itemValue} />
+                    <Text
+                        lineClamp={1}
+                        sx={{ wordBreak: 'break-all' }}
+                    >
+                        {itemValue}
+                    </Text>
+                </Group>
+            </Tooltip>
+        </td>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Cells/StartDate.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Text, Tooltip } from '@mantine/core';
+import * as dateFns from 'date-fns';
+import { tableColumns } from '../tableColumns';
+
+interface Props {
+    type: string
+    test: any
+    itemValue: string
+}
+export function StartDate({ type, test, itemValue }: Props) {
+    return (
+        <td
+            key={type}
+            title={test.level}
+            data-test={`table-row-${tableColumns[type].label}`}
+            style={{
+                ...tableColumns[type].cellStyle,
+                paddingLeft: '2px',
+            }}
+        >
+            <Tooltip label={itemValue} withinPortal>
+                <Text
+                    lineClamp={1}
+                    sx={{ wordBreak: 'break-all' }}
+                >
+                    {
+                        dateFns.format(dateFns.parseISO(itemValue), 'yyyy-MM-dd HH:mm:ss')
+                    }
+                </Text>
+            </Tooltip>
+        </td>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Cells/Status.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Group, Text, Tooltip } from '@mantine/core';
+import { useMemo } from 'react';
+import { tableColumns } from '../tableColumns';
+import { StatusesRing } from '../../../../../shared/components/Tests/StatusesRing';
+
+interface Props {
+    type: string
+    test: any
+}
+
+export function Status({ type, test }: Props) {
+    const checkStatuses: string[] = useMemo(
+        () => {
+            if (test.checks && test.checks.length > 0) {
+                return test.checks.map((check: any) => check.status[0]);
+            }
+            return [];
+        },
+        [JSON.stringify(test)],
+    );
+    return (
+        <td
+            key={type}
+            title={test.level}
+            data-test={`table-row-${tableColumns[type].label}`}
+            style={{
+                ...tableColumns[type].cellStyle,
+                paddingLeft: '2px',
+            }}
+        >
+            <Group position="left" spacing={0} noWrap>
+                <StatusesRing
+                    statuses={checkStatuses.length > 0 ? checkStatuses : [test.status]}
+                    name={test.name}
+                    key={type}
+                    ml={-4}
+                />
+                <Tooltip label={test[type]} multiline withinPortal>
+                    <Text
+                        lineClamp={1}
+                        sx={{ wordBreak: 'break-all' }}
+                    >
+                        {test.status}
+                    </Text>
+                </Tooltip>
+            </Group>
+        </td>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Cells/ViewPort.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Badge, Text, Tooltip } from '@mantine/core';
+import { tableColumns } from '../tableColumns';
+
+interface Props {
+    type: string
+    test: any
+}
+
+export function Viewport({ type, test }: Props) {
+    const uniqueCheckViewports = [...new Set(test.checks.map((x: any) => x.viewport))];
+
+    // eslint-disable-next-line no-nested-ternary
+    const resultViewport = uniqueCheckViewports.length > 0
+        ? (uniqueCheckViewports.length === 1 ? uniqueCheckViewports[0] : '≠')
+        : test.viewport;
+    return (
+        <td
+            key={type}
+            data-test={`table-row-${tableColumns[type].label}`}
+            style={{ ...tableColumns[type].cellStyle }}
+        >
+            <Tooltip
+                withinPortal
+                label={
+                    (uniqueCheckViewports.length !== 1)
+                        ? 'There are checks with different viewports'
+                        : resultViewport
+                }
+                multiline
+            >
+                <Badge
+                    size="md"
+                    color="blue"
+                >
+                    <Text
+                        lineClamp={1}
+                        sx={{ wordBreak: 'break-all' }}
+                    >
+                        {resultViewport}
+                    </Text>
+                </Badge>
+            </Tooltip>
+        </td>
+    );
+}

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

@@ -0,0 +1,142 @@
+/* eslint-disable no-underscore-dangle,react/jsx-one-expression-per-line */
+import * as React from 'react';
+import { Badge, Tooltip, useMantineTheme, Text, Stack } from '@mantine/core';
+import { BsHandThumbsUp, BsHandThumbsUpFill } from 'react-icons/all';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import ActionPopoverIcon from '../../../../../shared/components/ActionPopoverIcon';
+import { ChecksService } from '../../../../../shared/services';
+import { errorMsg, successMsg } from '../../../../../shared/utils/utils';
+import { log } from '../../../../../shared/utils/Logger';
+
+interface Props {
+    check: any
+    initCheck?: any
+    testUpdateQuery: any
+    size?: number
+    checksQuery: any
+}
+
+export function AcceptButton({ check, testUpdateQuery, checksQuery, initCheck, size = 19 }: Props) {
+    const queryClient = useQueryClient();
+    const theme = useMantineTheme();
+    const isAccepted = (check.markedAs === 'accepted');// || mutationAcceptCheck.isSuccess;
+    const isCurrentlyAccepted = ((check.baselineId?._id === check.actualSnapshotId?._id) && isAccepted);
+    // eslint-disable-next-line no-nested-ternary
+    const likeIconColor = isAccepted
+        ? theme.colorScheme === 'dark'
+            ? 'green.8'
+            : 'green.6'
+        : 'gray';
+
+    const mutationAcceptCheck = useMutation(
+        {
+            mutationFn: (data: { check: any, newBaselineId: string }) => ChecksService.acceptCheck(data),
+            // eslint-disable-next-line no-unused-vars
+            onSuccess: async (result: any) => {
+                successMsg({ message: 'Check has been successfully accepted' });
+                await queryClient.invalidateQueries({ queryKey: ['preview_checks', check.test._id] });
+                await queryClient.invalidateQueries({ queryKey: ['check_for_modal', check._id] });
+                await queryClient.refetchQueries(
+                    { queryKey: ['related_checks_infinity_pages', initCheck?._id || check._id] },
+                );
+                checksQuery.refetch();
+                if (testUpdateQuery) testUpdateQuery.refetch();
+            },
+            onError: (e: any) => {
+                errorMsg({ error: 'Cannot accept the check' });
+                log.error(e);
+            },
+        },
+    );
+
+    const notAcceptedIcon = check?.failReasons?.includes('not_accepted')
+        ? (
+            <Badge
+                component="div"
+                title="The check is not accepted"
+                pl={4}
+                pr={4}
+                pt={6}
+                pb={6}
+                // weight={900}
+                color="yellow"
+                variant="filled"
+                radius="xl"
+                data-test="not-accepted-error-icon"
+                sx={{
+                    fontSize: '12px',
+                    position: 'absolute',
+                    bottom: 11,
+                    left: 12,
+                    lineHeight: '16px',
+                    fontWeight: 600,
+                    fontFamily: '"Roboto","Arial",sans-serif',
+                    border: '2px',
+                    borderStyle: 'solid',
+                    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+                }}
+            >
+                !
+            </Badge>
+        )
+        : '';
+    const handleAcceptCheckClick = () => {
+        if (isCurrentlyAccepted) return;
+        mutationAcceptCheck.mutate(
+            {
+                check,
+                newBaselineId: check.actualSnapshotId._id,
+            } as any,
+        );
+    };
+
+    return (
+        <Tooltip
+            withinPortal
+            label={
+                check.markedByUsername
+                    ? (
+                        <Stack spacing="xs" p={5}>
+                            <Text data-test="accept-button-tooltip-username">
+                                Accepted by: {check.markedByUsername}
+                            </Text>
+                            <Text data-test="accept-button-tooltip-date">
+                                Accepted Date: {check.markedDate}
+                            </Text>
+                        </Stack>
+                    )
+                    : (
+                        <Text>The check is not accepted</Text>
+                    )
+            }
+        >
+            <div>
+                <ActionPopoverIcon
+                    iconColor={likeIconColor}
+                    buttonColor="green"
+                    sx={{
+                        cursor: isCurrentlyAccepted ? 'default' : 'pointer',
+                        '&:hover': { backgroundColor: isCurrentlyAccepted ? 'rgba(255, 255, 255, 0);' : '' },
+                    }}
+                    testAttr="check-accept-icon"
+                    testAttrName={check.name}
+                    variant="subtle"
+                    paused={isCurrentlyAccepted}
+                    icon={
+                        (isCurrentlyAccepted && isAccepted)
+                            ? (
+
+                                <BsHandThumbsUpFill size={size} data-test-icon-type="fill" />
+                            )
+                            : (<><BsHandThumbsUp size={size} data-test-icon-type="outline" />{notAcceptedIcon}</>)
+                    }
+                    action={handleAcceptCheckClick}
+                    // title="Accept the check actual screenshot"
+                    loading={mutationAcceptCheck.isLoading}
+                    confirmLabel="Accept"
+                    size={size}
+                />
+            </div>
+        </Tooltip>
+    );
+}