@cccsaurora/howler-ui 2.13.0-dev.125 → 2.13.0-dev.131
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/app/providers/ApiConfigProvider.js +2 -1
- package/components/routes/overviews/OverviewViewer.js +27 -18
- package/locales/en/translation.json +2 -0
- package/locales/fr/translation.json +2 -1
- package/models/entities/generated/ApiType.d.ts +7 -0
- package/package.json +1 -1
- package/plugins/borealis/components/BorealisTypography.js +4 -2
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, Tooltip, useTheme } from '@mui/material';
|
|
2
|
+
import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, useTheme } from '@mui/material';
|
|
3
3
|
import api from '@cccsaurora/howler-ui/api';
|
|
4
4
|
import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
|
|
5
5
|
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { useTranslation } from 'react-i18next';
|
|
7
|
-
import { Check, Delete, SsidChart } from '@mui/icons-material';
|
|
7
|
+
import { Check, DarkMode, Delete, SsidChart, WbSunny } from '@mui/icons-material';
|
|
8
|
+
import { useApp } from '@cccsaurora/howler-ui/commons/components/app/hooks';
|
|
8
9
|
import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
|
|
10
|
+
import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
|
|
9
11
|
import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
|
|
10
12
|
import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
|
|
11
13
|
import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
|
|
12
14
|
import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
|
|
15
|
+
import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
|
|
13
16
|
import { useSearchParams } from 'react-router-dom';
|
|
14
17
|
import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
|
|
15
18
|
import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
|
|
@@ -17,6 +20,8 @@ import OverviewEditor from './OverviewEditor';
|
|
|
17
20
|
import { useStartingTemplate } from './startingTemplate';
|
|
18
21
|
const OverviewViewer = () => {
|
|
19
22
|
const theme = useTheme();
|
|
23
|
+
const app = useApp();
|
|
24
|
+
const { lightTheme, darkTheme } = useThemeBuilder(useMyTheme());
|
|
20
25
|
const { t } = useTranslation();
|
|
21
26
|
const [params, setParams] = useSearchParams();
|
|
22
27
|
const { getOverviews } = useContext(OverviewContext);
|
|
@@ -24,6 +29,7 @@ const OverviewViewer = () => {
|
|
|
24
29
|
const [overviewList, setOverviewList] = useState([]);
|
|
25
30
|
const [selectedOverview, setSelectedOverview] = useState(null);
|
|
26
31
|
const [content, setContent] = useState('');
|
|
32
|
+
const [chosenTheme, setChosenTheme] = useState(app.theme);
|
|
27
33
|
const [analytics, setAnalytics] = useState([]);
|
|
28
34
|
const [detections, setDetections] = useState([]);
|
|
29
35
|
const [analytic, setAnalytic] = useState(params.get('analytic') ?? '');
|
|
@@ -173,7 +179,8 @@ const OverviewViewer = () => {
|
|
|
173
179
|
}, [onMouseMove, onMouseUp]);
|
|
174
180
|
const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
|
|
175
181
|
const noChange = useMemo(() => selectedOverview?.content === content, [content, selectedOverview?.content]);
|
|
176
|
-
|
|
182
|
+
const activeTheme = chosenTheme === 'light' ? lightTheme : darkTheme;
|
|
183
|
+
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 => {
|
|
177
184
|
if (e.ctrlKey && e.key === 's') {
|
|
178
185
|
if (!noChange) {
|
|
179
186
|
onSave();
|
|
@@ -199,20 +206,22 @@ const OverviewViewer = () => {
|
|
|
199
206
|
transform: `translateX(${x}px)`,
|
|
200
207
|
zIndex: 1000,
|
|
201
208
|
borderRadius: theme.shape.borderRadius
|
|
202
|
-
}, onMouseDown: onMouseDown }), _jsx(Box, { flex: 1, px: 2, sx: {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
209
|
+
}, onMouseDown: onMouseDown }), _jsx(ThemeProvider, { theme: activeTheme, children: _jsx(Box, { flex: 1, px: 2, sx: {
|
|
210
|
+
position: 'absolute',
|
|
211
|
+
top: 0,
|
|
212
|
+
left: `calc(50% + 7px + ${x}px)`,
|
|
213
|
+
bottom: 0,
|
|
214
|
+
right: 0,
|
|
215
|
+
display: 'flex',
|
|
216
|
+
alignItems: 'stretch',
|
|
217
|
+
justifyContent: 'stretch',
|
|
218
|
+
px: 1,
|
|
219
|
+
pt: 1,
|
|
220
|
+
mt: -1,
|
|
221
|
+
'& > *': { width: '100%' },
|
|
222
|
+
'& > div > :first-child': { mt: 0 },
|
|
223
|
+
backgroundColor: activeTheme.palette.background.default,
|
|
224
|
+
color: activeTheme.palette.text.primary
|
|
225
|
+
}, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) }) })] }))] })] }));
|
|
217
226
|
};
|
|
218
227
|
export default OverviewViewer;
|
|
@@ -587,6 +587,8 @@
|
|
|
587
587
|
"route.overviews.manager.search": "Search Overviews",
|
|
588
588
|
"route.overviews.manager.delete": "Delete Overview",
|
|
589
589
|
"route.overviews.manager.delete.success": "Overview Removed.",
|
|
590
|
+
"route.overviews.theme.light": "Preview in Light Mode",
|
|
591
|
+
"route.overviews.theme.dark": "Preview in Dark Mode",
|
|
590
592
|
"route.dossiers": "Dossiers",
|
|
591
593
|
"route.dossiers.default": "Default",
|
|
592
594
|
"route.dossiers.search.prompt": "Search by title, query, or owner.",
|
|
@@ -585,7 +585,8 @@
|
|
|
585
585
|
"route.overviews.manager.search": "Rechercher les vues d'ensemble",
|
|
586
586
|
"route.overviews.manager.delete": "Supprimer la vue d'ensemble",
|
|
587
587
|
"route.overviews.manager.delete.success": "Vue d'ensemble Supprimée.",
|
|
588
|
-
"route.overviews.
|
|
588
|
+
"route.overviews.theme.light": "Prévoyez en mode clair",
|
|
589
|
+
"route.overviews.theme.dark": "Prévoyez en mode sombre",
|
|
589
590
|
"route.dossiers": "Dossiers",
|
|
590
591
|
"route.dossiers.default": "Défaut",
|
|
591
592
|
"route.dossiers.search.prompt": "Recherche par titre, requête ou propriétaire.",
|
|
@@ -113,6 +113,7 @@ export interface APIConfiguration {
|
|
|
113
113
|
classification: string;
|
|
114
114
|
}[];
|
|
115
115
|
};
|
|
116
|
+
mapping: APIMappings;
|
|
116
117
|
features: {
|
|
117
118
|
borealis: boolean;
|
|
118
119
|
notebook: boolean;
|
|
@@ -257,9 +258,15 @@ export interface APIC12Ndef {
|
|
|
257
258
|
UNRESTRICTED: string;
|
|
258
259
|
RESTRICTED: string;
|
|
259
260
|
}
|
|
261
|
+
export interface APIMappings {
|
|
262
|
+
mapping: {
|
|
263
|
+
[index: string]: string;
|
|
264
|
+
};
|
|
265
|
+
}
|
|
260
266
|
export interface ApiType {
|
|
261
267
|
indexes: APIIndexes;
|
|
262
268
|
lookups: APILookups;
|
|
263
269
|
configuration: APIConfiguration;
|
|
264
270
|
c12nDef: APIC12Ndef;
|
|
271
|
+
mapping: APIMappings;
|
|
265
272
|
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Typography } from '@mui/material';
|
|
3
3
|
import { EnrichedTypography, useBorealisEnrichSelector } from 'borealis-ui';
|
|
4
|
-
import {
|
|
4
|
+
import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
|
|
5
|
+
import { memo, useContext } from 'react';
|
|
5
6
|
const BorealisTypography = ({ children, value, context, ...props }) => {
|
|
6
7
|
const guessType = useBorealisEnrichSelector(ctx => ctx.guessType);
|
|
7
|
-
const
|
|
8
|
+
const { config } = useContext(ApiConfigContext);
|
|
9
|
+
const type = config?.configuration?.mapping?.[value] ?? guessType(value);
|
|
8
10
|
if (!type) {
|
|
9
11
|
return _jsx(Typography, { ...props, children: children });
|
|
10
12
|
}
|