Make Create Actions open as dialogs (part 2)

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -471,16 +471,16 @@ export default {
 			"Defines a re-usable set of properties that can be included in the definition of multiple other Document Types. For example, a set of 'Common Page Settings'.",
 		folder: 'Folder',
 		folderDescription: 'Used to organise items and other folders. Keep items structured and easy to access.',
-		newFolder: 'New folder',
-		newDataType: 'New Data Type',
+		newFolder: 'Folder',
+		newDataType: 'Data Type',
 		newDataTypeDescription: 'Used to define a configuration for a Property Type on a Content Type.',
-		newJavascriptFile: 'New JavaScript file',
-		newEmptyPartialView: 'New empty partial view',
-		newPartialViewMacro: 'New partial view macro',
-		newPartialViewFromSnippet: 'New partial view from snippet',
-		newPartialViewMacroFromSnippet: 'New partial view macro from snippet',
-		newPartialViewMacroNoMacro: 'New partial view macro (without macro)',
-		newStyleSheetFile: 'New Stylesheet',
+		newJavascriptFile: 'JavaScript file',
+		newEmptyPartialView: 'Empty partial view',
+		newPartialViewMacro: 'Partial view macro',
+		newPartialViewFromSnippet: 'Partial view from snippet',
+		newPartialViewMacroFromSnippet: 'Partial view macro from snippet',
+		newPartialViewMacroNoMacro: 'Partial view macro (without macro)',
+		newStyleSheetFile: 'Stylesheet file',
 	},
 	dashboard: {
 		browser: 'Browse your website',

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts

@@ -132,7 +132,7 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle
 
 		return html`
 			<umb-ref-item
-				name=${label}
+				name=${manifest.meta.additionalOptions ? label + '...' : label}
 				detail=${ifDefined(description)}
 				icon=${manifest.meta.icon}
 				href=${ifDefined(href)}

src/Umbraco.Web.UI.Client/src/packages/core/tree/folder/entity-create-option-action/manifests.ts

@@ -15,7 +15,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 			meta: {
 				icon: 'icon-folder',
 				label: '#create_folder',
-				description: '#create_folderDescription',
+				additionalOptions: true,
 			},
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/data-type/entity-actions/create/folder/manifests.ts

@@ -12,7 +12,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 		meta: {
 			icon: 'icon-folder',
 			label: '#create_folder',
-			description: '#create_folderDescription',
+			additionalOptions: true,
 			folderRepositoryAlias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS,
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/constants.ts

@@ -14,7 +14,6 @@ export const UMB_DOCUMENT_BLUEPRINT_OPTIONS_CREATE_MODAL = new UmbModalToken<
 	UmbDocumentBlueprintOptionsCreateModalValue
 >('Umb.Modal.DocumentBlueprintOptionsCreate', {
 	modal: {
-		type: 'sidebar',
-		size: 'small',
+		type: 'dialog',
 	},
 });

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/document-blueprint-options-create-modal.element.ts

@@ -8,9 +8,13 @@ import type {
 } from './constants.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { html, customElement, css, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { type UmbSelectedEvent, UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbCreateFolderEntityAction, type UmbTreeElement } from '@umbraco-cms/backoffice/tree';
+import { UmbModalBaseElement, umbOpenModal } from '@umbraco-cms/backoffice/modal';
+import { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbCreateFolderEntityAction } from '@umbraco-cms/backoffice/tree';
+import {
+	UMB_DOCUMENT_TYPE_PICKER_MODAL,
+	type UmbDocumentTypeTreeItemModel,
+} from '@umbraco-cms/backoffice/document-type';
 
 @customElement('umb-document-blueprint-options-create-modal')
 export class UmbDocumentBlueprintOptionsCreateModalElement extends UmbModalBaseElement<
@@ -58,40 +62,42 @@ export class UmbDocumentBlueprintOptionsCreateModalElement extends UmbModalBaseE
 			.catch(() => {});
 	}
 
-	#onSelected(event: UmbSelectedEvent) {
+	async #onCreateBlueprintClick(event: PointerEvent) {
 		event.stopPropagation();
-		const element = event.target as UmbTreeElement;
-		this.value = { documentTypeUnique: element.getSelection()[0] };
+		const value = await umbOpenModal(this, UMB_DOCUMENT_TYPE_PICKER_MODAL, {
+			data: {
+				hideTreeRoot: true,
+				pickableFilter: (item: UmbDocumentTypeTreeItemModel) => item.isElement == false,
+			},
+		});
+
+		const selection = value.selection.filter((x) => x !== null);
+		this.value = { documentTypeUnique: selection[0] };
 		this.modalContext?.dispatchEvent(new UmbSelectionChangeEvent());
 		this._submitModal();
 	}
 
 	override render() {
 		return html`
-			<umb-body-layout headline=${this.localize.term('actions_createblueprint')}>
-				<uui-box headline=${this.localize.term('blueprints_createBlueprintFolderUnder', this._parentName)}>
-					<uui-menu-item @click=${this.#onCreateFolderClick} label=${this.localize.term('create_newFolder') + '...'}>
-						<uui-icon slot="icon" name="icon-folder"></uui-icon>
-					</uui-menu-item>
-				</uui-box>
-				<uui-box headline=${this.localize.term('blueprints_createBlueprintItemUnder', this._parentName)}>
-					<umb-localize key="create_createContentBlueprint">
-						Select the Document Type you want to make a Document Blueprint for
-					</umb-localize>
-					<umb-tree
-						alias="Umb.Tree.DocumentType"
-						.props=${{
-							hideTreeRoot: true,
-							selectableFilter: (item: any) => item.isElement == false,
-						}}
-						@selected=${this.#onSelected}></umb-tree>
-				</uui-box>
+			<uui-dialog-layout headline=${this.localize.term('general_create')}>
+				<uui-ref-list>
+					<umb-ref-item
+						name="Document Blueprint for..."
+						icon="icon-blueprint"
+						@open=${this.#onCreateBlueprintClick}></umb-ref-item>
+
+					<umb-ref-item
+						name=${this.localize.term('create_newFolder') + '...'}
+						icon="icon-folder"
+						@open=${this.#onCreateFolderClick}></umb-ref-item>
+				</uui-ref-list>
+
 				<uui-button
 					slot="actions"
 					id="cancel"
 					label=${this.localize.term('buttons_confirmActionCancel')}
 					@click="${this._rejectModal}"></uui-button>
-			</umb-body-layout>
+			</uui-dialog-layout>
 		`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/manifests.ts

@@ -15,7 +15,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 		meta: {
 			icon: 'icon-folder',
 			label: '#create_folder',
-			description: '#create_folderDescription',
+			additionalOptions: true,
 			folderRepositoryAlias: UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS,
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/folder/manifests.ts

@@ -12,7 +12,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 		meta: {
 			icon: 'icon-folder',
 			label: '#create_folder',
-			description: '#create_folderDescription',
+			additionalOptions: true,
 			folderRepositoryAlias: UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS,
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/options-modal/partial-view-create-options-modal.element.ts

@@ -1,7 +1,7 @@
 import { UMB_PARTIAL_VIEW_FROM_SNIPPET_MODAL } from '../snippet-modal/index.js';
 import { UMB_PARTIAL_VIEW_FOLDER_REPOSITORY_ALIAS } from '../../../constants.js';
 import type { UmbPartialViewCreateOptionsModalData } from './index.js';
-import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement, umbOpenModal } from '@umbraco-cms/backoffice/modal';
 import { UmbCreateFolderEntityAction } from '@umbraco-cms/backoffice/tree';
 
@@ -62,7 +62,7 @@ export class UmbPartialViewCreateOptionsModalElement extends UmbModalBaseElement
 
 	override render() {
 		return html`
-			<uui-dialog-layout headline="Create Partial View">
+			<uui-dialog-layout headline=${this.localize.term('general_create')}>
 				<!-- TODO: construct url -->
 				<uui-menu-item
 					href=${this.#getCreateHref()}
@@ -89,6 +89,14 @@ export class UmbPartialViewCreateOptionsModalElement extends UmbModalBaseElement
 			</uui-dialog-layout>
 		`;
 	}
+
+	static override styles = [
+		css`
+			uui-dialog-layout {
+				--uui-menu-item-flat-structure: 1;
+			}
+		`,
+	];
 }
 
 export default UmbPartialViewCreateOptionsModalElement;

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/index.ts

@@ -5,8 +5,7 @@ export const UMB_SCRIPT_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbScriptCreate
 	'Umb.Modal.Script.CreateOptions',
 	{
 		modal: {
-			type: 'sidebar',
-			size: 'small',
+			type: 'dialog',
 		},
 	},
 );

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/script-create-options-modal.element.ts

@@ -47,20 +47,21 @@ export class UmbScriptCreateOptionsModalElement extends UmbModalBaseElement<UmbS
 
 	override render() {
 		return html`
-			<umb-body-layout headline="Create Script">
-				<uui-box>
+			<uui-dialog-layout headline=${this.localize.term('general_create')}>
+				<uui-ref-list>
 					<!-- TODO: construct url -->
-					<uui-menu-item href=${this.#getCreateHref()} label="New Javascript file" @click=${this.#onNavigate}>
-						<uui-icon slot="icon" name="icon-document-js"></uui-icon>}
-					</uui-menu-item>
+					<umb-ref-item
+						name="Javascript file"
+						icon="icon-document-js"
+						href=${this.#getCreateHref()}
+						@click=${this.#onNavigate}>
+					</umb-ref-item>
 
-					<uui-menu-item @click=${this.#onCreateFolderClick} label="New Folder...">
-						<uui-icon slot="icon" name="icon-folder"></uui-icon>}
-					</uui-menu-item>
-				</uui-box>
+					<umb-ref-item name="Folder..." icon="icon-folder" @open=${this.#onCreateFolderClick}></umb-ref-item>
+				</uui-ref-list>
 
 				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._rejectModal}"></uui-button>
-			</umb-body-layout>
+			</uui-dialog-layout>
 		`;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/manifests.ts

@@ -46,7 +46,7 @@ const entityCreateOptionActions: Array<UmbExtensionManifest> = [
 		meta: {
 			icon: 'icon-folder',
 			label: '#create_folder',
-			description: '#create_folderDescription',
+			additionalOptions: true,
 			folderRepositoryAlias: UMB_STYLESHEET_FOLDER_REPOSITORY_ALIAS,
 		},
 	},

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^2.0.40",
-    "@umbraco/playwright-testhelpers": "^17.0.0-beta.4",
+    "@umbraco/playwright-testhelpers": "^17.0.0-beta.7",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentBlueprint/DocumentBlueprint.spec.ts

@@ -23,7 +23,9 @@ test('can create a document blueprint from the settings menu', {tag: '@smoke'},
   // Act
   await umbracoUi.documentBlueprint.clickActionsMenuAtRoot();
   await umbracoUi.documentBlueprint.clickCreateActionMenuOption();
+  await umbracoUi.documentBlueprint.clickCreateNewDocumentBlueprintButton();
   await umbracoUi.documentBlueprint.clickTextButtonWithName(documentTypeName);
+  await umbracoUi.documentBlueprint.clickChooseButton();
   await umbracoUi.documentBlueprint.enterDocumentBlueprintName(documentBlueprintName);
   await umbracoUi.documentBlueprint.clickSaveButton();
 
@@ -108,7 +110,9 @@ test('can create a variant document blueprint', {tag: '@release'}, async ({umbra
   // Act
   await umbracoUi.documentBlueprint.clickActionsMenuAtRoot();
   await umbracoUi.documentBlueprint.clickCreateActionMenuOption();
+  await umbracoUi.documentBlueprint.clickCreateNewDocumentBlueprintButton();
   await umbracoUi.documentBlueprint.clickTextButtonWithName(documentTypeName);
+  await umbracoUi.documentBlueprint.clickChooseButton();
   await umbracoUi.documentBlueprint.enterDocumentBlueprintName(documentBlueprintName);
   await umbracoUi.documentBlueprint.clickSaveButton();