Skip to content

Make Create Actions open as dialogs (part 2) #20523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Oct 21, 2025
Merged

Make Create Actions open as dialogs (part 2) #20523

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9249af9
open script create options as a dialog instead of sidebar
madsrasmussen Oct 16, 2025
875caec
align and simplify the blueprint dialog options
madsrasmussen Oct 16, 2025
1c15dda
debounce loadCollection calls
madsrasmussen Oct 16, 2025
47d74a8
update document collection context
madsrasmussen Oct 16, 2025
f2eb1f2
update media collection context
madsrasmussen Oct 16, 2025
ff0112c
Updated tests
andr317c Oct 16, 2025
a589ff3
Bumped test helpers
andr317c Oct 16, 2025
fa3ed55
Revert "debounce loadCollection calls"
madsrasmussen Oct 16, 2025
b5fb33d
Revert "update document collection context"
madsrasmussen Oct 16, 2025
845b6b6
Revert "update media collection context"
madsrasmussen Oct 16, 2025
fb1abe0
Merge branch 'v17/hotfix/adjust-position-of-remaining-create-dialogs'…
madsrasmussen Oct 16, 2025
5edccad
align create dialog texts
madsrasmussen Oct 20, 2025
eb17002
fix indention
madsrasmussen Oct 20, 2025
fcc5979
Merge branch 'release/17.0' into v17/hotfix/adjust-position-of-remain…
andr317c Oct 21, 2025
6b11a92
Bumped version of test helpers
andr317c Oct 21, 2025
deedcce
Merge branch 'release/17.0' into v17/hotfix/adjust-position-of-remain…
andr317c Oct 21, 2025
e4a4d84
Merge branch 'release/17.0' into v17/hotfix/adjust-position-of-remain…
andr317c Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ...lient/src/packages/documents/document-blueprints/entity-actions/create/modal/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
56 changes: 31 additions & 25 deletions ...blueprints/entity-actions/create/modal/document-blueprint-options-create-modal.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down Expand Up @@ -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('actions_createblueprint')}>
<uui-ref-list>
<umb-ref-item
name="New 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>
`;
}

Expand Down
3 changes: 1 addition & 2 deletions ...eb.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
);
21 changes: 11 additions & 10 deletions ...lating/scripts/entity-actions/create/options-modal/script-create-options-modal.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="Create Script">
<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="New 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="New 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>
`;
}
}
Expand Down
8 changes: 4 additions & 4 deletions tests/Umbraco.Tests.AcceptanceTest/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion tests/Umbraco.Tests.AcceptanceTest/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"dependencies": {
"@umbraco/json-models-builders": "^2.0.40",
"@umbraco/playwright-testhelpers": "^17.0.0-beta.1",
"@umbraco/playwright-testhelpers": "^17.0.0-beta.5",
"camelize": "^1.0.0",
"dotenv": "^16.3.1",
"node-fetch": "^2.6.7"
Expand Down
14 changes: 7 additions & 7 deletions ...sts.AcceptanceTest/tests/DefaultConfig/Content/CreateContentFromDocumentBlueprint.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ test('can create content using an invariant document blueprint', async ({umbraco
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateActionMenuOption();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.clickModalMenuItemWithName(documentBlueprintName);
await umbracoUi.content.clickTextButtonWithName(documentBlueprintName);
await umbracoUi.content.clickSaveButtonForContent();

// Assert
Expand All @@ -75,7 +75,7 @@ test('can create content using a variant document blueprint', async ({umbracoApi
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateActionMenuOption();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.clickModalMenuItemWithName(documentBlueprintName);
await umbracoUi.content.clickTextButtonWithName(documentBlueprintName);
await umbracoUi.content.clickSaveButtonForContent();
await umbracoUi.content.clickSaveButton();

Expand Down Expand Up @@ -104,7 +104,7 @@ test('can create content with different name using an invariant document bluepri
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateActionMenuOption();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.clickModalMenuItemWithName(documentBlueprintName);
await umbracoUi.content.clickTextButtonWithName(documentBlueprintName);
await umbracoUi.content.enterContentName(contentName);
await umbracoUi.content.clickSaveButtonForContent();

Expand All @@ -130,7 +130,7 @@ test('can create content with different name using a variant document blueprint'
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateActionMenuOption();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.clickModalMenuItemWithName(documentBlueprintName);
await umbracoUi.content.clickTextButtonWithName(documentBlueprintName);
await umbracoUi.content.enterContentName(contentName);
await umbracoUi.content.clickSaveButtonForContent();
await umbracoUi.content.clickSaveButton();
Expand Down Expand Up @@ -161,7 +161,7 @@ test('can create content using a document blueprint with block list', async ({um
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateActionMenuOption();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.clickModalMenuItemWithName(documentBlueprintName);
await umbracoUi.content.clickTextButtonWithName(documentBlueprintName);
await umbracoUi.content.clickSaveButtonForContent();

// Assert
Expand All @@ -187,7 +187,7 @@ test('can create content using a document blueprint with block grid', async ({um
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateActionMenuOption();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.clickModalMenuItemWithName(documentBlueprintName);
await umbracoUi.content.clickTextButtonWithName(documentBlueprintName);
await umbracoUi.content.clickSaveButtonForContent();

// Assert
Expand All @@ -197,4 +197,4 @@ test('can create content using a document blueprint with block grid', async ({um
expect(contentData.values[0].value.contentData[0].values[0].value.markup).toEqual(textContent);
const blockListValue = contentData.values.find(item => item.editorAlias === "Umbraco.BlockGrid")?.value;
expect(blockListValue).toBeTruthy();
});
});
4 changes: 4 additions & 0 deletions ...s.AcceptanceTest/tests/DefaultConfig/Settings/DocumentBlueprint/DocumentBlueprint.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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();

Expand Down
Loading