@cccsaurora/howler-ui 2.12.1 → 2.13.0-dev.77

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

@@ -42,8 +42,8 @@ const HitFilter = ({ size }) => {
         setFilter('');
         setSavedFilter(null);
         if (!config.lookups[_category]) {
-            const facets = await api.search.facet.hit.post(_category, { query: 'howler.id:*' });
-            setCustomLookups(Object.keys(facets));
+            const facets = await api.search.facet.hit.post({ query: 'howler.id:*', fields: [_category] });
+            setCustomLookups(Object.keys(facets[_category]));
         }
         else {
             setCustomLookups([]);

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

@@ -4,7 +4,7 @@ import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import CustomSort from '../CustomSort';
 const CUSTOM = '__custom__';
@@ -21,8 +21,7 @@ const ACCEPTED_SORTS = [
 const HitSort = ({ size = 'small' }) => {
     const { t } = useTranslation();
     const location = useLocation();
-    const routeParams = useParams();
-    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
     const savedSort = useContextSelector(ParameterContext, ctx => ctx.sort);
     const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
     const sortEntries = useMemo(() => savedSort.split(',').filter(part => !!part), [savedSort]);
@@ -38,7 +37,6 @@ const HitSort = ({ size = 'small' }) => {
      * Should the custom sorter be shown? Defaults to true if there's more than one sort field, or we're sorting on a field not supported by the default dropdown
      */
     const [showCustomSort, setShowCustomSort] = useState(sortEntries.length > 1 || (sortEntries.length > 0 && !ACCEPTED_SORTS.includes(sortEntries[0]?.split(' ')[0])));
-    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
     /**
      * This handles changing the sort if the basic sorter is used, OR enables the custom sorting.
      */
@@ -51,14 +49,17 @@ const HitSort = ({ size = 'small' }) => {
         }
     }, [setSavedSort, sort]);
     useEffect(() => {
-        if (viewId) {
-            const selectedView = views.find(_view => _view.view_id === viewId);
+        if (location.search.includes('sort')) {
+            return;
+        }
+        (async () => {
+            const selectedView = await getCurrentView(true);
             if (selectedView?.sort && !location.search.includes('sort')) {
                 setSavedSort(selectedView.sort);
             }
-        }
+        })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [views, viewId]);
+    }, [getCurrentView]);
     return !showCustomSort ? (_jsxs(Stack, { direction: "row", spacing: 1, sx: { flex: 1.5 }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '175px' }, size: size, value: field, options: ACCEPTED_SORTS, getOptionLabel: option => (option === CUSTOM ? t('hit.search.custom') : option), isOptionEqualToValue: (option, value) => option === value || (!value && option === ACCEPTED_SORTS[0]), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => handleChange(value) }), _jsxs(Select, { size: size, sx: { minWidth: '150px' }, value: sort, onChange: e => setSavedSort(`${field} ${e.target.value}`), children: [_jsx(MenuItem, { value: "asc", children: t('asc') }), _jsx(MenuItem, { value: "desc", children: t('desc') })] })] })) : (_jsx(CustomSort, {}));
 };
 export default memo(HitSort);

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

@@ -10,7 +10,7 @@ import HitSort from './HitSort';
 import SearchSpan from './SearchSpan';
 const QuerySettings = ({ verticalSorters = false, boxSx }) => {
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     return (_jsxs(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: [_jsxs(Stack, { direction: verticalSorters ? 'column' : 'row', justifyContent: "space-between", spacing: 1, divider: !verticalSorters && _jsx(Divider, { flexItem: true, orientation: "vertical" }), sx: [
                     viewId &&
                         !selectedView && {

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

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Autocomplete, TextField } from '@mui/material';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
 const DATE_RANGES = [
@@ -18,23 +18,27 @@ const DATE_RANGES = [
 const SearchSpan = ({ omitCustom = false, size }) => {
     const { t } = useTranslation();
     const location = useLocation();
-    const routeParams = useParams();
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
     const setSpan = useContextSelector(ParameterContext, ctx => ctx.setSpan);
-    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(_view => _view.view_id === viewId));
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
     useEffect(() => {
-        if (!selectedView?.span || location.search.includes('span')) {
+        if (location.search.includes('span')) {
             return;
         }
-        if (selectedView.span.includes(':')) {
-            setSpan(convertLuceneToDate(selectedView.span));
-        }
-        else {
-            setSpan(selectedView.span);
-        }
+        (async () => {
+            const viewSpan = (await getCurrentView(true))?.span;
+            if (!viewSpan) {
+                return;
+            }
+            if (viewSpan.includes(':')) {
+                setSpan(convertLuceneToDate(viewSpan));
+            }
+            else {
+                setSpan(viewSpan);
+            }
+        })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedView]);
+    }, [getCurrentView]);
     return (_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }));
 };
 export default memo(SearchSpan);

package/components/routes/home/AddNewCard.js

@@ -16,9 +16,12 @@ const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detect
 const AddNewCard = ({ dashboard, addCard }) => {
     const { t } = useTranslation();
     const views = useContextSelector(ViewContext, ctx => ctx.views ?? []);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const [selectedType, setSelectedType] = useState('');
     const [analytics, setAnalytics] = useState([]);
     const [config, _setConfig] = useState({});
+    const [viewOpen, setViewOpen] = useState(false);
+    const [viewLoading, setViewLoading] = useState(false);
     const setConfig = useCallback((key, value) => _setConfig(_config => ({ ..._config, [key]: value })), []);
     const _addCard = useCallback(() => {
         if (!selectedType) {
@@ -43,9 +46,19 @@ const AddNewCard = ({ dashboard, addCard }) => {
             _setConfig({});
         }
     }, [selectedType]);
+    const onViewOpen = useCallback(async () => {
+        setViewOpen(true);
+        setViewLoading(true);
+        try {
+            await fetchViews();
+        }
+        finally {
+            setViewLoading(false);
+        }
+    }, [fetchViews]);
     return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                             opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), options: views, filterOptions: (options, state) => options.filter(opt => !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
                                             (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                                 opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },
                                             _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));

package/components/routes/home/ViewCard.js

@@ -17,7 +17,11 @@ const ViewCard = ({ viewId, limit }) => {
     const { dispatchApi } = useMyApi();
     const [hits, setHits] = useState([]);
     const [loading, setLoading] = useState(false);
-    const view = useContextSelector(ViewContext, ctx => ctx.views?.find(_view => _view.view_id === viewId));
+    const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    useEffect(() => {
+        fetchViews([viewId]);
+    }, [fetchViews, viewId]);
     useEffect(() => {
         if (!view?.query) {
             return;

package/components/routes/home/index.js

@@ -77,7 +77,7 @@ const Home = () => {
         api.search.hit
             .post({
             query: updateQuery,
-            rows: 5
+            rows: 0
         })
             .then(result => setUpdatedHitTotal(result.total));
     }, [updateQuery]);

package/components/routes/views/ViewComposer.js

@@ -36,7 +36,7 @@ const ViewComposer = () => {
     const navigate = useNavigate();
     const addView = useContextSelector(ViewContext, ctx => ctx.addView);
     const editView = useContextSelector(ViewContext, ctx => ctx.editView);
-    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
     // view state
@@ -130,29 +130,30 @@ const ViewComposer = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sort, span]);
     useEffect(() => {
-        if (routeParams.id) {
-            const viewToEdit = views?.find(_view => _view.view_id === routeParams.id);
-            if (!viewToEdit && views?.length > 0) {
+        if (!routeParams.id) {
+            return;
+        }
+        (async () => {
+            const viewToEdit = await getCurrentView();
+            if (!viewToEdit) {
                 setError('route.views.missing');
                 return;
             }
             else {
                 setError(null);
             }
-            if (viewToEdit) {
-                setTitle(viewToEdit.title);
-                setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
-                setQuery(viewToEdit.query);
-                if (viewToEdit.sort) {
-                    setSort(viewToEdit.sort);
-                }
-                if (viewToEdit.span) {
-                    setSpan(viewToEdit.span);
-                }
+            setTitle(viewToEdit.title);
+            setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
+            setQuery(viewToEdit.query);
+            if (viewToEdit.sort) {
+                setSort(viewToEdit.sort);
             }
-        }
+            if (viewToEdit.span) {
+                setSpan(viewToEdit.span);
+            }
+        })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [routeParams.id, views]);
+    }, [routeParams.id, getCurrentView]);
     return (_jsx(FlexPort, { children: _jsx(ErrorBoundary, { children: _jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(VSBox, { top: 0, children: [_jsx(VSBoxHeader, { pb: 1, children: _jsxs(Stack, { spacing: 1, children: [error && (_jsx(Alert, { variant: "outlined", severity: "error", children: t(error) })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { label: t('route.views.name'), size: "small", value: title, onChange: e => setTitle(e.target.value), fullWidth: true }), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, onChange: (__, _type) => {
                                                     if (_type) {
                                                         setType(_type);

package/components/routes/views/Views.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clear, Edit, SavedSearch, Star, StarBorder } from '@mui/icons-material';
 import { Autocomplete, Card, Checkbox, IconButton, Skeleton, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
@@ -12,6 +13,7 @@ import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemM
 import { ViewTitle } from '@cccsaurora/howler-ui/components/elements/view/ViewTitle';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { isNull, omitBy, size } from 'lodash-es';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
@@ -24,8 +26,8 @@ const ViewsBase = () => {
     const { user } = useAppUser();
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
-    const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
     const removeFavourite = useContextSelector(ViewContext, ctx => ctx.removeFavourite);
     const removeView = useContextSelector(ViewContext, ctx => ctx.removeView);
     const views = useContextSelector(ViewContext, ctx => ctx.views);
@@ -41,6 +43,8 @@ const ViewsBase = () => {
     const [hasError, setHasError] = useState(false);
     const [searching, setSearching] = useState(false);
     const [favouritesOnly, setFavouritesOnly] = useState(false);
+    const [defaultViewOpen, setDefaultViewOpen] = useState(false);
+    const [defaultViewLoading, setDefaultViewLoading] = useState(false);
     const onSearch = useCallback(async () => {
         try {
             setSearching(true);
@@ -52,7 +56,6 @@ const ViewsBase = () => {
                 searchParams.delete('phrase');
             }
             setSearchParams(searchParams, { replace: true });
-            fetchViews(true);
             const searchTerm = phrase ? `*${sanitizeLuceneQuery(phrase)}*` : '*';
             const phraseQuery = FIELDS_TO_SEARCH.map(_field => `${_field}:${searchTerm}`).join(' OR ');
             const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(' OR ') || '*'}${types.includes('personal') ? ' OR readonly' : ''})`;
@@ -73,7 +76,6 @@ const ViewsBase = () => {
         phrase,
         setSearchParams,
         searchParams,
-        fetchViews,
         user.username,
         user.favourite_views,
         types,
@@ -105,29 +107,37 @@ const ViewsBase = () => {
     const onDelete = useCallback(async (event, id) => {
         event.preventDefault();
         event.stopPropagation();
-        await dispatchApi(removeView(id));
+        await removeView(id);
         onSearch();
-    }, [dispatchApi, onSearch, removeView]);
+    }, [onSearch, removeView]);
     const onFavourite = useCallback(async (event, id) => {
         event.preventDefault();
         if (user.favourite_views?.includes(id)) {
-            await dispatchApi(removeFavourite(id));
+            await removeFavourite(id);
             if (user.favourite_views?.length < 2) {
                 setFavouritesOnly(false);
             }
         }
         else {
-            await dispatchApi(addFavourite(id));
+            await addFavourite(id);
+        }
+    }, [addFavourite, removeFavourite, user.favourite_views]);
+    const onDefaultViewOpen = useCallback(async () => {
+        setDefaultViewOpen(true);
+        setDefaultViewLoading(true);
+        try {
+            await fetchViews();
         }
-    }, [addFavourite, dispatchApi, removeFavourite, user.favourite_views]);
+        finally {
+            setDefaultViewLoading(false);
+        }
+    }, [fetchViews]);
     useEffect(() => {
-        onSearch();
         if (!searchParams.has('offset')) {
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatchApi, types]);
+    }, [searchParams, setSearchParams]);
     useEffect(() => {
         if (response?.total <= offset) {
             setOffset(0);
@@ -140,13 +150,14 @@ const ViewsBase = () => {
             onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [offset, favouritesOnly]);
+    }, [offset, favouritesOnly, types]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", value: types, onChange: (__, _types) => {
                     if (_types) {
                         setTypes(_types.length < 2 ? _types : []);
                     }
-                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: views?.length > 0 ? (_jsx(Autocomplete, { options: views, renderOption: (props, o) => (_jsx("li", { ...props, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }) })), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
-                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views?.find(v => v.view_id === defaultView) ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: `/views/${item.item.view_id}`, children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
+                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNull)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
+                _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
+                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: `/views/${item.item.view_id}`, children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
                         (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
 };
 const Views = () => {

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.12.1",
+  "version": "2.13.0-dev.77",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -201,6 +201,10 @@
     "./components/routes/analytics/widgets/*": "./components/routes/analytics/widgets/*.js",
     "./components/logins/hooks/*": "./components/logins/hooks/*.js",
     "./components/logins/auth/*": "./components/logins/auth/*.js",
+    "./plugins/borealis/*": "./plugins/borealis/*.js",
+    "./plugins/borealis": "./plugins/borealis/index.js",
+    "./plugins/borealis/components/*": "./plugins/borealis/components/*.js",
+    "./plugins/borealis/locales/*": "./plugins/borealis/locales/*.js",
     "./api/search/*": "./api/search/*.js",
     "./api/search": "./api/search/index.js",
     "./api/analytic/*": "./api/analytic/*.js",

package/plugins/borealis/Provider.d.ts

@@ -0,0 +1,3 @@
+import { type PropsWithChildren } from 'react';
+declare const Provider: React.FC<PropsWithChildren<{}>>;
+export default Provider;

package/plugins/borealis/Provider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BorealisProvider } from 'borealis-ui/dist/hooks/BorealisProvider';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
+const Provider = ({ children }) => {
+    const apiConfig = useContext(ApiConfigContext);
+    return (_jsx(BorealisProvider, { baseURL: location.origin + '/api/v1/borealis', getToken: () => getStored(StorageKey.APP_TOKEN), enabled: apiConfig.config?.configuration?.features?.borealis, publicIconify: false, customIconify: location.origin.includes('localhost')
+            ? 'https://icons.dev.analysis.cyber.gc.ca'
+            : location.origin.replace(/howler(-stg)?/, 'icons'), defaultTimeout: 5, i18next: useTranslation('borealis'), chunkSize: 50, children: children }));
+};
+export default Provider;

package/plugins/borealis/components/BorealisChip.d.ts

@@ -0,0 +1,3 @@
+import type { PluginChipProps } from '@cccsaurora/howler-ui/components/elements/PluginChip';
+declare const _default: import("react").NamedExoticComponent<PluginChipProps>;
+export default _default;

package/plugins/borealis/components/BorealisChip.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from '@mui/material';
+import { EnrichedChip, useBorealisEnrichSelector } from 'borealis-ui';
+import { memo } from 'react';
+const BorealisChip = ({ children, value, context, ...props }) => {
+    const guessType = useBorealisEnrichSelector(ctx => ctx.guessType);
+    const type = guessType(value);
+    if (!type) {
+        return _jsx(Chip, { ...props, children: children });
+    }
+    let enrichedProps = {
+        ...props,
+        value
+    };
+    delete enrichedProps.label;
+    if (context === 'summary') {
+        enrichedProps = {
+            ...enrichedProps,
+            sx: [
+                ...(Array.isArray(enrichedProps.sx) ? enrichedProps.sx : [enrichedProps.sx]),
+                [{ height: '24px', '& .iconify': { fontSize: '1em' } }]
+            ]
+        };
+    }
+    return _jsx(EnrichedChip, { ...enrichedProps, type: type });
+};
+export default memo(BorealisChip);

package/plugins/borealis/components/BorealisLeadForm.d.ts

@@ -0,0 +1,4 @@
+import type { LeadFormProps } from '@cccsaurora/howler-ui/components/routes/dossiers/LeadEditor';
+import { type FC } from 'react';
+declare const BorealisLeadForm: FC<LeadFormProps>;
+export default BorealisLeadForm;

package/plugins/borealis/components/BorealisLeadForm.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Divider, ListItemText, TextField, Typography } from '@mui/material';
+import { useBorealisEnrichSelector, useBorealisFetcherSelector } from 'borealis-ui';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const BorealisLeadForm = ({ lead, metadata, update, updateMetadata }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const fetchers = useBorealisFetcherSelector(ctx => ctx.fetchers);
+    const types = useBorealisEnrichSelector(ctx => ctx.typesDetection);
+    const [showCustom, setShowCustom] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(Autocomplete, { disabled: !lead, options: Object.keys(fetchers), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.borealis') }), value: Object.keys(fetchers).includes(lead?.content) ? lead.content : '', onChange: (_ev, content) => update({ content, metadata: '{}' }), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: _jsx("code", { children: option }), secondary: fetchers[option].description })) }), _jsx(Autocomplete, { options: Object.keys(types), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.borealis.type') }), value: metadata?.type ?? '', onChange: (_ev, type) => updateMetadata({ type }) }), _jsx(Autocomplete, { options: ['custom', ...Object.keys(config.indexes.hit)], disabled: !metadata?.type || !types[metadata.type], renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.borealis.value') })), getOptionLabel: opt => t(opt), value: metadata?.value ?? '', onChange: (_ev, value) => {
+                    if (value === 'custom') {
+                        setShowCustom(true);
+                    }
+                    else {
+                        setShowCustom(false);
+                        updateMetadata({ value });
+                    }
+                } }), showCustom && (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.borealis.value.custom'), value: metadata?.value ?? '', disabled: !metadata?.type || !types[metadata.type], fullWidth: true, onChange: ev => updateMetadata({ value: ev.target.value }) }), _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mt: '0 !important' }, children: t('route.dossiers.manager.borealis.value.description') })] }))] }));
+};
+export default BorealisLeadForm;

package/plugins/borealis/components/BorealisPivot.d.ts

@@ -0,0 +1,3 @@
+import type { PivotLinkProps } from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+declare const _default: import("react").NamedExoticComponent<PivotLinkProps>;
+export default _default;

package/plugins/borealis/components/BorealisPivot.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Settings } from '@mui/icons-material';
+import { Divider, IconButton, Stack, Typography } from '@mui/material';
+import { useBorealisActionsSelector, useBorealisEnrichSelector } from 'borealis-ui';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { get } from 'lodash-es';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const BorealisPivot = ({ pivot, hit, compact }) => {
+    const guessType = useBorealisEnrichSelector(ctx => ctx?.guessType);
+    const { showErrorMessage } = useMySnackbar();
+    const { i18n, t } = useTranslation();
+    const actions = useBorealisActionsSelector(ctx => ctx?.availableActions ?? {});
+    const executeAction = useBorealisActionsSelector(ctx => ctx?.executeAction);
+    const [loading, setLoading] = useState(false);
+    const onBorealisClick = useCallback(async (event, forceMenu = false) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (loading) {
+            return;
+        }
+        if (!actions[pivot.value]) {
+            showErrorMessage(t('pivot.borealis.missing'));
+            return;
+        }
+        setLoading(true);
+        const data = Object.fromEntries(pivot.mappings.map(_mapping => {
+            const value = _mapping.field !== 'custom' ? get(hit, _mapping.field) : _mapping.custom_value;
+            if (['selector', 'selectors'].includes(_mapping.key)) {
+                if (Array.isArray(value)) {
+                    return [
+                        _mapping.key,
+                        value.map(val => ({
+                            // TODO: Use the mapped borealis values here eventually
+                            type: guessType(val),
+                            value: val
+                        }))
+                    ];
+                }
+                return [
+                    _mapping.key,
+                    {
+                        // TODO: Use the mapped borealis values here eventually
+                        type: guessType(value),
+                        value
+                    }
+                ];
+            }
+            return [_mapping.key, value];
+        }));
+        const selectors = (actions[pivot.value].accept_multiple ? [data.selectors] : [data.selector]).flat();
+        delete data.selector;
+        delete data.selectors;
+        try {
+            await executeAction(pivot.value, selectors, data, { forceMenu });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [actions, executeAction, guessType, hit, loading, pivot.mappings, pivot.value, showErrorMessage, t]);
+    if (!actions[pivot.value]) {
+        return;
+    }
+    return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: e => onBorealisClick(e), sx: [
+            theme => ({
+                backgroundColor: 'transparent',
+                transition: theme.transitions.create(['border-color']),
+                '&:hover': { borderColor: 'primary.main' },
+                '& > div': {
+                    height: '100%'
+                }
+            }),
+            loading
+                ? { opacity: 0.5, pointerEvents: 'none' }
+                : {
+                    cursor: 'pointer'
+                },
+            !compact && { border: 'thin solid', borderColor: 'transparent' }
+        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [_jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }), _jsx(Typography, { children: pivot.label[i18n.language] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(IconButton, { size: "small", onClick: e => onBorealisClick(e, true), children: _jsx(Settings, { fontSize: "small" }) })] }) }));
+};
+export default memo(BorealisPivot);

package/plugins/borealis/components/BorealisPivotForm.d.ts

@@ -0,0 +1,4 @@
+import type { PivotFormProps } from '@cccsaurora/howler-ui/components/routes/dossiers/PivotForm';
+import { type FC } from 'react';
+declare const BorealisPivotForm: FC<PivotFormProps>;
+export default BorealisPivotForm;

package/plugins/borealis/components/BorealisPivotForm.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Autocomplete, Divider, Stack, TextField, Typography, useTheme } from '@mui/material';
+import { useBorealisActionsSelector } from 'borealis-ui';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { Fragment, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+const BorealisPivotForm = ({ pivot, update }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const actions = useBorealisActionsSelector(ctx => ctx?.availableActions);
+    return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { fullWidth: true, disabled: !pivot, options: Object.entries(actions)
+                    .filter(([_key, definition]) => !!definition && definition.format == 'pivot')
+                    .map(([key]) => key), renderOption: ({ key, ...optionProps }, actionId) => {
+                    const definition = actions[actionId];
+                    return (_jsxs(Stack, { component: "li", ...optionProps, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "start", alignItems: "center", children: [_jsx(Typography, { children: definition.name }), _jsx("pre", { style: {
+                                            fontSize: '0.85rem',
+                                            border: `thin solid ${theme.palette.divider}`,
+                                            padding: theme.spacing(0.5),
+                                            borderRadius: theme.shape.borderRadius
+                                        }, children: actionId })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", alignSelf: "start", children: definition.summary })] }, key));
+                }, getOptionLabel: opt => actions[opt]?.name ?? '', renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.value') })), value: pivot?.value ?? '', onChange: (_ev, value) => update({
+                    value,
+                    mappings: [
+                        { key: actions[value].accept_multiple ? 'selectors' : 'selector', field: 'howler.id' },
+                        ...Object.entries(actions[value].params?.properties ?? [])
+                            .filter(([property]) => !['selector', 'selectors'].includes(property))
+                            .map(([prop, schema]) => ({
+                            key: prop,
+                            field: typeof schema === 'boolean' || !schema.default ? null : 'custom',
+                            custom_value: typeof schema !== 'boolean' && !!schema.default ? schema.default.toString() : null
+                        }))
+                    ]
+                }) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), pivot?.mappings?.map((_mapping, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            _jsxs(Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.key'), disabled: !pivot, value: _mapping?.key ?? '', onChange: ev => update({
+                                    mappings: pivot.mappings.map((_m, _index) => index === _index ? { ..._m, key: ev.target.value } : _m)
+                                }) }), _jsx(Autocomplete, { fullWidth: true, disabled: !pivot, options: ['custom', 'unset', ...Object.keys(config.indexes.hit)], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.mapping.field'), sx: { minWidth: '150px' } })), getOptionLabel: opt => t(opt), value: _mapping.field ?? '', onChange: (_ev, field) => update({
+                                    mappings: pivot.mappings.map((_m, _index) => (index === _index ? { ..._m, field } : _m))
+                                }) })] }), _mapping.field === 'custom' && (_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.custom'), disabled: !pivot, value: _mapping?.custom_value ?? '', onChange: ev => update({
+                            mappings: pivot.mappings.map((_m, _index) => index === _index ? { ..._m, custom_value: ev.target.value } : _m)
+                        }) }))] }, index)))] }));
+};
+export default BorealisPivotForm;