@syngrisi/syngrisi 2.2.1

package/src/ui-app/index2/components/Navbar/Items/RemoveSuiteModalAsk.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable no-underscore-dangle */
+import { Button, Group, Modal, Text } from '@mantine/core';
+import * as React from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { errorMsg, successMsg } from '../../../../shared/utils/utils';
+import { log } from '../../../../shared/utils/Logger';
+import { SuitesService } from '../../../../shared/services';
+import { useParams } from '../../../hooks/useParams';
+
+interface Props {
+    opened: boolean,
+    setOpened: any,
+    infinityQuery: any,
+    item: any,
+}
+
+export default function RemoveSuiteModalAsk({ opened, setOpened, infinityQuery, item }: Props) {
+    const { setQuery } = useParams();
+    const mutationRemoveItem = useMutation(
+        (data: { id: string }) => SuitesService.remove(data),
+        {
+            onSuccess: async () => {
+                setQuery({ base_filter: undefined });
+                successMsg({ message: 'Suite has been successfully removed' });
+            },
+            onError: (e: any) => {
+                errorMsg({ error: 'Cannot remove the Suite' });
+                log.error(e);
+            },
+        },
+    );
+    const handleRemoveButtonClick = async () => {
+        await mutationRemoveItem.mutateAsync({ id: item._id });
+        infinityQuery.refetch();
+        setOpened(false);
+    };
+    return (
+        <Modal
+            opened={opened}
+            onClose={() => setOpened(false)}
+            title="Remove this suite?"
+        >
+            <Text size="sm">
+                Are you sure you want to permanently delete the Suite?
+            </Text>
+            <Group position="right">
+                <Button
+                    color="red"
+                    onClick={
+                        async () => {
+                            await handleRemoveButtonClick();
+                        }
+                    }
+                >
+                    Remove
+                </Button>
+                <Button variant="outline" onClick={() => setOpened(false)}>Cancel</Button>
+            </Group>
+        </Modal>
+    );
+}

package/src/ui-app/index2/components/Navbar/Items/RunItem.tsx

@@ -0,0 +1,149 @@
+/* eslint-disable no-underscore-dangle */
+import * as React from 'react';
+import { Group, List, Loader, Stack, Text, Tooltip } from '@mantine/core';
+import * as dateFns from 'date-fns';
+import { useMemo, useState } from 'react';
+import { useDisclosure } from '@mantine/hooks';
+import { useQuery } from '@tanstack/react-query';
+import RemoveItemModalAsk from './RemoveItemModalAsk';
+import { StatusesRing } from '../../../../shared/components/Tests/StatusesRing';
+import { GenericService } from '../../../../shared/services';
+import { errorMsg } from '../../../../shared/utils';
+import { RemoveItemPopover } from './RemoveItemPopover';
+
+interface Props {
+    item: { [key: string]: string }
+    index: number
+    className: string
+    handlerItemClick: any
+    infinityQuery: any
+    type: string
+}
+
+export function RunItem(
+    {
+        item,
+        type,
+        index,
+        className,
+        infinityQuery,
+        handlerItemClick,
+    }: Props,
+) {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [opened, { toggle, close }] = useDisclosure(false);
+
+    const handleRemoveItemClick = () => {
+        setModalOpen(true);
+        close();
+    };
+
+    const testsQuery = useQuery(
+        [
+            `${type}_item_tests_query`,
+            item._id,
+        ],
+        () => GenericService.get(
+            'tests',
+            {
+                [type.toLowerCase()]: { $eq: item._id },
+            },
+            {
+                limit: '0',
+            },
+            `${type}_item_tests_query`,
+        ),
+        {
+            enabled: true,
+            refetchOnWindowFocus: false,
+            onError: (e) => {
+                errorMsg({ error: e });
+            },
+        },
+    );
+
+    const testsStatuses: any = useMemo(() => {
+        if (testsQuery?.data?.results) {
+            return testsQuery?.data?.results.map((x) => x.status);
+        }
+        return [];
+    }, [testsQuery?.data?.timestamp]);
+
+    return (
+        <>
+            <List.Item
+                data-test={`navbar_item_${index}`}
+                data-item-name={item.name}
+                onClick={handlerItemClick}
+                className={className}
+                sx={{ cursor: 'pointer', width: '100%' }}
+            >
+                <Group
+                    noWrap
+                    pl={8}
+                    position="apart"
+                    spacing={0}
+                >
+                    <Group sx={{ width: '100%' }} noWrap>
+                        <Stack spacing={0} sx={{ width: '100%' }}>
+                            <Group position="left" sx={{ width: '100%' }}>
+                                <Tooltip label={item.name} multiline withinPortal>
+                                    <Text
+                                        data-test="navbar-item-name"
+                                        size={16}
+                                        lineClamp={1}
+                                        sx={{ wordBreak: 'break-all' }}
+                                    >
+                                        {item.name}
+                                    </Text>
+                                </Tooltip>
+                            </Group>
+
+                            <Group position="right">
+                                <Tooltip
+                                    withinPortal
+                                    label={
+                                        dateFns.format(dateFns.parseISO(item.createdDate), 'yyyy-MM-dd HH:mm:ss')
+                                    }
+                                >
+                                    <Text
+                                        align="right"
+                                        size="xs"
+                                        color="dimmed"
+                                    >
+                                        {
+                                            dateFns.formatDistanceToNow(
+                                                dateFns.parseISO(item.createdDate),
+                                            )
+                                        }
+                                    </Text>
+                                </Tooltip>
+                            </Group>
+                        </Stack>
+
+                    </Group>
+                    <Group position="right" spacing={0} noWrap>
+                        {
+                            testsQuery.isLoading
+                                ? (<Loader variant="dots" color="blue" size="xs" mr={16} />)
+                                : (<StatusesRing statuses={testsStatuses} name={item.name} />)
+                        }
+                        <RemoveItemPopover
+                            handleRemoveItemClick={handleRemoveItemClick}
+                            type={type}
+                            opened={opened}
+                            toggle={toggle}
+                        />
+                    </Group>
+                </Group>
+            </List.Item>
+            <RemoveItemModalAsk
+                opened={modalOpen}
+                setOpened={setModalOpen}
+                infinityQuery={infinityQuery}
+                item={item}
+                type={type}
+            />
+        </>
+    );
+}

package/src/ui-app/index2/components/Navbar/Items/StatusItem.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable no-underscore-dangle */
+import * as React from 'react';
+import { Group, List, Stack, Text, Tooltip } from '@mantine/core';
+import { StatusIcon } from '../../../../shared/components/Check/StatusIcon';
+
+interface Props {
+    item: { [key: string]: string }
+    index: number
+    handlerItemClick: any
+    className: string
+}
+
+export function StatusItem({ item, index, handlerItemClick, className }: Props) {
+    return (
+        <List.Item
+            data-test={`navbar_item_${index}`}
+            onClick={handlerItemClick}
+            className={className}
+            sx={{ cursor: 'pointer', width: '100%' }}
+        >
+            <Group noWrap pl={8} position="apart" spacing={0} sx={{ width: '100%' }}>
+                <Stack spacing={0} sx={{ width: '100%' }}>
+                    <Group position="left" sx={{ width: '100%' }}>
+                        <Tooltip label={item.name} multiline withinPortal>
+                            <Group spacing={8}>
+                                <StatusIcon status={item.name} size={44} />
+                                <Text
+                                    data-test="navbar-item-name"
+                                    size={16}
+                                    lineClamp={1}
+                                    sx={{ wordBreak: 'break-all' }}
+                                >
+                                    {item.name}
+                                </Text>
+                            </Group>
+                        </Tooltip>
+                    </Group>
+                </Stack>
+            </Group>
+        </List.Item>
+    );
+}

package/src/ui-app/index2/components/Navbar/Items/SuiteItem.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable no-underscore-dangle */
+import * as React from 'react';
+import { Group, List, Stack, Text, Tooltip } from '@mantine/core';
+import * as dateFns from 'date-fns';
+import { useState } from 'react';
+import { useDisclosure } from '@mantine/hooks';
+import RemoveItemModalAsk from './RemoveItemModalAsk';
+import { RemoveItemPopover } from './RemoveItemPopover';
+
+interface Props {
+    item: { [key: string]: string }
+    index: number
+    className: string
+    handlerItemClick: any
+    infinityQuery: any
+    type: string
+}
+
+export function SuiteItem(
+    {
+        item,
+        type,
+        index,
+        className,
+        infinityQuery,
+        handlerItemClick,
+    }: Props,
+) {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [opened, { toggle, close }] = useDisclosure(false);
+
+    const handleRemoveItemClick = () => {
+        setModalOpen(true);
+        close();
+    };
+
+    return (
+        <>
+            <List.Item
+                data-test={`navbar_item_${index}`}
+                data-item-name={item.name}
+                onClick={handlerItemClick}
+                className={className}
+                sx={{ cursor: 'pointer', width: '100%' }}
+            >
+                <Group
+                    noWrap
+                    pl={8}
+                    position="apart"
+                    spacing={0}
+                >
+                    <Group sx={{ width: '100%' }} noWrap>
+                        <Stack spacing={0} sx={{ width: '100%' }}>
+                            <Group position="left" sx={{ width: '100%' }}>
+                                <Tooltip label={item.name} multiline withinPortal>
+                                    <Text
+                                        data-test="navbar-item-name"
+                                        size={16}
+                                        lineClamp={1}
+                                        sx={{ wordBreak: 'break-all' }}
+                                    >
+                                        {item.name}
+                                    </Text>
+                                </Tooltip>
+                            </Group>
+
+                            <Group position="right">
+                                <Tooltip
+                                    withinPortal
+                                    label={
+                                        dateFns.format(dateFns.parseISO(item.createdDate), 'yyyy-MM-dd HH:mm:ss')
+                                    }
+                                >
+                                    <Text
+                                        align="right"
+                                        size="xs"
+                                        color="dimmed"
+                                    >
+                                        {
+                                            dateFns.formatDistanceToNow(
+                                                dateFns.parseISO(item.createdDate),
+                                            )
+                                        }
+                                    </Text>
+                                </Tooltip>
+                            </Group>
+                        </Stack>
+
+                    </Group>
+                    <Group position="right" spacing={0} noWrap>
+                        <RemoveItemPopover
+                            handleRemoveItemClick={handleRemoveItemClick}
+                            type={type}
+                            opened={opened}
+                            toggle={toggle}
+                        />
+                    </Group>
+                </Group>
+            </List.Item>
+            <RemoveItemModalAsk
+                opened={modalOpen}
+                setOpened={setModalOpen}
+                infinityQuery={infinityQuery}
+                item={item}
+                type={type}
+            />
+        </>
+    );
+}

package/src/ui-app/index2/components/Navbar/Items/index.tsx

@@ -0,0 +1,6 @@
+export { RunItem } from './RunItem';
+export { SuiteItem } from './SuiteItem';
+export { BrowserItem } from './BrowserItem';
+export { PlatformItem } from './PlatformItem';
+export { StatusItem } from './StatusItem';
+export { AcceptStatusItem } from './AcceptStatusItem';

package/src/ui-app/index2/components/Navbar/NavbarFilter.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable prefer-arrow-callback */
+import * as React from 'react';
+import { ActionIcon, FocusTrap, Loader, TextInput, Transition } from '@mantine/core';
+import { IconX } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import { useDebouncedValue } from '@mantine/hooks';
+import { escapeRegExp } from '../../../shared/utils/utils';
+
+const quickFilterKey = (value: string) => {
+    const transform = {
+        runs: 'name',
+        suites: 'name',
+        'test-distinct/browserName': 'browserName',
+        'test-distinct/os': 'os',
+        'test-distinct/status': 'status',
+        'test-distinct/markedAs': 'markedAs',
+    } as { [key: string]: string };
+    return transform[value] || 'name';
+};
+
+type Props = {
+    openedFilter: boolean,
+    infinityQuery: any,
+    toggleOpenedFilter: any,
+    setQuickFilterObject: any,
+    groupByValue: string,
+};
+
+export function NavbarFilter(
+    {
+        openedFilter,
+        infinityQuery,
+        toggleOpenedFilter,
+        setQuickFilterObject,
+        groupByValue,
+    }: Props,
+) {
+    const [quickFilter, setQuickFilter] = useState<string>('');
+    const [debouncedQuickFilter] = useDebouncedValue(quickFilter, 400);
+
+    useEffect(function onDebounceQuickFilterUpdate() {
+        if (!debouncedQuickFilter) setQuickFilterObject(null);
+        setQuickFilterObject(() => (
+            {
+                [quickFilterKey(groupByValue)]: {
+                    $regex: escapeRegExp(debouncedQuickFilter),
+                    $options: 'im',
+                },
+            }
+        ));
+    }, [debouncedQuickFilter]);
+
+    return (
+        <Transition
+            mounted={openedFilter}
+            transition="fade"
+            duration={400}
+            timingFunction="ease"
+        >
+            {(styles) => (
+                <FocusTrap active>
+                    <TextInput
+                        label="Filter by"
+                        data-test="navbar-quick-filter"
+                        style={styles}
+                        sx={{ width: '100%' }}
+                        placeholder="Filter"
+                        value={quickFilter}
+                        onChange={(e) => {
+                            setQuickFilter(e.currentTarget.value);
+                        }}
+                        rightSection={
+                            (
+                                (quickFilter === debouncedQuickFilter)
+                                && !infinityQuery.isFetching
+                            )
+                                ? (
+                                    <ActionIcon onClick={() => {
+                                        if (quickFilter === '') toggleOpenedFilter(false);
+                                        setQuickFilter('');
+                                    }}
+                                    >
+                                        <IconX stroke={1} />
+                                    </ActionIcon>
+                                )
+                                : (<Loader size={24} />)
+                        }
+                    />
+                </FocusTrap>
+            )}
+        </Transition>
+    );
+}

package/src/ui-app/index2/components/Navbar/NavbarGroupBySelect.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable prefer-arrow-callback */
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useDocumentTitle } from '@mantine/hooks';
+import { Anchor } from '@mantine/core';
+import SafeSelect from '../../../shared/components/SafeSelect';
+import { useParams } from '../../hooks/useParams';
+import { getNavigationItem } from '../../../shared/navigation/navigationData';
+
+interface Props {
+    clearActiveItems: any;
+    groupByValue: string,
+    setGroupByValue: any,
+    setBreadCrumbs: any,
+}
+
+export function NavbarGroupBySelect({ clearActiveItems, groupByValue, setGroupByValue, setBreadCrumbs }: Props) {
+    const { query, setQuery } = useParams();
+
+    const subpageMap: { [key: string]: string } = {
+        runs: 'By Runs',
+        suites: 'By Suites',
+        'test-distinct/browserName': 'By Browser',
+        'test-distinct/os': 'By Platform',
+        'test-distinct/status': 'By Test Status',
+        'test-distinct/markedAs': 'By Accept Status',
+    };
+
+    const [title, setTitle] = useState(subpageMap[String('runs')]);
+
+    useEffect(function updateTitle() {
+        if (query?.checkId) {
+            setTitle(() => ''); // this necessary to trigger  useDocumentTitle after modal close
+            return;
+        }
+        setTitle(() => subpageMap[String(query?.groupBy || 'runs')]);
+    }, [query?.groupBy, query?.checkId]);
+
+    const updateBreadcrumbs = (pageTitle: string) => {
+        const pageData = getNavigationItem(pageTitle) || {
+            title: null,
+            crumbs: [],
+        };
+        setBreadCrumbs(() => pageData!.crumbs.map((item: any) => (
+            <Anchor href={item.href} key={`${item.title}`} size="sm" color="green">
+                {item.title}
+            </Anchor>
+        )));
+    };
+
+    useDocumentTitle(title);
+    useEffect(function changeBreadcrumbs() {
+        updateBreadcrumbs(title);
+    }, [title]);
+
+    useEffect(function onQueryGroupByUpdated() {
+        if (!query.groupBy) return;
+        setGroupByValue(query.groupBy);
+    }, [query.groupBy]);
+
+    const handleGroupBySelect = (value: string) => {
+        clearActiveItems();
+        setQuery({ groupBy: value });
+    };
+
+    return (
+        <SafeSelect
+            label="Group by"
+            data-test="navbar-group-by"
+            value={groupByValue}
+            onChange={handleGroupBySelect}
+            optionsData={[
+                { value: 'runs', label: 'Runs' },
+                { value: 'suites', label: 'Suites' },
+                { value: 'test-distinct/browserName', label: 'Browsers' },
+                { value: 'test-distinct/os', label: 'Platform' },
+                // { value: 'test-distinct/viewport', label: 'Viewport' },
+                { value: 'test-distinct/status', label: 'Test Status' },
+                { value: 'test-distinct/markedAs', label: 'Accept Status' },
+            ]}
+        />
+    );
+}