@cccsaurora/howler-ui 2.12.0-dev.168

package/components/hooks/useMySearch.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Box, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import HitQuickSearch from '@cccsaurora/howler-ui/components/elements/hit/HitQuickSearch';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { useMyLocalStorageItem } from './useMyLocalStorage';
+const useMySearch = () => {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    return useMemo(() => ({
+        onEnter: async (value, state) => {
+            state.set({ ...state, searching: true });
+            //dispatchApi not available here since snackbarProvider isn't initialised yet
+            try {
+                const sanitizedValue = sanitizeLuceneQuery(value);
+                const searchResult = await api.search.hit.post({
+                    offset: 0,
+                    rows: pageCount,
+                    query: `howler.assignment:*${sanitizedValue}* OR howler.analytic:*${sanitizedValue}* OR ` +
+                        `howler.detection:*${sanitizedValue}* OR howler.status:*${sanitizedValue}*`
+                });
+                state.set({
+                    ...state,
+                    searching: false,
+                    result: null,
+                    items: searchResult.items.map(r => ({ id: r.howler.id, item: r }))
+                });
+            }
+            catch {
+                state.set({ ...state, searching: false, result: { error: true }, items: null });
+            }
+        },
+        onItemSelect: ({ item }) => {
+            navigate(`/hits/${item.howler.id}`);
+        },
+        headerRenderer: (state) => (state.result?.error || !state.items) && (_jsx(Box, { sx: { p: 1, pb: 0, textAlign: 'center' }, children: state.result?.error ? (_jsx(Alert, { severity: "error", color: "error", children: t('hit.search.invalid') })) : ((!state.items || state.items.length === 0) && (_jsx(Typography, { sx: { mb: -1, color: 'text.secondary' }, children: t('hit.quicksearch') }))) })),
+        itemRenderer: (item, options) => {
+            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitQuickSearch, { hit: item.item, options: options }) }));
+        }
+    }), [navigate, pageCount, t]);
+};
+export default useMySearch;

package/components/hooks/useMySitemap.d.ts

@@ -0,0 +1,3 @@
+import type { AppSiteMapConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+declare const useMySitemap: () => AppSiteMapConfigs;
+export default useMySitemap;

package/components/hooks/useMySitemap.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Article, Book, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+// SiteMapContextProps configuration properties.
+// exceptLast: boolean = false (default) -> render all breadcrumb except the current route.
+// allLinks: boolean = false (default) -> render all breadcrumbs as links.
+// lastOnly: boolean = false (default) -> only render the current route.
+// itemsBefore: number = 1 (default) -> the number of items to show before the ellipsis.
+// itemsAfter: number = 1 (default) -> the number of items to show after the ellipsis.
+// routes: SiteMapRoute[] = [] (default) -> the list of routes that will define the application sitemap.
+// For each individual SiteMapRoute:
+// path: string -> the react router path to this route.
+// title: string -> the title/lable to display in breadcrumbs for this route.
+// icon?: React.ReactNode -> the icon component to show beside the title/lable.
+// isRoot?: boolean = false -> when true, indicates that the breadcrumbs will reset to this one path each time it is encountered.
+// isLeaf?: boolean = false -> when true, indicates that this path does not aggregate in breadcrumbs, i.e. will be replaced by next path.
+// excluded?: boolean = false -> when true, indicates to breadcrumbs component to not render this route.
+// breadcrumbs?: string[] -> a static list of breadcrumb paths to be rendered for the given route.
+// textWidth?: number -> the max width of the text when rendering the breadcrumb.
+const useMySitemap = () => {
+    const { t } = useTranslation();
+    return useMemo(() => ({
+        routes: [
+            { path: '/', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
+            { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: _jsx(PersonSearch, {}) },
+            {
+                path: '/admin/users/:id',
+                title: t('route.admin.user.details'),
+                isLeaf: true,
+                breadcrumbs: ['/admin/users'],
+                icon: _jsx(Person, {})
+            },
+            { path: '/help', title: t('route.help'), isRoot: true, icon: _jsx(Help, {}) },
+            { path: '/help/api', title: t('route.help.api'), isLeaf: true, icon: _jsx(Storage, {}), breadcrumbs: ['/help'] },
+            { path: '/help/search', title: t('route.help.search'), isLeaf: true, icon: _jsx(Search, {}), breadcrumbs: ['/help'] },
+            {
+                path: '/help/client',
+                title: t('route.help.client'),
+                isLeaf: true,
+                icon: _jsx(Terminal, {}),
+                breadcrumbs: ['/help']
+            },
+            { path: '/help/auth', title: t('route.help.auth'), isLeaf: true, icon: _jsx(Key, {}), breadcrumbs: ['/help'] },
+            {
+                path: '/help/actions',
+                title: t('route.help.actions'),
+                isLeaf: true,
+                icon: _jsx(SettingsSuggest, {}),
+                breadcrumbs: ['/help']
+            },
+            { path: '/help/hit', title: t('route.help.hit'), isLeaf: true, icon: _jsx(Shield, {}), breadcrumbs: ['/help'] },
+            {
+                path: '/help/templates',
+                title: t('route.help.templates'),
+                isLeaf: true,
+                icon: _jsx(FormatListBulleted, {}),
+                breadcrumbs: ['/help']
+            },
+            {
+                path: '/help/overviews',
+                title: t('route.help.overviews'),
+                isLeaf: true,
+                icon: _jsx(Article, {}),
+                breadcrumbs: ['/help']
+            },
+            {
+                path: '/help/views',
+                title: t('route.help.views'),
+                isLeaf: true,
+                icon: _jsx(SavedSearch, {}),
+                breadcrumbs: ['/help']
+            },
+            {
+                path: '/help/retention',
+                title: t('route.help.retention'),
+                isLeaf: true,
+                icon: _jsx(Book, {}),
+                breadcrumbs: ['/help']
+            },
+            {
+                path: '/help/notebook',
+                title: t('route.help.notebook'),
+                isLeaf: true,
+                icon: _jsx(Description, {}),
+                breadcrumbs: ['/help']
+            },
+            { path: '/hits', title: t('route.hits'), isRoot: true, icon: _jsx(Search, {}) },
+            { path: '/search', title: t('route.search'), isRoot: true, icon: _jsx(Search, {}) },
+            { path: '/views', title: t('route.views'), isRoot: true, icon: _jsx(SavedSearch, {}) },
+            { path: '/views/create', title: t('route.views.create'), isRoot: true, icon: _jsx(SavedSearch, {}) },
+            {
+                path: '/views/:id',
+                title: t('route.views.show'),
+                isRoot: true,
+                icon: _jsx(SavedSearch, {})
+            },
+            {
+                path: '/views/:id/edit',
+                title: t('route.views.edit'),
+                isLeaf: true,
+                breadcrumbs: ['/views'],
+                icon: _jsx(Edit, {})
+            },
+            {
+                path: '/bundles/:id',
+                title: t('route.hits.bundle'),
+                isLeaf: true,
+                icon: _jsx(Work, {})
+            },
+            {
+                path: '/hits/:id',
+                title: t('route.hits.view'),
+                isLeaf: true,
+                breadcrumbs: ['/hits'],
+                icon: _jsx(Info, {})
+            },
+            {
+                path: '/templates',
+                title: t('route.templates'),
+                isRoot: true,
+                icon: _jsx(FormatListBulleted, {})
+            },
+            {
+                path: '/overviews',
+                title: t('route.overviews'),
+                isRoot: true,
+                icon: _jsx(Article, {})
+            },
+            {
+                path: '/dossiers',
+                title: t('route.dossiers'),
+                isRoot: true,
+                icon: _jsx(Topic, {})
+            },
+            {
+                path: '/dossiers/create',
+                title: t('route.dossiers.create'),
+                isRoot: true,
+                breadcrumbs: ['/dossiers'],
+                icon: _jsx(CreateNewFolder, {})
+            },
+            {
+                path: '/dossiers/:id/edit',
+                title: t('route.dossiers.edit'),
+                isLeaf: true,
+                breadcrumbs: ['/dossiers'],
+                icon: _jsx(Edit, {})
+            },
+            {
+                path: '/templates/view',
+                title: t('route.templates.view'),
+                breadcrumbs: ['/templates'],
+                isLeaf: true,
+                icon: _jsx(FormatListBulleted, {})
+            },
+            {
+                path: '/overviews/view',
+                title: t('route.overviews.view'),
+                breadcrumbs: ['/overviews'],
+                isLeaf: true,
+                icon: _jsx(Article, {})
+            },
+            {
+                path: '/analytics',
+                title: t('route.analytics'),
+                isRoot: true,
+                icon: _jsx(QueryStats, {})
+            },
+            {
+                path: '/action',
+                title: t('route.actions'),
+                isRoot: true,
+                icon: _jsx(Terminal, {})
+            },
+            {
+                path: '/action/integrations',
+                title: t('route.integrations'),
+                isRoot: true,
+                breadcrumbs: ['/action']
+            },
+            {
+                path: '/action/execute',
+                title: t('route.actions.create'),
+                isRoot: true,
+                breadcrumbs: ['/action'],
+                icon: _jsx(EditNote, {})
+            },
+            {
+                path: '/action/:id',
+                title: t('route.actions.view'),
+                isRoot: true,
+                breadcrumbs: ['/action']
+            },
+            {
+                path: '/action/:id/edit',
+                title: t('route.actions.edit'),
+                isRoot: true,
+                breadcrumbs: ['/action'],
+                icon: _jsx(Edit, {})
+            },
+            {
+                path: '/analytics/:id',
+                title: t('route.analytics.view'),
+                isLeaf: true,
+                breadcrumbs: ['/analytics'],
+                icon: _jsx(Info, {})
+            },
+            { path: '/home', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
+            { path: '/settings', title: t('page.settings.sitemap'), isRoot: true, icon: _jsx(Settings, {}) },
+            { path: '/advanced', title: t('route.advanced'), isRoot: true, icon: _jsx(Code, {}) }
+        ]
+    }), [t]);
+};
+export default useMySitemap;

package/components/hooks/useMySnackbar.d.ts

@@ -0,0 +1,8 @@
+import type { OptionsObject, SnackbarMessage } from 'notistack';
+declare const useMySnackbar: () => {
+    showErrorMessage: (message: SnackbarMessage, timeout?: number, options?: OptionsObject) => import("notistack").SnackbarKey;
+    showWarningMessage: (message: SnackbarMessage, timeout?: number, options?: OptionsObject) => import("notistack").SnackbarKey;
+    showSuccessMessage: (message: SnackbarMessage, timeout?: number, options?: OptionsObject) => import("notistack").SnackbarKey;
+    showInfoMessage: (message: SnackbarMessage, timeout?: number, options?: OptionsObject) => import("notistack").SnackbarKey;
+};
+export default useMySnackbar;

package/components/hooks/useMySnackbar.js

@@ -0,0 +1,47 @@
+import { useSnackbar } from 'notistack';
+import { useCallback, useMemo } from 'react';
+const useMySnackbar = () => {
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+    const snackBarOptions = useMemo(() => ({
+        preventDuplicate: true,
+        anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right'
+        },
+        SnackbarProps: {
+            onClick: () => {
+                closeSnackbar();
+            }
+        }
+    }), [closeSnackbar]);
+    const enqueue = useCallback((variant) => (message, timeout = 5000, options = {}) => enqueueSnackbar(message, {
+        variant,
+        autoHideDuration: timeout,
+        ...snackBarOptions,
+        ...options,
+        SnackbarProps: {
+            ...(options.SnackbarProps ?? {}),
+            onClick: options.SnackbarProps?.onClick
+                ? e => {
+                    options.SnackbarProps?.onClick(e);
+                    snackBarOptions.SnackbarProps.onClick(e);
+                }
+                : snackBarOptions.SnackbarProps.onClick
+        }
+    }), [enqueueSnackbar, snackBarOptions]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const showErrorMessage = useCallback(enqueue('error'), [enqueue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const showWarningMessage = useCallback(enqueue('warning'), [enqueue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const showSuccessMessage = useCallback(enqueue('success'), [enqueue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const showInfoMessage = useCallback(enqueue('info'), [enqueue]);
+    return useMemo(() => ({
+        showErrorMessage,
+        showWarningMessage,
+        showSuccessMessage,
+        showInfoMessage
+    }), [showErrorMessage, showInfoMessage, showSuccessMessage, showWarningMessage]);
+};
+export default useMySnackbar;

package/components/hooks/useMyTheme.d.ts

@@ -0,0 +1,3 @@
+import type { AppThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+declare const useMyTheme: () => AppThemeConfigs;
+export default useMyTheme;

package/components/hooks/useMyTheme.js

@@ -0,0 +1,30 @@
+const DEFAULT_THEME = {
+    palette: {
+        dark: {
+            background: {
+                default: '#202020',
+                paper: '#202020'
+            },
+            primary: {
+                main: '#7DA1DB'
+            },
+            secondary: {
+                main: '#C0DEEC'
+            }
+        },
+        light: {
+            primary: {
+                main: '#0062BF'
+            },
+            secondary: {
+                main: '#619CB7'
+            }
+        }
+    }
+};
+const useMyTheme = () => {
+    // return LEGACY_THEME;
+    // return DARK_BLUE_THEME;
+    return DEFAULT_THEME;
+};
+export default useMyTheme;

package/components/hooks/useMyUser.d.ts

@@ -0,0 +1,4 @@
+import type { AppUserService } from '@cccsaurora/howler-ui/commons/components/app/AppUserService';
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+declare const useMyUser: () => AppUserService<HowlerUser>;
+export default useMyUser;

package/components/hooks/useMyUser.js

@@ -0,0 +1,27 @@
+import { difference } from 'lodash-es';
+import { useCallback, useMemo, useState } from 'react';
+// Application specific hook that will provide configuration to commons [useUser] hook.
+const useMyUser = () => {
+    const [user, setUser] = useState(null);
+    const isReady = useCallback(() => !!user, [user]);
+    const validateProps = useCallback((props) => {
+        if (props === undefined)
+            return true;
+        return props.every((propDef) => {
+            if (Array.isArray(user[propDef.prop])) {
+                return difference(propDef.value, user[propDef.prop]).length <= 0;
+            }
+            else {
+                return user[propDef.prop] === propDef.value;
+            }
+        });
+    }, [user]);
+    // We memoize the user config object to prevent unnecessary updates to user provider value.
+    return useMemo(() => ({
+        user,
+        setUser,
+        isReady,
+        validateProps
+    }), [user, setUser, isReady, validateProps]);
+};
+export default useMyUser;

package/components/hooks/useMyUserFunctions.d.ts

@@ -0,0 +1,118 @@
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+declare const useMyUserFunctions: () => {
+    editName: (user: HowlerUser, name: string) => Promise<{
+        name: string;
+        email: string;
+        username: string;
+        api_quota?: number;
+        classification?: string;
+        apikeys?: [string, string[], string][];
+        groups?: string[];
+        roles?: string[];
+        type: string[];
+        has_password?: boolean;
+        is_active?: boolean;
+        favourite_views?: string[];
+        favourite_analytics?: string[];
+        dashboard?: {
+            entry_id: string;
+            type: "view" | "analytic";
+            config: string;
+        }[];
+        avatar?: string;
+        is_admin?: boolean;
+    }>;
+    editQuota: (user: HowlerUser, quota: string) => Promise<{
+        api_quota: number;
+        name: string;
+        email: string;
+        username: string;
+        classification?: string;
+        apikeys?: [string, string[], string][];
+        groups?: string[];
+        roles?: string[];
+        type: string[];
+        has_password?: boolean;
+        is_active?: boolean;
+        favourite_views?: string[];
+        favourite_analytics?: string[];
+        dashboard?: {
+            entry_id: string;
+            type: "view" | "analytic";
+            config: string;
+        }[];
+        avatar?: string;
+        is_admin?: boolean;
+    }>;
+    editPassword: (new_pass: string) => Promise<void>;
+    addRole: (user: HowlerUser, role: string) => Promise<{
+        roles: string[];
+        name: string;
+        email: string;
+        username: string;
+        api_quota?: number;
+        classification?: string;
+        apikeys?: [string, string[], string][];
+        groups?: string[];
+        type: string[];
+        has_password?: boolean;
+        is_active?: boolean;
+        favourite_views?: string[];
+        favourite_analytics?: string[];
+        dashboard?: {
+            entry_id: string;
+            type: "view" | "analytic";
+            config: string;
+        }[];
+        avatar?: string;
+        is_admin?: boolean;
+    }>;
+    addApiKey: () => void;
+    removeRole: (user: HowlerUser, role: string) => Promise<{
+        roles: string[];
+        name: string;
+        email: string;
+        username: string;
+        api_quota?: number;
+        classification?: string;
+        apikeys?: [string, string[], string][];
+        groups?: string[];
+        type: string[];
+        has_password?: boolean;
+        is_active?: boolean;
+        favourite_views?: string[];
+        favourite_analytics?: string[];
+        dashboard?: {
+            entry_id: string;
+            type: "view" | "analytic";
+            config: string;
+        }[];
+        avatar?: string;
+        is_admin?: boolean;
+    }>;
+    removeApiKey: (user: HowlerUser, apiKey: [string, string[]]) => Promise<{
+        apikeys: [string, string[], string][];
+        name: string;
+        email: string;
+        username: string;
+        api_quota?: number;
+        classification?: string;
+        groups?: string[];
+        roles?: string[];
+        type: string[];
+        has_password?: boolean;
+        is_active?: boolean;
+        favourite_views?: string[];
+        favourite_analytics?: string[];
+        dashboard?: {
+            entry_id: string;
+            type: "view" | "analytic";
+            config: string;
+        }[];
+        avatar?: string;
+        is_admin?: boolean;
+    }>;
+    viewGroups: () => Promise<void>;
+    setDashboard: (dashboard: HowlerUser["dashboard"]) => Promise<void>;
+};
+export default useMyUserFunctions;

package/components/hooks/useMyUserFunctions.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import ApiKeyDrawer from '@cccsaurora/howler-ui/components/app/drawers/ApiKeyDrawer';
+import ViewGroupsDrawer from '@cccsaurora/howler-ui/components/app/drawers/ViewGroupsDrawer';
+import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
+import { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import useMyApi from './useMyApi';
+import useMySnackbar from './useMySnackbar';
+const useMyUserFunctions = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { showSuccessMessage } = useMySnackbar();
+    const { dispatchApi } = useMyApi();
+    const { showModal } = useContext(ModalContext);
+    const drawer = useContext(AppDrawerContext);
+    const { user: currentUser, setUser } = useAppUser();
+    return {
+        editName: useCallback(async (user, name) => {
+            await dispatchApi(api.user.put(user.username, { name }), { throwError: true, showError: true });
+            showSuccessMessage(t('@cccsaurora/howler-ui/api.user.name.updated'));
+            return {
+                ...user,
+                name
+            };
+        }, [dispatchApi, showSuccessMessage, t]),
+        editQuota: useCallback(async (user, quota) => {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const api_quota = parseInt(quota);
+            await dispatchApi(api.user.put(user.username, { api_quota }), { throwError: true });
+            showSuccessMessage(t('@cccsaurora/howler-ui/api.user.quota.updated'));
+            return {
+                ...user,
+                api_quota
+            };
+        }, [dispatchApi, showSuccessMessage, t]),
+        editPassword: useCallback(async (new_pass) => {
+            await dispatchApi(api.user.put(currentUser.username, { new_pass }), {
+                throwError: true,
+                showError: true
+            });
+            showSuccessMessage(t('password.success'));
+            setTimeout(() => {
+                navigate('/logout');
+            }, 5000);
+        }, [currentUser.username, dispatchApi, navigate, showSuccessMessage, t]),
+        addRole: useCallback(async (user, role) => {
+            const newRoles = [...user.roles, role];
+            await dispatchApi(api.user.put(user.username, { type: newRoles }), {
+                throwError: true,
+                showError: true
+            });
+            showSuccessMessage(t('@cccsaurora/howler-ui/api.user.role.updated'));
+            return {
+                ...user,
+                roles: newRoles
+            };
+        }, [dispatchApi, showSuccessMessage, t]),
+        addApiKey: useCallback(() => {
+            drawer.open({
+                titleKey: 'app.drawer.user.apikey.title',
+                children: (_jsx(ApiKeyDrawer, { onCreated: (newKeyName, privs, expiryDate) => {
+                        setUser({
+                            ...currentUser,
+                            apikeys: [...currentUser.apikeys, [newKeyName, privs, expiryDate]]
+                        });
+                        showSuccessMessage(t('@cccsaurora/howler-ui/api.user.apikey.updated'));
+                    } }))
+            });
+        }, [currentUser, drawer, setUser, showSuccessMessage, t]),
+        removeRole: useCallback(async (user, role) => {
+            const newRoles = user.roles.filter(r => r !== role);
+            await dispatchApi(api.user.put(user.username, { type: user.roles.filter(r => r !== role) }), {
+                throwError: true,
+                showError: true
+            });
+            showSuccessMessage(t('@cccsaurora/howler-ui/api.user.role.updated'));
+            return {
+                ...user,
+                roles: newRoles
+            };
+        }, [dispatchApi, showSuccessMessage, t]),
+        removeApiKey: useCallback(async (user, apiKey) => {
+            await new Promise(res => {
+                showModal(_jsx(ConfirmDeleteModal, { onConfirm: res }));
+            });
+            await dispatchApi(api.auth.apikey.del(apiKey[0]), { throwError: true });
+            showSuccessMessage(t('@cccsaurora/howler-ui/api.user.apikey.removed'));
+            return {
+                ...user,
+                apikeys: user.apikeys.filter(([name, _]) => name !== apiKey[0])
+            };
+        }, [dispatchApi, showModal, showSuccessMessage, t]),
+        viewGroups: useCallback(async () => {
+            const groups = await dispatchApi(api.user.groups.get());
+            drawer.open({
+                titleKey: 'app.drawer.user.groups.title',
+                children: _jsx(ViewGroupsDrawer, { groups: groups })
+            });
+        }, [dispatchApi, drawer]),
+        setDashboard: useCallback(async (dashboard) => {
+            await dispatchApi(api.user.put(currentUser.username, { dashboard }), {
+                throwError: true,
+                showError: true
+            });
+        }, [currentUser.username, dispatchApi])
+    };
+};
+export default useMyUserFunctions;

package/components/hooks/useMyUserList.d.ts

@@ -0,0 +1,4 @@
+declare const useMyUserList: (ids: Set<string>) => {
+    [id: string]: import("../../models/entities/HowlerUser").HowlerUser;
+};
+export default useMyUserList;

package/components/hooks/useMyUserList.js

@@ -0,0 +1,11 @@
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { useContext, useEffect } from 'react';
+const useMyUserList = (ids) => {
+    const { users, fetchUsers } = useContext(UserListContext);
+    useEffect(() => {
+        fetchUsers(ids);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ids]);
+    return users;
+};
+export default useMyUserList;

package/components/hooks/useMyUtils.d.ts

@@ -0,0 +1,4 @@
+declare const useMyUtils: () => {
+    shiftColor: (color: string, coefficient: number) => string;
+};
+export default useMyUtils;

package/components/hooks/useMyUtils.js

@@ -0,0 +1,10 @@
+import { darken, lighten } from '@mui/material';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useCallback } from 'react';
+const useMyUtils = () => {
+    const { isDark } = useAppTheme();
+    return {
+        shiftColor: useCallback((color, coefficient) => (isDark ? darken : lighten)(color, coefficient), [isDark])
+    };
+};
+export default useMyUtils;

package/components/hooks/useScrollRestoration.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Currently, the react-router scrollrestoration component only works at the window level.
+ * This implementation handle it at the element level, use it in the route that requires it.
+ * Inspired from https://github.com/remix-run/react-router/pull/10468
+ * Possible this won't work on a remix project.
+ */
+export declare const useScrollRestoration: (element?: string) => void;