Merge pull request #503 from umbraco/feature/improve-extensions-workspace

Feature/improve extensions workspace

src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts

@@ -80,4 +80,19 @@ export class UmbExtensionRegistry {
 			)
 		) as Observable<Array<ExtensionType>>;
 	}
+
+	extensionsSortedByTypeAndWeight<ExtensionType = ManifestBase>(): Observable<Array<ExtensionType>> {
+		return this.extensions.pipe(
+			map((exts) => exts
+				.sort((a, b) => {
+					// If type is the same, sort by weight
+					if (a.type === b.type) {
+						return (a.weight || 0) - (b.weight || 0);
+					}
+
+					// Otherwise sort by type
+					return a.type.localeCompare(b.type);
+				}))
+		) as Observable<Array<ExtensionType>>;
+	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts

@@ -1,33 +1,55 @@
 import { html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { isManifestElementNameType , umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
+import { isManifestElementNameType, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
 import type { ManifestBase } from '@umbraco-cms/models';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 
 @customElement('umb-extension-root-workspace')
 export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
 	@state()
 	private _extensions?: Array<ManifestBase> = undefined;
 
+	private _modalService?: UmbModalService;
+
 	connectedCallback(): void {
 		super.connectedCallback();
 		this._observeExtensions();
+
+		this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (modalService) => {
+			this._modalService = modalService;
+		});
 	}
 
 	private _observeExtensions() {
-		this.observe(umbExtensionsRegistry.extensions, (extensions) => {
+		this.observe(umbExtensionsRegistry.extensionsSortedByTypeAndWeight(), (extensions) => {
 			this._extensions = extensions || undefined;
 		});
 	}
 
+	#removeExtension(extension: ManifestBase) {
+		const modalHandler = this._modalService?.confirm({
+			headline: 'Unload extension',
+			confirmLabel: 'Unload',
+			content: html`<p>Are you sure you want to unload the extension <strong>${extension.alias}</strong>?</p>`,
+			color: 'danger',
+		});
+
+		modalHandler?.onClose().then(({ confirmed }: any) => {
+			if (confirmed) {
+				umbExtensionsRegistry.unregister(extension.alias);
+			}
+		});
+	}
+
 	render() {
 		return html`
 			<umb-workspace-layout headline="Extensions" alias="Umb.Workspace.ExtensionRoot">
 				<uui-box>
-					<p>List of currently loaded extensions</p>
 					<uui-table>
 						<uui-table-head>
 							<uui-table-head-cell>Type</uui-table-head-cell>
+							<uui-table-head-cell>Weight</uui-table-head-cell>
 							<uui-table-head-cell>Name</uui-table-head-cell>
 							<uui-table-head-cell>Alias</uui-table-head-cell>
 							<uui-table-head-cell>Actions</uui-table-head-cell>
@@ -37,14 +59,19 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
 							(extension) => html`
 								<uui-table-row>
 									<uui-table-cell>${extension.type}</uui-table-cell>
+									<uui-table-cell>${extension.weight ? extension.weight : 'Not Set'} </uui-table-cell>
 									<uui-table-cell>
-										${isManifestElementNameType(extension) ? extension.name : 'Custom extension'}
+										${isManifestElementNameType(extension) ? extension.name : `[Custom extension] ${extension.name}`}
 									</uui-table-cell>
 									<uui-table-cell>${extension.alias}</uui-table-cell>
 									<uui-table-cell>
 										<uui-button
-											label="unload"
-											@click=${() => umbExtensionsRegistry.unregister(extension.alias)}></uui-button>
+											label="Unload"
+											color="danger"
+											look="primary"
+											@click=${() => this.#removeExtension(extension)}>
+											<uui-icon name="umb:trash"></uui-icon>
+										</uui-button>
 									</uui-table-cell>
 								</uui-table-row>
 							`