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

package/components/elements/hit/HitQuickSearch.js

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, useMediaQuery, Box, Stack, Typography, Tooltip, Divider, Chip } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { memo, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation, Trans } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { PROVIDER_COLORS, ESCALATION_COLORS, STATUS_COLORS } from "../../../utils/constants.js";
+import { stringToColor, formatDate } from "../../../utils/utils.js";
+const HitQuickSearch = ({ hit, options }) => {
+  var _a, _b, _c;
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const isUnderLg = useMediaQuery(theme.breakpoints.down("lg"));
+  const providerColor = useMemo(
+    () => {
+      var _a2;
+      return PROVIDER_COLORS[((_a2 = hit.event) == null ? void 0 : _a2.provider) ?? "unknown"] ?? stringToColor(hit.event.provider);
+    },
+    [(_a = hit.event) == null ? void 0 : _a.provider]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: { overflow: "hidden", borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 },
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr) minmax(0, auto)",
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { flexGrow: 1, gridColumn: options.state.mode === "inline" ? "span 2" : "", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "body1", fontWeight: "bold", children: [
+            hit.howler.analytic,
+            hit.howler.detection && ": ",
+            hit.howler.detection
+          ] }),
+          options.state.mode !== "inline" && ((_b = hit.howler) == null ? void 0 : _b.outline) && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              placement: isUnderLg ? "bottom" : "left",
+              componentsProps: {
+                tooltip: {
+                  sx: {
+                    fontSize: 12,
+                    backgroundColor: theme.palette.background.paper,
+                    color: theme.palette.getContrastText(theme.palette.background.paper)
+                  }
+                }
+              },
+              title: /* @__PURE__ */ jsxs(Stack, { divider: /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }), children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.header.threat" }),
+                  ": ",
+                  hit.howler.outline.threat
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.header.target" }),
+                  ": ",
+                  hit.howler.outline.target
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: hit.howler.outline.indicators.join(", ") })
+              ] }),
+              children: /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "column" }, flex: 1, children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: "break-all", overflow: "hidden" }, children: [
+                  /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.header.threat" }),
+                  ": ",
+                  hit.howler.outline.threat
+                ] }),
+                /* @__PURE__ */ jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: "break-all", overflow: "hidden" }, children: [
+                  /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.header.target" }),
+                  ": ",
+                  hit.howler.outline.target
+                ] }),
+                /* @__PURE__ */ jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: "break-all", overflow: "hidden" }, children: [
+                  /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.header.indicators" }),
+                  ": ",
+                  hit.howler.outline.indicators.map((i) => i).join(", ")
+                ] })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { alignItems: options.state.mode === "fullscreen" ? "end" : "start", spacing: 0.5, children: [
+          options.state.mode === "fullscreen" && /* @__PURE__ */ jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+            options.state.mode === "inline" && /* @__PURE__ */ jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }),
+            /* @__PURE__ */ jsx(
+              Chip,
+              {
+                sx: {
+                  backgroundColor: providerColor,
+                  color: theme.palette.getContrastText(providerColor)
+                },
+                label: ((_c = hit.organization) == null ? void 0 : _c.name) ?? /* @__PURE__ */ jsx(Trans, { i18nKey: "unknown" }),
+                size: "small"
+              }
+            ),
+            /* @__PURE__ */ jsx(Chip, { label: hit.howler.escalation, size: "small", color: ESCALATION_COLORS[hit.howler.escalation] })
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+            /* @__PURE__ */ jsx(
+              Chip,
+              {
+                sx: {
+                  "& .MuiChip-icon": {
+                    marginLeft: 0
+                  }
+                },
+                label: (hit == null ? void 0 : hit.howler.assignment) !== "unassigned" ? hit == null ? void 0 : hit.howler.assignment : t("app.drawer.hit.assignment.unassigned.name"),
+                size: "small"
+              }
+            ),
+            /* @__PURE__ */ jsx(Chip, { label: hit.howler.status, size: "small", color: STATUS_COLORS[hit.howler.status] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+const HitQuickSearch$1 = memo(HitQuickSearch);
+export {
+  HitQuickSearch$1 as default
+};

package/components/elements/hit/HitRelated.d.ts

@@ -0,0 +1,6 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { FC } from 'react';
+declare const HitRelated: FC<{
+    hit: Hit;
+}>;
+export default HitRelated;

package/components/elements/hit/HitRelated.js

@@ -0,0 +1,10 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Grid } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import RelatedLink from "./related/RelatedLink.js";
+const HitRelated = ({ hit }) => {
+  var _a;
+  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, pr: 2, children: (_a = hit == null ? void 0 : hit.howler.links) == null ? void 0 : _a.map((l) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 4, md: 3, children: /* @__PURE__ */ jsx(RelatedLink, { ...l }) }, l.title + l.href)) });
+};
+export {
+  HitRelated as default
+};

package/components/elements/hit/HitShortcuts.d.ts

@@ -0,0 +1,5 @@
+export declare enum HitShortcuts {
+    SHORTCUTS_HINT = "hint",
+    SHORTCUTS = "shortcut",
+    NO_SHORTCUTS = "no"
+}

package/components/elements/hit/HitShortcuts.js

@@ -0,0 +1,9 @@
+var HitShortcuts = /* @__PURE__ */ ((HitShortcuts2) => {
+  HitShortcuts2["SHORTCUTS_HINT"] = "hint";
+  HitShortcuts2["SHORTCUTS"] = "shortcut";
+  HitShortcuts2["NO_SHORTCUTS"] = "no";
+  return HitShortcuts2;
+})(HitShortcuts || {});
+export {
+  HitShortcuts
+};

package/components/elements/hit/HitSummary.d.ts

@@ -0,0 +1,11 @@
+import { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+declare const _default: import('react').NamedExoticComponent<{
+    query: string;
+    response?: HowlerSearchResponse<WithMetadata<Hit>>;
+    execute?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}>;
+export default _default;

package/components/elements/hit/HitSummary.js

@@ -0,0 +1,234 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Analytics, InfoOutlined } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { Stack, Typography, Divider, Autocomplete, TextField, Button, CircularProgress, Alert, AlertTitle, LinearProgress, Fade, Tooltip, Box, Grid, Chip } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { a as api } from "../../../index-BPPnUdfP.js";
+import useMatchers from "../../app/hooks/useMatchers.js";
+import { FieldContext } from "../../app/providers/FieldProvider.js";
+import { HitSearchContext } from "../../app/providers/HitSearchProvider.js";
+import { ParameterContext } from "../../app/providers/ParameterProvider.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import { useMyLocalStorageItem } from "../../hooks/useMyLocalStorage.js";
+import useMySnackbar from "../../hooks/useMySnackbar.js";
+import { isEmpty } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import { memo, useContext, useState, useCallback, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+import { StorageKey } from "../../../utils/constants.js";
+import { convertDateToLucene, convertCustomDateRangeToLucene, getTimeRange } from "../../../utils/utils.js";
+import PluginChip from "../PluginChip.js";
+import HitGraph from "./aggregate/HitGraph.js";
+const HitSummary = ({ query, response, onStart, onComplete }) => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const { hitFields } = useContext(FieldContext);
+  const { showErrorMessage } = useMySnackbar();
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+  const { getMatchingTemplate } = useMatchers();
+  const setQuery = useContextSelector(ParameterContext, (ctx) => ctx.setQuery);
+  const viewId = useContextSelector(HitSearchContext, (ctx) => ctx.viewId);
+  const searching = useContextSelector(HitSearchContext, (ctx) => ctx.searching);
+  const error = useContextSelector(HitSearchContext, (ctx) => ctx.error);
+  const span = useContextSelector(ParameterContext, (ctx) => ctx.span);
+  const startDate = useContextSelector(ParameterContext, (ctx) => ctx.startDate);
+  const endDate = useContextSelector(ParameterContext, (ctx) => ctx.endDate);
+  const [loading, setLoading] = useState(false);
+  const [customKeys, setCustomKeys] = useState([]);
+  const [keyCounts, setKeyCounts] = useState({});
+  const [aggregateResults, setAggregateResults] = useState({});
+  const performAggregation = useCallback(async () => {
+    if (onStart) {
+      onStart();
+    }
+    const filters = [];
+    if (span && !span.endsWith("custom")) {
+      filters.push(`event.created:${convertDateToLucene(span)}`);
+    } else if (startDate && endDate) {
+      filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
+    }
+    try {
+      const rawCounts = await Promise.all(
+        ((response == null ? void 0 : response.items) ?? []).map(async (h) => {
+          const matchingTemplate = await getMatchingTemplate(h);
+          return ((matchingTemplate == null ? void 0 : matchingTemplate.keys) ?? []).filter((key) => !["howler.id", "howler.hash"].includes(key)).map((key) => ({
+            key,
+            source: `${matchingTemplate.analytic}: ${matchingTemplate.detection ?? t("any")}`
+          }));
+        })
+      );
+      const _keyCounts = rawCounts.flat().concat(customKeys.map((key) => ({ key, source: "custom" }))).reduce(
+        (acc, val) => {
+          if (acc[val.key] && val.source !== "custom") {
+            acc[val.key].count++;
+          } else if (val.source === "custom") {
+            acc[val.key] = {
+              count: -1,
+              sources: [val.source]
+            };
+          } else {
+            acc[val.key] = {
+              count: 1,
+              sources: [val.source]
+            };
+          }
+          return acc;
+        },
+        {}
+      );
+      setKeyCounts(_keyCounts);
+      setAggregateResults({});
+      const sortedKeys = Object.keys(_keyCounts).sort(
+        (a, b) => {
+          var _a, _b;
+          return (((_a = _keyCounts[b]) == null ? void 0 : _a.count) ?? 0) - (((_b = _keyCounts[a]) == null ? void 0 : _b.count) ?? 0);
+        }
+      );
+      if (sortedKeys.length > 0) {
+        setLoading(true);
+        const result = await dispatchApi(
+          api.search.facet.hit.post({
+            fields: sortedKeys,
+            query,
+            rows: pageCount,
+            filters
+          }),
+          {
+            throwError: false,
+            logError: true,
+            showError: false
+          }
+        );
+        if (result) {
+          setAggregateResults((_results) => ({
+            ..._results,
+            ...result
+          }));
+        }
+      }
+    } catch (e) {
+      showErrorMessage(e);
+      setAggregateResults({});
+    } finally {
+      setLoading(false);
+      if (onComplete) {
+        onComplete();
+      }
+    }
+  }, [
+    customKeys,
+    dispatchApi,
+    endDate,
+    getMatchingTemplate,
+    onComplete,
+    onStart,
+    pageCount,
+    query,
+    response == null ? void 0 : response.items,
+    showErrorMessage,
+    span,
+    startDate,
+    t
+  ]);
+  const setSearch = useCallback(
+    (key, value) => {
+      setQuery(`${key}:${value}`);
+    },
+    [setQuery]
+  );
+  useEffect(() => {
+    if (!query && !viewId || searching || error) {
+      return;
+    }
+    performAggregation();
+  }, [query, viewId, searching, error]);
+  return /* @__PURE__ */ jsxs(Stack, { sx: { mx: 2, height: "100%" }, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("hit.summary.aggregate.title") }),
+    /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+    /* @__PURE__ */ jsx(HitGraph, { query }),
+    /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+    /* @__PURE__ */ jsxs(Stack, { sx: { overflow: "auto", marginTop: "0 !important" }, pt: 1, spacing: 1, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            fullWidth: true,
+            multiple: true,
+            sx: { minWidth: "175px" },
+            size: "small",
+            value: customKeys,
+            options: hitFields.map((_field) => _field.key),
+            renderInput: (_params) => /* @__PURE__ */ jsx(TextField, { ..._params, label: t("hit.summary.adhoc") }),
+            onChange: (_, value) => setCustomKeys(value)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : /* @__PURE__ */ jsx(Analytics, { sx: { ml: 1 } }),
+            disabled: loading,
+            onClick: () => performAggregation(),
+            children: t("button.aggregate")
+          }
+        )
+      ] }),
+      isEmpty(aggregateResults) && /* @__PURE__ */ jsxs(Alert, { severity: "info", variant: "outlined", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: t("hit.summary.aggregate.nokeys.title") }),
+        t("hit.summary.aggregate.nokeys.description")
+      ] }),
+      loading && /* @__PURE__ */ jsx(LinearProgress, { sx: { minHeight: "4px" } }),
+      Object.keys(aggregateResults).filter((key) => !isEmpty(aggregateResults[key])).flatMap((key) => {
+        var _a, _b, _c, _d;
+        return [
+          /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", children: key }, key + "-title"),
+            ((_a = keyCounts[key]) == null ? void 0 : _a.count) < 0 ? /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+              "(",
+              t("hit.summary.adhoc.custom"),
+              ")"
+            ] }) : /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+              "(",
+              ((_b = keyCounts[key]) == null ? void 0 : _b.count) ?? "?",
+              " ",
+              t("references"),
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: /* @__PURE__ */ jsxs(Stack, { children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t("hit.summary.aggregate.sources") }),
+                  ((_c = keyCounts[key]) == null ? void 0 : _c.sources.map((source) => /* @__PURE__ */ jsx(Typography, { variant: "caption", children: source }, source))) ?? "?"
+                ] }),
+                children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "inherit" })
+              }
+            )
+          ] }) }, key + "-refs"),
+          /* @__PURE__ */ jsx(Fade, { in: true, children: ((_d = hitFields.find((f) => f.key === key)) == null ? void 0 : _d.type) !== "date" ? /* @__PURE__ */ jsx(Box, { sx: (theme) => ({ ml: `${theme.spacing(1)} !important`, alignSelf: "start" }), children: /* @__PURE__ */ jsx(Grid, { container: true, sx: (theme) => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map((item) => /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", children: /* @__PURE__ */ jsx(
+            PluginChip,
+            {
+              context: "summary",
+              size: "small",
+              variant: "filled",
+              value: item,
+              label: `${item} (${aggregateResults[key][item]})`,
+              onClick: () => setSearch(key, `"${item}"`),
+              field: key
+            }
+          ) }, item)) }, key + "-list") }) : /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "small",
+              sx: (theme) => ({ ml: `${theme.spacing(1)} !important`, alignSelf: "start" }),
+              label: getTimeRange(Object.keys(aggregateResults[key])).map((d) => new Date(d).toLocaleString()).join(" - "),
+              onClick: () => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(" TO ")}]`)
+            }
+          ) }, key + "-results")
+        ];
+      })
+    ] })
+  ] });
+};
+const HitSummary$1 = memo(HitSummary);
+export {
+  HitSummary$1 as default
+};

package/components/elements/hit/HitWorklog.d.ts

@@ -0,0 +1,10 @@
+import { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { FC } from 'react';
+declare const HitWorklog: FC<{
+    hit: Hit;
+    users: {
+        [id: string]: HowlerUser;
+    };
+}>;
+export default HitWorklog;

package/components/elements/hit/HitWorklog.js

@@ -0,0 +1,163 @@
+import { jsx, jsxs, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { KeyboardArrowUp } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, Divider, Stack, Typography, CardHeader, Tooltip, CardContent, Skeleton } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { useMyLocalStorageItem } from "../../hooks/useMyLocalStorage.js";
+import useMyUtils from "../../hooks/useMyUtils.js";
+import { useMemo, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { StorageKey } from "../../../utils/constants.js";
+import { compareTimestamp, twitterShort } from "../../../utils/utils.js";
+import HowlerAvatar from "../display/HowlerAvatar.js";
+import HowlerCard from "../display/HowlerCard.js";
+import Markdown from "../display/Markdown.js";
+const HitWorklog = ({ hit, users }) => {
+  var _a;
+  const theme = useTheme();
+  const { shiftColor } = useMyUtils();
+  const { t } = useTranslation();
+  const [initialVersions, setInitialVersions] = useMyLocalStorageItem(
+    StorageKey.LAST_SEEN,
+    {}
+  );
+  const worklogGroups = useMemo(
+    () => {
+      var _a2;
+      let setInitialVersion = false;
+      return (((_a2 = hit == null ? void 0 : hit.howler) == null ? void 0 : _a2.log) || []).slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)).reduce((acc, l) => {
+        if (!initialVersions[hit.howler.id] && !setInitialVersion) {
+          setInitialVersion = true;
+          setInitialVersions({
+            ...initialVersions,
+            [hit.howler.id]: l.previous_version
+          });
+        }
+        if (!acc.length) {
+          return [[l]];
+        }
+        const currArr = acc[acc.length - 1];
+        if (
+          // Does this log version match the saved version?
+          l.previous_version === initialVersions[hit.howler.id] && // Does the previous entry not match?
+          currArr[currArr.length - 1].previous_version !== initialVersions[hit.howler.id]
+        ) {
+          acc.push([l]);
+          return acc;
+        }
+        if (currArr[0].user === l.user && compareTimestamp(currArr[0].timestamp, l.timestamp) < 60 * 5) {
+          currArr.push(l);
+          return acc;
+        }
+        acc.push([l]);
+        return acc;
+      }, []);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [(_a = hit == null ? void 0 : hit.howler) == null ? void 0 : _a.log]
+  );
+  useEffect(() => {
+    return () => {
+      var _a2;
+      if (hit == null ? void 0 : hit.howler.id) {
+        setInitialVersions({
+          ...initialVersions,
+          [hit.howler.id]: ((_a2 = worklogGroups[0][0]) == null ? void 0 : _a2.previous_version) ?? initialVersions[hit.howler.id]
+        });
+      }
+    };
+  }, []);
+  const worklogEls = useMemo(() => {
+    if (worklogGroups.length > 0) {
+      return worklogGroups.flatMap((ls, index) => {
+        var _a2;
+        const result = [];
+        if (index > 0 && initialVersions[hit.howler.id] && ls[0].previous_version === initialVersions[hit.howler.id]) {
+          result.push(
+            /* @__PURE__ */ jsx(Divider, { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+              /* @__PURE__ */ jsx(KeyboardArrowUp, { sx: { color: "text.secondary" }, fontSize: "small" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("hit.worklog.new") }),
+              /* @__PURE__ */ jsx(KeyboardArrowUp, { sx: { color: "text.secondary" }, fontSize: "small" })
+            ] }) }, "new")
+          );
+        }
+        result.push(
+          /* @__PURE__ */ jsxs(HowlerCard, { elevation: 4, children: [
+            /* @__PURE__ */ jsx(
+              CardHeader,
+              {
+                avatar: /* @__PURE__ */ jsx(HowlerAvatar, { userId: ls[0].user }),
+                title: ((_a2 = users[ls[0].user]) == null ? void 0 : _a2.name) ?? ls[0].user,
+                subheader: /* @__PURE__ */ jsx(Tooltip, { title: new Date(ls[0].timestamp).toLocaleString(), children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: twitterShort(ls[0].timestamp) }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Stack, { spacing: 1, divider: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal" }), children: ls.map((l) => {
+              var _a3, _b;
+              return /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  variant: "body2",
+                  color: "text.secondary",
+                  component: "div",
+                  position: "relative",
+                  children: [
+                    l.explanation ? /* @__PURE__ */ jsx(Markdown, { md: l.explanation.trim() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        t("hit.worklog.updated"),
+                        " "
+                      ] }),
+                      /* @__PURE__ */ jsx("code", { children: l.key }),
+                      /* @__PURE__ */ jsx("span", { children: ": " }),
+                      {
+                        set: /* @__PURE__ */ jsxs("span", { children: [
+                          l.previous_value,
+                          " ",
+                          t("hit.worklog.set"),
+                          " ",
+                          l.new_value
+                        ] }),
+                        appended: /* @__PURE__ */ jsxs("span", { children: [
+                          l.new_value,
+                          " ",
+                          t("hit.worklog.appended"),
+                          " ",
+                          (_a3 = l.previous_value) == null ? void 0 : _a3.replace(/[[\]]/g, "")
+                        ] }),
+                        removed: /* @__PURE__ */ jsxs("span", { children: [
+                          l.new_value,
+                          " ",
+                          t("hit.worklog.removed"),
+                          " ",
+                          (_b = l.previous_value) == null ? void 0 : _b.replace(/[[\]]/g, "")
+                        ] })
+                      }[l.type]
+                    ] }),
+                    ls.length > 1 && /* @__PURE__ */ jsx(Tooltip, { title: new Date(l.timestamp).toLocaleString(), children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        sx: { ml: 0.5, position: "absolute", right: "1rem", top: 0 },
+                        variant: "caption",
+                        color: shiftColor(theme.palette.text.primary, 0.5),
+                        children: twitterShort(l.timestamp)
+                      }
+                    ) })
+                  ]
+                },
+                l.timestamp
+              );
+            }) }) })
+          ] }, ls[0].timestamp)
+        );
+        return result;
+      });
+    } else if (!(hit == null ? void 0 : hit.howler)) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 200, variant: "rounded" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 220, variant: "rounded" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 150, variant: "rounded" })
+      ] });
+    }
+  }, [worklogGroups, hit.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
+  return /* @__PURE__ */ jsx(Stack, { sx: { p: 2 }, spacing: 1, children: worklogEls });
+};
+export {
+  HitWorklog as default
+};

package/components/elements/hit/actions/ButtonActions.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { HitShortcuts } from '../HitShortcuts';
+import { ActionButton } from './SharedComponents';
+interface DesktopActionProps {
+    actions: ActionButton[];
+    loading: boolean;
+    shortcuts: HitShortcuts;
+    currentVote: string;
+    orientation: 'horizontal' | 'vertical';
+}
+declare const ButtonActions: FC<DesktopActionProps>;
+export default ButtonActions;