@cccsaurora/howler-ui 2.19.0-dev.1085 → 2.19.0-dev.1143

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

@@ -1,51 +1,34 @@
 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 { 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 { Info } from '@mui/icons-material';
+import { LinearProgress, Paper, Stack, TableBody, Typography, useTheme } from '@mui/material';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 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 SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
+import AddColumnModal from '@cccsaurora/howler-ui/components/elements/hit/grid/AddColumnModal';
+import HitTable from '@cccsaurora/howler-ui/components/elements/hit/grid/HitTable';
+import HitContextMenu from '@cccsaurora/howler-ui/components/elements/hit/HitContextMenu';
 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 { useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import HitContextMenu from '../HitContextMenu';
 import HitQuery from '../HitQuery';
 import QuerySettings from '../QuerySettings';
-import AddColumnModal from './AddColumnModal';
-import ColumnHeader from './ColumnHeader';
-import HitRow from './HitRow';
+import SearchActionMenu from '../shared/SearchActionMenu';
 const HitGrid = () => {
     const { t } = useTranslation();
     const theme = useTheme();
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const { onClick } = useHitSelection();
-    const { getMatchingAnalytic } = useMatchers();
     const search = useContextSelector(HitSearchContext, ctx => ctx.search);
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
-    const [columns, setColumns] = useMyLocalStorageItem(StorageKey.GRID_COLUMNS, [
-        'howler.outline.threat',
-        'howler.outline.target',
-        'howler.outline.indicators',
-        'howler.outline.summary'
-    ]);
-    const [columnWidths, setColumnWidths] = useMyLocalStorageItem(StorageKey.GRID_COLUMN_WIDTHS, {});
-    const [analyticIds, setAnalyticIds] = useState({});
-    const resizingCol = useRef();
+    const { columns, setColumns, isReady } = useContext(GridColumnsContext);
     const showSelectBar = useMemo(() => {
         if (selectedHits.length > 1) {
             return true;
@@ -55,60 +38,12 @@ const HitGrid = () => {
         }
         return false;
     }, [selected, selectedHits]);
-    useEffect(() => {
-        response?.items.forEach(hit => {
-            if (!analyticIds[hit.howler.analytic]) {
-                getMatchingAnalytic(hit).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id })));
-            }
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [analyticIds, response]);
-    const onMouseMove = useCallback((event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const [col, element] = resizingCol.current;
-        const rect = element.getBoundingClientRect();
-        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
-            el.style.maxWidth = rect.width + event.movementX + 'px';
-            el.style.width = rect.width + event.movementX + 'px';
-        });
-    }, []);
-    const onMouseUp = useCallback(() => {
-        const [col, element] = resizingCol.current;
-        setColumnWidths({
-            ...columnWidths,
-            [col]: element.style.width
-        });
-        element.style.width = null;
-        element.style.maxWidth = null;
-        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
-            el.style.maxWidth = null;
-            el.style.width = null;
-        });
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-    }, [columnWidths, onMouseMove, setColumnWidths]);
-    const onMouseDown = useCallback((col, event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        resizingCol.current = [col, event.target.parentElement];
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
-    }, [onMouseMove, onMouseUp]);
     const onScroll = useCallback((event) => {
         const target = event.target;
         if (target.scrollHeight - target.scrollTop === target.clientHeight) {
             search(query, true);
         }
     }, [query, search]);
-    const handleDragEnd = useCallback((event) => {
-        const { active, over } = event;
-        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, setColumns]);
     const getSelectedId = useCallback((event) => {
         const target = event.target;
         const selectedElement = target.closest('[id]');
@@ -117,16 +52,13 @@ 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", 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%", 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') })] }) }))] })] }));
+    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(SearchActionMenu, { query: query })] }), _jsx(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(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) })] }), 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, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsx(HitTable, { query: query, items: response?.items, refreshItems: search, ContextMenu: HitContextMenu, contextMenuProps: { Component: TableBody, getSelectedId: getSelectedId }, onItemClick: onClick }), (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') })] }) }))] })] }));
 };
 export default HitGrid;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDropDown, InfoOutlined, Settings, 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';
+import LayoutToggle from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+const LayoutSettings = () => {
+    const { t } = useTranslation();
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
+    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" }) })] }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: setDisplayType }), _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/shared/SearchActionMenu.d.ts

@@ -0,0 +1,4 @@
+declare const SearchActionMenu: ({ query }: {
+    query: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchActionMenu;

package/components/routes/hits/search/shared/SearchActionMenu.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Close, SavedSearch, Terminal } from '@mui/icons-material';
+import { IconButton, Stack, Tooltip } from '@mui/material';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import BundleParentMenu from './BundleParentMenu';
+import LayoutSettings from './LayoutSettings';
+const SearchActionMenu = ({ query }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const routeParams = useParams();
+    const bundleHit = useContextSelector(HitContext, ctx => location.pathname.startsWith('/bundles') ? ctx.hits[routeParams.id] : null);
+    return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [bundleHit?.howler.bundles.length > 0 && _jsx(BundleParentMenu, { bundle: bundleHit }), bundleHit && (_jsx(Tooltip, { title: t('hit.bundle.close'), children: _jsx(IconButton, { size: "small", onClick: () => navigate('/search'), children: _jsx(Close, {}) }) })), _jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsx(LayoutSettings, {})] }));
+};
+export default SearchActionMenu;

package/components/routes/home/ViewCard.js

@@ -6,9 +6,9 @@ import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppLi
 import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import HitContextMenu from '@cccsaurora/howler-ui/components/elements/hit/HitContextMenu';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 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 { Link, useNavigate } from 'react-router-dom';

package/components/routes/views/ViewComposer.js

@@ -1,25 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HelpOutline, Save } from '@mui/icons-material';
-import { Alert, Checkbox, CircularProgress, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import { HelpOutline, Save, Settings } from '@mui/icons-material';
+import { Alert, Checkbox, CircularProgress, LinearProgress, Paper, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 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 { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
 import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import AddColumnModal from '@cccsaurora/howler-ui/components/elements/hit/grid/AddColumnModal';
+import HitTable from '@cccsaurora/howler-ui/components/elements/hit/grid/HitTable';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import LayoutToggle, {} from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { uniq } from 'lodash-es';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
@@ -44,6 +52,7 @@ const ViewComposer = () => {
     const [title, setTitle] = useState('');
     const [type, setType] = useState('global');
     const [advanceOnTriage, setAdvanceOnTriage] = useState(false);
+    const { columns, setColumns, columnWidths, isReady } = useContext(GridColumnsContext);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
@@ -56,8 +65,14 @@ const ViewComposer = () => {
     const [searching, setSearching] = useState(false);
     const [error, setError] = useState(null);
     const [response, setResponse] = useState();
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
     const onSave = useCallback(async () => {
         setLoading(true);
+        const _columnData = columns.map(column => ({
+            field: column,
+            width: columnWidths[column] ?? null
+        }));
         try {
             if (!routeParams.id) {
                 const newView = await addView({
@@ -67,7 +82,9 @@ const ViewComposer = () => {
                     sort: sort || null,
                     span: span || null,
                     settings: {
-                        advance_on_triage: advanceOnTriage
+                        advance_on_triage: advanceOnTriage,
+                        display: displayType,
+                        columns: displayType === 'grid' ? _columnData : null
                     }
                 });
                 navigate(buildViewUrl(newView));
@@ -79,7 +96,11 @@ const ViewComposer = () => {
                     query,
                     sort,
                     span,
-                    settings: { advance_on_triage: advanceOnTriage }
+                    settings: {
+                        advance_on_triage: advanceOnTriage,
+                        display: displayType,
+                        columns: displayType === 'grid' ? _columnData : null
+                    }
                 });
             }
             showSuccessMessage(t(routeParams.id ? 'route.views.update.success' : 'route.views.create.success'));
@@ -101,7 +122,10 @@ const ViewComposer = () => {
         sort,
         span,
         advanceOnTriage,
+        displayType,
+        columns,
         navigate,
+        columnWidths,
         editView,
         showErrorMessage
     ]);
@@ -154,6 +178,8 @@ const ViewComposer = () => {
             setTitle(viewToEdit.title);
             setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
             setQuery(viewToEdit.query);
+            setDisplayType((viewToEdit.settings?.display ?? null));
+            setType(viewToEdit.type);
             if (viewToEdit.sort) {
                 setSort(viewToEdit.sort);
             }
@@ -172,6 +198,6 @@ const ViewComposer = () => {
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',
                                             mb: 0.5
-                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] }) })] }) }) }) }));
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(Stack, { direction: "row", width: "100%", spacing: 2, alignItems: "flex-start", paddingBottom: 1, children: _jsxs(Stack, { direction: "column", width: "100%", spacing: 1, children: [_jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsx(ChipPopper, { label: _jsx(Typography, { variant: "body2", children: t('view.settings') }), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, placement: "bottom-end", children: _jsxs(Stack, { direction: "column", spacing: 1, children: [_jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(FlexOne, {}), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, { component: "span", children: t('view.settings.layout') }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: setDisplayType, size: "small", allowNullValue: true })] })] }) })] })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "flex-end", justifyContent: "space-between", children: [response && (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })), _jsx(FlexOne, {}), displayType === 'grid' && (_jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) }))] }), _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: displayType === 'grid' ? (_jsx(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, children: _jsx(HitTable, { query: query, items: response?.items }) })) : (_jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] })) })] }) }) }) }));
 };
 export default ViewComposer;

package/locales/en/translation.json

@@ -322,6 +322,8 @@
     "modal.rule.title": "Create a New Rule",
     "no.data": "No Data",
     "none": "None",
+    "notebook.opens.panel": "Opens notebook panel",
+    "notebook.title": "Notebook",
     "on": "on",
     "open": "Open",
     "operations.add_label": "Add Label",
@@ -378,8 +380,8 @@
     "page.settings.local.details.drawer.description": "Instead of switching between a divided view and the drawer on different screen sizes, this setting forces Howler to always use the drawer.",
     "page.settings.local.flatten.json": "Flatten JSON in JSON View",
     "page.settings.local.flatten.json.description": "Instead of showing the object structure of the JSON, show it as flattened keys.",
-    "page.settings.local.hits.display_type": "Default display type for results",
-    "page.settings.local.hits.display_type.description": "This setting allows you to decide whether to use the list or grid view by default when searching.",
+    "page.settings.local.hits.display_type": "Display type for results",
+    "page.settings.local.hits.display_type.description": "This setting allows you to decide whether to use the list or grid view when searching.",
     "page.settings.local.hits.display_type.grid": "Grid",
     "page.settings.local.hits.display_type.list": "List",
     "page.settings.local.hits.field_count": "Template Field Count",
@@ -427,6 +429,9 @@
     "personalization.reset_text": "Reset to site defaults",
     "personalization.showbreadcrumbs": "Show Breadcrumbs",
     "personalization.sticky": "Sticky Topbar",
+    "pivot.description.none": "No description",
+    "pivot.dossier.open": "Open Dossier",
+    "pivot.url": "URL:",
     "query": "Query",
     "query.invalid": "Invalid query",
     "quicksearch.aria": "search",
@@ -758,9 +763,12 @@
     "usermenu.settings": "Settings",
     "using": "using",
     "view.assigned_to_me": "Assigned to Me",
+    "view.display.grid.inactive_warning": "The view has grid properties which cannot be applied",
     "view.notfound": "This view is not available to you, or does not exist.",
     "view.open": "Open View Query",
     "view.refresh": "Refresh View",
+    "view.settings": "View Settings",
     "view.settings.advance_on_triage": "Advance to next hit on triage",
-    "view.settings.advance_on_triage.description": "If this is enabled, triaging a hit on this view will automatically move to the next hit in line, making rapid triage of hits easier."
+    "view.settings.advance_on_triage.description": "If this is enabled, triaging a hit on this view will automatically move to the next hit in line, making rapid triage of hits easier.",
+    "view.settings.layout": "Default layout in search"
 }

package/locales/fr/translation.json

@@ -322,6 +322,8 @@
     "modal.rule.title": "Créer une nouvelle règle",
     "no.data": "Aucune donnée",
     "none": "Rien",
+    "notebook.opens.panel": "Ouvre le panneau des notes",
+    "notebook.title": "Carnet",
     "on": "sur",
     "open": "Ouvert",
     "operations.add_label": "Ajouter un label",
@@ -378,8 +380,8 @@
     "page.settings.local.details.drawer.description": "Au lieu de basculer entre une vue divisée et le tiroir en fonction de la taille de l'écran, ce paramètre oblige Howler à toujours utiliser le tiroir.",
     "page.settings.local.flatten.json": "Aplatir le JSON dans la vue JSON",
     "page.settings.local.flatten.json.description": "Au lieu d'afficher la structure d'objet du JSON, affichez-la sous forme de clés aplaties",
-    "page.settings.local.hits.display_type": "Type d'affichage par défaut pour les résultats",
-    "page.settings.local.hits.display_type.description": "Ce paramètre vous permet de choisir entre l'affichage sous forme de liste ou de grille par défaut lors d'une recherche.",
+    "page.settings.local.hits.display_type": "Type d'affichage pour les résultats",
+    "page.settings.local.hits.display_type.description": "Ce paramètre vous permet de choisir entre l'affichage sous forme de liste ou de grille lors d'une recherche.",
     "page.settings.local.hits.display_type.grid": "Grille",
     "page.settings.local.hits.display_type.list": "Liste",
     "page.settings.local.hits.field_count": "Nombre de champs du modèle",
@@ -427,6 +429,9 @@
     "personalization.reset_text": "Réinitialiser les paramètres",
     "personalization.showbreadcrumbs": "Afficher fils d'ariane",
     "personalization.sticky": "Barre supérieure collante",
+    "pivot.description.none": "Aucune description",
+    "pivot.dossier.open": "Ouvrir le dossier",
+    "pivot.url": "URL :",
     "query": "Requête",
     "query.invalid": "Requête invalide",
     "quicksearch.aria": "recherche",
@@ -758,9 +763,12 @@
     "usermenu.settings": "Paramètres",
     "using": "utilisant",
     "view.assigned_to_me": "Assigné à moi",
+    "view.display.grid.inactive_warning": "La vue possède des propriétés de grille qui ne peuvent pas être appliquées",
     "view.notfound": "Cette vue n'est pas disponible pour vous, ou n'existe pas.",
     "view.open": "Ouvrir requête de la vue",
     "view.refresh": "Rafraîchir la vue",
+    "view.settings": "Paramètres de vue",
     "view.settings.advance_on_triage": "Passer à la hit suivant lors du triage",
-    "view.settings.advance_on_triage.description": "Si cette option est activée, le triage d'une hit sur cette vue passera automatiquement à la hit suivant, ce qui facilitera le triage rapide des résultats."
+    "view.settings.advance_on_triage.description": "Si cette option est activée, le triage d'une hit sur cette vue passera automatiquement à la hit suivant, ce qui facilitera le triage rapide des résultats.",
+    "view.settings.layout": "Mise en page par défaut dans la recherche"
 }

package/models/entities/generated/Column.d.ts

@@ -0,0 +1,7 @@
+/**
+ * NOTE: This is an auto-generated file. Don't edit this manually.
+ */
+export interface Column {
+  field?: string;
+  width?: number;
+}

package/models/entities/generated/Host.d.ts

@@ -3,6 +3,7 @@
  */
 export interface Host {
   domain?: string;
+  hostname?: string;
   id?: string;
   ip?: string[];
   mac?: string[];

package/models/entities/generated/Settings.d.ts

@@ -1,6 +1,10 @@
+import type { Column } from './Column';
+
 /**
  * NOTE: This is an auto-generated file. Don't edit this manually.
  */
 export interface Settings {
   advance_on_triage?: boolean;
+  columns?: Column[];
+  display?: string;
 }

package/package.json

@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "2.19.0-dev.1085",
+  "version": "2.19.0-dev.1143",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -211,6 +211,7 @@
     "./components/elements/hit/aggregate/*": "./components/elements/hit/aggregate/*.js",
     "./components/elements/hit/outlines/*": "./components/elements/hit/outlines/*.js",
     "./components/elements/hit/actions/*": "./components/elements/hit/actions/*.js",
+    "./components/elements/hit/grid/*": "./components/elements/hit/grid/*.js",
     "./components/elements/hit/elements/*": "./components/elements/hit/elements/*.js",
     "./components/elements/hit/outlines/al/*": "./components/elements/hit/outlines/al/*.js",
     "./components/elements/addons/search/*": "./components/elements/addons/search/*.js",

package/utils/stringUtils.d.ts

@@ -6,3 +6,4 @@ export declare const sanitizeLuceneQuery: (query: string) => string;
 export declare const safeStringPropertyCompare: (propertyPath: string) => (a: unknown, b: unknown) => any;
 export declare const sanitizeMultilineLucene: (query: string) => string;
 export declare const validateRegex: (regex: string) => boolean;
+export declare const parsePixelSizeStringToInt: (size: string) => number;

package/utils/stringUtils.js

@@ -45,3 +45,10 @@ export const validateRegex = (regex) => {
         return false;
     }
 };
+export const parsePixelSizeStringToInt = (size) => {
+    const match = size.match(/^(\d+(\.\d+)?)(px)?$/);
+    if (match) {
+        return parseInt(match[1]);
+    }
+    return null;
+};

package/utils/stringUtils.test.js

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 import { describe, expect, it } from 'vitest';
-import { maxLenStr, nameToInitials, safeFieldValue, safeFieldValueURI, safeStringPropertyCompare, sanitizeLuceneQuery, sanitizeMultilineLucene, validateRegex } from './stringUtils';
+import { maxLenStr, nameToInitials, parsePixelSizeStringToInt, safeFieldValue, safeFieldValueURI, safeStringPropertyCompare, sanitizeLuceneQuery, sanitizeMultilineLucene, validateRegex } from './stringUtils';
 describe('nameToInitials', () => {
     it('returns initials from a standard first-last name', () => {
         expect(nameToInitials('John Doe')).toEqual(['J', 'D']);
@@ -157,3 +157,23 @@ describe('validateRegex', () => {
         expect(validateRegex('a{2,5}')).toBe(true);
     });
 });
+describe('parsePixelSizeStringToInt', () => {
+    it('parses a pixel size string with "px" suffix', () => {
+        expect(parsePixelSizeStringToInt('100px')).toBe(100);
+    });
+    it('parses a pixel size string without "px" suffix', () => {
+        expect(parsePixelSizeStringToInt('200')).toBe(200);
+    });
+    it('parses a pixel size string with decimal value', () => {
+        expect(parsePixelSizeStringToInt('150.5px')).toBe(150);
+    });
+    it('returns null for a non-numeric string', () => {
+        expect(parsePixelSizeStringToInt('abc')).toBeNull();
+    });
+    it('returns null for an empty string', () => {
+        expect(parsePixelSizeStringToInt('')).toBeNull();
+    });
+    it('returns null for a string with an invalid unit', () => {
+        expect(parsePixelSizeStringToInt('50rem')).toBeNull();
+    });
+});

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

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-const LayoutSettings = () => {
-    const { t } = useTranslation();
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
-    const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
-    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;