npm - @syngrisi/syngrisi - Versions diffs - 2.2.1 - Mend

@syngrisi/syngrisi 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (387) hide show

package/src/ui-app/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Vite Stub Page</title>
+</head>
+<body style="max-width: 700px; margin-left: 50px; font-size: large; font-weight: 400">
+<div id="root"></div>
+<script type="module" src="./stub.tsx"></script>
+</body>
+</html>

package/src/ui-app/index2/App.tsx ADDED Viewed

@@ -0,0 +1,162 @@
+/* eslint-disable max-len */
+import * as React from 'react';
+import {
+    ColorSchemeProvider,
+    MantineProvider,
+    useMantineTheme,
+} from '@mantine/core';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Route, Routes, useNavigate } from 'react-router-dom';
+import { NavigationProgress } from '@mantine/nprogress';
+import { NotificationsProvider } from '@mantine/notifications';
+import { IconFilter, IconMoonStars, IconSearch, IconSun } from '@tabler/icons';
+import { SpotlightProvider } from '@mantine/spotlight';
+import config from '../config';
+import IndexLayout from './IndexLayout';
+import useColorScheme from '../shared/hooks/useColorSheme';
+import { navigationData } from '../shared/navigation/navigationData';
+import { INavDataItem } from '../shared/navigation/interfaces';
+import { useParams } from './hooks/useParams';
+const queryClient = new QueryClient();
+function App() {
+    const theme = useMantineTheme();
+    const { setQuery } = useParams();
+    const [colorScheme, toggleColorScheme]: any = useColorScheme();
+    const navigate = useNavigate();
+    const spotlightActions = navigationData().map((item: INavDataItem) => ({
+        ...item,
+        onTrigger: () => {
+            setTimeout(
+                () => {
+                    window.location.reload();
+                },
+                100,
+            );
+            navigate(item.crumbs.slice(-1)[0].href);
+        },
+    }));
+    spotlightActions.push(
+        {
+            title: `Switch to ${colorScheme === 'dark' ? 'light' : 'dark'} theme`,
+            description: 'Toggle color theme',
+            onTrigger: () => toggleColorScheme(),
+            icon: colorScheme === 'dark'
+                ? <IconSun size={18} color={theme.colors.yellow[4]} />
+                : <IconMoonStars color={theme.colors.blue[6]} size={18} />,
+        } as any,
+    );
+    spotlightActions.push(
+        {
+            title: 'Filter: only successful tests',
+            description: 'Show only New and Passed tests',
+            onTrigger: () => {
+                setQuery(
+                    {
+                        filter: { $or: [{ status: { $eq: 'Passed' } }, { status: { $eq: 'New' } }] },
+                    },
+                );
+            },
+            icon: <IconFilter size={18} />,
+        } as any,
+    );
+    spotlightActions.push(
+        {
+            title: 'Filter: only failed tests',
+            description: 'Show only Failed tests',
+            onTrigger: () => {
+                setQuery(
+                    {
+                        filter: { $or: [{ status: { $eq: 'Failed' } }] },
+                    },
+                );
+            },
+            icon: <IconFilter size={18} />,
+        } as any,
+    );
+    spotlightActions.push(
+        {
+            title: 'Filter: not accepted tests',
+            description: 'Show all tests with Unaccepted and Partially accepted status',
+            onTrigger: () => {
+                setQuery(
+                    {
+                        filter: { $or: [{ markedAs: { $eq: 'Unaccepted' } }, { status: { $eq: 'Partially' } }] },
+                    },
+                );
+            },
+            icon: <IconFilter size={18} />,
+        } as any,
+    );
+    spotlightActions.push(
+        {
+            title: 'Filter: accepted tests',
+            description: 'Show all tests with Accepted status',
+            onTrigger: () => {
+                setQuery(
+                    {
+                        filter: { $or: [{ markedAs: { $eq: 'Accepted' } }] },
+                    },
+                );
+            },
+            icon: <IconFilter size={18} />,
+        } as any,
+    );
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ColorSchemeProvider
+                colorScheme={colorScheme as any}
+                toggleColorScheme={toggleColorScheme as any}
+            >
+                <MantineProvider
+                    withGlobalStyles
+                    withNormalizeCSS
+                    theme={{
+                        fontSizes: { md: 24 },
+                        colorScheme,
+                        primaryColor: 'green',
+                        breakpoints: {
+                            xs: 500,
+                            sm: 800,
+                            md: 1000,
+                            lg: 1200,
+                            xl: 1400,
+                        },
+                    }}
+                >
+                    <SpotlightProvider
+                        actions={spotlightActions}
+                        highlightQuery
+                        searchIcon={<IconSearch size={18} />}
+                        limit={10}
+                        searchPlaceholder="Search..."
+                        shortcut={['mod + k', 'mod + K']}
+                        nothingFoundMessage="Nothing found..."
+                    >
+                        <NotificationsProvider autoClose={5000} limit={5}>
+                            <NavigationProgress />
+                            <Routes>
+                                <Route path={config.indexRoute} element={<IndexLayout />} />
+                            </Routes>
+                        </NotificationsProvider>
+                    </SpotlightProvider>
+                </MantineProvider>
+            </ColorSchemeProvider>
+        </QueryClientProvider>
+    );
+}
+export default App;

package/src/ui-app/index2/AppContext.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const AppContext = createContext({});

package/src/ui-app/index2/IndexLayout.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { AppShell } from '@mantine/core';
+import * as React from 'react';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState } from 'react';
+import HeaderIndex from './components/Header/HeaderIndex';
+import NavBarIndex from './components/Navbar/NavbarIndex';
+import Tests from './components/Tests/Tests';
+export default function IndexLayout() {
+    const [breadCrumbs, setBreadCrumbs] = useState<any>([]);
+    const [toolbar, setToolbar]: [any[], any] = useState([]);
+    const updateToolbar = (newItem: any, index: number = 0) => {
+        setToolbar((prevArr: any[]) => {
+            const newArray = [...prevArr];
+            newArray[index] = <React.Fragment key={index}>{newItem}</React.Fragment>;
+            return newArray;
+        });
+    };
+    return (
+        <AppShell
+            padding={8}
+            navbar={<NavBarIndex setBreadCrumbs={setBreadCrumbs} />}
+            header={<HeaderIndex breadCrumbs={breadCrumbs} toolbar={toolbar} />}
+            styles={(theme) => ({
+                main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] },
+            })}
+        >
+            <Tests updateToolbar={updateToolbar} />
+            <ReactQueryDevtools initialIsOpen={false} />
+        </AppShell>
+    );
+}

package/src/ui-app/index2/components/Header/HeaderIndex.tsx ADDED Viewed

@@ -0,0 +1,248 @@
+/* eslint-disable no-underscore-dangle */
+import {
+    Breadcrumbs,
+    Container,
+    Group,
+    Header,
+    Kbd,
+    Paper,
+    Button,
+    Text,
+    useMantineTheme,
+} from '@mantine/core';
+import * as React from 'react';
+import { useLocalStorage, useOs } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons';
+import { createStyles } from '@mantine/styles';
+import { useEffect } from 'react';
+import { openSpotlight } from '@mantine/spotlight';
+import { useQuery } from '@tanstack/react-query';
+import HeaderLogo from '../../../shared/components/Header/HeaderLogo';
+import { errorMsg } from '../../../shared/utils';
+import UserMenu from '../../../shared/components/Header/UserMenu';
+import { links } from '../../../shared/components/heaserLinks';
+import SafeSelect from '../../../shared/components/SafeSelect';
+import { GenericService } from '../../../shared/services';
+import { useParams } from '../../hooks/useParams';
+import { QuickFilter } from './QuickFilter';
+const useStyles = createStyles((theme) => ({
+    quickFilter: {
+        '@media (max-width: 1024px)': {
+            display: 'none',
+        },
+    },
+    header: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        marginBottom: 120,
+    },
+    inner: {
+        height: 56,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
+    },
+    links: {
+        [theme.fn.smallerThan('md')]: {
+            display: 'none',
+        },
+    },
+    search: {
+        [theme.fn.smallerThan('xs')]: {
+            display: 'none',
+        },
+    },
+    link: {
+        display: 'block',
+        lineHeight: 1,
+        padding: '8px 12px',
+        borderRadius: theme.radius.sm,
+        textDecoration: 'none',
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+        fontSize: theme.fontSizes.sm,
+        fontWeight: 500,
+        '&:hover': {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        },
+    },
+    subheader: {
+        height: 42,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        // paddingLeft: 25,
+    },
+    spotLight: {
+        minWidth: 200,
+        display: 'flex',
+        paddingLeft: 12,
+        paddingRight: 8,
+        backgroundColor: theme.colorScheme === 'dark'
+            ? theme.colors.dark[6]
+            : theme.colors.gray[0],
+        '&:hover': {
+            backgroundColor: theme.colorScheme === 'dark'
+                ? theme.colors.dark[6]
+                : theme.colors.gray[0],
+        },
+    },
+}));
+interface Props {
+    breadCrumbs: any
+    toolbar: any
+}
+export default function HeaderIndex({ breadCrumbs, toolbar }: Props) {
+    const theme = useMantineTheme();
+    const { classes } = useStyles();
+    // eslint-disable-next-line no-unused-vars
+    const headerLinks = links.map((link) => (
+        <a
+            key={link.label}
+            href={link.link}
+            className={classes.link}
+        >
+            {link.label}
+        </a>
+    ));
+    const [
+        currentProjectLS,
+        setCurrentProjectLS,
+    ] = useLocalStorage(
+        {
+            key: 'currentProject',
+            defaultValue: '',
+        },
+    );
+    const projectsQuery = useQuery(
+        ['projects'],
+        () => GenericService.get(
+            'app',
+            {},
+            {
+                limit: '0',
+            },
+        ),
+        {
+            enabled: true,
+            staleTime: Infinity,
+            refetchOnWindowFocus: false,
+            onError: (e) => {
+                errorMsg({ error: e });
+            },
+        },
+    );
+    let projectSelectData: any = [];
+    if (projectsQuery.data) {
+        projectSelectData = projectsQuery.data?.results.map((item) => ({
+            value: item._id,
+            label: item.name,
+        }));
+    }
+    const projectSelectHandler = (value: string) => {
+        setCurrentProjectLS(() => value);
+    };
+    const { setQuery } = useParams();
+    useEffect(() => {
+        setQuery({ app: currentProjectLS });
+    }, [currentProjectLS]);
+    return (
+        <Header
+            height={100}
+            className={classes.header}
+        >
+            <Container className={classes.inner} fluid>
+                <Group>
+                    <Group>
+                        {/* <Burger opened={opened} onClick={toggle} size="sm" /> */}
+                        <HeaderLogo />
+                    </Group>
+                </Group>
+                <Group>
+                    {/* <Group ml={50} spacing={5} className={classes.links}> */}
+                    {/*    {headerLinks} */}
+                    {/* </Group> */}
+                    <Group spacing="sm">
+                        <Text size="sm">Project:</Text>
+                        <SafeSelect
+                            searchable
+                            clearable
+                            placeholder="Enter Project Name"
+                            variant="unstyled"
+                            data-test="current-project"
+                            sx={{
+                                minWidth: '150px',
+                                borderWidth: '0px 0 1px 0',
+                                borderStyle: 'solid',
+                                borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],
+                            }}
+                            styles={{
+                                input: { paddingRight: '20px' },
+                            }}
+                            value={currentProjectLS || ''}
+                            onChange={projectSelectHandler}
+                            optionsData={projectSelectData}
+                        />
+                    </Group>
+                    <Button
+                        onClick={() => openSpotlight()}
+                        variant="default"
+                        className={classes.spotLight}
+                        data-test="spotlight-button"
+                    >
+                        <Group position="apart" sx={{ minWidth: 200 }}>
+                            <Group>
+                                <IconSearch size={16} stroke={1} />
+                                <Text color="dimmed" weight={400}>Search</Text>
+                            </Group>
+                            <Kbd
+                                sx={{ fontSize: 11, borderBottomWidth: 1 }}
+                            >
+                                {
+                                    useOs() === 'macos'
+                                        ? (<>⌘ + K</>)
+                                        : (<>Ctrl + K</>)
+                                }
+                            </Kbd>
+                        </Group>
+                    </Button>
+                    <Group spacing={7}>
+                        <UserMenu />
+                    </Group>
+                </Group>
+            </Container>
+            <Paper shadow="">
+                <Container className={classes.subheader} fluid>
+                    <Group>
+                        <Group sx={{ paddingLeft: 16, width: 350 }}>
+                            <Breadcrumbs data-test="bread-crumbs">{breadCrumbs}</Breadcrumbs>
+                        </Group>
+                        <Group>
+                            <QuickFilter />
+                        </Group>
+                    </Group>
+                    <Group spacing={4} mr="md" position="right" noWrap>
+                        {toolbar}
+                    </Group>
+                </Container>
+            </Paper>
+        </Header>
+    );
+}