@gen-epix/ui 1.14.4 → 1.15.0

package/src/pages/UserInvitationsAdminPage/UserInvitationsAdminPage.tsx

@@ -0,0 +1,218 @@
+import {
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  array,
+  object,
+  string,
+} from 'yup';
+import {
+  MenuItem,
+  ListItemText,
+  ListItemIcon,
+} from '@mui/material';
+import MailIcon from '@mui/icons-material/Mail';
+import PasswordIcon from '@mui/icons-material/Password';
+
+import type { UserInvitation } from '../../api';
+import {
+  OrganizationApi,
+  CommandName,
+} from '../../api';
+import { useOrganizationAdminPolicyMapQuery } from '../../dataHooks/useOrganizationAdminPoliciesQuery';
+import { useOrganizationOptionsQuery } from '../../dataHooks/useOrganizationsQuery';
+import { useUserOptionsQuery } from '../../dataHooks/useUsersQuery';
+import { useArray } from '../../hooks/useArray';
+import type {
+  OptionBase,
+  FormFieldDefinition,
+} from '../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../models/form';
+import { QUERY_KEY } from '../../models/query';
+import type {
+  TableRowParams,
+  TableColumn,
+} from '../../models/table';
+import { TableUtil } from '../../utils/TableUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import { CrudPage } from '../CrudPage';
+import { useInviteUserConstraintsQuery } from '../../dataHooks/useInviteUserConstraintsQuery';
+
+import { UserInvitationShareDialog } from './UserInvitationShareDialog';
+import type { UserInvitationShareDialogRefMethods } from './UserInvitationShareDialog';
+import {
+  UserInvitationConsumeDialog,
+  type UserInvitationConsumeDialogRefMethods,
+} from './UserInvitationConsumeDialog';
+
+type FormFields = Pick<UserInvitation, 'key' | 'organization_id' | 'roles'>;
+
+export const UserInvitationsAdminPage = () => {
+  const { t } = useTranslation();
+  const organizationOptionsQuery = useOrganizationOptionsQuery();
+  const inviteUserConstraintsQuery = useInviteUserConstraintsQuery();
+  const userOptionsQuery = useUserOptionsQuery();
+  const organizationAdminPolicyMapQuery = useOrganizationAdminPolicyMapQuery();
+
+  const organizationOptions = useMemo<OptionBase<string>[]>(() => {
+    if (!organizationOptionsQuery?.options?.length || !inviteUserConstraintsQuery?.data) {
+      return [];
+    }
+    return organizationOptionsQuery.options.filter(option => inviteUserConstraintsQuery.data.organization_ids.includes(option.value));
+
+  }, [organizationOptionsQuery.options, inviteUserConstraintsQuery.data]);
+
+  const roleOptions = useMemo<OptionBase<string>[]>(() => {
+    if (!inviteUserConstraintsQuery?.data) {
+      return [];
+    }
+    return inviteUserConstraintsQuery.data.roles.map(role => ({
+      value: role,
+      label: `ROLE_${role}`,
+    }));
+  }, [inviteUserConstraintsQuery.data]);
+
+  const loadables = useArray([inviteUserConstraintsQuery, organizationOptionsQuery, userOptionsQuery, organizationAdminPolicyMapQuery]);
+
+  const userInvitationShareDialogRef = useRef<UserInvitationShareDialogRefMethods>(null);
+  const userInvitationConsumeDialogRef = useRef<UserInvitationConsumeDialogRefMethods>(null);
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await OrganizationApi.instance.userInvitationsGetAll({ signal }))?.data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: UserInvitation) => {
+    return await OrganizationApi.instance.userInvitationsDeleteOne(item.id);
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    return (await OrganizationApi.instance.inviteUser({
+      ...variables,
+    })).data;
+  }, []);
+
+  const getName = useCallback((item: FormFields) => {
+    return item.key;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      key: string().max(100).transform((value) => value === '' ? undefined : value as string),
+      organization_id: string().uuid4().required().max(100),
+      roles: array().min(1).required(),
+    });
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/require-await
+  const onCreateSuccess = useCallback(async (item: UserInvitation) => {
+    userInvitationShareDialogRef.current.open({ item });
+  }, []);
+
+  const customOnRowClick = useCallback((params: TableRowParams<UserInvitation>) => {
+    userInvitationShareDialogRef.current.open({ item: params.row });
+  }, []);
+
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    const fields: FormFieldDefinition<FormFields>[] = [];
+
+    fields.push(
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'key',
+        label: t`Key`,
+        warningMessage: t`If known, fill in the user's key. This is typically the user's email address, but can be any string depending on the Identity Provider. Filling in a key makes the invitation more secure. If left empty, the invitation can be consumed by anyone with the invite link.`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'organization_id',
+        label: t`Organization`,
+        options: organizationOptions,
+        loading: organizationOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        multiple: true,
+        name: 'roles',
+        label: t`Roles`,
+        options: roleOptions,
+        loading: inviteUserConstraintsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    );
+    return fields;
+  }, [t, organizationOptions, organizationOptionsQuery.isLoading, roleOptions, inviteUserConstraintsQuery.isLoading]);
+
+  const extraActionsFactory = useCallback((params: TableRowParams<UserInvitation>) => {
+    return [
+      (
+        <MenuItem
+          key={'custom-action-1'}
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => userInvitationShareDialogRef.current.open({ item: params.row })}
+        >
+          <ListItemIcon>
+            <MailIcon fontSize={'small'} />
+          </ListItemIcon>
+          <ListItemText>
+            {t`Send invitation`}
+          </ListItemText>
+        </MenuItem>
+      ),
+      (
+        <MenuItem
+          key={'custom-action-2'}
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => userInvitationConsumeDialogRef.current.open({ item: params.row })}
+        >
+          <ListItemIcon>
+            <PasswordIcon fontSize={'small'} />
+          </ListItemIcon>
+          <ListItemText>
+            {t`Consume invitation (advanced)`}
+          </ListItemText>
+        </MenuItem>
+      ),
+    ];
+  }, [t]);
+
+  const tableColumns = useMemo((): TableColumn<UserInvitation>[] => {
+    return [
+      TableUtil.createTextColumn<UserInvitation>({ id: 'key', name: t`Key` }),
+      TableUtil.createOptionsColumn<UserInvitation>({ id: 'organization_id', name: t`Organization`, options: organizationOptions }),
+      TableUtil.createOptionsColumn<UserInvitation>({ id: 'invited_by_user_id', name: t`Invited by user`, options: userOptionsQuery.options }),
+      TableUtil.createOptionsColumn<UserInvitation>({ id: 'roles', name: t`Roles`, options: roleOptions }),
+      TableUtil.createDateColumn<UserInvitation>({ id: 'expires_at', name: t`Expires` }),
+    ];
+  }, [t, organizationOptions, userOptionsQuery.options, roleOptions]);
+
+  return (
+    <>
+      <CrudPage<FormFields, UserInvitation>
+        createItemDialogTitle={t`Create new user invitation`}
+        createItemButtonText={t`Invite user`}
+        createOne={createOne}
+        crudCommandType={CommandName.UserInvitationCrudCommand}
+        customOnRowClick={customOnRowClick}
+        defaultSortByField={'key'}
+        defaultSortDirection={'asc'}
+        deleteOne={deleteOne}
+        extraActionsFactory={extraActionsFactory}
+        fetchAll={fetchAll}
+        formFieldDefinitions={formFieldDefinitions}
+        getName={getName}
+        loadables={loadables}
+        resourceQueryKeyBase={QUERY_KEY.USER_INVITATIONS}
+        schema={schema}
+        tableColumns={tableColumns}
+        testIdAttributes={TestIdUtil.createAttributes('UserInvitationsAdminPage')}
+        title={t`User invitations`}
+        onCreateSuccess={onCreateSuccess}
+      />
+      <UserInvitationShareDialog ref={userInvitationShareDialogRef} />
+      <UserInvitationConsumeDialog ref={userInvitationConsumeDialogRef} />
+    </>
+  );
+};

package/src/pages/UserInvitationsAdminPage/index.ts

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

package/src/pages/UserShareCasePoliciesAdminPage/UserShareCasePoliciesAdminPage.tsx

@@ -0,0 +1,183 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  boolean,
+  object,
+  string,
+} from 'yup';
+
+import type { UserShareCasePolicy } from '../../api';
+import {
+  AbacApi,
+  CommandName,
+} from '../../api';
+import { useColSetsQuery } from '../../dataHooks/useColSetsQuery';
+import { useCaseTypeSetOptionsQuery } from '../../dataHooks/useCaseTypeSetsQuery';
+import { useDataCollectionOptionsQuery } from '../../dataHooks/useDataCollectionsQuery';
+import { useUserOptionsQuery } from '../../dataHooks/useUsersQuery';
+import { useUserCasePolicyNameFactory } from '../../hooks/useUserCasePolicyNameFactory';
+import { useArray } from '../../hooks/useArray';
+import type { FormFieldDefinition } from '../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../models/form';
+import { QUERY_KEY } from '../../models/query';
+import type { TableColumn } from '../../models/table';
+import { TableUtil } from '../../utils/TableUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import { CrudPage } from '../CrudPage';
+
+type FormFields = Pick<
+  UserShareCasePolicy,
+  'user_id' |
+  'data_collection_id' |
+  'case_type_set_id' |
+  'from_data_collection_id' |
+  'add_case' |
+  'remove_case' |
+  'add_case_set' |
+  'remove_case_set' |
+  'is_active'
+>;
+
+export const UserShareCasePoliciesAdminPage = () => {
+  const { t } = useTranslation();
+  const userOptionsQuery = useUserOptionsQuery();
+  const dataCollectionOptionsQuery = useDataCollectionOptionsQuery();
+  const colSetOptionsQuery = useColSetsQuery();
+  const caseTypeSetOptionsQuery = useCaseTypeSetOptionsQuery();
+
+  const nameFactory = useUserCasePolicyNameFactory();
+
+  const loadables = useArray([userOptionsQuery, dataCollectionOptionsQuery, colSetOptionsQuery, caseTypeSetOptionsQuery]);
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await AbacApi.instance.userShareCasePoliciesGetAll({ signal }))?.data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: UserShareCasePolicy) => {
+    return await AbacApi.instance.userShareCasePoliciesDeleteOne(item.id);
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: UserShareCasePolicy) => {
+    return (await AbacApi.instance.userShareCasePoliciesPutOne(item.id, { id: item.id, ...variables })).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    return (await AbacApi.instance.userShareCasePoliciesPostOne(variables)).data;
+  }, []);
+
+  const getName = useCallback((item: UserShareCasePolicy) => {
+    return nameFactory.getName(item);
+  }, [nameFactory]);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      user_id: string().uuid4().required().max(100),
+      data_collection_id: string().uuid4().required().max(100),
+      from_data_collection_id: string().uuid4().required().max(100),
+      case_type_set_id: string().uuid4().required().max(100),
+      add_case: boolean().required(),
+      remove_case: boolean().required(),
+      add_case_set: boolean().required(),
+      remove_case_set: boolean().required(),
+      is_active: boolean().required(),
+    });
+  }, []);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'user_id',
+        label: t`User`,
+        options: userOptionsQuery.options,
+        loading: userOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'data_collection_id',
+        label: t`Data collection`,
+        options: dataCollectionOptionsQuery.options,
+        loading: dataCollectionOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'from_data_collection_id',
+        label: t`From data collection`,
+        options: dataCollectionOptionsQuery.options,
+        loading: dataCollectionOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'case_type_set_id',
+        label: t`Case type set`,
+        options: caseTypeSetOptionsQuery.options,
+        loading: caseTypeSetOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'add_case',
+        label: t`Add case`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'remove_case',
+        label: t`Remove case`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'add_case_set',
+        label: t`Add case set`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'remove_case_set',
+        label: t`Remove case set`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'is_active',
+        label: t`Is active`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [caseTypeSetOptionsQuery.isLoading, caseTypeSetOptionsQuery.options, dataCollectionOptionsQuery.isLoading, dataCollectionOptionsQuery.options, userOptionsQuery.isLoading, userOptionsQuery.options, t]);
+
+  const tableColumns = useMemo((): TableColumn<UserShareCasePolicy>[] => {
+    return [
+      TableUtil.createOptionsColumn<UserShareCasePolicy>({ id: 'user_id', name: t`User`, options: userOptionsQuery.options }),
+      TableUtil.createOptionsColumn<UserShareCasePolicy>({ id: 'data_collection_id', name: t`Data collection`, options: dataCollectionOptionsQuery.options }),
+      TableUtil.createOptionsColumn<UserShareCasePolicy>({ id: 'from_data_collection_id', name: t`From collection`, options: dataCollectionOptionsQuery.options }),
+      TableUtil.createOptionsColumn<UserShareCasePolicy>({ id: 'case_type_set_id', name: t`Case type set`, options: caseTypeSetOptionsQuery.options }),
+
+      TableUtil.createBooleanColumn<UserShareCasePolicy>({ id: 'add_case', name: t`Add case` }),
+      TableUtil.createBooleanColumn<UserShareCasePolicy>({ id: 'remove_case', name: t`Remove case` }),
+      TableUtil.createBooleanColumn<UserShareCasePolicy>({ id: 'add_case_set', name: t`Add case set` }),
+      TableUtil.createBooleanColumn<UserShareCasePolicy>({ id: 'remove_case_set', name: t`Remove case set` }),
+
+      TableUtil.createBooleanColumn<UserShareCasePolicy>({ id: 'is_active', name: t`Active` }),
+    ];
+  }, [caseTypeSetOptionsQuery.options, dataCollectionOptionsQuery.options, userOptionsQuery.options, t]);
+
+  return (
+    <CrudPage<FormFields, UserShareCasePolicy>
+      createOne={createOne}
+      crudCommandType={CommandName.UserShareCasePolicyCrudCommand}
+      createItemDialogTitle={t`Create new user share case policy`}
+      defaultSortByField={'user_id'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      loadables={loadables}
+      resourceQueryKeyBase={QUERY_KEY.USER_SHARE_CASE_POLICIES}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('UserShareCasePoliciesAdminPage')}
+      title={t`User share case policies`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/UserShareCasePoliciesAdminPage/index.ts

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

package/src/pages/UsersAdminPage/UsersAdminPage.tsx

@@ -0,0 +1,240 @@
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  array,
+  boolean,
+  object,
+  string,
+} from 'yup';
+
+import type {
+  ApiPermission,
+  User,
+} from '../../api';
+import {
+  CommandName,
+  OrganizationApi,
+  PermissionType,
+} from '../../api';
+import { useOrganizationOptionsQuery } from '../../dataHooks/useOrganizationsQuery';
+import type {
+  FormFieldDefinition,
+  OptionBase,
+} from '../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../models/form';
+import { QUERY_KEY } from '../../models/query';
+import type { TableColumn } from '../../models/table';
+import { TableUtil } from '../../utils/TableUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import type { CrudPageSubPage } from '../CrudPage';
+import { CrudPage } from '../CrudPage';
+import type { EpiUserRightsDialogRefMethods } from '../../components/epi/EpiUserRightsDialog';
+import { EpiUserRightsDialog } from '../../components/epi/EpiUserRightsDialog';
+import { AuthorizationManager } from '../../classes/managers/AuthorizationManager';
+import { useArray } from '../../hooks/useArray';
+import { useInviteUserConstraintsQuery } from '../../dataHooks/useInviteUserConstraintsQuery';
+
+type FormFields = Pick<User, 'key' | 'email' | 'name' | 'is_active' | 'roles'>;
+
+export const UsersAdminPage = () => {
+  const { t } = useTranslation();
+  const organizationOptionsQuery = useOrganizationOptionsQuery();
+  const epiUserRightsDialogRef = useRef<EpiUserRightsDialogRefMethods>(null);
+  const inviteUserConstraintsQuery = useInviteUserConstraintsQuery();
+  const [tableRoleOptions, setTableRoleOptions] = useState<OptionBase<string>[]>([]);
+  const [formRoleOptions, setFormRoleOptions] = useState<OptionBase<string>[]>([]);
+
+  const loadables = useArray([
+    organizationOptionsQuery,
+    inviteUserConstraintsQuery,
+  ]);
+
+  const onRowsChange = useCallback((items: User[]) => {
+    // Because roles are a string array (instead of an enum or similar), we need to dynamically determine the options for the roles column in the table and in the form.
+    // The options for the form are determined by the invite user constraints endpoint, but if the user doesn't have access to that endpoint, we fall back to using the roles that are currently in use by users in the system.
+    const roles = new Set<string>();
+    items.forEach((user) => {
+      user.roles.forEach((role) => roles.add(role));
+    });
+    const _tableRoleOptions = Array.from(roles).map((role) => ({
+      value: role,
+      label: role,
+    }));
+    setTableRoleOptions(_tableRoleOptions);
+    if (AuthorizationManager.instance.doesUserHavePermission([
+      { command_name: CommandName.RetrieveInviteUserConstraintsCommand, permission_type: PermissionType.EXECUTE },
+    ])) {
+      setFormRoleOptions(inviteUserConstraintsQuery?.data ? inviteUserConstraintsQuery.data.roles.map(role => ({
+        value: role,
+        label: role,
+      })) : _tableRoleOptions);
+    } else {
+      setFormRoleOptions(_tableRoleOptions);
+    }
+  }, [inviteUserConstraintsQuery.data]);
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    const users = (await OrganizationApi.instance.usersGetAll({ signal }))?.data;
+
+    return users;
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: User) => {
+    return (await OrganizationApi.instance.updateUser(item.id, {
+      is_active: variables.is_active,
+      organization_id: item.organization_id,
+      roles: variables.roles,
+    })).data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: User) => {
+    return await OrganizationApi.instance.usersDeleteOne(item.id);
+  }, []);
+
+  const getName = useCallback((item: FormFields) => {
+    return item.email;
+  }, []);
+
+  const canEditItem = useCallback((item: User) => {
+    return AuthorizationManager.instance.user.email !== item.email;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      key: string().optional(),
+      email: string().email().nullable(),
+      name: string().nullable(),
+      roles: array().required().min(1),
+      is_active: boolean().required(),
+    });
+  }, []);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'key',
+        label: t`Key`,
+        disabled: true,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'email',
+        label: t`Email`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'name',
+        label: t`Name`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'roles',
+        label: t`Roles`,
+        options: formRoleOptions,
+        multiple: true,
+        loading: inviteUserConstraintsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN,
+        name: 'is_active',
+        label: t`Is active`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [t, formRoleOptions, inviteUserConstraintsQuery.isLoading]);
+
+  const tableColumns = useMemo((): TableColumn<User>[] => {
+    return [
+      TableUtil.createOptionsColumn<User>({ id: 'organization_id', name: t`Organization`, options: organizationOptionsQuery.options }),
+      TableUtil.createTextColumn<User>({ id: 'key', name: t`Key` }),
+      TableUtil.createTextColumn<User>({ id: 'email', name: t`E-Mail` }),
+      TableUtil.createTextColumn<User>({ id: 'name', name: t`Name`, advancedSort: true }),
+      TableUtil.createOptionsColumn<User>({ id: 'roles', name: t`Roles`, options: tableRoleOptions }),
+      TableUtil.createBooleanColumn<User>({ id: 'is_active', name: t`Is active` }),
+    ];
+  }, [organizationOptionsQuery.options, tableRoleOptions, t]);
+
+  const getOptimisticUpdateIntermediateItem = useCallback((variables: FormFields, previousItem: User): User => {
+    return {
+      id: previousItem.id,
+      is_active: previousItem.is_active,
+      organization_id: previousItem.organization_id,
+      name: previousItem.name,
+      key: previousItem.email,
+      email: previousItem.email,
+      ...variables,
+    };
+  }, []);
+
+  const subPages = useMemo<CrudPageSubPage<User>[]>(() => {
+    const doesUserHavePermissionToViewEffectiveRights = AuthorizationManager.instance.doesUserHavePermission([
+      { command_name: CommandName.ColSetMemberCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.CaseTypeSetCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.ColSetCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.CaseTypeSetMemberCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.CaseTypeSetCategoryCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.DataCollectionCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.OrganizationAccessCasePolicyCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.OrganizationShareCasePolicyCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.UserAccessCasePolicyCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.UserShareCasePolicyCrudCommand, permission_type: PermissionType.READ },
+      { command_name: CommandName.ColCrudCommand, permission_type: PermissionType.READ },
+    ]);
+
+    if (!doesUserHavePermissionToViewEffectiveRights) {
+      return [];
+    }
+    return [
+      {
+        label: t`Test effective rights`,
+        getPathName: (item: User) => `/management/users/${item.id}/effective-rights-tester`,
+      } satisfies CrudPageSubPage<User>,
+      {
+        label: t`View effective rights`,
+        getPathName: (item: User) => `/management/users/${item.id}/effective-rights`,
+      } satisfies CrudPageSubPage<User>,
+    ];
+
+  }, [t]);
+
+
+  const extraUpdateOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.UpdateUserCommand, permission_type: PermissionType.EXECUTE },
+  ], []);
+  const extraDeleteOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.UserCrudCommand, permission_type: PermissionType.DELETE },
+  ], []);
+
+  return (
+    <>
+      <CrudPage<FormFields, User>
+        loadables={loadables}
+        canEditItem={canEditItem}
+        subPages={subPages}
+        extraUpdateOnePermissions={extraUpdateOnePermissions}
+        extraDeleteOnePermissions={extraDeleteOnePermissions}
+        createItemDialogTitle={t`Create new user`}
+        defaultSortByField={'name'}
+        defaultSortDirection={'asc'}
+        deleteOne={deleteOne}
+        fetchAll={fetchAll}
+        formFieldDefinitions={formFieldDefinitions}
+        getName={getName}
+        getOptimisticUpdateIntermediateItem={getOptimisticUpdateIntermediateItem}
+        resourceQueryKeyBase={QUERY_KEY.USERS}
+        schema={schema}
+        tableColumns={tableColumns}
+        testIdAttributes={TestIdUtil.createAttributes('UsersAdminPage')}
+        title={t`Users`}
+        updateOne={updateOne}
+        onRowsChange={onRowsChange}
+      />
+      <EpiUserRightsDialog ref={epiUserRightsDialogRef} />
+    </>
+  );
+};

package/src/pages/UsersAdminPage/index.ts

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