@syngrisi/syngrisi 2.2.1

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

@@ -0,0 +1,140 @@
+/* eslint-disable indent,react/jsx-indent,prefer-arrow-callback */
+import React, { useState, useRef, useEffect } from 'react';
+import {
+    createStyles,
+    Table,
+    ScrollArea,
+    Text,
+} from '@mantine/core';
+
+import InfinityScrollSkeleton from './InfinityScrollSkeleton';
+import PagesCountAffix from './PagesCountAffix';
+import ILog from '../../../../shared/interfaces/ILog';
+import { testsCreateStyle } from './testsCreateStyle';
+import Rows from './Rows';
+import Heads from './Heads';
+import { CheckModal } from './Checks/CheckModal';
+import RemoveTestsButton from './RemoveTestsButton';
+import AcceptTestsButton from './AcceptTestsButton';
+import { useParams } from '../../../hooks/useParams';
+
+const useStyles = createStyles(testsCreateStyle as any);
+
+interface Props {
+    infinityQuery: any
+    firstPageQuery: any,
+    visibleFields: any
+    updateToolbar: any
+    size?: string
+}
+
+export default function TestsTable(
+    {
+        infinityQuery,
+        firstPageQuery,
+        visibleFields,
+        updateToolbar,
+        size = '100%',
+    }: Props,
+) {
+    const { query } = useParams();
+    const { data } = infinityQuery;
+    const flatData = data ? data.pages.flat().map((x: any) => x.results).flat() : [];
+
+    // eslint-disable-next-line no-unused-vars
+    const { classes } = useStyles();
+    const [selection, setSelection]: [string[], any] = useState([]);
+
+    useEffect(function resetSelection() {
+        setSelection(() => ([]));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(query.base_filter), query.app]);
+
+    const scrollAreaRef = useRef(null);
+    // eslint-disable-next-line max-len
+    const toggleAllRows = () => setSelection((current: string) => (current.length === flatData.length ? [] : flatData.map((item: ILog) => item.id)));
+
+    useEffect(function onSelectionUpdate() {
+        updateToolbar(
+            <RemoveTestsButton
+                selection={selection}
+                setSelection={setSelection}
+                infinityQuery={infinityQuery}
+            />,
+            31,
+        );
+        updateToolbar(
+            <AcceptTestsButton
+                selection={selection}
+                setSelection={setSelection}
+                infinityQuery={infinityQuery}
+                // firstPageQuery={firstPageQuery}
+            />,
+            32,
+        );
+    }, [selection.length]);
+
+    return (
+        <>
+            <ScrollArea.Autosize
+                data-test="table-scroll-area"
+                ref={scrollAreaRef}
+                maxHeight="100vh"
+                sx={{ width: size }}
+                pb={124}
+                styles={{ scrollbar: { marginTop: '46px' } }}
+            >
+
+                <Table
+                    sx={{ width: '100%' }}
+                    // mb={100}
+                    verticalSpacing="sm"
+                    highlightOnHover
+                >
+                    <thead
+                        style={{ zIndex: 10 }}
+                        className={classes.header}
+                    >
+                    <Heads
+                        data={data}
+                        toggleAllRows={toggleAllRows}
+                        selection={selection}
+                        visibleFields={visibleFields}
+                    />
+                    </thead>
+
+                    {
+                        // eslint-disable-next-line no-nested-ternary
+                        infinityQuery.isLoading
+                            ? (<InfinityScrollSkeleton infinityQuery={null} visibleFields={visibleFields} />)
+                            : infinityQuery.isError
+                                ? (
+                                    <Text color="red">
+                                        Error:
+                                        {infinityQuery.error.message}
+                                    </Text>
+                                )
+                                : (
+                                    <tbody className={classes.tableBody}>
+                                    <Rows
+                                        updateToolbar={updateToolbar}
+                                        infinityQuery={infinityQuery}
+                                        selection={selection}
+                                        setSelection={setSelection}
+                                        visibleFields={visibleFields}
+                                    />
+                                    </tbody>
+                                )
+                    }
+                    <InfinityScrollSkeleton infinityQuery={infinityQuery} visibleFields={visibleFields} />
+                </Table>
+            </ScrollArea.Autosize>
+            <PagesCountAffix
+                loaded={infinityQuery.data?.pages?.length.toString()}
+                total={infinityQuery.data?.pages && infinityQuery.data?.pages[0].totalPages}
+                scrollAreaRef={scrollAreaRef}
+            />
+            <CheckModal firstPageQuery={firstPageQuery} />
+        </>
+    );
+}

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

@@ -0,0 +1,39 @@
+import { ActionIcon, Transition, useMantineTheme } from '@mantine/core';
+import { IconArrowsVertical, IconFold } from '@tabler/icons';
+import React from 'react';
+import { useToggle } from '@mantine/hooks';
+
+interface Props {
+    expandSelected: any
+    collapseSelected: any
+    mounted: boolean
+}
+
+export default function UnfoldActionIcon({ expandSelected, collapseSelected, mounted }: Props) {
+    const theme = useMantineTheme();
+    const [foldMode, toggleFoldMode] = useToggle([true, false]);
+    return (
+        <Transition mounted={mounted} transition="fade" duration={400} timingFunction="ease">
+            {
+                (styles) => (
+                    <ActionIcon
+                        color={theme.colorScheme === 'dark' ? 'green.8' : 'green.6'}
+                        data-test="folding-table-items"
+                        variant="subtle"
+                        onClick={() => {
+                            if (foldMode) {
+                                expandSelected();
+                            } else {
+                                collapseSelected();
+                            }
+                            toggleFoldMode();
+                        }}
+                        style={styles}
+                    >
+                        {foldMode ? <IconArrowsVertical size={24} stroke={1} /> : <IconFold size={24} stroke={1} />}
+                    </ActionIcon>
+                )
+            }
+        </Transition>
+    );
+}

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

@@ -0,0 +1,80 @@
+export const tableColumns: { [key: string]: any } = {
+    _id: {
+        label: 'Id',
+        headStyle: { width: '15%' },
+        cellStyle: { width: '15%' },
+        type: 'IdFilter',
+    },
+    name: {
+        label: 'Name',
+        headStyle: { width: '35%' },
+        cellStyle: { width: '35%' },
+        type: 'StringFilter',
+    },
+    status: {
+        label: 'Status',
+        headStyle: { width: '10%' },
+        cellStyle: { width: '10%' },
+        type: 'StatusFilter',
+    },
+    creatorUsername: {
+        label: 'Created',
+        headStyle: { width: '10%' },
+        cellStyle: { width: '10%' },
+        type: 'StringFilter',
+    },
+    markedAs: {
+        label: 'Accepted',
+        headStyle: { width: '7%' },
+        cellStyle: { width: '7%' },
+        type: 'AcceptedFilter',
+    },
+    startDate: {
+        label: 'Date',
+        headStyle: { width: '15%' },
+        cellStyle: { width: '15%' },
+        type: 'DateFilter',
+    },
+    browserName: {
+        label: 'Browser',
+        headStyle: { width: '10%' },
+        cellStyle: { width: '10%' },
+        type: 'BrowserNameFilter',
+    },
+    browserVersion: {
+        label: 'Browser Ver.',
+        headStyle: { width: '10%' },
+        cellStyle: { width: '10%' },
+        type: 'StringFilter',
+    },
+    os: {
+        label: 'Platform',
+        headStyle: { width: '10%' },
+        cellStyle: { width: '10%' },
+        type: 'OsFilter',
+    },
+    run: {
+        label: 'Run',
+        headStyle: { width: '15%' },
+        cellStyle: { width: '15%' },
+        type: 'IdFilter',
+    },
+    suite: {
+        label: 'Suite',
+        headStyle: { width: '15%' },
+        cellStyle: { width: '15%' },
+        type: 'IdFilter',
+    },
+    branch: {
+        label: 'Branch',
+        headStyle: { width: '10%' },
+        cellStyle: { width: '10%' },
+        type: 'StringFilter',
+    },
+    viewport: {
+        label: 'Viewport',
+        headStyle: { width: '10%' },
+        cellStyle: { width: '10%' },
+        type: 'StringFilter',
+    },
+};

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

@@ -0,0 +1,35 @@
+export const testsCreateStyle = (theme: any) => ({
+    rowSelected: {
+        backgroundColor:
+            theme.colorScheme === 'dark'
+                ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+                : theme.colors[theme.primaryColor][0],
+    },
+    header: {
+        position: 'sticky',
+        top: 0,
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+        transition: 'box-shadow 150ms ease',
+
+        '&::after': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderBottom: `1px solid ${
+                theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2]
+            }`,
+        },
+    },
+    scrolled: {
+        boxShadow: theme.shadows.sm,
+    },
+    tableBody: {
+        // '&::before': {
+        //     content: '""',
+        //     display: 'block',
+        //     height: '42px',
+        // },
+    },
+});

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

@@ -0,0 +1,157 @@
+/* eslint-disable prefer-arrow-callback */
+import * as React from 'react';
+import {
+    Group,
+    useMantineTheme,
+    ActionIcon,
+} from '@mantine/core';
+import { useSearchParams } from 'react-router-dom';
+import { useLocalStorage } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { IconAdjustments, IconFilter } from '@tabler/icons';
+import RefreshActionIcon from './Table/RefreshActionIcon';
+import useInfinityScroll from '../../../shared/hooks/useInfinityScroll';
+import TestsTable from './Table/TestsTable';
+import Settings from './Table/Settings';
+import Filter from './Table/Filter';
+import { useNavProgressFetchEffect } from '../../../shared/hooks';
+import { useParams } from '../../hooks/useParams';
+
+interface Props {
+    updateToolbar: any
+}
+
+export default function Tests({ updateToolbar }: Props) {
+    const { query } = useParams();
+
+    const theme = useMantineTheme();
+    // useIndexSubpageEffect('By Runs');
+
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [sortOpen, setSortOpen] = useState(false);
+    const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
+    const baseFilter = query.base_filter ? query.base_filter : {};
+    if (query.app) baseFilter.app = { $oid: query?.app || '' };
+
+    const { firstPageQuery, infinityQuery, newestItemsQuery } = useInfinityScroll({
+        baseFilterObj: baseFilter,
+        filterObj: { ...query.filter, ...query.quick_filter },
+        resourceName: 'tests',
+        newestItemsFilterKey: 'startDate',
+        sortBy: query.sortBy || '',
+    });
+    useNavProgressFetchEffect(infinityQuery.isFetching);
+
+    const [visibleFields, setVisibleFields] = useLocalStorage(
+        {
+            key: 'visibleFields',
+            defaultValue: [
+                '_id',
+                'name',
+                'status',
+                'creatorUsername',
+                'markedAs',
+                'startDate',
+                'browserName',
+                'os',
+                'viewport',
+            ],
+        },
+    );
+
+    useEffect(
+        function addToolbarSortAndSettingsIcons() {
+            updateToolbar(
+                <ActionIcon
+                    title="Table settings, sorting, and columns visibility"
+                    color={theme.colorScheme === 'dark' ? 'green.8' : 'green.6'}
+                    data-test="table-sorting"
+                    variant="subtle"
+                    onClick={() => {
+                        setIsFilterDrawerOpen(false);
+                        setSortOpen((prev) => !prev);
+                    }}
+                >
+                    <IconAdjustments stroke={1} size={24} />
+                </ActionIcon>,
+                48,
+            );
+
+            updateToolbar(
+                <ActionIcon
+                    title="Filter the Table Data"
+                    color={theme.colorScheme === 'dark' ? 'green.8' : 'green.6'}
+                    data-test="table-filtering"
+                    variant="subtle"
+                    onClick={() => {
+                        setSortOpen(false);
+                        setIsFilterDrawerOpen((prev) => !prev);
+                    }}
+                >
+                    <IconFilter size={24} stroke={1} />
+                </ActionIcon>,
+                47,
+            );
+        },
+        [],
+    );
+
+    useEffect(
+        function updateRefreshIcon() {
+            updateToolbar(
+                <RefreshActionIcon
+                    key="reload"
+                    newestItemsQuery={newestItemsQuery}
+                    firstPageQuery={firstPageQuery}
+                    infinityQuery={infinityQuery}
+                />,
+                52,
+            );
+        },
+        [
+            newestItemsQuery?.data?.results.length,
+            newestItemsQuery.status,
+            theme.colorScheme,
+        ],
+    );
+
+    useEffect(
+        function refetchData() {
+            firstPageQuery.refetch();
+        }, [
+            query.base_filter,
+            query.quick_filter,
+            query.filter,
+            query.app,
+            query.sortBy,
+        ],
+    );
+
+    return (
+        <Group position="apart" align="start" noWrap>
+            <TestsTable
+                updateToolbar={updateToolbar}
+                firstPageQuery={firstPageQuery}
+                infinityQuery={infinityQuery}
+                visibleFields={visibleFields}
+                size={(sortOpen || isFilterDrawerOpen) ? '80%' : '100%'}
+            />
+
+            <Settings
+                open={sortOpen}
+                setSortOpen={setSortOpen}
+                visibleFields={visibleFields}
+                setVisibleFields={setVisibleFields}
+                searchParams={searchParams}
+                setSearchParams={setSearchParams}
+            />
+
+            <Filter
+                open={isFilterDrawerOpen}
+                setOpen={setIsFilterDrawerOpen}
+                searchParams={searchParams}
+                setSearchParams={setSearchParams}
+            />
+        </Group>
+    );
+}

package/src/ui-app/index2/hooks/useIndexSubpageEffect.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable indent,react/jsx-indent */
+// import { resetNavigationProgress, stopNavigationProgress } from '@mantine/nprogress';
+// import { useEffect } from 'react';
+// import * as React from 'react';
+//
+// export function useIndexSubpageEffect(title: string) {
+//     useEffect(() => {
+//         return () => {
+//             // clearToolbar();
+//             stopNavigationProgress();
+//             resetNavigationProgress();
+//         };
+//     }, [title]);
+// }

package/src/ui-app/index2/hooks/useNavbarActiveItems.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable prefer-arrow-callback */
+import { useEffect, useState } from 'react';
+import { useParams } from './useParams';
+
+interface Props {
+    groupByValue: string
+    classes: any,
+}
+
+export function useNavbarActiveItems({ groupByValue, classes }: Props) {
+    const { query, setQuery } = useParams();
+    const [activeItems, setActiveItems] = useState<string[]>([]);
+
+    const activeItemsHandler = {
+        get: () => activeItems,
+        addOrRemove: (item: string) => {
+            setActiveItems(
+                (prevItems: any[]) => {
+                    const newItems = [...prevItems];
+                    if (newItems.includes(item)) {
+                        return newItems.filter((x) => x !== item);
+                    }
+                    return newItems.concat(item);
+                },
+            );
+        },
+        clear: () => {
+            setActiveItems(() => []);
+        },
+        set: (items: any) => {
+            setActiveItems(() => items);
+        },
+        navbarItemClass: () => classes.navbarItem,
+        activeNavbarItemClass: () => classes.activeNavbarItem,
+    };
+
+    const baseFilterMap = (
+        {
+            suites: 'suite',
+            runs: 'run',
+            'test-distinct/browserName': 'browserName',
+            'test-distinct/os': 'os',
+            'test-distinct/status': 'status',
+            'test-distinct/markedAs': 'markedAs',
+        }[groupByValue] || groupByValue
+    );
+
+    useEffect(function setActiveItemsFromQueryFirstTime() {
+        if (
+            (query?.base_filter && query?.base_filter[baseFilterMap]?.$in?.length > 0)
+            && (activeItemsHandler.get().length < 1)
+        ) {
+            activeItemsHandler.set(query?.base_filter[baseFilterMap]?.$in);
+        }
+    }, []);
+
+    useEffect(function onActiveItemsChange() {
+        if (activeItemsHandler.get().length > 0) {
+            setQuery({ base_filter: { [baseFilterMap]: { $in: activeItemsHandler.get() } } });
+        } else {
+            setQuery({ base_filter: null });
+        }
+    }, [JSON.stringify(activeItemsHandler.get())]);
+
+    return activeItemsHandler;
+}

package/src/ui-app/index2/hooks/useParams.tsx

@@ -0,0 +1,25 @@
+import { JsonParam, StringParam, useQueryParams } from 'use-query-params';
+
+export function useParams() {
+    const queryConfig = {
+        groupBy: StringParam,
+        sortBy: StringParam,
+        sortByNavbar: StringParam,
+        app: StringParam,
+        filter: JsonParam,
+        base_filter: JsonParam,
+        checkId: StringParam,
+        quick_filter: JsonParam,
+        modalIsOpen: StringParam,
+    };
+    const [query, setQuery] = useQueryParams(queryConfig);
+    const updateQueryJsonParam = (section: string, key: string, value: string) => {
+        const current = query[section as keyof typeof query];
+        const newParam = {
+            ...current,
+            [key]: value,
+        };
+        setQuery({ [section]: (newParam) });
+    };
+    return { query, setQuery, updateQueryJsonParam, queryConfig };
+}

package/src/ui-app/index2/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en" style="height: 100%">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../asserts/css/styles.css">
+    <link rel="icon" href="/asserts/images/favicon.svg">
+    <title>Syngrisi</title>
+</head>
+<div></div>
+<body style="overflow-y: hidden">
+<div id="root" style="position: relative; height: 100%"></div>
+<script type="module" src="./main.tsx"></script>
+</body>
+</html>

package/src/ui-app/index2/main.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { parse, stringify } from 'query-string';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '../shared/components/errors/ErrorFallback';
+
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+        <ErrorBoundary
+            FallbackComponent={ErrorFallback}
+            onReset={() => {
+                // reset the state of your app so the error doesn't happen again
+            }}
+        >
+            <BrowserRouter>
+                <QueryParamProvider
+                    adapter={ReactRouter6Adapter}
+                    options={{
+                        searchStringToObject: parse,
+                        objectToSearchString: stringify,
+                    }}
+                >
+                    <App />
+                </QueryParamProvider>
+            </BrowserRouter>
+        </ErrorBoundary>
+    </React.StrictMode>,
+);