@gen-epix/ui 1.15.1 → 1.16.0

package/src/components/ui/HomePageTrends/HomePageTrends.tsx

@@ -1,312 +0,0 @@
-import {
-  Typography,
-  Button,
-  Box,
-  Skeleton,
-  useTheme,
-} from '@mui/material';
-import {
-  useCallback,
-  useMemo,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import round from 'lodash/round';
-
-import type {
-  CaseStats,
-  EpiFilter,
-  RetrieveCaseTypeStatsRequestBody,
-  TypedDatetimeRangeFilter,
-} from '../../../api';
-import {
-  CaseApi,
-  CommandName,
-  PermissionType,
-} from '../../../api';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { RouterManager } from '../../../classes/managers/RouterManager';
-import { useCaseSetsQuery } from '../../../dataHooks/useCaseSetsQuery';
-import { useCaseTypeMapQuery } from '../../../dataHooks/useCaseTypesQuery';
-import { QUERY_KEY } from '../../../models/query';
-import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { ResponseHandler } from '../ResponseHandler';
-import { useArray } from '../../../hooks/useArray';
-import { AxiosUtil } from '../../../utils/AxiosUtil';
-import { withPermissions } from '../../../hoc/withPermissions';
-import { useQueryMemo } from '../../../hooks/useQueryMemo';
-
-import { HomePageTrendCard } from './HomePageTrendCard';
-
-type Statistic = {
-  header: string;
-  value: number;
-  diffPercentage: number;
-  callback?: () => void;
-  callbackLabel?: string;
-};
-
-type CaseStatsWithDiff = CaseStats & {
-  diffPercentage: number;
-};
-
-export const HomePageTrends = withPermissions(() => {
-  const theme = useTheme();
-  const { t } = useTranslation();
-
-  const dateTimeRangeFilter = useMemo<TypedDatetimeRangeFilter>(() => ({
-    type: 'DATETIME_RANGE',
-    upper_bound: ConfigManager.instance.config.trends.homePage.getSinceDate(),
-    upper_bound_censor: '<=',
-  } satisfies TypedDatetimeRangeFilter), []);
-
-  const caseSetQueryFilter = useMemo<EpiFilter>(() => ({
-    type: 'DATETIME_RANGE',
-    upper_bound: ConfigManager.instance.config.trends.homePage.getSinceDate(),
-    upper_bound_censor: '<=',
-    key: 'created_at',
-  } satisfies EpiFilter), []);
-
-  const caseTypeStatsQueryNow = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_TYPE_STATS),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.retrieveCaseTypeStats({}, { signal });
-      return response.data;
-    },
-  });
-
-  const retrieveTypeCaseStatsRequestBody = useMemo<RetrieveCaseTypeStatsRequestBody>(() => {
-    if (!caseTypeStatsQueryNow.data) {
-      return undefined;
-    }
-    return {
-      datetime_range_filter: dateTimeRangeFilter,
-      case_type_ids: caseTypeStatsQueryNow.data?.filter(stat => stat.n_cases > 0).map(stat => stat.case_type_id),
-    };
-  }, [dateTimeRangeFilter, caseTypeStatsQueryNow.data]);
-
-  const caseTypeStatsQueryPast = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_TYPE_STATS, retrieveTypeCaseStatsRequestBody ?? {}),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.retrieveCaseTypeStats(retrieveTypeCaseStatsRequestBody ?? {}, { signal });
-      return response.data;
-    },
-    enabled: !!retrieveTypeCaseStatsRequestBody,
-  });
-  const caseSetsNowQuery = useCaseSetsQuery();
-  const caseTypeMapQuery = useCaseTypeMapQuery();
-
-  const { data: caseSetsThenData, ...caseSetsThenQuery } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SETS, caseSetQueryFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetsPostQuery(caseSetQueryFilter, { signal });
-      return response.data;
-    },
-  });
-
-  const loadables = useArray([
-    caseTypeStatsQueryNow,
-    caseTypeStatsQueryPast,
-    caseTypeMapQuery,
-    caseSetsNowQuery,
-    caseSetsThenQuery,
-  ]);
-
-  const statistics = useMemo<Statistic[]>(() => {
-    const s: Statistic[] = [];
-
-    if (loadables.some(loadable => loadable.isLoading) || loadables.some(loadable => loadable.error) || !caseTypeStatsQueryNow.data?.length || !caseTypeStatsQueryPast.data?.length) {
-      return s;
-    }
-
-    const nowTotalCases = caseTypeStatsQueryNow.data?.reduce((acc, stat) => acc + stat.n_cases, 0) ?? 0;
-    const thenTotalCases = caseTypeStatsQueryPast.data?.reduce((acc, stat) => acc + stat.n_cases, 0) ?? 0;
-
-    s.push(
-      {
-        header: 'Cases',
-        value: nowTotalCases,
-        diffPercentage: round((nowTotalCases - thenTotalCases) / (thenTotalCases || 1) * 100, 2),
-        callbackLabel: t`View all cases`,
-        callback: async () => {
-          await RouterManager.instance.router.navigate('/cases');
-        },
-      },
-    );
-
-    const numberOfCaseSetsNow = caseSetsNowQuery.data.length;
-    const numberOfCaseSetsThen = caseSetsThenData.length;
-    s.push(
-      {
-        header: 'Events',
-        value: numberOfCaseSetsNow,
-        diffPercentage: round((numberOfCaseSetsNow - numberOfCaseSetsThen) / (numberOfCaseSetsThen || 1) * 100, 2),
-        callbackLabel: t`View all events`,
-        callback: async () => {
-          await RouterManager.instance.router.navigate('/events');
-        },
-      },
-    );
-
-    const caseStatsThenByCaseTypeId = new Map<string, CaseStats>(caseTypeStatsQueryPast.data?.map(stat => [stat.case_type_id, stat]));
-    const sortedStats = caseTypeStatsQueryNow?.data?.map<CaseStatsWithDiff>(stat => {
-      const nowNCases = stat.n_cases;
-      const thenNCases = caseStatsThenByCaseTypeId.get(stat.case_type_id)?.n_cases ?? 0;
-      const diff = nowNCases - thenNCases;
-      let diffPercentage: number;
-      if (thenNCases > 0) {
-        diffPercentage = round((diff / thenNCases) * 100, 2);
-      } else {
-        diffPercentage = 0;
-      }
-      return ({
-        ...stat,
-        diffPercentage,
-      });
-    }).sort((a, b) => b.diffPercentage - a.diffPercentage);
-
-    for (let i = 0; i < 6; i += 1) {
-      if (sortedStats?.[i]) {
-        const caseType = caseTypeMapQuery.map?.get(sortedStats?.[i].case_type_id ?? '');
-        const caseTypeName = caseType?.name;
-        if (caseTypeName) {
-          s.push(
-            {
-              header: t('{{caseTypeName}} cases', { number: i + 1, caseTypeName }),
-              value: sortedStats[i].n_cases,
-              diffPercentage: sortedStats[i].diffPercentage,
-              callbackLabel: t`View cases`,
-              callback: async () => {
-                await RouterManager.instance.router.navigate(CaseTypeUtil.createCaseTypeLink(caseType));
-              },
-            },
-          );
-        }
-      }
-    }
-
-    return s;
-  }, [caseSetsNowQuery.data?.length, caseSetsThenData?.length, caseTypeMapQuery.map, caseTypeStatsQueryNow.data, caseTypeStatsQueryPast.data, loadables, t]);
-
-  const onViewMoreTrendsButtonClick = useCallback(async () => {
-    await RouterManager.instance.router.navigate('/trends');
-  }, []);
-
-  if (loadables.some(loadable => loadable.error && AxiosUtil.isAxiosForbiddenError(loadable.error))) {
-    return null;
-  }
-
-  return (
-    <Box>
-      <Box marginBottom={1}>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Box>
-            <Typography
-              variant={'h2'}
-            >
-              {t`Trends summary`}
-            </Typography>
-          </Box>
-          <Box>
-            <Button
-              disabled
-              color={'primary'}
-              variant={'outlined'}
-              onClick={onViewMoreTrendsButtonClick}
-            >
-              {t`View more trends`}
-            </Button>
-          </Box>
-        </Box>
-      </Box>
-      <ResponseHandler
-        inlineSpinner
-        shouldHideActionButtons
-        loadables={loadables}
-        loadingContent={(
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(1, 1fr)',
-              [theme.breakpoints.up('sm')]: {
-                gridTemplateColumns: 'repeat(2, 1fr)',
-              },
-              [theme.breakpoints.up('md')]: {
-                gridTemplateColumns: 'repeat(4, 1fr)',
-              },
-              gap: 2,
-              marginBottom: 2,
-            }}
-          >
-            {[...Array<string>(8)].map((_, index) => (
-              <Box
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  height: 165.75,
-                }}
-              >
-                <Skeleton
-                  animation={'pulse'}
-                  height={'100%'}
-                  variant={'rounded'}
-                  width={'100%'}
-                />
-              </Box>
-            ))}
-          </Box>
-        )}
-      >
-        {statistics.length === 0 && (
-          <Box marginY={2}>
-            <Typography>
-              {t`No trends available.`}
-            </Typography>
-          </Box>
-        )}
-        {statistics.length > 0 && (
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(1, 1fr)',
-              [theme.breakpoints.up('sm')]: {
-                gridTemplateColumns: 'repeat(2, 1fr)',
-              },
-              [theme.breakpoints.up('md')]: {
-                gridTemplateColumns: 'repeat(4, 1fr)',
-              },
-              gap: 2,
-              marginBottom: 2,
-            }}
-          >
-            {statistics.map(statistic => (
-              <HomePageTrendCard
-                key={statistic.header}
-                callback={statistic.callback}
-                callbackLabel={statistic.callbackLabel}
-                diffPercentage={statistic.diffPercentage}
-                header={statistic.header}
-                sinceLabel={ConfigManager.instance.config.trends.homePage.getSinceLabel(t)}
-                value={statistic.value}
-              />
-            ))}
-          </Box>
-        )}
-      </ResponseHandler>
-    </Box>
-  );
-}, {
-  requiredPermissions: [
-    { command_name: CommandName.RetrieveCaseStatsCommand, permission_type: PermissionType.EXECUTE },
-    { command_name: CommandName.CaseSetCrudCommand, permission_type: PermissionType.READ },
-    { command_name: CommandName.CaseTypeCrudCommand, permission_type: PermissionType.READ },
-  ] });

package/src/components/ui/HomePageTrends/index.ts

@@ -1 +0,0 @@
-export * from './HomePageTrends';

package/src/components/ui/LicensesDialog/LicensesDialog.tsx

@@ -1,231 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import type {
-  ReactElement,
-  ReactNode,
-} from 'react';
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  Avatar,
-  Box,
-  Button,
-  Divider,
-  IconButton,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Typography,
-} from '@mui/material';
-import FolderIcon from '@mui/icons-material/Folder';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import axios from 'axios';
-
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { WindowManager } from '../../../classes/managers/WindowManager';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import { ResponseHandler } from '../ResponseHandler';
-import {
-  SystemApi,
-  type PackageMetadata,
-} from '../../../api';
-import { QUERY_KEY } from '../../../models/query';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { useQueryMemo } from '../../../hooks/useQueryMemo';
-
-
-export interface LicensesDialogOpenProps {
-  //
-}
-
-export interface LicensesDialogProps extends WithDialogRenderProps<LicensesDialogOpenProps> {
-  //
-}
-
-export type LicensesDialogRefMethods = WithDialogRefMethods<LicensesDialogProps, LicensesDialogOpenProps>;
-
-
-export const LicensesDialog = withDialog<LicensesDialogProps, LicensesDialogOpenProps>((
-  {
-    onTitleChange,
-    onActionsChange,
-    onClose,
-    dialogContentRef,
-  }: LicensesDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-  const [item, setItem] = useState<PackageMetadata>(null);
-
-  const { LicenseInformation } = ConfigManager.instance.config;
-
-  const { isLoading: isFrontendLicensesLoading, error: frontendLicensesError, data: frontendLicenses } = useQueryMemo({
-    queryKey: ['LICENSES.JSON'],
-    queryFn: async ({ signal }) => {
-      return (await axios.get('/licenses.json', {
-        signal,
-      })).data as PackageMetadata[];
-    },
-  });
-
-  const { isLoading: isBackendLicensesLoading, error: backendLicensesError, data: backendLicenses } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.LICENSES),
-    queryFn: async ({ signal }) => {
-      const response = await SystemApi.instance.retrieveLicenses({ signal });
-      return response.data;
-    },
-  });
-
-  const isLoading = isFrontendLicensesLoading || isBackendLicensesLoading;
-
-  const mergedLicenses = useMemo(() => {
-    if (!frontendLicenses || !backendLicenses) {
-      return [];
-    }
-    return [...frontendLicenses, ...backendLicenses].sort((a, b) => a.name.localeCompare(b.name));
-  }, [frontendLicenses, backendLicenses]);
-
-  useEffect(() => {
-    if (isLoading) {
-      onTitleChange(t`Licenses - Loading`);
-      return;
-    }
-    if (item) {
-      onTitleChange(t('Full license for {{name}}', { name: item.name }));
-    } else {
-      onTitleChange(t`Licenses`);
-    }
-  }, [isLoading, item, onTitleChange, t]);
-
-  useEffect(() => {
-    if (item) {
-      onActionsChange([
-        {
-          ...TestIdUtil.createAttributes('LicensesDialog-close'),
-          color: 'primary',
-          autoFocus: true,
-          onClick: () => setItem(null),
-          variant: 'contained',
-          label: t`Go back`,
-        },
-      ]);
-    } else {
-      onActionsChange([]);
-    }
-  }, [item, onActionsChange, onClose, t]);
-
-  const onItemURLClick = useCallback((url: string) => {
-    WindowManager.instance.window.open(url, '_blank');
-  }, []);
-
-  const onItemLicenseClick = useCallback((entry: PackageMetadata) => {
-    dialogContentRef?.current?.scrollTo(0, 0);
-    setItem(entry);
-  }, [dialogContentRef]);
-
-  return (
-    <ResponseHandler
-      inlineSpinner
-      error={frontendLicensesError || backendLicensesError}
-      isLoading={isLoading}
-    >
-      {item && (
-        <Box marginY={2}>
-          {item.license}
-        </Box>
-      )}
-      {!item && (
-        <>
-
-          <Box marginY={2}>
-            <LicenseInformation />
-          </Box>
-          <Divider />
-          <Box marginY={2}>
-            <Typography>
-              {t`This application uses the following open source libraries:`}
-            </Typography>
-            <List dense>
-              {mergedLicenses?.map(entry => {
-                let license: string | ReactNode;
-
-                if (!entry.license) {
-                  license = t`license: Unknown license`;
-                } else if (entry.license.length > 100) {
-                  license = (
-                    <Button
-                      size={'small'}
-                      variant={'text'}
-                      color={'secondary'}
-                      // eslint-disable-next-line react/jsx-no-bind
-                      onClick={() => onItemLicenseClick(entry)}
-                    >
-                      {t('Show license')}
-                    </Button>
-                  );
-                } else {
-                  license = t('license: {{license}}', { license: entry.license });
-                }
-
-                return (
-                  <Fragment key={entry.name}>
-                    <ListItem
-                      secondaryAction={entry.homepage && (
-                        <IconButton
-                          aria-label={t`Open project homepage in new tab`}
-                          edge={'end'}
-                          // eslint-disable-next-line react/jsx-no-bind
-                          onClick={() => onItemURLClick(entry.homepage)}
-                        >
-                          <OpenInNewIcon />
-                        </IconButton>
-                      )}
-                    >
-                      <ListItemAvatar>
-                        <Avatar>
-                          <FolderIcon />
-                        </Avatar>
-                      </ListItemAvatar>
-                      <ListItemText
-                        primary={(
-                          <>
-                            <strong>
-                              {entry.name}
-                            </strong>
-                            {' '}
-                            {entry.version}
-                          </>
-                        )}
-                        secondary={license}
-                      />
-                    </ListItem>
-                    <Divider
-                      component={'li'}
-                      variant={'inset'}
-                    />
-                  </Fragment>
-                );
-              })}
-            </List>
-          </Box>
-        </>
-      )}
-    </ResponseHandler>
-  );
-}, {
-  testId: 'LicensesDialog',
-  maxWidth: 'md',
-  fullWidth: true,
-  defaultTitle: '',
-  noCloseButton: false,
-  disableBackdropClick: false,
-});

package/src/components/ui/LicensesDialog/index.ts

@@ -1 +0,0 @@
-export * from './LicensesDialog';

package/src/components/ui/LinearProgressWithLabel/LinearProgressWithLabel.tsx

@@ -1,31 +0,0 @@
-import type { LinearProgressProps } from '@mui/material';
-import {
-  Box,
-  LinearProgress,
-  Typography,
-} from '@mui/material';
-
-export type LinearProgressWithLabelProps = {
-  readonly value: number;
-} & LinearProgressProps;
-
-export const LinearProgressWithLabel = (props: LinearProgressWithLabelProps) => {
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ width: '100%', mr: 1 }}>
-        <LinearProgress
-          variant={'determinate'}
-          {...props}
-        />
-      </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography
-          variant={'body2'}
-          sx={{ color: 'text.secondary' }}
-        >
-          {`${Math.round(props.value)}%`}
-        </Typography>
-      </Box>
-    </Box>
-  );
-};

package/src/components/ui/LinearProgressWithLabel/index.ts

@@ -1 +0,0 @@
-export * from './LinearProgressWithLabel';

package/src/components/ui/LoadingIndicator/LoadingIndicator.tsx

@@ -1,11 +0,0 @@
-import {
-  LinearProgress,
-  styled,
-} from '@mui/material';
-
-export const LoadingIndicator = styled(LinearProgress)(() => ({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  zIndex: 1,
-})) as typeof LinearProgress;

package/src/components/ui/LoadingIndicator/index.ts

@@ -1 +0,0 @@
-export * from './LoadingIndicator';

package/src/components/ui/MyPermissionsDialog/MyPermissionsDialog.tsx

@@ -1,95 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import {
-  useEffect,
-  useMemo,
-  type ReactElement,
-} from 'react';
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@mui/material';
-
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-import { AuthorizationManager } from '../../../classes/managers/AuthorizationManager';
-import { PermissionType } from '../../../api';
-
-
-export interface MyPermissionsDialogOpenProps {
-  //
-}
-
-export interface MyPermissionsDialogProps extends WithDialogRenderProps<MyPermissionsDialogOpenProps> {
-  //
-}
-
-export type MyPermissionsDialogRefMethods = WithDialogRefMethods<MyPermissionsDialogProps, MyPermissionsDialogOpenProps>;
-
-
-export const MyPermissionsDialog = withDialog<MyPermissionsDialogProps, MyPermissionsDialogOpenProps>((
-  {
-    onTitleChange,
-  }: MyPermissionsDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-  useEffect(() => {
-    onTitleChange(t`My Permissions`);
-  }, [onTitleChange, t]);
-
-  const permissionTypeTranslationMap = useMemo<Record<PermissionType, string>>(() => ({
-    [PermissionType.CREATE]: t`Create`,
-    [PermissionType.READ]: t`Read`,
-    [PermissionType.UPDATE]: t`Update`,
-    [PermissionType.DELETE]: t`Delete`,
-    [PermissionType.EXECUTE]: t`Execute`,
-  }), [t]);
-
-  const readablePermissions = useMemo(() => {
-    return AuthorizationManager.instance.apiPermissions.sort((a, b) => a.command_name.localeCompare(b.command_name)).map(permission => ({
-      key: `${permission.command_name}-${permission.permission_type}`,
-      command_name: permission.command_name,
-      permission_type: permissionTypeTranslationMap[permission.permission_type],
-    }));
-  }, [permissionTypeTranslationMap]);
-
-  return (
-    <Box>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell width={'50%'}>
-              {t`Name`}
-            </TableCell>
-            <TableCell width={'50%'}>
-              {t`Permission`}
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {readablePermissions.map(permission => (
-            <TableRow key={permission.key}>
-              <TableCell>
-                {permission.command_name}
-              </TableCell>
-              <TableCell>
-                {permission.permission_type}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Box>
-  );
-}, {
-  testId: 'MyPermissionsDialog',
-  maxWidth: 'md',
-  fullWidth: true,
-  defaultTitle: 'My Permissions',
-});

package/src/components/ui/MyPermissionsDialog/index.ts

@@ -1 +0,0 @@
-export * from './MyPermissionsDialog';