@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/hooks/useMySearch.tsx

@@ -1,77 +0,0 @@
-import { Alert, Box, Typography } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { AppSearchServiceState } from '@cccsaurora/howler-ui/commons/components/app/AppContexts';
-import type { AppSearchService } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
-import HitQuickSearch from '@cccsaurora/howler-ui/components/elements/hit/HitQuickSearch';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-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 = (): AppSearchService<Hit> => {
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-
-  return useMemo(
-    () => ({
-      onEnter: async (value: string, state: AppSearchServiceState<Hit>) => {
-        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: AppSearchServiceState<Hit>) =>
-        (state.result?.error || !state.items) && (
-          <Box sx={{ p: 1, pb: 0, textAlign: 'center' }}>
-            {state.result?.error ? (
-              <Alert severity="error" color="error">
-                {t('hit.search.invalid')}
-              </Alert>
-            ) : (
-              (!state.items || state.items.length === 0) && (
-                <Typography sx={{ mb: -1, color: 'text.secondary' }}>{t('hit.quicksearch')}</Typography>
-              )
-            )}
-          </Box>
-        ),
-      itemRenderer: (item, options) => {
-        return (
-          <Link
-            to={`/hits/${item.id}`}
-            style={{ flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }}
-          >
-            <HitQuickSearch hit={item.item} options={options} />
-          </Link>
-        );
-      }
-    }),
-    [navigate, pageCount, t]
-  );
-};
-
-export default useMySearch;

package/components/hooks/useMySitemap.tsx

@@ -1,248 +0,0 @@
-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 type { AppSiteMapConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-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 = (): AppSiteMapConfigs => {
-  const { t } = useTranslation();
-  return useMemo(
-    () => ({
-      routes: [
-        { path: '/', title: t('route.home'), isRoot: true, icon: <Dashboard /> },
-        { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: <PersonSearch /> },
-        {
-          path: '/admin/users/:id',
-          title: t('route.admin.user.details'),
-          isLeaf: true,
-          breadcrumbs: ['/admin/users'],
-          icon: <Person />
-        },
-        { path: '/help', title: t('route.help'), isRoot: true, icon: <Help /> },
-        { path: '/help/api', title: t('route.help.api'), isLeaf: true, icon: <Storage />, breadcrumbs: ['/help'] },
-        { path: '/help/search', title: t('route.help.search'), isLeaf: true, icon: <Search />, breadcrumbs: ['/help'] },
-        {
-          path: '/help/client',
-          title: t('route.help.client'),
-          isLeaf: true,
-          icon: <Terminal />,
-          breadcrumbs: ['/help']
-        },
-        { path: '/help/auth', title: t('route.help.auth'), isLeaf: true, icon: <Key />, breadcrumbs: ['/help'] },
-        {
-          path: '/help/actions',
-          title: t('route.help.actions'),
-          isLeaf: true,
-          icon: <SettingsSuggest />,
-          breadcrumbs: ['/help']
-        },
-        { path: '/help/hit', title: t('route.help.hit'), isLeaf: true, icon: <Shield />, breadcrumbs: ['/help'] },
-        {
-          path: '/help/templates',
-          title: t('route.help.templates'),
-          isLeaf: true,
-          icon: <FormatListBulleted />,
-          breadcrumbs: ['/help']
-        },
-        {
-          path: '/help/overviews',
-          title: t('route.help.overviews'),
-          isLeaf: true,
-          icon: <Article />,
-          breadcrumbs: ['/help']
-        },
-        {
-          path: '/help/views',
-          title: t('route.help.views'),
-          isLeaf: true,
-          icon: <SavedSearch />,
-          breadcrumbs: ['/help']
-        },
-        {
-          path: '/help/retention',
-          title: t('route.help.retention'),
-          isLeaf: true,
-          icon: <Book />,
-          breadcrumbs: ['/help']
-        },
-        {
-          path: '/help/notebook',
-          title: t('route.help.notebook'),
-          isLeaf: true,
-          icon: <Description />,
-          breadcrumbs: ['/help']
-        },
-        { path: '/hits', title: t('route.hits'), isRoot: true, icon: <Search /> },
-        { path: '/search', title: t('route.search'), isRoot: true, icon: <Search /> },
-        { path: '/views', title: t('route.views'), isRoot: true, icon: <SavedSearch /> },
-        { path: '/views/create', title: t('route.views.create'), isRoot: true, icon: <SavedSearch /> },
-        {
-          path: '/views/:id',
-          title: t('route.views.show'),
-          isRoot: true,
-          icon: <SavedSearch />
-        },
-        {
-          path: '/views/:id/edit',
-          title: t('route.views.edit'),
-          isLeaf: true,
-          breadcrumbs: ['/views'],
-          icon: <Edit />
-        },
-        {
-          path: '/bundles/:id',
-          title: t('route.hits.bundle'),
-          isLeaf: true,
-          icon: <Work />
-        },
-        {
-          path: '/hits/:id',
-          title: t('route.hits.view'),
-          isLeaf: true,
-          breadcrumbs: ['/hits'],
-          icon: <Info />
-        },
-        {
-          path: '/templates',
-          title: t('route.templates'),
-          isRoot: true,
-          icon: <FormatListBulleted />
-        },
-        {
-          path: '/overviews',
-          title: t('route.overviews'),
-          isRoot: true,
-          icon: <Article />
-        },
-        {
-          path: '/dossiers',
-          title: t('route.dossiers'),
-          isRoot: true,
-          icon: <Topic />
-        },
-        {
-          path: '/dossiers/create',
-          title: t('route.dossiers.create'),
-          isRoot: true,
-          breadcrumbs: ['/dossiers'],
-          icon: <CreateNewFolder />
-        },
-        {
-          path: '/dossiers/:id/edit',
-          title: t('route.dossiers.edit'),
-          isLeaf: true,
-          breadcrumbs: ['/dossiers'],
-          icon: <Edit />
-        },
-        {
-          path: '/templates/view',
-          title: t('route.templates.view'),
-          breadcrumbs: ['/templates'],
-          isLeaf: true,
-          icon: <FormatListBulleted />
-        },
-        {
-          path: '/overviews/view',
-          title: t('route.overviews.view'),
-          breadcrumbs: ['/overviews'],
-          isLeaf: true,
-          icon: <Article />
-        },
-        {
-          path: '/analytics',
-          title: t('route.analytics'),
-          isRoot: true,
-          icon: <QueryStats />
-        },
-        {
-          path: '/action',
-          title: t('route.actions'),
-          isRoot: true,
-          icon: <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: <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: <Edit />
-        },
-        {
-          path: '/analytics/:id',
-          title: t('route.analytics.view'),
-          isLeaf: true,
-          breadcrumbs: ['/analytics'],
-          icon: <Info />
-        },
-        { path: '/home', title: t('route.home'), isRoot: true, icon: <Dashboard /> },
-        { path: '/settings', title: t('page.settings.sitemap'), isRoot: true, icon: <Settings /> },
-        { path: '/advanced', title: t('route.advanced'), isRoot: true, icon: <Code /> },
-        ...howlerPluginStore.sitemaps
-      ]
-    }),
-    [t]
-  );
-};
-
-export default useMySitemap;

package/components/hooks/useMySnackbar.tsx

@@ -1,67 +0,0 @@
-import type { OptionsObject, SnackbarMessage } from 'notistack';
-import { useSnackbar } from 'notistack';
-import { useCallback, useMemo } from 'react';
-
-const useMySnackbar = () => {
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
-  const snackBarOptions: OptionsObject = useMemo(
-    () => ({
-      preventDuplicate: true,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'right'
-      },
-      SnackbarProps: {
-        onClick: () => {
-          closeSnackbar();
-        }
-      }
-    }),
-    [closeSnackbar]
-  );
-
-  const enqueue = useCallback(
-    (variant: 'error' | 'success' | 'warning' | 'info') =>
-      (message: SnackbarMessage, timeout = 5000, options: OptionsObject = {}) =>
-        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.tsx

@@ -1,34 +0,0 @@
-import type { AppThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-
-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 = (): AppThemeConfigs => {
-  // return LEGACY_THEME;
-  // return DARK_BLUE_THEME;
-  return DEFAULT_THEME;
-};
-
-export default useMyTheme;

package/components/hooks/useMyUser.tsx

@@ -1,39 +0,0 @@
-import type { AppUserService, AppUserValidatedProp } from '@cccsaurora/howler-ui/commons/components/app/AppUserService';
-import { difference } from 'lodash-es';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import { useCallback, useMemo, useState } from 'react';
-
-// Application specific hook that will provide configuration to commons [useUser] hook.
-const useMyUser = (): AppUserService<HowlerUser> => {
-  const [user, setUser] = useState<HowlerUser>(null);
-
-  const isReady = useCallback(() => !!user, [user]);
-
-  const validateProps = useCallback(
-    (props: AppUserValidatedProp[]) => {
-      if (props === undefined) return true;
-
-      return props.every((propDef: AppUserValidatedProp) => {
-        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.tsx

@@ -1,166 +0,0 @@
-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 type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-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<HowlerUser>();
-
-  return {
-    editName: useCallback(
-      async (user: HowlerUser, name: string) => {
-        await dispatchApi(api.user.put(user.username, { name }), { throwError: true, showError: true });
-
-        showSuccessMessage(t('api.user.name.updated'));
-
-        return {
-          ...user,
-          name
-        };
-      },
-      [dispatchApi, showSuccessMessage, t]
-    ),
-
-    editQuota: useCallback(
-      async (user: HowlerUser, quota: string) => {
-        // 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('api.user.quota.updated'));
-
-        return {
-          ...user,
-          api_quota
-        };
-      },
-      [dispatchApi, showSuccessMessage, t]
-    ),
-
-    editPassword: useCallback(
-      async (new_pass: string) => {
-        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: HowlerUser, role: string) => {
-        const newRoles = [...user.roles, role];
-
-        await dispatchApi(api.user.put(user.username, { type: newRoles }), {
-          throwError: true,
-          showError: true
-        });
-
-        showSuccessMessage(t('api.user.role.updated'));
-
-        return {
-          ...user,
-          roles: newRoles
-        };
-      },
-      [dispatchApi, showSuccessMessage, t]
-    ),
-
-    addApiKey: useCallback(() => {
-      drawer.open({
-        titleKey: 'app.drawer.user.apikey.title',
-        children: (
-          <ApiKeyDrawer
-            onCreated={(newKeyName, privs, expiryDate) => {
-              setUser({
-                ...currentUser,
-                apikeys: [...currentUser.apikeys, [newKeyName, privs, expiryDate]]
-              });
-
-              showSuccessMessage(t('api.user.apikey.updated'));
-            }}
-          />
-        )
-      });
-    }, [currentUser, drawer, setUser, showSuccessMessage, t]),
-
-    removeRole: useCallback(
-      async (user: HowlerUser, role: string) => {
-        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('api.user.role.updated'));
-
-        return {
-          ...user,
-          roles: newRoles
-        };
-      },
-      [dispatchApi, showSuccessMessage, t]
-    ),
-
-    removeApiKey: useCallback(
-      async (user: HowlerUser, apiKey: [string, string[]]) => {
-        await new Promise<void>(res => {
-          showModal(<ConfirmDeleteModal onConfirm={res} />);
-        });
-
-        await dispatchApi(api.auth.apikey.del(apiKey[0]), { throwError: true });
-
-        showSuccessMessage(t('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: <ViewGroupsDrawer groups={groups} />
-      });
-    }, [dispatchApi, drawer]),
-
-    setDashboard: useCallback(
-      async (dashboard: HowlerUser['dashboard']) => {
-        await dispatchApi(api.user.put(currentUser.username, { dashboard }), {
-          throwError: true,
-          showError: true
-        });
-      },
-      [currentUser.username, dispatchApi]
-    )
-  };
-};
-
-export default useMyUserFunctions;

package/components/hooks/useMyUserList.tsx

@@ -1,15 +0,0 @@
-import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
-import { useContext, useEffect } from 'react';
-
-const useMyUserList = (ids: Set<string>) => {
-  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.tsx

@@ -1,16 +0,0 @@
-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: string, coefficient: number) => (isDark ? darken : lighten)(color, coefficient),
-      [isDark]
-    )
-  };
-};
-
-export default useMyUtils;