@nu-art/permissions-frontend 0.400.5

package/ui/PermissionsEditableComponent.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { PermissionsComponent, Props_PermissionComponent } from './PermissionsComponent.js';
+import { ResolvableContent } from '@nu-art/ts-common';
+type Props = Props_PermissionComponent & {
+    forceLock?: boolean;
+    value?: ResolvableContent<React.ReactNode>;
+    className?: string;
+    style?: React.CSSProperties;
+};
+type State = {
+    forceLock?: boolean;
+};
+export declare class PermissionsEditableComponent extends PermissionsComponent<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    protected renderFallback: () => import("react/jsx-runtime").JSX.Element;
+    protected renderPermitted: () => import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/ui/PermissionsEditableComponent.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { PermissionsComponent } from './PermissionsComponent.js';
+import { _className } from '@nu-art/thunderstorm-frontend/index';
+import { resolveContent } from '@nu-art/ts-common';
+export class PermissionsEditableComponent extends PermissionsComponent {
+    deriveStateFromProps(nextProps, state) {
+        state.forceLock = nextProps.forceLock;
+        return state;
+    }
+    renderFallback = () => {
+        if (!this.props.value)
+            return _jsx(_Fragment, {});
+        const className = _className('permissions-editable__value', this.props.className);
+        return _jsx("div", { className: className, style: this.props.style, children: resolveContent(this.props.value) });
+    };
+    renderPermitted = () => {
+        if (this.props.forceLock)
+            return this.renderFallback();
+        return _jsx(_Fragment, { children: this.props.children });
+    };
+}

package/ui/Renderer_RoleNames.d.ts

@@ -0,0 +1 @@
+export declare const Renderer_RoleNames: () => import("react/jsx-runtime").JSX.Element;

package/ui/Renderer_RoleNames.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LL_V_L } from '@nu-art/thunderstorm-frontend/index';
+import { SessionKey_Permissions_FE } from '../consts.js';
+export const Renderer_RoleNames = () => {
+    const roles = SessionKey_Permissions_FE.get().roles;
+    return _jsx(LL_V_L, { className: 'container_role-names', children: roles.map(roleName => _jsx("div", { className: 'role-name', id: roleName.key, children: roleName.uiLabel })) });
+};

package/ui/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ATS_Permissions/ATS_Permissions.js';
+export * from './ATS_ComponentPermissionKeys/ATS_ComponentPermissionKeys.js';
+export * from './permission-editors/permission-domains-editor.js';
+export * from './permission-editors/permission-project-editor/permission-projects-editor.js';
+export * from './permission-editors/permission-groups-editor.js';
+export * from './permission-editors/permission-users-editor.js';
+export * from './PermissionsComponent.js';
+export * from './PermissionsEditableComponent.js';

package/ui/index.js

@@ -0,0 +1,8 @@
+export * from './ATS_Permissions/ATS_Permissions.js';
+export * from './ATS_ComponentPermissionKeys/ATS_ComponentPermissionKeys.js';
+export * from './permission-editors/permission-domains-editor.js';
+export * from './permission-editors/permission-project-editor/permission-projects-editor.js';
+export * from './permission-editors/permission-groups-editor.js';
+export * from './permission-editors/permission-users-editor.js';
+export * from './PermissionsComponent.js';
+export * from './PermissionsEditableComponent.js';

package/ui/permission-editors/components.d.ts

@@ -0,0 +1,6 @@
+export declare const Input_Text_Blur: <K extends string, T extends import("@nu-art/ts-common").TS_Object & ({ [k in K]: string; })>(props: import("@nu-art/thunderstorm-frontend/components/TS_V2_Input/TS_InputV2").EditableItemProps_TS_InputV2<string, K, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Input_Number_Blur: <K extends string, T extends import("@nu-art/ts-common").TS_Object & ({ [k in K]: string; })>(props: import("@nu-art/thunderstorm-frontend/components/TS_V2_Input/TS_InputV2").EditableItemProps_TS_InputV2<string, K, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DropDownCaret: {
+    open: import("react/jsx-runtime").JSX.Element;
+    close: import("react/jsx-runtime").JSX.Element;
+};

package/ui/permission-editors/components.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TS_InputV2 } from '@nu-art/thunderstorm-frontend/components/TS_V2_Input/index';
+import { TS_Icons } from '@nu-art/ts-styles';
+export const Input_Text_Blur = TS_InputV2.editable({ saveEvent: ['blur'], type: 'text' });
+export const Input_Number_Blur = TS_InputV2.editable({ saveEvent: ['blur'], type: 'number' });
+export const DropDownCaret = {
+    open: _jsx(TS_Icons.treeCollapse.component, {}),
+    close: _jsx(TS_Icons.treeCollapse.component, { className: 'flip' })
+};

package/ui/permission-editors/editor-base.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ModuleFE_BaseApi } from '@nu-art/thunderstorm-frontend/index';
+import { DBProto } from '@nu-art/ts-common';
+import './editor-base.scss';
+import { TS_EditableContent } from '@nu-art/thunderstorm-frontend/components/TS_EditableContent/TS_EditableContent';
+import { InferProps, InferState } from '@nu-art/thunderstorm-frontend';
+import { EditableRef } from '@nu-art/thunderstorm-frontend/editable-item';
+type ItemEditor_Props<T extends DBProto<any>> = EditableRef<T['uiType']> & {
+    displayResolver?: (item: T['dbType']) => string;
+    module?: ModuleFE_BaseApi<T>;
+};
+type ItemEditor_State<T extends DBProto<any>> = EditableRef<T['uiType']> & {};
+export declare abstract class Component_BasePermissionItemEditor<Proto extends DBProto<any>, Props extends ItemEditor_Props<Proto> = ItemEditor_Props<Proto>, State extends ItemEditor_State<Proto> = ItemEditor_State<Proto>> extends TS_EditableContent<Proto, Props, State> {
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    abstract editorContent: () => React.ReactNode;
+    render(): "" | import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/ui/permission-editors/editor-base.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LL_V_L } from '@nu-art/thunderstorm-frontend/index';
+import './editor-base.scss';
+import { TS_EditableContent } from '@nu-art/thunderstorm-frontend/components/TS_EditableContent/TS_EditableContent';
+export class Component_BasePermissionItemEditor extends TS_EditableContent {
+    deriveStateFromProps(nextProps, state) {
+        super.deriveStateFromProps(nextProps, state);
+        state.editable.setOnChanged(async () => this.forceUpdate());
+        return state;
+    }
+    render() {
+        if (!this.state.editable)
+            return '';
+        const editable = this.state.editable;
+        return _jsxs(_Fragment, { children: [_jsx("div", { className: 'item-editor__header', children: editable.item._id ? this.props.displayResolver?.(editable.item) : `New ${this.props.module.dbDef.entityName}` }), _jsx(LL_V_L, { className: 'item-editor__main', children: this.editorContent() })] });
+    }
+}

package/ui/permission-editors/editor-base.scss

@@ -0,0 +1,298 @@
+@use '@nu-art/ts-styles' as styles;
+
+#dev-page__permissions .permissions-editor, .editor-content {
+  gap: 16px;
+
+  //TS Components Design
+  .ts-input {
+    width: 250px;
+    max-width: unset;
+    min-height: unset;
+    background: white;
+
+    &::placeholder {
+      font-size: 12px;
+    }
+  }
+
+  .ts-dropdown {
+    width: 250px;
+
+    .ts-tree__node {
+      font: {
+        size: 14px;
+      }
+    }
+
+    .ts-dropdown__header {
+      border-radius: 8px;
+      position: relative;
+      align-items: center;
+
+      .icon--wrapper {
+        width: 30px;
+        rotate: 90deg;
+
+        &.flip {
+          rotate: -90deg;
+        }
+      }
+    }
+
+    .ts-dropdown__items-container {
+      border: 2px solid styles.gray(1);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+
+      .ts-dropdown__header {
+        background: styles.gray(6);
+      }
+    }
+  }
+
+  .ts-table {
+    .ts-table__body .ts-table__tr {
+      height: 40px;
+
+      .ts-table__td {
+        height: 40px;
+
+        .ts-input {
+          background: transparent;
+          border-radius: 0;
+          border: none;
+          width: 100%;
+          height: 40px;
+        }
+      }
+    }
+  }
+
+  //Editor Parts
+  .item-list {
+    height: 100%;
+    width: 300px;
+    flex-shrink: 0;
+    border: 2px solid black;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .item-list__header {
+      height: 40px;
+      width: 100%;
+      border-bottom: 2px solid black;
+      background: styles.gray(3);
+      color: white;
+      display: grid;
+      place-content: center;
+      flex-shrink: 0;
+      font: {
+        size: 18px;
+        weight: bold;
+      }
+    }
+
+    .item-list__filter {
+      background: white;
+      width: 100%;
+      height: 30px;
+      border-bottom: 2px solid black;
+
+      .icon--wrapper {
+        width: 30px;
+        flex-shrink: 0;
+      }
+
+      .ts-input {
+        width: 0;
+        height: 100%;
+        flex-grow: 1;
+        border-radius: 0;
+        border: none;
+        outline: none !important;
+      }
+    }
+
+    .item-list__list {
+      height: 0;
+      flex-grow: 1;
+      width: 100%;
+      gap: 2px;
+      @include styles.customScrollbar('vertical', true);
+
+      .item-list__list-item {
+        width: 100%;
+        min-height: 30px;
+        padding: 8px;
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        background: styles.gray(4);
+        cursor: pointer;
+        font: {
+          size: 14px;
+          weight: bold;
+        }
+        white-space: pre-wrap;
+        color: white;
+
+        &.selected {
+          background: white;
+          color: styles.gray(2);
+        }
+      }
+    }
+
+    .item-list__add-button {
+      width: 100%;
+      margin: 0;
+      padding: 8px 0;
+      font: {
+        size: 16px;
+        weight: bold;
+      }
+      flex-shrink: 0;
+      border-radius: 0;
+    }
+  }
+
+  .item-editor {
+    height: 100%;
+    flex-grow: 1;
+    border: 2px solid black;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .item-editor__header {
+      height: 40px;
+      width: 100%;
+      border-bottom: 2px solid black;
+      background: styles.gray(3);
+      color: white;
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      font: {
+        size: 18px;
+        weight: bold;
+      }
+      flex-shrink: 0;
+    }
+
+    .item-editor__main {
+      height: 0;
+      flex-grow: 1;
+      width: 100%;
+      padding: 16px;
+      gap: 16px;
+
+      .ts-table .ts-table__td {
+        padding: 0;
+      }
+
+      .action-button {
+        width: 50px;
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        min-width: 50px;
+
+        &.delete .icon--wrapper {
+          width: 32px;
+          height: 32px;
+          @include styles.mouse-interactive-icon(styles.red(4), styles.red(3), styles.red(2));
+          @include styles.set-svg-color-transition();
+        }
+
+        &.save .icon--wrapper {
+          width: 24px;
+          height: 24px;
+          @include styles.mouse-interactive-icon(styles.green(4), styles.green(3), styles.green(2));
+        }
+      }
+    }
+
+    .item-editor__buttons {
+      height: 50px;
+      width: 100%;
+      justify-content: flex-end;
+      flex-shrink: 0;
+      padding: 0 16px;
+      gap: 16px;
+
+      .ts-button, .ts-busy-button {
+        margin: 0;
+      }
+    }
+  }
+
+  .user-permission-groups {
+    width: 100%;
+    gap: 16px;
+
+    .ts-multi-select__list-value {
+      width: 150px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      position: relative;
+      border: 1px solid black;
+      border-radius: 4px;
+      font: {
+        size: 11px;
+        weight: bold;
+      }
+      overflow: hidden;
+      white-space: break-spaces;
+      text-align: center;
+
+      .icon--wrapper {
+        background: styles.red(4);
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 40px;
+        width: 30px;
+        padding: 8px;
+        transform: translateX(100%);
+        transition: transform 200ms ease-out;
+        cursor: pointer;
+        @include styles.mouse-interactive-icon(white);
+      }
+
+      &:hover {
+        .icon--wrapper {
+          transform: translateX(0);
+        }
+      }
+    }
+  }
+}
+
+#permission-editor-item-menu {
+  border: 1px solid styles.gray(1);
+  border-radius: 6px;
+
+  .ts-busy-button {
+    margin: 0;
+    background: transparent;
+    color: styles.gray(1);
+    font: {
+      size: 14px;
+      weight: normal;
+    }
+    padding-inline: 10px;
+
+    .ts-button-loader div {
+      background: styles.gray(1);
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid styles.gray(2);
+    }
+  }
+}

package/ui/permission-editors/permission-api-edior/permission-api-editor.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { UniqueId } from '@nu-art/ts-common';
+import { InferProps, InferState, TS_Route } from '@nu-art/thunderstorm-frontend/index';
+import { Page_ItemsEditor, ProtoDef_Selection } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import './permission-api-editor.scss';
+import { DBProto_PermissionAPI } from '@nu-art/permissions-shared';
+type Props = {
+    projectId: UniqueId;
+};
+export declare class PermissionAPIEditor extends Page_ItemsEditor<DBProto_PermissionAPI, ProtoDef_Selection, Props> {
+    static Route: TS_Route;
+    static defaultProps: Partial<InferProps<PermissionAPIEditor>>;
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    protected renderHeader(): React.ReactNode;
+}
+export {};

package/ui/permission-editors/permission-api-edior/permission-api-editor.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ModuleFE_PermissionAccessLevel, ModuleFE_PermissionAPI, ModuleFE_PermissionDomain } from '../../../_entity.js';
+import { Component_BasePermissionItemEditor } from '../editor-base.js';
+import { sortArray } from '@nu-art/ts-common';
+import { TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { MultiSelect } from '../../ui-props.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import './permission-api-editor.scss';
+import { TS_EditableItemControllerProto } from '@nu-art/thunderstorm-frontend/editable-item';
+class Component_APIEditor extends Component_BasePermissionItemEditor {
+    static defaultProps = {
+        module: ModuleFE_PermissionAPI,
+        displayResolver: (item) => item.path
+    };
+    editorContent = () => {
+        const api = this.state.editable;
+        if (!api)
+            return;
+        return _jsxs(_Fragment, { children: [_jsx(TS_PropRenderer.Vertical, { label: 'Path', children: _jsx("div", { children: api.item.path }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Access Levels', children: _jsx(MultiSelect.AccessLevel, { editable: api, prop: 'accessLevelIds', className: 'domain-level-list', itemRenderer: (levelId, onDelete) => {
+                            const level = ModuleFE_PermissionAccessLevel.cache.unique(levelId);
+                            const domain = ModuleFE_PermissionDomain.cache.unique(level.domainId);
+                            return _jsxs("div", { className: 'domain-level-list__item', children: [_jsx(TS_Icons.x.component, { onClick: onDelete }), `${domain.namespace}: ${level.name} (${level.value})`] }, levelId);
+                        } }) })] });
+    };
+}
+class Controller_ApiEditor extends TS_EditableItemControllerProto {
+    static defaultProps = {
+        module: ModuleFE_PermissionAPI,
+        editor: Component_APIEditor,
+        keys: ['selected'],
+        createInitialInstance: () => ({}),
+        autoSave: true
+    };
+}
+export class PermissionAPIEditor extends Page_ItemsEditor {
+    //######################### Static #########################
+    static Route = {
+        key: 'api-permission-editor',
+        path: 'api-permission-editor',
+        Component: this,
+    };
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionAPI,
+        mapper: api => [api.path],
+        sort: (items) => sortArray(items, 'path'),
+        id: 'api-permission-editor',
+        itemRenderer: api => _jsx(_Fragment, { children: api.path }),
+        EditorRenderer: (props) => _jsx(Controller_ApiEditor, { ...props }),
+        hideAddItem: true,
+        route: this.Route,
+    };
+    //######################### Lifecycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state = super.deriveStateFromProps(nextProps, state);
+        state.filter = item => item.projectId === nextProps.projectId;
+        return state;
+    }
+    renderHeader() {
+        return _jsx(_Fragment, { children: "Permission APIs" });
+    }
+}

package/ui/permission-editors/permission-api-edior/permission-api-editor.scss

@@ -0,0 +1,7 @@
+#api-permission-editor {
+  height: 83%;
+
+  .items-editor__list {
+    height: 100%;
+  }
+}

package/ui/permission-editors/permission-domains-editor.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { InferProps, TS_Route } from '@nu-art/thunderstorm-frontend/index';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import { DBProto_PermissionDomain } from '@nu-art/permissions-shared';
+export declare class PermissionDomainsEditor extends Page_ItemsEditor<DBProto_PermissionDomain> {
+    static Route: TS_Route;
+    static defaultProps: Partial<InferProps<PermissionDomainsEditor>>;
+    protected renderHeader(): React.ReactNode;
+}

package/ui/permission-editors/permission-domains-editor.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, EditableDBItemV3, ModuleFE_Toaster, TS_PropRenderer, TS_Table } from '@nu-art/thunderstorm-frontend/index';
+import { BadImplementationException, capitalizeFirstLetter, exists, sortArray, StaticLogger } from '@nu-art/ts-common';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { ModuleFE_PermissionAccessLevel, ModuleFE_PermissionDomain, ModuleFE_PermissionProject } from '../../_entity.js';
+import { Component_BasePermissionItemEditor } from './editor-base.js';
+import { DropDownCaret, Input_Number_Blur, Input_Text_Blur } from './components.js';
+import { DropDown_PermissionProject } from '../../_entity/permission-project/ui-components.js';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import { TS_EditableItemControllerProto } from '@nu-art/thunderstorm-frontend/components/TS_EditableItemControllerProto/index';
+class Component_EditDomain extends Component_BasePermissionItemEditor {
+    static defaultProps = {
+        module: ModuleFE_PermissionDomain,
+        displayResolver: (item) => `${ModuleFE_PermissionProject.cache.unique(item.projectId).name}/${item.namespace}`
+    };
+    //######################### logic #########################
+    deleteLevel = async (editable) => {
+        try {
+            await editable.delete();
+            this.forceUpdate();
+        }
+        catch (err) {
+            this.logError({ ...err });
+            ModuleFE_Toaster.toastError(err.errorResponse.debugMessage.split('\n')[0]);
+        }
+    };
+    updateLevel = async (editable, prop, value) => {
+        if (editable.item._id) {
+            try {
+                await editable.updateObj({ [prop]: value });
+                return this.forceUpdate();
+            }
+            catch (err) {
+                return this.logError(err);
+            }
+        }
+        editable.set(prop, value);
+        editable.validate();
+        if (editable.hasValidationError())
+            return;
+        await editable.save();
+        this.forceUpdate();
+    };
+    getEmptyLevel() {
+        return {
+            domainId: this.state.editable?.item._id,
+        };
+    }
+    //######################### Render #########################
+    editorContent = () => {
+        const editable = this.state.editable;
+        return _jsxs(_Fragment, { children: [_jsx(TS_PropRenderer.Vertical, { label: 'Project', children: _jsx(DropDown_PermissionProject.editable, { editable: editable, prop: 'projectId', caret: DropDownCaret, disabled: !!editable.item._id }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Namespace', children: _jsx(Input_Text_Blur, { editable: editable, prop: 'namespace' }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Levels', children: this.renderLevelsTable() })] });
+    };
+    //######################### Render - levels #########################
+    renderLevelsTable = () => {
+        const domain = this.state.editable;
+        if (!domain)
+            return '';
+        let levels = ModuleFE_PermissionAccessLevel.cache.filter(level => level.domainId === domain.item._id);
+        levels = sortArray(levels, i => i.value);
+        levels.push(this.getEmptyLevel());
+        return _jsx(TS_Table, { header: ['name', 'value', { widthPx: 50, header: 'action' }], headerRenderer: header => header === 'action' ? '' : capitalizeFirstLetter(header), rows: levels, cellRenderer: this.levelsCellRenderer });
+    };
+    levelsCellRenderer = (prop, item, index) => {
+        const editable = new EditableDBItemV3(item, ModuleFE_PermissionAccessLevel)
+            .setAutoSave(true)
+            .setDebounceTimeout(0);
+        switch (prop) {
+            case 'name':
+                return this.renderLevelName(editable);
+            case 'value':
+                return this.renderLevelValue(editable);
+            case 'action':
+                return this.renderLevelAction(editable);
+            default:
+                throw new BadImplementationException(`No renderer defined for key ${prop}`);
+        }
+    };
+    renderLevelName = (editable) => {
+        return _jsx(Input_Text_Blur, { editable: editable, prop: 'name', value: editable.item.name, placeholder: 'Enter level name', onChange: value => this.updateLevel(editable, 'name', value) });
+    };
+    renderLevelValue = (editable) => {
+        return _jsx(Input_Number_Blur
+        // @ts-ignore
+        , { 
+            // @ts-ignore
+            editable: editable, prop: 'value', value: exists(editable.item.value) ? String(editable.item.value) : undefined, placeholder: 'Enter level value', onChange: value => this.updateLevel(editable, 'value', Number(value)) });
+    };
+    renderLevelAction = (editable) => {
+        if (!editable.item._id)
+            return;
+        return _jsx(Button, { variant: 'dangerous', onClick: async () => await this.deleteLevel(editable), className: 'action-button delete', children: _jsx(TS_Icons.bin.component, {}) });
+    };
+}
+class Controller_DomainsEditor extends TS_EditableItemControllerProto {
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionDomain,
+        editor: Component_EditDomain,
+        createInitialInstance: () => ({}),
+        autoSave: true
+    };
+}
+export class PermissionDomainsEditor extends Page_ItemsEditor {
+    //######################### Static #########################
+    static Route = {
+        key: 'domain-permission-editor',
+        path: 'domain-permission-editor',
+        Component: this
+    };
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionDomain,
+        mapper: domain => [`${ModuleFE_PermissionProject.cache.unique(domain.projectId).name}/${domain.namespace}`],
+        sort: (items) => sortArray(items, domain => `${ModuleFE_PermissionProject.cache.unique(domain.projectId).name}/${domain.namespace}`),
+        itemRenderer: domain => _jsx(_Fragment, { children: `${ModuleFE_PermissionProject.cache.unique(domain.projectId).name}/${domain.namespace}` }),
+        EditorRenderer: Controller_DomainsEditor,
+        route: this.Route,
+        contextMenuActions: [
+            {
+                label: 'Delete Domain',
+                action: async (item) => {
+                    try {
+                        await ModuleFE_PermissionDomain.v1.delete(item).executeSync();
+                        return true;
+                    }
+                    catch (err) {
+                        StaticLogger.logError(err);
+                        ModuleFE_Toaster.toastError(err.errorResponse.debugMessage.split('\n')[0]);
+                    }
+                }
+            }
+        ]
+    };
+    //######################### Logic #########################
+    renderHeader() {
+        return _jsx(_Fragment, { children: "Permission Domain" });
+    }
+}

package/ui/permission-editors/permission-groups-editor.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { InferProps, TS_Route } from '@nu-art/thunderstorm-frontend/index';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import { DBProto_PermissionGroup } from '@nu-art/permissions-shared';
+export declare class PermissionGroupsEditor extends Page_ItemsEditor<DBProto_PermissionGroup> {
+    static Route: TS_Route;
+    static defaultProps: Partial<InferProps<PermissionGroupsEditor>>;
+    protected renderHeader(): React.ReactNode;
+}