V16: Stylesheet Create Options

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

@@ -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, {

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

@@ -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];

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

@@ -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,

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

@@ -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',
 	{

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/entity-actions/create/stylesheet-create-option-action.ts

@@ -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 };

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -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"

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

@@ -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);