diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 42846051fb..262a7716cf 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -5,6 +5,7 @@ import type { FolderTreeItemModel, DataTypeModel, EntityTreeItemModel } from '@u
 // TODO: investigate why we don't get an entity type as part of the DataTypeModel
 export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		key: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
 		parentKey: null,
@@ -14,6 +15,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Text',
 		key: 'dt-textBox',
@@ -28,6 +30,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Text Area',
 		key: 'dt-textArea',
@@ -37,6 +40,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'My JS Property Editor',
 		key: 'dt-custom',
@@ -46,6 +50,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Color Picker',
 		key: 'dt-colorPicker',
@@ -64,6 +69,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Content Picker',
 		key: 'dt-contentPicker',
@@ -78,6 +84,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Eye Dropper',
 		key: 'dt-eyeDropper',
@@ -113,6 +120,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Multi URL Picker',
 		key: 'dt-multiUrlPicker',
@@ -122,6 +130,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Multi Node Tree Picker',
 		key: 'dt-multiNodeTreePicker',
@@ -131,6 +140,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Date Picker',
 		key: 'dt-datePicker',
@@ -140,6 +150,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Email',
 		key: 'dt-email',
@@ -149,6 +160,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Multiple Text String',
 		key: 'dt-multipleTextString',
@@ -167,6 +179,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Dropdown',
 		key: 'dt-dropdown',
@@ -176,6 +189,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Slider',
 		key: 'dt-slider',
@@ -185,6 +199,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Toggle',
 		key: 'dt-toggle',
@@ -194,6 +209,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Tags',
 		key: 'dt-tags',
@@ -203,6 +219,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Markdown Editor',
 		key: 'dt-markdownEditor',
@@ -212,6 +229,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Radio Button List',
 		key: 'dt-radioButtonList',
@@ -230,6 +248,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Checkbox List',
 		key: 'dt-checkboxList',
@@ -248,6 +267,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Block List',
 		key: 'dt-blockList',
@@ -257,6 +277,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Media Picker',
 		key: 'dt-mediaPicker',
@@ -266,6 +287,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Image Cropper',
 		key: 'dt-imageCropper',
@@ -275,6 +297,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Upload Field',
 		key: 'dt-uploadField',
@@ -284,6 +307,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Block Grid',
 		key: 'dt-blockGrid',
@@ -293,6 +317,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Collection View',
 		key: 'dt-collectionView',
@@ -302,6 +327,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Icon Picker',
 		key: 'dt-iconPicker',
@@ -311,6 +337,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Number Range',
 		key: 'dt-numberRange',
@@ -320,6 +347,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Order Direction',
 		key: 'dt-orderDirection',
@@ -329,6 +357,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Overlay Size',
 		key: 'dt-overlaySize',
@@ -338,6 +367,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Rich Text Editor',
 		key: 'dt-richTextEditor',
@@ -347,6 +377,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Label',
 		key: 'dt-label',
@@ -356,6 +387,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Integer',
 		key: 'dt-integer',
@@ -365,6 +397,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Decimal',
 		key: 'dt-decimal',
@@ -374,6 +407,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'User Picker',
 		key: 'dt-userPicker',
@@ -383,6 +417,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Member Picker',
 		key: 'dt-memberPicker',
@@ -392,6 +427,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 		data: [],
 	},
 	{
+		$type: 'data-type',
 		type: 'data-type',
 		name: 'Member Group Picker',
 		key: 'dt-memberGroupPicker',