@cccsaurora/howler-ui 2.14.0-dev.263 → 2.14.0-dev.265

package/components/hooks/useHitSelection.tsx

@@ -0,0 +1,102 @@
+import type { AppSiteMapRoute } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+import { useAppBreadcrumbs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type React from 'react';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+
+const useHitSelection = () => {
+  const navigate = useNavigate();
+
+  const { setItems } = useAppBreadcrumbs();
+  const { routes } = useMySitemap();
+
+  const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+  const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+  const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
+  const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
+  const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+
+  const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
+
+  const [lastSelected, setLastSelected] = useState<string>(null);
+
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => {
+      setLastSelected(hit.howler.id);
+
+      if (e.ctrlKey) {
+        document.getSelection().removeAllRanges();
+
+        if (selectedHits.some(_hit => _hit.howler.id === hit.howler.id)) {
+          removeHitFromSelection(hit.howler.id);
+        } else {
+          addHitToSelection(hit.howler.id);
+        }
+
+        e.stopPropagation();
+        return;
+      }
+
+      if (e.shiftKey) {
+        document.getSelection().removeAllRanges();
+
+        if (selectedHits.length < 1) {
+          addHitToSelection(hit.howler.id);
+        } else if (lastSelected) {
+          const lastSelectedIndex = response?.items.findIndex(_hit => _hit.howler.id === lastSelected);
+          const currentIndex = response?.items.findIndex(_hit => _hit.howler.id === hit.howler.id);
+
+          const lowerBound = lastSelectedIndex < currentIndex ? lastSelectedIndex : currentIndex;
+          const upperBound = lastSelectedIndex > currentIndex ? lastSelectedIndex : currentIndex;
+
+          for (let i = lowerBound; i <= upperBound; i++) {
+            addHitToSelection(response.items[i]?.howler.id);
+          }
+        }
+
+        e.stopPropagation();
+        return;
+      }
+
+      if (hit.howler.is_bundle) {
+        const searchRoute = routes.find(_route =>
+          _route.path.startsWith(location.pathname.replace(/^(\/.*)\/.+/, '$1'))
+        );
+
+        const newBreadcrumb: AppSiteMapRoute = {
+          ...searchRoute,
+          path: location.pathname + location.search
+        };
+        setItems([{ route: newBreadcrumb, matcher: null }]);
+
+        navigate(`/bundles/${hit.howler.id}?span=date.range.all&query=howler.id%3A*&offset=0`);
+        clearSelectedHits(hit.howler.id);
+      } else {
+        clearSelectedHits(hit.howler.id);
+        setSelected(hit.howler.id);
+      }
+    },
+    [
+      addHitToSelection,
+      clearSelectedHits,
+      lastSelected,
+      navigate,
+      removeHitFromSelection,
+      response,
+      routes,
+      selectedHits,
+      setItems,
+      setSelected
+    ]
+  );
+
+  return { lastSelected, setLastSelected, onClick };
+};
+
+export default useHitSelection;

package/components/hooks/useMyApi.tsx

@@ -0,0 +1,64 @@
+import type { HowlerResponse } from '@cccsaurora/howler-ui/api';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useCallback, useMemo } from 'react';
+
+type DispatchApiConfig = {
+  throwError?: boolean;
+  logError?: boolean;
+  showError?: boolean;
+  onConflict?: () => Promise<void>;
+};
+
+const DEFAULT_CONFIG = {
+  throwError: true,
+  logError: false,
+  showError: true,
+  onConflict: null
+};
+
+const useMyApi = () => {
+  const { showErrorMessage } = useMySnackbar();
+
+  const dispatchApi = useCallback(
+    // eslint-disable-next-line comma-spacing
+    async <R,>(apiCall: Promise<R>, config: DispatchApiConfig = DEFAULT_CONFIG): Promise<R> => {
+      const { throwError, logError, showError, onConflict } = { ...DEFAULT_CONFIG, ...config };
+      try {
+        const response = await apiCall;
+        return response;
+      } catch (error) {
+        if (error instanceof Error) {
+          if (onConflict && [409, 412].includes((error.cause as HowlerResponse<any>)?.api_status_code)) {
+            onConflict();
+            return null;
+          }
+
+          if (showError) {
+            showErrorMessage(error.message);
+          }
+
+          if (logError) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+          }
+
+          if (throwError) {
+            throw error;
+          }
+        }
+
+        return null;
+      }
+    },
+    [showErrorMessage]
+  );
+
+  return useMemo(
+    () => ({
+      dispatchApi
+    }),
+    [dispatchApi]
+  );
+};
+
+export default useMyApi;

package/components/hooks/useMyChart.tsx

@@ -0,0 +1,164 @@
+import { useTheme } from '@mui/material';
+import {
+  ArcElement,
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  SubTitle,
+  TimeScale,
+  Title,
+  Tooltip
+} from 'chart.js';
+import 'chartjs-adapter-dayjs-4';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+ChartJS.defaults.font.family = `'Roboto', 'Helvetica', 'Arial', sans-serif`;
+
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  TimeScale,
+  PointElement,
+  LineElement,
+  Title,
+  SubTitle,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  BarElement,
+  Filler
+);
+
+ChartJS.register(zoomPlugin);
+
+const useMyChart = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  /**
+   * Generate a basic set of default options for our graphs
+   */
+  const generateOptions = useCallback(
+    (i18nKey: string, subtitleKey = 'route.analytics.overview.limit') => ({
+      responsive: true,
+      plugins: {
+        legend: {
+          display: true,
+          position: 'top' as const,
+          labels: {
+            color: theme.palette.text.primary
+          }
+        },
+        title: {
+          display: true,
+          text: t(i18nKey),
+          color: theme.palette.text.primary,
+          font: {
+            size: 16
+          },
+          padding: {
+            bottom: 0
+          }
+        },
+        subtitle: {
+          display: true,
+          text: t(subtitleKey),
+          color: theme.palette.text.secondary,
+          font: {
+            size: 10
+          },
+          padding: {
+            bottom: 10
+          }
+        },
+        zoom: {
+          zoom: {
+            wheel: {
+              enabled: true,
+              modifierKey: 'ctrl' as const
+            },
+            pinch: {
+              enabled: true
+            },
+            mode: 'y' as const
+          },
+          pan: {
+            enabled: true,
+            mode: 'xy' as 'x' | 'y' | 'xy'
+          },
+          limits: {
+            y: { min: 0 }
+          }
+        }
+      },
+      scales: {
+        x: {
+          type: 'time' as const,
+          time: {
+            unit: 'day' as const
+          },
+          ticks: {
+            color: theme.palette.text.primary
+          }
+        },
+        y: {
+          beginAtZero: true,
+          ticks: {
+            color: theme.palette.text.primary
+          }
+        }
+      }
+    }),
+    [t, theme.palette.text.primary, theme.palette.text.secondary]
+  );
+
+  return {
+    // https://www.chartjs.org/docs/latest/charts/line.html
+    line: (titleKey: string, subtitleKey?: string) => {
+      const options = generateOptions(titleKey, subtitleKey);
+
+      options.plugins.subtitle = null;
+
+      options.plugins.zoom.pan.mode = 'x';
+
+      return options;
+    },
+
+    // https://www.chartjs.org/docs/latest/charts/doughnut.html
+    doughnut: (titleKey: string, subtitleKey?: string) => {
+      const options = { ...generateOptions(titleKey, subtitleKey), scales: null };
+
+      return options;
+    },
+
+    // https://www.chartjs.org/docs/latest/charts/bar.html
+    bar: (titleKey: string, subtitleKey?: string) => {
+      const options = generateOptions(titleKey, subtitleKey);
+
+      options.plugins.legend = { display: false } as any;
+
+      options.scales = {
+        y: { beginAtZero: true, ticks: { precision: 0, color: theme.palette.text.primary } },
+        x: { ticks: { color: theme.palette.text.primary } }
+      } as any;
+
+      return options;
+    },
+
+    scatter: (titleKey: string, subtitleKey?: string) => {
+      const options = generateOptions(titleKey, subtitleKey);
+
+      return options;
+    }
+  };
+};
+
+export default useMyChart;

package/components/hooks/useMyLocalStorage.ts

@@ -0,0 +1,20 @@
+import useLocalStorage from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorage';
+import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
+import { LocalStorageContext, type LocalStorageContextType } from '@cccsaurora/howler-ui/components/app/providers/LocalStorageProvider';
+import { useContext } from 'react';
+import type { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { MY_LOCAL_STORAGE_PREFIX } from '@cccsaurora/howler-ui/utils/constants';
+
+const useMyLocalStorage = () => {
+  return useLocalStorage(MY_LOCAL_STORAGE_PREFIX);
+};
+
+export const useMyLocalStorageItem = <T>(key: StorageKey, initialValue?: T) => {
+  return useLocalStorageItem(`${MY_LOCAL_STORAGE_PREFIX}.${key}`, initialValue);
+};
+
+export const useMyLocalStorageProvider = (): LocalStorageContextType => {
+  return useContext(LocalStorageContext);
+};
+
+export default useMyLocalStorage;

package/components/hooks/useMyPreferences.tsx

@@ -0,0 +1,309 @@
+import {
+  Api,
+  Article,
+  Book,
+  Code,
+  Dashboard,
+  Description,
+  Edit,
+  ExitToApp,
+  FormatListBulleted,
+  Help,
+  HelpCenter,
+  Key,
+  ManageSearch,
+  QueryStats,
+  SavedSearch,
+  Search,
+  Settings,
+  SettingsSuggest,
+  Shield,
+  Storage,
+  SupervisorAccount,
+  Terminal,
+  Topic
+} from '@mui/icons-material';
+import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
+import type { AppLeftNavElement, AppPreferenceConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+import Classification from '@cccsaurora/howler-ui/components/elements/display/Classification';
+import DocumentationButton from '@cccsaurora/howler-ui/components/elements/display/DocumentationButton';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useMemo } from 'react';
+import AppMenuBuilder from '@cccsaurora/howler-ui/utils/menuUtils';
+
+// This is your App Name that will be displayed in the left drawer and the top navbar
+const APP_NAME = 'howler';
+
+const useMyPreferences = (): AppPreferenceConfigs => {
+  // The following menu items will show up in the Left Navigation Drawer
+  const MENU_ITEMS = useMemo<AppLeftNavElement[]>(
+    () => {
+      let defaultMenu: AppLeftNavElement[] = [
+        {
+          type: 'item',
+          element: {
+            id: 'dashboard',
+            i18nKey: 'route.home',
+            route: '/',
+            icon: <Dashboard />
+          }
+        },
+        {
+          type: 'group',
+          element: {
+            id: 'views',
+            i18nKey: 'route.views.saved',
+            icon: <SavedSearch />,
+            items: []
+          }
+        },
+        {
+          type: 'group',
+          element: {
+            id: 'analytics',
+            i18nKey: 'route.analytics.pinned',
+            icon: <QueryStats />,
+            items: []
+          }
+        },
+        {
+          type: 'item',
+          element: {
+            id: 'search.hit',
+            i18nKey: 'route.search',
+            route: '/search',
+            icon: <Search />
+          }
+        },
+        {
+          type: 'item',
+          element: {
+            id: 'advanced',
+            i18nKey: 'route.advanced',
+            route: '/advanced',
+            icon: <Code />
+          }
+        },
+        {
+          type: 'divider',
+          element: null
+        },
+        {
+          type: 'group',
+          element: {
+            id: 'manage',
+            i18nKey: 'manage',
+            icon: <Edit />,
+            items: [
+              {
+                id: 'manage.views',
+                i18nKey: 'route.views',
+                icon: <ManageSearch />,
+                nested: true,
+                route: '/views'
+              },
+              {
+                id: 'manage.analytics',
+                i18nKey: 'route.analytics',
+                icon: <QueryStats />,
+                nested: true,
+                route: '/analytics'
+              },
+              {
+                id: 'manage.templates',
+                i18nKey: 'route.templates',
+                icon: <FormatListBulleted />,
+                nested: true,
+                route: '/templates'
+              },
+              {
+                id: 'manage.overviews',
+                i18nKey: 'route.overviews',
+                icon: <Article />,
+                nested: true,
+                route: '/overviews'
+              },
+              {
+                id: 'manage.dossiers',
+                i18nKey: 'route.dossiers',
+                icon: <Topic />,
+                nested: true,
+                route: '/dossiers'
+              },
+              {
+                id: 'manage.actions',
+                i18nKey: 'route.actions',
+                icon: <Terminal />,
+                nested: true,
+                route: '/action',
+                userPropValidators: [
+                  { prop: 'roles', value: 'automation_basic' },
+                  { prop: 'roles', value: 'automation_advanced' },
+                  { prop: 'roles', value: 'actionrunner_basic' },
+                  { prop: 'roles', value: 'actionrunner_advanced' }
+                ]
+              },
+              {
+                id: 'action.integrations',
+                i18nKey: 'route.integrations',
+                icon: <Api />,
+                nested: true,
+                route: '/action/integrations',
+                userPropValidators: [{ prop: 'roles', value: 'automation_basic' }]
+              }
+            ]
+          }
+        },
+        {
+          type: 'divider',
+          element: null
+        },
+        {
+          type: 'group',
+          element: {
+            id: 'help',
+            i18nKey: 'page.help',
+            icon: <Help />,
+            items: [
+              {
+                id: 'help.main',
+                i18nKey: 'route.help.main',
+                route: '/help',
+                nested: true,
+                icon: <HelpCenter />
+              },
+              {
+                id: 'help.client',
+                i18nKey: 'route.help.client',
+                route: '/help/client',
+                nested: true,
+                icon: <Terminal />
+              },
+              { id: 'help.hit', i18nKey: 'route.help.hit', route: '/help/hit', nested: true, icon: <Shield /> },
+              {
+                id: 'help.search',
+                i18nKey: 'route.help.search',
+                route: '/help/search',
+                nested: true,
+                icon: <Search />
+              },
+              {
+                id: 'help.views',
+                i18nKey: 'route.help.views',
+                route: '/help/views',
+                nested: true,
+                icon: <SavedSearch />
+              },
+              {
+                id: 'help.templates',
+                i18nKey: 'route.help.templates',
+                route: '/help/templates',
+                nested: true,
+                icon: <FormatListBulleted />
+              },
+              {
+                id: 'help.overview',
+                i18nKey: 'route.help.overviews',
+                route: '/help/overviews',
+                nested: true,
+                icon: <Article />
+              },
+              { id: 'help.auth', i18nKey: 'route.help.auth', route: '/help/auth', nested: true, icon: <Key /> },
+              {
+                id: 'help.actions',
+                i18nKey: 'route.help.actions',
+                route: '/help/actions',
+                nested: true,
+                icon: <SettingsSuggest />
+              },
+              {
+                id: 'help.notebook',
+                i18nKey: 'route.help.notebook',
+                route: '/help/notebook',
+                nested: true,
+                icon: <Description />
+              },
+              { id: 'help.api', i18nKey: 'route.help.api', route: '/help/api', nested: true, icon: <Storage /> },
+              {
+                id: 'help.retention',
+                i18nKey: 'route.help.retention',
+                route: '/help/retention',
+                nested: true,
+                icon: <Book />
+              }
+            ]
+          }
+        }
+      ];
+
+      const appMenuBuilder = new AppMenuBuilder(defaultMenu);
+      appMenuBuilder.applyOperations(howlerPluginStore.mainMenuOperations);
+
+      return appMenuBuilder.menu;
+    },
+    // prettier-ignore
+    []
+  );
+
+  // This is the basic user menu, it is a menu that shows up in account avatar popover.
+  const USER_MENU_ITEMS = useMemo(() => {
+    // Load plugin menu items first as Settings/Logout generally
+    // appear at the end of user menus.
+    return [
+      ...howlerPluginStore.userMenuItems,
+      {
+        i18nKey: 'usermenu.settings',
+        route: '/settings',
+        icon: <Settings />
+      },
+      {
+        i18nKey: 'usermenu.logout',
+        route: '/logout',
+        icon: <ExitToApp />
+      }
+    ];
+  }, []);
+
+  // This is the basic administrator menu, it is a menu that shows up under the user menu in the account avatar popover.
+  const ADMIN_MENU_ITEMS = useMemo(() => {
+    return [
+      {
+        i18nKey: 'adminmenu.users',
+        route: '/admin/users',
+        icon: <SupervisorAccount />
+      },
+      ...howlerPluginStore.adminMenuItems
+    ];
+  }, []);
+
+  // Return memoized config to prevent unnecessary re-renders.
+  return useMemo(
+    () => ({
+      appName: '',
+      allowGravatar: false,
+      appIconDark: <AppBrand application={APP_NAME} variant="app" />,
+      appIconLight: <AppBrand application={APP_NAME} variant="app" />,
+      bannerLight: <AppBrand application={APP_NAME} variant="banner-vertical" size="large" />,
+      bannerDark: <AppBrand application={APP_NAME} variant="banner-vertical" size="large" />,
+      defaultShowQuickSearch: true,
+      avatarD: 'retro',
+      topnav: {
+        apps: [],
+        userMenu: USER_MENU_ITEMS,
+        userMenuI18nKey: 'usermenu',
+        adminMenu: ADMIN_MENU_ITEMS,
+        adminMenuI18nKey: 'adminmenu',
+        quickSearchParam: 'query',
+        quickSearchURI: '/hits',
+        leftAfterBreadcrumbs: <DocumentationButton />,
+        rightBeforeSearch: <Classification />
+      },
+      leftnav: {
+        elements: MENU_ITEMS
+      }
+    }),
+    [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS]
+  );
+};
+
+export default useMyPreferences;