@cccsaurora/howler-ui 2.17.1-dev.627 → 2.17.2-dev.649

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/elements/hit/HitOutline.d.ts

@@ -5,5 +5,6 @@ export declare const DEFAULT_FIELDS: string[];
 declare const _default: import("react").NamedExoticComponent<{
     hit: WithMetadata<Hit>;
     layout: HitLayout;
+    forceAllFields?: boolean;
 }>;
 export default _default;

package/components/elements/hit/HitOutline.js

@@ -9,7 +9,7 @@ import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { HitLayout } from './HitLayout';
 import DefaultOutline from './outlines/DefaultOutline';
 export const DEFAULT_FIELDS = ['event.created', 'howler.id', 'howler.hash'];
-const HitOutline = ({ hit, layout }) => {
+const HitOutline = ({ hit, layout, forceAllFields = false }) => {
     const { t } = useTranslation();
     const { getMatchingTemplate } = useMatchers();
     const [templateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
@@ -23,7 +23,9 @@ const HitOutline = ({ hit, layout }) => {
                 hit,
                 layout,
                 template,
-                fields: !isNil(templateFieldCount) ? [...template.keys].slice(0, templateFieldCount) : template.keys,
+                fields: !isNil(templateFieldCount) && !forceAllFields
+                    ? [...template.keys].slice(0, templateFieldCount)
+                    : template.keys,
                 readonly: template.type === 'readonly'
             });
         }

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/dossiers/DossierEditor.js

@@ -6,6 +6,7 @@ import api from '@cccsaurora/howler-ui/api';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { isEqual, omit, uniqBy } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +20,7 @@ const DossierEditor = () => {
     const { t, i18n } = useTranslation();
     const params = useParams();
     const { dispatchApi } = useMyApi();
+    const { showSuccessMessage } = useMySnackbar();
     const navigate = useNavigate();
     const [searchParams, setSearchParams] = useSearchParams();
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
@@ -127,16 +129,18 @@ const DossierEditor = () => {
         try {
             if (!params.id) {
                 const result = await dispatchApi(api.dossier.post(dossier));
+                showSuccessMessage(t('route.dossiers.manager.create.success'));
                 navigate(`/dossiers/${result.dossier_id}/edit`);
             }
             else {
                 setDossier(await dispatchApi(api.dossier.put(dossier.dossier_id, omit(dossier, ['dossier_id', 'id']))));
+                showSuccessMessage(t('route.dossiers.manager.edit.success'));
             }
         }
         finally {
             setLoading(false);
         }
-    }, [dispatchApi, dossier, navigate, params.id]);
+    }, [dispatchApi, dossier, navigate, params.id, showSuccessMessage, t]);
     useEffect(() => {
         if (!params.id) {
             return;

package/components/routes/hits/search/InformationPane.js

@@ -163,7 +163,7 @@ const InformationPane = ({ onClose }) => {
     const hasError = useMemo(() => !validateRegex(filter), [filter]);
     return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, sx: [hit?.howler?.is_bundle && { position: 'absolute', top: 1, right: 0, zIndex: 1100 }], children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles, disabled: loading }), !!hit && !hit.howler.is_bundle && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: header }), !!hit &&
                         !hit.howler.is_bundle &&
-                        (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers }), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
+                        (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE, forceAllFields: true }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers }), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     pr: 2,

package/components/routes/hits/search/LayoutSettings.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDropDown, List, Settings, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
-import { FormLabel, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { ArrowDropDown, InfoOutlined, List, Settings, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
+import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
@@ -13,6 +13,12 @@ const LayoutSettings = () => {
     const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
     const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
     const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
-    return (_jsx(ChipPopper, { icon: _jsx(Settings, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium' } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [_jsx(FormLabel, { children: t('page.settings.local.hits.display_type') }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1, children: [_jsx(FormLabel, { children: t('page.settings.local.hits.layout') }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] })] })] }) }));
+    const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
+    return (_jsx(ChipPopper, { icon: _jsx(Tooltip, { title: t('search.layout.settings'), children: _jsx(Settings, {}) }), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium', 'aria-label': t('search.layout.settings') } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "display_type", children: t('page.settings.local.hits.display_type') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.display_type.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", "aria-labelledby": "display_type", children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "layout", children: t('page.settings.local.hits.layout') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.layout.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), "aria-labelledby": "layout", children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "field_count", children: t('page.settings.local.hits.field_count') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.field_count.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignSelf: "stretch", children: [_jsx(Checkbox, { checked: templateFieldCount !== null, onChange: (_, checked) => setTemplateFieldCount(checked ? 3 : null), size: "small" }), _jsx(TextField, { type: "number", size: "small", disabled: templateFieldCount === null, value: templateFieldCount ?? 3, fullWidth: true, onChange: e => {
+                                const val = parseInt(e.target.value);
+                                if (!isNaN(val)) {
+                                    setTemplateFieldCount(Math.min(15, Math.max(0, val)));
+                                }
+                            }, inputProps: { min: 0, max: 15, 'aria-labelledby': 'field_count' } })] })] }) }));
 };
 export default LayoutSettings;

package/components/routes/hits/search/grid/AddColumnModal.d.ts

@@ -1,7 +1,4 @@
 declare const _default: import("react").NamedExoticComponent<{
-    open: boolean;
-    onClose: () => void;
-    anchorEl: HTMLElement;
     addColumn: (key: string) => void;
     columns: string[];
 }>;

package/components/routes/hits/search/grid/AddColumnModal.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Add, Check } from '@mui/icons-material';
-import { Autocomplete, Chip, Divider, Grid, IconButton, Popover, Stack, TextField } from '@mui/material';
+import { Add, Check, Settings, TableChart } from '@mui/icons-material';
+import { Autocomplete, Chip, Divider, Grid, IconButton, Stack, TextField } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { has, sortBy, uniq } from 'lodash-es';
 import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
-const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
+const AddColumnModal = ({ addColumn, columns }) => {
     const { t } = useTranslation();
     const { hitFields } = useContext(FieldContext);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
@@ -21,7 +22,7 @@ const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
             setSuggestions(uniq((await Promise.all((response?.items ?? []).map(async (_hit) => (has(_hit, '__template') ? _hit.__template?.keys : (await getMatchingTemplate(_hit))?.keys) ?? []))).flat()));
         })();
     }, [getMatchingTemplate, response?.items]);
-    return (_jsx(Popover, { open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
+    return (_jsx(ChipPopper, { icon: _jsx(TableChart, {}), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
                                 addColumn(columnToAdd);
                                 setColumnToAdd(null);
                             }, children: _jsx(Add, {}) })] }), _jsx(Divider, { orientation: "horizontal" }), _jsx(Grid, { container: true, spacing: 1, children: sortBy(suggestions.map(key => ({ key, used: columns.includes(key) })), 'used').map(({ key, used }) => {

package/components/routes/hits/search/grid/HitGrid.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { Add, FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
+import { FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
 import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 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 FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
-import DevelopmentIcon from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentIcon';
 import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { uniq } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
@@ -38,16 +37,14 @@ const HitGrid = () => {
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
-    const [analyticIds, setAnalyticIds] = useState({});
-    const columnModalRef = useRef();
-    const [columns, setColumns] = useState([
+    const [columns, setColumns] = useMyLocalStorageItem(StorageKey.GRID_COLUMNS, [
         'howler.outline.threat',
         'howler.outline.target',
         'howler.outline.indicators',
         'howler.outline.summary'
     ]);
-    const [columnWidths, setColumnWidths] = useState({});
-    const [showAddColumn, setShowAddColumn] = useState(false);
+    const [columnWidths, setColumnWidths] = useMyLocalStorageItem(StorageKey.GRID_COLUMN_WIDTHS, {});
+    const [analyticIds, setAnalyticIds] = useState({});
     const resizingCol = useRef();
     const showSelectBar = useMemo(() => {
         if (selectedHits.length > 1) {
@@ -78,10 +75,10 @@ const HitGrid = () => {
     }, []);
     const onMouseUp = useCallback(() => {
         const [col, element] = resizingCol.current;
-        setColumnWidths(_widths => ({
-            ..._widths,
+        setColumnWidths({
+            ...columnWidths,
             [col]: element.style.width
-        }));
+        });
         element.style.width = null;
         element.style.maxWidth = null;
         document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
@@ -90,7 +87,7 @@ const HitGrid = () => {
         });
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
-    }, [onMouseMove]);
+    }, [columnWidths, onMouseMove, setColumnWidths]);
     const onMouseDown = useCallback((col, event) => {
         event.stopPropagation();
         event.preventDefault();
@@ -106,12 +103,12 @@ const HitGrid = () => {
     }, [query, search]);
     const handleDragEnd = useCallback((event) => {
         const { active, over } = event;
-        if (active.id !== over.id) {
+        if (over && active.id !== over.id) {
             const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
             const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
             setColumns(arrayMove(columns, oldIndex, newIndex));
         }
-    }, [columns]);
+    }, [columns, setColumns]);
     const getSelectedId = useCallback((event) => {
         const target = event.target;
         const selectedElement = target.closest('[id]');
@@ -120,14 +117,14 @@ const HitGrid = () => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(DevelopmentIcon, {})] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
+    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total }))] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
                                     position: 'absolute',
                                     left: 0,
                                     right: 0,
                                     bottom: 0,
                                     borderBottomLeftRadius: theme.shape.borderRadius,
                                     borderBottomRightRadius: theme.shape.borderRadius
-                                } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", sx: { '& > *': { flex: 1 } }, children: [_jsx(QuerySettings, {}), response && (_jsx(SearchTotal, { sx: { alignSelf: 'center' }, color: "text.secondary", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { direction: "row", children: [_jsx(FlexOne, {}), _jsx(IconButton, { ref: columnModalRef, onClick: () => setShowAddColumn(true), children: _jsx(Add, { fontSize: "small" }) })] }), _jsx(AddColumnModal, { anchorEl: columnModalRef.current, open: showAddColumn, onClose: () => setShowAddColumn(false), columns: columns, addColumn: key => setColumns(_columns => [..._columns, key]) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
+                                } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => setColumns(uniq([...columns, key])) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
                                                 borderRight: 'thin solid',
                                                 borderRightColor: 'divider'
                                             }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));

package/components/routes/hits/view/HitViewer.js

@@ -128,7 +128,7 @@ const HitViewer = () => {
                         display: 'flex',
                         '& > .MuiPaper-root': { flex: 1 },
                         mr: orientation === 'vertical' ? 0 : -2
-                    }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY }), _jsx(HitLabels, { hit: hit }), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers })] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
+                    }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY, forceAllFields: true }), _jsx(HitLabels, { hit: hit }), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers })] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
                                 position: 'absolute',
                                 top: theme.spacing(2),
                                 right: theme.spacing(-6)

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/ViewCard.js

@@ -11,8 +11,9 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import HitContextMenu from '@cccsaurora/howler-ui/components/routes/hits/search/HitContextMenu';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
+import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
 // Custom hook to select hits by IDs with proper memoization
 const useSelectHitsByIds = (hitIds) => {
     const hitIdsRef = useRef(hitIds);
@@ -150,6 +151,6 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

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/locales/en/translation.json

@@ -534,8 +534,10 @@
     "route.dossiers.create": "New Dossier",
     "route.dossiers.default": "Default",
     "route.dossiers.edit": "Edit Dossier",
+    "route.dossiers.manager.create.success": "Dossier Created.",
     "route.dossiers.manager.delete": "Delete Dossier",
     "route.dossiers.manager.delete.success": "Dossier Removed.",
+    "route.dossiers.manager.edit.success": "Dossier Updated.",
     "route.dossiers.manager.field.query": "Query",
     "route.dossiers.manager.field.title": "Title",
     "route.dossiers.manager.field.type": "Type",

package/locales/fr/translation.json

@@ -539,8 +539,10 @@
     "route.dossiers.create": "Nouveau dossier",
     "route.dossiers.default": "Défaut",
     "route.dossiers.edit": "Modifier le dossier",
+    "route.dossiers.manager.create.success": "Dossier crée.",
     "route.dossiers.manager.delete": "Supprimer un dossier",
     "route.dossiers.manager.delete.success": "Dossier supprimé.",
+    "route.dossiers.manager.edit.success": "Dossier mise à jour.",
     "route.dossiers.manager.field.query": "Requête",
     "route.dossiers.manager.field.title": "Titre",
     "route.dossiers.manager.field.type": "Type",
@@ -635,7 +637,7 @@
     "route.home.add.visualization.status.description": "Quel est l'état des hits créés au cours des trois derniers mois ?",
     "route.home.add.visualization.unavailable": "Aucune option de visualisation disponible.",
     "route.home.alert.updated.description": "Des mises à jour ont été apportées aux alertes auxquelles vous participez. Depuis votre dernière consultation, {{count}} alertes ont été mises à jour",
-    "route.home.alert.updated.title": "Alert Updates",
+    "route.home.alert.updated.title": "Mises à jour d'alert",
     "route.home.description": "Bienvenue sur Howler. Vous pouvez ajouter des éléments à votre tableau de bord en utilisant les boutons ci-dessus.",
     "route.home.title": "Howler",
     "route.integrations": "Intégrations",

package/package.json

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

package/utils/constants.d.ts

@@ -55,6 +55,8 @@ export declare enum StorageKey {
     SEARCH_PANE_WIDTH = "search_pane_width",
     TEMPLATE_FIELD_COUNT = "template_field_count",
     GRID_COLLAPSE_COLUMN = "grid_collapse_column",
+    GRID_COLUMNS = "grid_columns",
+    GRID_COLUMN_WIDTHS = "grid_column_widths",
     QUERY_HISTORY = "query_history",
     LOGIN_NONCE = "login_nonce",
     DISPLAY_TYPE = "display_type"

package/utils/constants.js

@@ -60,6 +60,8 @@ export var StorageKey;
     StorageKey["SEARCH_PANE_WIDTH"] = "search_pane_width";
     StorageKey["TEMPLATE_FIELD_COUNT"] = "template_field_count";
     StorageKey["GRID_COLLAPSE_COLUMN"] = "grid_collapse_column";
+    StorageKey["GRID_COLUMNS"] = "grid_columns";
+    StorageKey["GRID_COLUMN_WIDTHS"] = "grid_column_widths";
     StorageKey["QUERY_HISTORY"] = "query_history";
     StorageKey["LOGIN_NONCE"] = "login_nonce";
     StorageKey["DISPLAY_TYPE"] = "display_type";