@cccsaurora/howler-ui 2.13.0-dev.129 → 2.13.0-dev.132

package/components/routes/overviews/OverviewViewer.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, Tooltip, useTheme } from '@mui/material';
+import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Check, Delete, SsidChart } from '@mui/icons-material';
+import { Check, DarkMode, Delete, SsidChart, WbSunny } from '@mui/icons-material';
+import { useApp } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
+import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
@@ -17,6 +20,8 @@ import OverviewEditor from './OverviewEditor';
 import { useStartingTemplate } from './startingTemplate';
 const OverviewViewer = () => {
     const theme = useTheme();
+    const app = useApp();
+    const { lightTheme, darkTheme } = useThemeBuilder(useMyTheme());
     const { t } = useTranslation();
     const [params, setParams] = useSearchParams();
     const { getOverviews } = useContext(OverviewContext);
@@ -24,6 +29,7 @@ const OverviewViewer = () => {
     const [overviewList, setOverviewList] = useState([]);
     const [selectedOverview, setSelectedOverview] = useState(null);
     const [content, setContent] = useState('');
+    const [chosenTheme, setChosenTheme] = useState(app.theme);
     const [analytics, setAnalytics] = useState([]);
     const [detections, setDetections] = useState([]);
     const [analytic, setAnalytic] = useState(params.get('analytic') ?? '');
@@ -173,7 +179,8 @@ const OverviewViewer = () => {
     }, [onMouseMove, onMouseUp]);
     const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
     const noChange = useMemo(() => selectedOverview?.content === content, [content, selectedOverview?.content]);
-    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), !analytics.find(_analytic => _analytic.name === analytic)?.rule ? (_jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.overviews.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
+    const activeTheme = chosenTheme === 'light' ? lightTheme : darkTheme;
+    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), !analytics.find(_analytic => _analytic.name === analytic)?.rule ? (_jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.overviews.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') }), _jsx("div", { style: { flex: 1 } }), _jsxs(ToggleButtonGroup, { exclusive: true, value: chosenTheme, onChange: (_event, value) => setChosenTheme(value), sx: { maxHeight: '40px' }, children: [_jsx(Tooltip, { title: t('route.overviews.theme.light'), children: _jsx(ToggleButton, { value: "light", children: _jsx(WbSunny, {}) }) }), _jsx(Tooltip, { title: t('route.overviews.theme.dark'), children: _jsx(ToggleButton, { value: "dark", children: _jsx(DarkMode, {}) }) })] })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
                             if (e.ctrlKey && e.key === 's') {
                                 if (!noChange) {
                                     onSave();
@@ -199,20 +206,22 @@ const OverviewViewer = () => {
                                     transform: `translateX(${x}px)`,
                                     zIndex: 1000,
                                     borderRadius: theme.shape.borderRadius
-                                }, onMouseDown: onMouseDown }), _jsx(Box, { flex: 1, px: 2, sx: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: `calc(50% + 7px + ${x}px)`,
-                                    bottom: 0,
-                                    right: 0,
-                                    display: 'flex',
-                                    alignItems: 'stretch',
-                                    justifyContent: 'stretch',
-                                    px: 1,
-                                    pt: 1,
-                                    mt: -1,
-                                    '& > *': { width: '100%' },
-                                    '& > div > :first-child': { mt: 0 }
-                                }, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) })] }))] })] }));
+                                }, onMouseDown: onMouseDown }), _jsx(ThemeProvider, { theme: activeTheme, children: _jsx(Box, { flex: 1, px: 2, sx: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: `calc(50% + 7px + ${x}px)`,
+                                        bottom: 0,
+                                        right: 0,
+                                        display: 'flex',
+                                        alignItems: 'stretch',
+                                        justifyContent: 'stretch',
+                                        px: 1,
+                                        pt: 1,
+                                        mt: -1,
+                                        '& > *': { width: '100%' },
+                                        '& > div > :first-child': { mt: 0 },
+                                        backgroundColor: activeTheme.palette.background.default,
+                                        color: activeTheme.palette.text.primary
+                                    }, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) }) })] }))] })] }));
 };
 export default OverviewViewer;

package/components/routes/views/Views.js

@@ -39,7 +39,7 @@ const ViewsBase = () => {
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
     const [response, setResponse] = useState(null);
-    const [types, setTypes] = useState([]);
+    const [type, setType] = useState(searchParams.get('type') || null);
     const [hasError, setHasError] = useState(false);
     const [searching, setSearching] = useState(false);
     const [favouritesOnly, setFavouritesOnly] = useState(false);
@@ -58,7 +58,7 @@ const ViewsBase = () => {
             setSearchParams(searchParams, { replace: 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' : ''})`;
+            const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${type ?? '*'}${type === 'personal' ? ' OR readonly' : ''})`;
             const favouritesQuery = favouritesOnly && user.favourite_views.length > 0 ? ` AND view_id:(${user.favourite_views.join(' OR ')})` : '';
             setResponse(await dispatchApi(api.search.view.post({
                 query: `(${phraseQuery}) AND ${typeQuery}${favouritesQuery}`,
@@ -78,7 +78,7 @@ const ViewsBase = () => {
         searchParams,
         user.username,
         user.favourite_views,
-        types,
+        type,
         favouritesOnly,
         dispatchApi,
         pageCount,
@@ -132,9 +132,29 @@ const ViewsBase = () => {
             setDefaultViewLoading(false);
         }
     }, [fetchViews]);
+    const onTypeChange = useCallback(async (_type) => {
+        setType(_type);
+        if (_type) {
+            searchParams.delete('type');
+            searchParams.set('type', _type);
+            setSearchParams(searchParams, { replace: true });
+        }
+        else if (searchParams.has('type')) {
+            searchParams.delete('type');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [searchParams, setSearchParams]);
     useEffect(() => {
+        let changed = false;
         if (!searchParams.has('offset')) {
             searchParams.set('offset', '0');
+            changed = true;
+        }
+        if (searchParams.has('type') && !['personal', 'global'].includes(searchParams.get('type'))) {
+            searchParams.delete('type');
+            changed = true;
+        }
+        if (changed) {
             setSearchParams(searchParams, { replace: true });
         }
     }, [searchParams, setSearchParams]);
@@ -150,12 +170,8 @@ const ViewsBase = () => {
             onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [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: 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 },
+    }, [offset, favouritesOnly, type]);
+    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: type, exclusive: true, onChange: (__, _type) => onTypeChange(_type), 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 } }) }));

package/locales/en/translation.json

@@ -587,6 +587,8 @@
     "route.overviews.manager.search": "Search Overviews",
     "route.overviews.manager.delete": "Delete Overview",
     "route.overviews.manager.delete.success": "Overview Removed.",
+    "route.overviews.theme.light": "Preview in Light Mode",
+    "route.overviews.theme.dark": "Preview in Dark Mode",
     "route.dossiers": "Dossiers",
     "route.dossiers.default": "Default",
     "route.dossiers.search.prompt": "Search by title, query, or owner.",

package/locales/fr/translation.json

@@ -585,7 +585,8 @@
     "route.overviews.manager.search": "Rechercher les vues d'ensemble",
     "route.overviews.manager.delete": "Supprimer la vue d'ensemble",
     "route.overviews.manager.delete.success": "Vue d'ensemble Supprimée.",
-    "route.overviews.rule.explanation": "Il s'agit d'une analyse Howler. Il n'y a qu'une seule détection, qui a été présélectionnée.",
+    "route.overviews.theme.light": "Prévoyez en mode clair",
+    "route.overviews.theme.dark": "Prévoyez en mode sombre",
     "route.dossiers": "Dossiers",
     "route.dossiers.default": "Défaut",
     "route.dossiers.search.prompt": "Recherche par titre, requête ou propriétaire.",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.13.0-dev.129",
+  "version": "2.13.0-dev.132",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",