@webiny/app-admin 6.6.0-alpha.0 → 6.6.0-alpha.10

package/presentation/accessManagement/roles/RolesPresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/accessManagement/roles/RolesPresenter.js","sources":["../../../../src/presentation/accessManagement/roles/RolesPresenter.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, computed } from \"mobx\";\nimport slugify from \"slugify\";\nimport { ListPresenter } from \"~/presentation/listPresenter/abstractions.js\";\nimport { FormModelFactory } from \"~/features/formModel/abstractions.js\";\nimport type { IFormModel } from \"~/features/formModel/abstractions.js\";\nimport type { Role } from \"~/features/accessManagement/types.js\";\nimport {\n    ListRolesUseCase,\n    RolesListCache\n} from \"~/features/accessManagement/roles/listRoles/abstractions.js\";\nimport { GetRoleUseCase } from \"~/features/accessManagement/roles/getRole/abstractions.js\";\nimport { CreateRoleUseCase } from \"~/features/accessManagement/roles/createRole/abstractions.js\";\nimport { UpdateRoleUseCase } from \"~/features/accessManagement/roles/updateRole/abstractions.js\";\nimport { DeleteRoleUseCase } from \"~/features/accessManagement/roles/deleteRole/abstractions.js\";\nimport {\n    RolesPresenter as Abstraction,\n    type IRolesPresenter,\n    type IRolesPresenterViewModel\n} from \"./abstractions.js\";\nimport { RolesDataSource } from \"./RolesDataSource.js\";\n\nclass RolesPresenterImpl implements IRolesPresenter {\n    private _selectedRole: Role | null = null;\n    private _loading = false;\n    private _saving = false;\n    private _showForm = false;\n    private _form: IFormModel;\n\n    constructor(\n        private _listPresenter: ListPresenter.Interface<Role>,\n        private formModelFactory: FormModelFactory.Interface,\n        private listRolesUseCase: ListRolesUseCase.Interface,\n        private getRoleUseCase: GetRoleUseCase.Interface,\n        private createRoleUseCase: CreateRoleUseCase.Interface,\n        private updateRoleUseCase: UpdateRoleUseCase.Interface,\n        private deleteRoleUseCase: DeleteRoleUseCase.Interface,\n        private cache: RolesListCache.Interface\n    ) {\n        this._form = this.buildForm(false, false);\n        makeAutoObservable<\n            RolesPresenterImpl,\n            | \"formModelFactory\"\n            | \"listRolesUseCase\"\n            | \"getRoleUseCase\"\n            | \"createRoleUseCase\"\n            | \"updateRoleUseCase\"\n            | \"deleteRoleUseCase\"\n            | \"cache\"\n        >(this, {\n            formModelFactory: false,\n            listRolesUseCase: false,\n            getRoleUseCase: false,\n            createRoleUseCase: false,\n            updateRoleUseCase: false,\n            deleteRoleUseCase: false,\n            cache: false,\n            vm: computed\n        });\n    }\n\n    get vm(): IRolesPresenterViewModel {\n        const role = this._selectedRole;\n        const isSystemRole = role !== null && (role.slug === \"full-access\" || role.system === true);\n        const isPluginRole = role !== null && (role.plugin ?? false);\n\n        return {\n            selectedRole: this._selectedRole,\n            loading: this._loading,\n            saving: this._saving,\n            showForm: this._showForm,\n            canModify: !isSystemRole && !isPluginRole,\n            isSystemRole,\n            form: this._form.vm\n        };\n    }\n\n    get list(): ListPresenter.Interface<Role> {\n        return this._listPresenter;\n    }\n\n    init(): void {\n        const dataSource = new RolesDataSource(this.listRolesUseCase, this.cache);\n\n        this._listPresenter.init({\n            dataSource,\n            initialSort: { field: \"createdOn\", direction: \"DESC\" },\n            limit: 1000\n        });\n    }\n\n    async selectRole(id: string): Promise<void> {\n        runInAction(() => {\n            this._loading = true;\n            this._showForm = true;\n        });\n\n        try {\n            const role = await this.getRoleUseCase.execute(id);\n            const isSystemRole = role.slug === \"full-access\" || role.system === true;\n            const isPluginRole = role.plugin ?? false;\n            const canModify = !isSystemRole && !isPluginRole;\n\n            runInAction(() => {\n                this._selectedRole = role;\n                this._form = this.buildForm(false, canModify, role.id);\n                this._form.setData({\n                    name: role.name,\n                    slug: role.slug,\n                    description: role.description,\n                    permissions: role.permissions || []\n                });\n            });\n        } finally {\n            runInAction(() => {\n                this._loading = false;\n            });\n        }\n    }\n\n    createNew(): void {\n        this._selectedRole = null;\n        this._form = this.buildForm(true, true, \"new\");\n        this._showForm = true;\n    }\n\n    deselect(): void {\n        this._selectedRole = null;\n        this._showForm = false;\n    }\n\n    async save(): Promise<Role | null> {\n        const data = await this._form.submit<Role>();\n        if (!data) {\n            return null;\n        }\n\n        runInAction(() => {\n            this._saving = true;\n        });\n\n        try {\n            const isUpdate = this._selectedRole !== null && this._selectedRole.createdOn;\n\n            if (isUpdate) {\n                const role = await this.updateRoleUseCase.execute(this._selectedRole!.id, {\n                    name: data.name as string,\n                    description: data.description as string,\n                    permissions: data.permissions\n                });\n                runInAction(() => {\n                    this._selectedRole = role;\n                });\n                return role;\n            } else {\n                const role = await this.createRoleUseCase.execute({\n                    name: data.name as string,\n                    slug: data.slug as string,\n                    description: data.description as string,\n                    permissions: data.permissions\n                });\n                runInAction(() => {\n                    this._selectedRole = role;\n                    this._form = this.buildForm(false, true, role.id);\n                    this._form.setData({\n                        name: role.name,\n                        slug: role.slug,\n                        description: role.description,\n                        permissions: role.permissions || []\n                    });\n                });\n                return role;\n            }\n        } catch {\n            return null;\n        } finally {\n            runInAction(() => {\n                this._saving = false;\n            });\n        }\n    }\n\n    async deleteRole(id: string): Promise<void> {\n        await this.deleteRoleUseCase.execute(id);\n\n        runInAction(() => {\n            if (this._selectedRole !== null && this._selectedRole.id === id) {\n                this._selectedRole = null;\n                this._showForm = false;\n            }\n        });\n    }\n\n    private buildForm(isNew: boolean, canModify: boolean, entityId?: string): IFormModel {\n        return this.formModelFactory.create({\n            fields: fields => ({\n                name: fields\n                    .text()\n                    .label(\"Name\")\n                    .required(\"Name is required.\")\n                    .disabled(!canModify)\n                    .onBlur((value, { form }) => {\n                        const slugValue = form.field(\"slug\").getValue();\n                        if (slugValue || !value) {\n                            return;\n                        }\n                        form.field(\"slug\").setValue(\n                            slugify(String(value), {\n                                replacement: \"-\",\n                                lower: true,\n                                remove: /[*#?<>_{}[\\]+~.()'\"!:;@]/g,\n                                trim: false\n                            })\n                        );\n                    }),\n                slug: fields\n                    .text()\n                    .label(\"Slug\")\n                    .required(\"Slug is required.\")\n                    .disabled(!isNew || !canModify),\n                description: fields\n                    .text()\n                    .label(\"Description\")\n                    .defaultValue(\"\")\n                    .renderer(\"textarea\")\n                    .disabled(!canModify),\n                permissions: fields\n                    .permissions()\n                    .label(\"Permissions\")\n                    .renderer(\"permissions\", { id: entityId || \"new\" })\n                    .hiddenWhen(() => {\n                        const role = this._selectedRole;\n                        return (\n                            role !== null && (role.slug === \"full-access\" || role.system === true)\n                        );\n                    })\n            }),\n            layout: layout => [\n                layout.row(\"name\", \"slug\"),\n                layout.row(\"description\"),\n                layout.row(\"permissions\")\n            ]\n        });\n    }\n}\n\nexport const RolesPresenter = Abstraction.createImplementation({\n    implementation: RolesPresenterImpl,\n    dependencies: [\n        ListPresenter,\n        FormModelFactory,\n        ListRolesUseCase,\n        GetRoleUseCase,\n        CreateRoleUseCase,\n        UpdateRoleUseCase,\n        DeleteRoleUseCase,\n        RolesListCache\n    ]\n});\n"],"names":["RolesPresenterImpl","_listPresenter","formModelFactory","listRolesUseCase","getRoleUseCase","createRoleUseCase","updateRoleUseCase","deleteRoleUseCase","cache","makeAutoObservable","computed","role","isSystemRole","isPluginRole","dataSource","RolesDataSource","id","runInAction","canModify","data","isUpdate","isNew","entityId","fields","value","form","slugValue","slugify","String","layout","RolesPresenter","Abstraction","ListPresenter","FormModelFactory","ListRolesUseCase","GetRoleUseCase","CreateRoleUseCase","UpdateRoleUseCase","DeleteRoleUseCase","RolesListCache"],"mappings":"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"}
+{"version":3,"file":"presentation/accessManagement/roles/RolesPresenter.js","sources":["../../../../src/presentation/accessManagement/roles/RolesPresenter.ts"],"sourcesContent":["import { z } from \"zod\";\nimport { makeAutoObservable, runInAction, computed } from \"mobx\";\nimport { StringFormatter } from \"~/features/stringFormatter/abstractions.js\";\nimport { ListPresenter } from \"~/presentation/listPresenter/abstractions.js\";\nimport { FormModelFactory } from \"~/features/formModel/abstractions.js\";\nimport type { IFormModel } from \"~/features/formModel/abstractions.js\";\nimport type { Role } from \"~/features/accessManagement/types.js\";\nimport {\n    ListRolesUseCase,\n    RolesListCache\n} from \"~/features/accessManagement/roles/listRoles/abstractions.js\";\nimport { GetRoleUseCase } from \"~/features/accessManagement/roles/getRole/abstractions.js\";\nimport { CreateRoleUseCase } from \"~/features/accessManagement/roles/createRole/abstractions.js\";\nimport { UpdateRoleUseCase } from \"~/features/accessManagement/roles/updateRole/abstractions.js\";\nimport { DeleteRoleUseCase } from \"~/features/accessManagement/roles/deleteRole/abstractions.js\";\nimport {\n    RolesPresenter as Abstraction,\n    type IRolesPresenter,\n    type IRolesPresenterViewModel\n} from \"./abstractions.js\";\nimport { RolesDataSource } from \"./RolesDataSource.js\";\n\nclass RolesPresenterImpl implements IRolesPresenter {\n    private _selectedRole: Role | null = null;\n    private _loading = false;\n    private _saving = false;\n    private _showForm = false;\n    private _form: IFormModel;\n\n    constructor(\n        private _listPresenter: ListPresenter.Interface<Role>,\n        private formModelFactory: FormModelFactory.Interface,\n        private listRolesUseCase: ListRolesUseCase.Interface,\n        private getRoleUseCase: GetRoleUseCase.Interface,\n        private createRoleUseCase: CreateRoleUseCase.Interface,\n        private updateRoleUseCase: UpdateRoleUseCase.Interface,\n        private deleteRoleUseCase: DeleteRoleUseCase.Interface,\n        private cache: RolesListCache.Interface,\n        private stringFormatter: StringFormatter.Interface\n    ) {\n        this._form = this.buildForm(false, false);\n        makeAutoObservable<\n            RolesPresenterImpl,\n            | \"formModelFactory\"\n            | \"listRolesUseCase\"\n            | \"getRoleUseCase\"\n            | \"createRoleUseCase\"\n            | \"updateRoleUseCase\"\n            | \"deleteRoleUseCase\"\n            | \"cache\"\n            | \"stringFormatter\"\n        >(this, {\n            formModelFactory: false,\n            listRolesUseCase: false,\n            getRoleUseCase: false,\n            createRoleUseCase: false,\n            updateRoleUseCase: false,\n            deleteRoleUseCase: false,\n            cache: false,\n            stringFormatter: false,\n            vm: computed\n        });\n    }\n\n    get vm(): IRolesPresenterViewModel {\n        const role = this._selectedRole;\n        const isSystemRole = role !== null && (role.slug === \"full-access\" || role.system === true);\n        const isPluginRole = role !== null && (role.plugin ?? false);\n\n        return {\n            selectedRole: this._selectedRole,\n            loading: this._loading,\n            saving: this._saving,\n            showForm: this._showForm,\n            canModify: !isSystemRole && !isPluginRole,\n            isSystemRole,\n            form: this._form.vm\n        };\n    }\n\n    get list(): ListPresenter.Interface<Role> {\n        return this._listPresenter;\n    }\n\n    init(): void {\n        const dataSource = new RolesDataSource(this.listRolesUseCase, this.cache);\n\n        this._listPresenter.init({\n            dataSource,\n            initialSort: { field: \"createdOn\", direction: \"DESC\" },\n            limit: 1000\n        });\n    }\n\n    async selectRole(id: string): Promise<void> {\n        runInAction(() => {\n            this._loading = true;\n            this._showForm = true;\n        });\n\n        try {\n            const role = await this.getRoleUseCase.execute(id);\n            const isSystemRole = role.slug === \"full-access\" || role.system === true;\n            const isPluginRole = role.plugin ?? false;\n            const canModify = !isSystemRole && !isPluginRole;\n\n            runInAction(() => {\n                this._selectedRole = role;\n                this._form = this.buildForm(false, canModify, role.id);\n                this._form.setData({\n                    name: role.name,\n                    slug: role.slug,\n                    description: role.description ?? \"\",\n                    permissions: role.permissions || []\n                });\n            });\n        } finally {\n            runInAction(() => {\n                this._loading = false;\n            });\n        }\n    }\n\n    createNew(): void {\n        this._selectedRole = null;\n        this._form = this.buildForm(true, true, \"new\");\n        this._showForm = true;\n    }\n\n    deselect(): void {\n        this._selectedRole = null;\n        this._showForm = false;\n    }\n\n    async save(): Promise<Role | null> {\n        const data = await this._form.submit<Role>();\n        if (!data) {\n            return null;\n        }\n\n        runInAction(() => {\n            this._saving = true;\n        });\n\n        try {\n            const isUpdate = this._selectedRole !== null && this._selectedRole.createdOn;\n\n            if (isUpdate) {\n                const role = await this.updateRoleUseCase.execute(this._selectedRole!.id, {\n                    name: data.name as string,\n                    description: data.description as string,\n                    permissions: data.permissions\n                });\n                runInAction(() => {\n                    this._selectedRole = role;\n                });\n                return role;\n            } else {\n                const role = await this.createRoleUseCase.execute({\n                    name: data.name as string,\n                    slug: data.slug as string,\n                    description: data.description as string,\n                    permissions: data.permissions\n                });\n                runInAction(() => {\n                    this._selectedRole = role;\n                    this._form = this.buildForm(false, true, role.id);\n                    this._form.setData({\n                        name: role.name,\n                        slug: role.slug,\n                        description: role.description ?? \"\",\n                        permissions: role.permissions || []\n                    });\n                });\n                return role;\n            }\n            // Errors deliberately propagate to the caller, which reports them to the user. This\n            // used to be a bare `catch { return null }`, and `null` is also what `save()` returns\n            // when client-side validation fails - so a rejected request looked to the view exactly\n            // like a form that had not been submitted, and failed silently.\n        } finally {\n            runInAction(() => {\n                this._saving = false;\n            });\n        }\n    }\n\n    async deleteRole(id: string): Promise<void> {\n        await this.deleteRoleUseCase.execute(id);\n\n        runInAction(() => {\n            if (this._selectedRole !== null && this._selectedRole.id === id) {\n                this._selectedRole = null;\n                this._showForm = false;\n            }\n        });\n    }\n\n    private buildForm(isNew: boolean, canModify: boolean, entityId?: string): IFormModel {\n        return this.formModelFactory.create({\n            fields: fields => ({\n                name: fields\n                    .text()\n                    .label(\"Name\")\n                    .required(\"Name is required.\")\n                    .disabled(!canModify)\n                    .onBlur((value, { form }) => {\n                        const slugValue = form.field(\"slug\").getValue();\n                        if (slugValue || !value) {\n                            return;\n                        }\n                        form.field(\"slug\").setValue(this.stringFormatter.slugify(String(value)));\n                    }),\n                slug: fields\n                    .text()\n                    .label(\"Slug\")\n                    .required(\"Slug is required.\")\n                    .disabled(!isNew || !canModify),\n                description: fields\n                    .text()\n                    .label(\"Description\")\n                    .defaultValue(\"\")\n                    .schema(\n                        z.string().max(500, \"Description cannot be longer than 500 characters.\")\n                    )\n                    .renderer(\"textarea\")\n                    .disabled(!canModify),\n                permissions: fields\n                    .permissions()\n                    .label(\"Permissions\")\n                    .renderer(\"permissions\", { id: entityId || \"new\" })\n                    .hiddenWhen(() => {\n                        const role = this._selectedRole;\n                        return (\n                            role !== null && (role.slug === \"full-access\" || role.system === true)\n                        );\n                    })\n            }),\n            layout: layout => [\n                layout.row(\"name\", \"slug\"),\n                layout.row(\"description\"),\n                layout.row(\"permissions\")\n            ]\n        });\n    }\n}\n\nexport const RolesPresenter = Abstraction.createImplementation({\n    implementation: RolesPresenterImpl,\n    dependencies: [\n        ListPresenter,\n        FormModelFactory,\n        ListRolesUseCase,\n        GetRoleUseCase,\n        CreateRoleUseCase,\n        UpdateRoleUseCase,\n        DeleteRoleUseCase,\n        RolesListCache,\n        StringFormatter\n    ]\n});\n"],"names":["RolesPresenterImpl","_listPresenter","formModelFactory","listRolesUseCase","getRoleUseCase","createRoleUseCase","updateRoleUseCase","deleteRoleUseCase","cache","stringFormatter","makeAutoObservable","computed","role","isSystemRole","isPluginRole","dataSource","RolesDataSource","id","runInAction","canModify","data","isUpdate","isNew","entityId","fields","value","form","slugValue","String","z","layout","RolesPresenter","Abstraction","ListPresenter","FormModelFactory","ListRolesUseCase","GetRoleUseCase","CreateRoleUseCase","UpdateRoleUseCase","DeleteRoleUseCase","RolesListCache","StringFormatter"],"mappings":"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"}

package/presentation/accessManagement/roles/components/RolesDataList.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const RolesDataList: (({ activeId }: {
+    activeId: string | undefined;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    activeId: string | undefined;
+}> & {
+    readonly type: ({ activeId }: {
+        activeId: string | undefined;
+    }) => React.JSX.Element;
+};

package/presentation/accessManagement/roles/components/RolesDataList.js

@@ -0,0 +1,146 @@
+import react, { useCallback, useMemo, useState } from "react";
+import orderBy from "lodash/orderBy.js";
+import { useFeature } from "@webiny/app";
+import { SearchUI, useConfirmationDialog, useRouter, useSnackbar } from "../../../../index.js";
+import { Button, DataList, DataListModal, DeleteIcon, Grid, List, Select, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { RolesPresenterFeature } from "../feature.js";
+import { Routes } from "../../routes.js";
+import { createReactiveComponent } from "../../../createReactiveComponent.js";
+const SORTERS = [
+    {
+        label: "Newest to oldest",
+        sorter: "createdOn_DESC"
+    },
+    {
+        label: "Oldest to newest",
+        sorter: "createdOn_ASC"
+    },
+    {
+        label: "Name A-Z",
+        sorter: "name_ASC"
+    },
+    {
+        label: "Name Z-A",
+        sorter: "name_DESC"
+    }
+];
+const deserializeSorters = (data)=>{
+    const [field, order] = data.split("_");
+    return [
+        field,
+        "asc" === order.toLowerCase() ? "asc" : "desc"
+    ];
+};
+function lockedReason(item) {
+    if (item.system) return "Cannot delete system roles.";
+    if (item.plugin) return "Cannot delete roles registered via extensions.";
+    return null;
+}
+const RolesDataList = createReactiveComponent(({ activeId })=>{
+    const { presenter } = useFeature(RolesPresenterFeature);
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const { showConfirmation } = useConfirmationDialog({
+        dataTestId: "default-data-list.delete-dialog"
+    });
+    const [filter, setFilter] = useState("");
+    const [sort, setSort] = useState(SORTERS[0].sorter);
+    const roles = presenter.list.vm.rows;
+    const loading = presenter.list.vm.pagination.loading;
+    const filteredData = useMemo(()=>{
+        if ("" === filter) return roles;
+        const lc = filter.toLowerCase();
+        return roles.filter((r)=>r.name.toLowerCase().includes(lc) || r.slug.toLowerCase().includes(lc) || r.description && r.description.toLowerCase().includes(lc));
+    }, [
+        roles,
+        filter
+    ]);
+    const sortedData = useMemo(()=>{
+        if (!sort) return filteredData;
+        const [key, order] = deserializeSorters(sort);
+        return orderBy(filteredData, [
+            key
+        ], [
+            order
+        ]);
+    }, [
+        filteredData,
+        sort
+    ]);
+    const deleteItem = useCallback((item)=>{
+        showConfirmation(async ()=>{
+            try {
+                await presenter.deleteRole(item.id);
+                showSnackbar(`Role "${item.slug}" deleted.`);
+                if (activeId === item.id) goToRoute(Routes.Roles.List);
+            } catch (e) {
+                showSnackbar(e.message);
+            }
+        });
+    }, [
+        activeId
+    ]);
+    return /*#__PURE__*/ react.createElement(DataList, {
+        title: "Roles",
+        refresh: null,
+        actions: /*#__PURE__*/ react.createElement(Button, {
+            text: "New",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            className: "ml-xs",
+            "data-testid": "new-record-button",
+            onClick: ()=>goToRoute(Routes.Roles.List, {
+                    new: true
+                })
+        }),
+        data: sortedData,
+        loading: loading,
+        search: /*#__PURE__*/ react.createElement(SearchUI, {
+            value: filter,
+            onChange: setFilter,
+            inputPlaceholder: "Search roles..."
+        }),
+        modalOverlay: /*#__PURE__*/ react.createElement(DataListModal.Content, null, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Select, {
+            value: sort,
+            onChange: setSort,
+            label: "Sort by",
+            options: SORTERS.map(({ label, sorter: value })=>({
+                    label,
+                    value
+                }))
+        })))),
+        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
+            "data-testid": "default-data-list.filter"
+        })
+    }, ({ data })=>/*#__PURE__*/ react.createElement(List, {
+            "data-testid": "default-data-list"
+        }, data.map((item)=>{
+            const locked = lockedReason(item);
+            let actions = /*#__PURE__*/ react.createElement(DeleteIcon, {
+                onClick: ()=>deleteItem(item),
+                "data-testid": "default-data-list.delete"
+            });
+            if (locked) actions = /*#__PURE__*/ react.createElement(Tooltip, {
+                content: locked,
+                trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
+                    disabled: true
+                })
+            });
+            return /*#__PURE__*/ react.createElement(List.Item, {
+                key: item.id,
+                selected: item.id === activeId,
+                title: item.name,
+                description: item.description,
+                onClick: ()=>goToRoute(Routes.Roles.List, {
+                        id: item.id
+                    }),
+                actions: actions
+            });
+        })));
+});
+export { RolesDataList };
+
+//# sourceMappingURL=RolesDataList.js.map

package/presentation/accessManagement/roles/components/RolesDataList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/accessManagement/roles/components/RolesDataList.js","sources":["../../../../../src/presentation/accessManagement/roles/components/RolesDataList.tsx"],"sourcesContent":["import React from \"react\";\nimport { useCallback } from \"react\";\nimport { useMemo } from \"react\";\nimport { useState } from \"react\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { useFeature } from \"@webiny/app\";\nimport { useSnackbar } from \"~/index.js\";\nimport { useConfirmationDialog } from \"~/index.js\";\nimport { SearchUI } from \"~/index.js\";\nimport { useRouter } from \"~/index.js\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { DataList } from \"@webiny/admin-ui\";\nimport { DataListModal } from \"@webiny/admin-ui\";\nimport { DeleteIcon } from \"@webiny/admin-ui\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { List } from \"@webiny/admin-ui\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { RolesPresenterFeature } from \"../feature.js\";\nimport { Routes } from \"../../routes.js\";\nimport type { Role } from \"~/features/accessManagement/types.js\";\nimport { createReactiveComponent } from \"~/presentation/createReactiveComponent.js\";\n\nconst SORTERS = [\n    { label: \"Newest to oldest\", sorter: \"createdOn_DESC\" },\n    { label: \"Oldest to newest\", sorter: \"createdOn_ASC\" },\n    { label: \"Name A-Z\", sorter: \"name_ASC\" },\n    { label: \"Name Z-A\", sorter: \"name_DESC\" }\n];\n\nconst deserializeSorters = (data: string): [string, \"asc\" | \"desc\"] => {\n    const [field, order] = data.split(\"_\");\n    return [field, order.toLowerCase() === \"asc\" ? \"asc\" : \"desc\"];\n};\n\n// Why a role can't be deleted, or null when it can.\nfunction lockedReason(item: Role): string | null {\n    if (item.system) {\n        return \"Cannot delete system roles.\";\n    }\n    if (item.plugin) {\n        return \"Cannot delete roles registered via extensions.\";\n    }\n    return null;\n}\n\nexport const RolesDataList = createReactiveComponent(\n    ({ activeId }: { activeId: string | undefined }) => {\n        const { presenter } = useFeature(RolesPresenterFeature);\n        const { goToRoute } = useRouter();\n        const { showSnackbar } = useSnackbar();\n        const { showConfirmation } = useConfirmationDialog({\n            dataTestId: \"default-data-list.delete-dialog\"\n        });\n\n        const [filter, setFilter] = useState(\"\");\n        const [sort, setSort] = useState(SORTERS[0].sorter);\n\n        const roles = presenter.list.vm.rows;\n        const loading = presenter.list.vm.pagination.loading;\n\n        const filteredData = useMemo(() => {\n            if (filter === \"\") {\n                return roles;\n            }\n            const lc = filter.toLowerCase();\n            return roles.filter(\n                (r: Role) =>\n                    r.name.toLowerCase().includes(lc) ||\n                    r.slug.toLowerCase().includes(lc) ||\n                    (r.description && r.description.toLowerCase().includes(lc))\n            );\n        }, [roles, filter]);\n\n        const sortedData = useMemo(() => {\n            if (!sort) {\n                return filteredData;\n            }\n            const [key, order] = deserializeSorters(sort);\n            return orderBy(filteredData, [key], [order]);\n        }, [filteredData, sort]);\n\n        const deleteItem = useCallback(\n            (item: Role) => {\n                showConfirmation(async () => {\n                    try {\n                        await presenter.deleteRole(item.id);\n                        showSnackbar(`Role \"${item.slug}\" deleted.`);\n                        if (activeId === item.id) {\n                            goToRoute(Routes.Roles.List);\n                        }\n                    } catch (e: any) {\n                        showSnackbar(e.message);\n                    }\n                });\n            },\n            [activeId]\n        );\n\n        return (\n            <DataList\n                title={\"Roles\"}\n                refresh={null}\n                actions={\n                    <Button\n                        text={\"New\"}\n                        icon={<AddIcon />}\n                        size={\"sm\"}\n                        className={\"ml-xs\"}\n                        data-testid=\"new-record-button\"\n                        onClick={() => goToRoute(Routes.Roles.List, { new: true })}\n                    />\n                }\n                data={sortedData}\n                loading={loading}\n                search={\n                    <SearchUI\n                        value={filter}\n                        onChange={setFilter}\n                        inputPlaceholder={\"Search roles...\"}\n                    />\n                }\n                modalOverlay={\n                    <DataListModal.Content>\n                        <Grid>\n                            <Grid.Column span={12}>\n                                <Select\n                                    value={sort}\n                                    onChange={setSort}\n                                    label={\"Sort by\"}\n                                    options={SORTERS.map(({ label, sorter: value }) => ({\n                                        label,\n                                        value\n                                    }))}\n                                />\n                            </Grid.Column>\n                        </Grid>\n                    </DataListModal.Content>\n                }\n                modalOverlayAction={\n                    <DataListModal.Trigger data-testid={\"default-data-list.filter\"} />\n                }\n            >\n                {({ data }: { data: Role[] }) => (\n                    <List data-testid=\"default-data-list\">\n                        {data.map(item => {\n                            const locked = lockedReason(item);\n                            let actions = (\n                                <DeleteIcon\n                                    onClick={() => deleteItem(item)}\n                                    data-testid={\"default-data-list.delete\"}\n                                />\n                            );\n                            if (locked) {\n                                actions = (\n                                    <Tooltip content={locked} trigger={<DeleteIcon disabled />} />\n                                );\n                            }\n\n                            return (\n                                <List.Item\n                                    key={item.id}\n                                    selected={item.id === activeId}\n                                    title={item.name}\n                                    description={item.description}\n                                    onClick={() => goToRoute(Routes.Roles.List, { id: item.id })}\n                                    actions={actions}\n                                />\n                            );\n                        })}\n                    </List>\n                )}\n            </DataList>\n        );\n    }\n);\n"],"names":["SORTERS","deserializeSorters","data","field","order","lockedReason","item","RolesDataList","createReactiveComponent","activeId","presenter","useFeature","RolesPresenterFeature","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","filter","setFilter","useState","sort","setSort","roles","loading","filteredData","useMemo","lc","r","sortedData","key","orderBy","deleteItem","useCallback","Routes","e","DataList","Button","AddIcon","SearchUI","DataListModal","Grid","Select","label","value","List","locked","actions","DeleteIcon","Tooltip"],"mappings":"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"}

package/presentation/accessManagement/roles/components/RolesForm.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export declare const RolesForm: (({ newEntry, id }: {
+    newEntry: boolean;
+    id: string | undefined;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    newEntry: boolean;
+    id: string | undefined;
+}> & {
+    readonly type: ({ newEntry, id }: {
+        newEntry: boolean;
+        id: string | undefined;
+    }) => React.JSX.Element;
+};

package/presentation/accessManagement/roles/components/RolesForm.js

@@ -0,0 +1,114 @@
+import react, { useCallback, useEffect } from "react";
+import { useFeature } from "@webiny/app";
+import { EmptyView, FormErrors, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, useRouter, useSnackbar } from "../../../../index.js";
+import { FormView } from "../../../../features/formModel/FormView.js";
+import { Alert, Button, Grid, IconButton, OverlayLoader, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as content_copy_svg_ReactComponent } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
+import { RolesPresenterFeature } from "../feature.js";
+import { Routes } from "../../routes.js";
+import { AssumePermissionsButton } from "../../../assumePermissions/components/AssumePermissionsButton.js";
+import { createReactiveComponent } from "../../../createReactiveComponent.js";
+function formTitle(record) {
+    if (!record || !record.name) return "Untitled";
+    return record.name;
+}
+function toAssumeTarget(role, loading) {
+    if (!role || loading) return null;
+    return {
+        type: "role",
+        id: role.id,
+        name: role.name
+    };
+}
+const RolesForm = createReactiveComponent(({ newEntry, id })=>{
+    const { presenter } = useFeature(RolesPresenterFeature);
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const { vm } = presenter;
+    useEffect(()=>{
+        if (id) presenter.selectRole(id);
+        else if (newEntry) presenter.createNew();
+        else presenter.deselect();
+    }, [
+        id,
+        newEntry
+    ]);
+    const handleSave = useCallback(async ()=>{
+        try {
+            const role = await presenter.save();
+            if (role) {
+                if (!vm.selectedRole || vm.selectedRole.id !== role.id) goToRoute(Routes.Roles.List, {
+                    id: role.id
+                });
+                showSnackbar("Role saved successfully!");
+            }
+        } catch (e) {
+            showSnackbar(e.message);
+        }
+    }, [
+        presenter,
+        vm.selectedRole
+    ]);
+    if (!vm.showForm) return /*#__PURE__*/ react.createElement(EmptyView, {
+        icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+        title: "Click on the left side list to display role details or create a...",
+        action: /*#__PURE__*/ react.createElement(Button, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            text: "New Role",
+            "data-testid": "new-record-button",
+            onClick: ()=>goToRoute(Routes.Roles.List, {
+                    new: true
+                })
+        })
+    });
+    const copyPermissions = ()=>{
+        const permissions = vm.selectedRole?.permissions ?? [];
+        const json = JSON.stringify(permissions, null, 2);
+        navigator.clipboard.writeText(json);
+        showSnackbar("JSON data copied to clipboard.");
+    };
+    const assumeTarget = toAssumeTarget(vm.selectedRole, vm.loading);
+    return /*#__PURE__*/ react.createElement(SimpleForm, {
+        size: "lg"
+    }, vm.loading || vm.saving ? /*#__PURE__*/ react.createElement(OverlayLoader, null) : null, /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+        title: formTitle(vm.selectedRole)
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-end gap-xxs"
+    }, /*#__PURE__*/ react.createElement(AssumePermissionsButton, {
+        target: assumeTarget
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Copy permissions as JSON",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            icon: /*#__PURE__*/ react.createElement(content_copy_svg_ReactComponent, null),
+            onClick: copyPermissions
+        })
+    }))), /*#__PURE__*/ react.createElement(SimpleFormContent, null, vm.isSystemRole && /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        title: "Permissions are locked"
+    }, "This is a protected system role and you can't modify its permissions."))), vm.selectedRole && vm.selectedRole.plugin && /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        title: "Permissions are locked"
+    }, "This role is registered via an extension, and cannot be modified."), /*#__PURE__*/ react.createElement(FormErrors, {
+        form: vm.form,
+        className: "mb-md"
+    }), /*#__PURE__*/ react.createElement(FormView, {
+        name: "Role",
+        form: vm.form
+    })), /*#__PURE__*/ react.createElement(SimpleFormFooter, null, vm.canModify && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Cancel",
+        onClick: ()=>goToRoute(Routes.Roles.List)
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: "Save",
+        "data-testid": "admin.am.role.new.save",
+        onClick: handleSave
+    }))));
+});
+export { RolesForm };
+
+//# sourceMappingURL=RolesForm.js.map

package/presentation/accessManagement/roles/components/RolesForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/accessManagement/roles/components/RolesForm.js","sources":["../../../../../src/presentation/accessManagement/roles/components/RolesForm.tsx"],"sourcesContent":["import React from \"react\";\nimport { useCallback } from \"react\";\nimport { useEffect } from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { SimpleForm } from \"~/index.js\";\nimport { SimpleFormHeader } from \"~/index.js\";\nimport { SimpleFormContent } from \"~/index.js\";\nimport { SimpleFormFooter } from \"~/index.js\";\nimport { EmptyView } from \"~/index.js\";\nimport { useSnackbar } from \"~/index.js\";\nimport { useRouter } from \"~/index.js\";\nimport { FormErrors } from \"~/index.js\";\nimport { FormView } from \"~/features/formModel/FormView.js\";\nimport { Alert } from \"@webiny/admin-ui\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { RolesPresenterFeature } from \"../feature.js\";\nimport { Routes } from \"../../routes.js\";\nimport type { Role } from \"~/features/accessManagement/types.js\";\nimport { AssumePermissionsButton } from \"~/presentation/assumePermissions/components/AssumePermissionsButton.js\";\nimport type { AssumePermissionsPresenter } from \"~/presentation/assumePermissions/abstractions.js\";\nimport { createReactiveComponent } from \"~/presentation/createReactiveComponent.js\";\n\nfunction formTitle(record: Role | null): string {\n    if (!record || !record.name) {\n        return \"Untitled\";\n    }\n    return record.name;\n}\n\n/*\n * Only a saved role can be previewed. While the form loads, `selectedRole` can still be the role\n * that was open before, so there is no target until loading is done.\n */\nfunction toAssumeTarget(\n    role: Role | null,\n    loading: boolean\n): AssumePermissionsPresenter.Target | null {\n    if (!role || loading) {\n        return null;\n    }\n\n    return { type: \"role\", id: role.id, name: role.name };\n}\n\nexport const RolesForm = createReactiveComponent(\n    ({ newEntry, id }: { newEntry: boolean; id: string | undefined }) => {\n        const { presenter } = useFeature(RolesPresenterFeature);\n        const { goToRoute } = useRouter();\n        const { showSnackbar } = useSnackbar();\n        const { vm } = presenter;\n\n        useEffect(() => {\n            if (id) {\n                presenter.selectRole(id);\n            } else if (newEntry) {\n                presenter.createNew();\n            } else {\n                presenter.deselect();\n            }\n        }, [id, newEntry]);\n\n        const handleSave = useCallback(async () => {\n            try {\n                const role = await presenter.save();\n                if (role) {\n                    if (!vm.selectedRole || vm.selectedRole.id !== role.id) {\n                        goToRoute(Routes.Roles.List, { id: role.id });\n                    }\n                    showSnackbar(\"Role saved successfully!\");\n                }\n            } catch (e: any) {\n                showSnackbar(e.message);\n            }\n        }, [presenter, vm.selectedRole]);\n\n        if (!vm.showForm) {\n            return (\n                <EmptyView\n                    icon={<SettingsIcon />}\n                    title={\"Click on the left side list to display role details or create a...\"}\n                    action={\n                        <Button\n                            icon={<AddIcon />}\n                            text={\"New Role\"}\n                            data-testid=\"new-record-button\"\n                            onClick={() => goToRoute(Routes.Roles.List, { new: true })}\n                        />\n                    }\n                />\n            );\n        }\n\n        const copyPermissions = () => {\n            const permissions = vm.selectedRole?.permissions ?? [];\n            const json = JSON.stringify(permissions, null, 2);\n            navigator.clipboard.writeText(json);\n            showSnackbar(\"JSON data copied to clipboard.\");\n        };\n\n        const assumeTarget = toAssumeTarget(vm.selectedRole, vm.loading);\n\n        return (\n            <SimpleForm size={\"lg\"}>\n                {vm.loading || vm.saving ? <OverlayLoader /> : null}\n                <SimpleFormHeader title={formTitle(vm.selectedRole)}>\n                    <div className={\"flex items-center justify-end gap-xxs\"}>\n                        <AssumePermissionsButton target={assumeTarget} />\n                        <Tooltip\n                            content=\"Copy permissions as JSON\"\n                            trigger={\n                                <IconButton\n                                    variant={\"ghost\"}\n                                    icon={<CopyIcon />}\n                                    onClick={copyPermissions}\n                                />\n                            }\n                        />\n                    </div>\n                </SimpleFormHeader>\n                <SimpleFormContent>\n                    {vm.isSystemRole && (\n                        <Grid>\n                            <Grid.Column span={12}>\n                                <Alert type={\"warning\"} title={\"Permissions are locked\"}>\n                                    This is a protected system role and you can&apos;t modify its\n                                    permissions.\n                                </Alert>\n                            </Grid.Column>\n                        </Grid>\n                    )}\n                    {vm.selectedRole && vm.selectedRole.plugin && (\n                        <Alert type={\"warning\"} title={\"Permissions are locked\"}>\n                            This role is registered via an extension, and cannot be modified.\n                        </Alert>\n                    )}\n                    <FormErrors form={vm.form} className={\"mb-md\"} />\n                    <FormView name={\"Role\"} form={vm.form} />\n                </SimpleFormContent>\n                <SimpleFormFooter>\n                    {vm.canModify && (\n                        <>\n                            <Button\n                                variant={\"secondary\"}\n                                text={\"Cancel\"}\n                                onClick={() => goToRoute(Routes.Roles.List)}\n                            />\n                            <Button\n                                text={\"Save\"}\n                                data-testid=\"admin.am.role.new.save\"\n                                onClick={handleSave}\n                            />\n                        </>\n                    )}\n                </SimpleFormFooter>\n            </SimpleForm>\n        );\n    }\n);\n"],"names":["formTitle","record","toAssumeTarget","role","loading","RolesForm","createReactiveComponent","newEntry","id","presenter","useFeature","RolesPresenterFeature","goToRoute","useRouter","showSnackbar","useSnackbar","vm","useEffect","handleSave","useCallback","Routes","e","EmptyView","SettingsIcon","Button","AddIcon","copyPermissions","permissions","json","JSON","navigator","assumeTarget","SimpleForm","OverlayLoader","SimpleFormHeader","AssumePermissionsButton","Tooltip","IconButton","CopyIcon","SimpleFormContent","Grid","Alert","FormErrors","FormView","SimpleFormFooter"],"mappings":"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"}

package/presentation/accessManagement/roles/components/RolesView.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const RolesView: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const RolesView: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/accessManagement/roles/components/RolesView.js

@@ -1,218 +1,12 @@
-import react, { useCallback, useEffect, useMemo, useState } from "react";
-import { observer } from "mobx-react-lite";
-import orderBy from "lodash/orderBy.js";
+import react, { useEffect } from "react";
 import { useFeature } from "@webiny/app";
-import { EmptyView, FormErrors, LeftPanel, RightPanel, SearchUI, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, SplitView, useConfirmationDialog, useRoute, useRouter, useSnackbar } from "../../../../index.js";
-import { FormView } from "../../../../features/formModel/FormView.js";
-import { Alert, Button, DataList, DataListModal, DeleteIcon, Grid, IconButton, List, OverlayLoader, Select, Tooltip } from "@webiny/admin-ui";
-import { ReactComponent } from "@webiny/icons/add.svg";
-import { ReactComponent as content_copy_svg_ReactComponent } from "@webiny/icons/content_copy.svg";
-import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
+import { LeftPanel, RightPanel, SplitView, useRoute } from "../../../../index.js";
 import { RolesPresenterFeature } from "../feature.js";
 import { Routes } from "../../routes.js";
-const SORTERS = [
-    {
-        label: "Newest to oldest",
-        sorter: "createdOn_DESC"
-    },
-    {
-        label: "Oldest to newest",
-        sorter: "createdOn_ASC"
-    },
-    {
-        label: "Name A-Z",
-        sorter: "name_ASC"
-    },
-    {
-        label: "Name Z-A",
-        sorter: "name_DESC"
-    }
-];
-const deserializeSorters = (data)=>{
-    const [field, order] = data.split("_");
-    return [
-        field,
-        "asc" === order.toLowerCase() ? "asc" : "desc"
-    ];
-};
-const RolesDataList = observer(({ activeId })=>{
-    const { presenter } = useFeature(RolesPresenterFeature);
-    const { goToRoute } = useRouter();
-    const { showSnackbar } = useSnackbar();
-    const { showConfirmation } = useConfirmationDialog({
-        dataTestId: "default-data-list.delete-dialog"
-    });
-    const [filter, setFilter] = useState("");
-    const [sort, setSort] = useState(SORTERS[0].sorter);
-    const roles = presenter.list.vm.rows;
-    const loading = presenter.list.vm.pagination.loading;
-    const filteredData = useMemo(()=>{
-        if ("" === filter) return roles;
-        const lc = filter.toLowerCase();
-        return roles.filter((r)=>r.name.toLowerCase().includes(lc) || r.slug.toLowerCase().includes(lc) || r.description && r.description.toLowerCase().includes(lc));
-    }, [
-        roles,
-        filter
-    ]);
-    const sortedData = useMemo(()=>{
-        if (!sort) return filteredData;
-        const [key, order] = deserializeSorters(sort);
-        return orderBy(filteredData, [
-            key
-        ], [
-            order
-        ]);
-    }, [
-        filteredData,
-        sort
-    ]);
-    const deleteItem = useCallback((item)=>{
-        showConfirmation(async ()=>{
-            try {
-                await presenter.deleteRole(item.id);
-                showSnackbar(`Role "${item.slug}" deleted.`);
-                if (activeId === item.id) goToRoute(Routes.Roles.List);
-            } catch (e) {
-                showSnackbar(e.message);
-            }
-        });
-    }, [
-        activeId
-    ]);
-    return /*#__PURE__*/ react.createElement(DataList, {
-        title: "Roles",
-        refresh: null,
-        actions: /*#__PURE__*/ react.createElement(Button, {
-            text: "New",
-            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            size: "sm",
-            className: "ml-xs",
-            "data-testid": "new-record-button",
-            onClick: ()=>goToRoute(Routes.Roles.List, {
-                    new: true
-                })
-        }),
-        data: sortedData,
-        loading: loading,
-        search: /*#__PURE__*/ react.createElement(SearchUI, {
-            value: filter,
-            onChange: setFilter,
-            inputPlaceholder: "Search roles..."
-        }),
-        modalOverlay: /*#__PURE__*/ react.createElement(DataListModal.Content, null, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
-            span: 12
-        }, /*#__PURE__*/ react.createElement(Select, {
-            value: sort,
-            onChange: setSort,
-            label: "Sort by",
-            options: SORTERS.map(({ label, sorter: value })=>({
-                    label,
-                    value
-                }))
-        })))),
-        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
-            "data-testid": "default-data-list.filter"
-        })
-    }, ({ data })=>/*#__PURE__*/ react.createElement(List, {
-            "data-testid": "default-data-list"
-        }, data.map((item)=>/*#__PURE__*/ react.createElement(List.Item, {
-                key: item.id,
-                selected: item.id === activeId,
-                title: item.name,
-                description: item.description,
-                onClick: ()=>goToRoute(Routes.Roles.List, {
-                        id: item.id
-                    }),
-                actions: item.system || item.plugin ? /*#__PURE__*/ react.createElement(Tooltip, {
-                    content: item.system ? "Cannot delete system roles." : "Cannot delete roles registered via extensions.",
-                    trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
-                        disabled: true
-                    })
-                }) : /*#__PURE__*/ react.createElement(DeleteIcon, {
-                    onClick: ()=>deleteItem(item),
-                    "data-testid": "default-data-list.delete"
-                })
-            }))));
-});
-const RolesForm = observer(({ newEntry, id })=>{
-    const { presenter } = useFeature(RolesPresenterFeature);
-    const { goToRoute } = useRouter();
-    const { showSnackbar } = useSnackbar();
-    const { vm } = presenter;
-    useEffect(()=>{
-        if (id) presenter.selectRole(id);
-        else if (newEntry) presenter.createNew();
-        else presenter.deselect();
-    }, [
-        id,
-        newEntry
-    ]);
-    const handleSave = useCallback(async ()=>{
-        const role = await presenter.save();
-        if (role) {
-            if (!vm.selectedRole || vm.selectedRole.id !== role.id) goToRoute(Routes.Roles.List, {
-                id: role.id
-            });
-            showSnackbar("Role saved successfully!");
-        }
-    }, [
-        presenter,
-        vm.selectedRole
-    ]);
-    if (!vm.showForm) return /*#__PURE__*/ react.createElement(EmptyView, {
-        icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
-        title: "Click on the left side list to display role details or create a...",
-        action: /*#__PURE__*/ react.createElement(Button, {
-            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            text: "New Role",
-            "data-testid": "new-record-button",
-            onClick: ()=>goToRoute(Routes.Roles.List, {
-                    new: true
-                })
-        })
-    });
-    return /*#__PURE__*/ react.createElement(SimpleForm, {
-        size: "lg"
-    }, vm.loading || vm.saving ? /*#__PURE__*/ react.createElement(OverlayLoader, null) : null, /*#__PURE__*/ react.createElement(SimpleFormHeader, {
-        title: vm.selectedRole ? vm.selectedRole.name || "Untitled" : "Untitled"
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex justify-end"
-    }, /*#__PURE__*/ react.createElement(Tooltip, {
-        content: "Copy permissions as JSON",
-        trigger: /*#__PURE__*/ react.createElement(IconButton, {
-            variant: "ghost",
-            icon: /*#__PURE__*/ react.createElement(content_copy_svg_ReactComponent, null),
-            onClick: ()=>{
-                const permissions = vm.selectedRole ? vm.selectedRole.permissions : [];
-                navigator.clipboard.writeText(JSON.stringify(permissions, null, 2));
-                showSnackbar("JSON data copied to clipboard.");
-            }
-        })
-    }))), /*#__PURE__*/ react.createElement(SimpleFormContent, null, vm.isSystemRole ? /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
-        span: 12
-    }, /*#__PURE__*/ react.createElement(Alert, {
-        type: "warning",
-        title: "Permissions are locked"
-    }, "This is a protected system role and you can't modify its permissions."))) : null, vm.selectedRole && vm.selectedRole.plugin ? /*#__PURE__*/ react.createElement(Alert, {
-        type: "warning",
-        title: "Permissions are locked"
-    }, "This role is registered via an extension, and cannot be modified.") : null, /*#__PURE__*/ react.createElement(FormErrors, {
-        form: vm.form,
-        className: "mb-md"
-    }), /*#__PURE__*/ react.createElement(FormView, {
-        name: "Role",
-        form: vm.form
-    })), /*#__PURE__*/ react.createElement(SimpleFormFooter, null, vm.canModify ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
-        variant: "secondary",
-        text: "Cancel",
-        onClick: ()=>goToRoute(Routes.Roles.List)
-    }), /*#__PURE__*/ react.createElement(Button, {
-        text: "Save",
-        "data-testid": "admin.am.role.new.save",
-        onClick: handleSave
-    })) : null));
-});
-const RolesView = observer(()=>{
+import { createReactiveComponent } from "../../../createReactiveComponent.js";
+import { RolesDataList } from "./RolesDataList.js";
+import { RolesForm } from "./RolesForm.js";
+const RolesView = createReactiveComponent(()=>{
     const { presenter } = useFeature(RolesPresenterFeature);
     const { route } = useRoute(Routes.Roles.List);
     useEffect(()=>{