@gen-epix/ui 1.14.4 → 1.15.0

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

@@ -0,0 +1,312 @@
+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

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

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

@@ -0,0 +1,231 @@
+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

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

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

@@ -0,0 +1,31 @@
+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

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

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,95 @@
+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

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