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

package/components/routes/help/SearchDocumentation.js

@@ -0,0 +1,515 @@
+import { jsxs, jsx, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { ExpandMore } 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 { styled, emphasize, Chip, useTheme, useMediaQuery, Stack, Tab, Typography, Box, Card, Accordion, AccordionSummary, AccordionDetails, Table, TableHead, TableRow, TableCell, TableBody } 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 "../../../commons/components/app/AppContexts.js";
+import { memo, useContext, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useAppBar } from "../../../commons/components/app/hooks/useAppBar.js";
+import "../../../i18n.js";
+import { useAppLayout } from "../../../commons/components/app/hooks/useAppLayout.js";
+import "../../../commons/components/app/hooks/useAppSitemap.js";
+import { useAppUser } from "../../../commons/components/app/hooks/useAppUser.js";
+import PageCenter from "../../../commons/components/pages/PageCenter.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import { useScrollRestoration } from "../../hooks/useScrollRestoration.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 { useLocation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import HelpTabs from "./components/HelpTabs.js";
+const TableRoot = styled("div")(({ theme }) => ({
+  "& .MuiTable-root": {
+    paddingRight: 8,
+    paddingLeft: 8
+  },
+  "& .MuiTableHead-root": {
+    backgroundColor: theme.palette.mode === "dark" ? "#404040" : "#EEE",
+    whiteSpace: "nowrap"
+  }
+}));
+const PageCenterRoot = styled(PageCenter)(({ theme }) => ({
+  "& .MuiPaper-root": {
+    backgroundColor: emphasize(theme.palette.background.default, 0.05)
+  },
+  ".multipleEx": {
+    marginBlockStart: theme.spacing(1),
+    paddingInlineStart: theme.spacing(2)
+  },
+  ".padded": {
+    paddingBottom: theme.spacing(1),
+    paddingTop: theme.spacing(1)
+  },
+  ".pre": {
+    fontFamily: "monospace",
+    fontSize: "1rem",
+    margin: theme.spacing(0, 0, 1, 0),
+    padding: theme.spacing(1, 1.5),
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+  },
+  ".paragraph": {
+    marginTop: "-96px",
+    "& .spacer": {
+      height: theme.spacing(14)
+    },
+    "& h6": {
+      fontWeight: 300
+    }
+  },
+  ".autoHide": {
+    marginTop: theme.spacing(0),
+    paddingTop: theme.spacing(4)
+  }
+}));
+const TOC_CONFIGS = [
+  { id: "overview" },
+  { id: "basic" },
+  {
+    id: "fields",
+    subItems: [{ id: "fields.legend" }, { id: "fields.idx_hit" }, { id: "fields.idx_user", is_admin: true }]
+  },
+  { id: "text vs keywords" },
+  { id: "wildcard" },
+  {
+    id: "regex",
+    subItems: [
+      { id: "regex.anchoring" },
+      { id: "regex.chars" },
+      { id: "regex.any" },
+      { id: "regex.oneplus" },
+      { id: "regex.zeroplus" },
+      { id: "regex.zeroone" },
+      { id: "regex.minmax" },
+      { id: "regex.grouping" },
+      { id: "regex.alternation" },
+      { id: "regex.class" }
+    ]
+  },
+  { id: "fuzziness" },
+  { id: "proximity" },
+  { id: "ranges", subItems: [{ id: "ranges.datemath" }] },
+  { id: "operator" },
+  { id: "grouping" },
+  { id: "reserved" }
+];
+const Paragraph = memo(({ id, children }) => {
+  const { autoHide: autoHideAppbar } = useAppBar();
+  const { current: currentLayout } = useAppLayout();
+  return /* @__PURE__ */ jsxs("div", { id, className: `paragraph ${autoHideAppbar && currentLayout !== "top" ? "autoHide" : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "spacer" }),
+    children
+  ] });
+});
+const SquareChip = styled(Chip)(({ theme }) => ({
+  borderRadius: 3,
+  height: 20,
+  margin: theme.spacing(0.1),
+  fontSize: "smaller"
+}));
+const SearchDocumentation = () => {
+  const { t } = useTranslation(["helpSearch"]);
+  const { user } = useAppUser();
+  const { config } = useContext(ApiConfigContext);
+  const location = useLocation();
+  const theme = useTheme();
+  const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
+  useScrollRestoration();
+  const indexes = useMemo(() => {
+    return (config == null ? void 0 : config.indexes) || [];
+  }, [config]);
+  return /* @__PURE__ */ jsx(PageCenterRoot, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: /* @__PURE__ */ jsxs(Stack, { sx: { flexDirection: useHorizontal ? "column" : "row", "& h1": { mt: 0 } }, children: [
+    /* @__PURE__ */ jsx(HelpTabs, { value: location.hash || "#overview", children: TOC_CONFIGS.flatMap((value) => [
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          href: `#${value.id}`,
+          label: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t(value.id) }),
+          value: `#${value.id}`
+        },
+        value.id
+      ),
+      ...(!useHorizontal && value.subItems ? value.subItems : []).map(
+        (subItem) => (!subItem.is_admin || user.is_admin) && /* @__PURE__ */ jsx(
+          Tab,
+          {
+            sx: { "& > span": { pl: 1 } },
+            href: `#${subItem.id}`,
+            label: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t(subItem.id) }),
+            value: `#${subItem.id}`
+          },
+          subItem.id
+        )
+      )
+    ]) }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", children: t("title") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: t("subtitle") }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "overview", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("overview") }),
+        /* @__PURE__ */ jsx(Fragment, { children: t("overview.text") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "basic", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("basic") }),
+        /* @__PURE__ */ jsx(Fragment, { children: t("basic.text") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "padded", children: t("exemples") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("basic.ex1") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("basic.ex2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "fields", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("fields") }),
+        /* @__PURE__ */ jsx(Fragment, { children: t("fields.text") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "padded", children: t("exemples") }),
+        /* @__PURE__ */ jsxs("ul", { className: "multipleEx", children: [
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("fields.ex1.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.ex1") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("fields.ex2.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.ex2") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("fields.ex3.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.ex3") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("fields.ex4.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.ex4") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("fields.ex5.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.ex5") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("fields.text2") }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: `${t("fields.important")}:` }) }),
+          ` ${t("fields.important.text")}`
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "text vs keywords", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("fields.textvskeywords") }),
+        /* @__PURE__ */ jsx(Fragment, { children: t("fields.textvskeywords.description") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "padded", children: t("fields.textvskeywords.keywordfamily") }),
+        /* @__PURE__ */ jsxs("ul", { className: "multipleEx", children: [
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.textvskeywords.wildcard") }),
+            t("fields.textvskeywords.wildcard.description")
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.textvskeywords.keyword") }),
+            t("fields.textvskeywords.keyword.description")
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.textvskeywords.constantkeyword") }),
+            t("fields.textvskeywords.constantkeyword.description")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", className: "padded", children: [
+          t("fields.textvskeywords.keyword.more.info"),
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/keyword",
+              style: { color: "info", textDecoration: "underline" },
+              children: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/keyword"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "padded", children: t("fields.textvskeywords.textfamily") }),
+        /* @__PURE__ */ jsxs("ul", { className: "multipleEx", children: [
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.textvskeywords.text") }),
+            t("fields.textvskeywords.text.description")
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fields.textvskeywords.matchonlytext") }),
+            t("fields.textvskeywords.matchonlytext.description")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", className: "padded", children: [
+          t("fields.textvskeywords.text.more.info"),
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/text",
+              style: { color: "info", textDecoration: "underline" },
+              children: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/text"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", className: "padded", children: [
+          t("fields.textvskeywords.text.keyword.compare"),
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://www.elastic.co/blog/strings-are-dead-long-live-strings",
+              style: { color: "info", textDecoration: "underline" },
+              children: "https://www.elastic.co/blog/strings-are-dead-long-live-strings"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", {})
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "fields.legend", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("fields.legend") }),
+        /* @__PURE__ */ jsx(Fragment, { children: t("fields.legend.text") }),
+        /* @__PURE__ */ jsxs("ul", { children: [
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("b", { children: "text" }),
+            `: ${t("fields.legend.text_field")}`
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("b", { children: "ip" }),
+            `: ${t("fields.legend.ip_field")}`
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(SquareChip, { color: "primary", size: "small", label: t("fields.att.default") }),
+            ":",
+            " ",
+            t("fields.legend.default")
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(SquareChip, { color: "warning", size: "small", label: t("fields.att.list") }),
+            ": ",
+            t("fields.legend.list")
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(SquareChip, { color: "info", size: "small", label: t("fields.att.stored") }),
+            ": ",
+            t("fields.legend.stored")
+          ] })
+        ] })
+      ] }),
+      Object.keys(indexes).map((idx) => /* @__PURE__ */ jsxs(Accordion, { sx: { mb: 2, backgroundColor: "background.paper" }, children: [
+        /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMore, {}), children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t(`fields.idx_${idx}`) }) }),
+        /* @__PURE__ */ jsx(AccordionDetails, { sx: { px: "0 !important", mt: -6 }, children: /* @__PURE__ */ jsx(Paragraph, { id: `fields.idx_${idx}`, children: /* @__PURE__ */ jsx(TableRoot, { children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+          /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: t("fields.table.name") }),
+            /* @__PURE__ */ jsx(TableCell, { children: t("fields.table.type") }),
+            /* @__PURE__ */ jsx(TableCell, { children: t("fields.table.attrib") })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: Object.keys(indexes[idx]).map(
+            (field) => indexes[idx][field].indexed && /* @__PURE__ */ jsxs(TableRow, { hover: true, children: [
+              /* @__PURE__ */ jsx(TableCell, { width: "50%", style: { wordBreak: "break-word" }, children: field }),
+              /* @__PURE__ */ jsx(TableCell, { children: indexes[idx][field].type }),
+              /* @__PURE__ */ jsxs(TableCell, { children: [
+                indexes[idx][field].stored && /* @__PURE__ */ jsx(
+                  SquareChip,
+                  {
+                    color: "info",
+                    size: "small",
+                    label: t("fields.att.stored")
+                  }
+                ),
+                indexes[idx][field].list && /* @__PURE__ */ jsx(
+                  SquareChip,
+                  {
+                    color: "warning",
+                    size: "small",
+                    label: t("fields.att.list")
+                  }
+                ),
+                indexes[idx][field].default && /* @__PURE__ */ jsx(
+                  SquareChip,
+                  {
+                    color: "primary",
+                    size: "small",
+                    label: t("fields.att.default")
+                  }
+                )
+              ] })
+            ] }, field)
+          ) })
+        ] }) }) }) })
+      ] }, idx)),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "wildcard", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("wildcard") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("wildcard.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("wildcard.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("wildcard.text2") }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: `${t("wildcard.note")}:` }) }),
+          ` ${t("wildcard.note.text")}`
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("regex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.ex") }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: t("regex.warning") }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.warning.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.warning.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.warning.follow") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.anchoring", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.anchoring") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.anchoring.text") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.anchoring.text2") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.anchoring.ex") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.chars", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.chars") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.chars.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.chars.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.chars.text2") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.chars.text3") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.chars.ex2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.any", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.any") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.any.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.any.ex") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.oneplus", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.oneplus") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.oneplus.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.oneplus.ex") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.zeroplus", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.zeroplus") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.zeroplus.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.zeroplus.ex") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.zeroone", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.zeroone") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.zeroone.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.zeroone.ex") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.minmax", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.minmax") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.minmax.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.minmax.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.minmax.text2") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.minmax.ex2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.grouping", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.grouping") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.grouping.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.grouping.ex") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.alternation", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.alternation") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.alternation.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.alternation.ex") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "regex.class", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("regex.class") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.class.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.class.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.class.text2") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("regex.class.text3") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("regex.class.ex2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "fuzziness", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("fuzziness") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("fuzziness.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fuzziness.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("fuzziness.text2") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("fuzziness.text3") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("fuzziness.ex2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "proximity", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("proximity") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("proximity.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("proximity.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("proximity.text2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "ranges", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("ranges") }),
+        /* @__PURE__ */ jsx(Fragment, { children: t("ranges.text") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "padded", children: t("exemples") }),
+        /* @__PURE__ */ jsxs("ul", { className: "multipleEx", children: [
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("ranges.ex1.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex1") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("ranges.ex2.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex2") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("ranges.ex3.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex3") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("ranges.ex4.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex4") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("ranges.ex5.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex5") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("ranges.ex6.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex6") })
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            t("ranges.ex7.title"),
+            /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex7") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("ranges.text2") }),
+        /* @__PURE__ */ jsx("ul", { className: "multipleEx", children: /* @__PURE__ */ jsxs("li", { children: [
+          t("ranges.ex8.title"),
+          /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex8") })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("ranges.text3") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex9") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("ranges.text4") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.ex10") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "ranges.datemath", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("ranges.datemath") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("ranges.datemath.text") }),
+        /* @__PURE__ */ jsxs("ul", { children: [
+          /* @__PURE__ */ jsx("li", { children: t("ranges.datemath.list1") }),
+          /* @__PURE__ */ jsx("li", { children: t("ranges.datemath.list2") }),
+          /* @__PURE__ */ jsx("li", { children: t("ranges.datemath.list3") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("ranges.datemath.text2") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.datemath.ex1") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("ranges.datemath.text3") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("ranges.datemath.ex2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "operator", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("operator") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("operator.text") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("operator.text2") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("operator.ex1") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("operator.text3") }),
+        /* @__PURE__ */ jsxs("ul", { children: [
+          /* @__PURE__ */ jsx("li", { children: t("operator.list1") }),
+          /* @__PURE__ */ jsx("li", { children: t("operator.list2") }),
+          /* @__PURE__ */ jsx("li", { children: t("operator.list3") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("operator.text4") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("operator.ex2") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("operator.text5") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "grouping", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("grouping") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("grouping.text") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("grouping.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("grouping.text2") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("grouping.ex2") })
+      ] }),
+      /* @__PURE__ */ jsxs(Paragraph, { id: "reserved", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("reserved") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("reserved.text") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("reserved.text2") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("reserved.ex") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("reserved.text3") }),
+        /* @__PURE__ */ jsx(Card, { variant: "outlined", className: "pre", children: t("reserved.ex2") }),
+        /* @__PURE__ */ jsx("div", { className: "padded", children: t("reserved.text4") }),
+        /* @__PURE__ */ jsxs("div", { className: "padded", children: [
+          /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: t("reserved.note") }) }),
+          `: ${t("reserved.text5")}`
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  SearchDocumentation as default
+};

package/components/routes/help/TemplateDocumentation.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const TemplateDocumentation: FC;
+export default TemplateDocumentation;

package/components/routes/help/TemplateDocumentation.js

@@ -0,0 +1,60 @@
+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, Card, CardContent } 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 PageCenter from "../../../commons/components/pages/PageCenter.js";
+import Markdown from "../../elements/display/Markdown.js";
+import { HitLayout } from "../../elements/hit/HitLayout.js";
+import DefaultOutline from "../../elements/hit/outlines/DefaultOutline.js";
+import { useScrollRestoration } from "../../hooks/useScrollRestoration.js";
+import dayjs from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/dayjs.min.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";
+const TEMPLATES_EN = "# Howler Templates\n\nHowler is, fundamentally, an application that allows analysts to triage hits and alerts. In order to make sure analysts can do this as efficiently as possible, we want to have the ability to present relevant data for a given alert to analysts in an easy, understandable way.\n\nTo this end, Howler allows analysts and detection engineers to create **templates**, which allow various analytics and their detections to present fields and data relevant to triaging alerts generated by that analytic/detection. For example, let's consider two different alerts, by two different detections:\n\n```json\n$ALERT_1\n```\n\n```json\n$ALERT_2\n```\n\nNote that while both share some similar fields, they also differ. We want each of these alert cards to present different data - for that, we can use templates. This allows us to show both hits in the same list, but with differing fields displayed:\n\n===SPLIT===\n\nAs we can see, by specifying a template for each of the detections, different data will be presented to the analyst. To do so, you can use the template creator [here]($CURRENT_URL/templates/view?type=personal).\n\n```alert\nNote that you must have ingested some hits for the given analytic/detection pair for it to show as an option in the template creation UI!\n```\n";
+const TEMPLATES_FR = "# Modèles de Howler\n\nHowler est, fondamentalement, une application qui permet aux analystes de trier les hits et les alertes. Afin de s'assurer que les analystes puissent le faire aussi efficacement que possible, nous voulons avoir la possibilité de présenter les données pertinentes pour une alerte donnée aux analystes d'une manière facile et compréhensible.\n\nÀ cette fin, Howler permet aux analystes et aux ingénieurs de détection de créer des **modèles**, qui permettent à diverses analyses et à leurs détections de présenter des champs et des données pertinents pour le triage des alertes générées par cette analyse/détection. Par exemple, considérons deux alertes différentes, générées par deux détections différentes :\n\n```json\n$ALERT_1\n```\n\n```json\n$ALERT_2\n```\n\nNotez que si les deux cartes partagent des champs similaires, elles diffèrent également. Nous voulons que chacune de ces cartes d'alerte présente des données différentes - pour cela, nous pouvons utiliser des modèles. Cela nous permet d'afficher les deux occurrences dans la même liste, mais avec des champs différents :\n\n===SPLIT===\n\nComme nous pouvons le voir, en spécifiant un modèle pour chacune des détections, des données différentes seront présentées à l'analyste.Pour ce faire, vous pouvez utiliser le créateur de modèles [ici]($CURRENT_URL/templates/view?type=personal).\n\n```alert\nNotez que vous devez avoir ingéré des hits pour la paire analyse/détection donnée pour qu'elle apparaisse en tant qu'option dans l'interface utilisateur de création de modèle !\n```\n";
+const ALERTS = [
+  {
+    howler: { id: "hit1", analytic: "Cat Checker", detection: "Listening for Meows" },
+    event: {
+      start: dayjs().subtract(4, "hour").toString(),
+      end: dayjs().subtract(3, "hour").toString(),
+      kind: "Loud meow",
+      outcome: "Food provided"
+    }
+  },
+  {
+    howler: { id: "hit2", analytic: "Cat Checker", detection: "Looking for paw prints" },
+    event: {
+      start: dayjs().subtract(6, "hour").toString(),
+      end: dayjs().subtract(5, "hour").toString(),
+      provider: "The neighbour's cat (probably)",
+      reason: "There was some fish we forgot to put away in the kitchen"
+    }
+  }
+];
+const TemplateDocumentation = () => {
+  const { i18n } = useTranslation();
+  useScrollRestoration();
+  const [md1, md2] = useMemo(() => {
+    let markdown = i18n.language === "en" ? TEMPLATES_EN : TEMPLATES_FR;
+    markdown = markdown.replace(/\$CURRENT_URL/g, window.location.origin);
+    ALERTS.forEach((alert, index) => {
+      markdown = markdown.replace(`$ALERT_${index + 1}`, JSON.stringify(alert, null, 2));
+    });
+    return markdown.split("\n===SPLIT===\n");
+  }, [i18n.language]);
+  return /* @__PURE__ */ jsxs(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: [
+    /* @__PURE__ */ jsx(Markdown, { md: md1 }),
+    /* @__PURE__ */ jsx(Stack, { spacing: 1, children: ALERTS.map((alert) => /* @__PURE__ */ jsx(Card, { variant: "outlined", children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+      DefaultOutline,
+      {
+        hit: alert,
+        fields: Object.keys(alert).flatMap((key) => Object.keys(alert[key]).map((key2) => [key, key2].join("."))),
+        layout: HitLayout.NORMAL,
+        readonly: true
+      }
+    ) }) }, alert.howler.id)) }),
+    /* @__PURE__ */ jsx(Markdown, { md: md2 })
+  ] });
+};
+export {
+  TemplateDocumentation as default
+};

package/components/routes/help/ViewDocumentation.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const ViewDocumentation: FC;
+export default ViewDocumentation;

package/components/routes/help/ViewDocumentation.js

@@ -0,0 +1,29 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Search } 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 PageCenter from "../../../commons/components/pages/PageCenter.js";
+import Markdown from "../../elements/display/Markdown.js";
+import { useScrollRestoration } from "../../hooks/useScrollRestoration.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";
+const VIEWS_EN = '# Views\n\nViews are a feature in Howler that allows users to create custom, default queries through which they can organize and triage hits. In this document, we will outline how to create and interact with views.\n\n## Using a View\n\nYou can use views by navigating to the view manager under [Manage > Views](/views). Clicking on any view will open it in the search page. Here, you can also use the `search` icon to open the view in the search page. You can also edit views that belong to you, and mark them as favourites. This will show them in the `t(route.views.saved)` dropdown in the sidebar. In the top right, you can also choose your "`t(route.views.manager.default)`", that will be selected by default when opening the alerts page.\n\n## Creating Views\n\nIn order to create a view, you can use the create view page, located [here](/views/create). This page allows you to modifer your view, specify a `t(hit.search.sort.fields)` and `t(hit.search.span)`, and save the view with a particular name. You can mark a view as global or personal, depending on who you want to be able to see and use the view.\n';
+const VIEWS_FR = "# Vues\n\nLes vues sont une fonctionnalité de Howler qui permet aux utilisateurs de créer des requêtes personnalisées par défaut à travers lesquelles ils peuvent organiser et trier les hits. Dans ce document, nous décrirons comment créer et interagir avec des vues.\n\n## Utilisation d'une vue\n\nVous pouvez utiliser les vues en accédant au gestionnaire de vues sous [Manage > Views](/views). En cliquant sur une vue, vous l'ouvrirez dans la page de recherche. Vous pouvez également utiliser l'icône `recherche` pour ouvrir la vue dans la page de recherche. Vous pouvez également modifier les vues qui vous appartiennent et les marquer comme favorites. Cela les affichera dans le menu déroulant `t(route.views.saved)` dans la barre latérale. En haut à droite, vous pouvez également choisir votre `t(route.views.manager.default)`, qui sera sélectionné par défaut lors de l'ouverture de la page d'alertes.\n\n## Créer des vues\n\nPour créer une vue, vous pouvez utiliser la page de création de vue, située [ici](/views/create). Cette page vous permet de modifier votre vue, de spécifier un `t(hit.search.sort.fields)` et un `t(hit.search.span)`, et de sauvegarder la vue avec un nom particulier. Vous pouvez marquer une vue comme globale ou personnelle, en fonction des personnes que vous souhaitez voir et utiliser.\n";
+const ViewDocumentation = () => {
+  const { i18n } = useTranslation();
+  useScrollRestoration();
+  const md = useMemo(
+    () => (i18n.language === "en" ? VIEWS_EN : VIEWS_FR).replace(/\$CURRENT_URL/g, window.location.origin),
+    [i18n.language]
+  );
+  return /* @__PURE__ */ jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: /* @__PURE__ */ jsx(
+    Markdown,
+    {
+      md,
+      components: {
+        search: /* @__PURE__ */ jsx(Search, { fontSize: "inherit" })
+      }
+    }
+  ) });
+};
+export {
+  ViewDocumentation as default
+};

package/components/routes/help/components/HelpTabs.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface TabProps {
+    value: string;
+}
+declare const HelpTabs: FC<PropsWithChildren<TabProps>>;
+export default HelpTabs;