@cccsaurora/howler-ui 2.17.2-patch.640 → 2.17.2

package/components/app/App.js

@@ -66,6 +66,7 @@ import useMySearch from '../hooks/useMySearch';
 import AppContainer from './AppContainer';
 import AnalyticProvider from './providers/AnalyticProvider';
 import ApiConfigProvider, { ApiConfigContext } from './providers/ApiConfigProvider';
+import AppBarProvider from './providers/AppBarProvider';
 import AvatarProvider from './providers/AvatarProvider';
 import CustomPluginProvider from './providers/CustomPluginProvider';
 import FavouriteProvider from './providers/FavouritesProvider';
@@ -150,7 +151,7 @@ const MyAppProvider = ({ children }) => {
     return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, theme: myTheme, sitemap: mySitemap, user: myUser, search: mySearch, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(HitProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 const AppProviderWrapper = () => {
-    return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { children: _jsx(PluginProvider, { pluginStore: howlerPluginStore.pluginStore, children: _jsxs(MyAppProvider, { children: [_jsx(MyApp, {}), _jsx(Modal, {})] }) }) }) }));
+    return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { children: _jsx(PluginProvider, { pluginStore: howlerPluginStore.pluginStore, children: _jsx(AppBarProvider, { children: _jsxs(MyAppProvider, { children: [_jsx(MyApp, {}), _jsx(Modal, {})] }) }) }) }) }));
 };
 const router = createBrowserRouter([
     {

package/components/app/providers/AppBarProvider.d.ts

@@ -0,0 +1,14 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+interface AppBarItem {
+    id: string;
+    component: ReactNode;
+}
+export interface AppBarContextType {
+    leftItems: AppBarItem[];
+    rightItems: AppBarItem[];
+    addToAppBar: (alignment: 'left' | 'right', id: string, component: ReactNode) => void;
+    removeFromAppBar: (id: string) => void;
+}
+export declare const AppBarContext: import("react").Context<AppBarContextType>;
+declare const AppBarProvider: FC<PropsWithChildren>;
+export default AppBarProvider;

package/components/app/providers/AppBarProvider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useState } from 'react';
+export const AppBarContext = createContext(null);
+const AppBarProvider = ({ children }) => {
+    const [leftItems, setLeftItems] = useState([]);
+    const [rightItems, setRightItems] = useState([]);
+    const addToAppBar = useCallback((alignment, id, component) => {
+        const setter = alignment === 'left' ? setLeftItems : setRightItems;
+        setter(prev => {
+            if (prev.some(item => item.id === id)) {
+                return prev;
+            }
+            return [...prev, { id, component }];
+        });
+    }, []);
+    const removeFromAppBar = useCallback((id) => {
+        setLeftItems(prev => prev.filter(item => item.id !== id));
+        setRightItems(prev => prev.filter(item => item.id !== id));
+    }, []);
+    return (_jsx(AppBarContext.Provider, { value: { leftItems, rightItems, addToAppBar, removeFromAppBar }, children: children }));
+};
+export default AppBarProvider;

package/components/hooks/useMyPreferences.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Api, Article, Book, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
+import { Stack } from '@mui/material';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
+import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
 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 { Fragment, useContext, 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 = () => {
+    const { leftItems, rightItems } = useContext(AppBarContext);
     // The following menu items will show up in the Left Navigation Drawer
     const MENU_ITEMS = useMemo(() => {
         let defaultMenu = [
@@ -269,12 +272,12 @@ const useMyPreferences = () => {
             adminMenuI18nKey: 'adminmenu',
             quickSearchParam: 'query',
             quickSearchURI: '/hits',
-            leftAfterBreadcrumbs: _jsx(DocumentationButton, {}),
-            rightBeforeSearch: _jsx(Classification, {})
+            leftAfterBreadcrumbs: (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(DocumentationButton, {}), leftItems.map(item => (_jsx(Fragment, { children: item.component }, item.id)))] })),
+            rightBeforeSearch: (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [rightItems.map(item => (_jsx(Fragment, { children: item.component }, item.id))), _jsx(Classification, {})] }))
         },
         leftnav: {
             elements: MENU_ITEMS
         }
-    }), [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS]);
+    }), [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS, leftItems, rightItems]);
 };
 export default useMyPreferences;

package/components/routes/home/HomeSettings.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+interface HomeSettingsProps {
+    /** Whether the dashboard is currently in edit mode. Disables the "Edit" menu item. */
+    isEditing: boolean;
+    /** Current auto-refresh interval in seconds. */
+    refreshRate: number;
+    /** Called when the user selects a new refresh rate. */
+    onRefreshRateChange: (rate: number) => void;
+    /** Called when the user clicks the "Edit" menu item. */
+    onEdit: () => void;
+}
+declare const HomeSettings: FC<HomeSettingsProps>;
+export default HomeSettings;

package/components/routes/home/HomeSettings.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Edit, Settings } from '@mui/icons-material';
+import { FormControl, FormLabel, IconButton, ListItemIcon, Menu, MenuItem, Slider, Tooltip } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const REFRESH_RATES = [15, 30, 60, 300];
+const HomeSettings = ({ isEditing, refreshRate, onRefreshRateChange, onEdit }) => {
+    const { t } = useTranslation();
+    const [anchorEl, setAnchorEl] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: t('page.dashboard.settings.edit'), children: _jsx(IconButton, { onClick: e => setAnchorEl(e.currentTarget), size: "small", children: _jsx(Settings, { color: "primary" }) }) }), _jsxs(Menu, { id: "settings-menu", anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), children: [_jsxs(MenuItem, { disabled: isEditing, onClick: () => {
+                            setAnchorEl(null);
+                            onEdit();
+                        }, children: [_jsx(ListItemIcon, { children: _jsx(Edit, {}) }), t('page.dashboard.settings.edit')] }), _jsx(MenuItem, { disableRipple: true, disableTouchRipple: true, sx: { '&:hover': { bgcolor: 'transparent' }, cursor: 'default' }, children: _jsxs(FormControl, { sx: { px: 2, py: 1, minWidth: 250, pointerEvents: 'auto' }, children: [_jsx(FormLabel, { id: "refresh-rate-label", sx: { mb: 2 }, children: t('page.dashboard.settings.refreshRate') }), _jsx(Slider, { "aria-labelledby": "refresh-rate-label", value: REFRESH_RATES.indexOf(refreshRate), onChange: (_, value) => onRefreshRateChange(REFRESH_RATES[value]), step: 1, marks: [
+                                        { value: 0, label: '15s' },
+                                        { value: 1, label: '30s' },
+                                        { value: 2, label: '1m' },
+                                        { value: 3, label: '5m' }
+                                    ], min: 0, max: 3, valueLabelDisplay: "auto", valueLabelFormat: value => {
+                                        const rates = ['15s', '30s', '1m', '5m'];
+                                        return rates[value] || '';
+                                    } })] }) })] })] }));
+};
+export default HomeSettings;

package/components/routes/home/ViewRefresh.js

@@ -52,7 +52,7 @@ const ViewRefresh = forwardRef(({ refreshRate, viewCardCount, onRefresh }, ref)
                 clearTimeout(timerRef.current);
         };
     }, [progress, isRefreshing, refreshRate, triggerRefresh]);
-    return (_jsxs(Box, { sx: { position: 'relative', display: 'inline-flex' }, children: [isRefreshing ? (_jsx(CircularProgress, { variant: "indeterminate" })) : (_jsx(CircularProgress, { variant: "determinate", value: progress })), _jsx(Box, { sx: {
+    return (_jsxs(Box, { sx: { position: 'relative', display: 'inline-flex' }, children: [isRefreshing ? (_jsx(CircularProgress, { variant: "indeterminate", size: 32 })) : (_jsx(CircularProgress, { variant: "determinate", value: progress, size: 32 })), _jsx(Box, { sx: {
                     top: 0,
                     left: 0,
                     bottom: 0,
@@ -61,7 +61,7 @@ const ViewRefresh = forwardRef(({ refreshRate, viewCardCount, onRefresh }, ref)
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center'
-                }, children: _jsx(Tooltip, { title: t('refresh'), children: _jsx(IconButton, { onClick: triggerRefresh, disabled: isRefreshing, color: "primary", children: _jsx(Refresh, {}) }) }) })] }));
+                }, children: _jsx(Tooltip, { title: t('refresh'), children: _jsx(IconButton, { onClick: triggerRefresh, disabled: isRefreshing, color: "primary", size: "small", children: _jsx(Refresh, {}) }) }) })] }));
 });
 ViewRefresh.displayName = 'ViewRefresh';
 export default ViewRefresh;

package/components/routes/home/index.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { Cancel, Check, Close, Edit, MoreVert, OpenInNew } from '@mui/icons-material';
-import { Alert, AlertTitle, CircularProgress, FormControl, FormLabel, Grid, IconButton, ListItemIcon, Menu, MenuItem, Slider, Stack, Typography } from '@mui/material';
+import { Cancel, Check, Close, OpenInNew } from '@mui/icons-material';
+import { Alert, AlertTitle, CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
 import dayjs from 'dayjs';
 import isEqual from 'lodash-es/isEqual';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
@@ -20,13 +21,14 @@ import ErrorBoundary from '../ErrorBoundary';
 import AddNewCard from './AddNewCard';
 import AnalyticCard, {} from './AnalyticCard';
 import EntryWrapper from './EntryWrapper';
+import HomeSettings from './HomeSettings';
 import ViewCard, {} from './ViewCard';
 import ViewRefresh, {} from './ViewRefresh';
 const LUCENE_DATE_FMT = 'YYYY-MM-DD[T]HH:mm:ss';
-const REFRESH_RATES = [15, 30, 60, 300];
 const Home = () => {
     const { t } = useTranslation();
     const { user, setUser } = useAppUser();
+    const { addToAppBar, removeFromAppBar } = useContext(AppBarContext);
     const { setDashboard, setRefreshRate: setRefreshRateBackend } = useMyUserFunctions();
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const [lastViewed, setLastViewed] = useMyLocalStorageItem(StorageKey.LAST_VIEW, dayjs().utc().format(LUCENE_DATE_FMT));
@@ -34,7 +36,6 @@ const Home = () => {
     const [isEditing, setIsEditing] = useState(false);
     const [updatedHitTotal, setUpdatedHitTotal] = useState(0);
     const [dashboard, setStateDashboard] = useState(user.dashboard ?? []);
-    const [openSettings, setOpenSettings] = useState(null);
     const [refreshRate, setRefreshRate] = useState(user.refresh_rate ?? 15);
     const [refreshTick, setRefreshTick] = useState(null);
     const viewRefreshRef = useRef(null);
@@ -75,9 +76,6 @@ const Home = () => {
     const handleRefresh = useCallback(() => {
         setRefreshTick(Symbol());
     }, []);
-    const handleOpenSettings = (event) => {
-        setOpenSettings(event.currentTarget);
-    };
     const saveChanges = useCallback(async () => {
         setLoading(true);
         try {
@@ -119,18 +117,15 @@ const Home = () => {
         };
     }, []);
     const viewCardCount = useMemo(() => (dashboard ?? []).filter(e => e.type === 'view').length, [dashboard]);
-    return (_jsx(PageCenter, { maxWidth: "100%", textAlign: "left", height: "100%", children: _jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEqual(dashboard, user.dashboard), color: 'success', startIcon: loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}), onClick: saveChanges, children: t('save') })), _jsx(ViewRefresh, { ref: viewRefreshRef, refreshRate: refreshRate, viewCardCount: viewCardCount, onRefresh: handleRefresh }), _jsx(IconButton, { onClick: handleOpenSettings, children: _jsx(MoreVert, {}) }), _jsxs(Menu, { id: "settings-menu", anchorEl: openSettings, open: !!openSettings, onClose: () => setOpenSettings(null), children: [_jsxs(MenuItem, { disabled: isEditing, onClick: () => {
-                                            setOpenSettings(null);
-                                            setIsEditing(true);
-                                        }, children: [_jsx(ListItemIcon, { children: _jsx(Edit, {}) }), t('page.dashboard.settings.edit')] }), _jsx(MenuItem, { disableRipple: true, disableTouchRipple: true, sx: { '&:hover': { bgcolor: 'transparent' }, cursor: 'default' }, children: _jsxs(FormControl, { sx: { px: 2, py: 1, minWidth: 250, pointerEvents: 'auto' }, children: [_jsx(FormLabel, { id: "refresh-rate-label", sx: { mb: 2 }, children: t('page.dashboard.settings.refreshRate') }), _jsx(Slider, { "aria-labelledby": "refresh-rate-label", value: REFRESH_RATES.indexOf(refreshRate), onChange: (_, value) => handleRefreshRateChange(REFRESH_RATES[value]), step: 1, marks: [
-                                                        { value: 0, label: '15s' },
-                                                        { value: 1, label: '30s' },
-                                                        { value: 2, label: '1m' },
-                                                        { value: 3, label: '5m' }
-                                                    ], min: 0, max: 3, valueLabelDisplay: "auto", valueLabelFormat: value => {
-                                                        const rates = ['15s', '30s', '1m', '5m'];
-                                                        return rates[value] || '';
-                                                    } })] }) })] })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
+    useEffect(() => {
+        addToAppBar('left', 'view_refresh', _jsx(ViewRefresh, { ref: viewRefreshRef, refreshRate: refreshRate, viewCardCount: viewCardCount, onRefresh: handleRefresh }));
+        addToAppBar('left', 'home_settings', _jsx(HomeSettings, { isEditing: isEditing, refreshRate: refreshRate, onRefreshRateChange: handleRefreshRateChange, onEdit: () => setIsEditing(true) }));
+        return () => {
+            removeFromAppBar('view_refresh');
+            removeFromAppBar('home_settings');
+        };
+    }, [addToAppBar, handleRefresh, handleRefreshRateChange, isEditing, refreshRate, removeFromAppBar, viewCardCount]);
+    return (_jsx(PageCenter, { maxWidth: "100%", textAlign: "left", height: "100%", children: _jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEqual(dashboard, user.dashboard), color: 'success', startIcon: loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}), onClick: saveChanges, children: t('save') }))] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
                                         setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT));
                                         setUpdatedHitTotal(0);
                                     }, children: _jsx(Close, {}) })] }), children: [_jsx(AlertTitle, { children: t('route.home.alert.updated.title') }), t('route.home.alert.updated.description', { count: updatedHitTotal })] })), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (dashboard ?? []).map(entry => getIdFromEntry(entry)), children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", sx: [

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.17.2-patch.640",
+  "version": "2.17.2",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",