Add folder workspace icon #19366

madsrasmussen · 2025-05-20T07:47:18Z

This PR adds a workspace icon for all folders.

It also aligns how we render a folder by introducing an element we can use across all workspaces. We should add a 'kind' for this element at some point.

Currently, it is not possible to change the name of a file system folder, which means that the name field should be read-only in this case. The PR also introduces a UmbNameWriteGuardManager that can be used within all namable workspaces. The Partial View, Stylesheet, and Script workspaces add a rule to this manager to prevent the name from being edited.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…om/umbraco/Umbraco-CMS into v16/feature/content-workspace-icon

nielslyngsoe · 2025-05-21T06:42:43Z

@madsrasmussen I love it, it seems done? so should we get it in?

madsrasmussen · 2025-05-21T08:18:31Z

@nielslyngsoe I found a small hiccup yesterday. The file system folders should have a readonly name field, but after I have changed it to use the umb-folder-workspace-element then the name is editable.

I am trying to think of a good generic way to make the name readonly. Maybe something with guards. 🤔

madsrasmussen · 2025-05-23T13:46:24Z

@nielslyngsoe This PR has been updated to also work correctly for file system workspaces. Please see description for more details.

Copilot

Pull Request Overview

This PR standardizes folder workspaces by introducing a shared editor element with an icon, adds a name write guard to prevent renames on file system folders, and updates all folder workspace editors to use the new shared component.

Introduced UmbFolderWorkspaceEditorElement to render folder workspaces with a consistent icon and name field.
Replaced custom rendering in various folder workspace editor elements to use the shared folder workspace editor.
Added UmbNameWriteGuardManager and applied rename-prevention rules for file system folders in relevant contexts.

Reviewed Changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.ts	Added name write guard rule and switched to shared folder workspace editor.
templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.ts	Added name write guard rule, switched to shared editor, and updated import path.
templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts	Added name write guard rule and switched to shared folder workspace editor.
media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts	Switched to shared folder workspace editor component.
documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts	Switched to shared folder workspace editor component.
documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts	Switched to shared folder workspace editor component.
data-type/tree/folder/workspace/data-type-folder-editor.element.ts	Switched to shared folder workspace editor component.
core/workspace/namable/name-write-guard.manager.ts	Introduced `UmbNameWriteGuardManager` to manage rename-permission rules.
core/workspace/namable/namable-workspace-context.interface.ts	Added `nameWriteGuard` to the namable workspace context interface.
core/workspace/namable/index.ts	Exported the new name write guard manager.
core/workspace/entity-detail/entity-named-detail-workspace-base.ts	Integrated `UmbNameWriteGuardManager` into entity-named-detail workspaces with default fallback.
core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts	Observes write guard rules to disable the name input when renaming is prevented.
core/tree/folder/workspace/index.ts	Registered the new shared folder workspace editor element.
core/tree/folder/workspace/folder-workspace-editor.element.ts	Created the shared folder workspace editor with icon styling.
core/tree/folder/index.ts	Exported the workspace folder module.

Comments suppressed due to low confidence (1)

src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts:14

[nitpick] The message text casing for 'Partial View folder' should be consistent with other folder types (e.g., capitalize or lowercase 'script folder', 'stylesheet folder') to maintain a uniform user experience.

message: 'It is not possible to change the name of a Partial View folder.',

Copilot · 2025-05-23T13:49:03Z

.../packages/templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.ts

@@ -1,49 +1,30 @@
-import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from './script-folder-workspace.context-token.js';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from '../../../constants.js';


The import path for UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT appears inconsistent with other folder workspace editors. It should likely import from './script-folder-workspace.context-token.js' to reference the correct context token.

Suggested change

import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from '../../../constants.js';

import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from './script-folder-workspace.context-token.js';

Copilot · 2025-05-23T13:49:04Z

...orkspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts

+		this.observe(
+			this.#workspaceContext?.nameWriteGuard.isPermittedForName(),


Passing an optional chain to observe may result in registering an undefined observable if #workspaceContext is not yet set. Guard against a missing context before calling observe.

Suggested change

this.observe(

this.#workspaceContext?.nameWriteGuard.isPermittedForName(),

if (!this.#workspaceContext) return;

this.observe(

this.#workspaceContext.nameWriteGuard.isPermittedForName(),

Copilot · 2025-05-23T13:49:04Z

...aco.Web.UI.Client/src/packages/core/tree/folder/workspace/folder-workspace-editor.element.ts

+export class UmbFolderWorkspaceEditorElement extends UmbLitElement {
+	override render() {
+		return html`<umb-workspace-editor>
+			<umb-icon id="icon" slot="header" name="icon-folder"></umb-icon>


[nitpick] Using a hardcoded id="icon" can lead to duplicate IDs if multiple folder workspaces are rendered. Consider using a CSS class or dynamically generated identifier instead.

Suggested change

<umb-icon id="icon" slot="header" name="icon-folder"></umb-icon>

<umb-icon class="icon" slot="header" name="icon-folder"></umb-icon>

Copilot · 2025-05-23T13:49:04Z

...aco.Web.UI.Client/src/packages/core/tree/folder/workspace/folder-workspace-editor.element.ts

+export class UmbFolderWorkspaceEditorElement extends UmbLitElement {
+	override render() {
+		return html`<umb-workspace-editor>
+			<umb-icon id="icon" slot="header" name="icon-folder"></umb-icon>


The icon lacks an accessible label or aria-hidden attribute. If it's purely decorative, add aria-hidden="true"; otherwise, provide an appropriate aria-label for screen readers.

Suggested change

<umb-icon id="icon" slot="header" name="icon-folder"></umb-icon>

<umb-icon id="icon" slot="header" name="icon-folder" aria-hidden="true"></umb-icon>

madsrasmussen and others added 24 commits May 9, 2025 20:50

add slot for icon

0cb983f

expose icon data

b123159

render icon

5218be1

load type for scaffold

215d54e

rename

388ebc5

render icon for media

26c15b1

add observable for content type icon

ceca6c6

request data in data source

e6c0a52

wire up document scaffolding

a9687f6

remove unused

fed095a

export server data source

3615854

render icon for member

63295c8

rename data source to align with other detail sources

1f7e46c

rename data source

a145930

remove unused styling

c31b873

remove console log

943d810

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

remove console log

1dbc519

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

remove console log

3e1ddf2

Merge branch 'v16/feature/content-workspace-icon' of https://github.c…

e7affee

…om/umbraco/Umbraco-CMS into v16/feature/content-workspace-icon

render workspace icon for document type folders

0a41336

make folder workspace editor

fd8a069

use element

88bb3da

remove const

0678947

Merge branch 'main' into v16/feature/folder-workspace-icon

6f513a4

madsrasmussen added release/16.1.0 type/feature category/ux User experience labels May 20, 2025

madsrasmussen added 2 commits May 20, 2025 10:07

use folder-workspace-editor for templating folders

204b480

Merge branch 'main' into v16/feature/folder-workspace-icon

e2129e9

madsrasmussen added 3 commits May 23, 2025 15:01

Merge branch 'main' into v16/feature/folder-workspace-icon

646b915

introduce name write guard manager

1b40aef

prevent name change of file system folders

dc4d536

madsrasmussen marked this pull request as ready for review May 23, 2025 13:45

Copilot AI review requested due to automatic review settings May 23, 2025 13:45

Copilot AI reviewed May 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add folder workspace icon #19366

Add folder workspace icon #19366

Uh oh!

madsrasmussen commented May 20, 2025 •

edited

Loading

Uh oh!

nielslyngsoe commented May 21, 2025

Uh oh!

madsrasmussen commented May 21, 2025 •

edited

Loading

Uh oh!

madsrasmussen commented May 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 23, 2025

Uh oh!

Copilot AI May 23, 2025

Uh oh!

Copilot AI May 23, 2025

Uh oh!

Copilot AI May 23, 2025

Uh oh!

Uh oh!

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

	import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from '../../../constants.js';
	import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from './script-folder-workspace.context-token.js';

		this.observe(
		this.#workspaceContext?.nameWriteGuard.isPermittedForName(),

	<umb-icon id="icon" slot="header" name="icon-folder"></umb-icon>
	<umb-icon class="icon" slot="header" name="icon-folder"></umb-icon>

Add folder workspace icon #19366

Are you sure you want to change the base?

Add folder workspace icon #19366

Uh oh!

Conversation

madsrasmussen commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nielslyngsoe commented May 21, 2025

Uh oh!

madsrasmussen commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

madsrasmussen commented May 23, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

madsrasmussen commented May 20, 2025 •

edited

Loading

madsrasmussen commented May 21, 2025 •

edited

Loading