Preview URLs: Client-side previewOption extension kind

src/Umbraco.Web.UI.Client/src/packages/core/backend-api/types.gen.ts

@@ -840,7 +840,9 @@ export type DocumentTypeTreeItemResponseModel = {
 
 export type DocumentUrlInfoModel = {
     culture: string | null;
-    url: string;
+    url: string | null;
+    message: string | null;
+    provider: string;
 };
 
 export type DocumentUrlInfoResponseModel = {
@@ -1366,7 +1368,7 @@ export type MediaTypeTreeItemResponseModel = {
 
 export type MediaUrlInfoModel = {
     culture: string | null;
-    url: string;
+    url: string | null;
 };
 
 export type MediaUrlInfoResponseModel = {
@@ -6188,6 +6190,49 @@ export type PutDocumentByIdNotificationsResponses = {
     200: unknown;
 };
 
+export type GetDocumentByIdPreviewUrlData = {
+    body?: never;
+    path: {
+        id: string;
+    };
+    query?: {
+        providerAlias?: string;
+        culture?: string;
+        segment?: string;
+    };
+    url: '/umbraco/management/api/v1/document/{id}/preview-url';
+};
+
+export type GetDocumentByIdPreviewUrlErrors = {
+    /**
+     * Bad Request
+     */
+    400: ProblemDetails;
+    /**
+     * The resource is protected and requires an authentication token
+     */
+    401: unknown;
+    /**
+     * The authenticated user does not have access to this resource
+     */
+    403: unknown;
+    /**
+     * Not Found
+     */
+    404: ProblemDetails;
+};
+
+export type GetDocumentByIdPreviewUrlError = GetDocumentByIdPreviewUrlErrors[keyof GetDocumentByIdPreviewUrlErrors];
+
+export type GetDocumentByIdPreviewUrlResponses = {
+    /**
+     * OK
+     */
+    200: DocumentUrlInfoModel;
+};
+
+export type GetDocumentByIdPreviewUrlResponse = GetDocumentByIdPreviewUrlResponses[keyof GetDocumentByIdPreviewUrlResponses];
+
 export type DeleteDocumentByIdPublicAccessData = {
     body?: never;
     path: {

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action-menu-item/default/index.ts

@@ -0,0 +1 @@
+export * from './workspace-action-menu-item.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action-menu-item/default/workspace-action-menu-item.element.ts

@@ -3,8 +3,8 @@ import type {
 	ManifestWorkspaceActionMenuItemDefaultKind,
 	MetaWorkspaceActionMenuItemDefaultKind,
 } from '../../../extensions/types.js';
+import { customElement, html, ifDefined, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
-import { html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
 
@@ -48,15 +48,11 @@ export class UmbWorkspaceActionMenuItemElement<
 	override render() {
 		return html`
 			<uui-menu-item
-				label=${ifDefined(
-					this.manifest?.meta.label ? this.localize.string(this.manifest.meta.label) : this.manifest?.name,
-				)}
+				label=${ifDefined(this.localize.string(this.manifest?.meta.label ?? this.manifest?.name))}
 				href=${ifDefined(this._href)}
-				@click-label=${this.#onClickLabel}
-				@click=${this.#onClick}>
-				${this.manifest?.meta.icon
-					? html`<umb-icon slot="icon" name="${this.manifest?.meta.icon}"></umb-icon>`
-					: nothing}
+				@click=${this.#onClick}
+				@click-label=${this.#onClickLabel}>
+				${when(this.manifest?.meta.icon, (icon) => html`<umb-icon slot="icon" name=${icon}></umb-icon>`)}
 			</uui-menu-item>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action-menu-item/index.ts

@@ -1 +1,2 @@
+export * from './default/index.js';
 export * from './workspace-action-menu-item-base.controller.js';

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action-menu/workspace-action-menu.element.ts

@@ -29,7 +29,8 @@ export class UmbWorkspaceActionMenuElement extends UmbLitElement {
 	override render() {
 		if (!this.items?.length) return nothing;
 
-		return html`<uui-button
+		return html`
+			<uui-button
 				id="popover-trigger"
 				popovertarget="workspace-action-popover"
 				look="${this.look}"
@@ -52,7 +53,8 @@ export class UmbWorkspaceActionMenuElement extends UmbLitElement {
 						)}
 					</uui-scroll-container>
 				</umb-popover-layout>
-			</uui-popover-container>`;
+			</uui-popover-container>
+		`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action/default/index.ts

@@ -0,0 +1 @@
+export * from './workspace-action.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action/default/manifests.ts

@@ -9,7 +9,7 @@ export const manifest: UmbExtensionManifestKind = {
 		type: 'workspaceAction',
 		kind: 'default',
 		weight: 1000,
-		element: () => import('./workspace-action-default-kind.element.js'),
+		element: () => import('./workspace-action.element.js'),
 		meta: {
 			label: '(Missing label in manifest)',
 		},

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action/default/workspace-action-default-kind.element.ts → src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action/default/workspace-action.element.ts

@@ -2,20 +2,18 @@ import type {
 	ManifestWorkspaceAction,
 	ManifestWorkspaceActionMenuItem,
 	MetaWorkspaceActionDefaultKind,
+	UmbWorkspaceActionArgs,
 	UmbWorkspaceActionDefaultKind,
 } from '../../../types.js';
+import { customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { stringOrStringArrayIntersects } from '@umbraco-cms/backoffice/utils';
 import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
-import { html, customElement, property, state, when } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import {
-	type UmbExtensionElementAndApiInitializer,
-	UmbExtensionsElementAndApiInitializer,
-} from '@umbraco-cms/backoffice/extension-api';
-import { stringOrStringArrayIntersects } from '@umbraco-cms/backoffice/utils';
-
-import '../../workspace-action-menu/index.js';
+import { UmbExtensionsElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbAction } from '@umbraco-cms/backoffice/action';
+import type { UmbExtensionElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import type { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-workspace-action')
 export class UmbWorkspaceActionElement<
@@ -24,7 +22,7 @@ export class UmbWorkspaceActionElement<
 > extends UmbLitElement {
 	#manifest?: ManifestWorkspaceAction<MetaType>;
 	#api?: ApiType;
-	#extensionsController?: UmbExtensionsElementAndApiInitializer<
+	protected _extensionsController?: UmbExtensionsElementAndApiInitializer<
 		ManifestWorkspaceActionMenuItem,
 		'workspaceActionMenuItem',
 		ManifestWorkspaceActionMenuItem
@@ -63,6 +61,10 @@ export class UmbWorkspaceActionElement<
 		return this.#api;
 	}
 
+	protected _actionApi?: UmbAction<UmbWorkspaceActionArgs<MetaType>>;
+
+	protected _buttonLabel?: string;
+
 	@state()
 	private _buttonState?: UUIButtonState;
 
@@ -76,7 +78,7 @@ export class UmbWorkspaceActionElement<
 	private _isDisabled = false;
 
 	@state()
-	private _items: Array<UmbExtensionElementAndApiInitializer<ManifestWorkspaceActionMenuItem>> = [];
+	protected _items: Array<UmbExtensionElementAndApiInitializer<ManifestWorkspaceActionMenuItem>> = [];
 
 	#buttonStateResetTimeoutId: number | null = null;
 
@@ -101,7 +103,7 @@ export class UmbWorkspaceActionElement<
 			}
 		}
 
-		this.#observeExtensions(Array.from(aliases));
+		this.observeExtensions(Array.from(aliases));
 	}
 
 	async #onClick(event: MouseEvent) {
@@ -115,8 +117,9 @@ export class UmbWorkspaceActionElement<
 			}
 
 			try {
-				if (!this.#api) throw new Error('No api defined');
-				await this.#api.execute();
+				const api = this._actionApi ?? this.#api;
+				if (!api) throw new Error('No api defined');
+				await api.execute();
 				this._buttonState = 'success';
 				this.#initButtonStateReset();
 			} catch (reason) {
@@ -157,37 +160,35 @@ export class UmbWorkspaceActionElement<
 		}
 	}
 
-	#observeExtensions(aliases: string[]): void {
-		this.#extensionsController?.destroy();
-		this.#extensionsController = new UmbExtensionsElementAndApiInitializer<
+	protected observeExtensions(aliases: string[]): void {
+		this._extensionsController?.destroy();
+		this._extensionsController = new UmbExtensionsElementAndApiInitializer<
 			ManifestWorkspaceActionMenuItem,
 			'workspaceActionMenuItem',
 			ManifestWorkspaceActionMenuItem
 		>(
 			this,
 			umbExtensionsRegistry,
 			'workspaceActionMenuItem',
-			ExtensionApiArgsMethod,
+			(manifest) => [{ meta: manifest.meta }],
 			(action) => stringOrStringArrayIntersects(action.forWorkspaceActions, aliases),
-			(extensionControllers) => {
-				this._items = extensionControllers;
+			(actions) => {
+				this._items = actions;
 			},
 			undefined, // We can leave the alias to undefined, as we destroy this our selfs.
 		);
 	}
 
 	#renderButton() {
-		const label = this.#manifest?.meta.label
-			? this.localize.string(this.#manifest.meta.label)
-			: (this.#manifest?.name ?? '');
+		const label = this.localize.string(this._buttonLabel || this.#manifest?.meta.label || this.#manifest?.name || '');
 		return html`
 			<uui-button
 				data-mark="workspace-action:${this.#manifest?.alias}"
-				.href=${this._href}
-				look=${this.#manifest?.meta.look ?? 'default'}
 				color=${this.#manifest?.meta.color ?? 'default'}
+				look=${this.#manifest?.meta.look ?? 'default'}
 				label=${this._additionalOptions ? label + '…' : label}
 				.disabled=${this._isDisabled}
+				.href=${this._href}
 				.state=${this._buttonState}
 				@click=${this.#onClick}></uui-button>
 		`;
@@ -196,16 +197,16 @@ export class UmbWorkspaceActionElement<
 	#renderActionMenu() {
 		return html`
 			<umb-workspace-action-menu
-				.items=${this._items}
-				color="${this.#manifest?.meta.color ?? 'default'}"
-				look="${this.#manifest?.meta.look ?? 'default'}"></umb-workspace-action-menu>
+				color=${this.#manifest?.meta.color ?? 'default'}
+				look=${this.#manifest?.meta.look ?? 'default'}
+				.items=${this._items}></umb-workspace-action-menu>
 		`;
 	}
 
 	override render() {
 		return when(
 			this._items.length,
-			() => html` <uui-button-group> ${this.#renderButton()} ${this.#renderActionMenu()} </uui-button-group> `,
+			() => html`<uui-button-group>${this.#renderButton()}${this.#renderActionMenu()}</uui-button-group>`,
 			() => this.#renderButton(),
 		);
 	}
@@ -223,12 +224,3 @@ declare global {
 		'umb-workspace-action': UmbWorkspaceActionElement;
 	}
 }
-
-/**
- *
- * @param manifest
- * @returns An array of arguments to pass to the extension API initializer.
- */
-function ExtensionApiArgsMethod(manifest: ManifestWorkspaceActionMenuItem) {
-	return [{ meta: manifest.meta }];
-}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action/index.ts

@@ -1,2 +1,3 @@
 export * from './common/index.js';
+export * from './default/index.js';
 export * from './workspace-action-base.controller.js';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts

@@ -7,6 +7,7 @@ import { manifests as itemManifests } from './item/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as modalManifests } from './modals/manifests.js';
 import { manifests as pickerManifests } from './picker/manifests.js';
+import { manifests as previewManifests } from './preview/manifests.js';
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
 import { manifests as publishingManifests } from './publishing/manifests.js';
 import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
@@ -31,6 +32,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...menuManifests,
 	...modalManifests,
 	...pickerManifests,
+	...previewManifests,
 	...propertyEditorManifests,
 	...publishingManifests,
 	...recycleBinManifests,

src/Umbraco.Web.UI.Client/src/packages/documents/documents/preview/manifests.ts

@@ -0,0 +1,8 @@
+import { manifests as previewOptionManifests } from './workspace-action-menu-item/manifests.js';
+import { manifests as workspaceActionManifests } from './workspace-action/manifests.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	...previewOptionManifests,
+	...workspaceActionManifests,
+];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/preview/types.ts

@@ -0,0 +1 @@
+export type * from './workspace-action-menu-item/types.js';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/preview/workspace-action-menu-item/manifests.ts

@@ -0,0 +1,20 @@
+import { manifest as workspaceActionItemKind } from './preview-option.workspace-action-item.kind.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+const saveAndPreview: UmbExtensionManifest = {
+	type: 'workspaceActionMenuItem',
+	kind: 'previewOption',
+	alias: 'Umb.Document.WorkspaceActionMenuItem.SaveAndPreview',
+	name: 'Save And Preview Document Preview Option',
+	forWorkspaceActions: 'Umb.WorkspaceAction.Document.SaveAndPreview',
+	weight: 100,
+	meta: {
+		label: '#buttons_saveAndPreview',
+		urlProviderAlias: 'umbDocumentUrlProvider',
+	},
+};
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	saveAndPreview,
+	workspaceActionItemKind,
+];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/preview/workspace-action-menu-item/preview-option.action.ts

@@ -0,0 +1,17 @@
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../workspace/document-workspace.context-token.js';
+import type { ManifestWorkspaceActionMenuItemPreviewOptionKind } from './preview-option.workspace-action-menu-item.extension.js';
+import { UmbWorkspaceActionBase } from '@umbraco-cms/backoffice/workspace';
+
+export class UmbDocumentSaveAndPreviewWorkspaceAction extends UmbWorkspaceActionBase {
+	manifest?: ManifestWorkspaceActionMenuItemPreviewOptionKind;
+
+	override async execute() {
+		const workspaceContext = await this.getContext(UMB_DOCUMENT_WORKSPACE_CONTEXT);
+		if (!workspaceContext) {
+			throw new Error('The workspace context is missing');
+		}
+		await workspaceContext?.saveAndPreview(this.manifest?.meta.urlProviderAlias);
+	}
+}
+
+export { UmbDocumentSaveAndPreviewWorkspaceAction as api };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/preview/workspace-action-menu-item/preview-option.workspace-action-item.kind.ts

@@ -0,0 +1,21 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: UmbExtensionManifestKind = {
+	type: 'kind',
+	alias: 'Umb.Kind.WorkspaceActionMenuItem.PreviewOption',
+	matchType: 'workspaceActionMenuItem',
+	matchKind: 'previewOption',
+	manifest: {
+		type: 'workspaceActionMenuItem',
+		kind: 'previewOption',
+		weight: 1000,
+		api: () => import('./preview-option.action.js'),
+		elementName: 'umb-workspace-action-menu-item',
+		forWorkspaceActions: 'Umb.WorkspaceAction.Document.SaveAndPreview',
+		meta: {
+			icon: '',
+			label: '(Missing label in manifest)',
+			urlProviderAlias: 'umbDocumentUrlProvider',
+		},
+	},
+};