@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/components/hooks/useMySearch.tsx

@@ -0,0 +1,77 @@
+import { Alert, Box, Typography } from '@mui/material';
+import api from 'api';
+import type { AppSearchServiceState } from 'commons/components/app/AppContexts';
+import type { AppSearchService } from 'commons/components/app/AppSearchService';
+import HitQuickSearch from 'components/elements/hit/HitQuickSearch';
+import type { Hit } from 'models/entities/generated/Hit';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import { StorageKey } from 'utils/constants';
+import { sanitizeLuceneQuery } from '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

@@ -0,0 +1,248 @@
+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 'commons/components/app/AppConfigs';
+import howlerPluginStore from '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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,34 @@
+import type { AppThemeConfigs } from '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

@@ -0,0 +1,39 @@
+import type { AppUserService, AppUserValidatedProp } from 'commons/components/app/AppUserService';
+import { difference } from 'lodash-es';
+import type { HowlerUser } from '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

@@ -0,0 +1,166 @@
+import api from 'api';
+import { useAppUser } from 'commons/components/app/hooks';
+import ApiKeyDrawer from 'components/app/drawers/ApiKeyDrawer';
+import ViewGroupsDrawer from 'components/app/drawers/ViewGroupsDrawer';
+import { AppDrawerContext } from 'components/app/providers/AppDrawerProvider';
+import { ModalContext } from 'components/app/providers/ModalProvider';
+import ConfirmDeleteModal from 'components/elements/display/modals/ConfirmDeleteModal';
+import type { HowlerUser } from '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

@@ -0,0 +1,15 @@
+import { UserListContext } from '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

@@ -0,0 +1,16 @@
+import { darken, lighten } from '@mui/material';
+import { useAppTheme } from '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;