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

package/components/routes/overviews/markdownExtendedTokenProvider.js

@@ -0,0 +1,262 @@
+const conf = {
+  comments: {
+    blockComment: ["<!--", "-->"]
+  },
+  colorizedBracketPairs: [],
+  brackets: [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"]
+  ],
+  autoClosingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: "(", close: ")" },
+    { open: "<", close: ">", notIn: ["string"] }
+  ],
+  surroundingPairs: [
+    { open: "(", close: ")" },
+    { open: "[", close: "]" },
+    { open: "`", close: "`" }
+  ],
+  folding: {
+    markers: {
+      start: new RegExp("^\\s*<!--\\s*#?region\\b.*-->"),
+      end: new RegExp("^\\s*<!--\\s*#?endregion\\b.*-->")
+    }
+  }
+};
+const language = {
+  defaultToken: "",
+  tokenPostfix: ".md",
+  // escape codes
+  control: /[\\`*_\[\]{}()#+\-\.!]/,
+  noncontrol: /[^\\`*_\[\]{}()#+\-\.!]/,
+  escapes: /\\(?:@control)/,
+  // escape codes for javascript/CSS strings
+  jsescapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/,
+  // non matched elements
+  empty: ["area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "isindex", "link", "meta", "param"],
+  // CCCS MODIFICATION START
+  handlebars_operators: [
+    "#if",
+    "/if",
+    "#unless",
+    "/unless",
+    "#each",
+    "/each",
+    "#with",
+    "/with",
+    "lookup",
+    "log",
+    "equals",
+    "and",
+    "or",
+    "not",
+    "join",
+    "fetch",
+    "upper",
+    "lower"
+    // TODO: Handle plugin-based operators as well
+  ],
+  // CCCS MODIFICATION END
+  tokenizer: {
+    root: [
+      // markdown tables
+      [/^\s*\|/, "@rematch", "@table_header"],
+      // headers (with #)
+      [/^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/, ["white", "keyword", "keyword", "keyword"]],
+      // headers (with =)
+      [/^\s*(=+|\-+)\s*$/, "keyword"],
+      // headers (with ***)
+      [/^\s*((\*[ ]?)+)\s*$/, "meta.separator"],
+      // quote
+      [/^\s*>+/, "comment"],
+      // list (starting with * or number)
+      [/^\s*([\*\-+:]|\d+\.)\s/, "keyword"],
+      // code block (4 spaces indent)
+      [/^(\t|[ ]{4})[^ ].*$/, "string"],
+      // code block (3 tilde)
+      [/^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/, { token: "string", next: "@codeblock" }],
+      // github style code blocks (with backticks and language)
+      [/^\s*```\s*((?:\w|[\/\-#])+).*$/, { token: "string", next: "@codeblockgh", nextEmbedded: "$1" }],
+      // github style code blocks (with backticks but no language)
+      [/^\s*```\s*$/, { token: "string", next: "@codeblock" }],
+      // CCCS MODIFICATION
+      [/{{/, { token: "handlebars", next: "@handlebars" }],
+      // markup within lines
+      { include: "@linecontent" }
+    ],
+    // CCCS MODIFICATION START
+    handlebars: [
+      [/"[^"]+"/, "string"],
+      [/[()]/, "handlebars"],
+      [/[\w\d\.]+/, "variable"],
+      [
+        /[#/\w]+/,
+        {
+          cases: {
+            "@handlebars_operators": { token: "operator" },
+            "@default": { token: "variable" }
+          }
+        }
+      ],
+      [/}}/, { token: "handlebars", next: "@pop" }]
+    ],
+    // CCCS MODIFICATION END
+    table_header: [
+      { include: "@table_common" },
+      [/[^\|]+/, "keyword.table.header"]
+      // table header
+    ],
+    table_body: [{ include: "@table_common" }, { include: "@linecontent" }],
+    table_common: [
+      [/\s*[\-:]+\s*/, { token: "keyword", switchTo: "table_body" }],
+      // header-divider
+      [/^\s*\|/, "keyword.table.left"],
+      // opening |
+      [/^\s*[^\|]/, "@rematch", "@pop"],
+      // exiting
+      [/^\s*$/, "@rematch", "@pop"],
+      // exiting
+      [
+        /\|/,
+        {
+          cases: {
+            "@eos": "keyword.table.right",
+            // closing |
+            "@default": "keyword.table.middle"
+            // inner |
+          }
+        }
+      ]
+    ],
+    codeblock: [
+      [/^\s*~~~\s*$/, { token: "string", next: "@pop" }],
+      [/^\s*```\s*$/, { token: "string", next: "@pop" }],
+      [/.*$/, "variable.source"]
+    ],
+    // github style code blocks
+    codeblockgh: [
+      [/```\s*$/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
+      [/[^`]+/, "variable.source"]
+    ],
+    linecontent: [
+      // escapes
+      [/&\w+;/, "string.escape"],
+      [/@escapes/, "escape"],
+      // various markup
+      [/\b__([^\\_]|@escapes|_(?!_))+__\b/, "strong"],
+      [/\*\*([^\\*]|@escapes|\*(?!\*))+\*\*/, "strong"],
+      [/\b_[^_]+_\b/, "emphasis"],
+      [/\*([^\\*]|@escapes)+\*/, "emphasis"],
+      [/`/, { token: "variable", next: "@codecontent" }],
+      // links
+      [/\{+[^}]+\}+/, "string.target"],
+      [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/, ["string.link", "", "string.link"]],
+      [/(!?\[)((?:[^\]\\]|@escapes)*)(\])/, "string.link"],
+      // or html
+      { include: "html" }
+    ],
+    codecontent: [
+      // CCCS MODIFICATION
+      [/{{/, { token: "handlebars", next: "@handlebars" }],
+      [/([^\\`]|@escapes)+/, "variable"],
+      [/`/, { token: "variable", next: "@pop" }]
+    ],
+    // Note: it is tempting to rather switch to the real HTML mode instead of building our own here
+    // but currently there is a limitation in Monarch that prevents us from doing it: The opening
+    // '<' would start the HTML mode, however there is no way to jump 1 character back to let the
+    // HTML mode also tokenize the opening angle bracket. Thus, even though we could jump to HTML,
+    // we cannot correctly tokenize it in that mode yet.
+    html: [
+      // html tags
+      [/<(\w+)\/>/, "tag"],
+      [
+        /<(\w+)(\-|\w)*/,
+        {
+          cases: {
+            "@empty": { token: "tag", next: "@tag.$1" },
+            "@default": { token: "tag", next: "@tag.$1" }
+          }
+        }
+      ],
+      [/<\/(\w+)(\-|\w)*\s*>/, { token: "tag" }],
+      [/<!--/, "comment", "@comment"]
+    ],
+    comment: [
+      [/[^<\-]+/, "comment.content"],
+      [/-->/, "comment", "@pop"],
+      [/<!--/, "comment.content.invalid"],
+      [/[<\-]/, "comment.content"]
+    ],
+    // Almost full HTML tag matching, complete with embedded scripts & styles
+    tag: [
+      [/[ \t\r\n]+/, "white"],
+      [
+        /(type)(\s*=\s*)(")([^"]+)(")/,
+        [
+          "attribute.name.html",
+          "delimiter.html",
+          "string.html",
+          { token: "string.html", switchTo: "@tag.$S2.$4" },
+          "string.html"
+        ]
+      ],
+      [
+        /(type)(\s*=\s*)(')([^']+)(')/,
+        [
+          "attribute.name.html",
+          "delimiter.html",
+          "string.html",
+          { token: "string.html", switchTo: "@tag.$S2.$4" },
+          "string.html"
+        ]
+      ],
+      [/(\w+)(\s*=\s*)("[^"]*"|'[^']*')/, ["attribute.name.html", "delimiter.html", "string.html"]],
+      [/\w+/, "attribute.name.html"],
+      [/\/>/, "tag", "@pop"],
+      [
+        />/,
+        {
+          cases: {
+            "$S2==style": {
+              token: "tag",
+              switchTo: "embeddedStyle",
+              nextEmbedded: "text/css"
+            },
+            "$S2==script": {
+              cases: {
+                $S3: {
+                  token: "tag",
+                  switchTo: "embeddedScript",
+                  nextEmbedded: "$S3"
+                },
+                "@default": {
+                  token: "tag",
+                  switchTo: "embeddedScript",
+                  nextEmbedded: "text/javascript"
+                }
+              }
+            },
+            "@default": { token: "tag", next: "@pop" }
+          }
+        }
+      ]
+    ],
+    embeddedStyle: [
+      [/[^<]+/, ""],
+      [/<\/style\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+      [/</, ""]
+    ],
+    embeddedScript: [
+      [/[^<]+/, ""],
+      [/<\/script\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+      [/</, ""]
+    ]
+  }
+};
+export {
+  conf,
+  language
+};

package/components/routes/overviews/startingTemplate.d.ts

@@ -0,0 +1 @@
+export declare const useStartingTemplate: () => string;

package/components/routes/overviews/startingTemplate.js

@@ -0,0 +1,36 @@
+import { useHelpers } from "../../elements/display/handlebars/helpers.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 TEMPLATE_EN = '# Creating an Overview\n\nOverviews can be used to modify the way data is presented on alerts that match the overview\'s settings. Overviews are, by design, easy to create and quite flexible.\n\n## Getting Started\n\nThe basic building blocks of overviews are:\n\n1. Markdown\n2. Handlebars\n\nWe will quickly explain these.\n\n### Markdown\n\nQuoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):\n\n> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world\'s most popular markup languages.\n>\n> Using Markdown is different than using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn\'t like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.\n>\n> For example, to denote a heading, you add a number sign before it (e.g., `# Heading One`). Or to make a phrase bold, you add two asterisks before and after it (e.g., `**this text is bold**`). It may take a while to get used to seeing Markdown syntax in your text, especially if you\'re accustomed to WYSIWYG applications.\n\n---\n\n### Handlebars\n\nQuoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):\n\n> Handlebars is a simple templating language.\n>\n> It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.\n>\n>```html\n> <p>{{curly "firstname"}} {{curly "lastname"}}</p>\n>```\n>\n> A handlebars expression is a double curly bracket, some contents, followed by a set of closing double curly brackets. When the template is executed, these expressions are replaced with values from an input object.\n\n---\n\nFor our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:\n\n```markdown\nThis analytic is **{{curly "howler.analytic"}}**\n```\n\nbecomes:\n\n> This analytic is **{{howler.analytic}}**.\n\nFor more information on handlebars, check out:\n\n- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)\n\n## Combining Markdown and Handlebars\n\nYou can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:\n\n```markdown\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{curly "source.ip"}} |{{curly "destination.ip"}} |\n```\n\nrenders as:\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{source.ip}} |{{destination.ip}} |\n\n## Advanced Handlebars\n\nHowler integrates a number of helper functions for you to work with.\n\n### Control Expressions\n\nFor use as subexpressions, we expose a number of conditional checks:\n\n**Equality:**\n\nGiven `howler.status` is {{howler.status}}:\n\n```markdown\n{{curly \'#if (equals howler.status "open")\'}}\nHit is open!\n{{curly "/if"}}\n{{curly \'#if (equals howler.status "resolved")\'}}\nHit is resolved!\n{{curly "/if"}}\n```\n\n{{#if (equals howler.status "open")}}\nHit is open!\n{{/if}}\n{{#if (equals howler.status "resolved")}}\nHit is resolved!\n{{/if}}\n\n**AND/OR/NOT:**\n\nGiven `howler.status` is {{howler.status}}, and `howler.escalation` is {{howler.escalation}}:\n\n```markdown\n{{curly \'#if (and (equals howler.status "open") (equals howler.escalation "alert"))\'}}\nThis is correct!\n{{curly "/if"}}\n{{curly \'#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))\'}}\nThis is wrong!\n{{curly "/if"}}\n```\n\n{{#if (and (equals howler.status "open") (equals howler.escalation "alert"))}}\nThis is correct!\n{{/if}}\n{{#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))}}\nThis is wrong!\n{{/if}}\n\n```markdown\n{{curly \'#if (or howler.is_bundle (not howler.is_bundle))\'}}\nAlways shows!\n{{curly "/if"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nAlways shows!\n{{/if}}\n\n---\n\n### String Operations\n\n**String Concatenation:**\n\n```markdown\n{{curly \'join "string one " "string two"\'}}\n```\n\n{{join "string one " "string two"}}\n\n**Uppercase/Lowercase:**\n\n```markdown\n{{curly \'upper "make this uppercase"\'}}\n{{curly \'lower "MAKE THIS LOWERCASE"\'}}\n```\n\n{{upper "make this uppercase"}}\n\n{{lower "MAKE THIS LOWERCASE"}}\n\n---\n\n### Fetching Data\n\nYou can also make basic fetch requests for, and parse, JSON data from external sources:\n\n```markdown\n{{curly \'fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"\'}}\n```\n\n{{fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"}}\n\n## Full Helper List\n';
+const TEMPLATE_FR = '# Créer un aperçu\n\nLes aperçus peuvent être utilisés pour modifier la façon dont les données sont présentées sur les alertes qui correspondent aux paramètres de l\'aperçu. Les aperçus sont, par conception, faciles à créer et assez flexibles.\n\n## Premiers pas\n\nLes éléments de base des aperçus sont :\n\n1. Markdown\n2. Handlebars\n\nNous allons rapidement expliquer ces éléments.\n\n### Markdown\n\nCitation de l\'excellent [markdownguide.org](https://www.markdownguide.org/getting-started/) :\n\n> Markdown est un langage de balisage léger que vous pouvez utiliser pour ajouter des éléments de formatage aux documents texte en texte brut. Créé par [John Gruber](https://daringfireball.net/projects/markdown/) en 2004, Markdown est maintenant l\'un des langages de balisage les plus populaires au monde.\n>\n> L\'utilisation de Markdown est différente de l\'utilisation d\'un éditeur [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG). Dans une application comme Microsoft Word, vous cliquez sur des boutons pour formater les mots et les phrases, et les changements sont visibles immédiatement. Markdown n\'est pas comme cela. Lorsque vous créez un fichier formaté en Markdown, vous ajoutez une syntaxe Markdown au texte pour indiquer quels mots et phrases doivent apparaître différemment.\n>\n> Par exemple, pour désigner un titre, vous ajoutez un signe dièse avant celui-ci (par ex., `# Titre Un`). Ou pour mettre une phrase en gras, vous ajoutez deux astérisques avant et après (par ex., `**ce texte est en gras**`). Il peut falloir un certain temps pour s\'habituer à voir la syntaxe Markdown dans votre texte, surtout si vous êtes habitué aux applications WYSIWYG.\n\n---\n\n### Handlebars\n\nCitation de [handlebarsjs.com](https://handlebarsjs.com/guide/) :\n\n> Handlebars est un langage de template simple.\n>\n> Il utilise un template et un objet d\'entrée pour générer du HTML ou d\'autres formats de texte. Les templates Handlebars ressemblent à du texte normal avec des expressions Handlebars intégrées.\n>\n>```html\n> <p>{{curly "firstname"}} {{curly "lastname"}}</p>\n>```\n>\n> Une expression handlebars est une double accolade, du contenu, suivi d\'un ensemble d\'accolades fermantes doubles. Lorsque le template est exécuté, ces expressions sont remplacées par des valeurs d\'un objet d\'entrée.\n\n---\n\nDans nos cas, nous utilisons handlebars pour remplacer des parties spécifiques du markdown par les valeurs incluses dans un résultat howler donné. Par exemple :\n\n```markdown\nCette analytique est **{{curly "howler.analytic"}}**\n```\n\ndevient :\n\n> Cette analytique est **{{howler.analytic}}**.\n\nPour plus d\'informations sur handlebars, consultez :\n\n- [Qu\'est-ce que Handlebars ?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Expressions Handlebars](https://handlebarsjs.com/guide/expressions.html)\n\n## Combiner Markdown et Handlebars\n\nVous pouvez utiliser handlebars pour le remplacement de template dans tout votre markdown. Voici un exemple de tableau utilisant handlebars et markdown :\n\n```markdown\n\n| IP Source | IP Destination |\n| --- | --- |\n| {{curly "source.ip"}} |{{curly "destination.ip"}} |\n```\n\ns\'affiche comme :\n\n| IP Source | IP Destination |\n| --- | --- |\n| {{source.ip}} |{{destination.ip}} |\n\n## Handlebars avancés\n\nHowler intègre un certain nombre de fonctions d\'aide avec lesquelles vous pouvez travailler.\n\n### Expressions de contrôle\n\nPour utilisation comme sous-expressions, nous exposons un certain nombre de vérifications conditionnelles :\n\n**Égalité :**\n\nÉtant donné que `howler.status` est {{howler.status}} :\n\n```markdown\n{{curly \'#if (equals howler.status "open")\'}}\nLe résultat est ouvert !\n{{curly "/if"}}\n{{curly \'#if (equals howler.status "resolved")\'}}\nLe résultat est résolu !\n{{curly "/if"}}\n```\n\n{{#if (equals howler.status "open")}}\nLe résultat est ouvert !\n{{/if}}\n{{#if (equals howler.status "resolved")}}\nLe résultat est résolu !\n{{/if}}\n\n**ET/OU/NON :**\n\nÉtant donné que `howler.status` est {{howler.status}}, et `howler.escalation` est {{howler.escalation}} :\n\n```markdown\n{{curly \'#if (and (equals howler.status "open") (equals howler.escalation "alert"))\'}}\nC\'est correct !\n{{curly "/if"}}\n{{curly \'#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))\'}}\nC\'est incorrect !\n{{curly "/if"}}\n```\n\n{{#if (and (equals howler.status "open") (equals howler.escalation "alert"))}}\nC\'est correct !\n{{/if}}\n{{#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))}}\nC\'est incorrect !\n{{/if}}\n\n```markdown\n{{curly \'#if (or howler.is_bundle (not howler.is_bundle))\'}}\nS\'affiche toujours !\n{{curly "/if"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nS\'affiche toujours !\n{{/if}}\n\n---\n\n### Opérations sur les chaînes\n\n**Concaténation de chaînes :**\n\n```markdown\n{{curly \'join "chaîne une " "chaîne deux"\'}}\n```\n\n{{join "chaîne une " "chaîne deux"}}\n\n**Majuscules/Minuscules :**\n\n```markdown\n{{curly \'upper "mettre ceci en majuscules"\'}}\n{{curly \'lower "METTRE CECI EN MINUSCULES"\'}}\n```\n\n{{upper "mettre ceci en majuscules"}}\n\n{{lower "METTRE CECI EN MINUSCULES"}}\n\n---\n\n### Récupération de données\n\nVous pouvez également faire des requêtes fetch de base pour récupérer et analyser des données JSON de sources externes :\n\n```markdown\n{{curly \'fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"\'}}\n```\n\n{{fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"}}\n\n## Liste complète des assistants\n';
+const TEMPLATES = {
+  en: TEMPLATE_EN,
+  fr: TEMPLATE_FR
+};
+const useStartingTemplate = () => {
+  const helpers = useHelpers();
+  const { i18n } = useTranslation();
+  const helperText = useMemo(
+    () => helpers.map(
+      (helper) => `
+### \`${helper.keyword}\`
+
+${helper.documentation[i18n.language]}
+
+---
+`.trim()
+    ).join("\n"),
+    [helpers, i18n.language]
+  );
+  return useMemo(
+    () => `
+${TEMPLATES[i18n.language] ?? TEMPLATES.en}
+
+${helperText}
+`,
+    [helperText, i18n.language]
+  );
+};
+export {
+  useStartingTemplate
+};

package/components/routes/settings/AdminSection.d.ts

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

package/components/routes/settings/AdminSection.js

@@ -0,0 +1,13 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import howlerPluginStore from "../../../plugins/store.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 SettingsSection from "./SettingsSection.js";
+const AdminSection = () => {
+  const { t } = useTranslation();
+  const pluginStore = usePluginStore();
+  return /* @__PURE__ */ jsx(SettingsSection, { title: t("page.settings.admin.title"), colSpan: 2, children: howlerPluginStore.plugins.map((plugin) => pluginStore.executeFunction(`${plugin}.settings`, "admin")) });
+};
+export {
+  AdminSection as default
+};

package/components/routes/settings/LocalSection.d.ts

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

package/components/routes/settings/LocalSection.js

@@ -0,0 +1,127 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { ViewCompact, ViewModule, ViewComfy, List, TableChart } 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 { TableRow, TableCell, ToggleButtonGroup, ToggleButton, Stack, Typography, Select, MenuItem } 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 { HitLayout } from "../../elements/hit/HitLayout.js";
+import { useMyLocalStorageItem } from "../../hooks/useMyLocalStorage.js";
+import howlerPluginStore from "../../../plugins/store.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 { StorageKey } from "../../../utils/constants.js";
+import EditRow from "../../elements/EditRow.js";
+import SettingsSection from "./SettingsSection.js";
+const CELL_SX = { borderBottom: 0, paddingBottom: 0.5 };
+const LocalSection = () => {
+  const { t } = useTranslation();
+  const pluginStore = usePluginStore();
+  const [compactJson, setCompactJson] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
+  const [flattenJson, setFlattenJson] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON, false);
+  const [forceDrawer, setForceDrawer] = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false);
+  const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
+  const [displayType, setDisplayType] = useMyLocalStorageItem(StorageKey.DISPLAY_TYPE, "list");
+  const [pageCount, setPageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
+  const [searchWidth, setSearchWidth] = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null);
+  return /* @__PURE__ */ jsxs(SettingsSection, { title: t("page.settings.local.title"), colSpan: 3, children: [
+    /* @__PURE__ */ jsx(
+      EditRow,
+      {
+        titleKey: "page.settings.local.compact.json",
+        descriptionKey: "page.settings.local.compact.json.description",
+        value: compactJson,
+        type: "checkbox",
+        onEdit: async (value) => setCompactJson(JSON.parse(value))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditRow,
+      {
+        titleKey: "page.settings.local.flatten.json",
+        descriptionKey: "page.settings.local.flatten.json.description",
+        value: flattenJson,
+        type: "checkbox",
+        onEdit: async (value) => setFlattenJson(JSON.parse(value))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditRow,
+      {
+        titleKey: "page.settings.local.details.drawer",
+        descriptionKey: "page.settings.local.details.drawer.description",
+        value: forceDrawer,
+        type: "checkbox",
+        onEdit: async (value) => setForceDrawer(JSON.parse(value))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditRow,
+      {
+        titleKey: "page.settings.local.search.width",
+        descriptionKey: "page.settings.local.search.width.description",
+        value: searchWidth,
+        type: "range",
+        min: 400,
+        max: Math.floor(window.innerWidth / 100) * 100,
+        optional: true,
+        onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null)
+      }
+    ),
+    /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: "nowrap" }, children: t("page.settings.local.hits.layout") }),
+      /* @__PURE__ */ jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: /* @__PURE__ */ jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [
+        /* @__PURE__ */ jsx(ToggleButton, { value: HitLayout.DENSE, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx(ViewCompact, {}),
+          /* @__PURE__ */ jsx("span", { children: t("page.settings.local.hits.layout.dense") })
+        ] }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: HitLayout.NORMAL, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx(ViewModule, {}),
+          /* @__PURE__ */ jsx("span", { children: t("page.settings.local.hits.layout.normal") })
+        ] }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: HitLayout.COMFY, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx(ViewComfy, {}),
+          /* @__PURE__ */ jsx("span", { children: t("page.settings.local.hits.layout.comfy") })
+        ] }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, sx: { paddingTop: "0 !important" }, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("page.settings.local.hits.layout.description") }) }) }),
+    /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: "nowrap" }, children: t("page.settings.local.hits.display_type") }),
+      /* @__PURE__ */ jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: /* @__PURE__ */ jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [
+        /* @__PURE__ */ jsx(ToggleButton, { value: "list", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx(List, {}),
+          /* @__PURE__ */ jsx("span", { children: t("page.settings.local.hits.display_type.list") })
+        ] }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: "grid", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx(TableChart, {}),
+          /* @__PURE__ */ jsx("span", { children: t("page.settings.local.hits.display_type.grid") })
+        ] }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, sx: { paddingTop: "0 !important" }, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("page.settings.local.hits.display_type.description") }) }) }),
+    /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: "nowrap" }, children: t("page.settings.local.results.count") }),
+      /* @__PURE__ */ jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: /* @__PURE__ */ jsxs(
+        Select,
+        {
+          size: "small",
+          sx: { minWidth: "75px", textAlign: "left" },
+          value: pageCount,
+          onChange: (event) => setPageCount(typeof event.target.value === "string" ? parseInt(event.target.value) : event.target.value),
+          children: [
+            /* @__PURE__ */ jsx(MenuItem, { value: 5, children: "5" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: 10, children: "10" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: 25, children: "25" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: 50, children: "50" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: 75, children: "75" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: 100, children: "100" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: 150, children: "150" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: 250, children: "250" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, sx: { paddingTop: "0 !important" }, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("page.settings.local.results.count.description") }) }) }),
+    howlerPluginStore.plugins.map((plugin) => pluginStore.executeFunction(`${plugin}.settings`, "local"))
+  ] });
+};
+export {
+  LocalSection as default
+};

package/components/routes/settings/ProfileSection.d.ts

@@ -0,0 +1,10 @@
+import { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import { FC } from 'react';
+declare const ProfileSection: FC<{
+    user: HowlerUser;
+    editName?: (value: string) => Promise<void>;
+    addRole?: (role: string) => Promise<void>;
+    removeRole?: (role: string) => Promise<void>;
+    viewGroups: () => Promise<void>;
+}>;
+export default ProfileSection;

package/components/routes/settings/ProfileSection.js

@@ -0,0 +1,98 @@
+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 { ChevronRight, Add, Check, Clear } 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 { TableRow, TableCell, CircularProgress, Typography, Grid, Chip } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { ApiConfigContext } from "../../app/providers/ApiConfigProvider.js";
+import howlerPluginStore from "../../../plugins/store.js";
+import { useContext, useState, useCallback } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+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 { delay } from "../../../utils/utils.js";
+import EditRow from "../../elements/EditRow.js";
+import SettingsSection from "./SettingsSection.js";
+const ProfileSection = ({ user, editName, addRole, removeRole, viewGroups }) => {
+  var _a, _b;
+  const { t } = useTranslation();
+  const { config } = useContext(ApiConfigContext);
+  const pluginStore = usePluginStore();
+  const [loading, setLoading] = useState({});
+  const [loadingGroups, setLoadingGroups] = useState(false);
+  const wrapChange = useCallback(
+    async (r, fn) => {
+      const delayedLoad = delay(250);
+      delayedLoad.then(() => {
+        setLoading({
+          ...loading,
+          [r]: true
+        });
+      });
+      try {
+        await fn(r);
+      } finally {
+        delayedLoad.cancel();
+        setLoading({
+          ...loading,
+          [r]: false
+        });
+      }
+    },
+    [loading]
+  );
+  const onViewGroups = useCallback(async () => {
+    setLoadingGroups(true);
+    try {
+      await viewGroups();
+    } finally {
+      setLoadingGroups(false);
+    }
+  }, [viewGroups]);
+  return /* @__PURE__ */ jsxs(SettingsSection, { title: t("page.settings.profile.title"), colSpan: 3, children: [
+    /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { style: { whiteSpace: "nowrap" }, children: t("page.settings.profile.table.username") }),
+      /* @__PURE__ */ jsx(TableCell, { width: "100%", colSpan: 2, children: user == null ? void 0 : user.username })
+    ] }),
+    /* @__PURE__ */ jsx(EditRow, { titleKey: "page.settings.profile.table.name", value: user == null ? void 0 : user.name, onEdit: editName }),
+    /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { style: { whiteSpace: "nowrap" }, children: t("page.settings.profile.table.email") }),
+      /* @__PURE__ */ jsx(TableCell, { width: "100%", colSpan: 2, children: user == null ? void 0 : user.email })
+    ] }),
+    viewGroups && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          onClick: onViewGroups,
+          sx: (theme) => ({
+            cursor: "pointer",
+            transitionProperty: "background-color",
+            transitionDuration: theme.transitions.duration.shortest + "ms",
+            "&:hover": { backgroundColor: "rgba(128, 128, 128, 0.25)" }
+          }),
+          children: [
+            /* @__PURE__ */ jsx(TableCell, { sx: { borderBottom: 0 }, style: { whiteSpace: "nowrap" }, children: t("page.settings.profile.table.groups") }),
+            /* @__PURE__ */ jsx(TableCell, { sx: { borderBottom: 0 }, align: "right", width: "100%", colSpan: 2, children: loadingGroups ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, sx: { paddingTop: "0 !important" }, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("page.settings.profile.table.groups.description") }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { style: { whiteSpace: "nowrap" }, children: t("page.settings.profile.table.roles") }),
+      /* @__PURE__ */ jsx(TableCell, { width: "100%", colSpan: 2, children: /* @__PURE__ */ jsx(Grid, { container: true, direction: "row", spacing: 1, children: (_b = (_a = config == null ? void 0 : config.lookups) == null ? void 0 : _a.roles) == null ? void 0 : _b.map((r) => {
+        var _a2, _b2, _c, _d, _e;
+        return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: r.toLocaleLowerCase(),
+            color: ((_a2 = user == null ? void 0 : user.roles) == null ? void 0 : _a2.includes(r)) ? "primary" : "default",
+            icon: loading[r] ? /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) : addRole && !((_b2 = user == null ? void 0 : user.roles) == null ? void 0 : _b2.includes(r)) ? /* @__PURE__ */ jsx(Add, {}) : ((_c = user == null ? void 0 : user.roles) == null ? void 0 : _c.includes(r)) ? removeRole ? null : /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Clear, {}),
+            onClick: addRole && !((_d = user == null ? void 0 : user.roles) == null ? void 0 : _d.includes(r)) ? () => wrapChange(r, addRole) : null,
+            onDelete: removeRole && ((_e = user == null ? void 0 : user.roles) == null ? void 0 : _e.includes(r)) ? () => wrapChange(r, removeRole) : null
+          }
+        ) }, r);
+      }) }) })
+    ] }),
+    howlerPluginStore.plugins.map((plugin) => pluginStore.executeFunction(`${plugin}.settings`, "profile"))
+  ] });
+};
+export {
+  ProfileSection as default
+};

package/components/routes/settings/SecuritySection.d.ts

@@ -0,0 +1,10 @@
+import { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import { FC } from 'react';
+declare const SecuritySection: FC<{
+    user: HowlerUser;
+    editPassword?: (password: string) => Promise<void>;
+    addApiKey?: () => void;
+    removeApiKey?: (apiKey: [string, string[], string]) => Promise<void>;
+    editQuota?: (quote?: string) => Promise<void>;
+}>;
+export default SecuritySection;