diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts
index dc30f14544..390acf9c59 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts
@@ -4,7 +4,19 @@ import {
 	UMB_USER_PERMISSION_DOCUMENT_DELETE,
 	UMB_USER_PERMISSION_DOCUMENT_READ,
 } from '@umbraco-cms/backoffice/document';
-import { PagedUserGroupResponseModel, UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	PagedUserGroupResponseModel,
+	UserGroupItemResponseModel,
+	UserGroupResponseModel,
+} from '@umbraco-cms/backoffice/backend-api';
+
+const createUserGroupItem = (item: UserGroupResponseModel): UserGroupItemResponseModel => {
+	return {
+		name: item.name,
+		id: item.id,
+		icon: item.icon,
+	};
+};
 
 // Temp mocked database
 class UmbUserGroupData extends UmbEntityData<UserGroupResponseModel> {
@@ -19,6 +31,11 @@ class UmbUserGroupData extends UmbEntityData<UserGroupResponseModel> {
 		};
 	}
 
+	getItems(ids: Array<string>): Array<UserGroupItemResponseModel> {
+		const items = this.data.filter((item) => ids.includes(item.id ?? ''));
+		return items.map((item) => createUserGroupItem(item));
+	}
+
 	/**
 	 * Returns a list of permissions for the given user group ids
 	 * @param {string[]} userGroupIds