@cccsaurora/howler-ui 3.1.0-dev.1627 → 3.1.0-dev.1634

package/components/elements/hit/HitBanner.js

@@ -3,7 +3,7 @@ import { OpenInNew } from '@mui/icons-material';
 import { Box, Chip, Grid, Stack, Tooltip, Typography, chipClasses, useTheme } from '@mui/material';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { Fragment, useCallback, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { getEscalationColor, getProviderColor } from '@cccsaurora/howler-ui/utils/utils';
@@ -15,6 +15,14 @@ import HitTimestamp from './elements/HitTimestamp';
 import HitBannerTooltip from './HitBannerTooltip';
 import { HitLayout } from './HitLayout';
 import RelatedRecords from './related/RelatedRecords';
+const Wrapper = ({ compressed, hit, textVariant, i18nKey, value, field, ...typographyProps }) => {
+    const { t } = useTranslation();
+    const children = (_jsxs(Stack, { direction: "row", spacing: 1, flex: 1, sx: { lineHeight: '20px', '& .iconify': { maxHeight: '20px' } }, children: [_jsxs(Typography, { variant: textVariant, noWrap: compressed, fontWeight: "bold", textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, sx: [
+                    { display: 'flex', flexDirection: 'row' },
+                    ...(typographyProps?.sx && Array.isArray(typographyProps.sx) ? typographyProps.sx : [typographyProps?.sx])
+                ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, obj: hit }, val)))] }));
+    return compressed ? (_jsx(Tooltip, { title: Array.isArray(value) ? (_jsx("div", { children: value.map(indicator => (_jsx("p", { style: { margin: 0, padding: 0 }, children: indicator }, indicator))) })) : (value), children: children })) : (children);
+};
 const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned = true }) => {
     const { t } = useTranslation();
     const theme = useTheme();
@@ -22,19 +30,9 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
     const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
     const providerColor = getProviderColor(hit?.event?.provider);
-    /**
-     * The tooltips are necessary only when in the most compressed format
-     */
-    const Wrapper = useCallback(({ i18nKey, value, field, ...typographyProps }) => {
-        const _children = (_jsxs(Stack, { direction: "row", spacing: 1, flex: 1, children: [_jsxs(Typography, { variant: textVariant, noWrap: compressed, fontWeight: "bold", textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, sx: [
-                        { display: 'flex', flexDirection: 'row' },
-                        ...(typographyProps?.sx && Array.isArray(typographyProps.sx) ? typographyProps.sx : [typographyProps?.sx])
-                    ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, obj: hit }, val)))] }));
-        return compressed ? (_jsx(Tooltip, { title: Array.isArray(value) ? (_jsx("div", { children: value.map(_indicator => (_jsx("p", { style: { margin: 0, padding: 0 }, children: _indicator }, _indicator))) })) : (value), children: _children })) : (_children);
-    }, [compressed, hit, t, textVariant]);
-    return (_jsx(Box, { sx: { width: '100%', ml: 0, overflow: 'hidden', color: 'text.primary' }, children: _jsxs(Stack, { spacing: layout !== HitLayout.COMFY ? 0.25 : 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", alignItems: "center", children: [_jsx(HitBannerTooltip, { hit: hit, children: _jsx(Chip, { sx: { backgroundColor: providerColor, color: theme.palette.getContrastText(providerColor) }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }) }), _jsx(AnalyticLink, { lazy: lazy, hit: hit }), _jsx("div", { style: { flex: 1 } }), _jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status ?? '') && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" })), _jsx(HitTimestamp, { hit: hit, layout: layout }), _jsx(Assigned, { hit: hit, layout: layout, showAssigned: showAssigned }), (hit.howler.related?.length ?? 0) > 0 && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => (_jsx(Fragment, { children: pluginStore.executeFunction(`${plugin}.status`, { hit, layout }) }, plugin)))] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: getEscalationColor(hit.howler.escalation) + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), (hit.howler.outline.indicators?.length ?? 0) > 0 && (_jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.25 : 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, fontWeight: "bold", children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators ?? []).map((_indicator, index) => {
+    return (_jsx(Box, { sx: { width: '100%', ml: 0, overflow: 'hidden', color: 'text.primary' }, children: _jsxs(Stack, { spacing: layout !== HitLayout.COMFY ? 0.25 : 1, children: [_jsxs(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", alignItems: "center", children: [_jsx(HitBannerTooltip, { hit: hit, children: _jsx(Chip, { sx: { backgroundColor: providerColor, color: theme.palette.getContrastText(providerColor) }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }) }), _jsx(AnalyticLink, { lazy: lazy, hit: hit }), _jsx("div", { style: { flex: 1 } }), _jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status ?? '') && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" })), _jsx(HitTimestamp, { hit: hit, layout: layout }), _jsx(Assigned, { hit: hit, layout: layout, showAssigned: showAssigned }), (hit.howler.related?.length ?? 0) > 0 && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => (_jsx(Fragment, { children: pluginStore.executeFunction(`${plugin}.status`, { hit, layout }) }, plugin)))] }), hit.howler?.rationale && (_jsx(Wrapper, { fontWeight: "bold", color: getEscalationColor(hit.howler.escalation) + '.main', compressed: compressed, hit: hit, textVariant: textVariant, i18nKey: "hit.header.rationale", value: hit.howler.rationale, field: "howler.rationale" })), hit.howler?.outline && (_jsxs(_Fragment, { children: [hit.howler.outline.threat && (_jsx(Wrapper, { compressed: compressed, hit: hit, textVariant: textVariant, i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" })), hit.howler.outline.target && (_jsx(Wrapper, { compressed: compressed, hit: hit, textVariant: textVariant, i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" })), (hit.howler.outline.indicators?.length ?? 0) > 0 && (_jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.25 : 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, fontWeight: "bold", pr: 1, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, children: uniq(hit.howler.outline.indicators ?? []).map((_indicator, index) => {
                                         return (_jsx(Grid, { children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < (hit.howler.outline?.indicators?.length ?? 0) - 1 && (_jsx(Typography, { variant: textVariant, children: ',' }))] }) }, _indicator));
-                                    }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary, paragraph: true, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }], field: "howler.outline.summary" })), hit.howler.links?.[0]?.href && (_jsx(Chip, { icon: _jsx(OpenInNew, {}), label: hit.howler.links[0].title || t('hit.header.link'), size: layout !== HitLayout.COMFY ? 'small' : 'medium', component: "a", href: hit.howler.links[0].href, target: "_blank", rel: "noopener noreferrer", sx: { [`.${chipClasses.label}`]: { cursor: 'pointer !important' }, alignSelf: 'start' }, onClick: e => {
+                                    }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { compressed: compressed, hit: hit, textVariant: textVariant, i18nKey: "hit.header.summary", value: hit.howler.outline.summary, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }], field: "howler.outline.summary" })), hit.howler.links?.[0]?.href && (_jsx(Chip, { icon: _jsx(OpenInNew, {}), label: hit.howler.links[0].title || t('hit.header.link'), size: layout !== HitLayout.COMFY ? 'small' : 'medium', component: "a", href: hit.howler.links[0].href, target: "_blank", rel: "noopener noreferrer", sx: { [`.${chipClasses.label}`]: { cursor: 'pointer !important' }, alignSelf: 'start' }, onClick: e => {
                                 e.stopPropagation();
                             } }))] }))] }) }));
 };

package/components/elements/hit/HitBanner.test.js

@@ -117,7 +117,8 @@ describe('HitBanner', () => {
         renderHitBanner();
         expect(screen.getByText('Test Org')).toBeInTheDocument();
         expect(screen.getByTestId('analytic-link')).toBeInTheDocument();
-        expect(screen.getByText('hit.header.rationale: Escalation rationale')).toBeInTheDocument();
+        expect(screen.getByText('hit.header.rationale:')).toBeInTheDocument();
+        expect(screen.getByText('Escalation rationale')).toBeInTheDocument();
         expect(screen.getByText('hit.header.threat:')).toBeInTheDocument();
         expect(screen.getByText('Threat value')).toBeInTheDocument();
         expect(screen.getByText('hit.header.target:')).toBeInTheDocument();

package/components/routes/analytics/widgets/Escalation.js

@@ -11,7 +11,7 @@ const Escalation = forwardRef(({ analytic, maxWidth = '45%' }, ref) => {
     const { doughnut } = useMyChart();
     const [loading, setLoading] = useState(false);
     const [escalationData, setEscalationData] = useState({});
-    const escalationColors = useMemo(() => Object.keys(escalationData).map(escalation => getEscalationColor(escalation, 'rgba(255, 255, 255, 0.16)', theme)), [theme]);
+    const escalationColors = useMemo(() => Object.keys(escalationData).map(escalation => getEscalationColor(escalation, 'rgba(255, 255, 255, 0.16)', theme)), [escalationData, theme]);
     useEffect(() => {
         if (!analytic) {
             return;

package/package.json

@@ -12,7 +12,7 @@
     ]
   },
   "dependencies": {
-    "@cccsaurora/clue-ui": "1.4.2",
+    "@cccsaurora/clue-ui": "1.4.4",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1627",
+  "version": "3.1.0-dev.1634",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/plugins/clue/Provider.js

@@ -9,17 +9,17 @@ import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
 const Provider = ({ children, options = {} }) => {
     const { config } = useContext(ApiConfigContext);
     const features = config?.configuration?.features ?? {};
-    const [database, setDatabase] = useState();
+    const [database, setDatabase] = useState(null);
     const defaultGetToken = useCallback(() => getStored(StorageKey.APP_TOKEN) ?? '', []);
     const baseURL = options.baseURL ?? `${location.origin}/api/v1/clue`;
     const getToken = options.getToken ?? defaultGetToken;
     const publicIconify = options.publicIconify ?? location.origin.includes('localhost');
     const customIconify = options.customIconify ?? location.origin.replace('howler', 'icons');
     useEffect(() => {
-        let cancelled = false;
-        if (!features.clue) {
+        if (!features.clue || database) {
             return;
         }
+        let cancelled = false;
         void buildDatabase({
             storageType: options.storageType ?? 'memory',
             replicate: !!options.replicate,
@@ -33,7 +33,7 @@ const Provider = ({ children, options = {} }) => {
         return () => {
             cancelled = true;
         };
-    }, [baseURL, features.clue, getToken, options.storageType, options.replicate]);
+    }, [baseURL, features.clue, getToken, options.storageType, options.replicate, database]);
     return (_jsx(ClueProvider, { baseURL: baseURL, getToken: getToken, enabled: features.clue, publicIconify: publicIconify, customIconify: customIconify, defaultTimeout: options.defaultTimeout ?? 5, i18next: useTranslation('clue'), chunkSize: options.chunkSize ?? 50, database: database, includeContext: options.includeContext, children: children }));
 };
 export default Provider;

package/plugins/clue/Provider.test.js

@@ -51,7 +51,7 @@ describe('Clue Provider', () => {
         renderProvider({ configuration: { features: { clue: false } } });
         expect(mocks.buildDatabase).not.toHaveBeenCalled();
         expect(getProviderProps().enabled).toBe(false);
-        expect(getProviderProps().database).toBeUndefined();
+        expect(getProviderProps().database).toBeNull();
         expect(getProviderProps().getToken?.()).toBe('');
     });
     it('returns the current stored application token by default', () => {
@@ -114,6 +114,6 @@ describe('Clue Provider', () => {
         await act(async () => {
             resolveDatabase({ name: 'late' });
         });
-        expect(getProviderProps().database).toBeUndefined();
+        expect(getProviderProps().database).toBeNull();
     });
 });

package/plugins/clue/index.d.ts

@@ -9,6 +9,7 @@ import useSetup from './setup';
 export type { CluePluginOptions } from './Provider';
 declare class CluePlugin extends HowlerPlugin {
     private readonly options;
+    private readonly providerComponent;
     constructor(options?: CluePluginOptions);
     name: string;
     version: string;

package/plugins/clue/index.js

@@ -17,9 +17,11 @@ import Provider, {} from './Provider';
 import useSetup from './setup';
 class CluePlugin extends HowlerPlugin {
     options;
+    providerComponent;
     constructor(options = {}) {
         super();
         this.options = options;
+        this.providerComponent = ({ children }) => _jsx(Provider, { options: this.options, children: children });
     }
     name = 'CluePlugin';
     version = '0.0.1';
@@ -46,8 +48,7 @@ class CluePlugin extends HowlerPlugin {
         super.addPivot('clue', pivotForm, pivotRenderer);
     }
     provider() {
-        const options = this.options;
-        return ({ children }) => _jsx(Provider, { options: options, children: children });
+        return this.providerComponent;
     }
     setup() {
         return useSetup;

package/plugins/clue/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/plugins/clue/index.test.js

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import CluePlugin from './index';
+describe('Clue plugin', () => {
+    it('keeps its provider component identity stable', () => {
+        const plugin = new CluePlugin();
+        expect(plugin.provider()).toBe(plugin.provider());
+    });
+});