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

package/components/elements/display/modals/CreateActionModal.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Stack, Typography, TextField, Button } 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 { parseEvent } from "../../../../commons/components/utils/keyboard.js";
+import { ModalContext } from "../../../app/providers/ModalProvider.js";
+import useMySnackbar from "../../../hooks/useMySnackbar.js";
+import { useContext, useState, useCallback } 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";
+const CreateActionModal = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const { close } = useContext(ModalContext);
+  const { showInfoMessage } = useMySnackbar();
+  const [actionName, setActionName] = useState("");
+  const handleSubmit = useCallback(() => {
+    if (actionName) {
+      onSubmit(actionName);
+      close();
+    } else {
+      showInfoMessage(t("modal.action.empty"));
+    }
+  }, [actionName, onSubmit, close, showInfoMessage, t]);
+  const handleKeydown = useCallback(
+    (e) => {
+      const parsedEvent = parseEvent(e);
+      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+        handleSubmit();
+      } else if (parsedEvent.isEscape) {
+        close();
+      }
+    },
+    [close, handleSubmit]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: "500px" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", children: t("modal.action.title") }),
+    /* @__PURE__ */ jsx(Typography, { children: t("modal.action.description") }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: t("modal.action.label"),
+        value: actionName,
+        autoFocus: true,
+        fullWidth: true,
+        onChange: (e) => setActionName(e.target.value),
+        onKeyDown: handleKeydown
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: close, children: t("cancel") }),
+      /* @__PURE__ */ jsx(Button, { disabled: !actionName, variant: "outlined", onClick: handleSubmit, children: t("submit") })
+    ] })
+  ] });
+};
+export {
+  CreateActionModal as default
+};

package/components/elements/display/modals/LoginErrorModal.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+declare const LoginErrorModal: FC<{
+    error: Error;
+}>;
+export default LoginErrorModal;

package/components/elements/display/modals/LoginErrorModal.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Error } 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, Button } 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 { 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";
+const LoginErrorModal = ({ error }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 3, alignItems: "center", children: [
+    /* @__PURE__ */ jsx("img", { src: "/images/doggie.png", alt: "" }),
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+        /* @__PURE__ */ jsx(Error, { color: "error" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("user.error.modal.header") })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", sx: { mt: 1, mb: 1 } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("user.error.modal.body") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mt: 1 }, children: t("user.error.modal.details") }),
+      /* @__PURE__ */ jsx("code", { style: { fontSize: "0.8rem" }, children: error.toString() }),
+      /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "end", sx: { pt: 1 }, children: /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: t("user.error.modal.reload") }) })
+    ] })
+  ] });
+};
+export {
+  LoginErrorModal as default
+};

package/components/elements/display/modals/RationaleModal.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+declare const RationaleModal: FC<{
+    onSubmit: (rationale: string) => void;
+}>;
+export default RationaleModal;

package/components/elements/display/modals/RationaleModal.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Stack, Typography, TextField, Button } 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 { parseEvent } from "../../../../commons/components/utils/keyboard.js";
+import { ModalContext } from "../../../app/providers/ModalProvider.js";
+import { useContext, useState, useCallback } 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";
+const RationaleModal = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const { close } = useContext(ModalContext);
+  const [rationale, setRationale] = useState("");
+  const handleSubmit = useCallback(() => {
+    onSubmit(rationale);
+    close();
+  }, [onSubmit, rationale, close]);
+  const handleKeydown = useCallback(
+    (e) => {
+      const parsedEvent = parseEvent(e);
+      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+        handleSubmit();
+      } else if (parsedEvent.isEscape) {
+        close();
+      }
+    },
+    [close, handleSubmit]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: "500px" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", children: t("modal.rationale.title") }),
+    /* @__PURE__ */ jsx(Typography, { children: t("modal.rationale.description") }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: t("modal.rationale.label"),
+        value: rationale,
+        autoFocus: true,
+        fullWidth: true,
+        multiline: true,
+        maxRows: 6,
+        onChange: (e) => setRationale(e.target.value),
+        onKeyDown: handleKeydown
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: close, children: t("cancel") }),
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleSubmit, children: t("submit") })
+    ] })
+  ] });
+};
+export {
+  RationaleModal as default
+};

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

@@ -0,0 +1,6 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import('react').NamedExoticComponent<{
+    hit: Hit;
+    orientation?: "horizontal" | "vertical";
+}>;
+export default _default;

package/components/elements/hit/HitActions.js

@@ -0,0 +1,255 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { MoreHoriz } 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 { useMediaQuery, Stack, Box, CircularProgress, IconButton, Menu, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Switch, Divider } 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 useMatchers from "../../app/hooks/useMatchers.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import { HitContext } from "../../app/providers/HitProvider.js";
+import { HitSearchContext } from "../../app/providers/HitSearchProvider.js";
+import { ParameterContext } from "../../app/providers/ParameterProvider.js";
+import { ViewContext } from "../../app/providers/ViewProvider.js";
+import useHitActions from "../../hooks/useHitActions.js";
+import { useMyLocalStorageProvider } from "../../hooks/useMyLocalStorage.js";
+import json2mq from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/json2mq@0.2.0/node_modules/json2mq/index.js";
+import howlerPluginStore from "../../../plugins/store.js";
+import { memo, useContext, useState, useMemo, useCallback, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { isMobile } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-device-detect@2.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-device-detect/dist/lib.js";
+import { 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 { usePluginStore } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-pluggable@0.4.3_react@18.3.1/node_modules/react-pluggable/dist/react-pluggable.esm.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 Throttler from "../../../utils/Throttler.js";
+import { StorageKey } from "../../../utils/constants.js";
+import { HitShortcuts } from "./HitShortcuts.js";
+import ButtonActions from "./actions/ButtonActions.js";
+import DropdownActions from "./actions/DropdownActions.js";
+import { VOTE_OPTIONS, TOP_ROW, ASSESSMENT_KEYBINDS } from "./actions/SharedComponents.js";
+const THROTTLER = new Throttler(250);
+const HitActions = ({ hit, orientation = "horizontal" }) => {
+  const { config } = useContext(ApiConfigContext);
+  const { values, set } = useMyLocalStorageProvider();
+  const pluginStore = usePluginStore();
+  const { getMatchingAnalytic } = useMatchers();
+  const getCurrentView = useContextSelector(ViewContext, (ctx) => ctx.getCurrentView);
+  const selected = useContextSelector(ParameterContext, (ctx) => ctx == null ? void 0 : ctx.selected);
+  const setSelected = useContextSelector(ParameterContext, (ctx) => ctx == null ? void 0 : ctx.setSelected);
+  const clearSelectedHits = useContextSelector(HitContext, (ctx) => ctx.clearSelectedHits);
+  const nextHit = useContextSelector(HitSearchContext, (ctx) => {
+    if (!(ctx == null ? void 0 : ctx.response) || !selected) {
+      return null;
+    }
+    return ctx.response.items[(ctx.response.items.findIndex((_hit) => _hit.howler.id === selected) ?? -1) + 1] ?? null;
+  });
+  const { availableTransitions, canVote, canAssess, loading, assess, vote, selectedVote } = useHitActions([hit]);
+  const [openSetting, setOpenSetting] = useState(null);
+  const [analytic, setAnalytic] = useState(null);
+  const shortcuts = useMemo(
+    () => isMobile ? HitShortcuts.NO_SHORTCUTS : values[StorageKey.HIT_SHORTCUTS] ?? HitShortcuts.SHORTCUTS_HINT,
+    [values]
+  );
+  const forceDropdown = useMemo(() => values[StorageKey.FORCE_DROPDOWN] ?? false, [values]);
+  const pluginActions = howlerPluginStore.plugins.flatMap(
+    (plugin) => pluginStore.executeFunction(`${plugin}.actions`, [hit])
+  );
+  const actions = useMemo(() => {
+    var _a;
+    let _actions = [...availableTransitions, ...pluginActions];
+    if (canVote) {
+      _actions = [
+        ..._actions,
+        ...VOTE_OPTIONS.map(
+          (option) => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) })
+        )
+      ];
+    }
+    if (((_a = config.lookups) == null ? void 0 : _a["howler.assessment"]) && canAssess) {
+      _actions = [
+        ..._actions,
+        ...config.lookups["howler.assessment"].filter(
+          (_assessment) => {
+            var _a2, _b;
+            return ((_a2 = analytic == null ? void 0 : analytic.triage_settings) == null ? void 0 : _a2.valid_assessments) ? (_b = analytic.triage_settings) == null ? void 0 : _b.valid_assessments.includes(_assessment) : true;
+          }
+        ).sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a)).map((assessment, index) => ({
+          type: "assessment",
+          name: assessment,
+          actionFunction: async () => {
+            var _a2, _b, _c;
+            if (!loading) {
+              await assess(assessment, (_a2 = analytic == null ? void 0 : analytic.triage_settings) == null ? void 0 : _a2.skip_rationale);
+              if (((_c = (_b = await getCurrentView()) == null ? void 0 : _b.settings) == null ? void 0 : _c.advance_on_triage) && nextHit) {
+                clearSelectedHits(nextHit.howler.id);
+                setSelected == null ? void 0 : setSelected(nextHit.howler.id);
+              }
+            }
+          },
+          key: ASSESSMENT_KEYBINDS[index]
+        }))
+      ];
+    }
+    return _actions;
+  }, [
+    analytic,
+    assess,
+    availableTransitions,
+    canAssess,
+    canVote,
+    clearSelectedHits,
+    config.lookups,
+    getCurrentView,
+    loading,
+    nextHit,
+    setSelected,
+    vote,
+    pluginActions
+  ]);
+  const keyboardDownHandler = useCallback(
+    (event) => {
+      THROTTLER.debounce(() => {
+        const currentElement = document.activeElement.tagName;
+        if (shortcuts !== HitShortcuts.NO_SHORTCUTS && event.key.toUpperCase() in actions && !event.ctrlKey && currentElement !== "INPUT") {
+          actions[event.key.toUpperCase()]();
+        }
+      });
+    },
+    [actions, shortcuts]
+  );
+  useEffect(() => {
+    if (!isMobile) {
+      window.addEventListener("keydown", keyboardDownHandler);
+      return () => window.removeEventListener("keydown", keyboardDownHandler);
+    }
+  }, [keyboardDownHandler]);
+  useEffect(() => {
+    getMatchingAnalytic(hit).then(setAnalytic);
+  }, [hit == null ? void 0 : hit.howler.analytic]);
+  const handleOpenSetting = useCallback((e) => setOpenSetting(e.currentTarget), []);
+  const handleCloseSetting = useCallback(() => setOpenSetting(null), []);
+  const onShortcutChange = useCallback((__, s) => set(StorageKey.HIT_SHORTCUTS, s), [set]);
+  const onDropdownChange = useCallback((__, checked) => set(StorageKey.FORCE_DROPDOWN, checked), [set]);
+  const showButton = useMediaQuery(
+    // Only show the buttons when there's sufficient space
+    // TODO: Could probably make this fancier and maybe remove the react device detect dependency, but this is fine for now
+    json2mq([
+      {
+        minWidth: 1800
+      }
+    ])
+  );
+  const showDropdown = isMobile || !showButton;
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "stretch", children: [
+    showDropdown || forceDropdown ? /* @__PURE__ */ jsx(
+      DropdownActions,
+      {
+        currentAssessment: hit == null ? void 0 : hit.howler.assessment,
+        currentStatus: hit == null ? void 0 : hit.howler.status,
+        currentVote: selectedVote,
+        actions,
+        loading,
+        orientation
+      }
+    ) : /* @__PURE__ */ jsx(
+      ButtonActions,
+      {
+        currentVote: selectedVote,
+        actions,
+        loading,
+        orientation,
+        shortcuts
+      }
+    ),
+    (!showDropdown || !isMobile) && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: [
+          {
+            flex: 1,
+            alignSelf: "start",
+            display: "flex",
+            justifyContent: "end",
+            alignItems: "center",
+            p: 1
+          },
+          (showDropdown || forceDropdown) && { flexDirection: "column-reverse", justifyContent: "center" },
+          !showDropdown && !forceDropdown && {
+            position: "absolute",
+            top: 0,
+            right: 0
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            CircularProgress,
+            {
+              size: 24,
+              sx: (theme) => ({
+                // Sneaky trick: +true === 1, +false === 0. Love you, javascript <3
+                opacity: +loading,
+                transition: `${theme.transitions.duration.standard}ms`
+              })
+            }
+          ),
+          !showDropdown && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleOpenSetting, children: /* @__PURE__ */ jsx(MoreHoriz, {}) }),
+          /* @__PURE__ */ jsx(
+            Menu,
+            {
+              anchorEl: openSetting,
+              open: !!openSetting,
+              onClose: handleCloseSetting,
+              transformOrigin: { horizontal: "right", vertical: "top" },
+              anchorOrigin: { horizontal: "right", vertical: "bottom" },
+              slotProps: {
+                paper: {
+                  sx: {
+                    "& ul": {
+                      p: 2,
+                      display: "flex",
+                      flexDirection: "column"
+                    }
+                  }
+                }
+              },
+              children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, divider: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal" }), children: [
+                /* @__PURE__ */ jsxs(FormControl, { children: [
+                  /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.details.shortcuts" }) }),
+                  /* @__PURE__ */ jsxs(RadioGroup, { value: shortcuts, name: "radio-buttons-group", onChange: onShortcutChange, children: [
+                    /* @__PURE__ */ jsx(
+                      FormControlLabel,
+                      {
+                        value: HitShortcuts.SHORTCUTS_HINT,
+                        control: /* @__PURE__ */ jsx(Radio, {}),
+                        label: /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.search.keyboard.shortcuts_hints" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FormControlLabel,
+                      {
+                        value: HitShortcuts.SHORTCUTS,
+                        control: /* @__PURE__ */ jsx(Radio, {}),
+                        label: /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.search.keyboard.shortcuts" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FormControlLabel,
+                      {
+                        value: HitShortcuts.NO_SHORTCUTS,
+                        control: /* @__PURE__ */ jsx(Radio, {}),
+                        label: /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.search.keyboard.no_shortcuts" })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(FormControl, { sx: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx(FormLabel, { sx: { mr: 1 }, children: /* @__PURE__ */ jsx(Trans, { i18nKey: "hit.details.forceDropdown" }) }),
+                  /* @__PURE__ */ jsx(Switch, { checked: forceDropdown, onChange: onDropdownChange })
+                ] })
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+const HitActions$1 = memo(HitActions);
+export {
+  HitActions$1 as default
+};

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

@@ -0,0 +1,15 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { FC } from 'react';
+import { HitLayout } from './HitLayout';
+type HitBannerProps = {
+    hit: Hit;
+    layout?: HitLayout;
+    showAssigned?: boolean;
+    useListener?: boolean;
+};
+export interface StatusProps<T extends Hit = Hit> {
+    hit: T;
+    layout: HitLayout;
+}
+declare const HitBanner: FC<HitBannerProps>;
+export default HitBanner;