From 13557dab9cb9a848e236ebd48875c7ed04e1929e Mon Sep 17 00:00:00 2001
From: Daniel Koch <koch@terrestris.de>
Date: Thu, 2 Mar 2023 17:14:17 +0100
Subject: [PATCH 1/5] feat: init the GroupPermissionGrid

---
 .../GroupPermissionGrid.spec.tsx              |   9 +
 .../GroupPermissionGrid.tsx                   | 114 +++++++++++
 .../InstancePermissionGrid.less}              |   2 +-
 .../InstancePermissionGrid.spec.tsx           |   9 +
 .../InstancePermissionGrid.tsx}               | 182 +++++++++---------
 .../PermissionModal/PermissionModal.less      |   8 +
 .../PermissionModal/PermissionModal.spec.tsx  |   9 +
 .../PermissionModal/PermissionModal.tsx}      | 145 +++++++-------
 .../PermissionSelect.spec.tsx                 |   0
 .../PermissionSelect/PermissionSelect.tsx     |   0
 .../UserPermissionGrid.less                   |  31 +++
 .../UserPermissionGrid.spec.tsx               |   0
 .../UserPermissionGrid/UserPermissionGrid.tsx | 156 +++++++++++++++
 .../UserPermissionModal.less                  |  38 ----
 .../UserPermissionModal.spec.tsx              |   9 -
 .../GeneralEntityForm/GeneralEntityForm.tsx   |  18 +-
 .../UserAvatar/UserAvatar.less                |   0
 .../UserAvatar/UserAvatar.spec.tsx            |   0
 .../UserAvatar/UserAvatar.tsx                 |   2 +-
 src/i18n/translations.ts                      |  78 +++++---
 20 files changed, 564 insertions(+), 246 deletions(-)
 create mode 100644 src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.spec.tsx
 create mode 100644 src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx
 rename src/Component/FormField/{UserPermissionGrid/UserPermissionGrid.less => Permission/InstancePermissionGrid/InstancePermissionGrid.less} (92%)
 create mode 100644 src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.spec.tsx
 rename src/Component/FormField/{UserPermissionGrid/UserPermissionGrid.tsx => Permission/InstancePermissionGrid/InstancePermissionGrid.tsx} (53%)
 create mode 100644 src/Component/FormField/Permission/PermissionModal/PermissionModal.less
 create mode 100644 src/Component/FormField/Permission/PermissionModal/PermissionModal.spec.tsx
 rename src/Component/FormField/{UserPermissionGrid/UserPermissionModal/UserPermissionModal.tsx => Permission/PermissionModal/PermissionModal.tsx} (53%)
 rename src/Component/FormField/{UserPermissionGrid => Permission}/PermissionSelect/PermissionSelect.spec.tsx (100%)
 rename src/Component/FormField/{UserPermissionGrid => Permission}/PermissionSelect/PermissionSelect.tsx (100%)
 create mode 100644 src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.less
 rename src/Component/FormField/{ => Permission}/UserPermissionGrid/UserPermissionGrid.spec.tsx (100%)
 create mode 100644 src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx
 delete mode 100644 src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.less
 delete mode 100644 src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.spec.tsx
 rename src/Component/{FormField/UserPermissionGrid => }/UserAvatar/UserAvatar.less (100%)
 rename src/Component/{FormField/UserPermissionGrid => }/UserAvatar/UserAvatar.spec.tsx (100%)
 rename src/Component/{FormField/UserPermissionGrid => }/UserAvatar/UserAvatar.tsx (95%)

diff --git a/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.spec.tsx b/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.spec.tsx
new file mode 100644
index 00000000..b436baf4
--- /dev/null
+++ b/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.spec.tsx
@@ -0,0 +1,9 @@
+import GroupPermissionGrid from './GroupPermissionGrid';
+
+describe('<GroupPermissionGrid />', () => {
+
+  it('is defined', () => {
+    expect(GroupPermissionGrid).not.toBeUndefined();
+  });
+
+});
diff --git a/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx b/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx
new file mode 100644
index 00000000..5e41b45c
--- /dev/null
+++ b/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx
@@ -0,0 +1,114 @@
+import React, {
+  useCallback
+} from 'react';
+
+import {
+  useTranslation
+} from 'react-i18next';
+
+import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
+import GroupInstancePermission from '@terrestris/shogun-util/dist/model/security/GroupInstancePermission';
+import Group from '@terrestris/shogun-util/dist/model/Group';
+import BaseEntity from '@terrestris/shogun-util/dist/model/BaseEntity';
+import GenericService from '@terrestris/shogun-util/dist/service/GenericService';
+
+import InstancePermissionGrid, {
+  DataType,
+  InstancePermissionGridProps
+} from '../InstancePermissionGrid/InstancePermissionGrid';
+
+import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
+
+export interface GroupPermissionGridProps extends Omit<InstancePermissionGridProps,
+  'getInstancePermissions' | 'setInstancePermission' | 'deleteInstancePermission' | 'toDataType' |
+  'nameColumnDefinition' | 'getReferences' | 'toTag' | 'modalProps'> { };
+
+const GroupPermissionGrid: React.FC<GroupPermissionGridProps> = ({
+  entityType,
+  ...passThroughProps
+}) => {
+
+  const { t } = useTranslation();
+  const client = useSHOGunAPIClient();
+
+  const service = useCallback(() => {
+    return client[entityType]() as GenericService<BaseEntity>;
+  }, [client, entityType]);
+
+  const getGroupInstancePermissions = async (id: number) => {
+    return await service().getGroupInstancePermissions(id);
+  };
+
+  const setGroupInstancePermission = async (id: number, referenceId: number, permission: PermissionCollectionType) => {
+    await service().setGroupInstancePermission(id, referenceId, permission);
+  };
+
+  const deleteGroupInstancePermission = async (id: number, referenceId: number) => {
+    await service().deleteGroupInstancePermission(id, referenceId);
+  };
+
+  const getGroups = async () => {
+    return await client.group().findAll();
+  };
+
+  const toGroupDataType = (permission: GroupInstancePermission): DataType<Group> => {
+    return {
+      key: permission.group?.id,
+      reference: permission.group,
+      name: permission.group?.providerDetails?.name,
+      permission: permission.permission?.name
+    };
+  };
+
+  const toTag = (group: Group) => {
+    return {
+      value: group.id,
+      filterValues: [
+        group.id,
+        group.authProviderId,
+        group.providerDetails?.name
+      ],
+      label: (
+        <span>{group.providerDetails.name}</span>
+      )
+    };
+  };
+
+  const colDefinition = () => {
+    return {
+      sorter: (a: DataType<Group>, b: DataType<Group>) => {
+        return a.reference?.providerDetails?.name?.localeCompare(b.reference?.providerDetails?.name);
+      }
+    };
+  };
+
+  return (
+    <InstancePermissionGrid
+      getInstancePermissions={getGroupInstancePermissions}
+      setInstancePermission={setGroupInstancePermission}
+      deleteInstancePermission={deleteGroupInstancePermission}
+      toDataType={toGroupDataType}
+      nameColumnDefinition={colDefinition()}
+      entityType={entityType}
+      modalProps={{
+        toTag: toTag,
+        getReferences: getGroups,
+        setInstancePermission: setGroupInstancePermission,
+        descriptionText: t('GroupPermissionGrid.modal.description'),
+        referenceLabelText: t('GroupPermissionGrid.modal.referenceSelectLabel'),
+        referenceExtraText: t('GroupPermissionGrid.modal.referenceSelectExtra'),
+        referenceSelectPlaceholderText: t('GroupPermissionGrid.modal.referenceSelectPlaceholder'),
+        permissionSelectLabel: t('GroupPermissionGrid.modal.permissionSelectLabel'),
+        permissionSelectExtra: t('GroupPermissionGrid.modal.permissionSelectExtra'),
+        saveErrorMsg: (placeholder: string) => {
+          return t('GroupPermissionGrid.modal.saveErrorMsg', {
+            referenceIds: placeholder
+          });
+        }
+      }}
+      {...passThroughProps}
+    />
+  );
+};
+
+export default GroupPermissionGrid;
diff --git a/src/Component/FormField/UserPermissionGrid/UserPermissionGrid.less b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.less
similarity index 92%
rename from src/Component/FormField/UserPermissionGrid/UserPermissionGrid.less
rename to src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.less
index b719fd01..89645e64 100644
--- a/src/Component/FormField/UserPermissionGrid/UserPermissionGrid.less
+++ b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.less
@@ -1,4 +1,4 @@
-.permission-grid {
+.instance-permission-grid {
   .operation-column {
     font-size: 1.5em;
     text-align: center;
diff --git a/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.spec.tsx b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.spec.tsx
new file mode 100644
index 00000000..ab777db6
--- /dev/null
+++ b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.spec.tsx
@@ -0,0 +1,9 @@
+import InstancePermissionGrid from './InstancePermissionGrid';
+
+describe('<InstancePermissionGrid />', () => {
+
+  it('is defined', () => {
+    expect(InstancePermissionGrid).not.toBeUndefined();
+  });
+
+});
diff --git a/src/Component/FormField/UserPermissionGrid/UserPermissionGrid.tsx b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.tsx
similarity index 53%
rename from src/Component/FormField/UserPermissionGrid/UserPermissionGrid.tsx
rename to src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.tsx
index cd7c2752..0ae13654 100644
--- a/src/Component/FormField/UserPermissionGrid/UserPermissionGrid.tsx
+++ b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.tsx
@@ -1,8 +1,9 @@
-import './UserPermissionGrid.less';
-
-import React, {useEffect,
+import React, {
+  useEffect,
+  useState,
   useRef,
-  useState} from 'react';
+  useCallback
+} from 'react';
 
 import {
   DeleteOutlined,
@@ -18,9 +19,11 @@ import {
   Table,
   Tooltip
 } from 'antd';
-import type {ColumnsType,
+import type {
+  ColumnsType,
   ColumnType,
-  TableProps} from 'antd/es/table';
+  TableProps
+} from 'antd/es/table';
 import Logger from 'js-logger';
 import _cloneDeep from 'lodash/cloneDeep';
 import _get from 'lodash/get';
@@ -31,34 +34,49 @@ import {
 } from 'react-i18next';
 
 import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
-import UserInstancePermission from '@terrestris/shogun-util/dist/model/security/UserInstancePermission';
+import Group from '@terrestris/shogun-util/dist/model/Group';
+import InstancePermission from '@terrestris/shogun-util/dist/model/security/InstancePermission';
 import User from '@terrestris/shogun-util/dist/model/User';
 
-import useSHOGunAPIClient from '../../../Hooks/useSHOGunAPIClient';
+import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
+import PermissionModal, {
+  PermissionModalProps
+} from '../PermissionModal/PermissionModal';
+import PermissionSelect from '../PermissionSelect/PermissionSelect';
 
-import PermissionSelect from './PermissionSelect/PermissionSelect';
-import UserAvatar from './UserAvatar/UserAvatar';
-import UserPermissionModal from './UserPermissionModal/UserPermissionModal';
+import './InstancePermissionGrid.less';
 
-interface DataType {
-  key: number | undefined;
-  user: User;
+export interface DataType<T = User | Group> {
+  key: number;
+  reference: T;
   name: string;
   permission: PermissionCollectionType;
 }
 
-export interface UserPermissionGridProps extends TableProps<DataType> {
+export interface InstancePermissionGridProps extends TableProps<DataType> {
   entityType: string;
   entityId: number;
-}
+  getInstancePermissions: (entityId: number) => Promise<InstancePermission[]>;
+  setInstancePermission: (entityId: number, referenceId: number, permission: PermissionCollectionType) => Promise<void>;
+  deleteInstancePermission: (entityId: number, referenceId: number) => Promise<void>;
+  toDataType: (permission: InstancePermission) => DataType;
+  nameColumnDefinition: ColumnType<DataType>;
+  modalProps: Omit<PermissionModalProps, 'entityId' | 'entityType'>;
+};
 
-const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
+const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
   entityType,
   entityId,
+  getInstancePermissions,
+  setInstancePermission,
+  deleteInstancePermission,
+  toDataType,
+  modalProps,
+  nameColumnDefinition,
   ...passThroughProps
 }) => {
   const [permissionsLoading, setPermissionsLoading] = useState(false);
-  const [permissions, setPermissions] = useState<UserInstancePermission[]>([]);
+  const [permissions, setPermissions] = useState<InstancePermission[]>([]);
   const [data, setData] = useState<DataType[]>([]);
 
   const searchInput = useRef<InputRef>(null);
@@ -66,35 +84,32 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
   const { t } = useTranslation();
   const client = useSHOGunAPIClient();
 
-  useEffect(() => {
-    (async () => {
-      setPermissionsLoading(true);
+  const getPermissions = useCallback(async () => {
+    setPermissionsLoading(true);
 
-      if (Number.isFinite(entityId)) {
-        try {
-          setPermissions(await (client as any)[entityType]().getUserInstancePermissions(entityId));
-        } catch (error) {
-          message.error(t('UserPermissionGrid.loadErrorMsg'));
-          Logger.error(error);
-        } finally {
-          setPermissionsLoading(false);
-        }
-      }
-    })();
-  }, [entityId, entityType, client, t]);
+    if (!Number.isFinite(entityId)) {
+      return;
+    }
+
+    try {
+      setPermissions(await getInstancePermissions(entityId));
+    } catch (error) {
+      message.error(t('InstancePermissionGrid.loadErrorMsg'));
+      Logger.error(error);
+    } finally {
+      setPermissionsLoading(false);
+    }
+  }, [entityId, getInstancePermissions, t]);
 
   useEffect(() => {
-    if (client && Array.isArray(permissions)) {
-      const userData: DataType[] = permissions.map((permission: UserInstancePermission): DataType => ({
-        key: permission.user?.id,
-        user: permission.user,
-        name: `${permission.user?.providerDetails?.username} (${permission.user?.authProviderId})`,
-        permission: permission.permission?.name
-      }));
+    getPermissions();
+  }, [getPermissions]);
 
-      setData(userData);
+  useEffect(() => {
+    if (client && Array.isArray(permissions)) {
+      setData(permissions.map(toDataType));
     }
-  }, [client, permissions]);
+  }, [client, permissions, toDataType]);
 
   const getColumnSearchProps = (dataIndex: string): ColumnType<DataType> => ({
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
@@ -103,8 +118,8 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
       >
         <Input
           ref={searchInput}
-          placeholder={t('UserPermissionGrid.filterInputPlaceholder')}
-          value={`${selectedKeys[0]}`}
+          placeholder={t('InstancePermissionGrid.filterInputPlaceholder')}
+          value={selectedKeys[0]}
           onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={() => confirm()}
         />
@@ -115,7 +130,7 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
             icon={<SearchOutlined />}
             size="small"
           >
-            {t('UserPermissionGrid.filterSearchButtonText')}
+            {t('InstancePermissionGrid.filterSearchButtonText')}
           </Button>
           <Button
             onClick={() => {
@@ -126,7 +141,7 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
             }}
             size="small"
           >
-            {t('UserPermissionGrid.filterResetButtonText')}
+            {t('InstancePermissionGrid.filterResetButtonText')}
           </Button>
         </Space>
       </div>
@@ -158,17 +173,16 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
     setPermissionsLoading(true);
 
     try {
-      await (client as any)[entityType]().setUserInstancePermission(entityId, record.user?.id, permission);
+      setInstancePermission(entityId, record.reference?.id, permission);
 
-      const dataClone = _cloneDeep(data);
-      const match = dataClone.find(entry => entry.user?.id === record.user?.id);
-      if (!_isNil(match)) {
-        match.permission = permission;
-      }
+      let dataClone = _cloneDeep(data);
+
+      let match = dataClone.find(entry => entry.reference?.id === record.reference?.id);
+      match.permission = permission;
 
       setData(dataClone);
     } catch (error) {
-      message.error(t('UserPermissionGrid.updateErrorMsg'));
+      message.error(t('InstancePermissionGrid.updateErrorMsg'));
       Logger.error(error);
     } finally {
       setPermissionsLoading(false);
@@ -179,53 +193,34 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
     setPermissionsLoading(true);
 
     try {
-      await (client as any)[entityType]().deleteUserInstancePermission(entityId, record.user?.id);
+      deleteInstancePermission(entityId, record.reference?.id);
 
-      let dataClone = data.filter(entry => entry.user?.id !== record.user?.id);
+      let dataClone = data.filter(entry => entry.reference?.id !== record.reference?.id);
 
       setData(dataClone);
     } catch (error) {
-      message.error(t('UserPermissionGrid.deleteErrorMsg'));
+      message.error(t('InstancePermissionGrid.deleteErrorMsg'));
       Logger.error(error);
     } finally {
       setPermissionsLoading(false);
     }
   };
 
-  const onSave = async () => {
-    setPermissionsLoading(true);
-
-    try {
-      setPermissions(await (client as any)[entityType]().getUserInstancePermissions(entityId));
-    } catch (error) {
-      message.error(t('UserPermissionGrid.loadErrorMsg'));
-      Logger.error(error);
-    } finally {
-      setPermissionsLoading(false);
-    }
+  const getNameColumnDef = (): ColumnType<DataType> => {
+    return {
+      ...{
+        title: t('InstancePermissionGrid.nameColumnTitle'),
+        dataIndex: 'name',
+        key: 'name',
+        defaultSortOrder: 'ascend',
+      },
+      ...getColumnSearchProps('name'),
+      ...nameColumnDefinition,
+    };
   };
 
-  const columns: ColumnsType<DataType> = [{
-    title: t('UserPermissionGrid.userColumnTitle'),
-    dataIndex: 'name',
-    key: 'name',
-    defaultSortOrder: 'ascend',
-    sorter: (a, b) => {
-      let usernameA = a?.user.providerDetails?.username;
-      let usernameB = b?.user.providerDetails?.username;
-      if (_isNil(usernameA) || _isNil(usernameB)) {
-        return 0;
-      }
-      return usernameA.localeCompare(usernameB);
-    },
-    render: (value: any, record: DataType) => (
-      <UserAvatar
-        user={record.user}
-      />
-    ),
-    ...getColumnSearchProps('name')
-  }, {
-    title: t('UserPermissionGrid.permissionColumnTitle'),
+  const columns: ColumnsType<DataType> = [getNameColumnDef(), {
+    title: t('InstancePermissionGrid.permissionColumnTitle'),
     dataIndex: 'permission',
     key: 'permission',
     sorter: (a, b) => b.name?.localeCompare(a.name),
@@ -239,10 +234,11 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
     )
   }, {
     title: (
-      <UserPermissionModal
+      <PermissionModal
         entityType={entityType}
         entityId={entityId}
-        onSave={onSave}
+        onSave={getPermissions}
+        {...modalProps}
       />
     ),
     key: 'operation',
@@ -252,7 +248,7 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
     render: (value: any, record: DataType) => {
       return (
         <Tooltip
-          title={t('UserPermissionGrid.deletePermissionButtonTooltip')}
+          title={t('InstancePermissionGrid.deletePermissionButtonTooltip')}
         >
           <DeleteOutlined
             onClick={() => onDeleteClick(record)}
@@ -264,7 +260,7 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
 
   return (
     <Table
-      className='permission-grid'
+      className='instance-permission-grid'
       loading={permissionsLoading}
       columns={columns}
       dataSource={data}
@@ -275,4 +271,4 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
   );
 };
 
-export default UserPermissionGrid;
+export default InstancePermissionGrid;
diff --git a/src/Component/FormField/Permission/PermissionModal/PermissionModal.less b/src/Component/FormField/Permission/PermissionModal/PermissionModal.less
new file mode 100644
index 00000000..d6c23df7
--- /dev/null
+++ b/src/Component/FormField/Permission/PermissionModal/PermissionModal.less
@@ -0,0 +1,8 @@
+.permission-modal {
+  .ant-modal-body {
+    .description {
+      padding-bottom: 20px;
+    }
+  }
+}
+
diff --git a/src/Component/FormField/Permission/PermissionModal/PermissionModal.spec.tsx b/src/Component/FormField/Permission/PermissionModal/PermissionModal.spec.tsx
new file mode 100644
index 00000000..417334f1
--- /dev/null
+++ b/src/Component/FormField/Permission/PermissionModal/PermissionModal.spec.tsx
@@ -0,0 +1,9 @@
+import PermissionModal from './PermissionModal';
+
+describe('<PermissionModal />', () => {
+
+  it('is defined', () => {
+    expect(PermissionModal).not.toBeUndefined();
+  });
+
+});
diff --git a/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.tsx b/src/Component/FormField/Permission/PermissionModal/PermissionModal.tsx
similarity index 53%
rename from src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.tsx
rename to src/Component/FormField/Permission/PermissionModal/PermissionModal.tsx
index a743b11d..1b11e2da 100644
--- a/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.tsx
+++ b/src/Component/FormField/Permission/PermissionModal/PermissionModal.tsx
@@ -11,93 +11,104 @@ import {
 
 import {
   Button,
-  Form,
-  message,
-  Modal,
   ModalProps,
+  Modal,
   Select,
-  Tag,
+  Form,
+  message,
   Tooltip
 } from 'antd';
+
 import {
   DefaultOptionType
 } from 'antd/lib/select';
+
 import Logger from 'js-logger';
+
 import {
   CustomTagProps
 } from 'rc-select/lib/BaseSelect';
+
 import {
   useTranslation
 } from 'react-i18next';
 
 import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
+import Group from '@terrestris/shogun-util/dist/model/Group';
 import User from '@terrestris/shogun-util/dist/model/User';
 
-import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
 import PermissionSelect from '../PermissionSelect/PermissionSelect';
-import UserAvatar from '../UserAvatar/UserAvatar';
+
+import './PermissionModal.less';
 
 type FormData = {
-  userIds: number[];
+  referenceIds: number[];
   permission: PermissionCollectionType;
 };
 
-export interface UserPermissionModalProps extends ModalProps {
+export interface PermissionModalProps extends ModalProps {
   entityId: number;
   entityType: string;
+  setInstancePermission: (entityId: number, referenceId: number, permission: PermissionCollectionType) => Promise<void>;
+  getReferences: () => Promise<(User | Group)[]>;
+  toTag: (reference: User | Group) => DefaultOptionType;
+  tagRenderer?: (props: CustomTagProps) => JSX.Element;
   onSave?: () => void;
-}
+  descriptionText?: string;
+  referenceLabelText?: string;
+  referenceExtraText?: string;
+  referenceSelectPlaceholderText?: string;
+  permissionSelectLabel?: string;
+  permissionSelectExtra?: string;
+  saveErrorMsg?: (placeholder: string) => string;
+};
 
-const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
+const PermissionModal: React.FC<PermissionModalProps> = ({
   entityId,
   entityType,
+  setInstancePermission,
+  getReferences,
+  toTag,
+  tagRenderer,
   onSave = () => {},
+  descriptionText = '',
+  referenceLabelText = '',
+  referenceExtraText = '',
+  referenceSelectPlaceholderText = '',
+  permissionSelectLabel = '',
+  permissionSelectExtra = '',
+  saveErrorMsg,
   ...passThroughProps
 }) => {
-  const [usersLoading, setUsersLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [users, setUsers] = useState<User[]>([]);
+  const [references, setReferences] = useState<(User | Group)[]>([]);
   const [options, setOptions] = useState<DefaultOptionType[]>();
   const [visible, setVisible] = useState(false);
 
   const { t } = useTranslation();
-  const client = useSHOGunAPIClient();
   const [form] = Form.useForm<FormData>();
 
   useEffect(() => {
     (async () => {
-      setUsersLoading(true);
+      setLoading(true);
 
       try {
-        setUsers((await (client as any).user().findAll()).content);
+        setReferences(await getReferences());
       } catch (error) {
-        message.error(t('UserPermissionModal.loadErrorMsg'));
+        message.error(t('PermissionModal.loadErrorMsg'));
         Logger.error(error);
       } finally {
-        setUsersLoading(false);
+        setLoading(false);
       }
     })();
-  }, [client, t]);
+  }, [getReferences, t]);
 
   useEffect(() => {
-    if (Array.isArray(users)) {
-      const opts: DefaultOptionType[] = users.map(user => ({
-        value: user.id,
-        filterValues: [
-          user.providerDetails?.firstName,
-          user.providerDetails?.lastName,
-          user.providerDetails?.username,
-          user.providerDetails?.email
-        ],
-        label: (
-          <UserAvatar
-            user={user}
-          />
-        )
-      }));
-      setOptions(opts);
+    if (Array.isArray(references)) {
+      setOptions(references.map(toTag));
     }
-  }, [users]);
+  }, [references, toTag]);
 
   const onClick = () => {
     setVisible(!visible);
@@ -116,27 +127,25 @@ const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
     }
 
     const {
-      userIds,
+      referenceIds,
       permission
     } = form.getFieldsValue();
 
-    let erroneousRequestUserIds = [];
+    let erroneousRequestReferenceIds = [];
 
     setIsSaving(true);
 
-    for (const userId of userIds) {
+    for (const referenceId of referenceIds) {
       try {
-        await (client as any)[entityType]().setUserInstancePermission(entityId, userId, permission);
+        await setInstancePermission(entityId, referenceId, permission);
       } catch (error) {
-        erroneousRequestUserIds.push(userId);
+        erroneousRequestReferenceIds.push(referenceId);
         Logger.error(error);
       }
     }
 
-    if (erroneousRequestUserIds.length > 0) {
-      message.error(t('UserPermissionModal.saveErrorMsg', {
-        userIds: erroneousRequestUserIds.join(', ')
-      }));
+    if (erroneousRequestReferenceIds.length > 0) {
+      message.error(saveErrorMsg(erroneousRequestReferenceIds.join(', ')));
     }
 
     form.resetFields();
@@ -145,32 +154,10 @@ const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
     onSave();
   };
 
-  const tagRender = (props: CustomTagProps) => {
-    const {
-      label,
-      ...passProps
-    } = props;
-
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    return (
-      <Tag
-        onMouseDown={onPreventMouseDown}
-        className="user-avatar-tag"
-        {...passProps}
-      >
-        {label}
-      </Tag>
-    );
-  };
-
   return (
     <>
       <Tooltip
-        title={t('UserPermissionModal.openModalButtonTooltipTitle')}
+        title={t('PermissionModal.openModalButtonTooltipTitle')}
       >
         <Button
           type="primary"
@@ -179,8 +166,8 @@ const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
         />
       </Tooltip>
       <Modal
-        className="user-modal"
-        title={t('UserPermissionModal.title')}
+        className="permission-modal"
+        title={t('PermissionModal.title')}
         open={visible}
         onCancel={onCancel}
         onOk={onOk}
@@ -193,7 +180,7 @@ const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
         <div
           className="description"
         >
-          {t('UserPermissionModal.description')}
+          {descriptionText}
         </div>
         <Form
           form={form}
@@ -201,9 +188,9 @@ const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
           requiredMark={false}
         >
           <Form.Item
-            name="userIds"
-            label={t('UserPermissionModal.userSelectLabel')}
-            extra={t('UserPermissionModal.userSelectExtra')}
+            name="referenceIds"
+            label={referenceLabelText}
+            extra={referenceExtraText}
             rules={[{
               required: true
             }]}
@@ -213,16 +200,16 @@ const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
               mode="multiple"
               allowClear
               optionFilterProp={'filterValues'}
-              placeholder={t('UserPermissionModal.userSelectPlaceholder')}
-              loading={usersLoading}
+              placeholder={referenceSelectPlaceholderText}
+              loading={loading}
               options={options}
-              tagRender={tagRender}
+              tagRender={tagRenderer}
             />
           </Form.Item>
           <Form.Item
             name="permission"
-            label={t('UserPermissionModal.permissionSelectLabel')}
-            extra={t('UserPermissionModal.permissionSelectExtra')}
+            label={permissionSelectLabel}
+            extra={permissionSelectExtra}
             rules={[{
               required: true
             }]}
@@ -235,4 +222,4 @@ const UserPermissionModal: React.FC<UserPermissionModalProps> = ({
   );
 };
 
-export default UserPermissionModal;
+export default PermissionModal;
diff --git a/src/Component/FormField/UserPermissionGrid/PermissionSelect/PermissionSelect.spec.tsx b/src/Component/FormField/Permission/PermissionSelect/PermissionSelect.spec.tsx
similarity index 100%
rename from src/Component/FormField/UserPermissionGrid/PermissionSelect/PermissionSelect.spec.tsx
rename to src/Component/FormField/Permission/PermissionSelect/PermissionSelect.spec.tsx
diff --git a/src/Component/FormField/UserPermissionGrid/PermissionSelect/PermissionSelect.tsx b/src/Component/FormField/Permission/PermissionSelect/PermissionSelect.tsx
similarity index 100%
rename from src/Component/FormField/UserPermissionGrid/PermissionSelect/PermissionSelect.tsx
rename to src/Component/FormField/Permission/PermissionSelect/PermissionSelect.tsx
diff --git a/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.less b/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.less
new file mode 100644
index 00000000..e6144e9b
--- /dev/null
+++ b/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.less
@@ -0,0 +1,31 @@
+.permission-modal {
+  .ant-select-selector .user-avatar-tag {
+    display: flex;
+    align-items: center;
+
+    .user-avatar {
+      display: flex;
+      align-items: center;
+
+      .user-avatar-image {
+        margin-right: 10px;
+        height: 25px;
+        width: 25px;
+      }
+
+      div.user-avatar-name {
+        display: flex;
+        flex-direction: column;
+
+        > span:first-child {
+          margin-right: 5px;
+          font-weight: unset;
+        }
+
+        > span:nth-of-type(2) {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/src/Component/FormField/UserPermissionGrid/UserPermissionGrid.spec.tsx b/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.spec.tsx
similarity index 100%
rename from src/Component/FormField/UserPermissionGrid/UserPermissionGrid.spec.tsx
rename to src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.spec.tsx
diff --git a/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx b/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx
new file mode 100644
index 00000000..ded096ca
--- /dev/null
+++ b/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx
@@ -0,0 +1,156 @@
+import React, {
+  useCallback
+} from 'react';
+
+import {
+  useTranslation
+} from 'react-i18next';
+
+import {
+  Tag
+} from 'antd';
+
+import {
+  CustomTagProps
+} from 'rc-select/lib/BaseSelect';
+
+import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
+import UserInstancePermission from '@terrestris/shogun-util/dist/model/security/UserInstancePermission';
+import User from '@terrestris/shogun-util/dist/model/User';
+import BaseEntity from '@terrestris/shogun-util/dist/model/BaseEntity';
+import GenericService from '@terrestris/shogun-util/dist/service/GenericService';
+
+import InstancePermissionGrid, {
+  DataType,
+  InstancePermissionGridProps
+} from '../InstancePermissionGrid/InstancePermissionGrid';
+import UserAvatar from '../../../UserAvatar/UserAvatar';
+
+import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
+
+import './UserPermissionGrid.less';
+
+export interface UserPermissionGridProps extends Omit<InstancePermissionGridProps,
+'getInstancePermissions' | 'setInstancePermission' | 'deleteInstancePermission' | 'toDataType' |
+'nameColumnDefinition' | 'getReferences' | 'toTag' | 'modalProps'> { };
+
+const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
+  entityType,
+  ...passThroughProps
+}) => {
+
+  const { t } = useTranslation();
+  const client = useSHOGunAPIClient();
+
+  const service = useCallback(() => {
+    return client[entityType]() as GenericService<BaseEntity>;
+  }, [client, entityType]);
+
+  const getUserInstancePermissions = async (id: number) => {
+    return await service().getUserInstancePermissions(id);
+  };
+
+  const setUserInstancePermission = async (id: number, referenceId: number, permission: PermissionCollectionType) => {
+    await service().setUserInstancePermission(id, referenceId, permission);
+  };
+
+  const deleteUserInstancePermission = async (id: number, referenceId: number) => {
+    await service().deleteUserInstancePermission(id, referenceId);
+  };
+
+  const getUsers = async () => {
+    return await client.user().findAll();
+  };
+
+  const toUserDataType = (permission: UserInstancePermission): DataType<User> => {
+    return {
+      key: permission.user?.id,
+      reference: permission.user,
+      name: permission.user?.providerDetails?.username,
+      permission: permission.permission?.name
+    };
+  };
+
+  const toTag = (user: User) => {
+    return {
+      value: user.id,
+      filterValues: [
+        user.providerDetails?.firstName,
+        user.providerDetails?.lastName,
+        user.providerDetails?.username,
+        user.providerDetails?.email
+      ],
+      label: (
+        <UserAvatar
+          user={user}
+        />
+      )
+    };
+  };
+
+  const tagRenderer = (props: CustomTagProps) => {
+    const {
+      label,
+      ...passProps
+    } = props;
+
+    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    return (
+      <Tag
+        onMouseDown={onPreventMouseDown}
+        className="user-avatar-tag"
+        {...passProps}
+      >
+        {label}
+      </Tag>
+    );
+  };
+
+  const colDefinition = () => {
+    return {
+      sorter: (a: DataType<User>, b: DataType<User>) => {
+        return a.reference?.providerDetails?.username?.localeCompare(b.reference?.providerDetails?.username);
+      },
+      render: (value: any, record: DataType) => (
+        <UserAvatar
+          user={record.reference}
+        />
+      )
+    };
+  };
+
+  return (
+    <InstancePermissionGrid
+      getInstancePermissions={getUserInstancePermissions}
+      setInstancePermission={setUserInstancePermission}
+      deleteInstancePermission={deleteUserInstancePermission}
+      toDataType={toUserDataType}
+      nameColumnDefinition={colDefinition()}
+      entityType={entityType}
+      modalProps={{
+        toTag: toTag,
+        getReferences: getUsers,
+        tagRenderer: tagRenderer,
+        setInstancePermission: setUserInstancePermission,
+        descriptionText: t('UserPermissionGrid.modal.description'),
+        referenceLabelText: t('UserPermissionGrid.modal.referenceSelectLabel'),
+        referenceExtraText: t('UserPermissionGrid.modal.referenceSelectExtra'),
+        referenceSelectPlaceholderText: t('UserPermissionGrid.modal.referenceSelectPlaceholder'),
+        permissionSelectLabel: t('UserPermissionGrid.modal.permissionSelectLabel'),
+        permissionSelectExtra: t('UserPermissionGrid.modal.permissionSelectExtra'),
+        saveErrorMsg: (placeholder: string) => {
+          return t('UserPermissionGrid.modal.saveErrorMsg', {
+            referenceIds: placeholder
+          });
+        }
+      }}
+      {...passThroughProps}
+    />
+  );
+};
+
+export default UserPermissionGrid;
diff --git a/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.less b/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.less
deleted file mode 100644
index 8145dd2f..00000000
--- a/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.less
+++ /dev/null
@@ -1,38 +0,0 @@
-.user-modal {
-  .ant-modal-body {
-    .description {
-      padding-bottom: 20px;
-    }
-
-    .ant-select-selector .user-avatar-tag {
-      display: flex;
-      align-items: center;
-
-      .user-avatar {
-        display: flex;
-        align-items: center;
-
-        .user-avatar-image {
-          margin-right: 10px;
-          height: 25px;
-          width: 25px;
-        }
-
-        div.user-avatar-name {
-          display: flex;
-          flex-direction: column;
-
-          > span:first-child {
-            margin-right: 5px;
-            font-weight: unset;
-          }
-
-          > span:nth-of-type(2) {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
diff --git a/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.spec.tsx b/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.spec.tsx
deleted file mode 100644
index 3836b782..00000000
--- a/src/Component/FormField/UserPermissionGrid/UserPermissionModal/UserPermissionModal.spec.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import UserPermissionModal from './UserPermissionModal';
-
-describe('<UserPermissionModal />', () => {
-
-  it('is defined', () => {
-    expect(UserPermissionModal).not.toBeUndefined();
-  });
-
-});
diff --git a/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx b/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx
index 8f39bfda..d3432f5f 100644
--- a/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx
+++ b/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx
@@ -26,7 +26,8 @@ import TranslationUtil from '../../../Util/TranslationUtil';
 import DisplayField from '../../FormField/DisplayField/DisplayField';
 import JSONEditor from '../../FormField/JSONEditor/JSONEditor';
 import MarkdownEditor from '../../FormField/MarkdownEditor/MarkdownEditor';
-import UserPermissionGrid from '../../FormField/UserPermissionGrid/UserPermissionGrid';
+import GroupPermissionGrid from '../../FormField/Permission/GroupPermissionGrid/GroupPermissionGrid';
+import UserPermissionGrid from '../../FormField/Permission/UserPermissionGrid/UserPermissionGrid';
 import YesOrNoField from '../../FormField/YesOrNoField/YesOrNoField';
 import LayerTypeSelect from '../../Layer/LayerTypeSelect/LayerTypeSelect';
 
@@ -200,6 +201,18 @@ export const GeneralEntityForm: React.FC<GeneralEntityFormProps> = ({
             {...fieldCfg?.fieldProps}
           />
         );
+      case 'GroupPermissionGrid':
+        if (entityId !== form.getFieldValue('id')) {
+          return undefined;
+        }
+
+        return (
+          <GroupPermissionGrid
+            entityId={form.getFieldValue('id')}
+            entityType={entityType.toLowerCase()}
+            {...fieldCfg?.fieldProps}
+          />
+        );
       default:
         Logger.error(`Cannot create component of type "${fieldCfg?.component}" with name "${fieldCfg?.dataField}"`);
         return null;
@@ -275,12 +288,13 @@ export const GeneralEntityForm: React.FC<GeneralEntityFormProps> = ({
     }
 
     const {
+      component,
       dataField
     } = copyFieldCfg;
 
     return (
       <Form.Item
-        key={`${entityType}-${form.getFieldValue('id')}-${dataField}`}
+        key={`${entityType}-${form.getFieldValue('id')}-${dataField || component.toLocaleLowerCase()}`}
         name={dataField}
         className={`cls-${dataField}`}
         normalize={copyFieldCfg.component ? getNormalizeFn() : undefined}
diff --git a/src/Component/FormField/UserPermissionGrid/UserAvatar/UserAvatar.less b/src/Component/UserAvatar/UserAvatar.less
similarity index 100%
rename from src/Component/FormField/UserPermissionGrid/UserAvatar/UserAvatar.less
rename to src/Component/UserAvatar/UserAvatar.less
diff --git a/src/Component/FormField/UserPermissionGrid/UserAvatar/UserAvatar.spec.tsx b/src/Component/UserAvatar/UserAvatar.spec.tsx
similarity index 100%
rename from src/Component/FormField/UserPermissionGrid/UserAvatar/UserAvatar.spec.tsx
rename to src/Component/UserAvatar/UserAvatar.spec.tsx
diff --git a/src/Component/FormField/UserPermissionGrid/UserAvatar/UserAvatar.tsx b/src/Component/UserAvatar/UserAvatar.tsx
similarity index 95%
rename from src/Component/FormField/UserPermissionGrid/UserAvatar/UserAvatar.tsx
rename to src/Component/UserAvatar/UserAvatar.tsx
index 7be1e892..bc24da05 100644
--- a/src/Component/FormField/UserPermissionGrid/UserAvatar/UserAvatar.tsx
+++ b/src/Component/UserAvatar/UserAvatar.tsx
@@ -9,7 +9,7 @@ import {
 
 import User from '@terrestris/shogun-util/dist/model/User';
 
-import UserUtil from '../../../../Util/UserUtil';
+import UserUtil from '../../Util/UserUtil';
 
 export interface UserAvatarProps extends AvatarProps {
   user: User;
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index e91a1505..0d6c8bfa 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -165,14 +165,14 @@ export default {
         yes: 'Ja',
         no: 'Nein'
       },
-      UserPermissionGrid: {
+      InstancePermissionGrid: {
         loadErrorMsg: 'Fehler beim Laden der Berechtigungen',
         updateErrorMsg: 'Fehler beim Aktualisieren der Berechtigung',
         deleteErrorMsg: 'Fehler beim Löschen der Berechtigung',
         filterInputPlaceholder: 'Suche…',
         filterSearchButtonText: 'Suche',
         filterResetButtonText: 'Zurücksetzen',
-        userColumnTitle: 'Name',
+        nameColumnTitle: 'Name',
         permissionColumnTitle: 'Berechtigung',
         deletePermissionButtonTooltip: 'Berechtigung löschen'
       },
@@ -183,18 +183,34 @@ export default {
         readUpdateDeleteLabel: 'Aktualisieren & Löschen',
         adminLabel: 'Besitzer'
       },
-      UserPermissionModal: {
+      PermissionModal: {
         loadErrorMsg: 'Fehler beim Laden der Berechtigungen',
-        saveErrorMsg: 'Fehler beim Speichern der Berechtigung für die Nutzer mit den IDs: {{userIds}}',
         openModalButtonTooltipTitle: 'Berechtigung hinzufügen',
-        title: 'Berechtigung hinzufügen',
-        description: 'Wählen Sie einen oder mehrere Nutzer sowie die zugehörige Berechtigung aus.',
-        userSelectLabel: 'Nutzername oder Email Adresse',
-        userSelectExtra: 'Wählen Sie die Nutzer aus der Liste aus oder geben Sie einen ' +
-          'Suchbegriff (Nutzername oder Email Adresse) ein',
-        userSelectPlaceholder: 'Nutzer auswählen…',
-        permissionSelectLabel: 'Berechtigung',
-        permissionSelectExtra: 'Wählen Sie die Berechtigung aus, die die Nutzer erhalten sollen.'
+        title: 'Berechtigung hinzufügen'
+      },
+      GroupPermissionGrid: {
+        modal: {
+          description: 'Wählen Sie eine oder mehrere Gruppen sowie die zugehörige Berechtigung aus.',
+          referenceSelectLabel: 'Gruppenname',
+          referenceSelectExtra: 'Wählen Sie die Gruppe aus der Liste aus oder geben Sie einen ' +
+            'Suchbegriff (Gruppenname) ein',
+          referenceSelectPlaceholder: 'Gruppe auswählen…',
+          permissionSelectLabel: 'Berechtigung',
+          permissionSelectExtra: 'Wählen Sie die Berechtigung aus, die die Gruppe erhalten sollen.',
+          saveErrorMsg: 'Fehler beim Speichern der Berechtigung für die Gruppen mit den IDs: {{referenceIds}}'
+        }
+      },
+      UserPermissionGrid: {
+        modal: {
+          description: 'Wählen Sie einen oder mehrere Nutzer sowie die zugehörige Berechtigung aus.',
+          referenceSelectLabel: 'Nutzername oder Email Adresse',
+          referenceSelectExtra: 'Wählen Sie die Nutzer aus der Liste aus oder geben Sie einen ' +
+            'Suchbegriff (Gruppenname oder Email Adresse) ein',
+          referenceSelectPlaceholder: 'Nutzer auswählen…',
+          permissionSelectLabel: 'Berechtigung',
+          permissionSelectExtra: 'Wählen Sie die Berechtigung aus, die die Nutzer erhalten sollen.',
+          saveErrorMsg: 'Fehler beim Speichern der Berechtigung für die Nutzer mit den IDs: {{referenceIds}}'
+        }
       },
       ApplicationInfoModal: {
         clientAbout: 'Über',
@@ -398,14 +414,15 @@ export default {
         deleteFailDescript: 'The file "{{record}}" could not be deleted!',
         reloadTooltip: 'Reload'
       },
-      UserPermissionGrid: {
+
+      InstancePermissionGrid: {
         loadErrorMsg: 'Error while loading the permissions',
         updateErrorMsg: 'Error while updating the permission',
         deleteErrorMsg: 'Error while deleting the permission',
         filterInputPlaceholder: 'Search…',
         filterSearchButtonText: 'Search',
         filterResetButtonText: 'Reset',
-        userColumnTitle: 'Name',
+        nameColumnTitle: 'Name',
         permissionColumnTitle: 'Permission',
         deletePermissionButtonTooltip: 'Delete permission'
       },
@@ -416,17 +433,32 @@ export default {
         readUpdateDeleteLabel: 'Update & Delete',
         adminLabel: 'Owner'
       },
-      UserPermissionModal: {
+      PermissionModal: {
         loadErrorMsg: 'Error while loading the permissions',
-        saveErrorMsg: 'Error while setting the permission for users with IDs: {{userIds}}',
         openModalButtonTooltipTitle: 'Add permission',
-        title: 'Add permission',
-        description: 'Select one or more users and the respective permission.',
-        userSelectLabel: 'Username or email address',
-        userSelectExtra: 'Select users from the list or search via username or email address.',
-        userSelectPlaceholder: 'Select user(s)…',
-        permissionSelectLabel: 'Permission',
-        permissionSelectExtra: 'Select the permission the users should be granted.'
+        title: 'Add permission'
+      },
+      GroupPermissionGrid: {
+        modal: {
+          description: 'Select one or more groups and the respective permission.',
+          referenceSelectLabel: 'Group name',
+          referenceSelectExtra: 'Select groups from the list or search via name.',
+          referenceSelectPlaceholder: 'Select groups(s)…',
+          permissionSelectLabel: 'Permission',
+          permissionSelectExtra: 'Select the permission the groups should be granted.',
+          saveErrorMsg: 'Error while setting the permission for groups with IDs: {{referenceIds}}'
+        }
+      },
+      UserPermissionGrid: {
+        modal: {
+          description: 'Select one or more users and the respective permission.',
+          referenceSelectLabel: 'Username or email address',
+          referenceSelectExtra: 'Select users from the list or search via username or email address.',
+          referenceSelectPlaceholder: 'Select user(s)…',
+          permissionSelectLabel: 'Permission',
+          permissionSelectExtra: 'Select the permission the users should be granted.',
+          saveErrorMsg: 'Error while setting the permission for users with IDs: {{referenceIds}}'
+        }
       },
       ApplicationInfoModal: {
         clientAbout: 'About',

From 223d220155250b763fb7428cd05c7cf2da1706e8 Mon Sep 17 00:00:00 2001
From: Daniel Koch <koch@terrestris.de>
Date: Mon, 10 Jun 2024 11:09:42 +0200
Subject: [PATCH 2/5] feat: init the RolePermissionGrid

---
 assets/fallbackConfig.js                      |   3 +-
 assets/formconfigs/role.json                  | 128 +++++++++++++++
 .../GroupPermissionGrid.tsx                   |  37 +++--
 .../InstancePermissionGrid.less               |   2 +-
 .../InstancePermissionGrid.tsx                |  62 +++++---
 .../PermissionModal/PermissionModal.less      |  11 ++
 .../PermissionModal/PermissionModal.tsx       |  69 ++++++--
 .../RolePermissionGrid.spec.tsx               |   9 ++
 .../RolePermissionGrid/RolePermissionGrid.tsx | 150 ++++++++++++++++++
 .../UserPermissionGrid/UserPermissionGrid.tsx |  49 +++---
 .../GeneralEntityForm/GeneralEntityForm.tsx   |  20 ++-
 src/Component/Menu/User/User.tsx              |   2 +-
 src/Component/UserAvatar/UserAvatar.tsx       |   2 +-
 src/i18n/translations.ts                      |  33 +++-
 14 files changed, 503 insertions(+), 74 deletions(-)
 create mode 100644 assets/formconfigs/role.json
 create mode 100644 src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.spec.tsx
 create mode 100644 src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.tsx

diff --git a/assets/fallbackConfig.js b/assets/fallbackConfig.js
index 47e23ae5..569d3ae7 100644
--- a/assets/fallbackConfig.js
+++ b/assets/fallbackConfig.js
@@ -29,7 +29,8 @@ var shogunApplicationConfig = {
     'Application',
     'Layer',
     'User',
-    'Group'
+    'Group',
+    'Role'
   ],
   dashboard: {
     news: {
diff --git a/assets/formconfigs/role.json b/assets/formconfigs/role.json
new file mode 100644
index 00000000..354fed27
--- /dev/null
+++ b/assets/formconfigs/role.json
@@ -0,0 +1,128 @@
+{
+  "i18n": {
+    "de": {
+      "entityName": "Rolle",
+      "navigationTitle": "Rollen",
+      "labelId": "ID",
+      "labelEstabl": "Erstellt am",
+      "labelEdit": "Zuletzt editiert am",
+      "labelKey": "Keycloak ID",
+      "labelKeyProvDetail": "Keycloak Details",
+      "titleId": "ID",
+      "titleKeyId": "Keycloak ID",
+      "roleDoesNotExistTitle": "Die Rolle existiert nicht in Keycloak",
+      "titleRolename": "Rollenname",
+      "titleLink": "Link zur Rolle",
+      "titleOpen": "Öffne Rolle in Keycloak"
+    },
+    "en": {
+      "entityName": "Role",
+      "navigationTitle": "Roles",
+      "labelId": "ID",
+      "labelEstabl": "Created at",
+      "labelEdit": "Last edited on",
+      "labelKey": "Keycloak ID",
+      "labelKeyProvDetail": "Keycloak details",
+      "titleId": "ID",
+      "titleKeyId": "Keycloak ID",
+      "roleDoesNotExistTitle": "Role does not exist in Keycloak",
+      "titleRolename": "Role name",
+      "titleLink": "Link to role",
+      "titleOpen": "Open role in Keycloak"
+    }
+  },
+  "endpoint": "/roles",
+  "entityType": "role",
+  "entityName": "#i18n.entityName",
+  "navigationTitle": "#i18n.navigationTitle",
+  "subTitle": "",
+  "formConfig": {
+    "name": "role",
+    "fields": [
+      {
+        "dataType": "number",
+        "dataField": "id",
+        "readOnly": true,
+        "label": "#i18n.labelId"
+      },
+      {
+        "dataField": "created",
+        "dataType": "date",
+        "readOnly": "true",
+        "component": "DateField",
+        "label": "#i18n.labelEstabl",
+        "fieldProps": {
+          "dateFormat": "DD.MM.YYYY HH:mm"
+        }
+      },
+      {
+        "dataField": "modified",
+        "dataType": "date",
+        "readOnly": "true",
+        "label": "#i18n.labelEdit",
+        "component": "DateField",
+        "fieldProps": {
+          "dateFormat": "DD.MM.YYYY HH:mm"
+        }
+      },
+      {
+        "dataType": "string",
+        "dataField": "authProviderId",
+        "label": "#i18n.labelKey"
+      },
+      {
+        "component": "JSONEditor",
+        "dataField": "providerDetails",
+        "label": "#i18n.labelKeyProvDetail",
+        "fieldProps": {}
+      }
+    ]
+  },
+  "tableConfig": {
+    "columnDefinition": [
+      {
+        "title": "#i18n.titleId",
+        "dataIndex": "id",
+        "sortConfig": {
+          "isSortable": true
+        }
+      },
+      {
+        "title": "#i18n.titleRolename",
+        "dataIndex": ["providerDetails", "name"],
+        "key": "name",
+        "sortConfig": {
+          "isSortable": true
+        },
+        "filterConfig": {
+          "isFilterable": true
+        }
+      },
+      {
+        "title": "#i18n.titleKeyId",
+        "dataIndex": "authProviderId",
+        "key": "authProviderId",
+        "cellRenderComponentName": "VerifyProviderDetailsCell",
+        "cellRenderComponentProps": {
+          "title": "#i18n.roleDoesNotExistTitle"
+        },
+        "sortConfig": {
+          "isSortable": true
+        },
+        "filterConfig": {
+          "isFilterable": true
+        }
+      },
+      {
+        "title": "#i18n.titleLink",
+        "dataIndex": "authProviderId",
+        "key": "link",
+        "cellRenderComponentName": "LinkCell",
+        "cellRenderComponentProps": {
+          "title": "#i18n.titleOpen",
+          "template": "/auth/admin/master/console/#/SHOGun/roles/{}/details"
+        }
+      }
+    ]
+  }
+}
diff --git a/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx b/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx
index 5e41b45c..a9a86d93 100644
--- a/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx
+++ b/src/Component/FormField/Permission/GroupPermissionGrid/GroupPermissionGrid.tsx
@@ -6,20 +6,20 @@ import {
   useTranslation
 } from 'react-i18next';
 
+import BaseEntity from '@terrestris/shogun-util/dist/model/BaseEntity';
 import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
-import GroupInstancePermission from '@terrestris/shogun-util/dist/model/security/GroupInstancePermission';
 import Group from '@terrestris/shogun-util/dist/model/Group';
-import BaseEntity from '@terrestris/shogun-util/dist/model/BaseEntity';
-import GenericService from '@terrestris/shogun-util/dist/service/GenericService';
+import GroupInstancePermission from '@terrestris/shogun-util/dist/model/security/GroupInstancePermission';
+import GenericEntityService from '@terrestris/shogun-util/dist/service/GenericEntityService';
+import { PageOpts } from '@terrestris/shogun-util/dist/service/GenericService';
 
+import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
 import InstancePermissionGrid, {
   DataType,
   InstancePermissionGridProps
 } from '../InstancePermissionGrid/InstancePermissionGrid';
 
-import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
-
-export interface GroupPermissionGridProps extends Omit<InstancePermissionGridProps,
+export interface GroupPermissionGridProps extends Omit<InstancePermissionGridProps<GroupInstancePermission>,
   'getInstancePermissions' | 'setInstancePermission' | 'deleteInstancePermission' | 'toDataType' |
   'nameColumnDefinition' | 'getReferences' | 'toTag' | 'modalProps'> { };
 
@@ -32,23 +32,23 @@ const GroupPermissionGrid: React.FC<GroupPermissionGridProps> = ({
   const client = useSHOGunAPIClient();
 
   const service = useCallback(() => {
-    return client[entityType]() as GenericService<BaseEntity>;
+    return (client?.[entityType] as () => GenericEntityService<BaseEntity>)();
   }, [client, entityType]);
 
   const getGroupInstancePermissions = async (id: number) => {
-    return await service().getGroupInstancePermissions(id);
+    return await service()?.getGroupInstancePermissions(id);
   };
 
   const setGroupInstancePermission = async (id: number, referenceId: number, permission: PermissionCollectionType) => {
-    await service().setGroupInstancePermission(id, referenceId, permission);
+    await service()?.setGroupInstancePermission(id, referenceId, permission);
   };
 
   const deleteGroupInstancePermission = async (id: number, referenceId: number) => {
-    await service().deleteGroupInstancePermission(id, referenceId);
+    await service()?.deleteGroupInstancePermission(id, referenceId);
   };
 
-  const getGroups = async () => {
-    return await client.group().findAll();
+  const getGroups = async (pageOpts?: PageOpts) => {
+    return await client?.group().findAll(pageOpts);
   };
 
   const toGroupDataType = (permission: GroupInstancePermission): DataType<Group> => {
@@ -69,7 +69,7 @@ const GroupPermissionGrid: React.FC<GroupPermissionGridProps> = ({
         group.providerDetails?.name
       ],
       label: (
-        <span>{group.providerDetails.name}</span>
+        <span>{group.providerDetails?.name}</span>
       )
     };
   };
@@ -77,19 +77,26 @@ const GroupPermissionGrid: React.FC<GroupPermissionGridProps> = ({
   const colDefinition = () => {
     return {
       sorter: (a: DataType<Group>, b: DataType<Group>) => {
-        return a.reference?.providerDetails?.name?.localeCompare(b.reference?.providerDetails?.name);
+        const aName = a.reference?.providerDetails?.name;
+        const bName = b.reference?.providerDetails?.name;
+
+        if (!aName || !bName) {
+          return 0;
+        }
+
+        return bName.localeCompare(aName);
       }
     };
   };
 
   return (
     <InstancePermissionGrid
+      entityType={entityType}
       getInstancePermissions={getGroupInstancePermissions}
       setInstancePermission={setGroupInstancePermission}
       deleteInstancePermission={deleteGroupInstancePermission}
       toDataType={toGroupDataType}
       nameColumnDefinition={colDefinition()}
-      entityType={entityType}
       modalProps={{
         toTag: toTag,
         getReferences: getGroups,
diff --git a/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.less b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.less
index 89645e64..6b945eff 100644
--- a/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.less
+++ b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.less
@@ -1,5 +1,5 @@
 .instance-permission-grid {
-  .operation-column {
+  .ant-table-cell.operation-column {
     font-size: 1.5em;
     text-align: center;
 
diff --git a/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.tsx b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.tsx
index 0ae13654..89567fbe 100644
--- a/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.tsx
+++ b/src/Component/FormField/Permission/InstancePermissionGrid/InstancePermissionGrid.tsx
@@ -35,8 +35,10 @@ import {
 
 import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
 import Group from '@terrestris/shogun-util/dist/model/Group';
+import Role from '@terrestris/shogun-util/dist/model/Role';
 import InstancePermission from '@terrestris/shogun-util/dist/model/security/InstancePermission';
 import User from '@terrestris/shogun-util/dist/model/User';
+import SHOGunAPIClient from '@terrestris/shogun-util/dist/service/SHOGunAPIClient';
 
 import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
 import PermissionModal, {
@@ -46,26 +48,30 @@ import PermissionSelect from '../PermissionSelect/PermissionSelect';
 
 import './InstancePermissionGrid.less';
 
-export interface DataType<T = User | Group> {
-  key: number;
+type NonBaseEntityCLientKeys = 'cache' | 'info' | 'auth' | 'graphql' | 'openapi' |
+  'getBasePath' | 'setBasePath' | 'getKeycloak' | 'setKeycloak';
+
+export type EntityType = Exclude<keyof SHOGunAPIClient, NonBaseEntityCLientKeys>;
+
+export interface DataType<T = Role | User | Group> {
+  key?: number;
   reference: T;
-  name: string;
+  name?: string;
   permission: PermissionCollectionType;
 }
 
-export interface InstancePermissionGridProps extends TableProps<DataType> {
-  entityType: string;
+export interface InstancePermissionGridProps<E extends InstancePermission> extends TableProps<DataType> {
   entityId: number;
-  getInstancePermissions: (entityId: number) => Promise<InstancePermission[]>;
+  entityType: EntityType;
+  getInstancePermissions: (entityId: number) => Promise<E[] | undefined>;
   setInstancePermission: (entityId: number, referenceId: number, permission: PermissionCollectionType) => Promise<void>;
   deleteInstancePermission: (entityId: number, referenceId: number) => Promise<void>;
-  toDataType: (permission: InstancePermission) => DataType;
+  toDataType: (permission: E) => DataType;
   nameColumnDefinition: ColumnType<DataType>;
   modalProps: Omit<PermissionModalProps, 'entityId' | 'entityType'>;
 };
 
-const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
-  entityType,
+export const InstancePermissionGrid = <T, E extends InstancePermission>({
   entityId,
   getInstancePermissions,
   setInstancePermission,
@@ -74,9 +80,9 @@ const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
   modalProps,
   nameColumnDefinition,
   ...passThroughProps
-}) => {
+}: InstancePermissionGridProps<E>): React.ReactElement | null  => {
   const [permissionsLoading, setPermissionsLoading] = useState(false);
-  const [permissions, setPermissions] = useState<InstancePermission[]>([]);
+  const [permissions, setPermissions] = useState<E[] | undefined>([]);
   const [data, setData] = useState<DataType[]>([]);
 
   const searchInput = useRef<InputRef>(null);
@@ -172,13 +178,20 @@ const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
   const onPermissionSelect = async (permission: PermissionCollectionType, record: DataType) => {
     setPermissionsLoading(true);
 
+    if (!record.reference?.id) {
+      return;
+    }
+
     try {
-      setInstancePermission(entityId, record.reference?.id, permission);
+      setInstancePermission(entityId, record.reference.id, permission);
 
       let dataClone = _cloneDeep(data);
 
       let match = dataClone.find(entry => entry.reference?.id === record.reference?.id);
-      match.permission = permission;
+
+      if (match) {
+        match.permission = permission;
+      }
 
       setData(dataClone);
     } catch (error) {
@@ -192,8 +205,12 @@ const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
   const onDeleteClick = async (record: DataType) => {
     setPermissionsLoading(true);
 
+    if (!record.reference?.id) {
+      return;
+    }
+
     try {
-      deleteInstancePermission(entityId, record.reference?.id);
+      deleteInstancePermission(entityId, record.reference.id);
 
       let dataClone = data.filter(entry => entry.reference?.id !== record.reference?.id);
 
@@ -223,8 +240,17 @@ const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
     title: t('InstancePermissionGrid.permissionColumnTitle'),
     dataIndex: 'permission',
     key: 'permission',
-    sorter: (a, b) => b.name?.localeCompare(a.name),
-    render: (value: any, record: DataType) => (
+    sorter: (a, b) => {
+      const aName = a.name;
+      const bName = b.name;
+
+      if (!aName || !bName) {
+        return 0;
+      }
+
+      return bName?.localeCompare(aName);
+    },
+    render: (_: any, record: DataType) => (
       <PermissionSelect
         value={record.permission}
         onSelect={(val: PermissionCollectionType) => {
@@ -235,7 +261,6 @@ const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
   }, {
     title: (
       <PermissionModal
-        entityType={entityType}
         entityId={entityId}
         onSave={getPermissions}
         {...modalProps}
@@ -245,7 +270,7 @@ const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
     className: 'operation-column',
     width: 100,
     fixed: 'right',
-    render: (value: any, record: DataType) => {
+    render: (_: any, record: DataType) => {
       return (
         <Tooltip
           title={t('InstancePermissionGrid.deletePermissionButtonTooltip')}
@@ -264,6 +289,7 @@ const InstancePermissionGrid: React.FC<InstancePermissionGridProps> = ({
       loading={permissionsLoading}
       columns={columns}
       dataSource={data}
+      size='small'
       {
         ...passThroughProps
       }
diff --git a/src/Component/FormField/Permission/PermissionModal/PermissionModal.less b/src/Component/FormField/Permission/PermissionModal/PermissionModal.less
index d6c23df7..3ec400c2 100644
--- a/src/Component/FormField/Permission/PermissionModal/PermissionModal.less
+++ b/src/Component/FormField/Permission/PermissionModal/PermissionModal.less
@@ -6,3 +6,14 @@
   }
 }
 
+.permission-modal-reference-dropdown {
+  .ant-divider {
+    margin: 5px 0;
+  }
+
+  .ant-pagination {
+    display: flex;
+    justify-content: flex-end;
+    padding: 5px;
+  }
+}
diff --git a/src/Component/FormField/Permission/PermissionModal/PermissionModal.tsx b/src/Component/FormField/Permission/PermissionModal/PermissionModal.tsx
index 1b11e2da..d7929bcd 100644
--- a/src/Component/FormField/Permission/PermissionModal/PermissionModal.tsx
+++ b/src/Component/FormField/Permission/PermissionModal/PermissionModal.tsx
@@ -1,5 +1,3 @@
-import './UserPermissionModal.less';
-
 import React, {
   useEffect,
   useState
@@ -16,7 +14,9 @@ import {
   Select,
   Form,
   message,
-  Tooltip
+  Tooltip,
+  Divider,
+  Pagination
 } from 'antd';
 
 import {
@@ -35,7 +35,10 @@ import {
 
 import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
 import Group from '@terrestris/shogun-util/dist/model/Group';
+import { Page } from '@terrestris/shogun-util/dist/model/Page';
+import Role from '@terrestris/shogun-util/dist/model/Role';
 import User from '@terrestris/shogun-util/dist/model/User';
+import { PageOpts } from '@terrestris/shogun-util/dist/service/GenericService';
 
 import PermissionSelect from '../PermissionSelect/PermissionSelect';
 
@@ -48,10 +51,9 @@ type FormData = {
 
 export interface PermissionModalProps extends ModalProps {
   entityId: number;
-  entityType: string;
   setInstancePermission: (entityId: number, referenceId: number, permission: PermissionCollectionType) => Promise<void>;
-  getReferences: () => Promise<(User | Group)[]>;
-  toTag: (reference: User | Group) => DefaultOptionType;
+  getReferences?: (pageOpts?: PageOpts) => Promise<Page<(User | Group | Role)> | undefined>;
+  toTag: (reference: User | Group | Role) => DefaultOptionType;
   tagRenderer?: (props: CustomTagProps) => JSX.Element;
   onSave?: () => void;
   descriptionText?: string;
@@ -65,7 +67,6 @@ export interface PermissionModalProps extends ModalProps {
 
 const PermissionModal: React.FC<PermissionModalProps> = ({
   entityId,
-  entityType,
   setInstancePermission,
   getReferences,
   toTag,
@@ -77,24 +78,44 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
   referenceSelectPlaceholderText = '',
   permissionSelectLabel = '',
   permissionSelectExtra = '',
-  saveErrorMsg,
+  saveErrorMsg = () => '',
   ...passThroughProps
 }) => {
   const [loading, setLoading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [references, setReferences] = useState<(User | Group)[]>([]);
+  const [references, setReferences] = useState<(User | Group | Role)[]>([]);
   const [options, setOptions] = useState<DefaultOptionType[]>();
   const [visible, setVisible] = useState(false);
 
+  const [referencePage, setReferencePage] = useState<number>(1);
+  const [referenceTotal, setReferenceTotal] = useState<number>();
+
   const { t } = useTranslation();
   const [form] = Form.useForm<FormData>();
 
+  const referencePageSize = 20;
+
   useEffect(() => {
+    if (!getReferences) {
+      return;
+    }
+
     (async () => {
       setLoading(true);
 
       try {
-        setReferences(await getReferences());
+        const refs = await getReferences({
+          page: referencePage - 1,
+          size: referencePageSize
+        });
+
+        if (!refs) {
+          throw new Error('Failed to load references');
+        }
+
+        setReferenceTotal(refs.totalElements);
+        setReferencePage(refs.number + 1);
+        setReferences(refs.content);
       } catch (error) {
         message.error(t('PermissionModal.loadErrorMsg'));
         Logger.error(error);
@@ -102,7 +123,7 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
         setLoading(false);
       }
     })();
-  }, [getReferences, t]);
+  }, [getReferences, t, referencePage]);
 
   useEffect(() => {
     if (Array.isArray(references)) {
@@ -154,6 +175,10 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
     onSave();
   };
 
+  const onPaginationChange = (page: number) => {
+    setReferencePage(page);
+  };
+
   return (
     <>
       <Tooltip
@@ -204,6 +229,28 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
               loading={loading}
               options={options}
               tagRender={tagRenderer}
+              dropdownRender={menu => (
+                <div
+                  className="permission-modal-reference-dropdown"
+                >
+                  {menu}
+                  <Divider />
+                  <Pagination
+                    total={referenceTotal}
+                    showTotal={total => `${t('PermissionModal.paginationTotal')}: ${total}`}
+                    locale={{
+                      // eslint-disable-next-line camelcase
+                      next_page: t('PermissionModal.paginationNextPage'),
+                      // eslint-disable-next-line camelcase
+                      prev_page: t('PermissionModal.paginationPrevPage')
+                    }}
+                    onChange={onPaginationChange}
+                    current={referencePage}
+                    pageSize={referencePageSize}
+                    size='small'
+                  />
+                </div>
+              )}
             />
           </Form.Item>
           <Form.Item
diff --git a/src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.spec.tsx b/src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.spec.tsx
new file mode 100644
index 00000000..1425790c
--- /dev/null
+++ b/src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.spec.tsx
@@ -0,0 +1,9 @@
+import RolePermissionGrid from './RolePermissionGrid';
+
+describe('<RolePermissionGrid />', () => {
+
+  it('is defined', () => {
+    expect(RolePermissionGrid).not.toBeUndefined();
+  });
+
+});
diff --git a/src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.tsx b/src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.tsx
new file mode 100644
index 00000000..888bbc93
--- /dev/null
+++ b/src/Component/FormField/Permission/RolePermissionGrid/RolePermissionGrid.tsx
@@ -0,0 +1,150 @@
+import React, {
+  useMemo
+} from 'react';
+
+import {
+  Tag
+} from 'antd';
+
+import {
+  CustomTagProps
+} from 'rc-select/lib/BaseSelect';
+
+import {
+  useTranslation
+} from 'react-i18next';
+
+import BaseEntity from '@terrestris/shogun-util/dist/model/BaseEntity';
+import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
+import Role from '@terrestris/shogun-util/dist/model/Role';
+import RoleInstancePermission from '@terrestris/shogun-util/dist/model/security/RoleInstancePermission';
+import GenericEntityService from '@terrestris/shogun-util/dist/service/GenericEntityService';
+import { PageOpts } from '@terrestris/shogun-util/dist/service/GenericService';
+
+import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
+import InstancePermissionGrid, {
+  DataType,
+  InstancePermissionGridProps
+} from '../InstancePermissionGrid/InstancePermissionGrid';
+
+export interface RolePermissionGridProps extends Omit<InstancePermissionGridProps<RoleInstancePermission>,
+  'getInstancePermissions' | 'setInstancePermission' | 'deleteInstancePermission' | 'toDataType' |
+  'nameColumnDefinition' | 'getReferences' | 'toTag' | 'modalProps'> { };
+
+const RolePermissionGrid: React.FC<RolePermissionGridProps> = ({
+  entityType,
+  ...passThroughProps
+}) => {
+
+  const { t } = useTranslation();
+  const client = useSHOGunAPIClient();
+
+  const service = useMemo(() => {
+    return (client?.[entityType] as () => GenericEntityService<BaseEntity>)();
+  }, [client, entityType]);
+
+  const getRoleInstancePermissions = async (id: number) => {
+    return await service?.getRoleInstancePermissions(id);
+  };
+
+  const setRoleInstancePermission = async (id: number, referenceId: number, permission: PermissionCollectionType) => {
+    await service?.setRoleInstancePermission(id, referenceId, permission);
+  };
+
+  const deleteRoleInstancePermission = async (id: number, referenceId: number) => {
+    await service?.deleteRoleInstancePermission(id, referenceId);
+  };
+
+  const getRoles = async (pageOpts?: PageOpts) => {
+    return await client?.role().findAll(pageOpts);
+  };
+
+  const toRoleDataType = (permission: RoleInstancePermission): DataType<Role> => {
+    return {
+      key: permission.role?.id,
+      reference: permission.role,
+      name: permission.role?.providerDetails?.name,
+      permission: permission.permission?.name
+    };
+  };
+
+  const toTag = (role: Role) => {
+    return {
+      value: role.id,
+      filterValues: [
+        role.providerDetails?.name
+      ],
+      label: (
+        <span>{role.providerDetails?.name}</span>
+      )
+    };
+  };
+
+  const tagRenderer = (props: CustomTagProps) => {
+    const {
+      label,
+      ...passProps
+    } = props;
+
+    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    return (
+      <Tag
+        onMouseDown={onPreventMouseDown}
+        className="user-avatar-tag"
+        {...passProps}
+      >
+        {label}
+      </Tag>
+    );
+  };
+
+  const colDefinition = () => {
+    return {
+      sorter: (a: DataType<Role>, b: DataType<Role>) => {
+        const aName = a.reference?.providerDetails?.name;
+        const bName = b.reference?.providerDetails?.name;
+
+        if (!aName || !bName) {
+          return 0;
+        }
+
+        return aName.localeCompare(bName);
+      }
+    };
+  };
+
+  return (
+    <InstancePermissionGrid
+      entityType={entityType}
+      getInstancePermissions={getRoleInstancePermissions}
+      setInstancePermission={setRoleInstancePermission}
+      deleteInstancePermission={deleteRoleInstancePermission}
+      toDataType={toRoleDataType}
+      nameColumnDefinition={colDefinition()}
+      modalProps={{
+        toTag: toTag,
+        getReferences: getRoles,
+        tagRenderer: tagRenderer,
+        setInstancePermission: setRoleInstancePermission,
+        descriptionText: t('RolePermissionGrid.modal.description'),
+        referenceLabelText: t('RolePermissionGrid.modal.referenceSelectLabel'),
+        referenceExtraText: t('RolePermissionGrid.modal.referenceSelectExtra'),
+        referenceSelectPlaceholderText: t('RolePermissionGrid.modal.referenceSelectPlaceholder'),
+        permissionSelectLabel: t('RolePermissionGrid.modal.permissionSelectLabel'),
+        permissionSelectExtra: t('RolePermissionGrid.modal.permissionSelectExtra'),
+        saveErrorMsg: (placeholder: string) => {
+          return t('RolePermissionGrid.modal.saveErrorMsg', {
+            referenceIds: placeholder
+          });
+        }
+      }}
+      {...passThroughProps}
+    />
+  );
+};
+
+export default RolePermissionGrid;
diff --git a/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx b/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx
index ded096ca..45ea9a09 100644
--- a/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx
+++ b/src/Component/FormField/Permission/UserPermissionGrid/UserPermissionGrid.tsx
@@ -2,10 +2,6 @@ import React, {
   useCallback
 } from 'react';
 
-import {
-  useTranslation
-} from 'react-i18next';
-
 import {
   Tag
 } from 'antd';
@@ -14,25 +10,29 @@ import {
   CustomTagProps
 } from 'rc-select/lib/BaseSelect';
 
+import {
+  useTranslation
+} from 'react-i18next';
+
+import BaseEntity from '@terrestris/shogun-util/dist/model/BaseEntity';
 import PermissionCollectionType from '@terrestris/shogun-util/dist/model/enum/PermissionCollectionType';
 import UserInstancePermission from '@terrestris/shogun-util/dist/model/security/UserInstancePermission';
 import User from '@terrestris/shogun-util/dist/model/User';
-import BaseEntity from '@terrestris/shogun-util/dist/model/BaseEntity';
-import GenericService from '@terrestris/shogun-util/dist/service/GenericService';
+import GenericEntityService from '@terrestris/shogun-util/dist/service/GenericEntityService';
+import { PageOpts } from '@terrestris/shogun-util/dist/service/GenericService';
 
+import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
+import UserAvatar from '../../../UserAvatar/UserAvatar';
 import InstancePermissionGrid, {
   DataType,
   InstancePermissionGridProps
 } from '../InstancePermissionGrid/InstancePermissionGrid';
-import UserAvatar from '../../../UserAvatar/UserAvatar';
-
-import useSHOGunAPIClient from '../../../../Hooks/useSHOGunAPIClient';
 
 import './UserPermissionGrid.less';
 
-export interface UserPermissionGridProps extends Omit<InstancePermissionGridProps,
-'getInstancePermissions' | 'setInstancePermission' | 'deleteInstancePermission' | 'toDataType' |
-'nameColumnDefinition' | 'getReferences' | 'toTag' | 'modalProps'> { };
+export interface UserPermissionGridProps extends Omit<InstancePermissionGridProps<UserInstancePermission>,
+  'getInstancePermissions' | 'setInstancePermission' | 'deleteInstancePermission' | 'toDataType' |
+  'nameColumnDefinition' | 'getReferences' | 'toTag' | 'modalProps'> { };
 
 const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
   entityType,
@@ -43,23 +43,23 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
   const client = useSHOGunAPIClient();
 
   const service = useCallback(() => {
-    return client[entityType]() as GenericService<BaseEntity>;
+    return (client?.[entityType] as () => GenericEntityService<BaseEntity>)();
   }, [client, entityType]);
 
   const getUserInstancePermissions = async (id: number) => {
-    return await service().getUserInstancePermissions(id);
+    return await service()?.getUserInstancePermissions(id);
   };
 
   const setUserInstancePermission = async (id: number, referenceId: number, permission: PermissionCollectionType) => {
-    await service().setUserInstancePermission(id, referenceId, permission);
+    await service()?.setUserInstancePermission(id, referenceId, permission);
   };
 
   const deleteUserInstancePermission = async (id: number, referenceId: number) => {
-    await service().deleteUserInstancePermission(id, referenceId);
+    await service()?.deleteUserInstancePermission(id, referenceId);
   };
 
-  const getUsers = async () => {
-    return await client.user().findAll();
+  const getUsers = async (pageOpts?: PageOpts) => {
+    return await client?.user().findAll(pageOpts);
   };
 
   const toUserDataType = (permission: UserInstancePermission): DataType<User> => {
@@ -113,9 +113,16 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
   const colDefinition = () => {
     return {
       sorter: (a: DataType<User>, b: DataType<User>) => {
-        return a.reference?.providerDetails?.username?.localeCompare(b.reference?.providerDetails?.username);
+        const aName = a.reference?.providerDetails?.username;
+        const bName = b.reference?.providerDetails?.username;
+
+        if (!aName || !bName) {
+          return 0;
+        }
+
+        return aName.localeCompare(bName);
       },
-      render: (value: any, record: DataType) => (
+      render: (_: any, record: DataType<User>) => (
         <UserAvatar
           user={record.reference}
         />
@@ -125,12 +132,12 @@ const UserPermissionGrid: React.FC<UserPermissionGridProps> = ({
 
   return (
     <InstancePermissionGrid
+      entityType={entityType}
       getInstancePermissions={getUserInstancePermissions}
       setInstancePermission={setUserInstancePermission}
       deleteInstancePermission={deleteUserInstancePermission}
       toDataType={toUserDataType}
       nameColumnDefinition={colDefinition()}
-      entityType={entityType}
       modalProps={{
         toTag: toTag,
         getReferences: getUsers,
diff --git a/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx b/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx
index d3432f5f..94dfa428 100644
--- a/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx
+++ b/src/Component/GeneralEntity/GeneralEntityForm/GeneralEntityForm.tsx
@@ -27,6 +27,8 @@ import DisplayField from '../../FormField/DisplayField/DisplayField';
 import JSONEditor from '../../FormField/JSONEditor/JSONEditor';
 import MarkdownEditor from '../../FormField/MarkdownEditor/MarkdownEditor';
 import GroupPermissionGrid from '../../FormField/Permission/GroupPermissionGrid/GroupPermissionGrid';
+import { EntityType } from '../../FormField/Permission/InstancePermissionGrid/InstancePermissionGrid';
+import RolePermissionGrid from '../../FormField/Permission/RolePermissionGrid/RolePermissionGrid';
 import UserPermissionGrid from '../../FormField/Permission/UserPermissionGrid/UserPermissionGrid';
 import YesOrNoField from '../../FormField/YesOrNoField/YesOrNoField';
 import LayerTypeSelect from '../../Layer/LayerTypeSelect/LayerTypeSelect';
@@ -197,7 +199,7 @@ export const GeneralEntityForm: React.FC<GeneralEntityFormProps> = ({
         return (
           <UserPermissionGrid
             entityId={form.getFieldValue('id')}
-            entityType={entityType.toLowerCase()}
+            entityType={entityType.toLowerCase() as EntityType}
             {...fieldCfg?.fieldProps}
           />
         );
@@ -209,7 +211,19 @@ export const GeneralEntityForm: React.FC<GeneralEntityFormProps> = ({
         return (
           <GroupPermissionGrid
             entityId={form.getFieldValue('id')}
-            entityType={entityType.toLowerCase()}
+            entityType={entityType.toLowerCase() as EntityType}
+            {...fieldCfg?.fieldProps}
+          />
+        );
+      case 'RolePermissionGrid':
+        if (entityId !== form.getFieldValue('id')) {
+          return undefined;
+        }
+
+        return (
+          <RolePermissionGrid
+            entityId={form.getFieldValue('id')}
+            entityType={entityType.toLowerCase() as EntityType}
             {...fieldCfg?.fieldProps}
           />
         );
@@ -294,7 +308,7 @@ export const GeneralEntityForm: React.FC<GeneralEntityFormProps> = ({
 
     return (
       <Form.Item
-        key={`${entityType}-${form.getFieldValue('id')}-${dataField || component.toLocaleLowerCase()}`}
+        key={`${entityType}-${form.getFieldValue('id')}-${dataField || component?.toLocaleLowerCase()}`}
         name={dataField}
         className={`cls-${dataField}`}
         normalize={copyFieldCfg.component ? getNormalizeFn() : undefined}
diff --git a/src/Component/Menu/User/User.tsx b/src/Component/Menu/User/User.tsx
index 6b0d3252..bf08e48b 100644
--- a/src/Component/Menu/User/User.tsx
+++ b/src/Component/Menu/User/User.tsx
@@ -44,7 +44,7 @@ export const User: React.FC<UserProps> = () => {
 
   const avatarSource = !_isNil(userInfo.providerDetails?.email) ? UserUtil.getGravatarUrl({
     email: userInfo.providerDetails?.email || '',
-    size: 28
+    size: 38
   }) : '';
 
   const onMenuClick = (evt: any) => {
diff --git a/src/Component/UserAvatar/UserAvatar.tsx b/src/Component/UserAvatar/UserAvatar.tsx
index bc24da05..7e74aca9 100644
--- a/src/Component/UserAvatar/UserAvatar.tsx
+++ b/src/Component/UserAvatar/UserAvatar.tsx
@@ -22,7 +22,7 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
 
   const avatarSrc = UserUtil.getGravatarUrl({
     email: user.providerDetails?.email || '',
-    size: 32
+    size: 30
   });
 
   return (
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 0d6c8bfa..b34346e8 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -186,7 +186,10 @@ export default {
       PermissionModal: {
         loadErrorMsg: 'Fehler beim Laden der Berechtigungen',
         openModalButtonTooltipTitle: 'Berechtigung hinzufügen',
-        title: 'Berechtigung hinzufügen'
+        title: 'Berechtigung hinzufügen',
+        paginationTotal: 'Total',
+        paginationNextPage: 'Nächste Seite',
+        paginationPrevPage: 'Vorherige Seite'
       },
       GroupPermissionGrid: {
         modal: {
@@ -212,6 +215,18 @@ export default {
           saveErrorMsg: 'Fehler beim Speichern der Berechtigung für die Nutzer mit den IDs: {{referenceIds}}'
         }
       },
+      RolePermissionGrid: {
+        modal: {
+          description: 'Wählen Sie einen oder mehrere Rolle sowie die zugehörige Berechtigung aus.',
+          referenceSelectLabel: 'Rollenname',
+          referenceSelectExtra: 'Wählen Sie die Rolle aus der Liste aus oder geben Sie einen ' +
+            'Suchbegriff (Rollenname) ein',
+          referenceSelectPlaceholder: 'Rolle auswählen…',
+          permissionSelectLabel: 'Berechtigung',
+          permissionSelectExtra: 'Wählen Sie die Berechtigung aus, die die Rolle erhalten sollen.',
+          saveErrorMsg: 'Fehler beim Speichern der Berechtigung für die Rollen mit den IDs: {{referenceIds}}'
+        }
+      },
       ApplicationInfoModal: {
         clientAbout: 'Über',
         clientVersion: 'Admin Version',
@@ -436,7 +451,10 @@ export default {
       PermissionModal: {
         loadErrorMsg: 'Error while loading the permissions',
         openModalButtonTooltipTitle: 'Add permission',
-        title: 'Add permission'
+        title: 'Add permission',
+        paginationTotal: 'Total',
+        paginationNextPage: 'Next page',
+        paginationPrevPage: 'Previous page'
       },
       GroupPermissionGrid: {
         modal: {
@@ -460,6 +478,17 @@ export default {
           saveErrorMsg: 'Error while setting the permission for users with IDs: {{referenceIds}}'
         }
       },
+      RolePermissionGrid: {
+        modal: {
+          description: 'Select one or more roles and the respective permission.',
+          referenceSelectLabel: 'Role name',
+          referenceSelectExtra: 'Select roles from the list or search via role name.',
+          referenceSelectPlaceholder: 'Select role(s)…',
+          permissionSelectLabel: 'Permission',
+          permissionSelectExtra: 'Select the permission the roles should be granted.',
+          saveErrorMsg: 'Error while setting the permission for roles with IDs: {{referenceIds}}'
+        }
+      },
       ApplicationInfoModal: {
         clientAbout: 'About',
         clientVersion: 'Admin version',

From 4477cee115e202f58ea35cc3c86895d1ad40c791 Mon Sep 17 00:00:00 2001
From: Daniel Koch <koch@terrestris.de>
Date: Wed, 12 Jun 2024 13:17:41 +0200
Subject: [PATCH 3/5] fix: don't handle public permission without public key

---
 src/Controller/GenericEntityController.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/Controller/GenericEntityController.ts b/src/Controller/GenericEntityController.ts
index 38e278d5..836c6fc4 100644
--- a/src/Controller/GenericEntityController.ts
+++ b/src/Controller/GenericEntityController.ts
@@ -163,16 +163,18 @@ export class GenericEntityController<T extends BaseEntity> {
       };
     }
 
-    const isPublic = this.entity?.[this.formConfig.publicKey as keyof T] as boolean;
-
     this.entity = isUpdate ?
       await this.service.update(entityUpdateObject as T) :
       await this.service.add(entityUpdateObject as T);
 
-    if (isPublic) {
-      await this.service.setPublic(this.entity.id!);
-    } else {
-      await this.service.revokePublic(this.entity.id!);
+    if (this.formConfig?.publicKey) {
+      const isPublic = this.entity?.[this.formConfig.publicKey as keyof T] as boolean;
+
+      if (isPublic) {
+        await this.service.setPublic(this.entity.id!);
+      } else {
+        await this.service.revokePublic(this.entity.id!);
+      }
     }
 
     return this.entity;

From 8243be4934f368e8c48f03aa5fe036304d459041 Mon Sep 17 00:00:00 2001
From: Daniel Koch <koch@terrestris.de>
Date: Thu, 13 Jun 2024 10:43:02 +0200
Subject: [PATCH 4/5] chore: introduce variable for publicKey

---
 src/Controller/GenericEntityController.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Controller/GenericEntityController.ts b/src/Controller/GenericEntityController.ts
index 836c6fc4..174539ff 100644
--- a/src/Controller/GenericEntityController.ts
+++ b/src/Controller/GenericEntityController.ts
@@ -146,12 +146,14 @@ export class GenericEntityController<T extends BaseEntity> {
   public async saveOrUpdate(): Promise<T> {
     const isUpdate = _isNumber(this.entity?.id);
 
+    const publicKey = this.formConfig?.publicKey as keyof T;
+
     // omit constant fields and read only fields
     let entityUpdateObject: Partial<T> = _omit(this.entity, [
       'created',
       'modified',
       ...this.formConfig?.fields
-        .filter(field => field.dataField === this.formConfig.publicKey || field.readOnly)
+        .filter(field => field.dataField === publicKey || field.readOnly)
         .map(field => field.dataField)
     ]);
 
@@ -167,8 +169,9 @@ export class GenericEntityController<T extends BaseEntity> {
       await this.service.update(entityUpdateObject as T) :
       await this.service.add(entityUpdateObject as T);
 
-    if (this.formConfig?.publicKey) {
-      const isPublic = this.entity?.[this.formConfig.publicKey as keyof T] as boolean;
+
+    if (publicKey) {
+      const isPublic = this.entity?.[publicKey] as boolean;
 
       if (isPublic) {
         await this.service.setPublic(this.entity.id!);

From a3a666564387a2706a1d16f0299c321c61236846 Mon Sep 17 00:00:00 2001
From: Daniel Koch <koch@terrestris.de>
Date: Thu, 13 Jun 2024 10:55:31 +0200
Subject: [PATCH 5/5] chore: update shogun-util

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 571229b7..90041ee8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@monaco-editor/react": "4.6.0",
         "@terrestris/base-util": "2.0.0",
         "@terrestris/ol-util": "19.0.0",
-        "@terrestris/shogun-util": "8.3.2",
+        "@terrestris/shogun-util": "8.4.0",
         "@uiw/react-md-editor": "4.0.4",
         "antd": "5.17.2",
         "i18next": "23.11.5",
@@ -5677,9 +5677,9 @@
       }
     },
     "node_modules/@terrestris/shogun-util": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@terrestris/shogun-util/-/shogun-util-8.3.2.tgz",
-      "integrity": "sha512-i3sshjcLWZ2U7VRup8RAhSbE+plpVY8l7HLXRU4kTxDVjtm1nu/vy+oM/5VPi+++i91XEcml2Cg7j5YGhMGbnw==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@terrestris/shogun-util/-/shogun-util-8.4.0.tgz",
+      "integrity": "sha512-JqwuY1pSYPzU+8YKX7ocacEwn739wBfv+lPvGtmohbt+vN1ONloZdhIIpJnNpF/zsiMD6zJzz7I1gYLskKzJwA==",
       "dependencies": {
         "@terrestris/base-util": "^2.0.0",
         "geojson": "^0.5.0",
diff --git a/package.json b/package.json
index 5aae2710..8cc87358 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@monaco-editor/react": "4.6.0",
     "@terrestris/base-util": "2.0.0",
     "@terrestris/ol-util": "19.0.0",
-    "@terrestris/shogun-util": "8.3.2",
+    "@terrestris/shogun-util": "8.4.0",
     "@uiw/react-md-editor": "4.0.4",
     "antd": "5.17.2",
     "i18next": "23.11.5",