@syngrisi/syngrisi 2.2.1

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

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { ActionIcon, Group, Loader, Text, Tooltip, useMantineTheme } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { useMemo } from 'react';
+import { Status } from '../../../../../../shared/components/Check/Status';
+import { ViewPortLabel } from '../ViewPortLabel';
+import { sizes } from '../checkSizes';
+import { OsIcon } from '../../../../../../shared/components/Check/OsIcon';
+import { BrowserIcon } from '../../../../../../shared/components/Check/BrowserIcon';
+import { getStatusMessage } from '../../../../../../shared/utils/utils';
+
+interface Props {
+    classes: any
+    currentCheck: any
+}
+
+export function Header(
+    {
+        classes,
+        currentCheck,
+    }: Props,
+) {
+    const theme = useMantineTheme();
+    const [checksViewSize] = useLocalStorage({ key: 'check-view-size', defaultValue: 'medium' });
+    const textLoader = <Loader size="xs" color="blue" variant="dots" />;
+    const statusMsg = currentCheck.status ? getStatusMessage(currentCheck) : textLoader;
+
+    const iconsColor = useMemo(
+        () => (theme.colorScheme === 'dark'
+            ? theme.colors.gray[3]
+            : theme.colors.dark[9]), [theme.colorScheme],
+    );
+
+    return (
+        <Group position="apart" sx={{ width: '98%' }} data-check-header-name={currentCheck.name} noWrap>
+            <Group
+                position="left"
+                align="center"
+                spacing="xs"
+                sx={{ position: 'relative' }}
+                noWrap
+                data-test="full-check-path"
+            >
+                <Tooltip
+                    label={
+                        (
+                            <Group spacing={4}>
+                                {
+                                    currentCheck.status
+                                        ? (<Status size="lg" check={currentCheck} variant="filled" />)
+                                        : textLoader
+                                }
+                                {statusMsg}
+                            </Group>
+                        )
+                    }
+                    withinPortal
+                >
+                    <Group align="center" data-check="status">
+                        <Status size="lg" check={currentCheck} variant="filled" />
+                    </Group>
+                </Tooltip>
+
+                <Group
+                    noWrap
+                    spacing={0}
+                >
+                    <Tooltip
+                        withinPortal
+                        label={`Project: ${currentCheck?.app?.name}`}
+                    >
+                        <Text
+                            data-check="app-name"
+                            sx={{ flexShrink: 1 }}
+                            className={classes.checkPathFragment}
+                        >
+                            {currentCheck?.app?.name}
+                        </Text>
+                    </Tooltip>
+                    <Tooltip
+                        withinPortal
+                        label={`Suite: ${currentCheck?.suite?.name}`}
+                    >
+                        <Text
+                            data-check="suite-name"
+                            sx={{ flexShrink: 500 }}
+                            className={classes.checkPathFragment}
+                        >
+                            &nbsp;/&nbsp;
+                            {currentCheck?.suite?.name}
+                        </Text>
+                    </Tooltip>
+                    <Tooltip
+                        withinPortal
+                        label={`Test: ${currentCheck?.test?.name}`}
+                    >
+                        <Text
+                            data-check="test-name"
+                            sx={{ flexShrink: 5 }}
+                            className={classes.checkPathFragment}
+                        >
+                            &nbsp;/&nbsp;
+                            {currentCheck?.test?.name}
+                        </Text>
+                    </Tooltip>
+                    <Tooltip
+                        withinPortal
+                        label={`Check: ${currentCheck.name}`}
+
+                    >
+                        <Text
+                            data-check="check-name"
+                            sx={{ flexShrink: 1 }}
+                            lineClamp={1}
+                            // className={classes.checkPathFragment}
+                        >
+                            &nbsp;/&nbsp;
+                            {currentCheck.name || textLoader}
+                        </Text>
+                    </Tooltip>
+                </Group>
+            </Group>
+
+            <Group
+                noWrap
+                spacing="xs"
+            >
+                <Tooltip
+                    label={
+                        currentCheck?.viewport
+                    }
+                    withinPortal
+                >
+                    <Text lineClamp={1} sx={{ overflow: 'visible' }} data-check="viewport">
+                        {
+                            currentCheck?.viewport
+                                ? (
+                                    <ViewPortLabel
+                                        check={currentCheck}
+                                        color="blue"
+                                        sizes={sizes}
+                                        size="lg"
+                                        checksViewSize={checksViewSize}
+                                        fontSize="12px"
+                                    />
+                                )
+                                : textLoader
+                        }
+
+                    </Text>
+                </Tooltip>
+
+                <Tooltip
+                    data-check="os-label"
+                    label={
+                        currentCheck?.os
+                    }
+                    withinPortal
+                >
+                    <Group spacing={8} noWrap>
+                        <ActionIcon variant="light" size={32} p={4} ml={4}>
+                            {
+                                currentCheck?.os
+                                    ? (
+                                        <OsIcon
+                                            data-check="os-icon"
+                                            size={20}
+                                            color={iconsColor}
+                                            os={currentCheck?.os}
+                                        />
+                                    )
+                                    : textLoader
+                            }
+                        </ActionIcon>
+                        <Text data-check="os" size={12} lineClamp={1}>{currentCheck?.os}</Text>
+                    </Group>
+                </Tooltip>
+
+                <Tooltip
+                    label={
+                        currentCheck?.browserFullVersion
+                            ? `${currentCheck?.browserFullVersion}`
+                            : `${currentCheck?.browserVersion}`
+                    }
+                    withinPortal
+                >
+                    <Group spacing={8} noWrap>
+                        <ActionIcon variant="light" size={32} p={4}>
+                            {
+                                currentCheck?.browserName
+                                    ? (
+                                        <BrowserIcon
+                                            data-check="browser-icon"
+                                            size={20}
+                                            color={iconsColor}
+                                            browser={currentCheck?.browserName}
+                                        />
+                                    )
+                                    : textLoader
+                            }
+                        </ActionIcon>
+                        <Text
+                            data-check="browser"
+                            lineClamp={1}
+                            size={12}
+                        >
+
+                            {currentCheck?.browserName}
+                            {
+                                currentCheck?.browserVersion
+                                    ? ` - ${currentCheck?.browserVersion}`
+                                    : ''
+                            }
+                        </Text>
+                    </Group>
+                </Tooltip>
+            </Group>
+        </Group>
+
+    );
+}

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

@@ -0,0 +1,167 @@
+/* eslint-disable no-underscore-dangle,react/jsx-one-expression-per-line */
+import * as React from 'react';
+import { Group, Image, Paper, useMantineTheme, Text, Stack, Badge, Tooltip } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { IconGitBranch } from '@tabler/icons';
+import config from '../../../../../../../config';
+import { Status } from '../../../../../../../shared/components/Check/Status';
+import { ViewPortLabel } from '../../ViewPortLabel';
+import { sizes } from '../../checkSizes';
+import { BrowserIcon } from '../../../../../../../shared/components/Check/BrowserIcon';
+import { OsIcon } from '../../../../../../../shared/components/Check/OsIcon';
+import { PreviewCheckTooltipLabel } from '../../PreviewCheckTooltipLabel';
+import { useParams } from '../../../../../../hooks/useParams';
+
+interface Props {
+    checkData: any
+    setRelatedActiveCheckId: any
+    activeCheckId: any
+    index: number
+}
+
+export function RelatedCheckItem({ checkData, activeCheckId, setRelatedActiveCheckId, index }: Props) {
+    const { setQuery } = useParams();
+    const check = checkData;
+    const theme = useMantineTheme();
+    const imageFilename = check.diffId?.filename || check.actualSnapshotId?.filename || check.baselineId?.filename;
+    const imagePreviewSrc = `${config.baseUri}/snapshoots/${imageFilename}`;
+
+    const [checksViewSize] = useLocalStorage({ key: 'check-view-size', defaultValue: 'medium' });
+
+    const handleItemClick = () => {
+        setQuery({ checkId: checkData._id });
+        setRelatedActiveCheckId(() => check._id);
+    };
+
+    return (
+        <Group
+            data-related-check-index={index}
+            onClick={handleItemClick}
+            spacing={4}
+            mt={1}
+            mb={8}
+            pr={8}
+            pl={8}
+            pt={0}
+            pb={0}
+            sx={{
+                cursor: 'pointer',
+                width: '88%',
+                borderBottom: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]}`,
+                // eslint-disable-next-line no-nested-ternary
+                backgroundColor: (check._id === activeCheckId)
+                    ? (theme.colorScheme === 'dark' ? theme.colors.blue[9] : theme.colors.blue[3])
+                    : '',
+
+                '&:hover': {
+                    // border: `1px solid ${theme.colors.gray[3]}`,
+                    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.blue[5] : theme.colors.blue[4],
+                },
+            }}
+            position="center"
+
+        >
+            <Tooltip.Floating
+                multiline
+                zIndex={1000}
+                withinPortal
+                position="right-start"
+                color="dark"
+                label={
+                    <PreviewCheckTooltipLabel check={check} />
+                }
+            >
+                <Paper
+                    radius={0}
+                    shadow="sm"
+                    pt={6}
+                    pr={0}
+                    pl={0}
+                    mr={4}
+                    ml={4}
+                    mt={2}
+                    mb={2}
+                >
+                    <div
+                        style={{ position: 'relative' }}
+                        data-related-check-item={check.name}
+                    >
+                        <Stack align="center" mb={4}>
+                            <Image
+                                data-related-check="image"
+                                src={imagePreviewSrc}
+                                width="125px"
+                                fit="contain"
+                                withPlaceholder
+                                alt={check.name}
+                                styles={
+                                    () => ({
+                                        image: {
+                                            maxHeight: 150,
+                                        },
+                                    })
+                                }
+                            />
+                        </Stack>
+                        <Stack p={4} pt={8} align="start" spacing={8}>
+                            <Group position="center" spacing={4} sx={{ width: '100%' }} noWrap>
+                                <ViewPortLabel
+                                    fontSize="8px"
+                                    color="blue"
+                                    check={check}
+                                    sizes={sizes}
+                                    checksViewSize={checksViewSize}
+                                />
+                                <Badge
+                                    leftSection={<IconGitBranch style={{ marginTop: '4', marginRight: -2 }} size={9} />}
+                                    color="dark"
+                                    size="xs"
+                                >
+                                    <Text lineClamp={1} sx={{ maxWidth: 40 }} data-related-check="branch">
+                                        {check.branch}
+                                    </Text>
+                                </Badge>
+                            </Group>
+                            <Group pl={8} position="center" spacing={4} sx={{ width: '100%' }} noWrap>
+                                <OsIcon os={check.os} size={14} data-related-check="os-icon" />
+                                <Text size="xs" lineClamp={1} data-related-check="os-label">{check.os}</Text>
+                            </Group>
+
+                            <Group pl={8} position="center" spacing={4} sx={{ width: '100%' }} noWrap>
+                                <BrowserIcon
+                                    data-related-check-browser-name={check.browserName}
+                                    data-related-check="browser-icon"
+                                    browser={check.browserName}
+                                    size={14}
+                                />
+                                <Text
+                                    size="xs"
+                                    lineClamp={1}
+                                    data-related-check="browser-name"
+                                >
+                                    {check.browserName}
+                                </Text>
+                                <Text
+                                    data-related-check="browser-version"
+                                    size="xs"
+                                    sx={{ minWidth: '30%' }}
+                                >
+                                    - {check.browserVersion}
+                                </Text>
+                            </Group>
+                        </Stack>
+
+                        <div style={{ position: 'absolute', top: -14, left: 6, opacity: 1 }}>
+                            <Status
+                                data-related-check="status"
+                                check={check}
+                                size="xs"
+                                variant="filled"
+                            />
+                        </div>
+                    </div>
+                </Paper>
+            </Tooltip.Floating>
+        </Group>
+    );
+}

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { ActionIcon, Group, Transition } from '@mantine/core';
+import { IconSortAscending, IconSortDescending, IconX } from '@tabler/icons';
+import SafeSelect from '../../../../../../../shared/components/SafeSelect';
+
+type Props = {
+    setSortBy: any,
+    sortBy: string,
+    setSortOrder: any,
+    sortOrder: string,
+    openedSort: any,
+    toggleOpenedSort: any,
+};
+
+export function RelatedCheckSort(
+    {
+        sortBy,
+        setSortBy,
+        setSortOrder,
+        toggleOpenedSort,
+        sortOrder,
+        openedSort,
+    }: Props,
+) {
+    return (
+        <Transition
+            mounted={openedSort}
+            transition="fade"
+            duration={400}
+            timingFunction="ease"
+        >
+            {(styles) => (
+                <Group align="end" spacing={4} pr={10} ml={-10} mr={-10} noWrap style={styles}>
+                    <SafeSelect
+                        label="Sort by"
+                        data-test="navbar-sort-by-select"
+                        // sx={{ width: '230px' }}
+                        value={sortBy}
+                        onChange={(value: string) => setSortBy(() => value)}
+                        optionsData={
+                            [
+                                { value: 'createdDate', label: 'Created Date' },
+                                { value: 'browserName', label: 'Browser' },
+                                { value: 'os', label: 'Platform' },
+                                { value: 'viewport', label: 'Viewport' },
+                            ]
+                        }
+                    />
+                    <Group spacing={2} position="right" noWrap>
+                        <ActionIcon
+                            title="Sort Order"
+                            data-test="navbar-sort-by-order"
+                            mb={4}
+                            onClick={
+                                () => {
+                                    if (sortOrder === 'asc') {
+                                        setSortOrder('desc');
+                                        return;
+                                    }
+                                    setSortOrder('asc');
+                                }
+                            }
+                        >
+                            {
+                                (sortOrder === 'asc')
+                                    ? <IconSortAscending stroke={1} />
+                                    : <IconSortDescending stroke={1} />
+                            }
+                        </ActionIcon>
+                        <ActionIcon
+                            mb={4}
+                            onClick={() => toggleOpenedSort()}
+                        >
+                            <IconX stroke={1} />
+                        </ActionIcon>
+                    </Group>
+                </Group>
+            )}
+        </Transition>
+    );
+}

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

@@ -0,0 +1,197 @@
+/* eslint-disable no-underscore-dangle,no-nested-ternary,prefer-arrow-callback,max-len */
+import * as React from 'react';
+import { ActionIcon, Group, ScrollArea, Stack, Text, Transition, Chip, Burger, Divider, Tooltip } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconArrowsSort, IconFilter, IconRefresh, IconX } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { RelatedChecksSkeleton } from './RelatedChecksSkeleton';
+import { RelatedChecksItems } from './RelatedChecksItems';
+import { RelatedCheckSort } from './RelatedCheckSort';
+
+interface Props {
+    currentCheck: any
+    related: any
+}
+
+export function RelatedChecks(
+    {
+        currentCheck,
+        related,
+    }: Props,
+) {
+    const [openedSort, sortHandler] = useDisclosure(false);
+    const [openedFilter, filterHandler] = useDisclosure(false);
+    const [filter, setFilter] = useState(['name']);
+    const title = related.opened ? 'Close related checks' : 'Open related checks';
+    const queryClient = useQueryClient();
+
+    const hideRelatedChecks = () => {
+        sortHandler.close();
+        filterHandler.close();
+        related.handler.toggle();
+    };
+
+    const updateFilter = (value: any) => {
+        setFilter(() => {
+            if (!value.includes('name')) return [...['name'], ...value];
+            return value;
+        });
+    };
+
+    useEffect(function onFilterChange() {
+        const newFilter = filter.map((item) => ({ [item]: encodeURIComponent(currentCheck[item]) }));
+        related.setRelatedFilter(() => ({
+            $and: newFilter,
+        }));
+    }, [filter.length]);
+
+    return (
+        <Stack spacing={4} pr={0}>
+            <Stack pr="sm" align="end" sx={{ width: '100%' }} spacing={0}>
+
+                <Group position="apart" align="center" sx={{ width: '100%' }} spacing={0}>
+                    <Group />
+                    {
+                        related.opened && (
+                            <Group position="left" ml={0}>
+                                <Text size="sm">Related Checks</Text>
+                            </Group>
+                        )
+                    }
+                    <Group>
+                        <Tooltip label={title} withinPortal>
+                            <Burger
+                                opened={related.opened}
+                                styles={{
+                                    // burger
+                                }}
+                                size={16}
+                                onClick={() => {
+                                    hideRelatedChecks();
+                                }}
+                                title={title}
+                            />
+                        </Tooltip>
+                    </Group>
+
+                </Group>
+
+                {
+                    related.opened && (
+                        <Group position="center" spacing="xs" sx={{ width: '100%' }} mb={4}>
+                            <Tooltip label={`${openedSort ? 'Close ' : ' Open'} sorting`} withinPortal>
+                                <ActionIcon
+                                    data-test="related-check-icon-open-sort"
+                                    onClick={() => sortHandler.toggle()}
+                                    mb={4}
+                                >
+                                    <IconArrowsSort stroke={1} />
+                                </ActionIcon>
+                            </Tooltip>
+
+                            <Tooltip label={`${openedSort ? 'Close ' : ' Open'} filtering`} withinPortal>
+                                <ActionIcon
+                                    data-test="related-check-icon-open-filter"
+                                    onClick={() => filterHandler.toggle()}
+                                    mb={4}
+                                >
+                                    <IconFilter stroke={1} />
+                                </ActionIcon>
+                            </Tooltip>
+
+                            <Tooltip label="Refresh items" withinPortal>
+                                <ActionIcon
+                                    data-test="related-check-icon-refresh"
+                                    onClick={
+                                        async () => {
+                                            await queryClient.invalidateQueries({ queryKey: ['related_checks_infinity_pages', currentCheck._id] });
+                                        }
+                                    }
+                                    mb={4}
+                                >
+                                    <IconRefresh stroke={1} />
+                                </ActionIcon>
+                            </Tooltip>
+                        </Group>
+                    )
+                }
+
+                <Divider sx={{ width: '100%' }} size="xs" p={1} />
+
+                <RelatedCheckSort
+                    toggleOpenedSort={sortHandler.toggle}
+                    sortBy={related.sortBy}
+                    setSortBy={related.setSortBy}
+                    setSortOrder={related.setSortOrder}
+                    sortOrder={related.sortOrder}
+                    openedSort={openedSort}
+                />
+
+                {
+                    openedFilter && (
+                        <Group mb="xs" mt="xs" ml={-10} mr={-10} spacing={4}>
+                            <Group position="apart" align="center" noWrap>
+                                <Text size="sm" mb={-8}>
+                                    Show checks with same parameters
+                                </Text>
+                                <ActionIcon onClick={filterHandler.close}>
+                                    <IconX size={24} stroke={1} />
+                                </ActionIcon>
+                            </Group>
+
+                            <Chip.Group spacing={6} value={filter} onChange={updateFilter} multiple>
+                                <Chip size="xs" value="name" disabled>Name</Chip>
+                                <Chip size="xs" value="browserName">Browser</Chip>
+                                <Chip size="xs" value="browserVersion">Browser ver.</Chip>
+                                <Chip size="xs" value="os">Platform</Chip>
+                                <Chip size="xs" value="viewport">Viewport</Chip>
+                                <Chip size="xs" value="branch">Branch</Chip>
+                            </Chip.Group>
+                        </Group>
+                    )
+                }
+            </Stack>
+
+            {
+                related.opened && (
+                    <Transition mounted={related.opened} transition="fade" duration={400} timingFunction="ease">
+                        {
+                            (styles: any) => (
+
+                                <ScrollArea
+                                    mt={4}
+                                    style={{ height: '75vh' }}
+                                    styles={styles}
+                                >
+                                    {
+                                        related.relatedChecksQuery.infinityQuery.isLoading
+                                            ? (<RelatedChecksSkeleton num={5} infinityQuery={null} />)
+                                            : (
+                                                related.relatedChecksQuery.infinityQuery.isError
+                                                    ? (<Text size="xs" color="red"> Fail to load</Text>)
+                                                    : (
+                                                        <Stack spacing={4}>
+                                                            <RelatedChecksItems
+                                                                infinityQuery={related.relatedChecksQuery.infinityQuery}
+                                                                relatedActiveCheckId={related.relatedActiveCheckId}
+                                                                setRelatedActiveCheckId={related.setRelatedActiveCheckId}
+                                                            />
+                                                        </Stack>
+                                                    )
+                                            )
+                                    }
+
+                                    <RelatedChecksSkeleton
+                                        num={3}
+                                        infinityQuery={related.relatedChecksQuery.infinityQuery}
+                                    />
+                                </ScrollArea>
+                            )
+                        }
+                    </Transition>
+                )
+            }
+        </Stack>
+    );
+}