@syngrisi/syngrisi 2.2.1

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

@@ -0,0 +1,71 @@
+/* eslint-disable indent,react/jsx-indent */
+import React, { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Skeleton } from '@mantine/core';
+
+import { tableColumns } from './tableColumns';
+
+interface Props {
+    infinityQuery: any,
+    visibleFields: any,
+}
+
+function InfinityScrollSkeleton({ infinityQuery, visibleFields }: Props) {
+    const { ref, inView } = useInView();
+
+    useEffect(() => {
+        if (infinityQuery === null) return;
+        if (inView) {
+            infinityQuery.fetchNextPage();
+        }
+    }, [inView]);
+
+    return (
+        <tfoot ref={ref} style={{ marginBottom: -100 }}>
+        {
+            (infinityQuery === null || infinityQuery.hasNextPage) && (
+                Object.keys(new Array(6).fill('')).map(
+                    (x) => (
+                        <tr key={x} style={{ height: 72 }}>
+                            <td style={{ width: 40, padding: 10 }}>
+                                <Skeleton height={20} radius="sm" />
+                            </td>
+                            {
+                                Object.keys(tableColumns).map((column) => {
+                                    if (!visibleFields.includes(column)) return undefined;
+
+                                    if (column === 'level') {
+                                        return (
+                                            <td
+                                                key={column}
+                                                style={{ ...tableColumns[column].cellStyle, paddingLeft: '8px' }}
+                                            >
+                                                <Skeleton height={34} circle radius="xl" />
+                                            </td>
+                                        );
+                                    }
+
+                                    return (
+                                        <td
+                                            key={column}
+                                            style={{
+                                                ...tableColumns[column].cellStyle,
+                                                paddingLeft: 5,
+                                                paddingRight: 25,
+                                            }}
+                                        >
+                                            <Skeleton height={16} radius="md" />
+                                        </td>
+                                    );
+                                })
+                            }
+                        </tr>
+                    ),
+                )
+            )
+        }
+        </tfoot>
+    );
+}
+
+export default InfinityScrollSkeleton;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Affix, Button, Text, Transition } from '@mantine/core';
+import { IconArrowUp } from '@tabler/icons';
+
+interface Props {
+    loaded: string
+    total: string
+    scrollAreaRef: any
+}
+
+function PagesCountAffix({ loaded, total, scrollAreaRef }: Props) {
+    const isMounted = !!scrollAreaRef?.current?.querySelector('.mantine-ScrollArea-viewport')?.scrollTop;
+    return (
+        <Affix position={{ bottom: 20, right: 20 }}>
+            <Transition
+                transition="slide-up"
+                mounted={isMounted}
+            >
+                {(transitionStyles) => (
+                    <Button
+                        data-test="infinity-scroll-affix"
+                        size="lg"
+                        color="dark"
+                        style={transitionStyles}
+                        title="Scroll to top"
+                        rightIcon={<IconArrowUp size={16} />}
+                        onClick={
+                            () => scrollAreaRef?.current?.querySelector('.mantine-ScrollArea-viewport').scroll(0, 0)
+                        }
+                    >
+                        <Text
+                            size="sm"
+                            data-test="infinity-scroll-affix-loaded-count"
+                            p={3}
+                            title="Loaded"
+                        >
+                            {loaded}
+                        </Text>
+                        <Text
+                            size="sm"
+                            p={3}
+                        >
+                            {' / '}
+                        </Text>
+                        <Text
+                            size="sm"
+                            data-test="infinity-scroll-affix-total-count"
+                            p={3}
+                            title="Total"
+                        >
+                            {total}
+                        </Text>
+
+                    </Button>
+                )}
+            </Transition>
+        </Affix>
+    );
+}
+
+export default PagesCountAffix;

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

@@ -0,0 +1,65 @@
+/* eslint-disable */
+import React, { FunctionComponent } from 'react';
+import { ActionIcon, Badge, useMantineTheme } from '@mantine/core';
+import { IconRefresh } from '@tabler/icons';
+
+interface Props {
+    newestItemsQuery: any,
+    firstPageQuery: any,
+    infinityQuery?: any,
+}
+
+const RefreshActionIcon: FunctionComponent<Props> = ({ newestItemsQuery, firstPageQuery, infinityQuery }) => {
+    const theme = useMantineTheme();
+    const newestItems = newestItemsQuery?.data?.results.length > 50 ? '50+' : newestItemsQuery?.data?.results.length;
+    const pluralCharset = newestItems > 1 ? 's' : '';
+    return (
+        <>
+            <ActionIcon
+                title="Refresh"
+                color={theme.colorScheme === 'dark' ? 'green.8' : 'green.6'}
+                data-test="table-refresh-icon"
+                variant="subtle"
+                onClick={() => firstPageQuery.refetch()}
+            >
+                <IconRefresh size={24} stroke={1} />
+
+                {
+                    newestItemsQuery?.data?.results?.length !== undefined && newestItemsQuery?.data?.results?.length > 0
+                    && (
+                        <Badge
+                            component="div"
+                            title={` You have ${newestItems} new item${pluralCharset}, refresh the page to see them`}
+                            pl={4}
+                            pr={4}
+                            pt={6}
+                            pb={6}
+                            color="red"
+                            variant="filled"
+                            radius="xl"
+                            data-test="table-refresh-icon-badge"
+                            sx={{
+                                fontSize: '12px',
+                                position: 'absolute',
+                                bottom: 11,
+                                left: 14,
+                                lineHeight: '16px',
+                                fontWeight: 400,
+                                fontFamily: '"Roboto","Arial",sans-serif',
+                                border: `2px`,
+                                borderStyle: 'solid',
+                                borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
+                            }}
+                        >
+                            {
+                                newestItems
+                            }
+                        </Badge>
+                    )
+                }
+            </ActionIcon>
+        </>
+    );
+};
+
+export default RefreshActionIcon;

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

@@ -0,0 +1,66 @@
+import { Button, Group, Modal, Text } from '@mantine/core';
+import * as React from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { TestsService } from '../../../../shared/services';
+import { errorMsg, successMsg } from '../../../../shared/utils/utils';
+import { log } from '../../../../shared/utils/Logger';
+
+interface Props {
+    opened: boolean,
+    setOpened: any,
+    selection: any
+    infinityQuery: any
+    setSelection: any
+}
+
+export default function RemoveTestModalAsk({ opened, setOpened, selection, setSelection, infinityQuery }: Props) {
+    const mutationRemoveTest = useMutation(
+        (data: { id: string }) => TestsService.removeTest(data),
+        {
+            onSuccess: async () => {
+                successMsg({ message: 'Test has been successfully removed' });
+            },
+            onError: (e: any) => {
+                errorMsg({ error: 'Cannot remove the Test' });
+                log.error(e);
+            },
+        },
+    );
+    // const [foldMode, toggleFoldMode] = useToggle([true, false]);
+    const asyncMutations: Promise<any>[] = [];
+    const handleRemoveButtonClick = async () => {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const id of selection) {
+            asyncMutations.push(mutationRemoveTest.mutateAsync({ id }));
+        }
+        await Promise.all(asyncMutations);
+        setSelection(() => []);
+        infinityQuery.refetch();
+        setOpened(false);
+    };
+    return (
+        <Modal
+            opened={opened}
+            onClose={() => setOpened(false)}
+            title="Remove selected tests?"
+        >
+            <Text size="sm">
+                Are you sure you want to permanently delete the selected tests?
+            </Text>
+            <Group position="right">
+                <Button
+                    data-test="confirm-remove-test-icon"
+                    color="red"
+                    onClick={
+                        async () => {
+                            await handleRemoveButtonClick();
+                        }
+                    }
+                >
+                    Remove
+                </Button>
+                <Button variant="outline" onClick={() => setOpened(false)}>Cancel</Button>
+            </Group>
+        </Modal>
+    );
+}

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

@@ -0,0 +1,43 @@
+import { ActionIcon, Transition, useMantineTheme } from '@mantine/core';
+import { IconTrash } from '@tabler/icons';
+import React, { useState } from 'react';
+import RemoveTestModalAsk from './RemoveTestModalAsk';
+
+interface Props {
+    selection: any
+    infinityQuery: any
+    setSelection: any
+}
+
+export default function RemoveTestsButton({ selection, setSelection, infinityQuery }: Props) {
+    const theme = useMantineTheme();
+    const [opened, setOpened] = useState(false);
+    return (
+        <>
+            <Transition mounted={selection.length > 0} transition="fade" duration={400} timingFunction="ease">
+                {
+                    (styles) => (
+                        <ActionIcon
+                            color={theme.colorScheme === 'dark' ? 'green.8' : 'green.6'}
+                            data-test="table-remove-tests"
+                            variant="subtle"
+                            onClick={async () => {
+                                setOpened(true);
+                            }}
+                            style={styles}
+                        >
+                            <IconTrash size={24} stroke={1} />
+                        </ActionIcon>
+                    )
+                }
+            </Transition>
+            <RemoveTestModalAsk
+                opened={opened}
+                setOpened={setOpened}
+                selection={selection}
+                infinityQuery={infinityQuery}
+                setSelection={setSelection}
+            />
+        </>
+    );
+}

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

@@ -0,0 +1,128 @@
+/* eslint-disable no-underscore-dangle */
+import * as React from 'react';
+import { Checkbox, Collapse, createStyles } from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { tableColumns } from './tableColumns';
+import { Checks } from './Checks/Checks';
+import { testsCreateStyle } from './testsCreateStyle';
+import { GenericService } from '../../../../shared/services';
+import { errorMsg } from '../../../../shared/utils';
+import { CellWrapper } from './Cells/CellWrapper';
+
+const useStyles = createStyles(testsCreateStyle as any);
+
+interface Props {
+    item: any
+    toggleRow: any
+    toggleCollapse: any
+    index: number
+    visibleFields: any
+    selection: any
+    collapse: any
+    infinityQuery: any,
+}
+
+export function Row(
+    {
+        item,
+        toggleRow,
+        toggleCollapse,
+        index,
+        visibleFields,
+        selection,
+        collapse,
+        infinityQuery,
+    }: Props,
+) {
+    const { classes, cx } = useStyles();
+    const selected = selection.includes(item.id!);
+
+    const testUpdateQuery = useQuery(
+        [
+            'testUpdateQuery',
+            item._id,
+        ],
+        () => GenericService.get(
+            'tests',
+            { _id: item._id },
+            {
+                populate: 'checks',
+                limit: '0',
+            },
+            'testUpdateQuery',
+        ),
+        {
+            enabled: false,
+            refetchOnWindowFocus: false,
+            refetchOnReconnect: false,
+            onError: (e) => {
+                errorMsg({ error: e });
+            },
+        },
+    );
+
+    const test = useMemo(() => {
+        if (testUpdateQuery.data?.results?.length) return testUpdateQuery.data?.results[0];
+        return item;
+    }, [JSON.stringify(item), JSON.stringify(testUpdateQuery.data?.results)]);
+
+    return (
+        <>
+            <tr
+                data-test={`table_row_${index}`}
+                data-row-name={test.name}
+                className={cx({ [classes.rowSelected]: selected })}
+                style={{ cursor: 'pointer' }}
+                onClick={() => toggleCollapse(test.id!)}
+            >
+
+                <td>
+                    <Checkbox
+                        data-test="table-item-checkbox"
+                        data-test-checkbox-name={test.name}
+                        checked={selected}
+                        onChange={(event) => {
+                            event.stopPropagation();
+                            toggleRow(test.id!);
+                        }}
+                        onClick={
+                            (event) => {
+                                event.stopPropagation();
+                            }
+                        }
+                    />
+                </td>
+                {
+                    Object.keys(tableColumns).map((column: string) => {
+                        if (!visibleFields.includes(column)) return undefined;
+                        const itemValue = column.includes('.')
+                            // @ts-ignore
+                            ? test[column?.split('.')[0]][column?.split('.')[1]]
+                            : test[column];
+
+                        return (
+                            <CellWrapper test={test} type={column} itemValue={itemValue} key={column} />
+                        );
+                    })
+                }
+            </tr>
+
+            <tr>
+                <td style={{ padding: 0, border: 0, width: 'auto' }} colSpan={1000}>
+                    <Collapse
+                        in={collapse.includes(test.id!)}
+                        pl={10}
+                        pr={10}
+                        pt={10}
+                        pb={10}
+                        data-test="table-test-collapsed-row"
+                    >
+                        <Checks item={test} testUpdateQuery={testUpdateQuery} infinityQuery={infinityQuery} />
+                    </Collapse>
+                </td>
+            </tr>
+
+        </>
+    );
+}

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

@@ -0,0 +1,87 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import React, { useEffect, useState } from 'react';
+import UnfoldActionIcon from './UnfoldActionIcon';
+import { Row } from './Row';
+
+interface Props {
+    infinityQuery: any
+    selection: any
+    setSelection: any
+    updateToolbar: any
+    visibleFields: string[]
+}
+
+const Rows = ({ infinityQuery, selection, setSelection, visibleFields, updateToolbar }: Props) => {
+    const [collapse, setCollapse]: [string[], any] = useState([]);
+    const { data } = infinityQuery;
+
+    const toggleCollapse = (id: string) => {
+        setCollapse(
+            (current: any) => (current.includes(id) ? current.filter((item: string) => item !== id) : [...current, id]),
+        );
+    };
+
+    const expand = (id: string) => {
+        setCollapse(
+            (current: any) => {
+                if (!current.includes(id)) {
+                    return [...current, id];
+                }
+                return current;
+            },
+        );
+    };
+    const fold = (id: string) => {
+        setCollapse(
+            (current: any) => {
+                if (current.includes(id)) {
+                    return current.filter((item: string) => item !== id);
+                }
+                return current;
+            },
+        );
+    };
+
+    const expandSelected = () => {
+        selection.forEach((item: string) => expand(item));
+    };
+
+    const collapseSelected = () => {
+        selection.forEach((item: string) => fold(item));
+    };
+
+    useEffect(() => {
+        updateToolbar(
+            <UnfoldActionIcon
+                mounted={selection.length > 0}
+                expandSelected={expandSelected}
+                collapseSelected={collapseSelected}
+            />,
+            30,
+        );
+    }, [selection.length]);
+
+    const toggleRow = (id: string) => setSelection(
+        (current: any) => (current.includes(id) ? current.filter((item: string) => item !== id) : [...current, id]),
+    );
+
+    return data.pages.map((page: any) => (
+        page.results.map(
+            (item: any, index: number) => (
+                <Row
+                    key={item.id}
+                    item={item}
+                    infinityQuery={infinityQuery}
+                    toggleRow={toggleRow}
+                    toggleCollapse={toggleCollapse}
+                    index={index}
+                    visibleFields={visibleFields}
+                    selection={selection}
+                    collapse={collapse}
+                />
+            ),
+        )
+    ));
+};
+
+export default Rows;

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

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import {
+    ActionIcon,
+    Chip,
+    Group,
+    SegmentedControl,
+    Text,
+} from '@mantine/core';
+import { IconSortAscending, IconSortDescending } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import { useInputState, useToggle, useLocalStorage } from '@mantine/hooks';
+import { tableColumns } from './tableColumns';
+import RelativeDrawer from '../../../../shared/components/RelativeDrawer';
+import SafeSelect from '../../../../shared/components/SafeSelect';
+import { SearchParams } from '../../../../shared/utils';
+
+interface Props {
+    open: boolean
+    setSortOpen: any,
+    visibleFields: any
+    setVisibleFields: any
+    searchParams: any
+    setSearchParams: any
+}
+
+function Settings(
+    {
+        open,
+        setSortOpen,
+        visibleFields,
+        setVisibleFields,
+        searchParams,
+        setSearchParams,
+    }: Props,
+) {
+    const [checksViewMode, setChecksViewMode] = useLocalStorage({ key: 'check-view-mode', defaultValue: 'bounded' });
+    const [checksViewSize, setChecksViewSize] = useLocalStorage({ key: 'check-view-size', defaultValue: 'medium' });
+
+    const [sortOrder, toggleSortOrder] = useToggle(['desc', 'asc']);
+    const [selectOptionsData] = useState(() => Object.keys(tableColumns)
+        .map((column) => ({ value: column, label: tableColumns[column].label })));
+
+    const [sortItemValue, setSortItemValue] = useInputState('startDate');
+
+    useEffect(() => {
+        SearchParams.changeSorting(searchParams, setSearchParams, sortItemValue, sortOrder);
+    }, [sortItemValue, sortOrder]);
+
+    return (
+        <RelativeDrawer
+            open={open}
+            setOpen={setSortOpen}
+            title="Settings"
+            width={260}
+        >
+            <Group align="end" spacing="sm" noWrap>
+                <SafeSelect
+                    label="Sort by"
+                    data-test="table-sort-by-select"
+                    optionsData={selectOptionsData}
+                    required={false}
+                    value={sortItemValue}
+                    onChange={setSortItemValue}
+                />
+                <ActionIcon
+                    size={36}
+                    data-test="table-sort-order"
+                    title={`sort order is ${sortOrder === 'desc' ? 'descendant' : 'ascendant'}`}
+                    onClick={() => {
+                        toggleSortOrder();
+                    }}
+                >
+                    {sortOrder === 'desc' ? <IconSortDescending stroke={1} /> : <IconSortAscending stroke={1} />}
+                </ActionIcon>
+            </Group>
+
+            <Text pt="xl" weight={500}>Visible fields</Text>
+            <Chip.Group
+                align="self-start"
+                p={8}
+                value={visibleFields}
+                onChange={setVisibleFields}
+                multiple
+            >
+                {
+                    Object.keys(tableColumns).map((column) => (
+                        <Chip
+                            key={column}
+                            value={column}
+                            data-test={`settings-visible-columns-${tableColumns[column].label}`}
+
+                        >
+                            {tableColumns[column].label}
+                        </Chip>
+                    ))
+                }
+            </Chip.Group>
+
+            <Text mt="md" weight={500} pb="xs">Appearance of Checks</Text>
+            <Group position="center">
+                <SegmentedControl
+                    data-test="preview-mode-segment-control"
+                    data={['bounded', 'normal', 'list']}
+                    value={checksViewMode}
+                    onChange={setChecksViewMode}
+                />
+            </Group>
+            <Group position="center" mt="md">
+                <SegmentedControl
+                    data-test="preview-size-segment-control"
+                    data={['small', 'medium', 'large', 'xlarge']}
+                    value={checksViewSize}
+                    onChange={setChecksViewSize}
+                />
+            </Group>
+
+        </RelativeDrawer>
+    );
+}
+
+export default Settings;