add null check for variants

src/Umbraco.Web.UI.Client/src/mocks/data/media/media.data.ts

@@ -33,7 +33,7 @@ export const data: Array<UmbMockMediaModel> = [
 				publishDate: '2023-02-06T15:31:51.354764',
 				culture: 'en-us',
 				segment: null,
-				name: 'Article in english',
+				name: 'Flipped Car',
 				createDate: '2023-02-06T15:31:46.876902',
 				updateDate: '2023-02-06T15:31:51.354764',
 			},
@@ -57,7 +57,17 @@ export const data: Array<UmbMockMediaModel> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
-		variants: [],
+		variants: [
+			{
+				state: ContentStateModel.PUBLISHED,
+				publishDate: '2023-02-06T15:31:51.354764',
+				culture: 'en-us',
+				segment: null,
+				name: 'Umbracoffee',
+				createDate: '2023-02-06T15:31:46.876902',
+				updateDate: '2023-02-06T15:31:51.354764',
+			},
+		],
 		urls: [],
 	},
 	{
@@ -72,7 +82,17 @@ export const data: Array<UmbMockMediaModel> = [
 			hasListView: false,
 		},
 		values: [],
-		variants: [],
+		variants: [
+			{
+				state: ContentStateModel.PUBLISHED,
+				publishDate: '2023-02-06T15:31:51.354764',
+				culture: 'en-us',
+				segment: null,
+				name: 'People',
+				createDate: '2023-02-06T15:31:46.876902',
+				updateDate: '2023-02-06T15:31:51.354764',
+			},
+		],
 		urls: [],
 	},
 	{
@@ -87,7 +107,17 @@ export const data: Array<UmbMockMediaModel> = [
 			hasListView: false,
 		},
 		values: [],
-		variants: [],
+		variants: [
+			{
+				state: ContentStateModel.PUBLISHED,
+				publishDate: '2023-02-06T15:31:51.354764',
+				culture: 'en-us',
+				segment: null,
+				name: 'John Smith',
+				createDate: '2023-02-06T15:31:46.876902',
+				updateDate: '2023-02-06T15:31:51.354764',
+			},
+		],
 		urls: [],
 	},
 	{
@@ -107,7 +137,17 @@ export const data: Array<UmbMockMediaModel> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
-		variants: [],
+		variants: [
+			{
+				state: ContentStateModel.PUBLISHED,
+				publishDate: '2023-02-06T15:31:51.354764',
+				culture: 'en-us',
+				segment: null,
+				name: 'Jane Doe',
+				createDate: '2023-02-06T15:31:46.876902',
+				updateDate: '2023-02-06T15:31:51.354764',
+			},
+		],
 		urls: [],
 	},
 	{
@@ -147,7 +187,17 @@ export const data: Array<UmbMockMediaModel> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
-		variants: [],
+		variants: [
+			{
+				state: ContentStateModel.PUBLISHED,
+				publishDate: '2023-02-06T15:31:51.354764',
+				culture: 'en-us',
+				segment: null,
+				name: 'A very nice hat',
+				createDate: '2023-02-06T15:31:46.876902',
+				updateDate: '2023-02-06T15:31:51.354764',
+			},
+		],
 		urls: [],
 	},
 	{
@@ -167,16 +217,17 @@ export const data: Array<UmbMockMediaModel> = [
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
-		variants: [],
+		variants: [
+			{
+				state: ContentStateModel.PUBLISHED,
+				publishDate: '2023-02-06T15:31:51.354764',
+				culture: 'en-us',
+				segment: null,
+				name: 'Fancy old chair',
+				createDate: '2023-02-06T15:31:46.876902',
+				updateDate: '2023-02-06T15:31:51.354764',
+			},
+		],
 		urls: [],
 	},
 ];
-
-const createMediaItem = (item: UmbMockMediaModel): MediaItemResponseModel => {
-	return {
-		id: item.id,
-		mediaType: item.mediaType,
-		isTrashed: false,
-		variants: item.variants,
-	};
-};

src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts

@@ -79,7 +79,7 @@ export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitEl
 	private _renderItem(item: UmbDocumentItemModel) {
 		if (!item.unique) return;
 		// TODO: get correct variant name
-		const name = item.variants[0].name;
+		const name = item.variants[0]?.name;
 		return html`
 			<uui-ref-node name=${name} detail=${ifDefined(item.unique)}>
 				<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->

src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts

@@ -184,7 +184,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	#renderItem(item: UmbDocumentItemModel) {
 		if (!item.unique) return;
 		// TODO: get correct variant name
-		const name = item.variants[0].name;
+		const name = item.variants[0]?.name;
 
 		return html`
 			<uui-ref-node name=${name} detail=${ifDefined(item.unique)}>
@@ -213,7 +213,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 		if (!this.showOpenButton) return;
 
 		// TODO: get correct variant name
-		const name = item.variants[0].name;
+		const name = item.variants[0]?.name;
 
 		return html`
 			<uui-button

src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/tree/document-recycle-bin-tree.server.data-source.ts

@@ -49,6 +49,6 @@ const mapper = (item: DocumentRecycleBinItemResponseModel): UmbDocumentRecycleBi
 		entityType: 'document-recycle-bin',
 		hasChildren: item.hasChildren,
 		isFolder: false,
-		name: item.variants[0].name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
+		name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
 	};
 };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/item/document-item.server.data-source.ts

@@ -47,6 +47,6 @@ const mapper = (item: DocumentItemResponseModel): UmbDocumentItemModel => {
 				state: variant.state,
 			};
 		}),
-		name: item.variants[0].name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
+		name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
 	};
 };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/document-tree.server.data-source.ts

@@ -64,7 +64,7 @@ const mapper = (item: DocumentTreeItemResponseModel): UmbDocumentTreeItemModel =
 				state: variant.state,
 			};
 		}),
-		name: item.variants[0].name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
+		name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
 		isFolder: false,
 	};
 };

src/Umbraco.Web.UI.Client/src/packages/media/media/repository/item/media-item.server.data-source.ts

@@ -46,6 +46,6 @@ const mapper = (item: MediaItemResponseModel): UmbMediaItemModel => {
 				state: variant.state,
 			};
 		}),
-		name: item.variants[0].name, // TODO: get correct variant name
+		name: item.variants[0]?.name, // TODO: get correct variant name
 	};
 };

src/Umbraco.Web.UI.Client/src/packages/media/media/tree/manifests.ts

@@ -38,7 +38,7 @@ const tree: ManifestTree = {
 
 const treeItem: ManifestTreeItem = {
 	type: 'treeItem',
-	kind: 'entity',
+	kind: 'unique',
 	alias: 'Umb.TreeItem.Media',
 	name: 'Media Tree Item',
 	meta: {

src/Umbraco.Web.UI.Client/src/packages/media/media/tree/media-tree.server.data-source.ts

@@ -56,7 +56,7 @@ const mapper = (item: MediaTreeItemResponseModel): UmbMediaTreeItemModel => {
 			icon: item.mediaType.icon,
 			hasListView: item.mediaType.hasListView,
 		},
-		name: item.variants[0].name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
+		name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
 		variants: item.variants.map((variant) => {
 			return {
 				name: variant.name,

src/Umbraco.Web.UI.Client/src/packages/media/media/tree/media-tree.store.ts

@@ -1,14 +1,14 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/tree';
+import { UmbUniqueTreeStore } from '@umbraco-cms/backoffice/tree';
 
 /**
  * @export
  * @class UmbMediaTreeStore
- * @extends {UmbStoreBase}
+ * @extends {UmbUniqueTreeStore}
  * @description - Tree Data Store for Media Items
  */
-export class UmbMediaTreeStore extends UmbEntityTreeStore {
+export class UmbMediaTreeStore extends UmbUniqueTreeStore {
 	/**
 	 * Creates an instance of UmbMediaTreeStore.
 	 * @param {UmbControllerHostElement} host

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-document-start-node/user-document-start-node.element.ts

@@ -35,7 +35,7 @@ export class UmbUserDocumentStartNodeElement extends UmbLitElement {
 			(item) => {
 				return html`
 					<!-- TODO: get correct variant name -->
-					<uui-ref-node name=${item.variants[0].name}>
+					<uui-ref-node name=${item.variants[0]?.name}>
 						<uui-icon slot="icon" name="folder"></uui-icon>
 					</uui-ref-node>
 				`;

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-media-start-node/user-media-start-node.element.ts

@@ -35,7 +35,7 @@ export class UmbUserMediaStartNodeElement extends UmbLitElement {
 			(item) => {
 				return html`
 					<!-- TODO: get correct variant name -->
-					<uui-ref-node name=${ifDefined(item.variants[0].name)}>
+					<uui-ref-node name=${ifDefined(item.variants[0]?.name)}>
 						<uui-icon slot="icon" name="folder"></uui-icon>
 					</uui-ref-node>
 				`;