@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/app/drawers/ApiKeyDrawer.tsx

@@ -1,173 +0,0 @@
-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 type { Privileges } from '@cccsaurora/howler-ui/api/auth/apikey';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import dayjs from 'dayjs';
-import type { APIConfiguration } from '@cccsaurora/howler-ui/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

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

package/components/app/drawers/AssignUserDrawer.tsx

@@ -1,126 +0,0 @@
-import { PersonOff } from '@mui/icons-material';
-import { Autocomplete, Avatar, Box, Button, CircularProgress, Stack, TextField, Typography } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { FC } from 'react';
-import { useCallback, useMemo, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-
-type AssignUserDrawerProps = {
-  assignment: string;
-  ids: string[];
-  onAssigned: (assignment: string) => void;
-  skipSubmit?: boolean;
-};
-
-const AssignUserDrawer: FC<AssignUserDrawerProps> = ({ assignment, ids, onAssigned, skipSubmit = false }) => {
-  const { dispatchApi } = useMyApi();
-  const { showInfoMessage } = useMySnackbar();
-  const { t } = useTranslation();
-
-  const userIds = useMemo(() => new Set(['*']), []);
-  const users = useMyUserList(userIds);
-  const [assignedUserId, setAssignedUserId] = useState(assignment === 'unassigned' ? null : assignment);
-  const [loading, setLoading] = useState(false);
-
-  const onSubmit = useCallback(async () => {
-    if (!skipSubmit) {
-      setLoading(true);
-      try {
-        await Promise.all(
-          ids.map(id =>
-            dispatchApi(api.hit.assign.put(id, { value: assignedUserId !== 'unassigned' ? assignedUserId : null }))
-          )
-        );
-
-        showInfoMessage(t('app.drawer.hit.assignment.success'));
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    onAssigned(assignedUserId);
-  }, [assignedUserId, dispatchApi, ids, onAssigned, showInfoMessage, skipSubmit, t]);
-
-  return (
-    <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
-      <Typography sx={{ maxWidth: '500px' }}>
-        <Trans i18nKey="app.drawer.hit.assignment.description" />
-      </Typography>
-      <Autocomplete
-        disabled={Object.keys(users).length < 1}
-        autoComplete
-        options={[
-          ...Object.values(users),
-          {
-            email: t('app.drawer.hit.assignment.unassigned.email'),
-            name: t('app.drawer.hit.assignment.unassigned.name'),
-            username: 'unassigned'
-          }
-        ]}
-        filterOptions={(_users, { inputValue }) =>
-          _users.filter(
-            u =>
-              u.email.toLowerCase().includes(inputValue.toLowerCase()) ||
-              u.name.toLowerCase().includes(inputValue.toLowerCase())
-          )
-        }
-        onKeyDown={e => e.stopPropagation()}
-        getOptionLabel={(u: HowlerUser) => u.name}
-        isOptionEqualToValue={(u, u2) => u.username === u2.username}
-        renderOption={(props, u) => {
-          return (
-            <li key={u.email} {...props}>
-              <Box
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: 'auto 1fr',
-                  gridTemplateRows: 'auto auto',
-                  gridTemplateAreas: `"profile name"\n"profile email"`,
-                  columnGap: 1.5
-                }}
-              >
-                {u.username !== 'unassigned' ? (
-                  <HowlerAvatar
-                    sx={{ gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }}
-                    userId={u.username}
-                  />
-                ) : (
-                  <Avatar sx={{ gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }}>
-                    <PersonOff />
-                  </Avatar>
-                )}
-                <Typography sx={{ gridArea: 'name' }} variant="body1">
-                  {u.name}
-                </Typography>
-                <Typography sx={{ gridArea: 'email' }} variant="caption">
-                  {u.email}
-                </Typography>
-              </Box>
-            </li>
-          );
-        }}
-        renderInput={params => (
-          <TextField {...params} label={<Trans i18nKey="app.drawer.hit.assignment.autocomplete.label" />} />
-        )}
-        value={users[assignedUserId] ?? null}
-        onChange={(_, value: HowlerUser) => setAssignedUserId(value?.username)}
-      />
-      <Button
-        disabled={!assignedUserId || assignedUserId === assignment || loading}
-        variant="contained"
-        sx={{ alignSelf: 'end' }}
-        onClick={onSubmit}
-      >
-        {loading && <CircularProgress size="24px" sx={{ mr: 1 }} />}
-        <Trans i18nKey="button.save" />
-      </Button>
-    </Stack>
-  );
-};
-
-export default AssignUserDrawer;

package/components/app/drawers/ViewGroupsDrawer.tsx

@@ -1,24 +0,0 @@
-import { Box, Divider, Stack, Typography } from '@mui/material';
-import type { GroupDetailsResponse } from '@cccsaurora/howler-ui/api/user/groups';
-import type { FC } from 'react';
-
-type ViewGroupsDrawerProps = {
-  groups: GroupDetailsResponse;
-};
-
-const ViewGroupsDrawer: FC<ViewGroupsDrawerProps> = ({ groups }) => {
-  return (
-    <Stack direction="column" spacing={1} sx={{ mt: 2 }} divider={<Divider orientation="horizontal" />}>
-      {groups.map(g => (
-        <Box key={g.id}>
-          <Typography variant="body1">{g.name}</Typography>
-          <Typography variant="caption" color="text.disabled">
-            {g.id}
-          </Typography>
-        </Box>
-      ))}
-    </Stack>
-  );
-};
-
-export default ViewGroupsDrawer;

package/components/app/hooks/useMatchers.tsx

@@ -1,107 +0,0 @@
-/* eslint-disable no-console */
-import { has } from 'lodash-es';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
-import { useCallback } from 'react';
-import { useContextSelector } from 'use-context-selector';
-import { HitContext } from '../providers/HitProvider';
-
-const useMatchers = () => {
-  const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-
-  const getMatchingTemplate = useCallback(
-    async (hit: WithMetadata<Hit>) => {
-      if (!hit) {
-        return null;
-      }
-
-      if (has(hit, '__template')) {
-        return hit.__template;
-      }
-
-      // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
-      // should also exist
-      try {
-        return (await getHit(hit.howler.id, true)).__template;
-      } catch (e) {
-        console.warn(e);
-        return null;
-      }
-    },
-    [getHit]
-  );
-
-  const getMatchingOverview = useCallback(
-    async (hit: WithMetadata<Hit>) => {
-      if (!hit) {
-        return null;
-      }
-
-      if (has(hit, '__overview')) {
-        return hit.__overview;
-      }
-
-      // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
-      // should also exist
-      try {
-        return (await getHit(hit.howler.id, true)).__overview;
-      } catch (e) {
-        console.warn(e);
-        return null;
-      }
-    },
-    [getHit]
-  );
-
-  const getMatchingDossiers = useCallback(
-    async (hit: WithMetadata<Hit>) => {
-      if (!hit) {
-        return null;
-      }
-
-      if (has(hit, '__dossiers')) {
-        return hit.__dossiers;
-      }
-
-      // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
-      // should also exist
-      try {
-        return (await getHit(hit.howler.id, true)).__dossiers ?? [];
-      } catch (e) {
-        console.warn(e);
-        return [];
-      }
-    },
-    [getHit]
-  );
-
-  const getMatchingAnalytic = useCallback(
-    async (hit: WithMetadata<Hit>) => {
-      if (!hit) {
-        return null;
-      }
-
-      if (has(hit, '__analytic')) {
-        return hit.__analytic;
-      }
-
-      // This is a fallback in case metadata is not included.
-      try {
-        return (await getHit(hit.howler.id, true)).__analytic;
-      } catch (e) {
-        console.warn(e);
-        return null;
-      }
-    },
-    [getHit]
-  );
-
-  return {
-    getMatchingDossiers,
-    getMatchingOverview,
-    getMatchingTemplate,
-    getMatchingAnalytic
-  };
-};
-
-export default useMatchers;

package/components/app/hooks/useTitle.tsx

@@ -1,77 +0,0 @@
-import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
-import { capitalize } from 'lodash-es';
-import { useCallback, useContext, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
-import { AnalyticContext } from '../providers/AnalyticProvider';
-import { HitContext } from '../providers/HitProvider';
-
-const useTitle = () => {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const params = useParams();
-  const searchParams = useSearchParams()[0];
-  const sitemap = useMySitemap();
-
-  const { getAnalyticFromId } = useContext(AnalyticContext);
-
-  const hits = useContextSelector(HitContext, ctx => ctx.hits);
-
-  const setTitle = useCallback((title: string) => {
-    document.querySelector('title').innerHTML = title;
-  }, []);
-
-  const runChecks = useCallback(async () => {
-    const searchType = location.pathname.replace(/^\/(\w+)(\/.+)?$/, '$1').replace(/s$/, '');
-
-    if (searchType === 'analytic') {
-      if (params.id) {
-        const analytic = await getAnalyticFromId(params.id);
-
-        if (analytic) {
-          setTitle(`${t('route.analytics.view')} - ${analytic.name}`);
-        } else {
-          setTitle(`${t('route.analytics.view')}`);
-        }
-      } else {
-        setTitle(`Howler - ${t('route.analytics')}`);
-      }
-    } else if (searchType === 'hit' && params.id) {
-      const hit = hits[params.id];
-
-      let newTitle = `${capitalize(hit.howler.escalation)} - ${hit.howler.analytic}`;
-      if (hit.howler.detection) {
-        newTitle += `: ${hit.howler.detection}`;
-      }
-
-      setTitle(newTitle);
-    } else if (searchType === 'template' && location.pathname.endsWith('view') && searchParams.has('analytic')) {
-      let title = t('route.templates.view');
-
-      if (searchParams.has('analytic')) {
-        title += ` - ${searchParams.get('analytic')}`;
-      } else if (!searchParams.has('detection')) {
-        title = `Howler - ${title}`;
-      }
-
-      if (searchParams.has('detection')) {
-        title += `: ${searchParams.get('detection')}`;
-      }
-
-      setTitle(title);
-    } else {
-      const matchingRoute = sitemap.routes.find(_route => _route.path === location.pathname);
-
-      if (matchingRoute) {
-        setTitle(`Howler - ${t(matchingRoute.title)}`);
-      }
-    }
-  }, [getAnalyticFromId, location.pathname, params.id, searchParams, hits, setTitle, sitemap.routes, t]);
-
-  useEffect(() => {
-    runChecks();
-  }, [runChecks]);
-};
-
-export default useTitle;

package/components/app/providers/AnalyticProvider.tsx

@@ -1,87 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import { createContext, useCallback, useEffect, useState, type FC, type PropsWithChildren } from 'react';
-
-interface AnalyticContextType {
-  ready: boolean;
-  analytics: Analytic[];
-  getAnalyticFromId: (id: string) => Promise<Analytic>;
-}
-
-export const AnalyticContext = createContext<AnalyticContextType>(null);
-
-/**
- * A set of promises for each analytic search. This is to stop several identical
- * requests from going due to issues with react state updates not happening fast enough
- */
-const PROMISES: { [index: string]: Promise<HowlerSearchResponse<Analytic>> } = {};
-
-const AnalyticProvider: FC<PropsWithChildren> = ({ children }) => {
-  const appUser = useAppUser<HowlerUser>();
-  const [fetching, setFetching] = useState(false);
-  const [ready, setReady] = useState(false);
-  const [analytics, setAnalytics] = useState<Analytic[]>([]);
-
-  const fetchAnalytics = useCallback(async () => {
-    if (ready || fetching) {
-      return;
-    }
-
-    try {
-      setFetching(true);
-
-      setAnalytics(((await api.analytic.get()) ?? []) as Analytic[]);
-      setReady(true);
-    } finally {
-      setFetching(false);
-    }
-  }, [ready, fetching]);
-
-  useEffect(() => {
-    if (!ready && appUser.isReady()) {
-      fetchAnalytics();
-    }
-  }, [ready, appUser, fetchAnalytics]);
-
-  const getAnalyticFromId = useCallback(
-    async (id: string) => {
-      const candidate = analytics?.find(_analytic => _analytic.analytic_id === id);
-      if (candidate) {
-        return candidate;
-      }
-
-      // We check to see if there's already a request in progress
-      if (!PROMISES[id]) {
-        PROMISES[id] = api.search.analytic.post({
-          query: `analytic_id:${id}`
-        });
-      }
-
-      try {
-        const result = await PROMISES[id];
-
-        const analytic = result.items?.[0];
-
-        if (analytic) {
-          setAnalytics([...(analytics ?? []), analytic]);
-          return analytic;
-        }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
-      }
-
-      return null;
-    },
-    [analytics]
-  );
-
-  return (
-    <AnalyticContext.Provider value={{ analytics, ready, getAnalyticFromId }}>{children}</AnalyticContext.Provider>
-  );
-};
-
-export default AnalyticProvider;

package/components/app/providers/ApiConfigProvider.tsx

@@ -1,31 +0,0 @@
-import type { ApiType } from '@cccsaurora/howler-ui/models/entities/generated/ApiType';
-import type { FC, PropsWithChildren } from 'react';
-import { createContext, useMemo, useState } from 'react';
-
-export type ApiConfigContextType = {
-  config: ApiType;
-  setConfig: (config: ApiType) => void;
-};
-
-export const ApiConfigContext = createContext<ApiConfigContextType>(null);
-
-const ApiConfigProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [config, setConfig] = useState<ApiType>({
-    indexes: null,
-    lookups: null,
-    configuration: null,
-    c12nDef: null,
-    mapping: null
-  });
-
-  const context = useMemo(
-    () => ({
-      config,
-      setConfig
-    }),
-    [config, setConfig]
-  );
-
-  return <ApiConfigContext.Provider value={context}>{children}</ApiConfigContext.Provider>;
-};
-export default ApiConfigProvider;

package/components/app/providers/AppDrawerProvider.tsx

@@ -1,54 +0,0 @@
-import { Drawer, Typography } from '@mui/material';
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages/PageContent';
-import type { FC, PropsWithChildren } from 'react';
-import { createContext, useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { AppDrawerProps } from '../drawers/AppDrawerType';
-
-export type AppDrawerContextState = {
-  close: () => void;
-  open: (props: AppDrawerProps) => void;
-  props: AppDrawerProps;
-};
-
-const APPDRAWER_INIT_STATE: AppDrawerContextState = {
-  props: { titleKey: null, children: null, onClosed: () => null },
-  close: () => null,
-  open: () => null
-};
-
-export const AppDrawerContext = createContext<AppDrawerContextState>(APPDRAWER_INIT_STATE);
-
-const AppDrawerProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { t } = useTranslation();
-
-  const [isOpen, setOpen] = useState<boolean>(false);
-  const [props, setProps] = useState<AppDrawerProps>(APPDRAWER_INIT_STATE.props);
-
-  const close = useCallback(() => {
-    setOpen(false);
-    if (props.onClosed) {
-      props.onClosed();
-    }
-  }, [props]);
-
-  const open = useCallback((_props: AppDrawerProps) => {
-    setOpen(true);
-    setProps(_props);
-  }, []);
-
-  const context = useMemo(() => ({ props, open, close }), [props, open, close]);
-
-  return (
-    <AppDrawerContext.Provider value={context}>
-      {children}
-      <Drawer anchor="right" open={isOpen} PaperProps={{ sx: { minWidth: 500 } }} onClose={close}>
-        <PageContent>
-          <Typography variant="h4">{t(props.titleKey)}</Typography>
-          {props.children}
-        </PageContent>
-      </Drawer>
-    </AppDrawerContext.Provider>
-  );
-};
-export default AppDrawerProvider;