@syngrisi/syngrisi 2.2.1

package/src/ui-app/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "syngrisi-ui-app",
+    "version": "1.0.0",
+    "description": "ui for Syngrisi",
+    "main": "stub.html",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Viktar Silakou",
+    "license": "ISC",
+    "dependencies": {
+        "@emotion/react": "^11.10.0",
+        "@mantine/core": "^5.9.5",
+        "@mantine/dates": "^5.9.5",
+        "@mantine/form": "^5.9.5",
+        "@mantine/hooks": "^5.9.5",
+        "@mantine/modals": "^5.9.5",
+        "@mantine/notifications": "^5.9.5",
+        "@mantine/nprogress": "^5.9.5",
+        "@mantine/spotlight": "^5.9.5",
+        "@mantine/styles": "^5.9.5",
+        "@popperjs/core": "^2.11.6",
+        "@tabler/icons": "^1.91.0",
+        "@tanstack/react-query": "^4.2.3",
+        "@tanstack/react-query-devtools": "^4.2.3",
+        "@types/bootstrap": "^5.2.3",
+        "date-fns": "^2.29.3",
+        "dayjs": "^1.11.5",
+        "fabric": "^5.2.4",
+        "jquery": "^3.6.1",
+        "ky": "^0.31.1",
+        "query-string": "^7.1.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-error-boundary": "^3.1.4",
+        "react-icons": "^4.4.0",
+        "react-intersection-observer": "^9.4.0",
+        "react-router-dom": "^6.3.0",
+        "use-query-params": "^2.1.1"
+    },
+    "devDependencies": {
+        "@types/node": "^18.7.14",
+        "@types/react": "^18.0.17",
+        "@types/react-dom": "^18.0.6",
+        "@typescript-eslint/eslint-plugin": "^5.36.0",
+        "@typescript-eslint/parser": "^5.36.0",
+        "@vitejs/plugin-react": "^2.0.1",
+        "eslint": "^8.23.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-react": "^7.31.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "typescript": "^4.8.2",
+        "vite": "^3.0.9"
+    }
+}

package/src/ui-app/shared/components/ActionPopoverIcon.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+    ActionIcon,
+    Popover,
+    Button,
+    MantineNumberSize,
+    Group,
+    Text,
+    Tooltip,
+    MantineColor,
+} from '@mantine/core';
+import React, { ReactElement } from 'react';
+import { useDisclosure, useClickOutside } from '@mantine/hooks';
+
+interface IActionPopoverIcon {
+    icon: ReactElement
+    color?: MantineColor
+    iconColor?: MantineColor
+    buttonColor?: MantineColor
+    action: () => void,
+    confirmLabel: string
+    title?: string
+    testAttr: string
+    loading: boolean
+    variant?: string
+    sx?: any
+    paused?: boolean
+    size?: MantineNumberSize | undefined
+    withinPortal?: boolean
+    disabled?: boolean
+    testAttrName?: string
+}
+
+export default function ActionPopoverIcon(
+    {
+        icon,
+        color,
+        iconColor,
+        action,
+        confirmLabel,
+        title,
+        testAttr,
+        testAttrName = '',
+        loading,
+        buttonColor,
+        paused,
+        disabled = false,
+        withinPortal = true,
+        size = 24,
+        ...rest
+    }: IActionPopoverIcon,
+): ReactElement {
+    const [openPopover, handlers] = useDisclosure(false);
+
+    const ref = useClickOutside(() => handlers.close());
+    return (
+        <Popover
+            opened={openPopover}
+            position="bottom"
+            withArrow
+            shadow="md"
+            closeOnClickOutside
+            closeOnEscape
+            withinPortal={withinPortal}
+        >
+            <Popover.Target>
+                <Tooltip
+                    withinPortal={withinPortal}
+                    label={
+                        (
+                            <Group noWrap>
+                                <Text>{title}</Text>
+                            </Group>
+                        )
+                    }
+                >
+                    <ActionIcon
+                        disabled={disabled}
+                        data-test={testAttr}
+                        data-popover-icon-name={testAttrName}
+                        variant={'light' as any}
+                        color={iconColor}
+                        onClick={() => {
+                            if (paused) return;
+                            handlers.toggle();
+                        }}
+                        title={title}
+                        loading={loading}
+                        size={size}
+                        {...rest}
+                    >
+                        {icon}
+                    </ActionIcon>
+                </Tooltip>
+            </Popover.Target>
+            <Popover.Dropdown
+                p={4}
+                // onBlurCapture={() => handlers.close()}
+                // onBlurCapture={() => alert(123)}
+            >
+                <Button
+                    ref={ref}
+                    data-test={`${testAttr}-confirm`}
+                    color={buttonColor || color}
+                    data-confirm-button-name={testAttrName}
+                    onClick={() => {
+                        action();
+                        handlers.close();
+                    }}
+                >
+                    {confirmLabel}
+                </Button>
+            </Popover.Dropdown>
+        </Popover>
+    );
+}

package/src/ui-app/shared/components/Check/AcceptedStatusIcon.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import { RingProgress } from '@mantine/core';
+
+interface Props {
+    status: string
+    size: number
+}
+
+const iconMap = ({ key, size = 44, rest }: { key: string, size: number, rest: any }) => {
+    const map = {
+        Accepted: (
+            <RingProgress
+                size={size}
+                sections={[
+                    { value: 100, color: 'green' },
+                ]}
+            />
+        ),
+        Partially: (
+            <RingProgress
+                size={size}
+                sections={[
+                    { value: 100, color: 'orange' },
+                ]}
+            />
+        ),
+        Unaccepted: (
+            <RingProgress
+                size={size}
+                sections={[
+                    { value: 100, color: 'red' },
+                ]}
+            />
+        ),
+    } as { [key: string]: any };
+    return map[key] || (
+        <RingProgress
+            title={key}
+            size={size}
+            sections={
+                [{ value: 100, color: 'dark.4' }]
+            }
+            {...rest}
+        />
+    );
+};
+
+export function AcceptedStatusIcon({ status, size, ...rest }: Props) {
+    return iconMap({ key: status, size, rest });
+}

package/src/ui-app/shared/components/Check/BrowserIcon.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import {
+    SiFirefox,
+    SiGooglechrome,
+    SiInternetexplorer,
+    SiMicrosoftedge,
+    SiSafari,
+} from 'react-icons/si';
+// import {PiGoogleChromeLogoThin} from 'react-icons/pi'
+import { TbQuestionMark } from 'react-icons/tb';
+import { FaSafari, FiChrome } from 'react-icons/all';
+
+interface Props {
+    browser: string
+    size: number
+    color?: string
+}
+
+const browserIconMap = (key: string) => {
+    const map = {
+        chrome: SiGooglechrome,
+        chromium: FiChrome,
+        'chrome [HEADLESS]': SiGooglechrome,
+        Chrome: SiGooglechrome,
+        firefox: SiFirefox,
+        Firefox: SiFirefox,
+        msedge: SiMicrosoftedge,
+        Msedge: SiMicrosoftedge,
+        Safari: SiSafari,
+        safari: SiSafari,
+        webkit: FaSafari,
+        'internet explorer': SiInternetexplorer,
+    } as { [key: string]: any };
+    return map[key] || TbQuestionMark;
+};
+
+export function BrowserIcon({ browser, size = 24, color = '', ...rest }: Props) {
+    const BrowIcon = browserIconMap(browser);
+
+    return (
+        <BrowIcon
+            style={{ width: size }}
+            size={size}
+            title={browser}
+            color={color}
+            {...rest}
+        />
+    );
+}

package/src/ui-app/shared/components/Check/OsIcon.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import {
+    SiAndroid,
+    SiApple,
+    SiIos,
+    SiLinux,
+    SiWindows,
+} from 'react-icons/si';
+import { TbQuestionMark } from 'react-icons/tb';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import config from '../../../config';
+import { log } from '../../utils/Logger';
+
+interface Props {
+    os: string
+    size: number
+    color?: string
+}
+
+const osIconMap = (key: string) => {
+    const map = {
+        ios: SiIos,
+        android: SiAndroid,
+        windows: SiWindows,
+        win32: SiWindows,
+        macintel: SiApple,
+        macos: SiApple,
+        'linux x86_64': SiLinux,
+        linux: SiLinux,
+
+        // 'Linux x86_64': SiLinux,
+        // Win32: SiWindows,
+        // WINDOWS: SiWindows,
+        // MacIntel: SiApple,
+        // macOS: SiApple,
+    } as { [key: string]: any };
+    return map[key.toLowerCase()];
+};
+
+export function OsIcon({ os, size = 24, ...rest }: Props) {
+    const customDevicesQuery = useQuery(
+        ['custom_devices'],
+        () => config.customDevicesProm,
+        {
+            cacheTime: 60 * 60 * 10,
+            staleTime: 60 * 60 * 10,
+            enabled: true,
+            refetchOnWindowFocus: false,
+            onError: (err: any) => {
+                // errorMsg({ error: err });
+                log.error(err);
+            },
+        },
+    );
+
+    const customDevices = useMemo(() => customDevicesQuery.data || [], [customDevicesQuery?.data?.length]);
+
+    const allDevices = [...config.devices, ...customDevices];
+
+    const Icon = osIconMap(os)
+        || osIconMap(allDevices.find((x: any) => x.device === os)?.os || '')
+        || TbQuestionMark;
+
+    return (
+        <Icon
+            title={os}
+            size={size}
+            {...rest}
+        />
+    );
+}

package/src/ui-app/shared/components/Check/Status.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import { Badge, BadgeVariant, Loader } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { sizes } from '../../../index2/components/Tests/Table/Checks/checkSizes';
+
+const statusColor = (status: string) => {
+    const map = {
+        new: 'blue',
+        passed: 'green',
+        failed: 'red',
+    } as { [key: string]: any };
+    return map[status] || 'gray';
+};
+
+interface Props {
+    check: any,
+    variant?: BadgeVariant
+    size?: number | string,
+}
+
+export function Status({ check, size, variant = 'light', ...rest }: Props) {
+    const [checksViewSize] = useLocalStorage({ key: 'check-view-size', defaultValue: 'medium' });
+    return (
+        <Badge
+            color={statusColor(check.status)}
+            data-test="check-status"
+            data-check-status-name={check.name}
+            variant={variant}
+            size={size || sizes[checksViewSize].statusBadge}
+            title="Check status"
+            {...rest}
+        >
+            {check.status ? check.status : <Loader size="xs" color="blue" variant="dots" />}
+        </Badge>
+    );
+}

package/src/ui-app/shared/components/Check/StatusIcon.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import { RingProgress } from '@mantine/core';
+
+interface Props {
+    status: string
+    size: number
+}
+
+const iconMap = ({ key, size = 44, rest }: { key: string, size: number, rest: any }) => {
+    const map = {
+        new: (
+            <RingProgress
+                size={size}
+                thickness={size / 3.14}
+                sections={[
+                    { value: 100, color: 'blue' },
+                ]}
+            />
+        ),
+        passed: (
+            <RingProgress
+                size={size}
+                thickness={size / 3.14}
+                sections={[
+                    { value: 100, color: 'green' },
+                ]}
+            />
+        ),
+        failed: (
+            <RingProgress
+                size={size}
+                thickness={size / 3.14}
+                sections={[
+                    { value: 100, color: 'red' },
+                ]}
+            />
+        ),
+        running: (
+            <RingProgress
+                size={size}
+                thickness={size / 3.14}
+                sections={[
+                    { value: 100, color: 'gray' },
+                ]}
+            />
+        ),
+
+    } as { [key: string]: any };
+
+    return map[(key || '').toLowerCase()] || (
+        <RingProgress
+            title={key}
+            size={size}
+            thickness={size / 3.14}
+            sections={
+                [{ value: 100, color: 'dark.4' }]
+            }
+            {...rest}
+        />
+    );
+};
+
+export function StatusIcon({ status, size, ...rest }: Props) {
+    return iconMap({ key: status, size, rest });
+}

package/src/ui-app/shared/components/Email.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import { IconAt } from '@tabler/icons';
+import { Loader, TextInput } from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { GenericService } from '../services';
+
+interface IDuplicationFreeEmail {
+    form: any,
+    setEmailError: any,
+    setEmailIsFetchingStatus: React.Dispatch<React.SetStateAction<boolean>>,
+    disabled?: boolean,
+    label?: string
+    setErrorOnRuntime?: boolean
+}
+
+export const Email = {
+    // eslint-disable-next-line react/require-default-props
+    DuplicationFree(
+        {
+            form,
+            setEmailError,
+            setEmailIsFetchingStatus,
+            disabled = false,
+            label = 'Email',
+            setErrorOnRuntime = true,
+            ...rest
+        }: IDuplicationFreeEmail,
+    ) {
+        const useEmailCheckQuery = () => useQuery(
+            ['userByEmail', form.values.username],
+            // eslint-disable-next-line arrow-body-style
+            async () => {
+                return GenericService.get('users', { username: form.values.username });
+            },
+            {
+                enabled: !!form.values.username && (/^\S+@\S+$/.test(form.values.username)),
+                refetchOnWindowFocus: false,
+                onSuccess: (data) => {
+                    const { results } = data;
+                    if ((results.length > 0)) {
+                        setEmailError('user with this email already exists');
+                        if (setErrorOnRuntime) form.setFieldError('username', 'user with this email already exists');
+                        return;
+                    }
+                    setEmailError(null);
+                    if (setErrorOnRuntime) form.setFieldError('username', null);
+                },
+                onError: () => {
+                    setEmailError('cannot check the field, connection error');
+                    if (setErrorOnRuntime) form.setFieldError('username', 'cannot check the field, connection error');
+                },
+            },
+        );
+
+        const userByEmailQuery = useEmailCheckQuery();
+        useEffect(() => {
+            setEmailIsFetchingStatus(userByEmailQuery.isFetching);
+        }, [userByEmailQuery.isFetching]);
+
+        return (
+            <TextInput
+                label={label}
+                placeholder="j.smith@example.com"
+                {...form.getInputProps('username')}
+                required
+                rightSection={(userByEmailQuery.isFetching)
+                && <Loader size="xs" />}
+                icon={<IconAt size={16} />}
+                autoComplete="nope"
+                disabled={disabled}
+                id="email"
+                styles={
+                    () => (
+                        { input: { paddingRight: 36 } }
+                    )
+                }
+                {...rest}
+            />
+        );
+    },
+};

package/src/ui-app/shared/components/Header/ApiKeyModalAsk.tsx

@@ -0,0 +1,31 @@
+import { Button, Group, Modal, Text } from '@mantine/core';
+import * as React from 'react';
+
+export default function ApiKeyModalAsk({ opened, setOpened, apiKey, setResultOpened }
+                                           : { opened: boolean, setOpened: any, apiKey: any, setResultOpened: any }) {
+    return (
+        <Modal
+            opened={opened}
+            onClose={() => setOpened(false)}
+            title="Generate a new API key?"
+        >
+            <Text size="sm">
+                Are you sure you want to generate a new API key?
+                After generation, you must add corresponding changes in your test solution.
+            </Text>
+            <Group position="right">
+                <Button onClick={
+                    () => {
+                        apiKey.refetch();
+                        setResultOpened(true);
+                        setOpened(false);
+                    }
+                }
+                >
+                    Generate
+                </Button>
+                <Button variant="outline" onClick={() => setOpened(false)}>Cancel</Button>
+            </Group>
+        </Modal>
+    );
+}

package/src/ui-app/shared/components/Header/ApiKeyModalResult.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { IconCheck, IconCopy, IconKey } from '@tabler/icons';
+import { ActionIcon, Button, Group, Loader, Modal, Text, TextInput } from '@mantine/core';
+import * as React from 'react';
+import { log } from '../../utils';
+
+export function ApiKeyModalResult({ opened, setOpened, apiKey }: { opened: boolean, setOpened: any, apiKey: any }) {
+    const [successCopy, setSuccessCopy] = useState(false);
+
+    if (apiKey.isError) {
+        log.error(apiKey.error);
+    }
+    const copyHandler = () => {
+        const input: any = document.getElementById('api-key');
+        input.focus();
+        input.select();
+        // noinspection JSDeprecatedSymbols
+        const successful = document.execCommand('copy');
+        const msg = successful ? 'successful' : 'unsuccessful';
+        log.debug(`copy result: ${msg}`);
+        if (msg === 'successful') {
+            setSuccessCopy(true);
+        }
+        // @ts-ignore
+        window.getSelection().removeAllRanges();
+    };
+
+    const CopyIcon = successCopy ? IconCheck : IconCopy;
+
+    return (
+        <Modal
+            opened={opened}
+            onClose={() => {
+                setSuccessCopy(false);
+                setOpened(false);
+            }}
+            title="New API key"
+        >
+            {
+                (!apiKey.isLoading && apiKey.data)
+                    ? (
+                        <>
+                            <Group ml={20} mb={20}>
+                                <Text size="sm">Copy the New API key to Clipboard</Text>
+                            </Group>
+                            <Group position="center">
+                                <TextInput
+                                    data-test="api-key"
+                                    id="api-key"
+                                    value={apiKey.data.apikey}
+                                    sx={{ width: '340px', display: 'inline' }}
+                                    icon={<IconKey />}
+                                    style={{ display: 'inline' }}
+                                />
+                                <ActionIcon ml={-10} data-test="copy-api-icon">
+                                    <CopyIcon
+                                        size={18}
+                                        onClick={copyHandler}
+                                        color={successCopy ? 'green' : 'gray'}
+                                    />
+                                </ActionIcon>
+                            </Group>
+                        </>
+                    )
+                    : (
+                        // eslint-disable-next-line react/jsx-no-useless-fragment
+                        <>
+                            {apiKey.isError && <Text color="red" size="sm"> Error loading API key</Text>}
+                        </>
+                    )
+            }
+            <Group position="center">
+                {((apiKey.isFetching || apiKey.isRefetching)) && <Loader />}
+            </Group>
+            <Group position="center" pt={30}>
+                <Button
+                    onClick={() => {
+                        setOpened(false);
+                        setTimeout(() => {
+                            setSuccessCopy(false);
+                        }, 300);
+                    }}
+                >
+                    Close
+                </Button>
+            </Group>
+        </Modal>
+    );
+}