@gen-epix/ui 1.15.0 → 1.15.2

package/src/components/epi/EpiAddCasesToEventDialog/EpiAddCasesToEventDialog.tsx

@@ -1,347 +0,0 @@
-import {
-  Alert,
-  AlertTitle,
-  Box,
-} from '@mui/material';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  type ReactElement,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { useStore } from 'zustand';
-import {
-  FormProvider,
-  useForm,
-  useWatch,
-} from 'react-hook-form';
-import noop from 'lodash/noop';
-import { useShallow } from 'zustand/shallow';
-
-import {
-  withDialog,
-  type WithDialogRefMethods,
-  type WithDialogRenderProps,
-} from '../../../hoc/withDialog';
-import { EpiCasesAlreadyInCaseSetWarning } from '../EpiCasesAlreadyInCaseSetWarning';
-import type {
-  Case,
-  CaseSet,
-  TypedUuidSetFilter,
-  CaseSetMember,
-} from '../../../api';
-import { CaseApi } from '../../../api';
-import { useDataCollectionsMapQuery } from '../../../dataHooks/useDataCollectionsQuery';
-import { useEditMutation } from '../../../hooks/useEditMutation';
-import { QUERY_KEY } from '../../../models/query';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { CaseUtil } from '../../../utils/CaseUtil';
-import { FormUtil } from '../../../utils/FormUtil';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import {
-  useCaseSetOptionsQuery,
-  useCaseSetsMapQuery,
-} from '../../../dataHooks/useCaseSetsQuery';
-import type { DialogAction } from '../../ui/Dialog';
-import { Autocomplete } from '../../form/fields/Autocomplete';
-import { Select } from '../../form/fields/Select';
-import { useArray } from '../../../hooks/useArray';
-import { useQueryMemo } from '../../../hooks/useQueryMemo';
-import { DataUtil } from '../../../utils/DataUtil';
-
-import { EpiAddCasesToEventDialogSuccessNotificationMessage } from './EpiAddCasesToEventDialogSuccessNotificationMessage';
-
-
-export interface EpiAddCasesToEventDialogOpenProps {
-  rows: Case[];
-  currentCaseSet: CaseSet;
-}
-
-export interface EpiAddCasesToEventDialogProps extends WithDialogRenderProps<EpiAddCasesToEventDialogOpenProps> {
-  //
-}
-
-export type EpiAddCasesToEventDialogRefMethods = WithDialogRefMethods<EpiAddCasesToEventDialogProps, EpiAddCasesToEventDialogOpenProps>;
-
-type FormFields = {
-  caseSetId: string;
-  shouldApplySharingToCases: boolean;
-};
-
-export const EpiAddCasesToEventDialog = withDialog<EpiAddCasesToEventDialogProps, EpiAddCasesToEventDialogOpenProps>((
-  {
-    openProps,
-    onActionsChange,
-    onTitleChange,
-    onClose,
-  }: EpiAddCasesToEventDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-
-  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
-  const caseSetOptionsQuery = useCaseSetOptionsQuery();
-  const caseSetsMapQuery = useCaseSetsMapQuery();
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const fetchData = useStore(epiDashboardStore, (state) => state.fetchData);
-  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
-  const similarCaseIds = useStore(epiDashboardStore, useShallow((state) => state.findSimilarCasesResults?.flatMap(result => result.similarCaseIds) ?? []));
-  const formId = useId();
-  const similarCaseIdsInRows = useMemo(() => {
-    return openProps.rows.map(row => row.id).filter(id => similarCaseIds.includes(id));
-  }, [openProps.rows, similarCaseIds]);
-
-  const filteredCaseSetOptions = useMemo(() => (caseSetOptionsQuery.options ?? []).filter(option => {
-    const caseSet = caseSetsMapQuery.map.get(option.value);
-    if (similarCaseIdsInRows.length === 0 && caseSet?.id === openProps.currentCaseSet.id) {
-      return false;
-    }
-
-    if (caseSet.case_type_id !== completeCaseType.id) {
-      return false;
-    }
-
-    return true;
-  }).map(option => {
-    return {
-      ...option,
-      label: option.value === openProps.currentCaseSet.id ? t('{{eventName}} (currently shown event)', { eventName: option.label }) : option.label,
-    };
-  }), [caseSetOptionsQuery.options, caseSetsMapQuery.map, completeCaseType.id, openProps.currentCaseSet.id, similarCaseIdsInRows.length, t]);
-
-  const initialSetSetId = useMemo(() => {
-    if (filteredCaseSetOptions.length === 1) {
-      return filteredCaseSetOptions[0].value;
-    }
-    if (similarCaseIdsInRows.length > 0) {
-      return openProps.currentCaseSet.id;
-    }
-    return null;
-  }, [filteredCaseSetOptions, openProps.currentCaseSet.id, similarCaseIdsInRows.length]);
-
-  const formMethods = useForm<FormFields>({
-    values: {
-      caseSetId: initialSetSetId,
-      shouldApplySharingToCases: true,
-    },
-  });
-
-  const { control } = formMethods;
-  const { caseSetId, shouldApplySharingToCases } = useWatch({ control });
-
-  const caseSetMembersFilter = useMemo<TypedUuidSetFilter>(() => ({
-    invert: false,
-    key: 'case_set_id',
-    type: 'UUID_SET',
-    members: [caseSetId],
-  }), [caseSetId]);
-  const { isLoading: isCaseSetMembersLoading, error: caseSetMembersError, data: caseSetMembers } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_MEMBERS, caseSetMembersFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetMembersPostQuery(caseSetMembersFilter, { signal });
-      return response.data;
-    },
-    enabled: !!caseSetId,
-  });
-
-  const caseSetDataCollectionLinksFilter = useMemo<TypedUuidSetFilter>(() => ({
-    invert: false,
-    key: 'case_set_id',
-    type: 'UUID_SET',
-    members: [caseSetId],
-  }), [caseSetId]);
-  const { isLoading: isCaseSetDataCollectionLinksLoading, error: caseSetDataCollectionLinksError, data: caseSetDataCollectionLinks } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_DATA_COLLECTION_LINKS, caseSetDataCollectionLinksFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetDataCollectionLinksPostQuery(caseSetDataCollectionLinksFilter, { signal });
-      return response.data;
-    },
-    enabled: !!caseSetId,
-  });
-
-  const caseSetDataCollections = useMemo(() => {
-    return caseSetDataCollectionLinks?.map(link => dataCollectionsMapQuery.map.get(link.data_collection_id)).filter(x => !!x);
-  }, [caseSetDataCollectionLinks, dataCollectionsMapQuery.map]);
-
-  const caseIdsToAdd = useMemo(() => {
-    return openProps.rows.map(row => row.id).filter(caseId => !(caseSetMembers ?? []).map(x => x.case_id).includes(caseId));
-  }, [caseSetMembers, openProps.rows]);
-
-  const onSuccess = useCallback(async () => {
-    if (shouldApplySharingToCases) {
-      await CaseUtil.applyDataCollectionLinks({
-        caseSetId,
-        caseIds: openProps.rows ? openProps.rows.map(row => row.id) : undefined,
-        caseSetDataCollectionIds: caseSetDataCollectionLinks?.map(link => link.data_collection_id),
-        caseTypeId: completeCaseType.id,
-      });
-    }
-    await fetchData();
-    onClose();
-  }, [caseSetDataCollectionLinks, caseSetId, completeCaseType.id, fetchData, onClose, openProps.rows, shouldApplySharingToCases]);
-
-  const onError = useCallback(async () => {
-    await fetchData();
-    onClose();
-  }, [fetchData, onClose]);
-
-  const { mutate: mutateItems, isMutating: isMutatingItems } = useEditMutation<CaseSetMember[]>({
-    associationQueryKeys: QueryUtil.getQueryKeyDependencies([QUERY_KEY.CASE_SET_MEMBERS], true),
-    queryFn: async (items: CaseSetMember[]) => {
-      await CaseApi.instance.caseSetMembersPostSome(items);
-      return items;
-    },
-    onSuccess,
-    onError,
-    getProgressNotificationMessage: () => t('Adding case(s) to {{caseSetName}}', { caseSetName: caseSetsMapQuery.map.get(caseSetId).name }),
-    getSuccessNotificationMessage: () => (
-      <EpiAddCasesToEventDialogSuccessNotificationMessage
-        caseSet={caseSetsMapQuery.map.get(caseSetId)}
-        numAddedCases={caseIdsToAdd.length}
-      />
-    ),
-    getErrorNotificationMessage: () => t('Failed add case(s) to {{caseSetName}}', { caseSetName: caseSetsMapQuery.map.get(caseSetId).name }),
-  });
-
-  const onConfirmButtonClick = useCallback((() => {
-    mutateItems(caseIdsToAdd.map(caseId => ({
-      case_set_id: caseSetId,
-      case_id: caseId,
-    } satisfies CaseSetMember)));
-  }), [caseIdsToAdd, caseSetId, mutateItems]);
-
-  const onCancelButtonClick = useCallback((() => {
-    onClose();
-  }), [onClose]);
-
-  useEffect(() => {
-    const caseSet = caseSetId ? caseSetsMapQuery.map.get(caseSetId) : null;
-    if (caseSet) {
-      onTitleChange(t('Add {{numCases}} selected case(s) to {{eventName}}', { numCases: openProps.rows.length, eventName: DataUtil.getCaseSetName(caseSet) }));
-      return;
-    }
-    onTitleChange(t('Add {{numCases}} selected case(s) to an existing event', { numCases: openProps.rows.length }));
-  }, [caseSetId, caseSetsMapQuery.map, completeCaseType.name, onTitleChange, openProps.rows.length, t]);
-
-  useEffect(() => {
-    const actions: DialogAction[] = [];
-    actions.push(
-      {
-        ...TestIdUtil.createAttributes('EpiAddCasesToEventDialog-confirmButton'),
-        color: 'secondary',
-        autoFocus: true,
-        variant: 'contained',
-        onClick: onConfirmButtonClick,
-        disabled: (caseSetId && isCaseSetMembersLoading) || !caseSetId || isMutatingItems || caseIdsToAdd.length < 1,
-        loading: (caseSetId && isCaseSetMembersLoading) || isMutatingItems || isCaseSetDataCollectionLinksLoading,
-        label: t`Confirm`,
-        form: formId,
-        type: 'submit',
-      },
-    );
-    onActionsChange(actions);
-  }, [caseSetId, formId, isMutatingItems, isCaseSetMembersLoading, onActionsChange, onCancelButtonClick, onConfirmButtonClick, t, caseIdsToAdd.length, isCaseSetDataCollectionLinksLoading]);
-
-  const loadables = useArray([caseSetOptionsQuery, caseSetsMapQuery, dataCollectionsMapQuery]);
-
-  const booleanOptions = useMemo(() => FormUtil.createBooleanOptions(t), [t]);
-
-  return (
-    <ResponseHandler
-      isLoading={isMutatingItems}
-      loadables={loadables}
-    >
-      <FormProvider {...formMethods}>
-        <form
-          autoComplete={'off'}
-          onSubmit={noop}
-        >
-          <Box>
-            <Box marginY={1}>
-              <Autocomplete
-                label={t`Select event`}
-                name={'caseSetId'}
-                options={filteredCaseSetOptions}
-                warningMessage={filteredCaseSetOptions?.length === 0 ? t`No events of the same case type available` : undefined}
-              />
-            </Box>
-            <Box marginY={1}>
-              <Select
-                disabled={caseSetDataCollectionLinks?.length === 0}
-                label={t`Should the selected cases be given the same access rights as the selected event?`}
-                loading={caseSetDataCollectionLinks?.length && isCaseSetDataCollectionLinksLoading}
-                name={'shouldApplySharingToCases'}
-                options={booleanOptions}
-                warningMessage={caseSetDataCollectionLinks?.length === 0 ? t`No data collections to add` : undefined}
-              />
-            </Box>
-          </Box>
-          {caseSetId && (
-            <Box marginY={2}>
-              <ResponseHandler
-                inlineSpinner
-                shouldHideActionButtons
-                error={caseSetMembersError || caseSetDataCollectionLinksError}
-                isLoading={isCaseSetMembersLoading}
-              >
-                {caseSetDataCollections?.length > 0 && (
-                  <Box marginY={2}>
-                    <Alert severity={'info'}>
-                      <AlertTitle>
-                        {t('The selected event is shared in the following data collection(s):')}
-                      </AlertTitle>
-                      {caseSetDataCollections.map(dataCollection => (
-                        <Box key={dataCollection.id}>
-                          {dataCollection.name}
-                        </Box>
-                      ))}
-                    </Alert>
-                  </Box>
-                )}
-                {caseIdsToAdd.length > 0 && (
-                  <Box marginY={2}>
-                    <Alert severity={'info'}>
-                      <AlertTitle>
-                        {t('{{numCasesToAdd}} selected case(s) will be added to selected the event.', { numCasesToAdd: caseIdsToAdd.length })}
-                        {openProps.rows.length !== caseIdsToAdd.length && (
-                          <Box>
-                            {t('{{numCasesAlreadyInEvent}} selected case(s) are already part of the selected event.', { numCasesAlreadyInEvent: openProps.rows.length - caseIdsToAdd.length })}
-                          </Box>
-                        )}
-                      </AlertTitle>
-                    </Alert>
-                  </Box>
-                )}
-                {caseIdsToAdd.length === 0 && (
-                  <Box marginY={2}>
-                    <Alert severity={'error'}>
-                      <AlertTitle>
-                        {t('All selected case(s) are already part of the selected event.')}
-                      </AlertTitle>
-                    </Alert>
-                  </Box>
-                )}
-                {caseIdsToAdd.length > 0 && (
-                  <Box marginY={2}>
-                    <EpiCasesAlreadyInCaseSetWarning
-                      cases={openProps.rows.filter(row => caseIdsToAdd.includes(row.id))}
-                    />
-                  </Box>
-                )}
-              </ResponseHandler>
-            </Box>
-          )}
-        </form>
-      </FormProvider>
-    </ResponseHandler>
-  );
-}, {
-  testId: 'EpiAddCasesToEventDialog',
-  maxWidth: 'md',
-  fullWidth: true,
-  defaultTitle: '',
-});

package/src/components/epi/EpiAddCasesToEventDialog/EpiAddCasesToEventDialogSuccessNotificationMessage.tsx

@@ -1,38 +0,0 @@
-import { t } from 'i18next';
-import {
-  Box,
-  Link,
-} from '@mui/material';
-import { useCallback } from 'react';
-
-import type { CaseSet } from '../../../api';
-import { RouterManager } from '../../../classes/managers/RouterManager';
-import { CaseSetUtil } from '../../../utils/CaseSetUtil';
-
-export type EpiAddCasesToEventDialogSuccessNotificationMessageProps = {
-  readonly caseSet: CaseSet;
-  readonly numAddedCases: number;
-};
-
-export const EpiAddCasesToEventDialogSuccessNotificationMessage = ({ caseSet, numAddedCases }: EpiAddCasesToEventDialogSuccessNotificationMessageProps) => {
-
-  const onLinkClick = useCallback(async () => {
-    await RouterManager.instance.router.navigate({ pathname: CaseSetUtil.createCaseSetLink(caseSet) });
-  }, [caseSet]);
-
-  return (
-    <Box>
-      <Box>
-        {t('Successfully added {{numAddedCases}} case(s) to event: {{name}}', { numAddedCases, name: caseSet.name })}
-      </Box>
-      <Box marginY={2}>
-        <Link
-          href={'#'}
-          onClick={onLinkClick}
-        >
-          {t('View event: {{name}}', { name: caseSet.name })}
-        </Link>
-      </Box>
-    </Box>
-  );
-};

package/src/components/epi/EpiAddCasesToEventDialog/index.ts

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

package/src/components/epi/EpiBulkEditCaseDialog/EpiBulkEditCaseDialog.tsx

@@ -1,61 +0,0 @@
-import {
-  useEffect,
-  type ReactElement,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-
-import {
-  type WithDialogRenderProps,
-  type WithDialogRefMethods,
-  withDialog,
-} from '../../../hoc/withDialog';
-import type { Case } from '../../../api';
-import { TestIdUtil } from '../../../utils/TestIdUtil';
-import type { DialogAction } from '../../ui/Dialog';
-
-export interface EpiBulkEditCaseDialogOpenProps {
-  rows: Case[];
-}
-
-export interface EpiBulkEditCaseDialogProps extends WithDialogRenderProps<EpiBulkEditCaseDialogOpenProps> {
-  //
-}
-
-export type EpiBulkEditCaseDialogRefMethods = WithDialogRefMethods<EpiBulkEditCaseDialogProps, EpiBulkEditCaseDialogOpenProps>;
-
-export const EpiBulkEditCaseDialog = withDialog<EpiBulkEditCaseDialogProps, EpiBulkEditCaseDialogOpenProps>((
-  {
-    openProps,
-    onActionsChange,
-    onTitleChange,
-    onClose,
-  }: EpiBulkEditCaseDialogProps,
-): ReactElement => {
-  const { t } = useTranslation();
-  console.log({ openProps });
-
-  useEffect(() => {
-    onTitleChange(t`Bulk edit selected cases`);
-  }, [t, onTitleChange]);
-
-  useEffect(() => {
-    const actions: DialogAction[] = [];
-    actions.push({
-      ...TestIdUtil.createAttributes('EpiCaseInfoDialog-closeButton'),
-      color: 'secondary',
-      variant: 'contained',
-      label: t`Close`,
-      onClick: onClose,
-    });
-    onActionsChange(actions);
-  }, [onActionsChange, onClose, t]);
-
-  return (
-    <div />
-  );
-}, {
-  testId: 'EpiBulkEditCaseDialog',
-  maxWidth: 'lg',
-  fullWidth: true,
-  defaultTitle: '',
-});

package/src/components/epi/EpiBulkEditCaseDialog/index.ts

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

package/src/components/epi/EpiCaseInfoDialog/EpiCaseCaseSetInfo.tsx

@@ -1,137 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import type {
-  Case,
-  TypedUuidSetFilter,
-} from '../../../api';
-import { CaseApi } from '../../../api';
-import { useCaseSetCategoryMapQuery } from '../../../dataHooks/useCaseSetCategoriesQuery';
-import { useCaseSetStatusMapQuery } from '../../../dataHooks/useCaseSetStatusesQuery';
-import { QUERY_KEY } from '../../../models/query';
-import { CaseSetUtil } from '../../../utils/CaseSetUtil';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { NavLink } from '../../ui/NavLink';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { useArray } from '../../../hooks/useArray';
-import { useQueryMemo } from '../../../hooks/useQueryMemo';
-
-export type EpiCaseCaseSetInfoProps = {
-  readonly epiCase: Case;
-} & BoxProps;
-
-export const EpiCaseCaseSetInfo = ({ epiCase, ...boxProps }: EpiCaseCaseSetInfoProps) => {
-  const caseSetCategoryMapQuery = useCaseSetCategoryMapQuery();
-  const caseSetStatusMapQuery = useCaseSetStatusMapQuery();
-
-  const { t } = useTranslation();
-  const caseSetMembersFilter: TypedUuidSetFilter = {
-    invert: false,
-    key: 'case_id',
-    type: 'UUID_SET',
-    members: [epiCase.id],
-  };
-  const { isLoading: isCaseSetMembersLoading, error: caseSetMembersError, data: caseSetMembers } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_MEMBERS, caseSetMembersFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetMembersPostQuery(caseSetMembersFilter, { signal });
-      return response.data;
-    },
-  });
-
-  const caseSetsFilter: TypedUuidSetFilter = {
-    invert: false,
-    key: 'id',
-    type: 'UUID_SET',
-    members: caseSetMembers?.map((caseSetMember) => caseSetMember.case_set_id) ?? [],
-  };
-  const { isLoading: isCaseSetsLoading, error: caseSetsError, data: caseSets } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SETS, caseSetsFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetsPostQuery(caseSetsFilter, { signal });
-      return response.data;
-    },
-    enabled: caseSetsFilter.members.length > 0,
-  });
-
-  const loadables = useArray([caseSetCategoryMapQuery, caseSetStatusMapQuery]);
-
-  return (
-    <Box {...boxProps}>
-      <Typography variant={'h6'}>
-        {t`Events`}
-      </Typography>
-      <ResponseHandler
-        inlineSpinner
-        shouldHideActionButtons
-        error={caseSetMembersError || caseSetsError}
-        isLoading={isCaseSetMembersLoading || isCaseSetsLoading}
-        loadables={loadables}
-      >
-        {caseSets?.length > 0 && (
-          <Table size={'small'}>
-            <TableHead>
-              <TableRow>
-                <TableCell
-                  sx={{
-                    width: 'calc(100% * 1/3)',
-                  }}
-                >
-                  {t`Name`}
-                </TableCell>
-                <TableCell
-                  sx={{
-                    width: 'calc(100% * 1/3)',
-                  }}
-                >
-                  {t`Category`}
-                </TableCell>
-                <TableCell
-                  sx={{
-                    width: 'calc(100% * 1/3)',
-                  }}
-                >
-                  {t`Status`}
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {caseSets?.map((caseSet) => (
-                <TableRow key={caseSet.id}>
-                  <TableCell>
-                    <NavLink
-                      activeAsText
-                      to={CaseSetUtil.createCaseSetLink(caseSet)}
-                    >
-                      {caseSet.name}
-                    </NavLink>
-                  </TableCell>
-                  <TableCell>
-                    {caseSetCategoryMapQuery.map.get(caseSet.case_set_category_id)?.name ?? t`Unknown`}
-                  </TableCell>
-                  <TableCell>
-                    {caseSetStatusMapQuery.map.get(caseSet.case_set_status_id)?.name ?? t`Unknown`}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        )}
-        {(!caseSets || caseSets?.length === 0) && (
-          <Box sx={{ fontStyle: 'italic' }}>
-            {t`None`}
-          </Box>
-        )}
-      </ResponseHandler>
-    </Box>
-  );
-};