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

package/components/routes/dossiers/PivotForm.js

@@ -0,0 +1,278 @@
+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 { Icon, iconExists } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@iconify+react@4.1.1_react@18.3.1/node_modules/@iconify/react/dist/iconify.js";
+import { Add, Delete, OpenInNew, Remove } 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, Paper, Stack, Alert, Tabs, Tab, Button, TextField, Typography, IconButton, Autocomplete, 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 { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import isNull from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isNull.js";
+import merge from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.js";
+import howlerPluginStore from "../../../plugins/store.js";
+import { useState, useCallback, useMemo, useContext, Fragment as Fragment$1 } 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 { 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";
+const LinkForm = ({ pivot, update }) => {
+  var _a;
+  const { t } = useTranslation();
+  const { config } = useContext(ApiConfigContext);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "small",
+        label: t("route.dossiers.manager.pivot.value"),
+        disabled: !pivot,
+        value: (pivot == null ? void 0 : pivot.value) ?? "",
+        fullWidth: true,
+        onChange: (ev) => update({ value: ev.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+    /* @__PURE__ */ jsx(Typography, { children: t("route.dossiers.manager.pivot.mappings") }),
+    (_a = pivot == null ? void 0 : pivot.mappings) == null ? void 0 : _a.map((_mapping, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              size: "small",
+              label: t("route.dossiers.manager.pivot.mapping.key"),
+              disabled: !pivot,
+              value: (_mapping == null ? void 0 : _mapping.key) ?? "",
+              onChange: (ev) => update({
+                mappings: pivot.mappings.map(
+                  (_m, _index) => index === _index ? { ..._m, key: ev.target.value } : _m
+                )
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              fullWidth: true,
+              disabled: !pivot,
+              options: ["custom", ...Object.keys(config.indexes.hit)],
+              renderInput: (params) => /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  ...params,
+                  size: "small",
+                  fullWidth: true,
+                  label: t("route.dossiers.manager.pivot.mapping.field"),
+                  sx: { minWidth: "150px" }
+                }
+              ),
+              getOptionLabel: (opt) => t(opt),
+              value: _mapping.field ?? "",
+              onChange: (_ev, field) => update({
+                mappings: pivot.mappings.map((_m, _index) => index === _index ? { ..._m, field } : _m)
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => update({
+                mappings: pivot.mappings.filter((_m, _index) => index !== _index)
+              }),
+              children: /* @__PURE__ */ jsx(Remove, {})
+            }
+          )
+        ] }),
+        _mapping.field === "custom" && /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            label: t("route.dossiers.manager.pivot.mapping.custom"),
+            disabled: !pivot,
+            value: (_mapping == null ? void 0 : _mapping.custom_value) ?? "",
+            onChange: (ev) => update({
+              mappings: pivot.mappings.map(
+                (_m, _index) => index === _index ? { ..._m, custom_value: ev.target.value } : _m
+              )
+            })
+          }
+        )
+      ] }, index)
+    )),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: !pivot,
+        sx: { ml: "auto", alignSelf: "end", minWidth: "0 !important" },
+        size: "small",
+        variant: "contained",
+        onClick: () => {
+          update({
+            mappings: [...pivot.mappings ?? [], { key: "key" }]
+          });
+        },
+        children: /* @__PURE__ */ jsx(Add, {})
+      }
+    )
+  ] });
+};
+const PivotForm = ({
+  dossier,
+  setDossier,
+  loading
+}) => {
+  var _a, _b, _c;
+  const theme = useTheme();
+  const { t, i18n } = useTranslation();
+  const pluginStore = usePluginStore();
+  const [tab, setTab] = useState(0);
+  const update = useCallback(
+    (data) => setDossier((_dossier) => ({
+      ..._dossier,
+      pivots: (_dossier.pivots ?? []).map((pivot2, _index) => {
+        if (tab !== _index) {
+          return pivot2;
+        }
+        if (isNull(data)) {
+          return null;
+        }
+        const merged = merge({}, pivot2, data);
+        if (data.mappings) {
+          merged.mappings = data.mappings;
+        }
+        return merged;
+      }).filter((_pivot) => !isNull(_pivot))
+    })),
+    [setDossier, tab]
+  );
+  const pivot = useMemo(() => {
+    var _a2;
+    return ((_a2 = dossier.pivots) == null ? void 0 : _a2[tab]) ?? null;
+  }, [dossier.pivots, tab]);
+  const icon = useMemo(() => (pivot == null ? void 0 : pivot.icon) ?? "material-symbols:find-in-page", [pivot == null ? void 0 : pivot.icon]);
+  return /* @__PURE__ */ jsx(Paper, { sx: { p: 1, display: "flex", flexDirection: "column", flex: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+      !(dossier == null ? void 0 : dossier.pivots) || dossier.pivots.length < 1 ? /* @__PURE__ */ jsx(
+        Alert,
+        {
+          variant: "outlined",
+          severity: "warning",
+          sx: {
+            mr: 1,
+            px: 1,
+            py: 0,
+            minHeight: "0 !important",
+            display: "flex",
+            alignItems: "center",
+            "& .MuiAlert-icon ": {
+              fontSize: "20px",
+              py: 0
+            },
+            "& .MuiAlert-message": {
+              py: 0.7
+            }
+          },
+          children: t("route.dossiers.manager.pivot.create")
+        }
+      ) : /* @__PURE__ */ jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), sx: { minHeight: "0 !important" }, children: (_a = dossier.pivots) == null ? void 0 : _a.map((lead, index) => /* @__PURE__ */ jsx(
+        Tab,
+        {
+          disabled: !dossier || loading,
+          sx: { py: 1, minHeight: "0 !important" },
+          label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+            lead.icon && /* @__PURE__ */ jsx(Icon, { icon: lead.icon }),
+            /* @__PURE__ */ jsx("span", { children: i18n.language === "en" ? lead.label.en : lead.label.fr })
+          ] }),
+          value: index
+        },
+        lead.value
+      )) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          sx: { ml: "auto", alignSelf: "end", minWidth: "0 !important" },
+          size: "small",
+          variant: "contained",
+          onClick: () => {
+            var _a2;
+            setTab(((_a2 = dossier.pivots) == null ? void 0 : _a2.length) ?? 0);
+            setDossier((_dossier) => ({
+              ..._dossier,
+              pivots: [
+                ..._dossier.pivots ?? [],
+                { icon: "material-symbols:add-ad", label: { en: "New Pivot", fr: "Nouvelle pivot" } }
+              ]
+            }));
+          },
+          children: /* @__PURE__ */ jsx(Add, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            label: t("route.dossiers.manager.pivot.icon"),
+            value: icon,
+            disabled: !pivot,
+            fullWidth: true,
+            error: !iconExists(icon),
+            sx: { "& input": { paddingLeft: "2.25rem" } },
+            onChange: (ev) => update({ icon: ev.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(Icon, { fontSize: "1.75rem", icon, style: { position: "absolute", left: "0.5rem" } }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            color: "error",
+            disabled: !pivot,
+            sx: { minWidth: "0 !important", ml: 1 },
+            onClick: () => update(null),
+            children: /* @__PURE__ */ jsx(Delete, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: `${theme.spacing(0.5)} !important` }, children: [
+        /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("route.dossiers.manager.icon.description") }),
+        /* @__PURE__ */ jsx(IconButton, { size: "small", component: "a", href: "https://icon-sets.iconify.design/", children: /* @__PURE__ */ jsx(OpenInNew, { fontSize: "small" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            label: t("route.dossiers.manager.pivot.label.en"),
+            disabled: !pivot,
+            value: ((_b = pivot == null ? void 0 : pivot.label) == null ? void 0 : _b.en) ?? "",
+            fullWidth: true,
+            onChange: (ev) => update({ label: { en: ev.target.value } })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            label: t("route.dossiers.manager.pivot.label.fr"),
+            disabled: !pivot,
+            value: ((_c = pivot == null ? void 0 : pivot.label) == null ? void 0 : _c.fr) ?? "",
+            fullWidth: true,
+            onChange: (ev) => update({ label: { fr: ev.target.value } })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          disabled: !pivot,
+          options: ["link", ...howlerPluginStore.pivotFormats],
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, size: "small", label: t("route.dossiers.manager.pivot.format") }),
+          value: (pivot == null ? void 0 : pivot.format) ?? "",
+          onChange: (_ev, format) => update({ format, value: "", mappings: [] })
+        }
+      ),
+      !!(pivot == null ? void 0 : pivot.format) && (pivot.format === "link" ? /* @__PURE__ */ jsx(LinkForm, { pivot, update }) : pluginStore.executeFunction(`pivot.${pivot.format}.form`, { pivot, update }))
+    ] })
+  ] }) });
+};
+export {
+  PivotForm as default
+};

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

@@ -0,0 +1,8 @@
+import { FC, default as React } from 'react';
+export interface PluginDocumentation {
+    id: string;
+    i18nKey: string;
+    component: () => React.ReactNode;
+}
+declare const ActionDocumentation: FC;
+export default ActionDocumentation;

package/components/routes/help/ActionDocumentation.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, useMediaQuery, Stack, Tab, Typography, Box } 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 { useScrollRestoration } from "../../hooks/useScrollRestoration.js";
+import howlerPluginStore from "../../../plugins/store.js";
+import { useState, useCallback, 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 { 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 { useSearchParams } 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 ActionIntroductionDocumentation from "./ActionIntroductionDocumentation.js";
+import HelpTabs from "./components/HelpTabs.js";
+const ActionDocumentation = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const pluginStore = usePluginStore();
+  useScrollRestoration();
+  const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [tab, setTab] = useState(searchParams.get("tab") ?? "introduction");
+  const onChange = useCallback(
+    (_tab) => {
+      setTab(_tab);
+      searchParams.set("tab", _tab);
+      setSearchParams(new URLSearchParams(searchParams));
+    },
+    [searchParams, setSearchParams]
+  );
+  const pluginDocumentation = useMemo(
+    () => howlerPluginStore.operations.map(
+      (operation) => pluginStore.executeFunction(`operation.${operation}.documentation`)
+    ),
+    [pluginStore]
+  );
+  return /* @__PURE__ */ jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: /* @__PURE__ */ jsxs(Stack, { sx: { flexDirection: useHorizontal ? "column" : "row", "& h1": { mt: 0 } }, children: [
+    /* @__PURE__ */ jsxs(HelpTabs, { value: tab, children: [
+      /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t("help.actions.introduction") }),
+          value: "introduction",
+          onClick: () => onChange("introduction")
+        }
+      ),
+      pluginDocumentation.map((entry) => /* @__PURE__ */ jsx(
+        Tab,
+        {
+          label: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t(entry.i18nKey) }),
+          value: entry.id,
+          onClick: () => onChange(entry.id)
+        },
+        entry.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: {
+      introduction: () => /* @__PURE__ */ jsx(ActionIntroductionDocumentation, {}),
+      ...Object.fromEntries(pluginDocumentation.map((entry) => [entry.id, entry.component]))
+    }[tab]() })
+  ] }) });
+};
+export {
+  ActionDocumentation as default
+};

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

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

package/components/routes/help/ActionIntroductionDocumentation.js

@@ -0,0 +1,103 @@
+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 { Close, 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 { Select, MenuItem, ListItemText, Stack, IconButton } 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 "../../../commons/components/app/AppContexts.js";
+import { useState, useEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "../../../i18n.js";
+import "../../../commons/components/app/hooks/useAppSitemap.js";
+import { useAppUser } from "../../../commons/components/app/hooks/useAppUser.js";
+import Phrase from "../../elements/addons/search/phrase/Phrase.js";
+import Markdown from "../../elements/display/Markdown.js";
+import { difference } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.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 { VALID_ACTION_TRIGGERS } from "../../../utils/constants.js";
+import QueryResultText from "../../elements/display/QueryResultText.js";
+import ActionReportDisplay from "../action/shared/ActionReportDisplay.js";
+import OperationStep from "../action/shared/OperationStep.js";
+const ACTION_INTRO_EN = "# Using Actions in Howler\n\nActions are a feature in Howler that allow users to perform particular tasks on a large number of hits, through automating the execution of a task on each hit. There are currently `action_count` operations supported in howler:\n\n`action_list`\n\nAll of these operations can be combined together into unique actions - that is, operations are essentially the building blocks of actions in Howler. Each operation can only appear once per action, and all operations are configured through one unified UI. In this document, we will walk through the steps necessary to run and save an action.\n\n## Configuring an Action\n\nIn order to begin configuring your action, decide if this will be a one-off action or a saved action you want to run several times. If you want to run it once, use the `t(route.actions.change)` entry in the sidebar, while a saved action is best configured under the `t(route.actions.manager)` by pressing \"`t(route.actions.create)`\".\n\nThe first step of any action will be to design a query on which you want this action to run. The search box at the top of the accepts any lucene query - the same format as searching for hits.\n\n`tui_phrase`\n\nOnce you are satisfied with the hits that will be included in this query, you can begin adding operations. You can do so by selecting the operation you want to add from the dropdown:\n\n`operation_select`\n\nOnce you've selected the operation you want to add, it will prompt you for a list of parameters you will need to fill out. Below is an example for adding a label.\n\n`operation_configuration`\n\nOnce the operation validates successfully, you can repeat this process with the next operation. Once you've added all the operations you're interested in, you can execute or save the action using the button below the search bar. This will generate a report of the steps taken.\n\n`report`\n\nOccaisionally, actions will result in an error, either on validation or on execution. In these cases, an error alert will be shown, helping you solve the issue.\n\n## Automating an Action\n\nIn order to automate an action, open any saved action. The options available to you for automation (`automation_options`) will show up as checkboxes. Checking the box will ensure this action will run then - no further work required.\n";
+const ACTION_INTRO_FR = "# Utilisation des actions dans Howler\n\nLes actions sont une fonctionnalité de Howler qui permet aux utilisateurs d'effectuer des tâches particulières sur un grand nombre de hits, en automatisant l'exécution d'une tâche sur chaque hit. Il y a actuellement `action_count` opérations supportées dans Howler :\n\n`action_list`\n\nToutes ces opérations peuvent être combinées ensemble dans des actions uniques - c'est-à-dire que les opérations sont essentiellement les blocs de construction des actions dans Howler. Chaque opération ne peut apparaître qu'une seule fois par action, et toutes les opérations sont configurées à travers une interface unifiée. Dans ce document, nous allons parcourir les étapes nécessaires à l'exécution et à la sauvegarde d'une action.\n\n## Configuration d'une action\n\nPour commencer à configurer votre action, décidez s'il s'agit d'une action unique ou d'une action sauvegardée que vous souhaitez exécuter plusieurs fois. Si vous voulez l'exécuter une fois, utilisez l'entrée `t(route.actions.change)` dans la barre latérale, alors qu'une action sauvegardée est mieux configurée sous `t(route.actions.manager)` en appuyant sur \"`t(route.actions.create)`\".\n\nLa première étape de toute action sera de concevoir une requête sur laquelle vous voulez que cette action s'exécute. La boîte de recherche en haut de l'écran accepte n'importe quelle requête lucene - le même format que pour la recherche d'occurrences.\n\n`tui_phrase`\n\nUne fois que vous êtes satisfait des occurrences qui seront incluses dans cette requête, vous pouvez commencer à ajouter des opérations. Vous pouvez le faire en sélectionnant l'opération que vous voulez ajouter dans la liste déroulante:\n\n`operation_select`\n\nUne fois que vous avez sélectionné l'opération que vous souhaitez ajouter, une liste de paramètres à remplir vous est proposée. Voici un exemple d'ajout d'une étiquette.\n\n`operation_configuration`\n\nUne fois que l'opération est validée avec succès, vous pouvez répéter ce processus avec l'opération suivante. Une fois que vous avez ajouté toutes les opérations qui vous intéressent, vous pouvez exécuter ou sauvegarder l'action en utilisant le bouton situé sous la barre de recherche. Vous obtiendrez ainsi un rapport sur les étapes franchies.\n\n`report`\n\nIl peut arriver que des actions génèrent une erreur, soit lors de la validation, soit lors de l'exécution. Dans ce cas, une alerte d'erreur sera affichée, vous aidant à résoudre le problème.\n\n## Automatiser une action\n\nPour automatiser une action, ouvrez une action sauvegardée. Les options disponibles pour l'automatisation (`automation_options`) apparaîtront sous forme de cases à cocher. En cochant la case, vous vous assurez que l'action s'exécutera ensuite - aucune autre opération n'est nécessaire.\n";
+const OPERATION_VALUES = {
+  category: "generic",
+  label: "Some Label Value"
+};
+const ActionIntroductionDocumentation = () => {
+  var _a;
+  const { i18n, t } = useTranslation();
+  const { user } = useAppUser();
+  const [operations, setOperations] = useState([]);
+  useEffect(() => {
+    api.action.operations.get().then((_operations) => _operations.filter((a) => difference(a.roles, user.roles).length < 1)).then(setOperations).catch(console.debug);
+  }, [user.roles]);
+  const md = useMemo(() => i18n.language === "en" ? ACTION_INTRO_EN : ACTION_INTRO_FR, [i18n.language]);
+  return /* @__PURE__ */ jsx(
+    Markdown,
+    {
+      md,
+      components: {
+        action_count: /* @__PURE__ */ jsx(Fragment, { children: operations.length }),
+        action_list: /* @__PURE__ */ jsx("ul", { children: operations.map((operation) => /* @__PURE__ */ jsxs("li", { children: [
+          t(`operations.${operation.id}`),
+          " - ",
+          operation.description.short
+        ] }, operation.id)) }),
+        tui_phrase: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            Phrase,
+            {
+              onChange: () => {
+              },
+              fullWidth: true,
+              autoComplete: "off",
+              value: "howler.id:*",
+              startAdornment: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(Search, {}) }),
+              endAdornment: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(Close, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(QueryResultText, { count: 134, query: "howler.id:*" })
+        ] }),
+        operation_select: /* @__PURE__ */ jsx(Select, { value: "add_label", size: "small", children: operations.map((_a2) => {
+          var _a3;
+          return /* @__PURE__ */ jsx(MenuItem, { value: _a2.id, children: /* @__PURE__ */ jsx(ListItemText, { primary: _a2.i18nKey ? t(_a2.i18nKey) : _a2.title, secondary: (_a3 = _a2.description) == null ? void 0 : _a3.short }) }, _a2.id);
+        }) }),
+        operation_configuration: /* @__PURE__ */ jsx(Fragment, { children: (_a = operations.find((operation) => operation.id === "add_label")) == null ? void 0 : _a.steps.map((step) => /* @__PURE__ */ jsx(
+          OperationStep,
+          {
+            step,
+            query: "howler.id:*",
+            values: JSON.stringify(OPERATION_VALUES),
+            setValues: () => {
+            }
+          },
+          Object.keys(step.args).join("")
+        )) }),
+        report: /* @__PURE__ */ jsx(
+          ActionReportDisplay,
+          {
+            report: {
+              add_label: [
+                {
+                  query: "howler.id:*",
+                  outcome: "skipped",
+                  title: "Skipped Hit with Label",
+                  message: `These hits already have the label ${OPERATION_VALUES.label}.`
+                },
+                {
+                  query: "howler.id:*",
+                  outcome: "success",
+                  title: "Executed Successfully",
+                  message: `Label '${OPERATION_VALUES.label}' added to category '${OPERATION_VALUES.category}' for all matching hits.`
+                }
+              ]
+            },
+            operations
+          }
+        ),
+        automation_options: /* @__PURE__ */ jsx(Fragment, { children: VALID_ACTION_TRIGGERS.map((trigger) => t(`route.actions.trigger.${trigger}`)).join(", ") })
+      }
+    }
+  );
+};
+export {
+  ActionIntroductionDocumentation as default
+};

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

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

package/components/routes/help/ApiDocumentation.js

@@ -0,0 +1,139 @@
+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 { Help } 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, useMediaQuery, Stack, Typography, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, 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 "../../../commons/components/app/AppContexts.js";
+import { useState, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "../../../i18n.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 Markdown from "../../elements/display/Markdown.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import { useScrollRestoration } from "../../hooks/useScrollRestoration.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";
+const APIKEY_LABELS = {
+  R: "apikey.read",
+  W: "apikey.write",
+  E: "apikey.extended",
+  I: "apikey.impersonate"
+};
+const ApiDocumentation = () => {
+  const { t } = useTranslation();
+  const { user } = useAppUser();
+  const { dispatchApi } = useMyApi();
+  const theme = useTheme();
+  useScrollRestoration();
+  const isLg = useMediaQuery(theme.breakpoints.down("lg"));
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    dispatchApi(api.help.get()).then(setData);
+  }, [dispatchApi]);
+  if (!data) {
+    return /* @__PURE__ */ jsx(PageCenter, { margin: 4, maxWidth: "1750px", width: "100%", textAlign: "left", children: t("loading") });
+  }
+  return /* @__PURE__ */ jsx(PageCenter, { margin: 4, maxWidth: "1750px", width: "100%", textAlign: "left", children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", children: t("page.documentation.categories") }),
+    /* @__PURE__ */ jsx(TableContainer, { component: Paper, children: /* @__PURE__ */ jsxs(Table, { sx: { "& td": { verticalAlign: "top" }, "& tr:last-of-type > td": { border: 0 } }, children: [
+      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: t("page.documentation.categories.category") }),
+        /* @__PURE__ */ jsx(TableCell, { children: t("page.documentation.categories.description") })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: Object.keys(data.blueprints).map((key) => /* @__PURE__ */ jsxs(TableRow, { sx: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("code", { children: key }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: data.blueprints[key] })
+      ] }, key)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { pt: 4 }, children: t("page.documentation.endpoints") }),
+    /* @__PURE__ */ jsx(TableContainer, { component: Paper, children: /* @__PURE__ */ jsxs(
+      Table,
+      {
+        sx: {
+          "& td": { verticalAlign: "top" },
+          "& tr:last-of-type > td": { border: 0 },
+          "& pre": {
+            backgroundColor: "background.paper",
+            padding: 0.75,
+            borderRadius: "5px"
+          },
+          "& :not(pre) > code": {
+            backgroundColor: "background.paper",
+            padding: 0.75,
+            borderRadius: "5px"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(Tooltip, { placement: "top-start", title: /* @__PURE__ */ jsx(Trans, { i18nKey: "page.documentation.endpoint.explanation" }), children: /* @__PURE__ */ jsxs(TableCell, { children: [
+              t("page.documentation.endpoint"),
+              /* @__PURE__ */ jsx(Help, { sx: { height: "16px", width: "16px", ml: 1 } })
+            ] }) }),
+            /* @__PURE__ */ jsx(Tooltip, { placement: "top-start", title: /* @__PURE__ */ jsx(Trans, { i18nKey: "page.documentation.required_type.explanation" }), children: /* @__PURE__ */ jsxs(TableCell, { children: [
+              t("page.documentation.required_type"),
+              /* @__PURE__ */ jsx(Help, { sx: { height: "16px", width: "16px", ml: 1 } })
+            ] }) }),
+            /* @__PURE__ */ jsx(Tooltip, { placement: "top-start", title: /* @__PURE__ */ jsx(Trans, { i18nKey: "page.documentation.required_priv.explanation" }), children: /* @__PURE__ */ jsxs(TableCell, { children: [
+              t("page.documentation.required_priv"),
+              /* @__PURE__ */ jsx(Help, { sx: { height: "16px", width: "16px", ml: 1 } })
+            ] }) }),
+            !isLg && /* @__PURE__ */ jsx(Tooltip, { placement: "top-start", title: /* @__PURE__ */ jsx(Trans, { i18nKey: "page.documentation.description.explanation" }), children: /* @__PURE__ */ jsxs(TableCell, { children: [
+              t("page.documentation.description"),
+              /* @__PURE__ */ jsx(Help, { sx: { height: "16px", width: "16px", ml: 1 } })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: data.apis.map((endpoint) => {
+            const documentationCell = /* @__PURE__ */ jsx(
+              Markdown,
+              {
+                md: endpoint.description.replace(/(:\n)(None)/g, "$1\n`$2`").replace(/(\S+)\s+=>\s+(.+)/g, "\n`$1`: $2\n").replace(
+                  /(Data Block:\n)([\s\S]+)(Result Example:)/,
+                  (__, p1, p2, p3) => `${p1}\`\`\`
+${p2.trim()}
+\`\`\`
+${p3}`
+                ).replace(
+                  /(Result Example:\n)([\s\S]+)$/,
+                  (__, p1, p2) => `${p1}\`\`\`
+${p2.trim()}
+\`\`\``
+                )
+              }
+            );
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(TableRow, { style: { marginBottom: "1rem" }, sx: [isLg && { "& > td": { borderBottom: 0 } }], children: [
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [
+                  /* @__PURE__ */ jsx(Typography, { children: endpoint.name }),
+                  /* @__PURE__ */ jsx("code", { children: endpoint.path }),
+                  /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+                    endpoint.complete ? /* @__PURE__ */ jsx(Chip, { size: "small", label: "Stable", color: "success" }) : /* @__PURE__ */ jsx(Chip, { size: "small", label: "Unstable", color: "error" }),
+                    endpoint.protected ? /* @__PURE__ */ jsx(Chip, { size: "small", label: "Protected", color: "warning" }) : /* @__PURE__ */ jsx(Chip, { size: "small", label: "Unprotected" })
+                  ] }),
+                  /* @__PURE__ */ jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map((m) => /* @__PURE__ */ jsx(Chip, { size: "small", label: m }, m)) }),
+                  endpoint.ui_only && /* @__PURE__ */ jsx(Chip, { size: "small", label: "UI Only" })
+                ] }) }),
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map((type) => {
+                  var _a;
+                  return /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      size: "small",
+                      label: type,
+                      color: ((_a = user.roles) == null ? void 0 : _a.includes(type)) ? "success" : "default"
+                    },
+                    type
+                  );
+                }) }) }),
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => /* @__PURE__ */ jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p)) }) }),
+                !isLg && /* @__PURE__ */ jsx(TableCell, { children: documentationCell })
+              ] }),
+              isLg && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, sx: { "& pre": { whiteSpace: "pre-wrap" } }, children: documentationCell }) })
+            ] }, endpoint.id);
+          }) })
+        ]
+      }
+    ) })
+  ] }) });
+};
+export {
+  ApiDocumentation as default
+};

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

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