From 5f0122e18bc62eaef14596eecc81f095ab77334b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 21 Oct 2025 15:24:52 +0200 Subject: [PATCH] Make Create Actions open as dialogs (part 2) (#20523) * open script create options as a dialog instead of sidebar * align and simplify the blueprint dialog options * debounce loadCollection calls * update document collection context * update media collection context * Updated tests * Bumped test helpers * Revert "debounce loadCollection calls" This reverts commit 1c15dda08d2058aeffe30a5173bdfbfd47dfe0ce. * Revert "update document collection context" This reverts commit 47d74a8f5d220a53b3bcd4857a9617de51124fbf. * Revert "update media collection context" This reverts commit f2eb1f22c10567666771f43a09c3715a1e1ba9d1. * align create dialog texts * fix indention * Bumped version of test helpers --------- Co-authored-by: Andreas Zerbst Co-authored-by: Andreas Zerbst <73799582+andr317c@users.noreply.github.com> --- .../src/assets/lang/en.ts | 18 +++--- ...create-option-action-list-modal.element.ts | 2 +- .../entity-create-option-action/manifests.ts | 2 +- .../entity-actions/create/folder/manifests.ts | 2 +- .../entity-actions/create/modal/constants.ts | 3 +- ...-blueprint-options-create-modal.element.ts | 56 ++++++++++--------- .../entity-actions/create/folder/manifests.ts | 2 +- .../entity-actions/create/folder/manifests.ts | 2 +- ...rtial-view-create-options-modal.element.ts | 12 +++- .../create/options-modal/index.ts | 3 +- .../script-create-options-modal.element.ts | 21 +++---- .../entity-actions/create/manifests.ts | 2 +- .../package-lock.json | 16 +++--- .../Umbraco.Tests.AcceptanceTest/package.json | 2 +- .../DocumentBlueprint.spec.ts | 4 ++ 15 files changed, 82 insertions(+), 65 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 68370c54c1..f9b805b8bd 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -472,16 +472,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', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts index ab0654c5de..176e643496 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts +++ b/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` = meta: { icon: 'icon-folder', label: '#create_folder', - description: '#create_folderDescription', + additionalOptions: true, }, }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/entity-actions/create/folder/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/entity-actions/create/folder/manifests.ts index dc54d290a8..d9abd0ac95 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/entity-actions/create/folder/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/entity-actions/create/folder/manifests.ts @@ -12,7 +12,7 @@ export const manifests: Array = meta: { icon: 'icon-folder', label: '#create_folder', - description: '#create_folderDescription', + additionalOptions: true, folderRepositoryAlias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS, }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/constants.ts index 6d261ca4c4..4cb54e036c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/constants.ts +++ b/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', }, }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/document-blueprint-options-create-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/document-blueprint-options-create-modal.element.ts index 41bb58dc45..93e188b442 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/modal/document-blueprint-options-create-modal.element.ts +++ b/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` - - - - - - - - - Select the Document Type you want to make a Document Blueprint for - - item.isElement == false, - }} - @selected=${this.#onSelected}> - + + + + + + + - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/manifests.ts index 95ba1046b7..a7d9d0365f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/folder/manifests.ts @@ -15,7 +15,7 @@ export const manifests: Array = meta: { icon: 'icon-folder', label: '#create_folder', - description: '#create_folderDescription', + additionalOptions: true, folderRepositoryAlias: UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS, }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/folder/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/folder/manifests.ts index 101d70fc08..90994ed1c4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/folder/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/entity-actions/create/folder/manifests.ts @@ -12,7 +12,7 @@ export const manifests: Array = meta: { icon: 'icon-folder', label: '#create_folder', - description: '#create_folderDescription', + additionalOptions: true, folderRepositoryAlias: UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS, }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/options-modal/partial-view-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/options-modal/partial-view-create-options-modal.element.ts index 5f7b27b28a..0bde152792 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/entity-actions/create/options-modal/partial-view-create-options-modal.element.ts +++ b/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` - + `; } + + static override styles = [ + css` + uui-dialog-layout { + --uui-menu-item-flat-structure: 1; + } + `, + ]; } export default UmbPartialViewCreateOptionsModalElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/index.ts index bb3f144fdd..a15bf4f8c0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/index.ts +++ b/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 - + + - - } - + + - - } - - + + - + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/manifests.ts index 1b13642c84..fae97fe98c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/manifests.ts @@ -46,7 +46,7 @@ const entityCreateOptionActions: Array = [ meta: { icon: 'icon-folder', label: '#create_folder', - description: '#create_folderDescription', + additionalOptions: true, folderRepositoryAlias: UMB_STYLESHEET_FOLDER_REPOSITORY_ALIAS, }, }, diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index 87ed32ef3a..4b057b1d03 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json @@ -8,7 +8,7 @@ "hasInstallScript": true, "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" @@ -58,21 +58,21 @@ } }, "node_modules/@umbraco/json-models-builders": { - "version": "2.0.40", - "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-2.0.40.tgz", - "integrity": "sha512-Yqojp/0akRgXsnjg18+MjMdkRvFrmlUNbfITgZ3d1h/PIRbWXPNKY1YAfZmdUv+g1SRSHrbIRpPPtSy+gNOjHw==", + "version": "2.0.41", + "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-2.0.41.tgz", + "integrity": "sha512-rCNUHCOpcuWIj7xUhk0lpcn4jzk9y82jHs9FSb7kxH716AnDyYvwuI+J0Ayd4hhWtXXqNCRqugCNYjG+rvzshQ==", "license": "MIT", "dependencies": { "camelize": "^1.0.1" } }, "node_modules/@umbraco/playwright-testhelpers": { - "version": "17.0.0-beta.4", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-17.0.0-beta.4.tgz", - "integrity": "sha512-+OE1A2oAdFel4myf5T/jJLuw0aLvSOUBplkUfsYFj2ACeLygfAp/MM7q2RQ+YlCym/wdF+jAqJM3g+zsKEDjaQ==", + "version": "17.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-17.0.0-beta.7.tgz", + "integrity": "sha512-5fhmVVSpJkH6Inx8nA9qqqvZzYuPdDxJdQF2IzY0oSf8C0eti+TJ2BKrYfTLmZTfVqmHUas72BMGser5pfpl9A==", "license": "MIT", "dependencies": { - "@umbraco/json-models-builders": "2.0.40", + "@umbraco/json-models-builders": "2.0.41", "node-fetch": "^2.6.7" } }, diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json index f1a7b85fa4..013bfdd438 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package.json +++ b/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" diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentBlueprint/DocumentBlueprint.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentBlueprint/DocumentBlueprint.spec.ts index fdcef65d63..f9e7ce5a72 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/DocumentBlueprint/DocumentBlueprint.spec.ts +++ b/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();