@cccsaurora/howler-ui 3.1.0-dev.1632 → 3.1.0-dev.1634
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.
|
@@ -3,7 +3,7 @@ import { OpenInNew } from '@mui/icons-material';
|
|
|
3
3
|
import { Box, Chip, Grid, Stack, Tooltip, Typography, chipClasses, useTheme } from '@mui/material';
|
|
4
4
|
import { uniq } from 'lodash-es';
|
|
5
5
|
import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
|
|
6
|
-
import { Fragment,
|
|
6
|
+
import { Fragment, useMemo } from 'react';
|
|
7
7
|
import { Trans, useTranslation } from 'react-i18next';
|
|
8
8
|
import { usePluginStore } from 'react-pluggable';
|
|
9
9
|
import { getEscalationColor, getProviderColor } from '@cccsaurora/howler-ui/utils/utils';
|
|
@@ -15,6 +15,14 @@ import HitTimestamp from './elements/HitTimestamp';
|
|
|
15
15
|
import HitBannerTooltip from './HitBannerTooltip';
|
|
16
16
|
import { HitLayout } from './HitLayout';
|
|
17
17
|
import RelatedRecords from './related/RelatedRecords';
|
|
18
|
+
const Wrapper = ({ compressed, hit, textVariant, i18nKey, value, field, ...typographyProps }) => {
|
|
19
|
+
const { t } = useTranslation();
|
|
20
|
+
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: [
|
|
21
|
+
{ display: 'flex', flexDirection: 'row' },
|
|
22
|
+
...(typographyProps?.sx && Array.isArray(typographyProps.sx) ? typographyProps.sx : [typographyProps?.sx])
|
|
23
|
+
], 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)))] }));
|
|
24
|
+
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);
|
|
25
|
+
};
|
|
18
26
|
const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned = true }) => {
|
|
19
27
|
const { t } = useTranslation();
|
|
20
28
|
const theme = useTheme();
|
|
@@ -22,19 +30,9 @@ const HitBanner = ({ hit, lazy = false, layout = HitLayout.NORMAL, showAssigned
|
|
|
22
30
|
const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
|
|
23
31
|
const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
|
|
24
32
|
const providerColor = getProviderColor(hit?.event?.provider);
|
|
25
|
-
|
|
26
|
-
* The tooltips are necessary only when in the most compressed format
|
|
27
|
-
*/
|
|
28
|
-
const Wrapper = useCallback(({ i18nKey, value, field, ...typographyProps }) => {
|
|
29
|
-
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: [
|
|
30
|
-
{ display: 'flex', flexDirection: 'row' },
|
|
31
|
-
...(typographyProps?.sx && Array.isArray(typographyProps.sx) ? typographyProps.sx : [typographyProps?.sx])
|
|
32
|
-
], 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)))] }));
|
|
33
|
-
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);
|
|
34
|
-
}, [compressed, hit, t, textVariant]);
|
|
35
|
-
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) => {
|
|
33
|
+
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) => {
|
|
36
34
|
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));
|
|
37
|
-
}) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary,
|
|
35
|
+
}) })] })), 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 => {
|
|
38
36
|
e.stopPropagation();
|
|
39
37
|
} }))] }))] }) }));
|
|
40
38
|
};
|
|
@@ -117,7 +117,8 @@ describe('HitBanner', () => {
|
|
|
117
117
|
renderHitBanner();
|
|
118
118
|
expect(screen.getByText('Test Org')).toBeInTheDocument();
|
|
119
119
|
expect(screen.getByTestId('analytic-link')).toBeInTheDocument();
|
|
120
|
-
expect(screen.getByText('hit.header.rationale:
|
|
120
|
+
expect(screen.getByText('hit.header.rationale:')).toBeInTheDocument();
|
|
121
|
+
expect(screen.getByText('Escalation rationale')).toBeInTheDocument();
|
|
121
122
|
expect(screen.getByText('hit.header.threat:')).toBeInTheDocument();
|
|
122
123
|
expect(screen.getByText('Threat value')).toBeInTheDocument();
|
|
123
124
|
expect(screen.getByText('hit.header.target:')).toBeInTheDocument();
|