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

package/components/elements/hit/actions/ButtonActions.js

@@ -0,0 +1,215 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { styled, Badge, Stack, FormControl, FormLabel, Button, Tooltip, RadioGroup, FormControlLabel, Radio } 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 { blueGrey } 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/colors/index.js";
+import { useMemo } 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 { HitShortcuts } from "../HitShortcuts.js";
+import { TOP_ROW } from "./SharedComponents.js";
+const StyledBadge = styled(Badge)({
+  "& .MuiBadge-badge": {
+    borderRadius: "4px",
+    background: blueGrey[400],
+    fontSize: 9,
+    height: "15px",
+    minWidth: "15px",
+    padding: "0",
+    right: "5px",
+    top: "2.5px"
+  }
+});
+const ButtonActions = ({ actions, loading, orientation, shortcuts, currentVote }) => {
+  const { t } = useTranslation();
+  const isHorizontal = useMemo(() => orientation === "horizontal", [orientation]);
+  const showShortcuts = useMemo(() => shortcuts === HitShortcuts.SHORTCUTS_HINT, [shortcuts]);
+  const actionRows = useMemo(
+    () => actions.filter((action) => action.type === "action").reduce(
+      ([top, bottom], action) => {
+        if (top.length === bottom.length) {
+          top.push(action);
+        } else {
+          bottom.push(action);
+        }
+        return [top, bottom];
+      },
+      [[], []]
+    ),
+    [actions]
+  );
+  const assessmentRows = useMemo(
+    () => actions.filter((action) => action.type === "assessment").reduce(
+      ([top, bottom], action) => {
+        if (TOP_ROW.includes(action.name)) {
+          top.push(action);
+        } else {
+          bottom.push(action);
+        }
+        return [top, bottom];
+      },
+      [[], []]
+    ) ?? [],
+    [actions]
+  );
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: isHorizontal ? "row" : "column",
+      spacing: 0.75,
+      alignItems: !isHorizontal && "start",
+      py: 1,
+      sx: { position: "relative", flex: 1 },
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            disabled: loading,
+            sx: [
+              {
+                display: "grid",
+                justifyContent: "stretch",
+                gap: 0.8
+              },
+              isHorizontal ? {
+                // If you want to understand the disgusting, unholy grid shenanigans that's going on here, talk to Matt R
+                // If you want to complain about how bad this is, talk to Ben
+                gridTemplateRows: "auto 1fr 1fr",
+                // Make sure the buttons are the same height
+                gridAutoColumns: "minmax(0, 125px)",
+                // Make sure the buttons are the same width
+                // God help me
+                gridTemplateColumns: `repeat(auto, 125px)`
+                // Why do we need to use both gridTemplateColumns AND gridAutoColumns, you ask?
+                // I DON'T KNOW ASK WHOEVER WROTE THE CSS GRID SPEC
+              } : {
+                gridTemplateColumns: "1fr 1fr"
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(FormLabel, { children: t("hit.details.actions.action") }),
+              actionRows.flatMap(
+                (row, rowIndex) => row.map((option, index) => {
+                  const gridSx = isHorizontal ? { gridColumn: index, gridRow: rowIndex + 2 } : { gridColumn: rowIndex + 1, gridRow: index + 2 };
+                  const button = /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      variant: "outlined",
+                      color: "secondary",
+                      disabled: loading,
+                      onClick: option.actionFunction,
+                      sx: [
+                        {
+                          width: "100%",
+                          p: 0.6
+                        },
+                        gridSx,
+                        isHorizontal && ((theme) => ({ fontSize: theme.typography.caption.fontSize }))
+                      ],
+                      children: option.i18nKey ? t(option.i18nKey) : option.name
+                    },
+                    option.name
+                  );
+                  if (showShortcuts) {
+                    return /* @__PURE__ */ jsx(StyledBadge, { badgeContent: option.key, sx: gridSx, children: button }, option.name);
+                  }
+                  return button;
+                })
+              ),
+              assessmentRows.flat().length > 0 && /* @__PURE__ */ jsx(
+                FormLabel,
+                {
+                  sx: isHorizontal ? {
+                    gridRow: 1,
+                    gridColumn: actionRows[0].length + 1
+                  } : { gridRow: actionRows[0].length + 2 },
+                  children: t("hit.details.actions.assessment")
+                }
+              ),
+              assessmentRows.flatMap(
+                (row, rowIndex) => row.map((action, index) => {
+                  const gridSx = isHorizontal ? {
+                    gridColumn: index + 1 + actionRows[0].length,
+                    gridRow: rowIndex + 2
+                  } : { gridColumn: rowIndex + 1, gridRow: index + 3 + actionRows[0].length };
+                  const button = /* @__PURE__ */ jsx(Tooltip, { title: t(`hit.details.asessments.${action.name}.description`), children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      size: "small",
+                      disabled: loading,
+                      onClick: action.actionFunction,
+                      sx: [
+                        {
+                          width: "100%",
+                          p: 0.6
+                        },
+                        gridSx,
+                        isHorizontal && ((theme) => ({ fontSize: theme.typography.caption.fontSize }))
+                      ],
+                      children: action.name
+                    },
+                    action.name
+                  ) });
+                  if (showShortcuts) {
+                    return /* @__PURE__ */ jsx(StyledBadge, { badgeContent: action.key, sx: gridSx, children: button }, action.key);
+                  }
+                  return button;
+                })
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            disabled: loading || !actions.some((action) => action.type === "vote"),
+            sx: { opacity: +actions.some((action) => action.type === "vote") },
+            children: [
+              /* @__PURE__ */ jsx(FormLabel, { sx: { mb: 1 }, children: t("hit.details.actions.vote") }),
+              /* @__PURE__ */ jsx(RadioGroup, { value: currentVote, children: actions.filter((action) => action.type === "vote").map((action) => {
+                const button = /* @__PURE__ */ jsx(
+                  FormControlLabel,
+                  {
+                    value: action.name.toLowerCase(),
+                    sx: { display: "flex", alignItems: "center" },
+                    componentsProps: {
+                      typography: {
+                        sx: [isHorizontal && ((theme) => ({ fontSize: theme.typography.caption.fontSize }))]
+                      }
+                    },
+                    control: /* @__PURE__ */ jsx(Radio, { size: "small", sx: [{ mr: 1 }, isHorizontal && { p: 0.5 }] }),
+                    label: action.name,
+                    onClick: action.actionFunction
+                  },
+                  action.key
+                );
+                if (showShortcuts && action.key) {
+                  return /* @__PURE__ */ jsx(
+                    StyledBadge,
+                    {
+                      badgeContent: action.key,
+                      sx: [
+                        { "& .MuiBadge-badge": { left: "20px", top: "5px", right: "unset" } },
+                        loading && { ".MuiBadge-badge": { opacity: "0.5" } }
+                      ],
+                      anchorOrigin: {
+                        vertical: "top",
+                        horizontal: "left"
+                      },
+                      children: button
+                    },
+                    action.key
+                  );
+                }
+                return button;
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ButtonActions as default
+};

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

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

package/components/elements/hit/actions/DropdownActions.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Grid, Skeleton, FormControl, InputLabel, Select, MenuItem, Stack, Typography, formControlClasses } 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 { ApiConfigContext } from "../../../app/providers/ApiConfigProvider.js";
+import { capitalize } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import { useContext, useMemo } 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 DropdownActions = ({
+  actions,
+  currentAssessment,
+  currentStatus,
+  currentVote,
+  loading,
+  orientation
+}) => {
+  const { t } = useTranslation();
+  const config = useContext(ApiConfigContext);
+  const isHorizontal = useMemo(() => orientation === "horizontal", [orientation]);
+  if (!config.config.lookups) {
+    return /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "end", spacing: 4, p: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, sm: "auto", xs: 12, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === "horizontal" ? "40px" : "56px" }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, sm: "auto", xs: 12, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === "horizontal" ? "40px" : "56px" }) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, sm: "auto", xs: 12, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === "horizontal" ? "40px" : "56px" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      justifyContent: "end",
+      spacing: 2,
+      p: 2,
+      sx: [isHorizontal && { [`& .${formControlClasses.root}`]: { minWidth: "140px" } }],
+      children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, sm: !isHorizontal ? true : "auto", xs: 12, children: /* @__PURE__ */ jsxs(FormControl, { disabled: loading, fullWidth: true, children: [
+          /* @__PURE__ */ jsx(InputLabel, { id: "transition-label", htmlFor: "transition", children: t("hit.details.actions.action") }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              labelId: "transition-label",
+              id: "transition",
+              size: isHorizontal ? "small" : "medium",
+              label: t("hit.details.actions.action"),
+              value: currentStatus,
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { value: currentStatus, sx: { display: "none" }, children: currentStatus.replace(/-/g, " ").replace(/^[a-z]/, (val) => val.toUpperCase()) }),
+                actions.filter((_action) => _action.type === "action").map((_action) => /* @__PURE__ */ jsx(MenuItem, { value: _action.name, onClick: _action.actionFunction, children: _action.i18nKey ? t(_action.i18nKey) : _action.name }, _action.name))
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, sm: !isHorizontal ? true : "auto", xs: 12, children: /* @__PURE__ */ jsxs(FormControl, { disabled: loading || !actions.some((action) => action.type === "assessment"), fullWidth: true, children: [
+          /* @__PURE__ */ jsx(InputLabel, { id: "assess-label", htmlFor: "assess", children: t("hit.details.actions.assessment") }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              labelId: "assess-label",
+              id: "assess",
+              size: isHorizontal ? "small" : "medium",
+              label: t("hit.details.actions.assessment"),
+              value: currentAssessment ?? "no-assessment",
+              MenuProps: {
+                anchorOrigin: { horizontal: "left", vertical: "bottom" },
+                transformOrigin: { horizontal: "left", vertical: "top" }
+              },
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { value: "no-assessment", sx: { display: "none" }, children: t("hit.details.actions.assessment.noassessment") }),
+                actions.filter((action) => action.type === "assessment").map((a) => /* @__PURE__ */ jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+                  /* @__PURE__ */ jsx("span", { children: a.name.split(/[ -]/).map((part) => capitalize(part)).join(" ") }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", maxWidth: "250px", sx: { whiteSpace: "wrap" }, children: t(`hit.details.asessments.${a.name}.description`) })
+                ] }) }, a.name))
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, sm: !isHorizontal ? true : "auto", xs: 12, children: /* @__PURE__ */ jsxs(FormControl, { disabled: loading || !actions.some((action) => action.type === "vote"), fullWidth: true, children: [
+          /* @__PURE__ */ jsx(InputLabel, { id: "vote-label", htmlFor: "vote", children: t("hit.details.actions.vote") }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              labelId: "vote-label",
+              id: "vote",
+              size: isHorizontal ? "small" : "medium",
+              label: t("hit.details.actions.vote"),
+              value: currentVote || "no-vote",
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { value: "no-vote", sx: { display: "none" }, children: t("hit.details.actions.vote.novote") }),
+                actions.filter((action) => action.type === "vote").map((action) => /* @__PURE__ */ jsx(MenuItem, { value: action.name.toLowerCase(), onClick: action.actionFunction, children: action.i18nKey ? t(action.i18nKey) : action.name }, action.name))
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  DropdownActions as default
+};

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

@@ -0,0 +1,18 @@
+import { StyledComponent } from '@emotion/styled';
+import { BadgeProps } from '@mui/material';
+import { ReactNode } from 'react';
+export type ActionButton = {
+    type: 'assessment' | 'action' | 'vote';
+    name: string;
+    actionFunction: () => void;
+    key?: string;
+    i18nKey?: string;
+    icon?: ReactNode;
+};
+export type Keybinds = {
+    [key: string]: () => void;
+};
+export declare const TOP_ROW: string[];
+export declare const ASSESSMENT_KEYBINDS: string[];
+export declare const VOTE_OPTIONS: Partial<ActionButton>[];
+export declare const StyledBadge: StyledComponent<BadgeProps>;

package/components/elements/hit/actions/SharedComponents.js

@@ -0,0 +1,27 @@
+import { styled, Badge } 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 { blueGrey } 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/colors/index.js";
+const TOP_ROW = ["legitimate", "false-positive", "ambiguous", "development", "security"];
+const ASSESSMENT_KEYBINDS = ["A", "S", "D", "F", "G", "Z", "X", "C", "V", "B"];
+const VOTE_OPTIONS = [
+  { name: "Benign", key: "Q", type: "vote" },
+  { name: "Obscure", key: "W", type: "vote" },
+  { name: "Malicious", key: "E", type: "vote" }
+];
+const StyledBadge = styled(Badge)({
+  "& .MuiBadge-badge": {
+    borderRadius: "4px",
+    background: blueGrey[400],
+    fontSize: 9,
+    height: "15px",
+    minWidth: "15px",
+    padding: "0",
+    right: "5px",
+    top: "2.5px"
+  }
+});
+export {
+  ASSESSMENT_KEYBINDS,
+  StyledBadge,
+  TOP_ROW,
+  VOTE_OPTIONS
+};

package/components/elements/hit/aggregate/HitGraph.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+declare const HitGraph: FC<{
+    query: string;
+}>;
+export default HitGraph;