From 8999fc1c311fe1591c368ec26bb141af60775432 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 20 Mar 2024 18:45:53 +0000
Subject: [PATCH 1/9] Collection View layout configuration

Updates the UI to make use of the Manifest picker input.
---
 ...ction-view-layout-configuration.element.ts | 221 +++++++++---------
 1 file changed, 111 insertions(+), 110 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts
index 7863ff037b..40f7d221dd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts
@@ -1,18 +1,28 @@
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { html, customElement, property, repeat, css, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import {
+	html,
+	customElement,
+	property,
+	repeat,
+	css,
+	ifDefined,
+	nothing,
+	when,
+} from '@umbraco-cms/backoffice/external/lit';
 import { extractUmbColorVariable } from '@umbraco-cms/backoffice/resources';
-import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
-interface LayoutConfig {
+interface UmbCollectionLayoutConfig {
 	icon?: string;
-	isSystem?: boolean;
 	name?: string;
-	path?: string;
+	collectionView?: string;
+	isSystem?: boolean;
 	selected?: boolean;
 }
 
@@ -24,14 +34,41 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
+	// TODO: [LK] Add sorting.
+
 	@property({ type: Array })
-	value?: Array<LayoutConfig>;
+	value?: Array<UmbCollectionLayoutConfig>;
 
 	@property({ type: Object, attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
-	#onAdd() {
-		this.value = [...(this.value ?? []), { isSystem: false, icon: 'icon-stop', selected: true }];
+	async #focusNewItem() {
+		await this.updateComplete;
+		const input = this.shadowRoot?.querySelector('.layout-item:last-of-type > uui-input') as UUIInputElement;
+		input.focus();
+	}
+
+	#onAdd(event: { target: UmbInputManifestElement }) {
+		const manifest = event.target.value;
+
+		this.value = [
+			...(this.value ?? []),
+			{
+				icon: manifest?.icon,
+				name: manifest?.label,
+				collectionView: manifest?.value,
+			},
+		];
+
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+
+		this.#focusNewItem();
+	}
+
+	#onChangeLabel(e: UUIInputEvent, index: number) {
+		const values = [...(this.value ?? [])];
+		values[index] = { ...values[index], name: e.target.value as string };
+		this.value = values;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
@@ -42,34 +79,9 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	#onChangePath(e: UUIInputEvent, index: number) {
-		const values = [...(this.value ?? [])];
-		values[index] = { ...values[index], path: e.target.value as string };
-		this.value = values;
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	#onChangeName(e: UUIInputEvent, index: number) {
-		const values = [...(this.value ?? [])];
-		values[index] = { ...values[index], name: e.target.value as string };
-		this.value = values;
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	#onChangeSelected(e: UUIBooleanInputEvent, index: number) {
-		const values = [...(this.value ?? [])];
-		values[index] = { ...values[index], selected: e.target.checked };
-		this.value = values;
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	async #onIconChange(index: number) {
-		// This is not begin used? [NL]
-		//const icon = this.#iconReader((this.value ? this.value[index].icon : undefined) ?? '');
-
-		// TODO: send icon data to modal
+	async #onIconChange(icon: typeof UMB_ICON_PICKER_MODAL.VALUE, index: number) {
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const modal = modalManager.open(this, UMB_ICON_PICKER_MODAL);
+		const modal = modalManager.open(this, UMB_ICON_PICKER_MODAL, { value: icon });
 		const picked = await modal?.onSubmit();
 		if (!picked) return;
 
@@ -79,81 +91,59 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
+	#parseIcon(iconString: string | undefined): typeof UMB_ICON_PICKER_MODAL.VALUE {
+		const [icon, color] = iconString?.split(' ') ?? [];
+		return { icon, color: color?.replace('color-', '') };
+	}
+
 	render() {
-		return html`<div id="layout-wrapper">
-				${this.value
-					? repeat(
-							this.value,
-							(layout, index) => '' + layout.name + layout.icon,
-							(layout, index) =>
-								html` <div class="layout-item">
-									<uui-icon name="icon-navigation"></uui-icon> ${layout.isSystem
-										? this.renderSystemFieldRow(layout, index)
-										: this.renderCustomFieldRow(layout, index)}
-								</div>`,
-					  )
-					: ''}
+		if (!this.value) return nothing;
+		return html`
+			<div id="layout-wrapper">
+				${repeat(
+					this.value,
+					(layout, index) => '' + index + layout.name + layout.icon,
+					(layout, index) => this.#renderLayout(layout, index),
+				)}
 			</div>
-			<uui-button
-				id="add"
-				label=${this.localize.term('general_add')}
-				look="placeholder"
-				@click=${this.#onAdd}></uui-button>`;
+			<umb-input-manifest extension-type="collectionView" @change=${this.#onAdd}></umb-input-manifest>
+		`;
 	}
 
-	#iconReader(iconString: string): { icon: string; color?: string } {
-		if (!iconString) return { icon: '' };
+	#renderLayout(layout: UmbCollectionLayoutConfig, index: number) {
+		const icon = this.#parseIcon(layout.icon);
+		const varName = icon.color ? extractUmbColorVariable(icon.color) : undefined;
 
-		const parts = iconString.split(' ');
+		return html`
+			<div class="layout-item">
+				<uui-icon name="icon-navigation"></uui-icon>
 
-		if (parts.length === 2) {
-			const [icon, color] = parts;
-			const varName = extractUmbColorVariable(color.replace('color-', ''));
-			return { icon, color: varName };
-		} else {
-			const [icon] = parts;
-			return { icon };
-		}
-	}
+				<uui-button compact look="outline" label="pick icon" @click=${() => this.#onIconChange(icon, index)}>
+					${when(
+						icon.color,
+						() => html`<uui-icon name=${ifDefined(icon.icon)} style="color:var(${varName})"></uui-icon>`,
+						() => html`<uui-icon name=${ifDefined(icon.icon)}></uui-icon>`,
+					)}
+				</uui-button>
 
-	renderSystemFieldRow(layout: LayoutConfig, index: number) {
-		const icon = this.#iconReader(layout.icon ?? '');
+				<uui-input
+					label="name"
+					value=${ifDefined(layout.name)}
+					placeholder="Enter a label..."
+					@change=${(e: UUIInputEvent) => this.#onChangeLabel(e, index)}></uui-input>
 
-		return html` <uui-button compact disabled label="Icon" look="outline">
-				<uui-icon name=${ifDefined(icon.icon)}></uui-icon>
-			</uui-button>
-			${index}
-			<span><strong>${ifDefined(layout.name)}</strong> <small>(system field)</small></span>
-			<uui-checkbox
-				?checked=${layout.selected}
-				label="Show"
-				@change=${(e: UUIBooleanInputEvent) => this.#onChangeSelected(e, index)}>
-			</uui-checkbox>`;
-	}
+				<div class="alias">
+					<code>${layout.collectionView}</code>
+				</div>
 
-	renderCustomFieldRow(layout: LayoutConfig, index: number) {
-		const icon = this.#iconReader(layout.icon ?? '');
-
-		return html`<uui-button compact look="outline" label="pick icon" @click=${() => this.#onIconChange(index)}>
-				${icon.color
-					? html`<uui-icon name=${icon.icon} style="color:var(${icon.color})"></uui-icon>`
-					: html`<uui-icon name=${icon.icon}></uui-icon>`}
-			</uui-button>
-			${index}
-			<uui-input
-				label="name"
-				value=${ifDefined(layout.name)}
-				placeholder="Name..."
-				@change=${(e: UUIInputEvent) => this.#onChangeName(e, index)}></uui-input>
-			<uui-input
-				label="path"
-				value=${ifDefined(layout.path)}
-				placeholder="Layout path..."
-				@change=${(e: UUIInputEvent) => this.#onChangePath(e, index)}></uui-input>
-			<uui-button
-				label=${this.localize.term('actions_remove')}
-				look="secondary"
-				@click=${() => this.#onRemove(index)}></uui-button>`;
+				<div class="actions">
+					<uui-button
+						label=${this.localize.term('general_remove')}
+						look="secondary"
+						@click=${() => this.#onRemove(index)}></uui-button>
+				</div>
+			</div>
+		`;
 	}
 
 	static styles = [
@@ -163,7 +153,7 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 				display: flex;
 				flex-direction: column;
 				gap: 1px;
-				margin-bottom: var(--uui-size-3);
+				margin-bottom: var(--uui-size-1);
 			}
 
 			.layout-item {
@@ -174,12 +164,23 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 				padding: var(--uui-size-3) var(--uui-size-6);
 			}
 
-			.layout-item > :last-child {
-				margin-left: auto;
+			.layout-item > uui-icon {
+				flex: 0 0 var(--uui-size-6);
 			}
 
-			#add {
-				width: 100%;
+			.layout-item > uui-button {
+				flex: 0 0 var(--uui-size-10);
+			}
+
+			.layout-item > uui-input,
+			.layout-item > .alias {
+				flex: 1;
+			}
+
+			.layout-item > .actions {
+				flex: 0 0 auto;
+				display: flex;
+				justify-content: flex-end;
 			}
 		`,
 	];

From 341f5c9a8814fb12e50a722c2c1b33eb0ecbfd69 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 20 Mar 2024 18:46:22 +0000
Subject: [PATCH 2/9] Icon Picker modal amends for color selection

---
 .../modal/common/icon-picker/icon-picker-modal.element.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
index 9e28e70b4e..91fbb6af8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
@@ -70,16 +70,16 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 					${this.renderSearchbar()}
 					<hr />
 					<uui-color-swatches
-						.value="${this._modalValue?.color ?? ''}"
+						.value=${this._currentAlias}
 						label="Color switcher for icons"
-						@change="${this.#onColorChange}">
+						@change=${this.#onColorChange}>
 						${
 							// TODO: Missing translation for the color aliases.
 							this._colorList.map(
 								(color) => html`
 									<uui-color-swatch
-										label="${color.alias}"
-										title="${color.alias}"
+										label=${color.alias}
+										title=${color.alias}
 										value=${color.alias}
 										style="--uui-swatch-color: var(${color.varName})"></uui-color-swatch>
 								`,

From ea6012a19794860050f557599f6c0ba26e6714ba Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 20 Mar 2024 18:49:37 +0000
Subject: [PATCH 3/9] Corrected User `collectionView` manifest

---
 .../src/packages/user/user/collection/views/manifests.ts    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts
index bcdccca167..f65daedc51 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/manifests.ts
@@ -7,7 +7,7 @@ const tableCollectionView: ManifestCollectionView = {
 	type: 'collectionView',
 	alias: UMB_COLLECTION_VIEW_USER_TABLE,
 	name: 'User Table Collection View',
-	js: () => import('./table/user-table-collection-view.element.js'),
+	element: () => import('./table/user-table-collection-view.element.js'),
 	meta: {
 		label: 'Table',
 		icon: 'icon-list',
@@ -26,8 +26,8 @@ export const UMB_COLLECTION_VIEW_USER_GRID = 'Umb.CollectionView.User.Grid';
 const gridCollectionView: ManifestCollectionView = {
 	type: 'collectionView',
 	alias: UMB_COLLECTION_VIEW_USER_GRID,
-	name: 'User Table Collection View',
-	js: () => import('./grid/user-grid-collection-view.element.js'),
+	name: 'User Grid Collection View',
+	element: () => import('./grid/user-grid-collection-view.element.js'),
 	weight: 200,
 	meta: {
 		label: 'Grid',

From c7eca7741c245ad7926f8ff5c7a096411f9bf919 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Mar 2024 08:57:21 +0000
Subject: [PATCH 4/9] Bump express from 4.18.3 to 4.19.2

Bumps [express](https://github.com/expressjs/express) from 4.18.3 to 4.19.2.
- [Release notes](https://github.com/expressjs/express/releases)
- [Changelog](https://github.com/expressjs/express/blob/master/History.md)
- [Commits](https://github.com/expressjs/express/compare/4.18.3...4.19.2)

---
updated-dependencies:
- dependency-name: express
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/Umbraco.Web.UI.Client/package-lock.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index ffa016c188..303bf66e74 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -10141,9 +10141,9 @@
 			"dev": true
 		},
 		"node_modules/cookie": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-			"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
 			"dev": true,
 			"engines": {
 				"node": ">= 0.6"
@@ -11760,9 +11760,9 @@
 			}
 		},
 		"node_modules/express": {
-			"version": "4.18.3",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.18.3.tgz",
-			"integrity": "sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==",
+			"version": "4.19.2",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+			"integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
 			"dev": true,
 			"dependencies": {
 				"accepts": "~1.3.8",
@@ -11770,7 +11770,7 @@
 				"body-parser": "1.20.2",
 				"content-disposition": "0.5.4",
 				"content-type": "~1.0.4",
-				"cookie": "0.5.0",
+				"cookie": "0.6.0",
 				"cookie-signature": "1.0.6",
 				"debug": "2.6.9",
 				"depd": "2.0.0",

From 66fdf9a4e14acade41be5c29bb21388adb37a913 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 27 Mar 2024 11:22:18 +0100
Subject: [PATCH 5/9] Update document-workspace-editor.element.ts

---
 .../workspace/document-workspace-editor.element.ts     | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts
index bca7f3c99b..2f4b916f6e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-editor.element.ts
@@ -98,8 +98,14 @@ export class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
 			routes.push({
 				path: '',
 				resolve: () => {
-					// Retrieve the current app language variant id from the context and redirect to the correct route.
-					history.pushState({}, '', `${this.#workspaceRoute}/${this.#appCulture}/${this.#variants![0].unique}`);
+					const route = routes.find((route) => route.path === this.#appCulture);
+
+					if (!route) {
+						history.pushState({}, '', `${this.#workspaceRoute}/${routes[routes.length - 2].path}`);
+						return;
+					}
+
+					history.pushState({}, '', `${this.#workspaceRoute}/${route?.path}`);
 				},
 			});
 		}

From 2c667a30c0d5609213dd14692302a8153b24ab71 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 25 Mar 2024 11:43:42 +0000
Subject: [PATCH 6/9] Adds Workspace View Collection component

Abstracts the Document/Media Workspace Views for Collections
into a generic/reusable component.
---
 .../src/packages/core/collection/types.ts     |  7 ++
 .../core/workspace/components/manifests.ts    |  2 +
 .../workspace-collection/manifests.ts         | 25 ++++++
 .../workspace-view-collection.element.ts      | 87 +++++++++++++++++++
 4 files changed, 121 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
index a83bebffbb..f35fb988fb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
@@ -14,6 +14,7 @@ export interface UmbCollectionConfiguration {
 	unique?: string;
 	dataTypeId?: string;
 	allowedEntityBulkActions?: UmbCollectionBulkActionPermissions;
+	layouts?: Array<UmbCollectionLayoutConfiguration>;
 	orderBy?: string;
 	orderDirection?: string;
 	pageSize?: number;
@@ -31,6 +32,12 @@ export interface UmbCollectionColumnConfiguration {
 	nameTemplate?: string;
 }
 
+export interface UmbCollectionLayoutConfiguration {
+	icon?: string;
+	name: string;
+	collectionView: string;
+}
+
 export interface UmbCollectionContext {
 	setConfig(config: UmbCollectionConfiguration): void;
 	getConfig(): UmbCollectionConfiguration | undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts
index db2a31585c..4624c1bb72 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/manifests.ts
@@ -1,9 +1,11 @@
 import { manifests as workspaceActionManifests } from './workspace-action/manifests.js';
 import { manifests as workspaceActionMenuItemManifests } from './workspace-action-menu-item/manifests.js';
 import { manifests as workspaceBreadcrumbManifests } from './workspace-breadcrumb/manifests.js';
+import { manifests as workspaceViewManifests } from './workspace-collection/manifests.js';
 
 export const manifests = [
 	...workspaceActionManifests,
 	...workspaceActionMenuItemManifests,
 	...workspaceBreadcrumbManifests,
+	...workspaceViewManifests,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts
new file mode 100644
index 0000000000..e2e24b46d8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/manifests.ts
@@ -0,0 +1,25 @@
+import type { ManifestWorkspaceView } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestWorkspaceView> = [
+	{
+		type: 'workspaceView',
+		alias: 'Umb.WorkspaceView.Collection',
+		name: 'Workspace Collection View',
+		element: () => import('./workspace-view-collection.element.js'),
+		weight: 300,
+		meta: {
+			label: 'Collection',
+			pathname: 'collection',
+			icon: 'icon-grid',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				oneOf: ['Umb.Workspace.Document', 'Umb.Workspace.Media'],
+			},
+			{
+				alias: 'Umb.Condition.WorkspaceHasCollection',
+			},
+		],
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts
new file mode 100644
index 0000000000..8a80c96069
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-collection/workspace-view-collection.element.ts
@@ -0,0 +1,87 @@
+import type { UmbCollectionBulkActionPermissions, UmbCollectionConfiguration } from '../../../collection/types.js';
+import { customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
+import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_COLLECTION_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
+import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('umb-workspace-view-collection')
+export class UmbWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement {
+	@state()
+	private _loading = true;
+
+	@state()
+	private _config?: UmbCollectionConfiguration;
+
+	@state()
+	private _collectionAlias?: string;
+
+	@state()
+	private _documentUnique?: string;
+
+	#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
+
+	constructor() {
+		super();
+		this.#observeConfig();
+	}
+
+	async #observeConfig() {
+		this.consumeContext(UMB_COLLECTION_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this._collectionAlias = workspaceContext.getCollectionAlias();
+			this._documentUnique = workspaceContext.getUnique() ?? '';
+
+			this.observe(
+				workspaceContext.structure.ownerContentType,
+				async (contentType) => {
+					if (!contentType || !contentType.collection) return;
+
+					const dataTypeUnique = contentType.collection.unique;
+
+					if (dataTypeUnique) {
+						await this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique);
+						this.observe(
+							await this.#dataTypeDetailRepository.byUnique(dataTypeUnique),
+							(dataType) => {
+								if (!dataType) return;
+								this._config = this.#mapDataTypeConfigToCollectionConfig(dataType);
+								this._loading = false;
+							},
+							'_observeConfigDataType',
+						);
+					}
+				},
+				'_observeConfigContentType',
+			);
+		});
+	}
+
+	#mapDataTypeConfigToCollectionConfig(dataType: UmbDataTypeDetailModel): UmbCollectionConfiguration {
+		const config = new UmbPropertyEditorConfigCollection(dataType.values);
+		return {
+			unique: this._documentUnique,
+			allowedEntityBulkActions: config?.getValueByAlias<UmbCollectionBulkActionPermissions>('bulkActionPermissions'),
+			layouts: config?.getValueByAlias('layouts'),
+			orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate',
+			orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc',
+			pageSize: Number(config?.getValueByAlias('pageSize')) ?? 50,
+			useInfiniteEditor: config?.getValueByAlias('useInfiniteEditor') ?? false,
+			userDefinedProperties: config?.getValueByAlias('includeProperties'),
+		};
+	}
+
+	render() {
+		if (this._loading) return nothing;
+		return html`<umb-collection .alias=${this._collectionAlias} .config=${this._config}></umb-collection>`;
+	}
+}
+
+export default UmbWorkspaceViewCollectionElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-workspace-view-collection': UmbWorkspaceViewCollectionElement;
+	}
+}

From 61094a5e9bd0a4dc8396a5a1e9fb765a1569ae8b Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 25 Mar 2024 11:44:11 +0000
Subject: [PATCH 7/9] Removes the Document Workspace Collection View

---
 .../documents/workspace/manifests.ts          | 21 -----
 ...ument-workspace-view-collection.element.ts | 82 -------------------
 2 files changed, 103 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
index 344e7ac8b7..dbd1616e94 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
@@ -25,27 +25,6 @@ const workspace: ManifestWorkspaces = {
 };
 
 const workspaceViews: Array<ManifestWorkspaceView> = [
-	{
-		type: 'workspaceView',
-		alias: 'Umb.WorkspaceView.Document.Collection',
-		name: 'Document Workspace Collection View',
-		element: () => import('./views/collection/document-workspace-view-collection.element.js'),
-		weight: 300,
-		meta: {
-			label: 'Documents',
-			pathname: 'collection',
-			icon: 'icon-grid',
-		},
-		conditions: [
-			{
-				alias: 'Umb.Condition.WorkspaceAlias',
-				match: workspace.alias,
-			},
-			{
-				alias: 'Umb.Condition.WorkspaceHasCollection',
-			},
-		],
-	},
 	{
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.Document.Edit',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts
deleted file mode 100644
index 47f4fff704..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type {
-	UmbCollectionBulkActionPermissions,
-	UmbCollectionConfiguration,
-} from '../../../../../core/collection/types.js';
-import { customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
-import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
-import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
-import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
-
-@customElement('umb-document-workspace-view-collection')
-export class UmbDocumentWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement {
-	@state()
-	private _config?: UmbCollectionConfiguration;
-
-	@state()
-	private _documentUnique?: string;
-
-	#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
-
-	constructor() {
-		super();
-		this.#observeConfig();
-	}
-
-	async #observeConfig() {
-		this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.observe(workspaceContext.unique, (unique) => {
-				this._documentUnique = unique;
-			});
-			this.observe(
-				workspaceContext.structure.ownerContentType,
-				async (documentType) => {
-					if (!documentType || !documentType.collection) return;
-
-					const dataTypeUnique = documentType.collection.unique;
-
-					if (dataTypeUnique) {
-						await this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique);
-						this.observe(
-							await this.#dataTypeDetailRepository.byUnique(dataTypeUnique),
-							(dataType) => {
-								if (!dataType) return;
-								this._config = this.#mapDataTypeConfigToCollectionConfig(dataType);
-							},
-							'_observeConfigDataType',
-						);
-					}
-				},
-				'_observeConfigDocumentType',
-			);
-		});
-	}
-
-	#mapDataTypeConfigToCollectionConfig(dataType: UmbDataTypeDetailModel): UmbCollectionConfiguration {
-		const config = new UmbPropertyEditorConfigCollection(dataType.values);
-		return {
-			unique: this._documentUnique,
-			allowedEntityBulkActions: config?.getValueByAlias<UmbCollectionBulkActionPermissions>('bulkActionPermissions'),
-			orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate',
-			orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc',
-			pageSize: Number(config?.getValueByAlias('pageSize')) ?? 50,
-			useInfiniteEditor: config?.getValueByAlias('useInfiniteEditor') ?? false,
-			userDefinedProperties: config?.getValueByAlias('includeProperties'),
-		};
-	}
-
-	render() {
-		if (!this._config?.unique) return nothing;
-		return html`<umb-collection alias="Umb.Collection.Document" .config=${this._config}></umb-collection>`;
-	}
-}
-
-export default UmbDocumentWorkspaceViewCollectionElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-document-workspace-view-collection': UmbDocumentWorkspaceViewCollectionElement;
-	}
-}

From 0fc5f439f8d2dd44549e004d427630a30770836f Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 25 Mar 2024 11:44:22 +0000
Subject: [PATCH 8/9] Removes the Media Workspace Collection View

---
 .../media/media/workspace/manifests.ts        | 21 -----
 ...media-workspace-view-collection.element.ts | 82 -------------------
 2 files changed, 103 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
index c94ee5f8a7..3f9e5c9c0e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
@@ -17,27 +17,6 @@ const workspace: ManifestWorkspaces = {
 };
 
 const workspaceViews: Array<ManifestWorkspaceView> = [
-	{
-		type: 'workspaceView',
-		alias: 'Umb.WorkspaceView.Media.Collection',
-		name: 'Media Workspace Collection View',
-		element: () => import('./views/collection/media-workspace-view-collection.element.js'),
-		weight: 300,
-		meta: {
-			label: 'Collection',
-			pathname: 'collection',
-			icon: 'icon-grid',
-		},
-		conditions: [
-			{
-				alias: 'Umb.Condition.WorkspaceAlias',
-				match: workspace.alias,
-			},
-			{
-				alias: 'Umb.Condition.WorkspaceHasCollection',
-			},
-		],
-	},
 	{
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.Media.Edit',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts
deleted file mode 100644
index a8d12c291f..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
-import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_MEDIA_COLLECTION_ALIAS, UMB_MEDIA_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/media';
-import type {
-	UmbCollectionBulkActionPermissions,
-	UmbCollectionConfiguration,
-} from '@umbraco-cms/backoffice/collection';
-import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
-import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
-
-@customElement('umb-media-workspace-view-collection')
-export class UmbMediaWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement {
-	@state()
-	private _config?: UmbCollectionConfiguration;
-
-	@state()
-	private _mediaUnique?: string;
-
-	#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
-
-	constructor() {
-		super();
-		this.#observeConfig();
-	}
-
-	async #observeConfig() {
-		this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.observe(workspaceContext.unique, (unique) => {
-				this._mediaUnique = unique;
-			});
-			this.observe(
-				workspaceContext.structure.ownerContentType,
-				async (mediaType) => {
-					if (!mediaType || !mediaType.collection) return;
-
-					const dataTypeUnique = mediaType.collection.unique;
-
-					if (dataTypeUnique) {
-						await this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique);
-						this.observe(
-							await this.#dataTypeDetailRepository.byUnique(dataTypeUnique),
-							(dataType) => {
-								if (!dataType) return;
-								this._config = this.#mapDataTypeConfigToCollectionConfig(dataType);
-							},
-							'_observeConfigDataType',
-						);
-					}
-				},
-				'_observeConfigMediaType',
-			);
-		});
-	}
-
-	#mapDataTypeConfigToCollectionConfig(dataType: UmbDataTypeDetailModel): UmbCollectionConfiguration {
-		const config = new UmbPropertyEditorConfigCollection(dataType.values);
-		return {
-			unique: this._mediaUnique,
-			allowedEntityBulkActions: config?.getValueByAlias<UmbCollectionBulkActionPermissions>('bulkActionPermissions'),
-			orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate',
-			orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc',
-			pageSize: Number(config?.getValueByAlias('pageSize')) ?? 50,
-			useInfiniteEditor: config?.getValueByAlias('useInfiniteEditor') ?? false,
-			userDefinedProperties: config?.getValueByAlias('includeProperties'),
-		};
-	}
-
-	render() {
-		if (!this._config?.unique) return nothing;
-		return html`<umb-collection .alias=${UMB_MEDIA_COLLECTION_ALIAS} .config=${this._config}></umb-collection>`;
-	}
-}
-
-export default UmbMediaWorkspaceViewCollectionElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-media-workspace-view-collection': UmbMediaWorkspaceViewCollectionElement;
-	}
-}

From f9b6a94ff074bcdc6cc450ae3986d2f349962a60 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 25 Mar 2024 11:47:53 +0000
Subject: [PATCH 9/9] Fixes bug in Collection Default Context

along with some code housekeeping.
---
 .../default/collection-default.element.ts     | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts
index 3bacd4e26a..087dd2e362 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts
@@ -1,10 +1,10 @@
 import { UMB_DEFAULT_COLLECTION_CONTEXT, UmbDefaultCollectionContext } from './collection-default.context.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbRoute } from '@umbraco-cms/backoffice/router';
 
 const manifest: UmbBackofficeManifestKind = {
@@ -30,8 +30,8 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 
 	constructor() {
 		super();
-		this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
-			this.#collectionContext = instance;
+		this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (context) => {
+			this.#collectionContext = context;
 			this.#observeCollectionRoutes();
 		});
 	}
@@ -44,10 +44,13 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 	#observeCollectionRoutes() {
 		if (!this.#collectionContext) return;
 
-		this.observe(this.#collectionContext.view.routes, (routes) => {
-			this._routes = routes;
-		}),
-			'umbCollectionRoutesObserver';
+		this.observe(
+			this.#collectionContext.view.routes,
+			(routes) => {
+				this._routes = routes;
+			},
+			'umbCollectionRoutesObserver',
+		);
 	}
 
 	render() {