@gen-epix/ui 1.14.4 → 1.15.0

package/src/pages/AcceptInvitationPage/AcceptInvitationPage.tsx

@@ -0,0 +1,96 @@
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import {
+  Button,
+  Typography,
+  Box,
+} from '@mui/material';
+import {
+  useCallback,
+  useState,
+} from 'react';
+
+import { OrganizationApi } from '../../api';
+import { ConfigManager } from '../../classes/managers/ConfigManager';
+import { WindowManager } from '../../classes/managers/WindowManager';
+import { PageContainer } from '../../components/ui/PageContainer';
+import { ResponseHandler } from '../../components/ui/ResponseHandler';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import { useQueryMemo } from '../../hooks/useQueryMemo';
+
+export const AcceptInvitationPage = () => {
+  const { token } = useParams();
+  const [shouldRegister, setShouldRegister] = useState(false);
+
+  const { data, error, isLoading } = useQueryMemo({
+    queryKey: QueryUtil.getUserRegistrationsKey(token),
+    queryFn: async ({ signal }) => {
+      const response = await OrganizationApi.instance.userRegistrationsPostOne(token, { signal });
+      return response.data;
+    },
+    enabled: shouldRegister,
+    gcTime: 0,
+    staleTime: 0,
+  });
+
+  const { t } = useTranslation();
+
+  const onGoToHomePageButtonClick = useCallback(() => {
+    WindowManager.instance.window.location.href = '/';
+  }, []);
+
+  const onCompleteRegistrationButtonClick = useCallback(() => {
+    setShouldRegister(true);
+  }, []);
+
+  return (
+    <PageContainer
+      singleAction
+      testIdAttributes={TestIdUtil.createAttributes('AcceptInvitationPage')}
+      title={t`Invitation`}
+    >
+      <ResponseHandler
+        enabled={shouldRegister}
+        error={error}
+        isLoading={isLoading}
+      >
+        {!data && (
+          <>
+            <Box marginY={2}>
+              <Typography>
+                {t('You have been invited to join {{applicationName}}.', { applicationName: ConfigManager.instance.config.applicationName })}
+              </Typography>
+            </Box>
+            <Box marginY={2}>
+              <Button
+                color={'primary'}
+                type={'submit'}
+                onClick={onCompleteRegistrationButtonClick}
+              >
+                {t`Complete registration`}
+              </Button>
+            </Box>
+          </>
+        )}
+        {data && (
+          <>
+            <Box>
+              <Typography>
+                {t('You have been successfully registered to {{applicationName}}.', { applicationName: ConfigManager.instance.config.applicationName })}
+              </Typography>
+            </Box>
+            <Box marginY={2}>
+              <Button
+                color={'primary'}
+                onClick={onGoToHomePageButtonClick}
+              >
+                {t`Click here to visit the home page`}
+              </Button>
+            </Box>
+          </>
+        )}
+      </ResponseHandler>
+    </PageContainer>
+  );
+};

package/src/pages/AcceptInvitationPage/index.ts

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

package/src/pages/AdminPage/AdminPage.tsx

@@ -0,0 +1,164 @@
+import { useTranslation } from 'react-i18next';
+import {
+  Outlet,
+  useLocation,
+} from 'react-router-dom';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  useTheme,
+  CardHeader,
+  CardActionArea,
+  Divider,
+} from '@mui/material';
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+
+import { AuthorizationManager } from '../../classes/managers/AuthorizationManager';
+import { RouterManager } from '../../classes/managers/RouterManager';
+import { PageContainer } from '../../components/ui/PageContainer';
+import { ADMIN_PAGE_CATEGORY } from '../../models/admin';
+import type { MyNonIndexRouteObject } from '../../models/reactRouter';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+
+
+type Category = {
+  name: string;
+  label: string;
+  items: MyNonIndexRouteObject[];
+};
+
+export type AdminPageProps = {
+  readonly routes: MyNonIndexRouteObject[];
+};
+
+export const AdminPage = ({ routes }: AdminPageProps) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const theme = useTheme();
+  const authorizationManager = useMemo(() => AuthorizationManager.instance, []);
+
+  const menuItems = useMemo(() => {
+    const items = routes
+      .map(r => r.children?.length ? r.children.find(child => child.index) as MyNonIndexRouteObject : r)
+      .filter(r => {
+        const hasPermission = authorizationManager.doesUserHavePermission(r.handle.requiredPermissions);
+        return !r.handle?.hidden && hasPermission;
+      });
+    return items;
+  }, [authorizationManager, routes]);
+
+  const categoryToLabelMap = useMemo<Record<ADMIN_PAGE_CATEGORY, string>>(() => {
+    return {
+      [ADMIN_PAGE_CATEGORY.ACCESS_RIGHTS]: t`Access rights`,
+      [ADMIN_PAGE_CATEGORY.REFERENCE_DATA]: t`Reference data`,
+      [ADMIN_PAGE_CATEGORY.SYSTEM]: t`System`,
+      [ADMIN_PAGE_CATEGORY.USERS_AND_ORGANIZATIONS]: t`Users and organizations`,
+      [ADMIN_PAGE_CATEGORY.HELPERS]: t`Helpers`,
+    };
+  }, [t]);
+
+
+  const categories = useMemo<Category[]>(() => {
+    return [
+      ADMIN_PAGE_CATEGORY.USERS_AND_ORGANIZATIONS,
+      ADMIN_PAGE_CATEGORY.ACCESS_RIGHTS,
+      ADMIN_PAGE_CATEGORY.SYSTEM,
+      ADMIN_PAGE_CATEGORY.REFERENCE_DATA,
+      ADMIN_PAGE_CATEGORY.HELPERS,
+    ].map(category => {
+      return {
+        name: category,
+        label: categoryToLabelMap[category],
+        items: menuItems.filter(r => r.handle.category as ADMIN_PAGE_CATEGORY === category),
+      };
+    }).filter(c => c.items.length);
+  }, [categoryToLabelMap, menuItems]);
+
+  const onCardClick = useCallback(async (path: string) => {
+    await RouterManager.instance.router.navigate(path);
+  }, []);
+
+  if (location?.pathname !== '/management') {
+    return (
+      <Outlet />
+    );
+  }
+
+  return (
+    <PageContainer
+      showBreadcrumbs
+      testIdAttributes={TestIdUtil.createAttributes('AdminPage')}
+      title={t`Management`}
+    >
+      <Box>
+        {categories.map(category => (
+          <Box
+            key={category.name}
+            sx={{
+              marginTop: 1,
+              marginBottom: 3,
+            }}
+          >
+            <Typography
+              component={'h2'}
+              sx={{
+                marginBottom: 1,
+              }}
+              variant={'h3'}
+            >
+              {category.label}
+            </Typography>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(1, 1fr)',
+                gap: theme.spacing(1),
+                [theme.breakpoints.up('md')]: {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                },
+                [theme.breakpoints.up('lg')]: {
+                  gridTemplateColumns: 'repeat(3, 1fr)',
+                },
+                [theme.breakpoints.up('xl')]: {
+                  gridTemplateColumns: 'repeat(4, 1fr)',
+                },
+              }}
+            >
+              {category.items.map(item => (
+                <Card
+                  key={item.path}
+                  square
+                  sx={{
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <CardActionArea
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick={async () => onCardClick(item.path)}
+                  >
+                    <CardHeader title={item.handle.title} />
+                    <CardContent>
+                      {item.handle.subTitle}
+                    </CardContent>
+                  </CardActionArea>
+                </Card>
+              ))}
+            </Box>
+            <Divider
+              sx={{
+                marginTop: 2,
+                marginBottom: 2,
+              }}
+            />
+          </Box>
+        ))}
+      </Box>
+    </PageContainer>
+  );
+};

package/src/pages/AdminPage/index.ts

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

package/src/pages/CaseSetStatusAdminPage/CaseSetStatusAdminPage.tsx

@@ -0,0 +1,98 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  object,
+  string,
+} from 'yup';
+
+import { CrudPage } from '../CrudPage';
+import type { CaseSetStatus } from '../../api';
+import {
+  CaseApi,
+  CommandName,
+} from '../../api';
+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';
+
+type FormFields = Pick<CaseSetStatus, 'name' | 'description'>;
+
+export const CaseSetStatusAdminPage = () => {
+  const { t } = useTranslation();
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await CaseApi.instance.caseSetStatusesGetAll({ signal }))?.data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: CaseSetStatus) => {
+    return await CaseApi.instance.caseSetStatusesDeleteOne(item.id);
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: CaseSetStatus) => {
+    return (await CaseApi.instance.caseSetStatusesPutOne(item.id, { id: item.id, ...variables })).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    return (await CaseApi.instance.caseSetStatusesPostOne(variables)).data;
+  }, []);
+
+  const getName = useCallback((item: FormFields) => {
+    return item.name;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      name: string().extendedAlphaNumeric().required().max(100),
+      description: string().freeFormText().required().max(1000),
+    });
+  }, []);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'name',
+        label: t`Name`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'description',
+        label: t`Description`,
+        multiline: true,
+        rows: 5,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [t]);
+
+  const tableColumns = useMemo((): TableColumn<CaseSetStatus>[] => {
+    return [
+      TableUtil.createTextColumn<CaseSetStatus>({ id: 'name', name: t`Name` }),
+    ];
+  }, [t]);
+
+  return (
+    <CrudPage<FormFields, CaseSetStatus>
+      createItemDialogTitle={t`Create new case set status`}
+      createOne={createOne}
+      crudCommandType={CommandName.CaseSetStatusCrudCommand}
+      defaultSortByField={'name'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      resourceQueryKeyBase={QUERY_KEY.CASE_SET_STATUSES}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('CaseSetStatusAdminPage')}
+      title={t`Case set statuses`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/CaseSetStatusAdminPage/index.ts

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

package/src/pages/CaseTypeSetCategoriesAdminPage/CaseTypeSetCategoriesAdminPage.tsx

@@ -0,0 +1,108 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  object,
+  string,
+} from 'yup';
+
+import type { CaseTypeSetCategory } from '../../api';
+import {
+  CaseApi,
+  CommandName,
+} from '../../api';
+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';
+import { NumberUtil } from '../../utils/NumberUtil';
+
+type FormFields = Pick<CaseTypeSetCategory, 'name' | 'rank' | 'description'>;
+
+export const CaseTypeSetCategoriesAdminPage = () => {
+  const { t } = useTranslation();
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await CaseApi.instance.caseTypeSetCategoriesGetAll({ signal }))?.data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: CaseTypeSetCategory) => {
+    return await CaseApi.instance.caseTypeSetCategoriesDeleteOne(item.id);
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: CaseTypeSetCategory) => {
+    return (await CaseApi.instance.caseTypeSetCategoriesPutOne(item.id, { id: item.id, ...variables })).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    return (await CaseApi.instance.caseTypeSetCategoriesPostOne(variables)).data;
+  }, []);
+
+  const getName = useCallback((item: CaseTypeSetCategory) => {
+    return item.name;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      name: string().extendedAlphaNumeric().required().max(100),
+      rank: NumberUtil.yup.required().min(0).integer(),
+      description: string().freeFormText().required().max(1000),
+    });
+  }, []);
+
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'name',
+        label: t`Name`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'description',
+        label: t`Description`,
+        multiline: true,
+        rows: 5,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'rank',
+        label: t`Rank`,
+        type: 'number',
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [t]);
+
+  const tableColumns = useMemo((): TableColumn<CaseTypeSetCategory>[] => {
+    return [
+      TableUtil.createTextColumn<CaseTypeSetCategory>({ id: 'name', name: t`Name` }),
+      TableUtil.createNumberColumn<CaseTypeSetCategory>({ id: 'rank', name: t`Rank` }),
+    ];
+  }, [t]);
+
+  return (
+    <CrudPage<FormFields, CaseTypeSetCategory>
+      createOne={createOne}
+      crudCommandType={CommandName.CaseTypeSetCategoryCrudCommand}
+      createItemDialogTitle={t`Create new case type set category`}
+      defaultSortByField={'name'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      resourceQueryKeyBase={QUERY_KEY.CASE_TYPE_SET_CATEGORIES}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('CaseTypeSetCategoriesAdminPage')}
+      title={t`Case type set categories`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/CaseTypeSetCategoriesAdminPage/index.ts

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

package/src/pages/CaseTypeSetsAdminPage/CaseTypeSetsAdminPage.tsx

@@ -0,0 +1,200 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  array,
+  object,
+  string,
+} from 'yup';
+import omit from 'lodash/omit';
+
+import type {
+  CaseTypeSet,
+  ApiPermission,
+} from '../../api';
+import {
+  CaseApi,
+  CommandName,
+  PermissionType,
+} from '../../api';
+import { useCaseTypeOptionsQuery } from '../../dataHooks/useCaseTypesQuery';
+import { useCaseTypeSetCategoryOptionsQuery } from '../../dataHooks/useCaseTypeSetCategoriesQuery';
+import { useCaseTypeSetMembersQuery } from '../../dataHooks/useCaseTypeSetMembersQuery';
+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';
+import { NumberUtil } from '../../utils/NumberUtil';
+
+interface TableData extends CaseTypeSet {
+  caseTypeIds?: string[];
+}
+
+type FormFields = Pick<TableData, 'name' | 'case_type_set_category_id' | 'caseTypeIds' | 'rank' | 'description'>;
+
+export const CaseTypeSetsAdminPage = () => {
+  const { t } = useTranslation();
+  const caseTypeSetCategoryOptionsQuery = useCaseTypeSetCategoryOptionsQuery();
+  const caseTypeSetMembersQuery = useCaseTypeSetMembersQuery();
+  const caseTypeOptionsQuery = useCaseTypeOptionsQuery();
+
+  const loadables = useArray([caseTypeOptionsQuery, caseTypeSetCategoryOptionsQuery]);
+
+  const fetchAll = useCallback(async (signal: AbortSignal): Promise<CaseTypeSet[]> => {
+    const caseTypesSets = (await CaseApi.instance.caseTypeSetsGetAll({ signal }))?.data;
+    return caseTypesSets;
+  }, []);
+
+  const deleteOne = useCallback(async (item: CaseTypeSet) => {
+    return await CaseApi.instance.caseTypeSetsDeleteOne(item.id);
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: CaseTypeSet) => {
+    await CaseApi.instance.caseTypeSetsPutCaseTypes(item.id, {
+      case_type_set_members: variables.caseTypeIds.map(case_type_id => ({
+        case_type_id,
+        case_type_set_id: item.id,
+      })),
+    });
+    return (await CaseApi.instance.caseTypeSetsPutOne(item.id, omit({ id: item.id, ...variables }, ['caseTypeIds']))).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    const resultItem = (await CaseApi.instance.caseTypeSetsPostOne(omit(variables, ['caseTypeIds']))).data;
+    await CaseApi.instance.caseTypeSetsPutCaseTypes(resultItem.id, {
+      case_type_set_members: variables.caseTypeIds.map(case_type_id => ({
+        case_type_id,
+        case_type_set_id: resultItem.id,
+      })),
+    });
+    return resultItem;
+  }, []);
+
+  const getName = useCallback((item: CaseTypeSet) => {
+    return item.name;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      name: string().extendedAlphaNumeric().required().max(100),
+      rank: NumberUtil.yup.required().min(0).integer(),
+      case_type_set_category_id: string().uuid4().required(),
+      caseTypeIds: array(),
+      description: string().freeFormText().required().max(1000),
+    });
+  }, []);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE,
+        name: 'case_type_set_category_id',
+        label: t`Category`,
+        options: caseTypeSetCategoryOptionsQuery.options,
+        loading: caseTypeSetCategoryOptionsQuery.isLoading,
+      } 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.TEXTFIELD,
+        name: 'rank',
+        label: t`Rank`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'description',
+        label: t`Description`,
+        multiline: true,
+        rows: 5,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST,
+        name: 'caseTypeIds',
+        label: t`Case types`,
+        options: caseTypeOptionsQuery.options,
+        loading: caseTypeOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [caseTypeOptionsQuery.isLoading, caseTypeOptionsQuery.options, caseTypeSetCategoryOptionsQuery.isLoading, caseTypeSetCategoryOptionsQuery.options, t]);
+
+  const tableColumns = useMemo((): TableColumn<TableData>[] => {
+    return [
+      TableUtil.createOptionsColumn<TableData>({ id: 'case_type_set_category_id', name: t`Category`, options: caseTypeSetCategoryOptionsQuery.options }),
+      TableUtil.createTextColumn<TableData>({ id: 'name', name: t`Name` }),
+      TableUtil.createNumberColumn<TableData>({ id: 'rank', name: t`Rank` }),
+      {
+        id: 'caseTypeCount',
+        type: 'number',
+        headerName: t`Case type count`,
+        valueGetter: (item) => item.row.caseTypeIds.length,
+        displayValueGetter: (item) => `${item.row.caseTypeIds.length} / ${caseTypeOptionsQuery.options.length}`,
+        widthFlex: 0.5,
+        textAlign: 'right',
+        isInitiallyVisible: true,
+      },
+    ];
+  }, [caseTypeOptionsQuery.options.length, caseTypeSetCategoryOptionsQuery.options, t]);
+
+  const extraCreateOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.CaseTypeSetCaseTypeUpdateAssociationCommand, permission_type: PermissionType.EXECUTE },
+  ], []);
+  const extraDeleteOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.CaseTypeSetCaseTypeUpdateAssociationCommand, permission_type: PermissionType.EXECUTE },
+  ], []);
+  const extraUpdateOnePermissions = useMemo<ApiPermission[]>(() => [
+    { command_name: CommandName.CaseTypeSetCaseTypeUpdateAssociationCommand, permission_type: PermissionType.EXECUTE },
+  ], []);
+
+
+  const convertToTableData = useCallback((items: CaseTypeSet[]) => {
+    if (!items || !caseTypeSetMembersQuery.data) {
+      return [];
+    }
+    return items.map<TableData>((item) => {
+      const caseTypeIds = caseTypeSetMembersQuery.data.filter(member => member.case_type_set_id === item.id).map(member => member.case_type_id);
+      return {
+        ...item,
+        caseTypeIds,
+      } satisfies TableData;
+    });
+  }, [caseTypeSetMembersQuery.data]);
+
+  const associationQueryKeys = useMemo(() => [
+    [QUERY_KEY.CASE_TYPE_SET_MEMBERS],
+  ], []);
+
+  return (
+    <CrudPage<FormFields, CaseTypeSet, TableData>
+      associationQueryKeys={associationQueryKeys}
+      convertToTableData={convertToTableData}
+      createOne={createOne}
+      crudCommandType={CommandName.CaseTypeSetCrudCommand}
+      createItemDialogTitle={t`Create new case type set`}
+      defaultSortByField={'name'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      extraCreateOnePermissions={extraCreateOnePermissions}
+      extraDeleteOnePermissions={extraDeleteOnePermissions}
+      extraUpdateOnePermissions={extraUpdateOnePermissions}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      loadables={loadables}
+      resourceQueryKeyBase={QUERY_KEY.CASE_TYPE_SETS}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('CaseTypeSetsAdminPage')}
+      title={t`Case types sets`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/CaseTypeSetsAdminPage/index.ts

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