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

package/components/app/App.tsx

@@ -0,0 +1,434 @@
+import { loader } from '@monaco-editor/react';
+import api from 'api';
+import type { AppPreferenceConfigs, AppSiteMapConfigs, AppThemeConfigs } from 'commons/components/app/AppConfigs';
+import AppProvider from 'commons/components/app/AppProvider';
+import type { AppSearchService } from 'commons/components/app/AppSearchService';
+import LayoutSkeleton from 'commons/components/app/AppSkeleton';
+import type { AppUserService } from 'commons/components/app/AppUserService';
+import { useAppLayout, useAppSwitcher, useAppUser } from 'commons/components/app/hooks';
+import Modal from 'components/elements/display/Modal';
+import useMyApi from 'components/hooks/useMyApi';
+import useMyLocalStorage from 'components/hooks/useMyLocalStorage';
+import useMyPreferences from 'components/hooks/useMyPreferences';
+import useMySitemap from 'components/hooks/useMySitemap';
+import useMyTheme from 'components/hooks/useMyTheme';
+import useMyUser from 'components/hooks/useMyUser';
+import LoginScreen from 'components/logins/Login';
+import useLogin from 'components/logins/hooks/useLogin';
+import NotFoundPage from 'components/routes/404';
+import ErrorBoundary from 'components/routes/ErrorBoundary';
+import Logout from 'components/routes/Logout';
+import ActionEditor from 'components/routes/action/edit/ActionEditor';
+import ActionDetails from 'components/routes/action/view/ActionDetails';
+import ActionSearchProvider from 'components/routes/action/view/ActionSearch';
+import Integrations from 'components/routes/action/view/Integrations';
+import UserEditor from 'components/routes/admin/users/UserEditor';
+import UserSearchProvider from 'components/routes/admin/users/UserSearch';
+import QueryBuilder from 'components/routes/advanced/QueryBuilder';
+import AnalyticDetails from 'components/routes/analytics/AnalyticDetails';
+import AnalyticSearch from 'components/routes/analytics/AnalyticSearch';
+import DossierEditor from 'components/routes/dossiers/DossierEditor';
+import Dossiers from 'components/routes/dossiers/Dossiers';
+import ActionDocumentation from 'components/routes/help/ActionDocumentation';
+import ApiDocumentation from 'components/routes/help/ApiDocumentation';
+import AuthDocumentation from 'components/routes/help/AuthDocumentation';
+import ClientDocumentation from 'components/routes/help/ClientDocumentation';
+import HelpDashboard from 'components/routes/help/Help';
+import HitDocumentation from 'components/routes/help/HitDocumentation';
+import NotebookDocumentation from 'components/routes/help/NotebookDocumentation';
+import OverviewDocumentation from 'components/routes/help/OverviewDocumentation';
+import RetentionDocumentation from 'components/routes/help/RetentionDocumentation';
+import SearchDocumentation from 'components/routes/help/SearchDocumentation';
+import TemplateDocumentation from 'components/routes/help/TemplateDocumentation';
+import ViewDocumentation from 'components/routes/help/ViewDocumentation';
+import HitBrowser from 'components/routes/hits/search/HitBrowser';
+import HitViewer from 'components/routes/hits/view/HitViewer';
+import Home from 'components/routes/home';
+import OverviewViewer from 'components/routes/overviews/OverviewViewer';
+import Overviews from 'components/routes/overviews/Overviews';
+import Settings from 'components/routes/settings/Settings';
+import TemplateViewer from 'components/routes/templates/TemplateViewer';
+import Templates from 'components/routes/templates/Templates';
+import ViewComposer from 'components/routes/views/ViewComposer';
+import Views from 'components/routes/views/Views';
+import i18n from 'i18n';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { Hit } from 'models/entities/generated/Hit';
+import * as monaco from 'monaco-editor';
+import howlerPluginStore from 'plugins/store';
+import { useContext, useEffect, type FC, type PropsWithChildren } 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 '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<HowlerUser>();
+
+  if (appUser.user?.roles?.includes(role)) {
+    return <Outlet />;
+  }
+
+  return <NotFoundPage />;
+};
+
+// Your application's initialization flow.
+const MyApp: FC = () => {
+  // From this point on, we use the commons' hook.
+  const { getUser } = useLogin();
+  const { dispatchApi } = useMyApi();
+  const appLayout = useAppLayout();
+  const appUser = useAppUser<HowlerUser>();
+  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' ? (
+    <AppContainer />
+  ) : (
+    <LayoutSkeleton />
+  );
+};
+
+const MyAppProvider: FC<PropsWithChildren> = ({ children }) => {
+  const myPreferences: AppPreferenceConfigs = useMyPreferences();
+  const myTheme: AppThemeConfigs = useMyTheme();
+  const mySitemap: AppSiteMapConfigs = useMySitemap();
+  const myUser: AppUserService<HowlerUser> = useMyUser();
+  const mySearch: AppSearchService<Hit> = useMySearch();
+
+  return (
+    <ErrorBoundary>
+      <AppProvider preferences={myPreferences} theme={myTheme} sitemap={mySitemap} user={myUser} search={mySearch}>
+        <CustomPluginProvider>
+          <ErrorBoundary>
+            <ErrorBoundary>
+              <ViewProvider>
+                <AvatarProvider>
+                  <ModalProvider>
+                    <FieldProvider>
+                      <LocalStorageProvider>
+                        <SocketProvider>
+                          <HitProvider>
+                            <OverviewProvider>
+                              <AnalyticProvider>
+                                <FavouriteProvider>
+                                  <UserListProvider>{children}</UserListProvider>
+                                </FavouriteProvider>
+                              </AnalyticProvider>
+                            </OverviewProvider>
+                          </HitProvider>
+                        </SocketProvider>
+                      </LocalStorageProvider>
+                    </FieldProvider>
+                  </ModalProvider>
+                </AvatarProvider>
+              </ViewProvider>
+            </ErrorBoundary>
+          </ErrorBoundary>
+        </CustomPluginProvider>
+      </AppProvider>
+    </ErrorBoundary>
+  );
+};
+
+const AppProviderWrapper = () => {
+  return (
+    <I18nextProvider i18n={i18n as any} defaultNS="translation">
+      <ApiConfigProvider>
+        <PluginProvider pluginStore={howlerPluginStore.pluginStore}>
+          <MyAppProvider>
+            <MyApp />
+            <Modal />
+          </MyAppProvider>
+        </PluginProvider>
+      </ApiConfigProvider>
+    </I18nextProvider>
+  );
+};
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <AppProviderWrapper />,
+    children: [
+      {
+        path: 'login',
+        element: <LoginScreen />
+      },
+      {
+        path: 'logout',
+        element: <Logout />
+      },
+      {
+        index: true,
+        element: <Home />
+      },
+      {
+        path: 'hits',
+        element: <HitBrowser />
+      },
+      {
+        path: 'search',
+        element: <HitBrowser />
+      },
+      {
+        path: 'hits/:id',
+        element: <HitViewer />
+      },
+      {
+        path: 'bundles/:id',
+        element: <HitBrowser />
+      },
+      {
+        path: 'templates',
+        element: <Templates />
+      },
+      {
+        path: 'templates/view',
+        element: <TemplateViewer />
+      },
+      {
+        path: 'overviews',
+        element: <Overviews />
+      },
+      {
+        path: 'overviews/view',
+        element: <OverviewViewer />
+      },
+      {
+        path: 'dossiers',
+        element: <Dossiers />
+      },
+      {
+        path: 'dossiers/create',
+        element: (
+          <ParameterProvider>
+            <DossierEditor />
+          </ParameterProvider>
+        )
+      },
+      {
+        path: 'dossiers/:id/edit',
+        element: (
+          <ParameterProvider>
+            <DossierEditor />
+          </ParameterProvider>
+        )
+      },
+      {
+        path: 'views',
+        element: <Views />
+      },
+      {
+        path: 'views/create',
+        element: (
+          <ParameterProvider>
+            <ViewComposer />
+          </ParameterProvider>
+        )
+      },
+      {
+        path: 'views/:id',
+        element: <HitBrowser />
+      },
+      {
+        path: 'views/:id/edit',
+        element: (
+          <ParameterProvider>
+            <ViewComposer />
+          </ParameterProvider>
+        )
+      },
+      {
+        path: 'admin/users',
+        element: <UserSearchProvider />
+      },
+      {
+        path: 'admin/users/:id',
+        element: <UserEditor />
+      },
+      {
+        path: 'analytics',
+        element: <AnalyticSearch />
+      },
+      {
+        path: 'analytics/:id',
+        element: <AnalyticDetails />
+      },
+      {
+        path: 'help',
+        element: <HelpDashboard />
+      },
+      {
+        path: 'help/search',
+        element: <SearchDocumentation />
+      },
+      {
+        path: 'help/api',
+        element: <ApiDocumentation />
+      },
+      {
+        path: 'help/auth',
+        element: <AuthDocumentation />
+      },
+      {
+        path: 'help/client',
+        element: <ClientDocumentation />
+      },
+      {
+        path: 'help/hit',
+        element: <HitDocumentation />
+      },
+      {
+        path: 'help/retention',
+        element: <RetentionDocumentation />
+      },
+      {
+        path: 'help/templates',
+        element: <TemplateDocumentation />
+      },
+      {
+        path: 'help/actions',
+        element: <ActionDocumentation />
+      },
+      {
+        path: 'help/notebook',
+        element: <NotebookDocumentation />
+      },
+      {
+        path: 'help/overviews',
+        element: <OverviewDocumentation />
+      },
+      {
+        path: 'help/views',
+        element: <ViewDocumentation />
+      },
+      {
+        path: 'settings',
+        element: <Settings />
+      },
+      {
+        path: 'advanced',
+        element: <QueryBuilder />
+      },
+      {
+        path: 'settings',
+        element: <Settings />
+      },
+      {
+        path: 'action',
+        element: <RoleRoute role="automation_basic" />,
+        children: [
+          {
+            index: true,
+            element: <ActionSearchProvider />
+          },
+          {
+            path: 'integrations',
+            element: <Integrations />
+          },
+          {
+            path: 'execute',
+            element: (
+              <ParameterProvider>
+                <ActionEditor />
+              </ParameterProvider>
+            )
+          },
+          {
+            path: ':id',
+            children: [
+              {
+                index: true,
+                element: <ActionDetails />
+              },
+              {
+                path: 'edit',
+                element: (
+                  <ParameterProvider>
+                    <ActionEditor />
+                  </ParameterProvider>
+                )
+              }
+            ]
+          }
+        ]
+      },
+      ...howlerPluginStore.routes,
+      {
+        path: '*',
+        element: <NotFoundPage />
+      }
+    ]
+  }
+]);
+
+const App: FC = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default App;

package/components/app/AppContainer.tsx

@@ -0,0 +1,19 @@
+import FlexVertical from 'components/elements/addons/layout/FlexVertical';
+import type { FC } from 'react';
+import { Outlet } from 'react-router-dom';
+import useTitle from './hooks/useTitle';
+import AppDrawerProvider from './providers/AppDrawerProvider';
+
+const AppContainer: FC = () => {
+  useTitle();
+
+  return (
+    <FlexVertical>
+      <AppDrawerProvider>
+        <Outlet />
+      </AppDrawerProvider>
+    </FlexVertical>
+  );
+};
+
+export default AppContainer;

package/components/app/drawers/ApiKeyDrawer.tsx

@@ -0,0 +1,173 @@
+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 'api';
+import type { Privileges } from 'api/auth/apikey';
+import useMyApi from 'components/hooks/useMyApi';
+import useMySnackbar from 'components/hooks/useMySnackbar';
+import dayjs from 'dayjs';
+import type { APIConfiguration } from 'models/entities/generated/ApiType';
+import type { ChangeEvent, FC } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { ApiConfigContext } from '../providers/ApiConfigProvider';
+
+type ApiKeyDrawerProps = {
+  onCreated: (newKeyName: string, privs: string[], expiryDate: string, newKey: string) => void;
+};
+
+const ApiKeyDrawer: FC<ApiKeyDrawerProps> = ({ onCreated }) => {
+  const { t } = useTranslation();
+  const { dispatchApi } = useMyApi();
+  const { showInfoMessage } = useMySnackbar();
+  const { config } = useContext(ApiConfigContext);
+
+  const [keyName, setKeyName] = useState('');
+  const [privs, setPrivs] = useState<Privileges[]>([]);
+  const [createdKey, setCreatedKey] = useState('');
+  const [expiryDate, setExpiryDate] = useState<dayjs.Dayjs>(null);
+
+  const [amount, unit] = useMemo<[number, APIConfiguration['auth']['max_apikey_duration_unit']]>(() => {
+    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: Privileges) => (ev: ChangeEvent<HTMLInputElement>) => {
+      if (ev.target.checked) {
+        setPrivs([...privs, priv]);
+      } else {
+        setPrivs(privs.filter(p => p !== priv));
+      }
+    },
+    [privs]
+  );
+
+  const onChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
+    // 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 (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
+        <Typography sx={{ maxWidth: '500px' }}>
+          <Trans i18nKey="app.drawer.user.apikey.description" />
+        </Typography>
+        {amount && unit && dayjs.duration(amount, unit).asSeconds() < dayjs.duration(7, 'days').asSeconds() && (
+          <Alert severity="warning" variant="outlined" sx={{ maxWidth: '500px' }}>
+            <AlertTitle>{t('app.drawer.user.apikey.limit.title')}</AlertTitle>
+            {t('app.drawer.user.apikey.limit.description')} ({maxDate?.format('MMM D HH:mm:ss')})
+          </Alert>
+        )}
+        <TextField
+          label={t('app.drawer.user.apikey.field.name')}
+          required
+          fullWidth
+          value={keyName}
+          onChange={onChange}
+        />
+        <FormControl required>
+          <FormLabel component="legend">{t('app.drawer.user.apikey.permissions')}</FormLabel>
+          <FormGroup sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+            <FormControlLabel control={<Checkbox onChange={updatePrivs('R')} />} label={t('apikey.read')} />
+            <FormControlLabel control={<Checkbox onChange={updatePrivs('W')} />} label={t('apikey.write')} />
+            <FormControlLabel
+              disabled={privs.includes('E')}
+              control={<Checkbox onChange={updatePrivs('I')} />}
+              label={t('apikey.impersonate')}
+            />
+            {config.configuration.auth.allow_extended_apikeys && (
+              <FormControlLabel
+                disabled={privs.includes('I')}
+                control={<Checkbox onChange={updatePrivs('E')} />}
+                label={t('apikey.extended')}
+              />
+            )}
+          </FormGroup>
+        </FormControl>
+        <FormControl required={!!maxDate}>
+          <FormLabel>{t('app.drawer.user.apikey.expiry.date')}</FormLabel>
+          <StaticDateTimePicker
+            orientation="landscape"
+            ampm={false}
+            value={expiryDate}
+            onChange={newValue => setExpiryDate(newValue)}
+            disablePast
+            maxDate={maxDate}
+            maxTime={maxDate}
+            sx={{ backgroundColor: 'transparent', '& > div:first-of-type': { maxWidth: '300px' } }}
+          />
+        </FormControl>
+        <Button
+          onClick={onSubmit}
+          disabled={!keyName || (!privs.includes('R') && !privs.includes('W')) || (maxDate && !expiryDate)}
+          variant="outlined"
+        >
+          <Trans i18nKey="button.create" />
+        </Button>
+        {createdKey && (
+          <>
+            <Divider orientation="horizontal" />
+            <Stack direction="row" spacing={1} alignItems="stretch">
+              <TextField size="small" value={createdKey} inputProps={{ readOnly: true }} fullWidth />
+              <Button variant="outlined" onClick={onCopy} disabled={!createdKey}>
+                <Trans i18nKey="button.copy" />
+              </Button>
+            </Stack>
+          </>
+        )}
+      </Stack>
+    </LocalizationProvider>
+  );
+};
+
+export default ApiKeyDrawer;

package/components/app/drawers/AppDrawerType.ts

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