@umbraco-cms/backoffice 14.0.0-2715ec0f → 14.0.0-2e9e732b

package/dist-cms/mocks/browser-handlers.js

@@ -31,6 +31,7 @@ import { handlers as stylesheetHandlers } from './handlers/stylesheet.handlers.j
 import { handlers as partialViewsHandlers } from './handlers/partial-views.handlers.js';
 import { handlers as tagHandlers } from './handlers/tag-handlers.js';
 import { handlers as configHandlers } from './handlers/config.handlers.js';
+import { handlers as scriptHandlers } from './handlers/scripts.handlers.js';
 const handlers = [
     serverHandlers.serverVersionHandler,
     ...installHandlers,
@@ -64,6 +65,7 @@ const handlers = [
     ...partialViewsHandlers,
     ...tagHandlers,
     ...configHandlers,
+    ...scriptHandlers,
 ];
 switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) {
     case 'must-install':

package/dist-cms/mocks/data/scripts.data.d.ts

@@ -0,0 +1,21 @@
+import { UmbData } from './data.js';
+import { CreatePathFolderRequestModel, CreateTextFileViewModelBaseModel, FileSystemTreeItemPresentationModel, PagedFileSystemTreeItemPresentationModel, ScriptItemResponseModel, ScriptResponseModel, UpdateScriptRequestModel } from '../../external/backend-api/index.js';
+type ScriptsDataItem = ScriptResponseModel & FileSystemTreeItemPresentationModel;
+export declare const data: Array<ScriptsDataItem>;
+declare class UmbScriptsData extends UmbData<ScriptsDataItem> {
+    constructor();
+    getTreeRoot(): PagedFileSystemTreeItemPresentationModel;
+    getTreeItemChildren(parentPath: string): PagedFileSystemTreeItemPresentationModel;
+    getTreeItem(paths: Array<string>): Array<FileSystemTreeItemPresentationModel>;
+    getItem(paths: Array<string>): Array<ScriptItemResponseModel>;
+    getFolder(path: string): FileSystemTreeItemPresentationModel;
+    postFolder(payload: CreatePathFolderRequestModel): ScriptsDataItem;
+    deleteFolder(path: string): (string | undefined)[];
+    getScript(path: string): ScriptResponseModel | undefined;
+    insertScript(item: CreateTextFileViewModelBaseModel): ScriptsDataItem;
+    insert(item: ScriptsDataItem): ScriptsDataItem;
+    updateData(updateItem: UpdateScriptRequestModel): void;
+    delete(paths: Array<string>): (string | undefined)[];
+}
+export declare const umbScriptsData: UmbScriptsData;
+export {};

package/dist-cms/mocks/data/scripts.data.js

@@ -0,0 +1,205 @@
+import { UmbData } from './data.js';
+import { createFileItemResponseModelBaseModel, createFileSystemTreeItem, createTextFileItem } from './utils.js';
+export const data = [
+    {
+        path: 'some-folder',
+        isFolder: true,
+        name: 'some-folder',
+        type: 'script',
+        hasChildren: true,
+    },
+    {
+        path: 'another-folder',
+        isFolder: true,
+        name: 'another-folder',
+        type: 'script',
+        hasChildren: true,
+    },
+    {
+        path: 'very important folder',
+        isFolder: true,
+        name: 'very important folder',
+        type: 'script',
+        hasChildren: true,
+    },
+    {
+        path: 'some-folder/ugly script.js',
+        isFolder: false,
+        name: 'ugly script.js',
+        type: 'script',
+        hasChildren: false,
+        content: `function makeid(length) {
+			var result           = '';
+			var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+			var charactersLength = characters.length;
+			for ( var i = 0; i < length; i++ ) {
+			   result += characters.charAt(Math.floor(Math.random() * charactersLength));
+			}
+			return result;
+		 }
+		 
+		 console.log(makeid(5));`,
+    },
+    {
+        path: 'some-folder/nice script.js',
+        isFolder: false,
+        name: 'nice script.js',
+        type: 'script',
+        hasChildren: false,
+        content: `var items = {
+			"item_1": "1",
+			"item_2": "2",
+			"item_3": "3"
+		}
+		for (var item in items) {
+			console.log(items[item]);
+		}`,
+    },
+    {
+        path: 'another-folder/only bugs.js',
+        isFolder: false,
+        name: 'only bugs.js',
+        type: 'script',
+        hasChildren: false,
+        content: `var my_arr = [4, '', 0, 10, 7, '', false, 10];
+
+		my_arr = my_arr.filter(Boolean);
+		
+		console.log(my_arr);`,
+    },
+    {
+        path: 'very important folder/no bugs at all.js',
+        isFolder: false,
+        name: 'no bugs at all.js',
+        type: 'script',
+        hasChildren: false,
+        content: `const date_str = "07/20/2021";
+		const date = new Date(date_str);
+		const full_day_name = date.toLocaleDateString('default', { weekday: 'long' });
+		// -> to get full day name e.g. Tuesday
+		
+		const short_day_name = date.toLocaleDateString('default', { weekday: 'short' });
+		console.log(short_day_name);
+		// -> TO get the short day name e.g. Tue`,
+    },
+    {
+        path: 'very important folder/nope.js',
+        isFolder: false,
+        name: 'nope.js',
+        type: 'script',
+        hasChildren: false,
+        content: `// Define an object
+		const employee = {
+			"name": "John Deo",
+			"department": "IT",
+			"project": "Inventory Manager"
+		};
+		
+		// Remove a property
+		delete employee["project"];
+		
+		console.log(employee);`,
+    },
+];
+class UmbScriptsData extends UmbData {
+    constructor() {
+        super(data);
+    }
+    getTreeRoot() {
+        const items = this.data.filter((item) => item.path?.includes('/') === false);
+        const treeItems = items.map((item) => createFileSystemTreeItem(item));
+        const total = items.length;
+        return { items: treeItems, total };
+    }
+    getTreeItemChildren(parentPath) {
+        const items = this.data.filter((item) => item.path?.startsWith(parentPath));
+        const treeItems = items.map((item) => createFileSystemTreeItem(item));
+        const total = items.length;
+        return { items: treeItems, total };
+    }
+    getTreeItem(paths) {
+        const items = this.data.filter((item) => paths.includes(item.path ?? ''));
+        return items.map((item) => createFileSystemTreeItem(item));
+    }
+    getItem(paths) {
+        const items = this.data.filter((item) => paths.includes(item.path ?? ''));
+        return items.map((item) => createFileItemResponseModelBaseModel(item));
+    }
+    getFolder(path) {
+        const items = data.filter((item) => item.isFolder && item.path === path);
+        return items;
+    }
+    postFolder(payload) {
+        const newFolder = {
+            path: `${payload.parentPath ?? ''}/${payload.name}`,
+            isFolder: true,
+            name: payload.name,
+            type: 'script',
+            hasChildren: false,
+        };
+        return this.insert(newFolder);
+    }
+    deleteFolder(path) {
+        return this.delete([path]);
+    }
+    getScript(path) {
+        return createTextFileItem(this.data.find((item) => item.path === path));
+    }
+    insertScript(item) {
+        const newItem = {
+            ...item,
+            path: `${item.parentPath}/${item.name}.js}`,
+            isFolder: false,
+            hasChildren: false,
+            type: 'script',
+        };
+        this.insert(newItem);
+        return newItem;
+    }
+    insert(item) {
+        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) {
+        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) {
+        const pathsOfItemsToDelete = this.data
+            .filter((item) => {
+            if (!item.path)
+                throw new Error('Item has no path');
+            return paths.includes(item.path);
+        })
+            .map((item) => item.path);
+        this.data = this.data.filter((item) => {
+            if (!item.path)
+                throw new Error('Item has no path');
+            return paths.indexOf(item.path) === -1;
+        });
+        return pathsOfItemsToDelete;
+    }
+}
+export const umbScriptsData = new UmbScriptsData();

package/dist-cms/mocks/handlers/scripts.handlers.d.ts

@@ -0,0 +1,2 @@
+import { RestHandler, MockedRequest, DefaultBodyType } from 'msw';
+export declare const handlers: RestHandler<MockedRequest<DefaultBodyType>>[];

package/dist-cms/mocks/handlers/scripts.handlers.js

@@ -0,0 +1,83 @@
+const { rest } = window.MockServiceWorker;
+import { umbScriptsData } from '../data/scripts.data.js';
+import { umbracoPath } from '../../shared/utils/index.js';
+const treeHandlers = [
+    rest.get(umbracoPath('/tree/script/root'), (req, res, ctx) => {
+        const response = umbScriptsData.getTreeRoot();
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.get(umbracoPath('/tree/script/children'), (req, res, ctx) => {
+        const path = req.url.searchParams.get('path');
+        if (!path)
+            return;
+        const response = umbScriptsData.getTreeItemChildren(path);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.get(umbracoPath('/tree/script/item'), (req, res, ctx) => {
+        const paths = req.url.searchParams.getAll('paths');
+        if (!paths)
+            return;
+        const items = umbScriptsData.getTreeItem(paths);
+        return res(ctx.status(200), ctx.json(items));
+    }),
+];
+const detailHandlers = [
+    rest.get(umbracoPath('/script'), (req, res, ctx) => {
+        const path = decodeURIComponent(req.url.searchParams.get('path') ?? '').replace('-js', '.js');
+        if (!path)
+            return res(ctx.status(400));
+        const response = umbScriptsData.getScript(path);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.get(umbracoPath('/script/item'), (req, res, ctx) => {
+        const path = decodeURIComponent(req.url.searchParams.get('path') ?? '').replace('-js', '.js');
+        if (!path)
+            return res(ctx.status(400, 'no body found'));
+        const response = umbScriptsData.getItem([path]);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.post(umbracoPath('/script'), async (req, res, ctx) => {
+        const requestBody = (await req.json());
+        if (!requestBody)
+            return res(ctx.status(400, 'no body found'));
+        const response = umbScriptsData.insertScript(requestBody);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.delete(umbracoPath('/script'), (req, res, ctx) => {
+        const path = req.url.searchParams.get('path');
+        if (!path)
+            return res(ctx.status(400));
+        const response = umbScriptsData.delete([path]);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.put(umbracoPath('/script'), async (req, res, ctx) => {
+        const requestBody = (await req.json());
+        if (!requestBody)
+            return res(ctx.status(400, 'no body found'));
+        const response = umbScriptsData.updateData(requestBody);
+        return res(ctx.status(200));
+    }),
+];
+const folderHandlers = [
+    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 = umbScriptsData.getFolder(path);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.post(umbracoPath('script/folder'), (req, res, ctx) => {
+        const requestBody = req.json();
+        if (!requestBody)
+            return res(ctx.status(400, 'no body found'));
+        return res(ctx.status(200));
+    }),
+    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 = umbScriptsData.deleteFolder(path);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+];
+export const handlers = [...treeHandlers, ...detailHandlers, ...folderHandlers];

package/dist-cms/packages/core/components/index.d.ts

@@ -3,7 +3,6 @@ export * from './backoffice-notification-container/backoffice-notification-conta
 export * from './body-layout/body-layout.element.js';
 export * from './button-with-dropdown/button-with-dropdown.element.js';
 export * from './code-block/index.js';
-export * from './data-type/index.js';
 export * from './input-date/index.js';
 export * from './dropdown/index.js';
 export * from './empty-state/index.js';

package/dist-cms/packages/core/components/index.js

@@ -5,7 +5,6 @@ export * from './backoffice-notification-container/backoffice-notification-conta
 export * from './body-layout/body-layout.element.js';
 export * from './button-with-dropdown/button-with-dropdown.element.js'; // TODO: delete this and change usage to umb-dropdown
 export * from './code-block/index.js';
-export * from './data-type/index.js';
 export * from './input-date/index.js';
 export * from './dropdown/index.js';
 export * from './empty-state/index.js';

package/dist-cms/packages/core/components/input-tiny-mce/input-tiny-mce.element.d.ts

@@ -1,11 +1,11 @@
-import { UmbDataTypeConfigCollection } from '../index.js';
 import { PropertyValueMap } from '../../../../external/lit/index.js';
 import { UmbModalContext } from '../../modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UmbPropertyEditorConfigCollection } from '../../property-editor/index.js';
 declare const UmbInputTinyMceElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
 export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base {
     #private;
-    configuration?: UmbDataTypeConfigCollection;
+    configuration?: UmbPropertyEditorConfigCollection;
     private _tinyConfig;
     modalContext: UmbModalContext;
     protected getFormElement(): HTMLIFrameElement | undefined;

package/dist-cms/packages/core/components/input-tiny-mce/tiny-mce-plugin.d.ts

@@ -1,9 +1,10 @@
-import type { UmbDataTypeConfigCollection, UmbInputTinyMceElement } from '../index.js';
+import type { UmbInputTinyMceElement } from '../index.js';
 import type { tinymce } from '../../../../external/tinymce/index.js';
+import type { UmbPropertyEditorConfigCollection } from '../../property-editor/index.js';
 export declare class UmbTinyMcePluginBase {
     host: UmbInputTinyMceElement;
     editor: tinymce.Editor;
-    configuration?: UmbDataTypeConfigCollection;
+    configuration?: UmbPropertyEditorConfigCollection;
     constructor(arg: TinyMcePluginArguments);
 }
 export interface TinyMcePluginArguments {

package/dist-cms/packages/core/content-type/content-type-container-structure-helper.class.js

@@ -14,7 +14,7 @@ export class UmbContentTypeContainerStructureHelper {
         // Containers defined in data might be more than actual containers to display as we merge them by name.
         // Direct containers are the containers defining the total of this container(Multiple containers with the same name and type)
         this._ownerAlikeContainers = [];
-        // Owner containers are containers owned by the owner Document Type (The specific one up for editing)
+        // Owner containers are containers owned by the owner Content Type (The specific one up for editing)
         this._ownerContainers = [];
         // State containing the merged containers (only one pr. name):
         this.#containers = new UmbArrayState([], (x) => x.id);
@@ -172,7 +172,7 @@ export class UmbContentTypeContainerStructureHelper {
         await this.#init;
         if (!this.#structure)
             return;
-        const newName = this.#structure.makeContainerNameUniqueForOwnerDocument(name, this._childType, containerParentId) ?? name;
+        const newName = this.#structure.makeContainerNameUniqueForOwnerContentType(name, this._childType, containerParentId) ?? name;
         return await this.partialUpdateContainer(containerId, { name: newName });
     }
 }

package/dist-cms/packages/core/content-type/content-type-property-structure-helper.class.d.ts

@@ -8,7 +8,7 @@ export declare class UmbContentTypePropertyStructureHelper {
     private _containerName?;
     readonly propertyStructure: import("rxjs").Observable<PropertyTypeModelBaseModel[]>;
     constructor(host: UmbControllerHostElement);
-    getOwnerDocumentTypes(): import("rxjs").Observable<import("../../../external/backend-api/index.js").DocumentTypeResponseModel[]> | undefined;
+    get ownerDocumentTypes(): import("rxjs").Observable<import("../../../external/backend-api/index.js").DocumentTypeResponseModel[]> | undefined;
     setStructureManager(structure: UmbContentTypePropertyStructureManager): void;
     setContainerType(value?: PropertyContainerTypes): void;
     getContainerType(): PropertyContainerTypes | undefined;

package/dist-cms/packages/core/content-type/content-type-property-structure-helper.class.js

@@ -15,8 +15,8 @@ export class UmbContentTypePropertyStructureHelper {
         // TODO: Remove as any when sortOrder is implemented:
         this.#propertyStructure.sortBy((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
     }
-    getOwnerDocumentTypes() {
-        return this.#structure?.documentTypes;
+    get ownerDocumentTypes() {
+        return this.#structure?.contentTypes;
     }
     setStructureManager(structure) {
         this.#structure = structure;

package/dist-cms/packages/core/content-type/content-type-structure-manager.class.d.ts

@@ -6,8 +6,8 @@ export type PropertyContainerTypes = 'Group' | 'Tab';
 type T = DocumentTypeResponseModel;
 export declare class UmbContentTypePropertyStructureManager<R extends UmbDetailRepository<T> = UmbDetailRepository<T>> {
     #private;
-    readonly documentTypes: import("rxjs").Observable<DocumentTypeResponseModel[]>;
-    private readonly _documentTypeContainers;
+    readonly contentTypes: import("rxjs").Observable<DocumentTypeResponseModel[]>;
+    private readonly _contentTypeContainers;
     constructor(host: UmbControllerHostElement, typeRepository: R);
     /**
      * loadType will load the node type and all inherited and composed types.
@@ -27,26 +27,26 @@ export declare class UmbContentTypePropertyStructureManager<R extends UmbDetailR
     create(): Promise<boolean>;
     private _ensureType;
     private _loadType;
-    _observeDocumentType(data: T): Promise<void>;
-    private _loadDocumentTypeCompositions;
+    _observeContentType(data: T): Promise<void>;
+    private _loadContentTypeCompositions;
     /** Public methods for consuming structure: */
-    ownerDocumentType(): import("rxjs").Observable<DocumentTypeResponseModel | undefined>;
-    getOwnerDocumentType(): DocumentTypeResponseModel | undefined;
-    updateOwnerDocumentType(entry: T): void;
+    ownerContentType(): import("rxjs").Observable<DocumentTypeResponseModel | undefined>;
+    getOwnerContentType(): DocumentTypeResponseModel | undefined;
+    updateOwnerContentType(entry: T): void;
     createContainer(contentTypeId: string | null, parentId?: string | null, type?: PropertyContainerTypes, sortOrder?: number): Promise<PropertyTypeContainerModelBaseModel>;
-    makeContainerNameUniqueForOwnerDocument(newName: string, containerType?: PropertyContainerTypes, parentId?: string | null): string | null;
-    updateContainer(documentTypeId: string | null, containerId: string, partialUpdate: Partial<PropertyTypeContainerModelBaseModel>): Promise<void>;
-    removeContainer(documentTypeKey: string | null, containerId?: string | null): Promise<void>;
+    makeContainerNameUniqueForOwnerContentType(newName: string, containerType?: PropertyContainerTypes, parentId?: string | null): string | null;
+    updateContainer(contentTypeId: string | null, containerId: string, partialUpdate: Partial<PropertyTypeContainerModelBaseModel>): Promise<void>;
+    removeContainer(contentTypeId: string | null, containerId?: string | null): Promise<void>;
     createPropertyScaffold(containerId?: string | null, sortOrder?: number): PropertyTypeModelBaseModel;
-    createProperty(documentTypeId: string | null, containerId?: string | null, sortOrder?: number): Promise<PropertyTypeModelBaseModel>;
-    insertProperty(documentTypeId: string | null, property: PropertyTypeModelBaseModel): Promise<void>;
-    removeProperty(documentTypeId: string | null, propertyId: string): Promise<void>;
-    updateProperty(documentTypeId: string | null, propertyId: string, partialUpdate: Partial<PropertyTypeModelBaseModel>): Promise<void>;
+    createProperty(contentTypeId: string | null, containerId?: string | null, sortOrder?: number): Promise<PropertyTypeModelBaseModel>;
+    insertProperty(contentTypeId: string | null, property: PropertyTypeModelBaseModel): Promise<void>;
+    removeProperty(contentTypeId: string | null, propertyId: string): Promise<void>;
+    updateProperty(contentTypeId: string | null, propertyId: string, partialUpdate: Partial<PropertyTypeModelBaseModel>): Promise<void>;
     propertyStructureById(propertyId: string): Promise<import("rxjs").Observable<PropertyTypeModelBaseModel | undefined>>;
     propertyStructureByAlias(propertyAlias: string): Promise<import("rxjs").Observable<PropertyTypeModelBaseModel | undefined>>;
     getPropertyStructureById(propertyId: string): Promise<PropertyTypeModelBaseModel | undefined>;
     getPropertyStructureByAlias(propertyAlias: string): Promise<PropertyTypeModelBaseModel | undefined>;
-    ownerDocumentTypeObservablePart<PartResult>(mappingFunction: MappingFunction<T, PartResult>): import("rxjs").Observable<PartResult | undefined>;
+    ownerContentTypeObservablePart<PartResult>(mappingFunction: MappingFunction<T, PartResult>): import("rxjs").Observable<PartResult | undefined>;
     hasPropertyStructuresOf(containerId: string | null): import("rxjs").Observable<boolean>;
     rootPropertyStructures(): import("rxjs").Observable<PropertyTypeModelBaseModel[]>;
     propertyStructuresOf(containerId: string | null): import("rxjs").Observable<PropertyTypeModelBaseModel[]>;