@syngrisi/syngrisi 2.2.1

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

@@ -0,0 +1,91 @@
+/* eslint-disable no-underscore-dangle,no-nested-ternary,react/jsx-no-useless-fragment */
+import * as React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Group, Stack, Text } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { GenericService } from '../../../../../shared/services';
+import { errorMsg } from '../../../../../shared/utils';
+import { ChecksSkeleton } from './ChecksSkeleton';
+import { Check } from './Check';
+
+interface Props {
+    item: any,
+    testUpdateQuery: any,
+}
+
+export function Checks({ item, testUpdateQuery }: Props) {
+    // eslint-disable-next-line no-unused-vars
+    const [checksViewMode, setChecksViewMode] = useLocalStorage({ key: 'check-view-mode', defaultValue: 'bounded' });
+    const checksQuery = useQuery(
+        [
+            'preview_checks',
+            item._id,
+        ],
+        () => GenericService.get_via_post(
+            'checks',
+            { _id: { $in: item.checks.map((x: any) => x._id) } },
+            {
+                populate: 'baselineId,actualSnapshotId,diffId',
+                limit: '0',
+                sortBy: 'CreatedDate',
+                sortOrder: -1,
+            },
+            'checksByIds',
+        ),
+        {
+            refetchOnWindowFocus: false,
+            onSuccess: () => {
+            },
+            onError: (e) => {
+                errorMsg({ error: e });
+            },
+        },
+    );
+    const ChecksContainer = (checksViewMode === 'list') ? Stack : Group;
+
+    return (
+        <>
+            {
+                checksQuery.isLoading
+                    ? (
+                        <ChecksSkeleton />
+                    )
+                    : (
+                        checksQuery.isError
+                            ? (
+                                <Text color="red" size="md">
+                                    Cannot load the data
+                                </Text>
+                            )
+                            : (
+                                checksQuery?.data?.results?.length < 1
+                                    ? (
+                                        <Text size="md">
+                                            Test does not have any checks
+                                        </Text>
+                                    )
+                                    : (
+                                        <ChecksContainer p={20} align="start">
+                                            {
+                                                checksQuery.data.results.map(
+                                                    (check) => (
+                                                        <Check
+                                                            key={check._id}
+                                                            check={check}
+                                                            checksViewMode={checksViewMode}
+                                                            checksQuery={checksQuery}
+                                                            testUpdateQuery={testUpdateQuery}
+                                                        />
+                                                    ),
+                                                )
+                                            }
+                                        </ChecksContainer>
+                                    )
+
+                            )
+                    )
+            }
+
+        </>
+    );
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Group, Skeleton, Stack } from '@mantine/core';
+
+export function ChecksSkeleton() {
+    return (
+        <Group>
+            <Stack>
+                <Skeleton height={230} width={230} />
+                <Skeleton height={20} width={230} />
+            </Stack>
+            <Stack>
+                <Skeleton height={230} width={230} />
+                <Skeleton height={20} width={230} />
+            </Stack>
+            <Stack>
+                <Skeleton height={230} width={230} />
+                <Skeleton height={20} width={230} />
+            </Stack>
+        </Group>
+    );
+}

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

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Badge, Divider, Group, Stack, Text } from '@mantine/core';
+import * as dateFns from 'date-fns';
+import { sizes } from './checkSizes';
+import { StatusIcon } from '../../../../../shared/components/Check/StatusIcon';
+import { LabelUser } from '../../../../../shared/components/Users/LabelUser';
+import { BrowserIcon } from '../../../../../shared/components/Check/BrowserIcon';
+import { OsIcon } from '../../../../../shared/components/Check/OsIcon';
+import { ViewPortLabel } from './ViewPortLabel';
+import { getStatusMessage } from '../../../../../shared/utils/utils';
+
+interface Props {
+    check: any;
+}
+
+export function PreviewCheckTooltipLabel({ check }: Props) {
+    const statusMsg = getStatusMessage(check);
+
+    return (
+        <Stack
+            sx={{ maxWidth: '370px' }}
+            spacing={8}
+            p={8}
+            data-check-tooltip-name={check.name}
+        >
+            <Group>
+                <Text size={16} lineClamp={1}>
+                    {check.name}
+                </Text>
+            </Group>
+            <Divider />
+            <Group position="left" spacing={8} ml={-6} noWrap>
+                <Group>
+                    <StatusIcon status={check.status[0]} size={72} />
+                </Group>
+                <Group>
+                    <Text size="sm" data-test="status-label">
+                        {check.status[0][0].toUpperCase() + check.status[0].substring(1)}
+                        {statusMsg}
+                    </Text>
+                </Group>
+            </Group>
+            {
+                check.markedByUsername && (
+                    <Group position="apart">
+                        <Group>
+                            <Text size="xs">Accepted by: </Text>
+                        </Group>
+                        <Group position="right">
+                            {
+                                check.markedByUsername && (
+                                    <LabelUser dataTest="user-label" username={check.markedByUsername} size="xs" />
+                                )
+                            }
+                        </Group>
+                    </Group>
+                )
+            }
+            <Group position="apart">
+                <Group>
+                    <Text size="xs">Platform: </Text>
+                </Group>
+                <Group position="right" spacing={6}>
+                    <OsIcon os={check.os} size={24} />
+                    <Text size="xs" data-test="os-label">{check.os}</Text>
+                </Group>
+            </Group>
+            <Group position="apart" noWrap>
+                <Group>
+                    <Text size="xs">Browser: </Text>
+                </Group>
+                <Group position="right" spacing={6} noWrap>
+                    <BrowserIcon size={24} browser={check.browserName} />
+                    <Text size="xs" data-test="browser-label">
+                        {check.browserName}
+                        -
+                        {check.browserFullVersion}
+                    </Text>
+                </Group>
+            </Group>
+
+            <Group position="apart">
+                <Group>
+                    <Text size="xs">Viewport: </Text>
+                </Group>
+                <Group position="right">
+                    <ViewPortLabel
+                        fontSize="11px"
+                        size="md"
+                        color="blue"
+                        check={check}
+                        sizes={sizes}
+                        checksViewSize="small"
+                    />
+                </Group>
+            </Group>
+
+            <Group position="apart">
+                <Group>
+                    <Text size="xs">Branch: </Text>
+                </Group>
+                <Group position="right">
+                    <Badge color="blue" sx={{ maxWidth: 200 }}>
+                        {check.branch}
+                    </Badge>
+                </Group>
+            </Group>
+
+            <Group position="apart">
+                <Group>
+                    <Text size="xs">Created Date: </Text>
+                </Group>
+                <Group>
+                    <Badge color="blue" data-test="date-tooltip-label">
+                        {dateFns.format(dateFns.parseISO(check.createdDate), 'yyyy-MM-dd HH:mm:ss')}
+                    </Badge>
+                </Group>
+            </Group>
+        </Stack>
+    );
+}

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

@@ -0,0 +1,63 @@
+/* eslint-disable no-underscore-dangle */
+import * as React from 'react';
+import { IconTrash } from '@tabler/icons';
+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 {
+    testUpdateQuery: any,
+    closeHandler?: any,
+    size?: number,
+    check: any
+    initCheck?: any
+}
+
+export function RemoveButton({ testUpdateQuery, check, closeHandler, initCheck, size = 24 }: Props) {
+    const queryClient = useQueryClient();
+    const mutationRemoveCheck = useMutation(
+        (data: { id: string }) => ChecksService.removeCheck(data),
+        {
+            onSuccess: async () => {
+                successMsg({ message: 'Check has been successfully removed' });
+
+                await queryClient.invalidateQueries({ queryKey: ['preview_checks', check.test._id || check.test] });
+                await queryClient.invalidateQueries({ queryKey: ['check_for_modal', check._id] });
+                await queryClient.refetchQueries(
+                    { queryKey: ['related_checks_infinity_pages', initCheck?._id || check._id] },
+                );
+
+                if (testUpdateQuery) testUpdateQuery.refetch();
+                if (closeHandler) closeHandler();
+            },
+            onError: (e: any) => {
+                errorMsg({ error: 'Cannot remove the check' });
+                log.error(e);
+            },
+        },
+    );
+
+    const handleRemoveCheckClick = () => {
+        mutationRemoveCheck.mutate(
+            {
+                id: check._id,
+            } as any,
+        );
+    };
+    return (
+        <ActionPopoverIcon
+            testAttr="check-remove-icon"
+            variant="subtle"
+            icon={<IconTrash stroke={1} size={size} />}
+            action={handleRemoveCheckClick}
+            title="Delete check"
+            testAttrName={check?.name}
+            loading={mutationRemoveCheck.isLoading}
+            confirmLabel="Delete"
+            size={size}
+            color="red"
+        />
+    );
+}

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { Badge, BadgeVariant, Text, Tooltip, useMantineTheme } from '@mantine/core';
+
+interface Props {
+    check: any
+    sizes: any
+    size?: any
+    checksViewSize: string
+    variant?: BadgeVariant
+    fontSize?: string
+    displayed?: boolean
+    color?: string
+}
+
+export function ViewPortLabel(
+    {
+        check,
+        sizes,
+        size = '',
+        checksViewSize,
+        fontSize = '12px',
+        displayed = true,
+        color = 'dark',
+        variant = 'light',
+    }: Props,
+) {
+    const theme = useMantineTheme();
+    const wrongSizeIcon = check.failReasons.includes('wrong_dimensions')
+        ? (
+            <Tooltip
+                label="Actual and Expected Screenshots have different size"
+                withinPortal
+            >
+                <Badge
+                    component="div"
+                    pl={4}
+                    pr={4}
+                    pt={6}
+                    pb={6}
+                    // weight={900}
+                    color="yellow"
+                    variant="filled"
+                    radius="xl"
+                    data-test="check-wrong-images-size-error-icon"
+                    sx={{
+                        zIndex: 100,
+                        fontSize: '12px',
+                        position: 'absolute',
+                        top: -10,
+                        right: -10,
+                        lineHeight: '16px',
+                        fontWeight: 600,
+                        fontFamily: '"Roboto","Arial",sans-serif',
+                        border: '2px',
+                        borderStyle: 'solid',
+                        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+                    }}
+                >
+                    !
+                </Badge>
+            </Tooltip>
+        )
+        : '';
+
+    return (
+        <Text
+            lineClamp={1}
+            sx={
+                {
+                    display: displayed ? 'block' : 'none',
+                    position: 'relative',
+                    overflow: 'visible',
+                }
+            }
+        >
+            <Badge
+                color={color}
+                variant={variant}
+                size={sizes[checksViewSize]?.viewportText || size}
+                data-viewport-badge-name={check.name}
+                title="Viewport size"
+                sx={
+                    {
+                        fontSize: sizes[checksViewSize]?.viewportFontSize || fontSize,
+                        display: displayed ? 'block' : 'none',
+                    }
+                }
+            >
+                {check.viewport}
+            </Badge>
+            {wrongSizeIcon}
+        </Text>
+    );
+}

package/src/ui-app/index2/components/Tests/Table/Checks/checkSizes.ts

@@ -0,0 +1,27 @@
+export const sizes = {
+    small: {
+        coefficient: 0.5,
+        statusBadge: 'xs',
+        viewportText: 'xs',
+        viewportFontSize: 10,
+    },
+    medium: {
+        coefficient: 0.8,
+        statusBadge: 'xs',
+        viewportText: 'sm',
+        viewportFontSize: 10,
+    },
+    large: {
+        coefficient: 1.4,
+        statusBadge: 'md',
+        viewportText: 'md',
+        viewportFontSize: 12,
+    },
+    xlarge: {
+        coefficient: 2,
+        statusBadge: 'md',
+        viewportText: 'md',
+        viewportFontSize: 12,
+    },
+
+} as { [key: string]: any };

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

@@ -0,0 +1,179 @@
+/* eslint-disable dot-notation,react-hooks/exhaustive-deps */
+import * as React from 'react';
+import {
+    Box,
+    Button,
+    Group,
+    ScrollArea,
+    Stack,
+} from '@mantine/core';
+import { useEffect, useState } from 'react';
+import RelativeDrawer from '../../../../shared/components/RelativeDrawer';
+import { tableColumns } from './tableColumns';
+import LogicalGroup from '../../../../shared/components/filter/LogicalGroup';
+import { SearchParams, uuid } from '../../../../shared/utils';
+import { useParams } from '../../../hooks/useParams';
+
+interface Props {
+    open: boolean
+    setOpen: any
+    searchParams: any
+    setSearchParams: any
+}
+
+const mainGroupInit = {
+    mainGroup: {
+        operator: '$and',
+        rules: {
+            initialFilterKey1: {},
+            initialFilterKey2: {},
+        },
+    },
+};
+
+function Filter(
+    {
+        open,
+        setOpen,
+        searchParams,
+        setSearchParams,
+    }: Props,
+) {
+    const [groupsData, setGroupsData] = useState<{ [key: string]: any }>(mainGroupInit);
+    const { setQuery } = useParams();
+
+    const removeGroupsData = (key: string) => {
+        setGroupsData((prev) => {
+            const { [key]: removed, ...rest } = prev;
+            return rest;
+        });
+    };
+
+    const resetAll = () => {
+        setQuery({ filter: undefined });
+        setGroupsData(() => ({
+            mainGroup: {
+                operator: '$and',
+                rules: {
+                    [uuid()]: {},
+                },
+            },
+        }));
+    };
+
+    /**
+     * Create a full filter pure js object, which starts with root filter group operator ($and|$or)
+     * e.g.:
+     *"$or":[{
+     *         {"level":{"$eq":"info"}},
+     *        "$and":[
+     *           {"level":{"$eq":"debug"}},
+     *           {"id":{"$eq":"6318c585c09a7de71e4dd543"}}
+     *        ]
+     * }]
+     */
+    const createFilterObject = () => {
+        const filterValue = (x: { [key: string]: { [key: string]: string } }) => Object.values(Object.values(x)[0])[0];
+        const mainGroupRootRules = Object.values(groupsData['mainGroup'].rules).filter((x: any) => filterValue(x));
+        const mainGroupRules = [
+            ...mainGroupRootRules,
+            ...Object.keys(groupsData)
+                .filter((x) => x !== 'mainGroup')
+                .map(
+                    (groupKey) => {
+                        const groupRules = Object
+                            .values(groupsData[groupKey]['rules']).filter((x: any) => filterValue(x));
+                        if (groupRules.length < 1) return {};
+                        return {
+                            [groupsData[groupKey]['operator']]: groupRules,
+                        };
+                    },
+                ),
+        ];
+        if (mainGroupRules.length < 1) return {};
+        return {
+            [groupsData['mainGroup'].operator]: mainGroupRules,
+        };
+    };
+
+    const applyFilter = () => {
+        SearchParams.changeFiltering(searchParams, setSearchParams, JSON.stringify(createFilterObject()));
+    };
+
+    /* eslint-disable indent, react/jsx-indent */
+    const groups = Object.keys(groupsData)
+        .filter((x) => x !== 'mainGroup')
+        .map(
+            (key, index) => (
+                <LogicalGroup
+                    testAttr={`filter-group-${index}`}
+                    fields={tableColumns}
+                    setGroupsData={setGroupsData}
+                    groupsData={groupsData}
+                    removeGroupsData={removeGroupsData}
+                    key={key}
+                    id={key}
+                />
+            ),
+        );
+    /* eslint-enable indent , react/jsx-indent */
+
+    // eslint-disable-next-line prefer-arrow-callback
+    useEffect(function groupsDataChange() {
+    }, [JSON.stringify(groupsData)]);
+
+    return (
+        <RelativeDrawer
+            open={open}
+            setOpen={setOpen}
+            title="Filter"
+            width="20vw"
+        >
+            <ScrollArea.Autosize maxHeight="80vh" mr={-12} sx={{ height: '80vh' }}>
+                <Box sx={{ paddingRight: 16, marginBottom: 100 }}>
+                    <Stack>
+                        <LogicalGroup
+                            id="mainGroup"
+                            testAttr="filter-main-group"
+                            fields={tableColumns}
+                            groupsData={groupsData}
+                            setGroupsData={setGroupsData}
+                            removeGroupsData={removeGroupsData}
+                        >
+                            {groups}
+                        </LogicalGroup>
+                    </Stack>
+
+                    <Group mt={24} spacing="sm" position="right">
+                        <Button
+                            onClick={() => resetAll()}
+                            data-test="table-filter-reset"
+                            variant="light"
+                            color="red"
+                        >
+                            Reset
+                        </Button>
+                        <Button
+                            data-test="table-filter-cancel"
+                            variant="light"
+                            color="gray"
+                            onClick={() => setOpen(false)}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            data-test="table-filter-apply"
+                            onClick={() => {
+                                applyFilter();
+                            }}
+                        >
+                            Apply
+                        </Button>
+                    </Group>
+                </Box>
+            </ScrollArea.Autosize>
+        </RelativeDrawer>
+    );
+}
+
+export default Filter;

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

@@ -0,0 +1,54 @@
+import { Checkbox, Text } from '@mantine/core';
+import React from 'react';
+import { tableColumns } from './tableColumns';
+
+interface Props {
+    data: any
+    toggleAllRows: any
+    selection: string[]
+    visibleFields: string[]
+
+}
+
+function Heads({ data, toggleAllRows, selection, visibleFields }: Props) {
+    return (
+        <tr>
+            <th style={{ width: '1%' }}>
+                <Checkbox
+                    data-test="table-select-all"
+                    title="Select all items"
+                    onChange={toggleAllRows}
+                    checked={selection && data ? (selection.length === data.length) : false}
+                    indeterminate={
+                        (selection && data)
+                            ? (selection.length > 0 && selection.length !== data.length)
+                            : false
+                    }
+                    transitionDuration={0}
+                />
+            </th>
+            {
+                Object.keys(tableColumns).map(
+                    (column) => {
+                        if (visibleFields.includes(column)) {
+                            return (
+                                <th
+                                    key={column}
+                                    style={{ ...tableColumns[column].headStyle }}
+                                    data-test={`table-header-${tableColumns[column].label}`}
+                                >
+                                    <Text transform="capitalize">
+                                        {tableColumns[column].label}
+                                    </Text>
+                                </th>
+                            );
+                        }
+                        return undefined;
+                    },
+                )
+            }
+        </tr>
+    );
+}
+
+export default Heads;