@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/routes/overviews/Overviews.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Article } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import api from 'api';
+import { TuiListProvider } from 'components/elements/addons/lists';
+import { TuiListMethodContext } from 'components/elements/addons/lists/TuiListProvider';
+import ItemManager from 'components/elements/display/ItemManager';
+import useMyApi from 'components/hooks/useMyApi';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import useMySnackbar from 'components/hooks/useMySnackbar';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from 'utils/constants';
+import OverviewCard from './OverviewCard';
+const OverviewsBase = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const { showSuccessMessage } = useMySnackbar();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    const [hasError, setHasError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setLoading(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            // Check for the actual search query
+            const query = phrase ? `*:*${phrase}*` : '*:*';
+            // Ensure the overview should be visible and/or matches the type we are filtering for
+            setResponse(await dispatchApi(api.search.overview.post({
+                query,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.overview_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    const onDelete = useCallback(async (e, id) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
+            await onSearch();
+            showSuccessMessage(t('route.overviews.manager.delete.success'));
+        }
+        catch (_err) {
+            // eslint-disable-next-line no-console
+            console.warn(_err);
+        }
+    }, [dispatchApi, onSearch, showSuccessMessage, t]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!loading) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    const renderer = useCallback((item, className) => _jsx(OverviewCard, { overview: item, className: className, onDelete: onDelete }), [onDelete]);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.overviews.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/overviews/view?analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/overviews/view'), createPrompt: "route.overviews.create", searchPrompt: "route.overviews.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
+};
+const Overviews = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(OverviewsBase, {}) }));
+};
+export default Overviews;

package/dist/components/routes/overviews/markdownExtendedTokenProvider.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adapted from https://github.com/microsoft/monaco-editor/blob/main/src/basic-languages/markdown/markdown.ts
+ */
+import type { languages } from 'monaco-editor';
+export declare const conf: languages.LanguageConfiguration;
+export declare const language: languages.IMonarchLanguage;

package/dist/components/routes/overviews/markdownExtendedTokenProvider.js

@@ -0,0 +1,254 @@
+/**
+ * Adapted from https://github.com/microsoft/monaco-editor/blob/main/src/basic-languages/markdown/markdown.ts
+ */
+export 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.*-->')
+        }
+    }
+};
+export 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',
+        'borealis'
+    ],
+    // 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' }],
+            [/</, '']
+        ]
+    }
+};

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

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

package/dist/components/routes/overviews/startingTemplate.js

@@ -0,0 +1,181 @@
+import { helpers } from 'components/elements/display/handlebars/helpers';
+export const startingTemplate = () => {
+    const helperText = helpers()
+        .map(helper => `
+### \`${helper.keyword}\`
+
+${helper.documentation}
+
+---
+`.trim())
+        .join('\n');
+    return `
+# Creating an Overview
+
+Overviews 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.
+
+## Getting Started
+
+The basic building blocks of overviews are:
+
+1. Markdown
+2. Handlebars
+
+We will quickly explain these.
+
+### Markdown
+
+Quoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):
+
+> 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.
+>
+> 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.
+>
+> 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.
+
+---
+
+### Handlebars
+
+Quoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):
+
+> Handlebars is a simple templating language.
+>
+> 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.
+>
+>\`\`\`html
+> <p>{{curly "firstname"}} {{curly "lastname"}}</p>
+>\`\`\`
+>
+> 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.
+
+---
+
+For our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:
+
+\`\`\`markdown
+This analytic is **{{curly "howler.analytic"}}**
+\`\`\`
+
+becomes:
+
+> This analytic is **{{howler.analytic}}**.
+
+For more information on handlebars, check out:
+
+- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)
+- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)
+
+## Combining Markdown the Handlebars
+
+You can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:
+
+\`\`\`markdown
+| Source IP | Destination IP |
+| --- | --- |
+| {{curly "source.ip"}} |{{curly "destination.ip"}} |
+\`\`\`
+
+renders as:
+
+| Source IP | Destination IP |
+| --- | --- |
+| {{source.ip}} |{{destination.ip}} |
+
+## Advanced Handlebars
+
+Howler integrates a number of helper functions for you to work with.
+
+### Control Expressions
+
+For use as subexpressions, we expose a number of conditional checks:
+
+**Equality:**
+
+Given \`howler.status\` is {{howler.status}}:
+
+\`\`\`markdown
+{{curly '#if (equals howler.status "open")'}}
+Hit is open!
+{{curly "/if"}}
+{{curly '#if (equals howler.status "resolved")'}}
+Hit is resolved!
+{{curly "/if"}}
+\`\`\`
+
+{{#if (equals howler.status "open")}}
+Hit is open!
+{{/if}}
+{{#if (equals howler.status "resolved")}}
+Hit is resolved!
+{{/if}}
+
+**AND/OR/NOT:**
+
+Given \`howler.status\` is {{howler.status}}, and \`howler.escalation\` is {{howler.escalation}}:
+
+\`\`\`markdown
+{{curly '#if (and (equals howler.status "open") (equals howler.escalation "alert"))'}}
+This is correct!
+{{curly "/if"}}
+{{curly '#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))'}}
+This is wrong!
+{{curly "/if"}}
+\`\`\`
+
+{{#if (and (equals howler.status "open") (equals howler.escalation "alert"))}}
+This is correct!
+{{/if}}
+{{#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))}}
+This is wrong!
+{{/if}}
+
+\`\`\`markdown
+{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}
+Always shows!
+{{curly "/if"}}
+\`\`\`
+
+{{#if (or howler.is_bundle (not howler.is_bundle))}}
+Always shows!
+{{/if}}
+
+---
+
+### String Operations
+
+**String Concatenation:**
+\`\`\`markdown
+{{curly 'join "string one " "string two"'}}
+\`\`\`
+
+{{join "string one " "string two"}}
+
+**Uppercase/Lowercase:**
+
+\`\`\`markdown
+{{curly 'upper "make this uppercase"'}}
+{{curly 'lower "MAKE THIS LOWERCASE"'}}
+\`\`\`
+
+{{upper "make this uppercase"}}
+
+{{lower "MAKE THIS LOWERCASE"}}
+
+---
+
+### Fetching Data
+
+You can also make basic fetch requests for, and parse, JSON data from external sources:
+
+\`\`\`markdown
+{{curly 'fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"'}}
+\`\`\`
+
+{{fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"}}
+
+## Full Helper List
+
+${helperText}
+`;
+};

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

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

package/dist/components/routes/settings/AdminSection.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import howlerPluginStore from 'plugins/store';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import SettingsSection from './SettingsSection';
+const AdminSection = () => {
+    const { t } = useTranslation();
+    const pluginStore = usePluginStore();
+    return (_jsx(SettingsSection, { title: t('page.settings.admin.title'), colSpan: 2, children: howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'admin')) }));
+};
+export default AdminSection;

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

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

package/dist/components/routes/settings/LocalSection.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/jsx-no-literals */
+import { ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
+import { MenuItem, Select, Stack, TableCell, TableRow, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import howlerPluginStore from 'plugins/store';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { StorageKey } from 'utils/constants';
+import EditRow from '../../elements/EditRow';
+import SettingsSection from './SettingsSection';
+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 [pageCount, setPageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
+    const [searchWidth, setSearchWidth] = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null);
+    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_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)) }), _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)) }), _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)) }), _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) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _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: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _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 default LocalSection;

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

@@ -0,0 +1,10 @@
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { 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;