yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V16: Stylesheet Create Options (#18911)

Browse Source 
* Adds `entityCreateOptionAction` extensions for Stylesheets

* Deprecates `umb-stylesheet-create-options-modal` and token.

* Corrected localization labels

to resolve failing acceptance test.

* Updated @umbraco/playwright-testhelpers to 16.0.0

* Removed redundant RTE Stylesheet acceptance tests
This commit is contained in:
Lee Kelleher
2025-04-03 17:30:21 +01:00
committed by GitHub
parent 7d7db6bb2b
commit 8754caa06f
8 changed files with 67 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/create.action.ts
View File

@@ -2,6 +2,7 @@ import { UMB_STYLESHEET_CREATE_OPTIONS_MODAL } from './options-modal/stylesheet-
import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
/** @deprecated No longer used internally. This will be removed in Umbraco 18. [LK] */
export class UmbStylesheetCreateOptionsEntityAction extends UmbEntityActionBase<never> {
override async execute() {
await umbOpenModal(this, UMB_STYLESHEET_CREATE_OPTIONS_MODAL, {

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

@@ -1,24 +1,55 @@
import { UMB_STYLESHEET_FOLDER_ENTITY_TYPE, UMB_STYLESHEET_ROOT_ENTITY_TYPE } from '../../entity.js';
import { UMB_STYLESHEET_FOLDER_REPOSITORY_ALIAS } from '../../tree/folder/repository/index.js';
export const manifests: Array<UmbExtensionManifest> = [
/** @deprecated No longer used internally. This will be removed in Umbraco 18. [LK] */
const modal: UmbExtensionManifest = {
type: 'modal',
alias: 'Umb.Modal.Stylesheet.CreateOptions',
name: 'Stylesheet Create Options Modal',
element: () => import('./options-modal/stylesheet-create-options-modal.element.js'),
};
const entityAction: UmbExtensionManifest = {
type: 'entityAction',
kind: 'create',
alias: 'Umb.EntityAction.Stylesheet.Create',
name: 'Create Stylesheet Entity Action',
weight: 1200,
forEntityTypes: [UMB_STYLESHEET_ROOT_ENTITY_TYPE, UMB_STYLESHEET_FOLDER_ENTITY_TYPE],
meta: {
icon: 'icon-add',
label: '#actions_create',
additionalOptions: true,
headline: '#create_createUnder #treeHeaders_documentTypes',
},
};
const entityCreateOptionActions: Array<UmbExtensionManifest> = [
{
type: 'entityAction',
kind: 'default',
alias: 'Umb.EntityAction.Stylesheet.CreateOptions',
name: 'Stylesheet Create Options Entity Action',
weight: 1200,
api: () => import('./create.action.js'),
type: 'entityCreateOptionAction',
alias: 'Umb.EntityCreateOptionAction.Stylesheet.Default',
name: 'Default Stylesheet Entity Create Option Action',
weight: 100,
api: () => import('./stylesheet-create-option-action.js'),
forEntityTypes: [UMB_STYLESHEET_ROOT_ENTITY_TYPE, UMB_STYLESHEET_FOLDER_ENTITY_TYPE],
meta: {
icon: 'icon-add',
label: '#actions_create',
additionalOptions: true,
icon: 'icon-palette',
label: '#create_newStyleSheetFile',
},
},
{
type: 'modal',
alias: 'Umb.Modal.Stylesheet.CreateOptions',
name: 'Stylesheet Create Options Modal',
element: () => import('./options-modal/stylesheet-create-options-modal.element.js'),
type: 'entityCreateOptionAction',
kind: 'folder',
alias: 'Umb.EntityCreateOptionAction.Stylesheet.Folder',
name: 'Stylesheet Folder Entity Create Option Action',
forEntityTypes: [UMB_STYLESHEET_ROOT_ENTITY_TYPE, UMB_STYLESHEET_FOLDER_ENTITY_TYPE],
meta: {
icon: 'icon-folder',
label: '#create_folder',
description: '#create_folderDescription',
folderRepositoryAlias: UMB_STYLESHEET_FOLDER_REPOSITORY_ALIAS,
},
},
];
export const manifests: Array<UmbExtensionManifest> = [modal, entityAction, ...entityCreateOptionActions];

1
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/options-modal/stylesheet-create-options-modal.element.ts
View File

@@ -4,6 +4,7 @@ import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { UmbCreateFolderEntityAction } from '@umbraco-cms/backoffice/tree';
/** @deprecated No longer used internally. This will be removed in Umbraco 18. [LK] */
@customElement('umb-stylesheet-create-options-modal')
export class UmbStylesheetCreateOptionsModalElement extends UmbModalBaseElement<
UmbStylesheetCreateOptionsModalData,

2
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/options-modal/stylesheet-create-options.modal-token.ts
View File

@@ -1,10 +1,12 @@
import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
/** @deprecated No longer used internally. This will be removed in Umbraco 18. [LK] */
export interface UmbStylesheetCreateOptionsModalData {
parent: UmbEntityModel;
}
/** @deprecated No longer used internally. This will be removed in Umbraco 18. [LK] */
export const UMB_STYLESHEET_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbStylesheetCreateOptionsModalData>(
'Umb.Modal.Stylesheet.CreateOptions',
{

11
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/stylesheet-create-option-action.ts Normal file
View File

@@ -0,0 +1,11 @@
import { UmbEntityCreateOptionActionBase } from '@umbraco-cms/backoffice/entity-create-option-action';
import type { MetaEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action';
export class UmbStylesheetCreateOptionAction extends UmbEntityCreateOptionActionBase<MetaEntityCreateOptionAction> {
override async getHref() {
const href = `section/settings/workspace/stylesheet/create/parent/${this.args.entityType}/${this.args.unique || 'null'}`;
return `${href}/view/code`;
}
}
export { UmbStylesheetCreateOptionAction as api };

9
tests/Umbraco.Tests.AcceptanceTest/package-lock.json generated
View File

@@ -8,7 +8,7 @@
"hasInstallScript": true,
"dependencies": {
"@umbraco/json-models-builders": "^2.0.31",
"@umbraco/playwright-testhelpers": "^15.0.41",
"@umbraco/playwright-testhelpers": "^16.0.1",
"camelize": "^1.0.0",
"dotenv": "^16.3.1",
"node-fetch": "^2.6.7"
@@ -67,9 +67,10 @@
}
},
"node_modules/@umbraco/playwright-testhelpers": {
"version": "15.0.41",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.41.tgz",
"integrity": "sha512-yZEhC3iSqT+O/2TBz0QGGEZyKleZ+qIW4YHTpm2nxPSdBAUaKqE4lb6UwylcQZtYnZVssXdi62jbzRPbG8XBlw==",
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.1.tgz",
"integrity": "sha512-c3+Z0l8p2nBgrtkaiXdYJONT16h0N/jSd9pC/E6IhXVloUH0qlUFVUVffxzofHVSfIsyrPKQC3T4iLzjRb/HIw==",
"license": "MIT",
"dependencies": {
"@umbraco/json-models-builders": "2.0.31",
"node-fetch": "^2.6.7"

2
tests/Umbraco.Tests.AcceptanceTest/package.json
View File

@@ -21,7 +21,7 @@
},
"dependencies": {
"@umbraco/json-models-builders": "^2.0.31",
"@umbraco/playwright-testhelpers": "^15.0.41",
"@umbraco/playwright-testhelpers": "^16.0.1",
"camelize": "^1.0.0",
"dotenv": "^16.3.1",
"node-fetch": "^2.6.7"

64
tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheet/Stylesheet.spec.ts
View File

@@ -1,4 +1,4 @@
import {ConstantHelper, NotificationConstantHelper, test} from '@umbraco/playwright-testhelpers';
import {ConstantHelper, NotificationConstantHelper, test} from '@umbraco/playwright-testhelpers';
import {expect} from '@playwright/test';
const stylesheetName = 'TestStyleSheetFile.css';
@@ -53,27 +53,6 @@ test('can create a stylesheet with content', async ({umbracoApi, umbracoUi}) =>
await umbracoUi.stylesheet.isStylesheetRootTreeItemVisible(stylesheetName);
});
test.skip('can create a new Rich Text Editor stylesheet file', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
// Arrange
const stylesheetContent = '/**umb_name:' + styleName + '*/\n' + styleSelector + ' {\n\t' + styleStyles + '\n}';
await umbracoUi.stylesheet.goToSection(ConstantHelper.sections.settings);
//Act
await umbracoUi.stylesheet.clickActionsMenuAtRoot();
await umbracoUi.stylesheet.clickCreateButton();
await umbracoUi.stylesheet.clickNewRichTextEditorStylesheetButton();
await umbracoUi.stylesheet.enterStylesheetName(stylesheetName);
await umbracoUi.stylesheet.addRTEStyle(styleName, styleSelector, styleStyles);
await umbracoUi.stylesheet.clickSaveButton();
// Assert
await umbracoUi.stylesheet.doesSuccessNotificationHaveText(NotificationConstantHelper.success.created);
expect(await umbracoApi.stylesheet.doesExist(stylesheetName)).toBeTruthy();
const stylesheetData = await umbracoApi.stylesheet.getByName(stylesheetName);
expect(stylesheetData.content).toEqual(stylesheetContent);
await umbracoUi.stylesheet.isStylesheetRootTreeItemVisible(stylesheetName);
});
test.skip('can update a stylesheet', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
// Arrange
const stylesheetContent = '/**umb_name:' + styleName + '*/\n' + styleSelector + ' {\n\t' + styleStyles + '\n}';
@@ -83,7 +62,6 @@ test.skip('can update a stylesheet', {tag: '@smoke'}, async ({umbracoApi, umbrac
//Act
await umbracoUi.stylesheet.openStylesheetByNameAtRoot(stylesheetName);
await umbracoUi.stylesheet.addRTEStyle(styleName, styleSelector, styleStyles);
await umbracoUi.stylesheet.clickSaveButton();
// Assert
@@ -126,46 +104,6 @@ test('can rename a stylesheet', {tag: '@smoke'}, async ({umbracoApi, umbracoUi})
expect(await umbracoApi.stylesheet.doesNameExist(wrongStylesheetName)).toBeFalsy();
});
test('can edit rich text editor styles', async ({umbracoApi, umbracoUi}) => {
// Arrange
const newStyleName = 'TestNewStyleName';
const newStyleSelector = 'h2';
const newStyleStyles = 'color: white';
const newStylesheetContent = '/**umb_name:' + newStyleName + '*/\n' + newStyleSelector + ' {\n\t' + newStyleStyles + '\n}';
const stylesheetContent = '/**umb_name:' + styleName + '*/\n' + styleSelector + ' {\n\t' + styleStyles + '\n}';
await umbracoApi.stylesheet.create(stylesheetName, stylesheetContent);
expect(await umbracoApi.stylesheet.doesExist(stylesheetName)).toBeTruthy();
await umbracoUi.stylesheet.goToSection(ConstantHelper.sections.settings);
//Act
await umbracoUi.stylesheet.openStylesheetByNameAtRoot(stylesheetName);
await umbracoUi.stylesheet.editRTEStyle(styleName, newStyleName, newStyleSelector, newStyleStyles);
await umbracoUi.stylesheet.clickSaveButton();
// Assert
await umbracoUi.stylesheet.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const stylesheetData = await umbracoApi.stylesheet.getByName(stylesheetName);
expect(stylesheetData.content).toEqual(newStylesheetContent);
});
test('can remove rich text editor styles', async ({umbracoApi, umbracoUi}) => {
// Arrange
const stylesheetContent = '/**umb_name:' + styleName + '*/\n' + styleSelector + ' {\n\t' + styleStyles + '\n}';
await umbracoApi.stylesheet.create(stylesheetName, stylesheetContent);
expect(await umbracoApi.stylesheet.doesExist(stylesheetName)).toBeTruthy();
await umbracoUi.stylesheet.goToSection(ConstantHelper.sections.settings);
//Act
await umbracoUi.stylesheet.openStylesheetByNameAtRoot(stylesheetName);
await umbracoUi.stylesheet.removeRTEStyle(styleName);
await umbracoUi.stylesheet.clickSaveButton();
// Assert
await umbracoUi.stylesheet.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const stylesheetData = await umbracoApi.stylesheet.getByName(stylesheetName);
expect(stylesheetData.content).toEqual('');
});
test('cannot create a stylesheet with an empty name', async ({umbracoApi, umbracoUi}) => {
// Arrange
await umbracoUi.stylesheet.goToSection(ConstantHelper.sections.settings);