@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/hooks/useHitSelection.tsx

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

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

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

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

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