@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/ui/UsersEffectiveRightsDetailsDialog/UsersEffectiveRightsDetailsDialog.tsx

@@ -0,0 +1,584 @@
+import { useTranslation } from 'react-i18next';
+import {
+  Box,
+  Link,
+  Tab,
+  Tabs,
+  Typography,
+} from '@mui/material';
+import type {
+  ReactElement,
+  SyntheticEvent,
+} from 'react';
+import {
+  useState,
+  useCallback,
+  useEffect,
+} from 'react';
+
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../../hoc/withDialog';
+import { withDialog } from '../../../hoc/withDialog';
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import type { DialogAction } from '../Dialog';
+import type { UserEffectiveRight } from '../../../models/caseAccess';
+import { useCaseTypeMapQuery } from '../../../dataHooks/useCaseTypesQuery';
+import { useArray } from '../../../hooks/useArray';
+import { ResponseHandler } from '../ResponseHandler';
+import {
+  useCaseTypeSetNameFactory,
+  useCaseTypeSetsMapQuery,
+} from '../../../dataHooks/useCaseTypeSetsQuery';
+import { useDataCollectionsMapQuery } from '../../../dataHooks/useDataCollectionsQuery';
+import { DataUtil } from '../../../utils/DataUtil';
+import { useColSetMapQuery } from '../../../dataHooks/useColSetsQuery';
+import {
+  useColMapQuery,
+  useColNameFactory,
+} from '../../../dataHooks/useColsQuery';
+import { useColSetMembersQuery } from '../../../dataHooks/useColSetMembersQuery';
+import { useCaseTypeSetMembersQuery } from '../../../dataHooks/useCaseTypeSetMembersQuery';
+import type { User } from '../../../api';
+import { EpiCustomTabPanel } from '../../epi/EpiCustomTabPanel';
+
+
+export type UsersEffectiveRightsDetailsType = 'caseTypeSets' | 'readColSets' | 'writeColSets';
+
+export interface UsersEffectiveRightsDetailsDialogOpenProps {
+  userEffectiveRight: UserEffectiveRight;
+  type: 'caseTypeSets' | 'readColSets' | 'writeColSets';
+  user: User;
+}
+
+const usersEffectiveRightsDetailsTypeOrder = ['caseTypeSets', 'readColSets', 'writeColSets'] as const;
+
+export interface UsersEffectiveRightsDetailsDialogProps extends WithDialogRenderProps<UsersEffectiveRightsDetailsDialogOpenProps> {
+  //
+}
+
+export type UsersEffectiveRightsDetailsDialogRefMethods = WithDialogRefMethods<UsersEffectiveRightsDetailsDialogProps, UsersEffectiveRightsDetailsDialogOpenProps>;
+
+const a11yProps = (index: number) => {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+};
+
+export const UsersEffectiveRightsDetailsDialog = withDialog<UsersEffectiveRightsDetailsDialogProps, UsersEffectiveRightsDetailsDialogOpenProps>((
+  {
+    onTitleChange,
+    onActionsChange,
+    onClose,
+    openProps: { userEffectiveRight, type, user },
+  }: UsersEffectiveRightsDetailsDialogProps,
+): ReactElement => {
+
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState(usersEffectiveRightsDetailsTypeOrder.indexOf(type));
+  const [visibleItems, setVisibleItems] = useState<string[]>([]);
+
+  const caseTypeMapQuery = useCaseTypeMapQuery();
+  const caseTypeSetMapQuery = useCaseTypeSetsMapQuery();
+  const caseTypeSetNameFactory = useCaseTypeSetNameFactory();
+  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
+  const colSetMapQuery = useColSetMapQuery();
+  const colMapQuery = useColMapQuery();
+  const colNameFactory = useColNameFactory();
+  const caseTypeSetMembersQuery = useCaseTypeSetMembersQuery();
+  const colSetMembersQuery = useColSetMembersQuery();
+
+  const loadables = useArray([
+    caseTypeMapQuery,
+    caseTypeSetMapQuery,
+    caseTypeSetNameFactory,
+    dataCollectionsMapQuery,
+    colSetMapQuery,
+    colMapQuery,
+    colNameFactory,
+    caseTypeSetMembersQuery,
+    colSetMembersQuery,
+  ]);
+
+  const handleTabChange = useCallback((_event: SyntheticEvent, newValue: number) => {
+    setActiveTab(newValue);
+  }, []);
+
+  const onToggleSectionLinkClick = useCallback((key: string) => {
+    setVisibleItems((prev) => {
+      if (prev.includes(key)) {
+        return prev.filter(item => item !== key);
+      }
+      return [...prev, key];
+    });
+  }, []);
+
+  useEffect(() => {
+    onTitleChange(t('{{userName}} effective rights details for {{dataCollectionName}}', { userName: DataUtil.getUserDisplayValue(user, t), dataCollectionName: dataCollectionsMapQuery.map.get(userEffectiveRight.data_collection_id)?.name ?? userEffectiveRight.data_collection_id }));
+  }, [dataCollectionsMapQuery.map, onTitleChange, t, user, userEffectiveRight.data_collection_id]);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+    actions.push({
+      ...TestIdUtil.createAttributes('UsersEffectiveRightsDetailsDialog-closeButton'),
+      color: 'secondary',
+      variant: 'contained',
+      label: t`Close`,
+      onClick: onClose,
+    });
+    onActionsChange(actions);
+  }, [onActionsChange, onClose, t]);
+
+  return (
+    <ResponseHandler
+      inlineSpinner
+      loadables={loadables}
+    >
+      {!loadables.some(x => x.isLoading) && (
+        <Box sx={{ width: '100%' }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs
+              aria-label={'basic tabs example'}
+              value={activeTab}
+              onChange={handleTabChange}
+            >
+              <Tab
+                label={'Case types'}
+                {...a11yProps(0)}
+              />
+              <Tab
+                label={'Read columns'}
+                {...a11yProps(1)}
+              />
+              <Tab
+                label={'Write columns'}
+                {...a11yProps(2)}
+              />
+              <Tab
+                label={'Rights'}
+                {...a11yProps(3)}
+              />
+              <Tab
+                label={'Additional rights'}
+                {...a11yProps(4)}
+              />
+            </Tabs>
+          </Box>
+          <EpiCustomTabPanel
+            index={0}
+            value={activeTab}
+          >
+            { !userEffectiveRight.categorized_case_type_ids.length && !userEffectiveRight.uncategorized_case_type_ids.length && (
+              <Box marginY={2}>
+                {t`No case types assigned`}
+              </Box>
+            )}
+            { userEffectiveRight.case_type_set_ids.length > 0 && (
+              <Box>
+                {userEffectiveRight.case_type_set_ids.map((caseTypeSetId) => {
+                  const caseTypeSet = caseTypeSetMapQuery.map.get(caseTypeSetId);
+                  const caseTypeSetMembers = caseTypeSetMembersQuery.data.filter(x => x.case_type_set_id === caseTypeSetId);
+                  const sortedCaseTypeSetMembers = caseTypeSetMembers.sort((a, b) => {
+                    const caseTypeA = caseTypeMapQuery.map.get(a.case_type_id);
+                    const caseTypeB = caseTypeMapQuery.map.get(b.case_type_id);
+                    return (caseTypeA?.name ?? '').localeCompare(caseTypeB?.name ?? '');
+                  });
+                  return (
+                    <Box key={caseTypeSetId}>
+                      <Box marginY={1}>
+                        <Link
+                          tabIndex={0}
+                          href={'#'}
+                          // eslint-disable-next-line react/jsx-no-bind
+                          onClick={() => onToggleSectionLinkClick(`case-type-sets-${caseTypeSetId}`)}
+                        >
+                          {caseTypeSetNameFactory.getName(caseTypeSet) ?? caseTypeSetId}
+                        </Link>
+                        <Box sx={{ display: visibleItems.includes(`case-type-sets-${caseTypeSetId}`) ? 'block' : 'none' }}>
+                          {sortedCaseTypeSetMembers.map((caseTypeSetMember) => {
+                            const caseType = caseTypeMapQuery.map.get(caseTypeSetMember.case_type_id);
+                            return (
+                              <Box key={caseTypeSetMember.case_type_id}>
+                                {caseType?.name ?? caseTypeSetMember.case_type_id}
+                              </Box>
+                            );
+                          })}
+                        </Box>
+                      </Box>
+                    </Box>
+                  );
+                })}
+              </Box>
+            )}
+            { userEffectiveRight.uncategorized_case_type_ids.length > 0 && (
+              <Box marginY={1}>
+                <Link
+                  tabIndex={0}
+                  href={'#'}
+                  // eslint-disable-next-line react/jsx-no-bind
+                  onClick={() => onToggleSectionLinkClick(`uncategorized-case-type-sets`)}
+                >
+                  {t`Uncategorized case types`}
+                </Link>
+                <Box sx={{ display: visibleItems.includes(`uncategorized-case-type-sets`) ? 'block' : 'none' }}>
+                  {userEffectiveRight.uncategorized_case_type_ids.sort((a, b) => {
+                    const caseTypeA = caseTypeMapQuery.map.get(a);
+                    const caseTypeB = caseTypeMapQuery.map.get(b);
+                    return (caseTypeA?.name ?? '').localeCompare(caseTypeB?.name ?? '');
+                  }).map((caseTypeId) => {
+                    const caseType = caseTypeMapQuery.map.get(caseTypeId);
+                    return (
+                      <Box key={caseTypeId}>
+                        {caseType?.name ?? caseTypeId}
+                      </Box>
+                    );
+                  })}
+                </Box>
+              </Box>
+            )}
+          </EpiCustomTabPanel>
+          <EpiCustomTabPanel
+            index={1}
+            value={activeTab}
+          >
+            { !userEffectiveRight.categorized_read_col_ids.length && !userEffectiveRight.uncategorized_read_col_ids.length && (
+              <Box marginY={2}>
+                {t`No read columns assigned`}
+              </Box>
+            )}
+            { userEffectiveRight.read_col_set_ids.length > 0 && (
+              <Box>
+                {userEffectiveRight.read_col_set_ids.map((colSetId) => {
+                  const colSet = colSetMapQuery.map.get(colSetId);
+                  const colSetMembers = colSetMembersQuery.data.filter(x => x.col_set_id === colSetId);
+                  const sortedColSetMembers = colSetMembers.sort((a, b) => {
+                    const colA = colMapQuery.map.get(a.col_id);
+                    const colB = colMapQuery.map.get(b.col_id);
+                    const colAName = colNameFactory.getName(colA) ?? a.col_id;
+                    const colBName = colNameFactory.getName(colB) ?? b.col_id;
+                    return colAName.localeCompare(colBName);
+                  });
+                  return (
+                    <Box key={colSetId}>
+                      <Box marginY={1}>
+                        <Link
+                          tabIndex={0}
+                          href={'#'}
+                          // eslint-disable-next-line react/jsx-no-bind
+                          onClick={() => onToggleSectionLinkClick(`read-col-sets-${colSetId}`)}
+                        >
+                          {colSet?.name ?? colSetId}
+                        </Link>
+                        <Box sx={{ display: visibleItems.includes(`read-col-sets-${colSetId}`) ? 'block' : 'none' }}>
+                          {sortedColSetMembers.map((colSetMember) => {
+                            const refCol = colMapQuery.map.get(colSetMember.col_id);
+                            return (
+                              <Box key={refCol.id}>
+                                {(refCol && colNameFactory.getName(refCol)) ?? colSetMember.col_id}
+                              </Box>
+                            );
+                          })}
+                        </Box>
+                      </Box>
+                    </Box>
+                  );
+                })}
+              </Box>
+            )}
+            { userEffectiveRight.uncategorized_read_col_ids.length > 0 && (
+              <Box marginY={1}>
+                <Typography variant={'h5'}>
+                  {t`Uncategorized read columns sets`}
+                </Typography>
+                <Link
+                  tabIndex={0}
+                  href={'#'}
+                  // eslint-disable-next-line react/jsx-no-bind
+                  onClick={() => onToggleSectionLinkClick(`uncategorized-read-col-sets`)}
+                >
+                  {t`Uncategorized read columns sets`}
+                </Link>
+                <Box sx={{ display: visibleItems.includes(`uncategorized-read-col-sets`) ? 'block' : 'none' }}>
+                  {userEffectiveRight.uncategorized_read_col_ids.sort((a, b) => {
+                    const colA = colMapQuery.map.get(a);
+                    const colB = colMapQuery.map.get(b);
+                    const colAName = colNameFactory.getName(colA) ?? a;
+                    const colBName = colNameFactory.getName(colB) ?? b;
+                    return colAName.localeCompare(colBName);
+                  }).map((colId) => {
+                    const refCol = colMapQuery.map.get(colId);
+                    return (
+                      <Box key={colId}>
+                        {colNameFactory.getName(refCol) ?? colId}
+                      </Box>
+                    );
+                  })}
+                </Box>
+              </Box>
+            )}
+          </EpiCustomTabPanel>
+          <EpiCustomTabPanel
+            index={2}
+            value={activeTab}
+          >
+            { !userEffectiveRight.categorized_write_col_ids.length && !userEffectiveRight.uncategorized_write_col_ids.length && (
+              <Box marginY={2}>
+                {t`No write columns assigned`}
+              </Box>
+            )}
+            { userEffectiveRight.write_col_set_ids.length > 0 && (
+              <Box>
+                {userEffectiveRight.write_col_set_ids.map((colSetId) => {
+                  const colSet = colSetMapQuery.map.get(colSetId);
+                  const colSetMembers = colSetMembersQuery.data.filter(x => x.col_set_id === colSetId);
+                  const sortedColSetMembers = colSetMembers.sort((a, b) => {
+                    const colA = colMapQuery.map.get(a.col_id);
+                    const colB = colMapQuery.map.get(b.col_id);
+                    const colAName = colNameFactory.getName(colA) ?? a.col_id;
+                    const colBName = colNameFactory.getName(colB) ?? b.col_id;
+                    return colAName.localeCompare(colBName);
+                  });
+                  return (
+                    <Box key={colSetId}>
+                      <Box marginY={1}>
+                        <Link
+                          tabIndex={0}
+                          href={'#'}
+                          // eslint-disable-next-line react/jsx-no-bind
+                          onClick={() => onToggleSectionLinkClick(`write-col-sets-${colSetId}`)}
+                        >
+                          {colSet?.name ?? colSetId}
+                        </Link>
+                        <Box sx={{ display: visibleItems.includes(`write-col-sets-${colSetId}`) ? 'block' : 'none' }}>
+                          {sortedColSetMembers.map((colSetMember) => {
+                            const refCol = colMapQuery.map.get(colSetMember.col_id);
+                            return (
+                              <Box key={refCol.id}>
+                                {colNameFactory.getName(refCol) ?? colSetMember.col_id}
+                              </Box>
+                            );
+                          })}
+                        </Box>
+                      </Box>
+                    </Box>
+                  );
+                })}
+              </Box>
+            )}
+            { userEffectiveRight.uncategorized_write_col_ids.length > 0 && (
+              <Box marginY={1}>
+                <Link
+                  tabIndex={0}
+                  href={'#'}
+                  // eslint-disable-next-line react/jsx-no-bind
+                  onClick={() => onToggleSectionLinkClick(`uncategorized-write-col-sets`)}
+                >
+                  {t`Uncategorized write columns sets`}
+                </Link>
+                <Box sx={{ display: visibleItems.includes(`uncategorized-write-col-sets`) ? 'block' : 'none' }}>
+                  {userEffectiveRight.uncategorized_write_col_ids.sort((a, b) => {
+                    const colA = colMapQuery.map.get(a);
+                    const colB = colMapQuery.map.get(b);
+                    const colAName = colNameFactory.getName(colA) ?? a;
+                    const colBName = colNameFactory.getName(colB) ?? b;
+                    return colAName.localeCompare(colBName);
+                  }).map((colId) => {
+                    const refCol = colMapQuery.map.get(colId);
+                    return (
+                      <Box key={colId}>
+                        {colNameFactory.getName(refCol) ?? colId}
+                      </Box>
+                    );
+                  })}
+                </Box>
+              </Box>
+            )}
+          </EpiCustomTabPanel>
+          <EpiCustomTabPanel
+            index={3}
+            value={activeTab}
+          >
+            <Box
+              component={'dl'}
+              sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}
+            >
+              <dt>
+                {t`Add case`}
+              </dt>
+              <dd>
+                {userEffectiveRight.add_case ? t`Yes` : t`No`}
+              </dd>
+              <dt>
+                {t`Remove case`}
+              </dt>
+              <dd>
+                {userEffectiveRight.remove_case ? t`Yes` : t`No`}
+              </dd>
+              <dt>
+                {t`Add case set`}
+              </dt>
+              <dd>
+                {userEffectiveRight.add_case_set ? t`Yes` : t`No`}
+              </dd>
+              <dt>
+                {t`Remove case set`}
+              </dt>
+              <dd>
+                {userEffectiveRight.remove_case_set ? t`Yes` : t`No`}
+              </dd>
+              <dt>
+                {t`Read case set`}
+              </dt>
+              <dd>
+                {userEffectiveRight.read_case_set ? t`Yes` : t`No`}
+              </dd>
+              <dt>
+                {t`Write case set`}
+              </dt>
+              <dd>
+                {userEffectiveRight.write_case_set ? t`Yes` : t`No`}
+              </dd>
+              <dt>
+                {t`Private`}
+              </dt>
+              <dd>
+                {userEffectiveRight.is_private ? t`Yes` : t`No`}
+              </dd>
+            </Box>
+          </EpiCustomTabPanel>
+          <EpiCustomTabPanel
+            index={4}
+            value={activeTab}
+          >
+            <Box marginY={2}>
+              { !userEffectiveRight.effective_share_case_rights.length && (
+                <Box marginY={2}>
+                  {t`No additional rights assigned`}
+                </Box>
+              )}
+              {userEffectiveRight.effective_share_case_rights.map((right) => (
+                <Box
+                  key={right.from_data_collection_id}
+                  marginY={2}
+                >
+                  <Box>
+                    <Typography variant={'h5'}>
+                      {t('From: {{dataCollectionName}}', {
+                        dataCollectionName: dataCollectionsMapQuery.map.get(right.from_data_collection_id)?.name ?? right.from_data_collection_id,
+                      })}
+                    </Typography>
+                  </Box>
+                  <Box>
+                    {right.categorized_case_type_ids.length === 0 && right.uncategorized_case_type_ids.length === 0 && (
+                      <Box marginY={2}>
+                        {t`No case types assigned`}
+                      </Box>
+                    )}
+                    {right.case_type_set_ids.map((caseTypeSetId) => {
+                      const caseTypeSet = caseTypeSetMapQuery.map.get(caseTypeSetId);
+                      const caseTypeSetMembers = caseTypeSetMembersQuery.data.filter(x => x.case_type_set_id === caseTypeSetId);
+                      const sortedCaseTypeSetMembers = caseTypeSetMembers.sort((a, b) => {
+                        const caseTypeA = caseTypeMapQuery.map.get(a.case_type_id);
+                        const caseTypeB = caseTypeMapQuery.map.get(b.case_type_id);
+                        return (caseTypeA?.name ?? '').localeCompare(caseTypeB?.name ?? '');
+                      });
+                      return (
+                        <Box key={caseTypeSetId}>
+                          <Box marginY={1}>
+                            <Link
+                              tabIndex={0}
+                              href={'#'}
+                              // eslint-disable-next-line react/jsx-no-bind
+                              onClick={() => onToggleSectionLinkClick(`${right.from_data_collection_id}-${caseTypeSetId}`)}
+                            >
+                              {caseTypeSetNameFactory.getName(caseTypeSet) ?? caseTypeSetId}
+                            </Link>
+                            <Box sx={{ display: visibleItems.includes(`${right.from_data_collection_id}-${caseTypeSetId}`) ? 'block' : 'none' }}>
+                              {sortedCaseTypeSetMembers.map((caseTypeSetMember) => {
+                                const caseType = caseTypeMapQuery.map.get(caseTypeSetMember.case_type_id);
+                                return (
+                                  <Box key={caseTypeSetMember.case_type_id}>
+                                    {caseType?.name ?? caseTypeSetMember.case_type_id}
+                                  </Box>
+                                );
+                              })}
+                            </Box>
+                          </Box>
+                        </Box>
+                      );
+                    })}
+                    {right.uncategorized_case_type_ids.length > 0 && (
+                      <Box marginY={2}>
+                        <Link
+                          tabIndex={0}
+                          href={'#'}
+                          // eslint-disable-next-line react/jsx-no-bind
+                          onClick={() => onToggleSectionLinkClick(`${right.from_data_collection_id}-uncategorized`)}
+                        >
+                          {t`Uncategorized case types`}
+                        </Link>
+                        <Box sx={{ display: visibleItems.includes(`${right.from_data_collection_id}-uncategorized`) ? 'block' : 'none' }}>
+                          {right.uncategorized_case_type_ids.sort((a, b) => {
+                            const caseTypeA = caseTypeMapQuery.map.get(a);
+                            const caseTypeB = caseTypeMapQuery.map.get(b);
+                            return (caseTypeA?.name ?? '').localeCompare(caseTypeB?.name ?? '');
+                          }).map((caseTypeId) => {
+                            const caseType = caseTypeMapQuery.map.get(caseTypeId);
+                            return (
+                              <Box key={caseTypeId}>
+                                {caseType?.name ?? caseTypeId}
+                              </Box>
+                            );
+                          })}
+                        </Box>
+                      </Box>
+                    )}
+                  </Box>
+                  <Box
+                    component={'dl'}
+                    sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}
+                  >
+                    <dt>
+                      {t`Add case`}
+                    </dt>
+                    <dd>
+                      {right.add_case ? t`Yes` : t`No`}
+                    </dd>
+                    <dt>
+                      {t`Remove case`}
+                    </dt>
+                    <dd>
+                      {right.remove_case ? t`Yes` : t`No`}
+                    </dd>
+                    <dt>
+                      {t`Add case set`}
+                    </dt>
+                    <dd>
+                      {right.add_case_set ? t`Yes` : t`No`}
+                    </dd>
+                    <dt>
+                      {t`Remove case set`}
+                    </dt>
+                    <dd>
+                      {right.remove_case_set ? t`Yes` : t`No`}
+                    </dd>
+                  </Box>
+                </Box>
+              ))}
+
+            </Box>
+          </EpiCustomTabPanel>
+        </Box>
+      )}
+    </ResponseHandler>
+  );
+}, {
+  testId: 'UsersEffectiveRightsDetailsDialog',
+  maxWidth: 'lg',
+  fullWidth: true,
+  defaultTitle: '',
+  noCloseButton: false,
+  disableBackdropClick: false,
+});

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

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

package/src/context/caseAbac/CaseAbacContext.tsx

@@ -0,0 +1,24 @@
+import { createContext } from 'react';
+
+import type {
+  DataCollection,
+  CaseSetDataCollectionLink,
+  CaseDataCollectionLink,
+  CaseSetRights,
+  CaseRights,
+} from '../../api';
+import type { OptionBase } from '../../models/form';
+
+export type CaseAbacContext = {
+  userDataCollections: DataCollection[];
+  userDataCollectionsMap: Map<string, DataCollection>;
+  userDataCollectionOptions: OptionBase<string>[];
+  itemDataCollectionLinks: Array<Array<CaseSetDataCollectionLink | CaseDataCollectionLink>>;
+  itemDataCollections?: Array<DataCollection[]>;
+  itemSharedInDataCollections?: Array<DataCollection[]>;
+  itemDataCollectionOptions?: Array<OptionBase<string>[]>;
+  createdInDataCollection?: DataCollection;
+  rights: Array<CaseSetRights | CaseRights>;
+};
+
+export const EpiCaseAbacContext = createContext<CaseAbacContext>(null);

package/src/context/caseAbac/CaseAbacContextProvider.tsx

@@ -0,0 +1,69 @@
+import {
+  useMemo,
+  type PropsWithChildren,
+} from 'react';
+
+import type { CaseAbacContext } from './CaseAbacContext';
+import { EpiCaseAbacContext } from './CaseAbacContext';
+
+export type CaseAbacContextProviderProps = PropsWithChildren<{
+  readonly caseAbac: CaseAbacContext;
+}>;
+
+export const CaseAbacContextProvider = (
+  props: CaseAbacContextProviderProps,
+) => {
+  const { children, caseAbac } = props;
+
+  const sanitizedCaseAbac = useMemo<CaseAbacContext>(() => {
+    const itemDataCollections = caseAbac.rights.map(right => {
+      return right.data_collection_ids.map(id => {
+        return caseAbac.userDataCollectionsMap.get(id);
+      }).filter(x => !!x);
+    });
+    const itemSharedInDataCollections = itemDataCollections.map((itemDataCollection, index) => {
+      const sharedInDataCollectionIds = caseAbac.rights[index].shared_in_data_collection_ids;
+      return itemDataCollection.filter(item => sharedInDataCollectionIds.includes(item.id));
+    });
+    const itemDataCollectionOptions = caseAbac.rights.map(right => {
+      if (!caseAbac.userDataCollectionOptions.length || !right) {
+        return [];
+      }
+      return caseAbac.userDataCollectionOptions.map(x => {
+        const optionDataCollectionId = x.value;
+        const isSelected = right.shared_in_data_collection_ids?.includes(optionDataCollectionId);
+        const canAdd = optionDataCollectionId !== right.created_in_data_collection_id && (right.is_full_access || right.add_data_collection_ids?.includes(optionDataCollectionId));
+        const canRemove = right.is_full_access || right.remove_data_collection_ids?.includes(optionDataCollectionId);
+        let disabled = false;
+        if (isSelected && !canRemove) {
+          disabled = true;
+        } else if (!isSelected && !canAdd) {
+          disabled = true;
+        }
+        return {
+          ...x,
+          disabled,
+        };
+      }).filter(x => {
+        const isSelected = right.shared_in_data_collection_ids?.includes(x.value);
+        if (x.disabled && !isSelected) {
+          return false;
+        }
+        return true;
+      });
+    });
+
+    return {
+      ...caseAbac,
+      itemDataCollections,
+      itemSharedInDataCollections,
+      itemDataCollectionOptions,
+    } satisfies CaseAbacContext;
+  }, [caseAbac]);
+
+  return (
+    <EpiCaseAbacContext.Provider value={sanitizedCaseAbac}>
+      {children}
+    </EpiCaseAbacContext.Provider>
+  );
+};

package/src/context/caseAbac/index.ts

@@ -0,0 +1,3 @@
+export * from './CaseAbacContextProvider';
+export * from './useCaseAbacContext';
+export * from './CaseAbacContext';