@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/commons/components/utils/hooks/useLocalStorageItem.js

@@ -0,0 +1,39 @@
+import useLocalStorage from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorage';
+import { useEffect, useMemo, useState } from 'react';
+/**
+ * This hooks backs the typical 'useState' hook with local storage.
+ *
+ * This means that it will initialize with the value stored in local storage.
+ *
+ * State changes are also persisted to local storage.
+ *
+ * All this ensures the state is preserved across inializations.
+ *
+ * @param key - local storage key under which to store the state.
+ * @param initialValue - local storage initialization value.
+ * @returns a stateful value, a function to update it, and a function to remove it.
+ */
+export default function useLocalStorageItem(key, initialValue) {
+    const { get, set, has, remove } = useLocalStorage();
+    const [value, setValue] = useState(get(key) ?? initialValue);
+    useEffect(() => {
+        if (initialValue !== null && initialValue !== undefined && !has(key)) {
+            set(key, initialValue);
+        }
+    }, [key, initialValue, has, set]);
+    return useMemo(() => [
+        value,
+        (newValue, save = true) => {
+            if (save) {
+                if (newValue !== undefined) {
+                    set(key, newValue);
+                }
+                else {
+                    remove(key);
+                }
+            }
+            setValue(newValue);
+        },
+        () => remove(key)
+    ], [key, value, set, remove]);
+}

package/commons/components/utils/hooks/useThemeBuilder.d.ts

@@ -0,0 +1,7 @@
+import { type Components, type PaletteOptions, type Theme } from '@mui/material';
+import type { AppThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+export declare const createTuiTheme: (components: Components<Omit<Theme, "components">>, palette: PaletteOptions) => Theme;
+export default function useThemeBuilder(theme?: AppThemeConfigs): {
+    darkTheme: Theme;
+    lightTheme: Theme;
+};

package/commons/components/utils/hooks/useThemeBuilder.js

@@ -0,0 +1,48 @@
+import { createTheme } from '@mui/material';
+import { AppDefaultsThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppDefaults';
+import { useMemo } from 'react';
+export const createTuiTheme = (components, palette) => createTheme({
+    components: {
+        ...components,
+        MuiCssBaseline: {
+            ...(components?.MuiCssBaseline || {}),
+            styleOverrides: {
+                ...(components.MuiCssBaseline?.styleOverrides || {}),
+                html: {
+                    width: '100%',
+                    height: '100%'
+                },
+                body: {
+                    width: '100%',
+                    height: '100%'
+                },
+                '#root': {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0
+                }
+            }
+        },
+        MuiUseMediaQuery: {
+            ...(components.MuiUseMediaQuery || {}),
+            defaultProps: {
+                noSsr: true
+            }
+        }
+    },
+    palette
+});
+export default function useThemeBuilder(theme = AppDefaultsThemeConfigs) {
+    return useMemo(() => ({
+        darkTheme: createTuiTheme(theme.components || {}, {
+            mode: 'dark',
+            ...(theme?.palette?.dark || {})
+        }),
+        lightTheme: createTuiTheme(theme.components || {}, {
+            mode: 'light',
+            ...(theme?.palette?.light || {})
+        })
+    }), [theme]);
+}

package/commons/components/utils/keyboard.d.ts

@@ -0,0 +1,30 @@
+import { type KeyboardEvent } from 'react';
+export declare const ENTER = "Enter";
+export declare const ESCAPE = "Escape";
+export declare const ARROW_LEFT = "ArrowLeft";
+export declare const ARROW_UP = "ArrowUp";
+export declare const ARROW_RIGHT = "ArrowRight";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const BACKSPACE = "Backspace";
+export declare const SPACE = " ";
+export declare function is(key: string, check: string): boolean;
+export declare function isArrowUp(key: string): boolean;
+export declare function isArrowDown(key: string): boolean;
+export declare function isArrowLeft(key: string): boolean;
+export declare function isArrowRight(key: string): boolean;
+export declare function isEscape(key: string): boolean;
+export declare function isEnter(key: string): boolean;
+export declare function isBackspace(key: string): boolean;
+export declare function isSpace(key: string): boolean;
+export declare function parseEvent(event: KeyboardEvent<HTMLElement>): {
+    key: string;
+    isCtrl: boolean;
+    isEnter: boolean;
+    isSpace: boolean;
+    isBackspace: boolean;
+    isEscape: boolean;
+    isArrowLeft: boolean;
+    isArrowRight: boolean;
+    isArrowUp: boolean;
+    isArrowDown: boolean;
+};

package/commons/components/utils/keyboard.js

@@ -0,0 +1,50 @@
+import {} from 'react';
+export const ENTER = 'Enter';
+export const ESCAPE = 'Escape';
+export const ARROW_LEFT = 'ArrowLeft';
+export const ARROW_UP = 'ArrowUp';
+export const ARROW_RIGHT = 'ArrowRight';
+export const ARROW_DOWN = 'ArrowDown';
+export const BACKSPACE = 'Backspace';
+export const SPACE = ' ';
+export function is(key, check) {
+    return key === check;
+}
+export function isArrowUp(key) {
+    return is(key, ARROW_UP);
+}
+export function isArrowDown(key) {
+    return is(key, ARROW_DOWN);
+}
+export function isArrowLeft(key) {
+    return is(key, ARROW_LEFT);
+}
+export function isArrowRight(key) {
+    return is(key, ARROW_RIGHT);
+}
+export function isEscape(key) {
+    return is(key, ESCAPE);
+}
+export function isEnter(key) {
+    return is(key, ENTER);
+}
+export function isBackspace(key) {
+    return is(key, BACKSPACE);
+}
+export function isSpace(key) {
+    return is(key, SPACE);
+}
+export function parseEvent(event) {
+    return {
+        key: event.key,
+        isCtrl: event.ctrlKey,
+        isEnter: isEnter(event.key),
+        isSpace: isSpace(event.key),
+        isBackspace: isBackspace(event.key),
+        isEscape: isEscape(event.key),
+        isArrowLeft: isArrowLeft(event.key),
+        isArrowRight: isArrowRight(event.key),
+        isArrowUp: isArrowUp(event.key),
+        isArrowDown: isArrowDown(event.key)
+    };
+}

package/components/app/App.d.ts

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

package/components/app/App.js

@@ -0,0 +1,341 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { loader } from '@monaco-editor/react';
+import api from '@cccsaurora/howler-ui/api';
+import AppProvider from '@cccsaurora/howler-ui/commons/components/app/AppProvider';
+import LayoutSkeleton from '@cccsaurora/howler-ui/commons/components/app/AppSkeleton';
+import { useAppLayout, useAppSwitcher, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import Modal from '@cccsaurora/howler-ui/components/elements/display/Modal';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMyPreferences from '@cccsaurora/howler-ui/components/hooks/useMyPreferences';
+import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
+import useMyUser from '@cccsaurora/howler-ui/components/hooks/useMyUser';
+import LoginScreen from '@cccsaurora/howler-ui/components/logins/Login';
+import useLogin from '@cccsaurora/howler-ui/components/logins/hooks/useLogin';
+import NotFoundPage from '@cccsaurora/howler-ui/components/routes/404';
+import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
+import Logout from '@cccsaurora/howler-ui/components/routes/Logout';
+import ActionEditor from '@cccsaurora/howler-ui/components/routes/action/edit/ActionEditor';
+import ActionDetails from '@cccsaurora/howler-ui/components/routes/action/view/ActionDetails';
+import ActionSearchProvider from '@cccsaurora/howler-ui/components/routes/action/view/ActionSearch';
+import Integrations from '@cccsaurora/howler-ui/components/routes/action/view/Integrations';
+import UserEditor from '@cccsaurora/howler-ui/components/routes/admin/users/UserEditor';
+import UserSearchProvider from '@cccsaurora/howler-ui/components/routes/admin/users/UserSearch';
+import QueryBuilder from '@cccsaurora/howler-ui/components/routes/advanced/QueryBuilder';
+import AnalyticDetails from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticDetails';
+import AnalyticSearch from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticSearch';
+import DossierEditor from '@cccsaurora/howler-ui/components/routes/dossiers/DossierEditor';
+import Dossiers from '@cccsaurora/howler-ui/components/routes/dossiers/Dossiers';
+import ActionDocumentation from '@cccsaurora/howler-ui/components/routes/help/ActionDocumentation';
+import ApiDocumentation from '@cccsaurora/howler-ui/components/routes/help/ApiDocumentation';
+import AuthDocumentation from '@cccsaurora/howler-ui/components/routes/help/AuthDocumentation';
+import ClientDocumentation from '@cccsaurora/howler-ui/components/routes/help/ClientDocumentation';
+import HelpDashboard from '@cccsaurora/howler-ui/components/routes/help/Help';
+import HitDocumentation from '@cccsaurora/howler-ui/components/routes/help/HitDocumentation';
+import NotebookDocumentation from '@cccsaurora/howler-ui/components/routes/help/NotebookDocumentation';
+import OverviewDocumentation from '@cccsaurora/howler-ui/components/routes/help/OverviewDocumentation';
+import RetentionDocumentation from '@cccsaurora/howler-ui/components/routes/help/RetentionDocumentation';
+import SearchDocumentation from '@cccsaurora/howler-ui/components/routes/help/SearchDocumentation';
+import TemplateDocumentation from '@cccsaurora/howler-ui/components/routes/help/TemplateDocumentation';
+import ViewDocumentation from '@cccsaurora/howler-ui/components/routes/help/ViewDocumentation';
+import HitBrowser from '@cccsaurora/howler-ui/components/routes/hits/search/HitBrowser';
+import HitViewer from '@cccsaurora/howler-ui/components/routes/hits/view/HitViewer';
+import Home from '@cccsaurora/howler-ui/components/routes/home';
+import OverviewViewer from '@cccsaurora/howler-ui/components/routes/overviews/OverviewViewer';
+import Overviews from '@cccsaurora/howler-ui/components/routes/overviews/Overviews';
+import Settings from '@cccsaurora/howler-ui/components/routes/settings/Settings';
+import TemplateViewer from '@cccsaurora/howler-ui/components/routes/templates/TemplateViewer';
+import Templates from '@cccsaurora/howler-ui/components/routes/templates/Templates';
+import ViewComposer from '@cccsaurora/howler-ui/components/routes/views/ViewComposer';
+import Views from '@cccsaurora/howler-ui/components/routes/views/Views';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import * as monaco from 'monaco-editor';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useContext, useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { PluginProvider, usePluginStore } from 'react-pluggable';
+import { createBrowserRouter, Outlet, RouterProvider, useLocation, useNavigate } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import useMySearch from '../hooks/useMySearch';
+import AppContainer from './AppContainer';
+import AnalyticProvider from './providers/AnalyticProvider';
+import ApiConfigProvider, { ApiConfigContext } from './providers/ApiConfigProvider';
+import AvatarProvider from './providers/AvatarProvider';
+import CustomPluginProvider from './providers/CustomPluginProvider';
+import FavouriteProvider from './providers/FavouritesProvider';
+import FieldProvider from './providers/FieldProvider';
+import HitProvider from './providers/HitProvider';
+import LocalStorageProvider from './providers/LocalStorageProvider';
+import ModalProvider from './providers/ModalProvider';
+import OverviewProvider from './providers/OverviewProvider';
+import ParameterProvider from './providers/ParameterProvider';
+import SocketProvider from './providers/SocketProvider';
+import UserListProvider from './providers/UserListProvider';
+import ViewProvider from './providers/ViewProvider';
+loader.config({ monaco });
+const RoleRoute = ({ role }) => {
+    const appUser = useAppUser();
+    if (appUser.user?.roles?.includes(role)) {
+        return _jsx(Outlet, {});
+    }
+    return _jsx(NotFoundPage, {});
+};
+// Your application's initialization flow.
+const MyApp = () => {
+    // From this point on, we use the commons' hook.
+    const { getUser } = useLogin();
+    const { dispatchApi } = useMyApi();
+    const appLayout = useAppLayout();
+    const appUser = useAppUser();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const apiConfig = useContext(ApiConfigContext);
+    const { setItems } = useAppSwitcher();
+    const { get, set, remove } = useMyLocalStorage();
+    const pluginStore = usePluginStore();
+    // Simulate app loading time...
+    // e.g. fetching initial app data, etc.
+    useEffect(() => {
+        dispatchApi(api.configs.get()).then(data => {
+            apiConfig.setConfig(data);
+            if (data?.configuration?.ui?.apps) {
+                setItems(data.configuration.ui.apps);
+            }
+        });
+        if (appUser.isReady() || (!get(StorageKey.APP_TOKEN) && !get(StorageKey.REFRESH_TOKEN))) {
+            return;
+        }
+        getUser();
+        // eslint-disable-next-line
+    }, []);
+    useEffect(() => {
+        if (appUser.isReady()) {
+            appLayout.setReady(true);
+            // TODO: Remove in a little while
+            remove(StorageKey.ETAG);
+        }
+        else if (!get(StorageKey.APP_TOKEN) && !get(StorageKey.REFRESH_TOKEN)) {
+            if (location.pathname !== '/login') {
+                set(StorageKey.NEXT_LOCATION, location.pathname);
+                set(StorageKey.NEXT_SEARCH, location.search);
+                navigate('/login');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [appUser.isReady()]);
+    for (const plugin of howlerPluginStore.plugins) {
+        pluginStore.executeFunction(`${plugin}.setup`)?.();
+    }
+    // we don't display the skeleton for certain paths
+    return (appLayout.ready && apiConfig.config?.indexes) ||
+        location.pathname === '/login' ||
+        location.pathname === '/logout' ? (_jsx(AppContainer, {})) : (_jsx(LayoutSkeleton, {}));
+};
+const MyAppProvider = ({ children }) => {
+    const myPreferences = useMyPreferences();
+    const myTheme = useMyTheme();
+    const mySitemap = useMySitemap();
+    const myUser = useMyUser();
+    const mySearch = useMySearch();
+    return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, theme: myTheme, sitemap: mySitemap, user: myUser, search: mySearch, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(HitProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+};
+const AppProviderWrapper = () => {
+    return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { children: _jsx(PluginProvider, { pluginStore: howlerPluginStore.pluginStore, children: _jsxs(MyAppProvider, { children: [_jsx(MyApp, {}), _jsx(Modal, {})] }) }) }) }));
+};
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: _jsx(AppProviderWrapper, {}),
+        children: [
+            {
+                path: 'login',
+                element: _jsx(LoginScreen, {})
+            },
+            {
+                path: 'logout',
+                element: _jsx(Logout, {})
+            },
+            {
+                index: true,
+                element: _jsx(Home, {})
+            },
+            {
+                path: 'hits',
+                element: _jsx(HitBrowser, {})
+            },
+            {
+                path: 'search',
+                element: _jsx(HitBrowser, {})
+            },
+            {
+                path: 'hits/:id',
+                element: _jsx(HitViewer, {})
+            },
+            {
+                path: 'bundles/:id',
+                element: _jsx(HitBrowser, {})
+            },
+            {
+                path: 'templates',
+                element: _jsx(Templates, {})
+            },
+            {
+                path: 'templates/view',
+                element: _jsx(TemplateViewer, {})
+            },
+            {
+                path: 'overviews',
+                element: _jsx(Overviews, {})
+            },
+            {
+                path: 'overviews/view',
+                element: _jsx(OverviewViewer, {})
+            },
+            {
+                path: 'dossiers',
+                element: _jsx(Dossiers, {})
+            },
+            {
+                path: 'dossiers/create',
+                element: (_jsx(ParameterProvider, { children: _jsx(DossierEditor, {}) }))
+            },
+            {
+                path: 'dossiers/:id/edit',
+                element: (_jsx(ParameterProvider, { children: _jsx(DossierEditor, {}) }))
+            },
+            {
+                path: 'views',
+                element: _jsx(Views, {})
+            },
+            {
+                path: 'views/create',
+                element: (_jsx(ParameterProvider, { children: _jsx(ViewComposer, {}) }))
+            },
+            {
+                path: 'views/:id',
+                element: _jsx(HitBrowser, {})
+            },
+            {
+                path: 'views/:id/edit',
+                element: (_jsx(ParameterProvider, { children: _jsx(ViewComposer, {}) }))
+            },
+            {
+                path: 'admin/users',
+                element: _jsx(UserSearchProvider, {})
+            },
+            {
+                path: 'admin/users/:id',
+                element: _jsx(UserEditor, {})
+            },
+            {
+                path: 'analytics',
+                element: _jsx(AnalyticSearch, {})
+            },
+            {
+                path: 'analytics/:id',
+                element: _jsx(AnalyticDetails, {})
+            },
+            {
+                path: 'help',
+                element: _jsx(HelpDashboard, {})
+            },
+            {
+                path: 'help/search',
+                element: _jsx(SearchDocumentation, {})
+            },
+            {
+                path: 'help/api',
+                element: _jsx(ApiDocumentation, {})
+            },
+            {
+                path: 'help/auth',
+                element: _jsx(AuthDocumentation, {})
+            },
+            {
+                path: 'help/client',
+                element: _jsx(ClientDocumentation, {})
+            },
+            {
+                path: 'help/hit',
+                element: _jsx(HitDocumentation, {})
+            },
+            {
+                path: 'help/retention',
+                element: _jsx(RetentionDocumentation, {})
+            },
+            {
+                path: 'help/templates',
+                element: _jsx(TemplateDocumentation, {})
+            },
+            {
+                path: 'help/actions',
+                element: _jsx(ActionDocumentation, {})
+            },
+            {
+                path: 'help/notebook',
+                element: _jsx(NotebookDocumentation, {})
+            },
+            {
+                path: 'help/overviews',
+                element: _jsx(OverviewDocumentation, {})
+            },
+            {
+                path: 'help/views',
+                element: _jsx(ViewDocumentation, {})
+            },
+            {
+                path: 'settings',
+                element: _jsx(Settings, {})
+            },
+            {
+                path: 'advanced',
+                element: _jsx(QueryBuilder, {})
+            },
+            {
+                path: 'settings',
+                element: _jsx(Settings, {})
+            },
+            {
+                path: 'action',
+                element: _jsx(RoleRoute, { role: "automation_basic" }),
+                children: [
+                    {
+                        index: true,
+                        element: _jsx(ActionSearchProvider, {})
+                    },
+                    {
+                        path: 'integrations',
+                        element: _jsx(Integrations, {})
+                    },
+                    {
+                        path: 'execute',
+                        element: (_jsx(ParameterProvider, { children: _jsx(ActionEditor, {}) }))
+                    },
+                    {
+                        path: ':id',
+                        children: [
+                            {
+                                index: true,
+                                element: _jsx(ActionDetails, {})
+                            },
+                            {
+                                path: 'edit',
+                                element: (_jsx(ParameterProvider, { children: _jsx(ActionEditor, {}) }))
+                            }
+                        ]
+                    }
+                ]
+            },
+            ...howlerPluginStore.routes,
+            {
+                path: '*',
+                element: _jsx(NotFoundPage, {})
+            }
+        ]
+    }
+]);
+const App = () => {
+    return _jsx(RouterProvider, { router: router });
+};
+export default App;

package/components/app/AppContainer.d.ts

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

package/components/app/AppContainer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import FlexVertical from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexVertical';
+import { Outlet } from 'react-router-dom';
+import useTitle from './hooks/useTitle';
+import AppDrawerProvider from './providers/AppDrawerProvider';
+const AppContainer = () => {
+    useTitle();
+    return (_jsx(FlexVertical, { children: _jsx(AppDrawerProvider, { children: _jsx(Outlet, {}) }) }));
+};
+export default AppContainer;

package/components/app/drawers/ApiKeyDrawer.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+type ApiKeyDrawerProps = {
+    onCreated: (newKeyName: string, privs: string[], expiryDate: string, newKey: string) => void;
+};
+declare const ApiKeyDrawer: FC<ApiKeyDrawerProps>;
+export default ApiKeyDrawer;

package/components/app/drawers/ApiKeyDrawer.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, AlertTitle, Button, Checkbox, Divider, FormControl, FormControlLabel, FormGroup, FormLabel, Stack, TextField, Typography } from '@mui/material';
+import { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import dayjs from 'dayjs';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { ApiConfigContext } from '../providers/ApiConfigProvider';
+const ApiKeyDrawer = ({ onCreated }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { showInfoMessage } = useMySnackbar();
+    const { config } = useContext(ApiConfigContext);
+    const [keyName, setKeyName] = useState('');
+    const [privs, setPrivs] = useState([]);
+    const [createdKey, setCreatedKey] = useState('');
+    const [expiryDate, setExpiryDate] = useState(null);
+    const [amount, unit] = useMemo(() => {
+        if (!config) {
+            return [1, 'seconds'];
+        }
+        const { max_apikey_duration_amount: _amount, max_apikey_duration_unit: _unit } = config.configuration.auth;
+        return [_amount, _unit];
+    }, [config]);
+    const maxDate = useMemo(() => {
+        if (!amount || !unit) {
+            return null;
+        }
+        return dayjs().add(amount, unit);
+    }, [amount, unit]);
+    const updatePrivs = useCallback((priv) => (ev) => {
+        if (ev.target.checked) {
+            setPrivs([...privs, priv]);
+        }
+        else {
+            setPrivs(privs.filter(p => p !== priv));
+        }
+    }, [privs]);
+    const onChange = useCallback((ev) => {
+        // Ensure the key doesn't contain any special characters
+        if (!/^[a-z][a-z0-9_]*$/.test(ev.target.value) && ev.target.value !== '') {
+            return;
+        }
+        setKeyName(ev.target.value);
+    }, []);
+    const onSubmit = useCallback(async () => {
+        const result = await dispatchApi(api.auth.apikey.post(keyName, privs, expiryDate?.toISOString()), {
+            throwError: true,
+            showError: true
+        });
+        setCreatedKey(result.apikey);
+        onCreated(result.apikey.split(':')[0], privs, expiryDate.toISOString(), result.apikey);
+    }, [dispatchApi, expiryDate, keyName, onCreated, privs]);
+    const onCopy = useCallback(async () => {
+        await navigator.clipboard.writeText(createdKey);
+        showInfoMessage(t('drawer.apikey.copied'));
+    }, [createdKey, showInfoMessage, t]);
+    useEffect(() => {
+        setExpiryDate(maxDate);
+    }, [maxDate]);
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: { mt: 2 }, children: [_jsx(Typography, { sx: { maxWidth: '500px' }, children: _jsx(Trans, { i18nKey: "app.drawer.user.apikey.description" }) }), amount && unit && dayjs.duration(amount, unit).asSeconds() < dayjs.duration(7, 'days').asSeconds() && (_jsxs(Alert, { severity: "warning", variant: "outlined", sx: { maxWidth: '500px' }, children: [_jsx(AlertTitle, { children: t('app.drawer.user.apikey.limit.title') }), t('app.drawer.user.apikey.limit.description'), " (", maxDate?.format('MMM D HH:mm:ss'), ")"] })), _jsx(TextField, { label: t('app.drawer.user.apikey.field.name'), required: true, fullWidth: true, value: keyName, onChange: onChange }), _jsxs(FormControl, { required: true, children: [_jsx(FormLabel, { component: "legend", children: t('app.drawer.user.apikey.permissions') }), _jsxs(FormGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('R') }), label: t('@cccsaurora/howler-ui/apikey.read') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('W') }), label: t('@cccsaurora/howler-ui/apikey.write') }), _jsx(FormControlLabel, { disabled: privs.includes('E'), control: _jsx(Checkbox, { onChange: updatePrivs('I') }), label: t('@cccsaurora/howler-ui/apikey.impersonate') }), config.configuration.auth.allow_extended_apikeys && (_jsx(FormControlLabel, { disabled: privs.includes('I'), control: _jsx(Checkbox, { onChange: updatePrivs('E') }), label: t('@cccsaurora/howler-ui/apikey.extended') }))] })] }), _jsxs(FormControl, { required: !!maxDate, children: [_jsx(FormLabel, { children: t('app.drawer.user.apikey.expiry.date') }), _jsx(StaticDateTimePicker, { orientation: "landscape", ampm: false, value: expiryDate, onChange: newValue => setExpiryDate(newValue), disablePast: true, maxDate: maxDate, maxTime: maxDate, sx: { backgroundColor: 'transparent', '& > div:first-of-type': { maxWidth: '300px' } } })] }), _jsx(Button, { onClick: onSubmit, disabled: !keyName || (!privs.includes('R') && !privs.includes('W')) || (maxDate && !expiryDate), variant: "outlined", children: _jsx(Trans, { i18nKey: "button.create" }) }), createdKey && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "stretch", children: [_jsx(TextField, { size: "small", value: createdKey, inputProps: { readOnly: true }, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: onCopy, disabled: !createdKey, children: _jsx(Trans, { i18nKey: "button.copy" }) })] })] }))] }) }));
+};
+export default ApiKeyDrawer;

package/components/app/drawers/AppDrawerType.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type AppDrawerProps = {
+    titleKey: string;
+    children: ReactNode;
+    onClosed?: () => void;
+};

package/components/app/drawers/AppDrawerType.js

@@ -0,0 +1 @@
+export {};

package/components/app/drawers/AssignUserDrawer.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+type AssignUserDrawerProps = {
+    assignment: string;
+    ids: string[];
+    onAssigned: (assignment: string) => void;
+    skipSubmit?: boolean;
+};
+declare const AssignUserDrawer: FC<AssignUserDrawerProps>;
+export default AssignUserDrawer;