add 'publish with descendants' modal

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/index.ts

@@ -1,4 +1,5 @@
 export * from './publish-modal/index.js';
+export * from './publish-with-descendants-modal/index.js';
 export * from './save-modal/index.js';
 export * from './unpublish-modal/index.js';
 export * from './schedule-modal/index.js';

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

@@ -4,6 +4,7 @@ export const UMB_DOCUMENT_SAVE_MODAL_ALIAS = 'Umb.Modal.DocumentSave';
 export const UMB_DOCUMENT_PUBLISH_MODAL_ALIAS = 'Umb.Modal.DocumentPublish';
 export const UMB_DOCUMENT_UNPUBLISH_MODAL_ALIAS = 'Umb.Modal.DocumentUnpublish';
 export const UMB_DOCUMENT_SCHEDULE_MODAL_ALIAS = 'Umb.Modal.DocumentSchedule';
+export const UMB_DOCUMENT_PUBLISH_WITH_DESCENDANTS_MODAL_ALIAS = 'Umb.Modal.DocumentPublishWithDescendants';
 
 const modals: Array<ManifestModal> = [
 	{
@@ -30,6 +31,12 @@ const modals: Array<ManifestModal> = [
 		name: 'Document Schedule Modal',
 		js: () => import('./schedule-modal/document-schedule-modal.element.js'),
 	},
+	{
+		type: 'modal',
+		alias: UMB_DOCUMENT_PUBLISH_WITH_DESCENDANTS_MODAL_ALIAS,
+		name: 'Document Publish With Descendants Modal',
+		js: () => import('./publish-with-descendants-modal/document-publish-with-descendants-modal.element.js'),
+	},
 ];
 
 export const manifests = [...modals];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/publish-with-descendants-modal/document-publish-with-descendants-modal.element.ts

@@ -0,0 +1,121 @@
+import { UmbDocumentVariantState, type UmbDocumentVariantOptionModel } from '../../types.js';
+import type {
+	UmbDocumentPublishWithDescendantsModalData,
+	UmbDocumentPublishWithDescendantsModalValue,
+} from './document-publish-with-descendants-modal.token.js';
+import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
+
+import '../shared/document-variant-language-picker.element.js';
+
+@customElement('umb-document-publish-with-descendants-modal')
+export class UmbDocumentPublishWithDescendantsModalElement extends UmbModalBaseElement<
+	UmbDocumentPublishWithDescendantsModalData,
+	UmbDocumentPublishWithDescendantsModalValue
+> {
+	#selectionManager = new UmbSelectionManager<string>(this);
+
+	@state()
+	_options: Array<UmbDocumentVariantOptionModel> = [];
+
+	firstUpdated() {
+		this.#configureSelectionManager();
+	}
+
+	async #configureSelectionManager() {
+		this.#selectionManager.setMultiple(true);
+		this.#selectionManager.setSelectable(true);
+
+		// Only display variants that are relevant to pick from, i.e. variants that are draft or published with pending changes:
+		this._options =
+			this.data?.options.filter(
+				(option) => option.variant && option.variant.state !== UmbDocumentVariantState.NOT_CREATED,
+			) ?? [];
+
+		let selected = this.value?.selection ?? [];
+
+		// Filter selection based on options:
+		selected = selected.filter((s) => this._options.some((o) => o.unique === s));
+
+		this.#selectionManager.setSelection(selected);
+
+		// Additionally select mandatory languages:
+		this._options.forEach((variant) => {
+			if (variant.language?.isMandatory) {
+				this.#selectionManager.select(variant.unique);
+			}
+		});
+	}
+
+	#submit() {
+		this.value = { ...this.value, selection: this.#selectionManager.getSelection() };
+		this.modalContext?.submit();
+	}
+
+	#close() {
+		this.modalContext?.reject();
+	}
+
+	render() {
+		return html`<umb-body-layout headline=${this.localize.term('buttons_publishDescendants')}>
+			<p id="subtitle">
+				${this._options.length === 1
+					? html`<umb-localize
+							key="content_publishDescendantsHelp"
+							.args=${[this._options[0].variant?.name ?? this._options[0].language.name]}>
+							Publish <strong>${this._options[0].variant?.name}</strong> and all content items underneath and thereby
+							making their content publicly available.
+						</umb-localize>`
+					: html`
+							<umb-localize key="content_publishDescendantsWithVariantsHelp">
+								Publish variants and variants of same type underneath and thereby making their content publicly
+								available.
+							</umb-localize>
+						`}
+			</p>
+
+			<umb-document-variant-language-picker
+				.selectionManager=${this.#selectionManager}
+				.variantLanguageOptions=${this._options}></umb-document-variant-language-picker>
+
+			<uui-form-layout-item>
+				<uui-toggle
+					id="includeUnpublishedDescendants"
+					label=${this.localize.term('content_includeUnpublished')}
+					?checked=${this.value?.includeUnpublishedDescendants}
+					@change=${() =>
+						(this.value.includeUnpublishedDescendants = !this.value.includeUnpublishedDescendants)}></uui-toggle>
+			</uui-form-layout-item>
+
+			<div slot="actions">
+				<uui-button label=${this.localize.term('general_close')} @click=${this.#close}></uui-button>
+				<uui-button
+					label="${this.localize.term('buttons_publishDescendants')}"
+					look="primary"
+					color="positive"
+					@click=${this.#submit}></uui-button>
+			</div>
+		</umb-body-layout> `;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				width: 400px;
+				max-width: 90vw;
+			}
+		`,
+	];
+}
+
+export default UmbDocumentPublishWithDescendantsModalElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-publish-with-descendants-modal': UmbDocumentPublishWithDescendantsModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/publish-with-descendants-modal/document-publish-with-descendants-modal.stories.ts

@@ -0,0 +1,176 @@
+import './document-publish-with-descendants-modal.element.js';
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { UmbDocumentVariantState } from '../../types.js';
+import type {
+	UmbDocumentPublishWithDescendantsModalData,
+	UmbDocumentPublishWithDescendantsModalValue,
+} from './document-publish-with-descendants-modal.token.js';
+import type { UmbDocumentPublishWithDescendantsModalElement } from './document-publish-with-descendants-modal.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
+const modalData: UmbDocumentPublishWithDescendantsModalData = {
+	options: [
+		{
+			unique: 'en-us',
+			culture: 'en-us',
+			segment: null,
+			variant: {
+				name: 'English variant name',
+				culture: 'en-us',
+				state: UmbDocumentVariantState.PUBLISHED,
+				createDate: '2021-08-25T14:00:00Z',
+				publishDate: null,
+				updateDate: null,
+				segment: null,
+			},
+			language: {
+				entityType: 'language',
+				name: 'English',
+				unique: 'en-us',
+				isDefault: true,
+				isMandatory: true,
+				fallbackIsoCode: null,
+			},
+		},
+		{
+			unique: 'en-gb',
+			culture: 'en-gb',
+			segment: null,
+			variant: {
+				name: 'English (GB)',
+				culture: 'en-us',
+				segment: null,
+				state: UmbDocumentVariantState.DRAFT,
+				createDate: '2021-08-25T14:00:00Z',
+				publishDate: null,
+				updateDate: null,
+			},
+			language: {
+				entityType: 'language',
+				name: 'English (GB)',
+				unique: 'en-gb',
+				isDefault: true,
+				isMandatory: false,
+				fallbackIsoCode: null,
+			},
+		},
+		{
+			unique: 'da-dk',
+			culture: 'da-dk',
+			segment: null,
+			variant: {
+				name: 'Danish variant name',
+				culture: 'da-dk',
+				state: UmbDocumentVariantState.NOT_CREATED,
+				createDate: null,
+				publishDate: null,
+				updateDate: null,
+				segment: null,
+			},
+			language: {
+				entityType: 'language',
+				name: 'Danish',
+				unique: 'da-dk',
+				isDefault: false,
+				isMandatory: false,
+				fallbackIsoCode: null,
+			},
+		},
+	],
+};
+
+const modalValue: UmbDocumentPublishWithDescendantsModalValue = {
+	selection: ['en-us'],
+};
+
+const meta: Meta<UmbDocumentPublishWithDescendantsModalElement> = {
+	title: 'Workspaces/Document/Modals/Publish With Descendants Modal',
+	component: 'umb-document-publish-with-descendants-modal',
+	id: 'umb-document-publish-with-descendants-modal',
+	args: {
+		data: modalData,
+		value: modalValue,
+	},
+	decorators: [(Story) => html`<div style="border: 1px solid #000;">${Story()}</div>`],
+	parameters: {
+		layout: 'centered',
+		docs: {
+			source: {
+				language: 'ts',
+				code: `
+import { UMB_DOCUMENT_PUBLISH_WITH_DESCENDANTS_MODAL, UmbDocumentVariantState } from '@umbraco-cms/backoffice/document';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+
+this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (modalManager) => {
+	const result = modalManager.open(this, UMB_DOCUMENT_PUBLISH_WITH_DESCENDANTS_MODAL, {
+		data: {
+			options: [
+				{
+					unique: 'en-us',
+					culture: 'en-us',
+					segment: null,
+					variant: {
+						name: 'English variant name',
+						culture: 'en-us',
+						state: UmbDocumentVariantState.PUBLISHED,
+						createDate: '2021-08-25T14:00:00Z',
+						publishDate: null,
+						updateDate: null,
+						segment: null,
+					},
+					language: {
+						entityType: 'language',
+						name: 'English',
+						unique: 'en-us',
+						isDefault: true,
+						isMandatory: true,
+						fallbackIsoCode: null,
+					},
+				},
+				{
+					unique: 'da-dk',
+					culture: 'da-dk',
+					segment: null,
+					variant: {
+						name: 'Danish variant name',
+						culture: 'da-dk',
+						state: UmbDocumentVariantState.NOT_CREATED,
+						createDate: null,
+						publishDate: null,
+						updateDate: null,
+						segment: null,
+					},
+					language: {
+						entityType: 'language',
+						name: 'Danish',
+						unique: 'da-dk',
+						isDefault: false,
+						isMandatory: false,
+						fallbackIsoCode: null,
+					},
+				},
+			],
+		}
+	}).onSubmit().catch(() => undefined);
+});
+				`,
+			},
+		},
+	},
+};
+
+export default meta;
+type Story = StoryObj<UmbDocumentPublishWithDescendantsModalElement>;
+
+export const Overview: Story = {};
+
+export const Invariant: Story = {
+	args: {
+		data: {
+			...modalData,
+			options: modalData.options.slice(0, 1),
+		},
+		value: modalValue,
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/publish-with-descendants-modal/document-publish-with-descendants-modal.token.ts

@@ -0,0 +1,18 @@
+import type { UmbDocumentVariantPickerData, UmbDocumentVariantPickerValue } from '../types.js';
+import { UMB_DOCUMENT_PUBLISH_WITH_DESCENDANTS_MODAL_ALIAS } from '../manifests.js';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbDocumentPublishWithDescendantsModalData extends UmbDocumentVariantPickerData {}
+
+export interface UmbDocumentPublishWithDescendantsModalValue extends UmbDocumentVariantPickerValue {
+	includeUnpublishedDescendants?: boolean;
+}
+
+export const UMB_DOCUMENT_PUBLISH_WITH_DESCENDANTS_MODAL = new UmbModalToken<
+	UmbDocumentPublishWithDescendantsModalData,
+	UmbDocumentPublishWithDescendantsModalValue
+>(UMB_DOCUMENT_PUBLISH_WITH_DESCENDANTS_MODAL_ALIAS, {
+	modal: {
+		type: 'dialog',
+	},
+});

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/publish-with-descendants-modal/index.ts

@@ -0,0 +1 @@
+export * from './document-publish-with-descendants-modal.token.js';