correct the alias

src/Umbraco.Web.UI.Client/src/mocks/data/scripts.data.ts

@@ -1,3 +1,4 @@
+import { UmbData } from './data.js';
 import { UmbEntityData } from './entity.data.js';
 import { createFileSystemTreeItem, createTextFileItem } from './utils.js';
 import {
@@ -6,13 +7,13 @@ import {
 	FileSystemTreeItemPresentationModel,
 	PagedFileSystemTreeItemPresentationModel,
 	ScriptResponseModel,
+	UpdateScriptRequestModel,
 } from '@umbraco-cms/backoffice/backend-api';
 
-type ScriptsDataItem = ScriptResponseModel & FileSystemTreeItemPresentationModel & { id: string };
+type ScriptsDataItem = ScriptResponseModel & FileSystemTreeItemPresentationModel;
 
 export const data: Array<ScriptsDataItem> = [
 	{
-		id: 'some-folder',
 		path: 'some-folder',
 		isFolder: true,
 		name: 'some-folder',
@@ -20,7 +21,6 @@ export const data: Array<ScriptsDataItem> = [
 		hasChildren: true,
 	},
 	{
-		id: 'another-folder',
 		path: 'another-folder',
 		isFolder: true,
 		name: 'another-folder',
@@ -28,7 +28,6 @@ export const data: Array<ScriptsDataItem> = [
 		hasChildren: true,
 	},
 	{
-		id: 'very important folder',
 		path: 'very important folder',
 		isFolder: true,
 		name: 'very important folder',
@@ -36,7 +35,6 @@ export const data: Array<ScriptsDataItem> = [
 		hasChildren: true,
 	},
 	{
-		id: 'some-folder/ugly script.js',
 		path: 'some-folder/ugly script.js',
 		isFolder: false,
 		name: 'ugly script.js',
@@ -55,7 +53,6 @@ export const data: Array<ScriptsDataItem> = [
 		 console.log(makeid(5));`,
 	},
 	{
-		id: 'some-folder/nice script.js',
 		path: 'some-folder/nice script.js',
 		isFolder: false,
 		name: 'nice script.js',
@@ -71,7 +68,6 @@ export const data: Array<ScriptsDataItem> = [
 		}`,
 	},
 	{
-		id: 'another-folder/only bugs.js',
 		path: 'another-folder/only bugs.js',
 		isFolder: false,
 		name: 'only bugs.js',
@@ -84,7 +80,6 @@ export const data: Array<ScriptsDataItem> = [
 		console.log(my_arr);`,
 	},
 	{
-		id: 'very important folder/no bugs at all.js',
 		path: 'very important folder/no bugs at all.js',
 		isFolder: false,
 		name: 'no bugs at all.js',
@@ -100,7 +95,6 @@ export const data: Array<ScriptsDataItem> = [
 		// -> TO get the short day name e.g. Tue`,
 	},
 	{
-		id: 'very important folder/nope.js',
 		path: 'very important folder/nope.js',
 		isFolder: false,
 		name: 'nope.js',
@@ -120,7 +114,7 @@ export const data: Array<ScriptsDataItem> = [
 	},
 ];
 
-class UmbScriptsTreeData extends UmbEntityData<FileSystemTreeItemPresentationModel> {
+class UmbScriptsData extends UmbData<ScriptsDataItem> {
 	constructor() {
 		super(data);
 	}
@@ -143,12 +137,6 @@ class UmbScriptsTreeData extends UmbEntityData<FileSystemTreeItemPresentationMod
 		const items = this.data.filter((item) => paths.includes(item.path ?? ''));
 		return items.map((item) => createFileSystemTreeItem(item));
 	}
-}
-
-class UmbScriptsFolderData extends UmbEntityData<ScriptResponseModel> {
-	constructor() {
-		super(data);
-	}
 
 	getFolder(path: string): FileSystemTreeItemPresentationModel {
 		const items = data.filter((item) => item.isFolder && item.path === path);
@@ -157,7 +145,6 @@ class UmbScriptsFolderData extends UmbEntityData<ScriptResponseModel> {
 
 	postFolder(payload: CreatePathFolderRequestModel) {
 		const newFolder = {
-			id: `${payload.parentPath ?? ''}/${payload.name}`,
 			path: `${payload.parentPath ?? ''}/${payload.name}`,
 			isFolder: true,
 			name: payload.name,
@@ -170,15 +157,6 @@ class UmbScriptsFolderData extends UmbEntityData<ScriptResponseModel> {
 	deleteFolder(path: string) {
 		return this.delete([path]);
 	}
-}
-
-export const umbScriptsTreeData = new UmbScriptsTreeData();
-export const umbScriptsFolderData = new UmbScriptsFolderData();
-
-class UmbScriptsData extends UmbEntityData<ScriptResponseModel> {
-	constructor() {
-		super(data);
-	}
 
 	getScript(path: string): ScriptResponseModel | undefined {
 		return createTextFileItem(this.data.find((item) => item.path === path));
@@ -188,7 +166,6 @@ class UmbScriptsData extends UmbEntityData<ScriptResponseModel> {
 		const newItem: ScriptsDataItem = {
 			...item,
 			path: `${item.parentPath}/${item.name}.js}`,
-			id: `${item.parentPath}/${item.name}.js}`,
 			isFolder: false,
 			hasChildren: false,
 			type: 'script',
@@ -197,6 +174,59 @@ class UmbScriptsData extends UmbEntityData<ScriptResponseModel> {
 		this.insert(newItem);
 		return newItem;
 	}
+
+	insert(item: ScriptsDataItem) {
+		const exits = this.data.find((i) => i.path === item.path);
+
+		if (exits) {
+			throw new Error(`Item with path ${item.path} already exists`);
+		}
+
+		this.data.push(item);
+
+		return item;
+	}
+
+	updateData(updateItem: UpdateScriptRequestModel) {
+		const itemIndex = this.data.findIndex((item) => item.path === updateItem.existingPath);
+		const item = this.data[itemIndex];
+		if (!item) return;
+
+		// TODO: revisit this code, seems like something we can solve smarter/type safer now:
+		const itemKeys = Object.keys(item);
+		const newItem = { ...item };
+
+		for (const [key] of Object.entries(updateItem)) {
+			if (itemKeys.indexOf(key) !== -1) {
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				newItem[key] = updateItem[key];
+			}
+		}
+		// Specific to fileSystem, we need to update path based on name:
+		const dirName = updateItem.existingPath?.substring(0, updateItem.existingPath.lastIndexOf('/'));
+		newItem.path = `${dirName}${dirName ? '/' : ''}${updateItem.name}`;
+
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		this.data[itemIndex] = newItem;
+	}
+
+	delete(paths: Array<string>) {
+		const deletedPaths = this.data
+			.filter((item) => {
+				if (!item.path) throw new Error('Item has no path');
+				paths.includes(item.path);
+			})
+			.map((item) => item.path);
+
+		this.data = this.data.filter((item) => {
+			if (!item.path) throw new Error('Item has no path');
+			paths.indexOf(item.path) === -1;
+		});
+
+		return deletedPaths;
+	}
 }
 
 export const umbScriptsData = new UmbScriptsData();

src/Umbraco.Web.UI.Client/src/mocks/handlers/scripts.handlers.ts

@@ -1,12 +1,12 @@
 const { rest } = window.MockServiceWorker;
 import { RestHandler, MockedRequest, DefaultBodyType } from 'msw';
-import { umbScriptsTreeData, umbScriptsData, umbScriptsFolderData } from '../data/scripts.data.js';
+import { umbScriptsData } from '../data/scripts.data.js';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 import { CreatePathFolderRequestModel, CreateTextFileViewModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 
 const treeHandlers = [
 	rest.get(umbracoPath('/tree/script/root'), (req, res, ctx) => {
-		const response = umbScriptsTreeData.getTreeRoot();
+		const response = umbScriptsData.getTreeRoot();
 		return res(ctx.status(200), ctx.json(response));
 	}),
 
@@ -14,7 +14,7 @@ const treeHandlers = [
 		const path = req.url.searchParams.get('path');
 		if (!path) return;
 
-		const response = umbScriptsTreeData.getTreeItemChildren(path);
+		const response = umbScriptsData.getTreeItemChildren(path);
 		return res(ctx.status(200), ctx.json(response));
 	}),
 
@@ -22,7 +22,7 @@ const treeHandlers = [
 		const paths = req.url.searchParams.getAll('paths');
 		if (!paths) return;
 
-		const items = umbScriptsTreeData.getTreeItem(paths);
+		const items = umbScriptsData.getTreeItem(paths);
 		return res(ctx.status(200), ctx.json(items));
 	}),
 ];
@@ -59,7 +59,7 @@ const folderHandlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [
 	rest.get(umbracoPath('script/folder'), (req, res, ctx) => {
 		const path = decodeURIComponent(req.url.searchParams.get('path') ?? '').replace('-js', '.js');
 		if (!path) return res(ctx.status(400));
-		const response = umbScriptsFolderData.getFolder(path);
+		const response = umbScriptsData.getFolder(path);
 		return res(ctx.status(200), ctx.json(response));
 	}),
 	rest.post(umbracoPath('script/folder'), (req, res, ctx) => {
@@ -70,7 +70,7 @@ const folderHandlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [
 	rest.delete(umbracoPath('script/folder'), (req, res, ctx) => {
 		const path = decodeURIComponent(req.url.searchParams.get('path') ?? '').replace('-js', '.js');
 		if (!path) return res(ctx.status(400));
-		const response = umbScriptsFolderData.deleteFolder(path);
+		const response = umbScriptsData.deleteFolder(path);
 		return res(ctx.status(200), ctx.json(response));
 	}),
 ];

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts

@@ -12,22 +12,22 @@ const workspace: ManifestWorkspace = {
 	},
 };
 
+//TODO: this does not work for some reason
 const workspaceActions: Array<ManifestWorkspaceAction> = [
 	{
 		type: 'workspaceAction',
-		alias: SCRIPTS_WORKSPACE_ACTION_SAVE_ALIAS,
-		name: 'Save Scripts Workspace Action',
-		weight: 70,
+		alias: 'Umb.WorkspaceAction.Scripts.Save',
+		name: 'Save Script Workspace Action',
 		meta: {
+			label: 'Save',
 			look: 'primary',
 			color: 'positive',
-			label: 'Save',
 			api: UmbSaveWorkspaceAction,
 		},
 		conditions: [
 			{
 				alias: 'Umb.Condition.WorkspaceAlias',
-				match: SCRIPTS_WORKSPACE_ALIAS,
+				match: workspace.alias,
 			},
 		],
 	},

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace-edit.element.ts

@@ -113,6 +113,19 @@ export class UmbScriptsWorkspaceEditElement extends UmbLitElement {
 							<uui-loader></uui-loader>
 					  </div>`}
 			</uui-box>
+			<div slot="footer-info">
+				<!-- TODO: Shortcuts Modal? -->
+				<uui-button label="Show keyboard shortcuts">
+					Keyboard Shortcuts
+					<uui-keyboard-shortcut>
+						<uui-key>ALT</uui-key>
+						+
+						<uui-key>shift</uui-key>
+						+
+						<uui-key>k</uui-key>
+					</uui-keyboard-shortcut>
+				</uui-button>
+			</div>
 		</umb-workspace-editor>`;
 	}
 
@@ -127,15 +140,15 @@ export class UmbScriptsWorkspaceEditElement extends UmbLitElement {
 			#loader-container {
 				display: grid;
 				place-items: center;
-				min-height: calc(100dvh - 230px);
+				min-height: calc(100dvh - 260px);
 			}
 
 			umb-code-editor {
-				--editor-height: calc(100dvh - 230px);
+				--editor-height: calc(100dvh - 260px);
 			}
 
 			uui-box {
-				min-height: calc(100dvh - 230px);
+				min-height: calc(100dvh - 260px);
 				margin: var(--uui-size-layout-1);
 				--uui-box-default-padding: 0;
 				/* remove header border bottom as code editor looks better in this box */

src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace.context.ts

@@ -1,4 +1,4 @@
-import { ScriptDetails } from '../config.js';
+import { ScriptDetails, SCRIPTS_WORKSPACE_ALIAS } from '../config.js';
 import { UmbScriptsRepository } from '../repository/scripts.repository.js';
 import { createObservablePart, UmbBooleanState, UmbDeepState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
@@ -7,39 +7,6 @@ import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
 import { UpdateScriptRequestModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbScriptsWorkspaceContext extends UmbWorkspaceContext<UmbScriptsRepository, ScriptDetails> {
-	getEntityId(): string | undefined {
-		return this.getData()?.path;
-	}
-	getEntityType(): string {
-		throw new Error('Method not implemented.');
-	}
-	save(): Promise<void> {
-		const script = this.getData();
-
-		if (!script) return Promise.reject('Something went wrong, there is no data for script view you want to save...');
-		if (this.getIsNew()) {
-			const createRequestBody = {
-				name: script.name,
-				content: script.content,
-				parentPath: script.path + '/',
-			};
-
-			this.repository.create(createRequestBody);
-			console.log('create');
-			return Promise.resolve();
-		}
-		if (!script.path) return Promise.reject('There is no path');
-		const updateRequestBody: UpdateScriptRequestModel = {
-			name: script.name,
-			existingPath: script.path,
-			content: script.content,
-		};
-		this.repository.save(script.path, updateRequestBody);
-		return Promise.resolve();
-	}
-	destroy(): void {
-		throw new Error('Method not implemented.');
-	}
 	#data = new UmbDeepState<ScriptDetails | undefined>(undefined);
 	data = this.#data.asObservable();
 	name = createObservablePart(this.#data, (data) => data?.name);
@@ -50,7 +17,7 @@ export class UmbScriptsWorkspaceContext extends UmbWorkspaceContext<UmbScriptsRe
 	isCodeEditorReady = this.#isCodeEditorReady.asObservable();
 
 	constructor(host: UmbControllerHostElement) {
-		super(host, 'Umb.Workspace.Script', new UmbScriptsRepository(host));
+		super(host, SCRIPTS_WORKSPACE_ALIAS, new UmbScriptsRepository(host));
 		this.#loadCodeEditor();
 	}
 
@@ -94,4 +61,41 @@ export class UmbScriptsWorkspaceContext extends UmbWorkspaceContext<UmbScriptsRe
 		this.setIsNew(true);
 		this.#data.next(script);
 	}
+
+	getEntityId(): string | undefined {
+		return this.getData()?.path;
+	}
+
+	save(): Promise<void> {
+		const script = this.getData();
+
+		if (!script) return Promise.reject('Something went wrong, there is no data for script view you want to save...');
+		if (this.getIsNew()) {
+			const createRequestBody = {
+				name: script.name,
+				content: script.content,
+				parentPath: script.path + '/',
+			};
+
+			this.repository.create(createRequestBody);
+			console.log('create');
+			return Promise.resolve();
+		}
+		if (!script.path) return Promise.reject('There is no path');
+		const updateRequestBody: UpdateScriptRequestModel = {
+			name: script.name,
+			existingPath: script.path,
+			content: script.content,
+		};
+		this.repository.save(script.path, updateRequestBody);
+		return Promise.resolve();
+	}
+
+	destroy(): void {
+		throw new Error('Method not implemented.');
+	}
+
+	getEntityType(): string {
+		throw new Error('Method not implemented.');
+	}
 }