@cccsaurora/howler-ui 2.14.0-dev.263 → 2.14.0-dev.264

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

@@ -0,0 +1,111 @@
+import { Autocomplete, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import type { FC } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import CustomSort from '../CustomSort';
+
+const CUSTOM = '__custom__';
+
+const ACCEPTED_SORTS = [
+  'event.created',
+  'howler.assessment',
+  'howler.escalation',
+  'howler.analytic',
+  'howler.detection',
+  'event.provider',
+  'organization.name',
+  CUSTOM
+];
+
+const HitSort: FC<{ size?: 'small' | 'medium' }> = ({ size = 'small' }) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  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]);
+
+  /**
+   * The currently selected field when not using custom sorting
+   */
+  const field = useMemo(() => (sortEntries.length === 1 ? sortEntries[0].split(' ')[0] : null), [sortEntries]);
+
+  /**
+   * The currently selected sorter when not using custom sorting
+   */
+  const sort = useMemo(
+    () => (sortEntries.length === 1 ? sortEntries[0].split(' ')[1] : null) as 'asc' | 'desc',
+    [sortEntries]
+  );
+
+  /**
+   * 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]))
+  );
+
+  /**
+   * This handles changing the sort if the basic sorter is used, OR enables the custom sorting.
+   */
+  const handleChange = useCallback(
+    (value: string) => {
+      if (value === CUSTOM) {
+        setShowCustomSort(true);
+      } else {
+        setSavedSort(`${value} ${sort}`);
+      }
+    },
+    [setSavedSort, sort]
+  );
+
+  useEffect(() => {
+    if (location.search.includes('sort')) {
+      return;
+    }
+
+    (async () => {
+      const selectedView = await getCurrentView({ lazy: true });
+
+      if (selectedView?.sort && !location.search.includes('sort')) {
+        setSavedSort(selectedView.sort);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getCurrentView]);
+
+  return !showCustomSort ? (
+    <Stack direction="row" spacing={1} sx={{ flex: 1.5 }}>
+      <Autocomplete
+        fullWidth
+        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 => <TextField {..._params} label={t('hit.search.sort.fields')} />}
+        onChange={(_, value) => handleChange(value)}
+      />
+      <Select
+        size={size}
+        sx={{ minWidth: '150px' }}
+        value={sort}
+        onChange={e => setSavedSort(`${field} ${e.target.value as 'asc' | 'desc'}`)}
+      >
+        <MenuItem value="asc">{t('asc')}</MenuItem>
+        <MenuItem value="desc">{t('desc')}</MenuItem>
+      </Select>
+    </Stack>
+  ) : (
+    <CustomSort />
+  );
+};
+
+export default memo(HitSort);

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

@@ -0,0 +1,40 @@
+import { Box, Divider, Stack, type SxProps } from '@mui/material';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import { memo, type FC } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import CustomSpan from './CustomSpan';
+import HitFilter from './HitFilter';
+import HitSort from './HitSort';
+import SearchSpan from './SearchSpan';
+
+const QuerySettings: FC<{ verticalSorters?: boolean; boxSx?: SxProps }> = ({ verticalSorters = false, boxSx }) => {
+  const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+  const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+
+  return (
+    <Box sx={boxSx ?? { position: 'relative', maxWidth: '1200px' }}>
+      <Stack
+        direction={verticalSorters ? 'column' : 'row'}
+        justifyContent="space-between"
+        spacing={1}
+        divider={!verticalSorters && <Divider flexItem orientation="vertical" />}
+        sx={[
+          viewId &&
+            !selectedView && {
+              opacity: 0.25,
+              pointerEvents: 'none'
+            }
+        ]}
+      >
+        <HitSort />
+        <HitFilter />
+        <SearchSpan />
+      </Stack>
+
+      <CustomSpan />
+    </Box>
+  );
+};
+
+export default memo(QuerySettings);

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

@@ -0,0 +1,68 @@
+import { Autocomplete, TextField } from '@mui/material';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import type { FC } from 'react';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { convertLuceneToDate } from 'utils/utils';
+
+const DATE_RANGES = [
+  'date.range.1.day',
+  'date.range.3.day',
+  'date.range.1.week',
+  'date.range.1.month',
+  'date.range.all',
+  'date.range.custom'
+];
+
+const SearchSpan: FC<{
+  omitCustom?: boolean;
+  size?: 'small' | 'medium';
+}> = ({ omitCustom = false, size }) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+
+  const span = useContextSelector(ParameterContext, ctx => ctx.span);
+  const setSpan = useContextSelector(ParameterContext, ctx => ctx.setSpan);
+
+  const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+
+  useEffect(() => {
+    if (location.search.includes('span')) {
+      return;
+    }
+
+    (async () => {
+      const viewSpan = (await getCurrentView({ lazy: true }))?.span;
+
+      if (!viewSpan) {
+        return;
+      }
+
+      if (viewSpan.includes(':')) {
+        setSpan(convertLuceneToDate(viewSpan));
+      } else {
+        setSpan(viewSpan);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getCurrentView]);
+
+  return (
+    <Autocomplete
+      fullWidth
+      sx={{ minWidth: '200px', flex: 1 }}
+      size={size ?? 'small'}
+      value={span}
+      options={omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES}
+      renderInput={_params => <TextField {..._params} label={t('hit.search.span')} />}
+      getOptionLabel={option => t(option)}
+      onChange={(_, value) => setSpan(value)}
+      disableClearable
+    />
+  );
+};
+
+export default memo(SearchSpan);

package/components/routes/hits/view/HitViewer.tsx

@@ -0,0 +1,372 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda } from '@mui/icons-material';
+import {
+  Badge,
+  Box,
+  CardContent,
+  Collapse,
+  IconButton,
+  Skeleton,
+  Stack,
+  Tab,
+  Tabs,
+  Tooltip,
+  useMediaQuery,
+  useTheme
+} from '@mui/material';
+import PageCenter from 'commons/components/pages/PageCenter';
+import useMatchers from 'components/app/hooks/useMatchers';
+import { HitContext } from 'components/app/providers/HitProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import HowlerCard from 'components/elements/display/HowlerCard';
+import BundleButton from 'components/elements/display/icons/BundleButton';
+import SocketBadge from 'components/elements/display/icons/SocketBadge';
+import JSONViewer from 'components/elements/display/json/JSONViewer';
+import HitActions from 'components/elements/hit/HitActions';
+import HitBanner from 'components/elements/hit/HitBanner';
+import HitComments from 'components/elements/hit/HitComments';
+import HitDetails from 'components/elements/hit/HitDetails';
+import HitLabels from 'components/elements/hit/HitLabels';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import HitNotebooks from 'components/elements/hit/HitNotebooks';
+import HitOutline from 'components/elements/hit/HitOutline';
+import HitOverview from 'components/elements/hit/HitOverview';
+import HitRelated from 'components/elements/hit/HitRelated';
+import HitWorklog from 'components/elements/hit/HitWorklog';
+import PivotLink from 'components/elements/hit/related/PivotLink';
+import RelatedLink from 'components/elements/hit/related/RelatedLink';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import useMyUserList from 'components/hooks/useMyUserList';
+import uniqBy from 'lodash-es/uniqBy';
+import type { Analytic } from 'models/entities/generated/Analytic';
+import type { Dossier } from 'models/entities/generated/Dossier';
+import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from 'utils/constants';
+import { getUserList } from 'utils/hitFunctions';
+import { tryParse } from 'utils/utils';
+import LeadRenderer from './LeadRenderer';
+
+export enum Orientation {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal'
+}
+
+const HitViewer: FC = () => {
+  const { t, i18n } = useTranslation();
+  const params = useParams();
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
+  const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
+  const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
+
+  const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+  const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
+
+  const [userIds, setUserIds] = useState<Set<string>>(new Set());
+  const users = useMyUserList(userIds);
+  const [tab, setTab] = useState<string>('details');
+  const [analytic, setAnalytic] = useState<Analytic>();
+  const [dossiers, setDossiers] = useState<Dossier[]>([]);
+  const [hasOverview, setHasOverview] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    try {
+      if (!hit) {
+        await getHit(params.id, true);
+        return;
+      }
+
+      setUserIds(getUserList(hit));
+
+      setAnalytic(await getMatchingAnalytic(hit));
+    } catch (err) {
+      if (err.cause?.api_status_code === 404) {
+        navigate('/404');
+      }
+    }
+  }, [hit, getMatchingAnalytic, getHit, params.id, navigate]);
+
+  useEffect(() => {
+    if (isUnderLg) {
+      setOrientation(Orientation.HORIZONTAL);
+    }
+  }, [isUnderLg, setOrientation]);
+
+  useEffect(() => {
+    fetchData();
+  }, [params.id, fetchData, hit]);
+
+  const onOrientationChange = useCallback(
+    () => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL),
+    [orientation, setOrientation]
+  );
+
+  useEffect(() => {
+    getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+  }, [getMatchingOverview, hit]);
+
+  useEffect(() => {
+    if (hasOverview && tab === 'details') {
+      setTab('overview');
+    } else if (!hasOverview && tab === 'overview') {
+      setTab('details');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasOverview]);
+
+  const tabContent = useMemo(() => {
+    if (!tab || !hit) {
+      return;
+    }
+
+    return {
+      overview: () => <HitOverview hit={hit} />,
+      details: () => <HitDetails hit={hit} />,
+      hit_comments: () => <HitComments hit={hit} users={users} />,
+      hit_raw: () => <JSONViewer data={hit} />,
+      hit_data: () => <JSONViewer data={hit?.howler?.data?.map(entry => tryParse(entry))} collapse={false} />,
+      hit_worklog: () => <HitWorklog hit={hit} users={users} />,
+      hit_related: () => <HitRelated hit={hit} />,
+      ...Object.fromEntries(
+        hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => <LeadRenderer lead={lead} hit={hit} />]) ?? []
+      ),
+      ...Object.fromEntries(
+        dossiers.flatMap((_dossier, dossierIndex) =>
+          (_dossier.leads ?? []).map((_lead, leadIndex) => [
+            `external-lead:${dossierIndex}:${leadIndex}`,
+            () => <LeadRenderer lead={_lead} hit={hit} />
+          ])
+        )
+      )
+    }[tab]?.();
+  }, [dossiers, hit, tab, users]);
+
+  useEffect(() => {
+    if (!hit) {
+      return;
+    }
+
+    getMatchingDossiers(hit).then(setDossiers);
+  }, [getMatchingDossiers, hit]);
+
+  if (!hit) {
+    return (
+      <PageCenter>
+        <Skeleton variant="rounded" height="520px" />
+      </PageCenter>
+    );
+  }
+
+  return (
+    <PageCenter maxWidth="1500px">
+      <Box
+        sx={{
+          display: 'grid',
+          position: 'relative',
+          gridTemplateColumns: `1fr ${orientation === 'vertical' ? '300px' : '0px'}`,
+          alignItems: 'stretch',
+          gap: theme.spacing(2),
+          transition: `${theme.transitions.duration.standard}ms`,
+          mb: 1
+        }}
+        textAlign="left"
+      >
+        <Collapse
+          sx={{ gridColumn: '1 / span 2', '& [class*=MuiStack-root]': { padding: '0 !important' } }}
+          in={orientation === 'horizontal'}
+        >
+          <HitActions hit={hit} orientation="horizontal" />
+        </Collapse>
+        <Box
+          sx={{
+            display: 'flex',
+            '& > .MuiPaper-root': { flex: 1 },
+            mr: orientation === 'vertical' ? 0 : -2
+          }}
+        >
+          <HowlerCard tabIndex={0} sx={{ position: 'relative' }}>
+            <CardContent>
+              <HitBanner hit={hit} layout={HitLayout.COMFY} useListener />
+              <HitOutline hit={hit} layout={HitLayout.COMFY} />
+              <HitLabels hit={hit} />
+              {(hit?.howler?.links?.length > 0 ||
+                analytic?.notebooks?.length > 0 ||
+                dossiers.filter(_dossier => _dossier.pivots?.length > 0).length > 0) && (
+                <Stack direction="row" spacing={1} pr={2}>
+                  {analytic?.notebooks?.length > 0 && <HitNotebooks analytic={analytic} hit={hit} />}
+                  {hit?.howler?.links?.length > 0 &&
+                    uniqBy(hit.howler.links, 'href')
+                      .slice(0, 3)
+                      .map(l => <RelatedLink key={l.href} compact {...l} />)}
+                  {dossiers.flatMap(_dossier =>
+                    (_dossier.pivots ?? []).map((_pivot, index) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <PivotLink key={_dossier.dossier_id + index} pivot={_pivot} hit={hit} compact />
+                    ))
+                  )}
+                </Stack>
+              )}
+            </CardContent>
+          </HowlerCard>
+          {!isUnderLg && (
+            <Stack
+              spacing={1}
+              sx={{
+                position: 'absolute',
+                top: theme.spacing(2),
+                right: theme.spacing(-6)
+              }}
+            >
+              <Tooltip title={t('page.hits.view.layout')}>
+                <IconButton onClick={onOrientationChange}>
+                  <ViewAgenda
+                    sx={{ transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' }}
+                  />
+                </IconButton>
+              </Tooltip>
+              <SocketBadge size="medium" />
+              {analytic && (
+                <Tooltip title={t('hit.panel.analytic.open')}>
+                  <IconButton onClick={() => navigate(`/analytics/${analytic.analytic_id}`)}>
+                    <QueryStats />
+                  </IconButton>
+                </Tooltip>
+              )}
+              {hit?.howler.bundles?.length > 0 && <BundleButton ids={hit.howler.bundles} />}
+            </Stack>
+          )}
+        </Box>
+        <HowlerCard sx={[orientation === 'horizontal' && { height: '0px' }]}>
+          <CardContent sx={{ padding: 1, position: 'relative' }}>
+            <HitActions hit={hit} orientation="vertical" />
+          </CardContent>
+        </HowlerCard>
+        <Box sx={{ gridColumn: '1 / span 2', mb: 1 }}>
+          <Tabs
+            value={tab === 'overview' && !hasOverview ? 'details' : tab}
+            sx={{ display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }}
+          >
+            {hit?.howler?.is_bundle && (
+              <Tab label={t('hit.viewer.aggregate')} value="hit_aggregate" onClick={() => setTab('hit_aggregate')} />
+            )}
+            {hasOverview && (
+              <Tab label={t('hit.viewer.overview')} value="overview" onClick={() => setTab('overview')} />
+            )}
+            <Tab label={t('hit.viewer.details')} value="details" onClick={() => setTab('details')} />
+            {hit?.howler.dossier?.map((lead, index) => (
+              <Tab
+                // eslint-disable-next-line react/no-array-index-key
+                key={'lead:' + index}
+                label={
+                  <Stack direction="row" spacing={0.5}>
+                    {lead.icon && <Icon icon={lead.icon} />}
+                    <span>{i18n.language === 'en' ? lead.label.en : lead.label.fr}</span>
+                  </Stack>
+                }
+                value={'lead:' + index}
+                onClick={() => setTab('lead:' + index)}
+              />
+            ))}
+
+            {dossiers.flatMap((_dossier, dossierIndex) =>
+              (_dossier.leads ?? []).map((_lead, leadIndex) => (
+                <Tab
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={`external-lead:${dossierIndex}:${leadIndex}`}
+                  label={
+                    <Stack direction="row" spacing={0.5}>
+                      {_lead.icon && <Icon icon={_lead.icon} />}
+                      <span>{i18n.language === 'en' ? _lead.label.en : _lead.label.fr}</span>
+                    </Stack>
+                  }
+                  value={`external-lead:${dossierIndex}:${leadIndex}`}
+                  onClick={() => setTab(`external-lead:${dossierIndex}:${leadIndex}`)}
+                />
+              ))
+            )}
+            <FlexOne />
+            <Tab
+              sx={{ px: 2, minWidth: 0 }}
+              label={
+                <Tooltip title={t('hit.viewer.data')}>
+                  <DataObject />
+                </Tooltip>
+              }
+              value="hit_data"
+              onClick={() => setTab('hit_data')}
+              disabled={!hit?.howler?.data}
+            />
+            <Tab
+              sx={{ px: 2, minWidth: 0 }}
+              label={
+                <Tooltip title={t('hit.viewer.json')}>
+                  <Code />
+                </Tooltip>
+              }
+              value="hit_raw"
+              onClick={() => setTab('hit_raw')}
+            />
+            <Tab
+              sx={{ px: 2, minWidth: 0 }}
+              label={
+                <Tooltip title={t('hit.viewer.comments')}>
+                  <Badge
+                    sx={{
+                      '& > .MuiBadge-badge': {
+                        backgroundColor: theme.palette.divider,
+                        zIndex: 1,
+                        right: theme.spacing(-0.5)
+                      },
+                      '& > svg': { zIndex: 2 }
+                    }}
+                    badgeContent={hit?.howler.comment?.length ?? 0}
+                  >
+                    <Comment />
+                  </Badge>
+                </Tooltip>
+              }
+              value="hit_comments"
+              onClick={() => setTab('hit_comments')}
+            />
+            <Tab
+              sx={{ px: 2, minWidth: 0 }}
+              label={
+                <Tooltip title={t('hit.viewer.worklog')}>
+                  <History />
+                </Tooltip>
+              }
+              value="hit_worklog"
+              onClick={() => setTab('hit_worklog')}
+            />
+            <Tab
+              sx={{ px: 2, minWidth: 0 }}
+              label={
+                <Tooltip title={t('hit.viewer.related')}>
+                  <LinkSharp />
+                </Tooltip>
+              }
+              value="hit_related"
+              onClick={() => setTab('hit_related')}
+            />
+          </Tabs>
+        </Box>
+        <Box
+          sx={{
+            gridColumn: '1 / span 2',
+            '& > div': { padding: 0 },
+            '& .react-json-view': { backgroundColor: 'transparent !important' }
+          }}
+        >
+          {tabContent}
+        </Box>
+      </Box>
+    </PageCenter>
+  );
+};
+
+export default HitViewer;

package/components/routes/hits/view/LeadRenderer.tsx

@@ -0,0 +1,42 @@
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import HandlebarsMarkdown from 'components/elements/display/HandlebarsMarkdown';
+import type { Hit } from 'models/entities/generated/Hit';
+import type { Lead } from 'models/entities/generated/Lead';
+import { memo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+
+const LeadRenderer: FC<{ lead: Lead; hit?: Hit }> = ({ lead, hit }) => {
+  const { t } = useTranslation();
+  const pluginStore = usePluginStore();
+
+  if (lead.format === 'markdown') {
+    return (
+      <Box
+        sx={{
+          mt: -2
+        }}
+      >
+        <HandlebarsMarkdown disableLinks md={lead.content} object={hit ?? lead} />
+      </Box>
+    );
+  }
+
+  const pluginLead = pluginStore.executeFunction(`lead.${lead.format}`, lead.content, lead.metadata, hit);
+
+  if (pluginLead) {
+    return pluginLead;
+  }
+
+  return (
+    <Stack p={3} direction="column" spacing={2} alignItems="center">
+      <Typography variant="h3" color="error.light">
+        {t('lead.invalid')}
+      </Typography>
+      <Divider flexItem />
+      <Typography variant="body1">{t('lead.invalid.description')}</Typography>
+    </Stack>
+  );
+};
+
+export default memo(LeadRenderer);