@gen-epix/ui 1.14.5 → 1.15.0

package/src/components/epi/EpiUserRightsDialog/EpiUserRightsDialog.tsx

@@ -0,0 +1,101 @@
+import { useTranslation } from 'react-i18next';
+import {
+  Box,
+  Tab,
+  Tabs,
+} from '@mui/material';
+import type {
+  ReactElement,
+  SyntheticEvent,
+} from 'react';
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../../hoc/withDialog';
+import { withDialog } from '../../../hoc/withDialog';
+import type { User } from '../../../api';
+import { EpiCustomTabPanel } from '../EpiCustomTabPanel/EpiCustomTabPanel';
+
+import { EpiUserRightsDialogCaseAccessPolicy } from './EpiUserRightsDialogCaseAccessPolicy';
+
+export interface EpiUserRightsDialogOpenProps {
+  user: User;
+}
+
+export interface EpiUserRightsDialogProps extends WithDialogRenderProps<EpiUserRightsDialogOpenProps> {
+  //
+}
+
+export type EpiUserRightsDialogRefMethods = WithDialogRefMethods<EpiUserRightsDialogProps, EpiUserRightsDialogOpenProps>;
+
+
+export const EpiUserRightsDialog = withDialog<EpiUserRightsDialogProps, EpiUserRightsDialogOpenProps>((
+  {
+    onTitleChange,
+    openProps,
+  }: EpiUserRightsDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+
+
+  useEffect(() => {
+    onTitleChange(t('Effective rights for {{userName}}', { userName: openProps.user.name }));
+  }, [onTitleChange, openProps.user.name, t]);
+
+  const [activeTab, setActiveTab] = useState(0);
+
+  const onTabsChange = useCallback((_event: SyntheticEvent, newValue: number) => {
+    setActiveTab(newValue);
+  }, []);
+
+  const a11yProps = useCallback((index: number) => {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }, []);
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          aria-label={'basic tabs example'}
+          value={activeTab}
+          onChange={onTabsChange}
+        >
+          <Tab
+            label={t`Case access`}
+            {...a11yProps(0)}
+          />
+          <Tab
+            label={t`Case type access`}
+            {...a11yProps(1)}
+          />
+        </Tabs>
+      </Box>
+      <EpiCustomTabPanel
+        index={0}
+        value={activeTab}
+      >
+        <EpiUserRightsDialogCaseAccessPolicy user={openProps.user} />
+      </EpiCustomTabPanel>
+      <EpiCustomTabPanel
+        index={1}
+        value={activeTab}
+      >
+        {t`Case type access`}
+      </EpiCustomTabPanel>
+    </Box>
+  );
+}, {
+  testId: 'EpiUserRightsDialog',
+  maxWidth: 'xl',
+  fullWidth: true,
+  defaultTitle: '',
+});

package/src/components/epi/EpiUserRightsDialog/EpiUserRightsDialogCaseAccessPolicy.tsx

@@ -0,0 +1,160 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import intersection from 'lodash/intersection';
+import { useTranslation } from 'react-i18next';
+import { Box } from '@mui/material';
+
+import type {
+  User,
+  OrganizationAccessCasePolicy,
+  UserAccessCasePolicy,
+} from '../../../api';
+import { ResponseHandler } from '../../ui/ResponseHandler';
+import { useOrganizationAccessCasePoliciesQuery } from '../../../dataHooks/useOrganizationAccessCasePoliciesQuery';
+import { useUserAccessCasePoliciesQuery } from '../../../dataHooks/useUserAccessCasePoliciesQuery';
+import { useArray } from '../../../hooks/useArray';
+import { useCaseTypeSetMembersQuery } from '../../../dataHooks/useCaseTypeSetMembersQuery';
+import { useCaseTypeMapQuery } from '../../../dataHooks/useCaseTypesQuery';
+import { useColMapQuery } from '../../../dataHooks/useColsQuery';
+import { useColSetMembersQuery } from '../../../dataHooks/useColSetMembersQuery';
+import {
+  useDataCollectionOptionsQuery,
+  useDataCollectionsMapQuery,
+} from '../../../dataHooks/useDataCollectionsQuery';
+import {
+  createTableStore,
+  TableStoreContextProvider,
+} from '../../../stores/tableStore';
+import { useInitializeTableStore } from '../../../hooks/useInitializeTableStore';
+import type { TableColumn } from '../../../models/table';
+import { TableUtil } from '../../../utils/TableUtil';
+import {
+  Table,
+  TableHeader,
+} from '../../ui/Table';
+
+export type EpiUserRightsDialogCaseAccessPolicyProps = {
+  readonly user: User;
+};
+
+type AccessCasePolity = Omit<OrganizationAccessCasePolicy & UserAccessCasePolicy, 'id' | 'user_id' | 'is_active' | 'case_type_set_id'> & {
+  readonly case_type_set_ids: string[];
+  readonly write_col_ids: string[];
+  readonly read_col_ids?: string[];
+};
+
+export const EpiUserRightsDialogCaseAccessPolicy = ({ user }: EpiUserRightsDialogCaseAccessPolicyProps) => {
+  const { t } = useTranslation();
+  const organizationAccessCasePoliciesQuery = useOrganizationAccessCasePoliciesQuery(policies => policies.filter(policy => policy.is_active && policy.organization_id === user.organization_id));
+  const userAccessCasePoliciesQuery = useUserAccessCasePoliciesQuery(policies => policies.filter(policy => policy.is_active && policy.user_id === user.id));
+  const caseTypeSetMembersQuery = useCaseTypeSetMembersQuery();
+  const caseTypeMapQuery = useCaseTypeMapQuery();
+  const colSetMembersQuery = useColSetMembersQuery();
+  const colMapQuery = useColMapQuery();
+  const dataCollectionMapQuery = useDataCollectionsMapQuery();
+  const dataCollectionOptionsQuery = useDataCollectionOptionsQuery();
+
+  const loadables = useArray([
+    organizationAccessCasePoliciesQuery,
+    userAccessCasePoliciesQuery,
+    caseTypeSetMembersQuery,
+    caseTypeMapQuery,
+    colSetMembersQuery,
+    colMapQuery,
+    dataCollectionMapQuery,
+    dataCollectionOptionsQuery,
+  ]);
+
+  const tableStore = useMemo(() => createTableStore<AccessCasePolity>({
+    defaultSortByField: 'data_collection_id',
+    defaultSortDirection: 'asc',
+    idSelectorCallback: (entry) => entry.data_collection_id,
+    storageNamePostFix: 'EpiUserRightsDialogCaseAccessPolicy-Table',
+    storageVersion: 1,
+  }), []);
+
+  const effectiveAccessCasePolicies = useMemo<AccessCasePolity[]>(() => {
+    const { data: organizationAccessCasePolicies } = organizationAccessCasePoliciesQuery;
+    const { data: userAccessCasePolicies } = userAccessCasePoliciesQuery;
+    const { data: caseTypeSetMembers } = caseTypeSetMembersQuery;
+    const { data: colSetMembers } = colSetMembersQuery;
+    const { map: caseTypeMap } = caseTypeMapQuery;
+    const { map: colMap } = colMapQuery;
+
+    if (!organizationAccessCasePolicies || !userAccessCasePolicies || !caseTypeSetMembers || !caseTypeMap || !colSetMembers || !colMap) {
+      return [];
+    }
+    return organizationAccessCasePolicies.map(organizationPolicy => {
+      const userPolicy = userAccessCasePolicies.find(p => p.data_collection_id === organizationPolicy.data_collection_id);
+      if (!userPolicy) {
+        return undefined;
+      }
+      const organizationCaseTypeSetIds = caseTypeSetMembers.filter(member => member.case_type_set_id === organizationPolicy.case_type_set_id).map(member => member.case_type_id);
+      const userCaseTypeSetIds = caseTypeSetMembers.filter(member => member.case_type_set_id === userPolicy.case_type_set_id).map(member => member.case_type_id);
+      const case_type_set_ids = intersection(organizationCaseTypeSetIds, userCaseTypeSetIds);
+
+      if (!case_type_set_ids.length) {
+        return undefined;
+      }
+
+      const organizationWriteColIds = colSetMembers.filter(member => member.col_set_id === organizationPolicy.write_col_set_id).map(member => member.col_id);
+      const userWriteColIds = colSetMembers.filter(member => member.col_set_id === userPolicy.write_col_set_id).map(member => member.col_id);
+      const write_col_ids = intersection(organizationWriteColIds, userWriteColIds);
+
+      const organizationReadColIds = colSetMembers.filter(member => member.col_set_id === organizationPolicy.read_col_set_id).map(member => member.col_id);
+      const userReadColIds = colSetMembers.filter(member => member.col_set_id === userPolicy.read_col_set_id).map(member => member.col_id);
+      const read_col_ids = intersection(organizationReadColIds, userReadColIds);
+
+      return {
+        add_case: organizationPolicy.add_case && userPolicy.add_case,
+        add_case_set: organizationPolicy.add_case_set && userPolicy.add_case_set,
+        data_collection_id: organizationPolicy.data_collection_id,
+        is_private: organizationPolicy.is_private,
+        organization_id: organizationPolicy.organization_id,
+        read_case_set: organizationPolicy.read_case_set && userPolicy.read_case_set,
+        remove_case: organizationPolicy.remove_case && userPolicy.remove_case,
+        remove_case_set: organizationPolicy.remove_case_set && userPolicy.remove_case_set,
+        write_case_set: organizationPolicy.write_case_set && userPolicy.write_case_set,
+        write_col_set_id: organizationPolicy.write_col_set_id,
+        read_col_set_id: organizationPolicy.read_col_set_id,
+        case_type_set_ids,
+        write_col_ids,
+        read_col_ids,
+      } satisfies AccessCasePolity;
+    }).filter((policy => !!policy));
+
+  }, [colMapQuery, colSetMembersQuery, caseTypeMapQuery, caseTypeSetMembersQuery, organizationAccessCasePoliciesQuery, userAccessCasePoliciesQuery]);
+
+  const tableColumns = useMemo<TableColumn<AccessCasePolity>[]>(() => [
+    TableUtil.createReadableIndexColumn(),
+    TableUtil.createOptionsColumn({ id: 'data_collection_id', name: t`Data collection`, options: dataCollectionOptionsQuery.options }),
+  ], [dataCollectionOptionsQuery.options, t]);
+
+  const getRowName = useCallback((row: AccessCasePolity) => {
+    return dataCollectionMapQuery.map.get(row.data_collection_id)?.name ?? row.data_collection_id;
+  }, [dataCollectionMapQuery.map]);
+
+  useInitializeTableStore({ store: tableStore, columns: tableColumns, rows: effectiveAccessCasePolicies });
+
+  return (
+    <ResponseHandler
+      inlineSpinner
+      loadables={loadables}
+    >
+      <Box sx={{ minHeight: '600px' }}>
+        <TableStoreContextProvider store={tableStore}>
+          <TableHeader
+            header={t`Table`}
+            headerComponent={'h6'}
+            headerVariant={'h6'}
+          />
+          <Table
+            getRowName={getRowName}
+          />
+        </TableStoreContextProvider>
+      </Box>
+    </ResponseHandler>
+  );
+};

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

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

package/src/components/epi/EpiWarning/EpiWarning.tsx

@@ -0,0 +1,39 @@
+import {
+  Alert,
+  AlertTitle,
+  styled,
+} from '@mui/material';
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+  padding: `0 ${theme.spacing(1)}`,
+  '& .MuiAlert-message': {
+    padding: '4px 0',
+    lineHeight: '16px !important',
+  },
+  '& .MuiTypography-root': {
+    lineHeight: '16px !important',
+    display: 'inline-block',
+    height: '16px',
+  },
+  '& .MuiAlert-icon': {
+    fontSize: '18px',
+    padding: 0,
+    lineHeight: '18px',
+    display: 'inline-flex',
+    alignItems: 'center',
+  },
+}));
+
+export type EpiWarningProps = {
+  readonly warningMessage: string;
+};
+
+export const EpiWarning = ({ warningMessage }: EpiWarningProps) => {
+  return (
+    <StyledAlert severity={'warning'}>
+      <AlertTitle>
+        {warningMessage}
+      </AlertTitle>
+    </StyledAlert>
+  );
+};

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

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

package/src/components/epi/EpiWidget/EpiWidget.tsx

@@ -0,0 +1,255 @@
+import {
+  Box,
+  Divider,
+  Tooltip,
+  Typography,
+  styled,
+  useTheme,
+} from '@mui/material';
+import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
+import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import type {
+  PropsWithChildren,
+  ReactNode,
+} from 'react';
+import {
+  useContext,
+  useCallback,
+  useMemo,
+  isValidElement,
+} from 'react';
+
+import type { EPI_ZONE } from '../../../models/epi';
+import type { MenuItemData } from '../../../models/nestedMenu';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { userProfileStore } from '../../../stores/userProfileStore';
+import { DashboardUtil } from '../../../utils/DashboardUtil';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import { NestedDropdown } from '../../ui/NestedMenu';
+import { Spinner } from '../../ui/Spinner';
+import { EpiWarning } from '../EpiWarning';
+import { MenuDataUtil } from '../../../utils/MenuDataUtil';
+import { EpiWidgetMenu } from '../EpiWidgetMenu';
+import { WidgetHeaderIconButton } from '../EpiWidgetHeaderIconButton';
+
+
+export type WidgetProps = PropsWithChildren<{
+  readonly title: string | MenuItemData | ReactNode;
+  readonly primaryMenu?: MenuItemData[] | ReactNode;
+  readonly secondaryMenu?: MenuItemData[] | ReactNode;
+  readonly warningMessage?: string;
+  readonly zone: EPI_ZONE;
+  readonly expandDisabled?: boolean;
+  readonly isLoading?: boolean;
+}>;
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+  marginBottom: theme.spacing(0.5),
+}));
+
+export const EpiWidget = ({ title, children, primaryMenu, secondaryMenu, warningMessage, zone, expandDisabled, isLoading }: WidgetProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const expandZone = useStore(epiDashboardStore, (state) => state.expandZone);
+  const expandedZone = useStore(epiDashboardStore, (state) => state.expandedZone);
+  const enabledLayoutZoneCount = useStore(userProfileStore, (state) => DashboardUtil.getEnabledZones(state.epiDashboardLayoutUserConfig).length);
+
+  const isExpanded = expandedZone === zone;
+
+  const onExpandButtonClick = useCallback(() => {
+    expandZone(expandedZone === zone ? null : zone);
+  }, [expandZone, expandedZone, zone]);
+
+
+  const titleInnerElement = useMemo(() => {
+    if (typeof title === 'string') {
+      return (
+        <Tooltip
+          arrow
+          placement={'right'}
+          title={title}
+        >
+          <Typography
+            component={'h2'}
+            fontWeight={'bold'}
+            sx={{
+              display: 'inline-block',
+              maxWidth: '100%',
+              lineHeight: theme.spacing(3),
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+            }}
+            variant={'body1'}
+          >
+            {title}
+          </Typography>
+        </Tooltip>
+      );
+    }
+    if (isValidElement(title)) {
+      return title;
+    }
+    if (MenuDataUtil.isMenuItemData(title)) {
+      return (
+        <NestedDropdown
+          showTopLevelTooltip
+          ButtonProps={{
+            variant: 'text',
+            size: 'small',
+            color: 'inherit',
+            sx: {
+              margin: 0,
+              padding: 0,
+              background: 'none !important',
+              '& span': {
+                margin: 0,
+              },
+              textTransform: 'none',
+            },
+          }}
+          menuItemsData={title}
+        />
+      );
+    }
+  }, [theme, title]);
+
+  const titleElement = useMemo(() => (
+    <Box
+      sx={{
+        height: theme.spacing(3),
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          height: theme.spacing(3),
+          maxWidth: '100%',
+          left: 0,
+        }}
+      >
+        {titleInnerElement}
+      </Box>
+    </Box>
+  ), [theme, titleInnerElement]);
+
+  return (
+    <Box
+      {...TestIdUtil.createAttributes('EpiWidget', { zone })}
+      sx={{
+        height: '100%',
+      }}
+    >
+
+      {/* Widget header bar */}
+      <Box
+        sx={{
+          height: theme.spacing(3),
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        {/* Title */}
+        {titleElement}
+        <Box
+          sx={{
+            display: 'flex',
+          }}
+        >
+          {/* primary menu */}
+          <Box
+            sx={{
+              justifySelf: 'right',
+              display: 'flex',
+              height: `calc(${theme.spacing(3)} - 1px)`,
+              marginTop: '1px',
+            }}
+          >
+            {primaryMenu && <EpiWidgetMenu menu={primaryMenu} />}
+            {primaryMenu && (
+              <StyledDivider
+                flexItem
+                orientation={'vertical'}
+                variant={'middle'}
+                aria-hidden={'true'}
+              />
+            )}
+          </Box>
+          {/* secondary menu */}
+          <Box
+            sx={{
+              justifySelf: 'right',
+              display: 'flex',
+              height: `calc(${theme.spacing(3)} - 1px)`,
+              marginTop: '1px',
+            }}
+          >
+            {secondaryMenu && <EpiWidgetMenu menu={secondaryMenu} />}
+            {secondaryMenu && (
+              <StyledDivider
+                flexItem
+                orientation={'vertical'}
+                variant={'middle'}
+                aria-hidden={'true'}
+              />
+            )}
+            {enabledLayoutZoneCount > 1 && (
+              <WidgetHeaderIconButton
+                disabled={expandDisabled}
+                label={isExpanded ? t`Collapse` : t`Expand`}
+                sx={{
+                  marginRight: theme.spacing(-1),
+                }}
+                onClick={onExpandButtonClick}
+              >
+                {isExpanded && (
+                  <ZoomInMapIcon />
+                )}
+                {!isExpanded && (
+                  <ZoomOutMapIcon />
+                )}
+              </WidgetHeaderIconButton>
+            )}
+          </Box>
+        </Box>
+
+      </Box>
+      {/* Widget content */}
+      <Box
+        sx={{
+          height: `calc(100% - ${theme.spacing(3)})`,
+          position: 'relative',
+        }}
+      >
+        {warningMessage && (
+          <Box
+            sx={{
+              height: theme.spacing(3),
+            }}
+          >
+            <EpiWarning warningMessage={warningMessage} />
+          </Box>
+        )}
+        <Box
+          sx={{
+            height: warningMessage ? `calc(100% - ${theme.spacing(3)})` : '100%',
+          }}
+        >
+          {isLoading && (
+            <Spinner
+              label={t`Loading`}
+            />
+          )}
+          {!isLoading && children}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

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

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

package/src/components/epi/EpiWidgetHeaderIconButton/EpiWidgetHeaderIconButton.tsx

@@ -0,0 +1,40 @@
+import type { IconButtonProps } from '@mui/material';
+import {
+  IconButton,
+  Tooltip,
+} from '@mui/material';
+
+export interface WidgetHeaderIconButtonProps extends IconButtonProps {
+  readonly label: string;
+}
+
+export const WidgetHeaderIconButton = ({ label, ...props }: WidgetHeaderIconButtonProps) => {
+  const iconButtonElement = (
+    <IconButton
+      {...props}
+      aria-label={label}
+      color={'primary'}
+      sx={{
+        ...props.sx,
+        '& svg': {
+          fontSize: 18,
+        },
+      }}
+    />
+  );
+
+  // Note: disabled buttons cannot have a tooltip
+  if (props.disabled) {
+    return iconButtonElement;
+  }
+
+  return (
+    <Tooltip
+      arrow
+      placement={'bottom'}
+      title={label}
+    >
+      {iconButtonElement}
+    </Tooltip>
+  );
+};

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

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

package/src/components/epi/EpiWidgetMenu/EpiWidgetMenu.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { isValidElement } from 'react';
+
+import type { MenuItemData } from '../../../models/nestedMenu';
+import { NestedDropdown } from '../../ui/NestedMenu';
+import { MenuDataUtil } from '../../../utils/MenuDataUtil';
+import { WidgetHeaderIconButton } from '../EpiWidgetHeaderIconButton';
+
+export type EpiWidgetMenuProps = {
+  readonly menu: MenuItemData[] | ReactNode;
+};
+
+export const EpiWidgetMenu = ({
+  menu,
+}: EpiWidgetMenuProps) => {
+  if (isValidElement(menu)) {
+    return menu;
+  }
+  if (!MenuDataUtil.isMenuItemDataArray(menu)) {
+    return null;
+  }
+
+  return (
+    <>
+      {menu?.map(menuItemsData => {
+        if (menuItemsData.items) {
+          return (
+            <NestedDropdown
+              key={menuItemsData.label}
+              ButtonProps={{
+                variant: 'text',
+                size: 'small',
+                color: 'primary',
+                disabled: menuItemsData.disabled,
+              }}
+              MenuProps={{ elevation: 3 }}
+              menuItemsData={menuItemsData}
+            />
+          );
+        }
+        return (
+          <WidgetHeaderIconButton
+            key={menuItemsData.label}
+            disabled={menuItemsData.disabled}
+            size={'small'}
+            label={menuItemsData.label}
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick={() => menuItemsData.callback()}
+          >
+            {menuItemsData.leftIcon || menuItemsData.rightIcon}
+          </WidgetHeaderIconButton>
+        );
+      })}
+    </>
+  );
+};

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

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