@cccsaurora/howler-ui 2.12.0-dev.168

package/components/routes/advanced/eqlCompletionProvider.js

@@ -0,0 +1,84 @@
+import { useMonaco } from '@monaco-editor/react';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import Fuse from 'fuse.js';
+import { useContext, useMemo } from 'react';
+const EVENT_CATEGORIES = [
+    'authentication',
+    'configuration',
+    'database',
+    'driver',
+    'email',
+    'file',
+    'host',
+    'iam',
+    'intrusion_detection',
+    'malware',
+    'network',
+    'package',
+    'process',
+    'registry',
+    'session',
+    'threat',
+    'web',
+    // Also allow any
+    'any'
+];
+const useEQLCompletionProvider = () => {
+    const monaco = useMonaco();
+    const { hitFields } = useContext(FieldContext);
+    // We'll use fuse for fuzzy searching through the fields
+    const fuse = useMemo(() => new Fuse(hitFields, { keys: ['key'], threshold: 0.4 }), [hitFields]);
+    return {
+        provideCompletionItems: (model, position) => {
+            const line = model.getLineContent(position.lineNumber);
+            const context = line.slice(0, position.column - 1);
+            // Get everything before, and what we care about
+            const before = context.replace(/^(.*?[^a-zA-Z._]?)[a-zA-Z._]+$/, '$1');
+            const portion = context.replace(/^.+?[^a-zA-Z._]([a-zA-Z._]+)$/, '$1');
+            const range = {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: before.length + 1,
+                endColumn: before.length + portion.length
+            };
+            // We're completing on the event.category field
+            if (/^ *\[? *$/.test(before)) {
+                return {
+                    suggestions: EVENT_CATEGORIES.map(cat => ({
+                        label: cat,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: cat,
+                        range
+                    }))
+                };
+            }
+            // If we have something to search with, use it, otherwise just suggest everything
+            if (portion) {
+                const fuzzyMatches = fuse.search(portion);
+                return {
+                    suggestions: fuzzyMatches.map(({ item }) => ({
+                        label: item.key,
+                        detail: item.type,
+                        documentation: item.description,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: item.key,
+                        range
+                    }))
+                };
+            }
+            else {
+                return {
+                    suggestions: hitFields.map(_field => ({
+                        label: _field.key,
+                        detail: _field.type,
+                        documentation: _field.description,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: _field.key,
+                        range
+                    }))
+                };
+            }
+        }
+    };
+};
+export default useEQLCompletionProvider;

package/components/routes/advanced/eqlTokenProvider.d.ts

@@ -0,0 +1,8 @@
+import type { languages } from 'monaco-editor';
+/**
+ * Monaco language token provider for EQL. Very basic. Contact Matt R <matthew.rafuse@cyber.gc.ca> for more info, and/or read:
+ * https://microsoft.github.io/monaco-editor/monarch.html
+ * https://www.elastic.co/guide/en/elasticsearch/reference/current/eql-syntax.html
+ */
+declare const TOKEN_PROVIDER: languages.IMonarchLanguage;
+export default TOKEN_PROVIDER;

package/components/routes/advanced/eqlTokenProvider.js

@@ -0,0 +1,86 @@
+/**
+ * Monaco language token provider for EQL. Very basic. Contact Matt R <matthew.rafuse@cyber.gc.ca> for more info, and/or read:
+ * https://microsoft.github.io/monaco-editor/monarch.html
+ * https://www.elastic.co/guide/en/elasticsearch/reference/current/eql-syntax.html
+ */
+const TOKEN_PROVIDER = {
+    defaultToken: 'invalid',
+    includeLF: true,
+    operators: /[<:>+\-*/%=\|~]|<=|==|!=|>=/,
+    timespans: /[0-9]+[dhms]|ms|micros|nanos/,
+    keywords: ['where', 'like', 'regex', 'in', 'in~', 'not', 'descendant', 'child', 'event', 'of', 'head', 'tail'],
+    booleans: ['and', 'or'],
+    function: /[a-zA-Z]+(?=~?\()/,
+    regexpctl: /[(){}\[\]\$\^|\-*+?\.]/,
+    regexpesc: /\\(?:[bBdDfnrstvwWn0\\\/]|@regexpctl|c[A-Z]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4})/,
+    tokenizer: {
+        root: [
+            // TODO: Match this to valid field names in ES
+            ['@function', { token: 'identifier' }],
+            [
+                /[a-zA-Z_*]+/,
+                {
+                    cases: {
+                        '@keywords': 'operator',
+                        '@booleans': 'boolean',
+                        '@default': 'key'
+                    }
+                }
+            ],
+            ['@operators', { token: 'operator' }],
+            [/\./, { token: 'dot' }],
+            // parens
+            [/[\[\(]/, { token: 'bracket', bracket: '@open', next: '@parens_root' }],
+            // whitespace
+            [/[ \t\r\n]+/, { token: 'whitespace' }],
+            { include: 'common' }
+        ],
+        boolean: [[/true|false|and|or/, 'boolean']],
+        common: [
+            // regular expression: ensure it is terminated before beginning (otherwise it is an opeator)
+            [
+                /\/(?=([^\\\/]|\\.)+\/([gimsuy]*)(\s*)(\.|;|\/|,|\)|\]|\}|$))/,
+                { token: 'regexp', bracket: '@open', next: '@regexp' }
+            ],
+            // strings
+            [/"([^"\\]|\\.)*$/, { token: 'string.invalid' }], // non-teminated string
+            [/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
+            // comments
+            [/#.*\n/, { token: 'comment' }],
+            // numbers
+            ['@timespans', 'number.hex'],
+            [/\d*\.\d+([eE][-+]?\d+)?/, 'number.float'],
+            [/0[xX][0-9a-fA-F]+/, 'number.hex'],
+            [/\d+/, 'number'],
+            // commas
+            [/,/, 'comma']
+        ],
+        parens_root: [{ include: '@root' }, [/[\]\)]/, { token: 'bracket', next: '@pop' }]],
+        string: [
+            [/[^"']+/, { token: 'string' }],
+            [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }]
+        ],
+        regexp: [
+            [/(\{)(\d+(?:,\d*)?)(\})/, ['regexp.escape.control', 'regexp.escape.control', 'regexp.escape.control']],
+            [
+                /(\[)(\^?)(?=(?:[^\]\\\/]|\\.)+)/,
+                ['regexp.escape.control', { token: 'regexp.escape.control', next: '@regexrange' }]
+            ],
+            [/(\()(\?:|\?=|\?!)/, ['regexp.escape.control', 'regexp.escape.control']],
+            [/[()]/, 'regexp.escape.control'],
+            [/@regexpctl/, 'regexp.escape.control'],
+            [/[^\\\/]/, 'regexp'],
+            [/@regexpesc/, 'regexp.escape'],
+            [/\\\./, 'regexp.invalid'],
+            [/(\/)([gimsuy]*)/, [{ token: 'regexp', bracket: '@close', next: '@pop' }, 'keyword.other']]
+        ],
+        regexrange: [
+            [/-/, 'regexp.escape.control'],
+            [/\^/, 'regexp.invalid'],
+            [/@regexpesc/, 'regexp.escape'],
+            [/[^\]]/, 'regexp'],
+            [/\]/, { token: 'regexp.escape.control', next: '@pop', bracket: '@close' }]
+        ]
+    }
+};
+export default TOKEN_PROVIDER;

package/components/routes/advanced/historyCompletionProvider.d.ts

@@ -0,0 +1,3 @@
+import type { languages } from 'monaco-editor';
+declare const useHistoryCompletionProvider: () => languages.CompletionItemProvider;
+export default useHistoryCompletionProvider;

package/components/routes/advanced/historyCompletionProvider.js

@@ -0,0 +1,48 @@
+import { useMonaco } from '@monaco-editor/react';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import Fuse from 'fuse.js';
+import { useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+const useHistoryCompletionProvider = () => {
+    const monaco = useMonaco();
+    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch);
+    const queryHistory = useContextSelector(HitSearchContext, ctx => ctx?.queryHistory ?? {});
+    // Using fuse for fuzzy searching
+    const fuse = useMemo(() => new Fuse(Object.keys(queryHistory), { keys: ['key'], threshold: 0.4 }), [queryHistory]);
+    return {
+        provideCompletionItems: async (model, position) => {
+            if (!fzfSearch) {
+                return { suggestions: [] };
+            }
+            const line = model.getLineContent(position.lineNumber);
+            const context = line.slice(0, position.column - 1);
+            // Get what comes before, and the field we're intersted in autocompleting
+            const before = context.replace(/^(.*?[^a-zA-Z._]?)[a-zA-Z._*]*$/, '$1');
+            const portion = context.replace(/^.+?[^a-zA-Z._]([a-zA-Z._*]*)$/, '$1');
+            const range = {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: before.length + 1,
+                endColumn: before.length + portion.length
+            };
+            const currentWord = model.getWordAtPosition(position);
+            const query = currentWord ? currentWord.word : '';
+            const fuzzyResults = fuse.search(query);
+            // Map the fuzzy search results to Monaco completion items
+            const suggestions = fuzzyResults.map(result => {
+                return {
+                    label: result.item, // The query string from previous searches
+                    kind: monaco.languages.CompletionItemKind.Reference, // Simple reference type
+                    insertText: result.item, // Insert the plain text as it is
+                    detail: twitterShort(queryHistory[result.item]), // Optional additional detail
+                    range
+                };
+            });
+            return {
+                suggestions
+            };
+        }
+    };
+};
+export default useHistoryCompletionProvider;

package/components/routes/advanced/luceneCompletionProvider.d.ts

@@ -0,0 +1,3 @@
+import type { languages } from 'monaco-editor';
+declare const useLuceneCompletionProvider: () => languages.CompletionItemProvider;
+export default useLuceneCompletionProvider;

package/components/routes/advanced/luceneCompletionProvider.js

@@ -0,0 +1,96 @@
+import { useMonaco } from '@monaco-editor/react';
+import api from '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import Fuse from 'fuse.js';
+import { useContext, useEffect, useMemo } from 'react';
+const useLuceneCompletionProvider = () => {
+    const { config } = useContext(ApiConfigContext);
+    const monaco = useMonaco();
+    const { hitFields, getHitFields } = useContext(FieldContext);
+    useEffect(() => {
+        getHitFields();
+    }, [getHitFields]);
+    // Using fuse for fuzzy searching
+    const fuse = useMemo(() => new Fuse(hitFields, { keys: ['key'], threshold: 0.4 }), [hitFields]);
+    return {
+        provideCompletionItems: async (model, position) => {
+            const line = model.getLineContent(position.lineNumber);
+            const context = line.slice(0, position.column - 1);
+            // Get what comes before, and the field we're intersted in autocompleting
+            const before = context.replace(/^(.*?[^a-zA-Z._]?)[a-zA-Z._*]*$/, '$1');
+            const portion = context.replace(/^.+?[^a-zA-Z._]([a-zA-Z._*]*)$/, '$1');
+            // If the field is complete and we're autocompleting the value, we parse the field and see if it's an enum.
+            // If it is, suggest the matching values
+            if (before.trim().endsWith(':')) {
+                const key = before.trim().replace(/^.*?[^a-zA-Z._]?([a-zA-Z._]+):$/, '$1');
+                if (config.lookups[key]) {
+                    const _position = model.getWordUntilPosition(position);
+                    return {
+                        suggestions: config.lookups[key].map(_value => ({
+                            label: _value,
+                            kind: monaco.languages.CompletionItemKind.Constant,
+                            insertText: _value,
+                            range: {
+                                startLineNumber: position.lineNumber,
+                                endLineNumber: position.lineNumber,
+                                startColumn: _position.startColumn,
+                                endColumn: _position.endColumn
+                            }
+                        }))
+                    };
+                }
+                else {
+                    const options = await api.search.facet.hit.post(key, { query: 'howler.id:*', rows: 250 }).catch(() => ({}));
+                    const _position = model.getWordUntilPosition(position);
+                    return {
+                        suggestions: Object.keys(options).map(_value => ({
+                            label: _value,
+                            kind: monaco.languages.CompletionItemKind.Constant,
+                            insertText: `"${_value}"`,
+                            range: {
+                                startLineNumber: position.lineNumber,
+                                endLineNumber: position.lineNumber,
+                                startColumn: _position.startColumn,
+                                endColumn: _position.endColumn
+                            }
+                        }))
+                    };
+                }
+            }
+            const range = {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: before.length + 1,
+                endColumn: before.length + portion.length
+            };
+            // If we have something to search with, use it, otherwise just suggest everything
+            if (portion) {
+                const fuzzyMatches = fuse.search(portion);
+                return {
+                    suggestions: fuzzyMatches.map(({ item }) => ({
+                        label: item.key,
+                        detail: item.type,
+                        documentation: item.description,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: item.key + ':',
+                        range
+                    }))
+                };
+            }
+            else {
+                return {
+                    suggestions: hitFields.map(_field => ({
+                        label: _field.key,
+                        detail: _field.type,
+                        documentation: _field.description,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: _field.key + ':',
+                        range
+                    }))
+                };
+            }
+        }
+    };
+};
+export default useLuceneCompletionProvider;

package/components/routes/advanced/luceneTokenProvider.d.ts

@@ -0,0 +1,9 @@
+import type { languages } from 'monaco-editor';
+/**
+ * Monaco language token provider for Lucene. Very basic. Contact Matt R <matthew.rafuse@cyber.gc.ca> for more info, and/or read:
+ * https://microsoft.github.io/monaco-editor/monarch.html
+ * https://lucene.apache.org/core/2_9_4/queryparsersyntax.html
+ * As well as howler's own search documentation.
+ */
+declare const TOKEN_PROVIDER: languages.IMonarchLanguage;
+export default TOKEN_PROVIDER;

package/components/routes/advanced/luceneTokenProvider.js

@@ -0,0 +1,104 @@
+/**
+ * Monaco language token provider for Lucene. Very basic. Contact Matt R <matthew.rafuse@cyber.gc.ca> for more info, and/or read:
+ * https://microsoft.github.io/monaco-editor/monarch.html
+ * https://lucene.apache.org/core/2_9_4/queryparsersyntax.html
+ * As well as howler's own search documentation.
+ */
+const TOKEN_PROVIDER = {
+    defaultToken: 'default',
+    includeLF: true,
+    operators: ['-', '||', '&&', ':'],
+    keywords: ['AND', 'OR', 'NOT'],
+    regexpctl: /[(){}\[\]\$\^|\-*+?\.]/,
+    regexpesc: /\\(?:[bBdDfnrstvwWn0\\\/]|@regexpctl|c[A-Z]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4})/,
+    tokenizer: {
+        root: [
+            // TODO: Match this to valid field names in ES
+            [
+                /[a-zA-Z_*]+/,
+                {
+                    cases: {
+                        '@keywords': 'operator',
+                        '@default': 'key'
+                    }
+                }
+            ],
+            [/\./, { token: 'dot' }],
+            [/: */, { token: 'operator', next: '@value' }],
+            [/-/, { token: 'operator' }],
+            // parens
+            [/\(/, { token: 'bracket', bracket: '@open', next: '@parens_root' }],
+            // whitespace
+            [/[ \t\r\n]+/, { token: 'whitespace' }],
+            { include: 'common' }
+        ],
+        boolean: [[/true|false/, 'boolean']],
+        common: [
+            // regular expression: ensure it is terminated before beginning (otherwise it is an opeator)
+            [
+                /\/(?=([^\\\/]|\\.)+\/([gimsuy]*)(\s*)(\.|;|\/|,|\)|\]|\}|$))/,
+                { token: 'regexp', bracket: '@open', next: '@regexp' }
+            ],
+            // strings
+            [/"([^"\\]|\\.)*$/, { token: 'string.invalid' }], // non-teminated string
+            [/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
+            // comments
+            [/#.*\n/, { token: 'comment' }],
+            // numbers
+            [/\d*\.\d+([eE][-+]?\d+)?/, 'number.float'],
+            [/0[xX][0-9a-fA-F]+/, 'number.hex'],
+            [/\d+/, 'number']
+        ],
+        parens_root: [{ include: '@root' }, [/\)/, { token: 'bracket', next: '@pop' }]],
+        parens_value: [
+            // whitespace
+            [/[ \t\r\n]+/, { token: 'whitespace' }],
+            { include: '@value' },
+            [/\)/, { token: 'bracket', next: '@pop', bracket: '@close' }]
+        ],
+        string: [
+            [/[^"']+/, { token: 'string' }],
+            [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }]
+        ],
+        value: [
+            { include: 'boolean' },
+            [
+                /([0-9a-zA-Z_*.-]*[a-zA-Z_*-]+[0-9a-zA-Z_*.-]*)/,
+                {
+                    cases: {
+                        '@keywords': 'operator',
+                        '@default': 'constant'
+                    }
+                }
+            ],
+            // start parens
+            [/\(/, { token: 'bracket', bracket: '@open', next: '@parens_value' }],
+            // end
+            [/[ \t\r\n]+/, { token: 'whitespace', next: '@pop' }],
+            [/\)/, { token: 'bracket', next: '@pop' }],
+            { include: 'common' }
+        ],
+        regexp: [
+            [/(\{)(\d+(?:,\d*)?)(\})/, ['regexp.escape.control', 'regexp.escape.control', 'regexp.escape.control']],
+            [
+                /(\[)(\^?)(?=(?:[^\]\\\/]|\\.)+)/,
+                ['regexp.escape.control', { token: 'regexp.escape.control', next: '@regexrange' }]
+            ],
+            [/(\()(\?:|\?=|\?!)/, ['regexp.escape.control', 'regexp.escape.control']],
+            [/[()]/, 'regexp.escape.control'],
+            [/@regexpctl/, 'regexp.escape.control'],
+            [/[^\\\/]/, 'regexp'],
+            [/@regexpesc/, 'regexp.escape'],
+            [/\\\./, 'regexp.invalid'],
+            [/(\/)([gimsuy]*)/, [{ token: 'regexp', bracket: '@close', next: '@pop' }, 'keyword.other']]
+        ],
+        regexrange: [
+            [/-/, 'regexp.escape.control'],
+            [/\^/, 'regexp.invalid'],
+            [/@regexpesc/, 'regexp.escape'],
+            [/[^\]]/, 'regexp'],
+            [/\]/, { token: 'regexp.escape.control', next: '@pop', bracket: '@close' }]
+        ]
+    }
+};
+export default TOKEN_PROVIDER;

package/components/routes/advanced/yamlCompletionProvider.d.ts

@@ -0,0 +1,3 @@
+import type { languages } from 'monaco-editor';
+declare const useYamlCompletionProvider: () => languages.CompletionItemProvider;
+export default useYamlCompletionProvider;

package/components/routes/advanced/yamlCompletionProvider.js

@@ -0,0 +1,50 @@
+import { useMonaco } from '@monaco-editor/react';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import Fuse from 'fuse.js';
+import { useContext, useMemo } from 'react';
+const useYamlCompletionProvider = () => {
+    const monaco = useMonaco();
+    const { hitFields } = useContext(FieldContext);
+    const fuse = useMemo(() => new Fuse(hitFields, { keys: ['key'], threshold: 0.4 }), [hitFields]);
+    return {
+        provideCompletionItems: (model, position) => {
+            const line = model.getLineContent(position.lineNumber);
+            const context = line.slice(0, position.column - 1);
+            const before = context.replace(/^(.*?[^a-zA-Z._]?)[a-zA-Z._]+$/, '$1');
+            const portion = context.replace(/^.+?[^a-zA-Z._]([a-zA-Z._]+)$/, '$1');
+            const range = {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: before.length + 1,
+                endColumn: before.length + portion.length
+            };
+            // If we have something to search with, use it, otherwise just suggest everything
+            if (portion) {
+                const fuzzyMatches = fuse.search(portion);
+                return {
+                    suggestions: fuzzyMatches.map(({ item }) => ({
+                        label: item.key,
+                        detail: item.type,
+                        documentation: item.description,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: item.key,
+                        range
+                    }))
+                };
+            }
+            else {
+                return {
+                    suggestions: hitFields.map(_field => ({
+                        label: _field.key,
+                        detail: _field.type,
+                        documentation: _field.description,
+                        kind: monaco.languages.CompletionItemKind.Property,
+                        insertText: _field.key,
+                        range
+                    }))
+                };
+            }
+        }
+    };
+};
+export default useYamlCompletionProvider;

package/components/routes/analytics/AnalyticComments.d.ts

@@ -0,0 +1,7 @@
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import { type FC } from 'react';
+declare const AnalyticComments: FC<{
+    analytic: Analytic;
+    setAnalytic: (a: Analytic) => void;
+}>;
+export default AnalyticComments;

package/components/routes/analytics/AnalyticComments.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clear, Send } from '@mui/icons-material';
+import { Chip, Divider, IconButton, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import Comment from '@cccsaurora/howler-ui/components/elements/Comment';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { compareTimestamp } from '@cccsaurora/howler-ui/utils/utils';
+const MAX_LENGTH = 5000;
+const AnalyticComments = ({ analytic, setAnalytic }) => {
+    const { user } = useAppUser();
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const [userIds, setUserIds] = useState(new Set());
+    const users = useMyUserList(userIds);
+    const [searchParams] = useSearchParams();
+    const [length, setLength] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [showClear, setShowClear] = useState(false);
+    const input = useRef();
+    const onSubmit = useCallback(async () => {
+        if (!input.current?.value || !analytic || input.current.value.length > MAX_LENGTH)
+            return;
+        setLoading(true);
+        try {
+            const result = await dispatchApi(api.analytic.comments.post(analytic.analytic_id, input.current.value, searchParams.get('filter')), {
+                showError: true,
+                throwError: true,
+                logError: false
+            });
+            setAnalytic(result);
+            input.current.value = '';
+            setShowClear(false);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [analytic, dispatchApi, searchParams, setAnalytic]);
+    const onClear = useCallback(() => {
+        input.current.value = '';
+        setShowClear(false);
+        setLength(0);
+    }, []);
+    const checkForSubmit = useCallback(e => {
+        e.stopPropagation();
+        if (input.current?.value) {
+            setShowClear(true);
+        }
+        if (e.ctrlKey && e.key === 'Enter' && !loading) {
+            onSubmit();
+        }
+    }, [loading, onSubmit]);
+    const checkLength = useCallback(() => setLength(input.current?.value.length), []);
+    const handleDelete = useCallback(async (commentId) => {
+        await dispatchApi(api.analytic.comments.del(analytic?.analytic_id, [commentId]));
+        setAnalytic({
+            ...analytic,
+            comment: analytic.comment.filter(c => c.id !== commentId)
+        });
+    }, [analytic, dispatchApi, setAnalytic]);
+    const handleEdit = useCallback(async (commentId, editValue) => {
+        await dispatchApi(api.analytic.comments.put(analytic?.analytic_id, commentId, editValue));
+        setAnalytic({
+            ...analytic,
+            comment: analytic.comment.map(cmt => (cmt.id !== commentId ? cmt : { ...cmt, value: editValue }))
+        });
+    }, [analytic, dispatchApi, setAnalytic]);
+    const handleQuote = useCallback((value) => {
+        if (input.current) {
+            input.current.value = `${input.current.value.trimStart()}\n\n${value
+                .split('\n')
+                .map(l => '> ' + l)
+                .join('\n')}\n\n`.trimStart();
+            setTimeout(() => {
+                input.current.focus();
+                // SPBK-2197 Fix - https://stackoverflow.com/a/10576409
+                input.current.selectionStart = input.current.selectionEnd = input.current.value.length;
+            }, 10);
+        }
+    }, []);
+    const handleReact = useCallback(async (commentId, type) => {
+        if (type) {
+            await dispatchApi(api.analytic.comments.react.put(analytic?.analytic_id, commentId, type));
+            setAnalytic({
+                ...analytic,
+                comment: analytic.comment.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: type } })
+            });
+        }
+        else {
+            await dispatchApi(api.analytic.comments.react.del(analytic?.analytic_id, commentId));
+            setAnalytic({
+                ...analytic,
+                comment: analytic.comment.map(cmt => cmt.id !== commentId
+                    ? cmt
+                    : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: undefined } })
+            });
+        }
+    }, [analytic, dispatchApi, setAnalytic, user.username]);
+    useEffect(() => {
+        setUserIds(new Set(analytic?.comment.map(c => c.user)));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [analytic?.analytic_id]);
+    const comments = useMemo(() => analytic?.comment
+        .filter(c => !searchParams.get('filter') || c.detection === searchParams.get('filter'))
+        .sort((a, b) => compareTimestamp(b.timestamp, a.timestamp))
+        .map(c => (_jsx(Comment, { comment: c, users: users, handleDelete: () => handleDelete(c.id), handleEdit: value => handleEdit(c.id, value), handleReact: type => handleReact(c.id, type), handleQuote: () => handleQuote(c.value), extra: !searchParams.get('filter') && (_jsx(Chip, { size: "small", sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: c.detection ?? 'Analytic' })) }, c.id))), [analytic?.comment, searchParams, handleDelete, handleEdit, handleQuote, handleReact, users]);
+    return (_jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [_jsx(Divider, { orientation: "horizontal", flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t(searchParams.get('filter') ? 'comments.add.detection' : 'comments.add.analytic'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), comments] }));
+};
+export default AnalyticComments;

package/components/routes/analytics/AnalyticDetails.d.ts

@@ -0,0 +1,2 @@
+declare const AnalyticDetails: () => import("react/jsx-runtime").JSX.Element;
+export default AnalyticDetails;