@gen-epix/ui 1.15.0 → 1.15.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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