@webiny/app-security-access-management 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/ui/views/ApiKeys/graphql.js

@@ -1,26 +1,84 @@
-"use strict";
+import graphql_tag from "graphql-tag";
+const fields = `
+    id
+    name
+    slug
+    description
+    token
+    permissions
+    createdOn
+`;
+const LIST_API_KEYS = graphql_tag`
+    query ListApiKeys {
+        security {
+            apiKeys: listApiKeys {
+                data {
+                   ${fields}
+                }
+            }
+        }
+    }
+`;
+const READ_API_KEY = graphql_tag`
+    query GetApiKey($id: ID!) {
+        security {
+            apiKey: getApiKey(id: $id){
+                data {
+                    ${fields}
+                }
+                error {
+                    code
+                    message
+                }
+            }
+        }
+    }
+`;
+const CREATE_API_KEY = graphql_tag`
+    mutation CreateApiKey($data: SecurityApiKeyInput!){
+        security {
+            apiKey: createApiKey(data: $data) {
+                data {
+                    ${fields}
+                }
+                error {
+                    code
+                    message
+                    data
+                }
+            }
+        }
+    }
+`;
+const UPDATE_API_KEY = graphql_tag`
+    mutation UpdateApiKey($id: ID!, $data: SecurityApiKeyInput!){
+        security {
+            apiKey: updateApiKey(id: $id, data: $data) {
+                data {
+                    ${fields}
+                }
+                error {
+                    code
+                    message
+                    data
+                }
+            }
+        }
+    }
+`;
+const DELETE_API_KEY = graphql_tag`
+    mutation DeleteApiKey($id: ID!) {
+        security {
+            deleteApiKey(id: $id) {
+                data
+                error {
+                    code
+                    message
+                }
+            }
+        }
+    }
+`;
+export { CREATE_API_KEY, DELETE_API_KEY, LIST_API_KEYS, READ_API_KEY, UPDATE_API_KEY };
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UPDATE_API_KEY = exports.READ_API_KEY = exports.LIST_API_KEYS = exports.DELETE_API_KEY = exports.CREATE_API_KEY = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _graphqlTag = _interopRequireDefault(require("graphql-tag"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-var fields = "\n    id\n    name\n    description\n    token\n    permissions\n    createdOn\n";
-var LIST_API_KEYS = (0, _graphqlTag.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    query ListApiKeys {\n        security {\n            apiKeys: listApiKeys {\n                data {\n                   ", "\n                }\n            }\n        }\n    }\n"])), fields);
-exports.LIST_API_KEYS = LIST_API_KEYS;
-var READ_API_KEY = (0, _graphqlTag.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    query GetApiKey($id: ID!) {\n        security {\n            apiKey: getApiKey(id: $id){\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n"])), fields);
-exports.READ_API_KEY = READ_API_KEY;
-var CREATE_API_KEY = (0, _graphqlTag.default)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    mutation CreateApiKey($data: SecurityApiKeyInput!){\n        security {\n            apiKey: createApiKey(data: $data) {\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n"])), fields);
-exports.CREATE_API_KEY = CREATE_API_KEY;
-var UPDATE_API_KEY = (0, _graphqlTag.default)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    mutation UpdateApiKey($id: ID!, $data: SecurityApiKeyInput!){\n        security {\n            apiKey: updateApiKey(id: $id, data: $data) {\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n"])), fields);
-exports.UPDATE_API_KEY = UPDATE_API_KEY;
-var DELETE_API_KEY = (0, _graphqlTag.default)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    mutation DeleteApiKey($id: ID!) {\n        security {\n            deleteApiKey(id: $id) {\n                data\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n"])));
-exports.DELETE_API_KEY = DELETE_API_KEY;
+//# sourceMappingURL=graphql.js.map

package/ui/views/ApiKeys/graphql.js.map

@@ -1 +1 @@
-{"version":3,"names":["fields","LIST_API_KEYS","gql","READ_API_KEY","CREATE_API_KEY","UPDATE_API_KEY","DELETE_API_KEY"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nconst fields = `\n    id\n    name\n    description\n    token\n    permissions\n    createdOn\n`;\n\nexport const LIST_API_KEYS = gql`\n    query ListApiKeys {\n        security {\n            apiKeys: listApiKeys {\n                data {\n                   ${fields}\n                }\n            }\n        }\n    }\n`;\n\nexport const READ_API_KEY = gql`\n    query GetApiKey($id: ID!) {\n        security {\n            apiKey: getApiKey(id: $id){\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n`;\n\nexport const CREATE_API_KEY = gql`\n    mutation CreateApiKey($data: SecurityApiKeyInput!){\n        security {\n            apiKey: createApiKey(data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const UPDATE_API_KEY = gql`\n    mutation UpdateApiKey($id: ID!, $data: SecurityApiKeyInput!){\n        security {\n            apiKey: updateApiKey(id: $id, data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const DELETE_API_KEY = gql`\n    mutation DeleteApiKey($id: ID!) {\n        security {\n            deleteApiKey(id: $id) {\n                data\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;;;AAEA,IAAMA,MAAM,qFAAZ;AASO,IAAMC,aAAa,OAAGC,mBAAH,6QAKLF,MALK,CAAnB;;AAYA,IAAMG,YAAY,OAAGD,mBAAH,gYAKHF,MALG,CAAlB;;AAgBA,IAAMI,cAAc,OAAGF,mBAAH,0bAKLF,MALK,CAApB;;AAiBA,IAAMK,cAAc,OAAGH,mBAAH,6cAKLF,MALK,CAApB;;AAiBA,IAAMM,cAAc,OAAGJ,mBAAH,kVAApB"}
+{"version":3,"file":"ui/views/ApiKeys/graphql.js","sources":["../../../../src/ui/views/ApiKeys/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\nimport type { ApiKey } from \"~/types.js\";\n\nconst fields = `\n    id\n    name\n    slug\n    description\n    token\n    permissions\n    createdOn\n`;\n\nexport interface ListApiKeysResponse {\n    security: {\n        apiKeys: {\n            data: ApiKey[];\n        };\n    };\n}\n\nexport const LIST_API_KEYS = gql`\n    query ListApiKeys {\n        security {\n            apiKeys: listApiKeys {\n                data {\n                   ${fields}\n                }\n            }\n        }\n    }\n`;\n\nexport const READ_API_KEY = gql`\n    query GetApiKey($id: ID!) {\n        security {\n            apiKey: getApiKey(id: $id){\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n`;\n\nexport const CREATE_API_KEY = gql`\n    mutation CreateApiKey($data: SecurityApiKeyInput!){\n        security {\n            apiKey: createApiKey(data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const UPDATE_API_KEY = gql`\n    mutation UpdateApiKey($id: ID!, $data: SecurityApiKeyInput!){\n        security {\n            apiKey: updateApiKey(id: $id, data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const DELETE_API_KEY = gql`\n    mutation DeleteApiKey($id: ID!) {\n        security {\n            deleteApiKey(id: $id) {\n                data\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n`;\n"],"names":["fields","LIST_API_KEYS","gql","READ_API_KEY","CREATE_API_KEY","UPDATE_API_KEY","DELETE_API_KEY"],"mappings":";AAGA,MAAMA,SAAS,CAAC;;;;;;;;AAQhB,CAAC;AAUM,MAAMC,gBAAgBC,WAAG,CAAC;;;;;mBAKd,EAAEF,OAAO;;;;;AAK5B,CAAC;AAEM,MAAMG,eAAeD,WAAG,CAAC;;;;;oBAKZ,EAAEF,OAAO;;;;;;;;;AAS7B,CAAC;AAEM,MAAMI,iBAAiBF,WAAG,CAAC;;;;;oBAKd,EAAEF,OAAO;;;;;;;;;;AAU7B,CAAC;AAEM,MAAMK,iBAAiBH,WAAG,CAAC;;;;;oBAKd,EAAEF,OAAO;;;;;;;;;;AAU7B,CAAC;AAEM,MAAMM,iBAAiBJ,WAAG,CAAC;;;;;;;;;;;;AAYlC,CAAC"}

package/ui/views/ApiKeys/index.d.ts

@@ -1 +1 @@
-export * from "./ApiKeys";
+export * from "./ApiKeys.js";

package/ui/views/ApiKeys/index.js

@@ -1,18 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _ApiKeys = require("./ApiKeys");
-
-Object.keys(_ApiKeys).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ApiKeys[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _ApiKeys[key];
-    }
-  });
-});
+export * from "./ApiKeys.js";

package/ui/views/ApiKeys/utils.d.ts

@@ -1,2 +1,3 @@
-import { ApiKey } from "../../../types";
-export declare const pickDataForAPI: (data: ApiKey) => Pick<ApiKey, "name" | "description" | "permissions">;
+import type { ApiKey } from "../../../types.js";
+export declare const pickDataForCreate: (data: ApiKey) => Pick<ApiKey, "name" | "slug" | "description" | "permissions">;
+export declare const pickDataForUpdate: (data: ApiKey) => Pick<ApiKey, "name" | "description" | "permissions">;

package/ui/views/ApiKeys/utils.js

@@ -1,18 +1,15 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.pickDataForAPI = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-var _pick2 = _interopRequireDefault(require("lodash/pick"));
-
-var pickDataForAPI = function pickDataForAPI(data) {
-  return (0, _objectSpread2.default)({}, (0, _pick2.default)(data, ["name", "description", "permissions"]));
-};
-
-exports.pickDataForAPI = pickDataForAPI;
+import pick from "lodash/pick.js";
+const pickDataForCreate = (data)=>structuredClone(pick(data, [
+        "name",
+        "slug",
+        "description",
+        "permissions"
+    ]));
+const pickDataForUpdate = (data)=>structuredClone(pick(data, [
+        "name",
+        "description",
+        "permissions"
+    ]));
+export { pickDataForCreate, pickDataForUpdate };
+
+//# sourceMappingURL=utils.js.map

package/ui/views/ApiKeys/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["pickDataForAPI","data"],"sources":["utils.ts"],"sourcesContent":["import { pick } from \"lodash\";\nimport { ApiKey } from \"~/types\";\n\nexport const pickDataForAPI = (\n    data: ApiKey\n): Pick<ApiKey, \"name\" | \"description\" | \"permissions\"> => ({\n    ...pick(data, [\"name\", \"description\", \"permissions\"])\n});\n"],"mappings":";;;;;;;;;;;;;AAGO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAC1BC,IAD0B;EAAA,uCAGvB,oBAAKA,IAAL,EAAW,CAAC,MAAD,EAAS,aAAT,EAAwB,aAAxB,CAAX,CAHuB;AAAA,CAAvB"}
+{"version":3,"file":"ui/views/ApiKeys/utils.js","sources":["../../../../src/ui/views/ApiKeys/utils.ts"],"sourcesContent":["import pick from \"lodash/pick.js\";\nimport type { ApiKey } from \"~/types.js\";\n\nexport const pickDataForCreate = (\n    data: ApiKey\n): Pick<ApiKey, \"name\" | \"slug\" | \"description\" | \"permissions\"> => {\n    return structuredClone(pick(data, [\"name\", \"slug\", \"description\", \"permissions\"]));\n};\n\nexport const pickDataForUpdate = (\n    data: ApiKey\n): Pick<ApiKey, \"name\" | \"description\" | \"permissions\"> => {\n    return structuredClone(pick(data, [\"name\", \"description\", \"permissions\"]));\n};\n"],"names":["pickDataForCreate","data","structuredClone","pick","pickDataForUpdate"],"mappings":";AAGO,MAAMA,oBAAoB,CAC7BC,OAEOC,gBAAgBC,KAAKF,MAAM;QAAC;QAAQ;QAAQ;QAAe;KAAc;AAG7E,MAAMG,oBAAoB,CAC7BH,OAEOC,gBAAgBC,KAAKF,MAAM;QAAC;QAAQ;QAAe;KAAc"}

package/ui/views/Roles/Roles.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Roles: () => React.JSX.Element;

package/ui/views/Roles/Roles.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { LeftPanel, RightPanel, SplitView, useRoute } from "@webiny/app-admin";
+import { RolesDataList } from "./RolesDataList.js";
+import { RolesForm } from "./RolesForm.js";
+import { Routes } from "../../../routes.js";
+const Roles = ()=>{
+    const { route } = useRoute(Routes.Roles.List);
+    return /*#__PURE__*/ react.createElement(SplitView, null, /*#__PURE__*/ react.createElement(LeftPanel, null, /*#__PURE__*/ react.createElement(RolesDataList, {
+        activeId: route.params.id
+    })), /*#__PURE__*/ react.createElement(RightPanel, null, /*#__PURE__*/ react.createElement(RolesForm, {
+        newEntry: true === route.params.new,
+        id: route.params.id
+    })));
+};
+export { Roles };
+
+//# sourceMappingURL=Roles.js.map

package/ui/views/Roles/Roles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui/views/Roles/Roles.js","sources":["../../../../src/ui/views/Roles/Roles.tsx"],"sourcesContent":["import React from \"react\";\nimport { SplitView, LeftPanel, RightPanel, useRoute } from \"@webiny/app-admin\";\nimport { RolesDataList } from \"./RolesDataList.js\";\nimport { RolesForm } from \"./RolesForm.js\";\nimport { Routes } from \"~/routes.js\";\n\nexport const Roles = () => {\n    const { route } = useRoute(Routes.Roles.List);\n\n    return (\n        <SplitView>\n            <LeftPanel>\n                <RolesDataList activeId={route.params.id} />\n            </LeftPanel>\n            <RightPanel>\n                <RolesForm newEntry={route.params.new === true} id={route.params.id} />\n            </RightPanel>\n        </SplitView>\n    );\n};\n"],"names":["Roles","route","useRoute","Routes","SplitView","LeftPanel","RolesDataList","RightPanel","RolesForm"],"mappings":";;;;;AAMO,MAAMA,QAAQ;IACjB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,KAAK,CAAC,IAAI;IAE5C,OAAO,WAAP,GACI,oBAACC,WAASA,MAAAA,WAAAA,GACN,oBAACC,WAASA,MAAAA,WAAAA,GACN,oBAACC,eAAaA;QAAC,UAAUL,MAAM,MAAM,CAAC,EAAE;uBAE5C,oBAACM,YAAUA,MAAAA,WAAAA,GACP,oBAACC,WAASA;QAAC,UAAUP,AAAqB,SAArBA,MAAM,MAAM,CAAC,GAAG;QAAW,IAAIA,MAAM,MAAM,CAAC,EAAE;;AAInF"}

package/ui/views/Roles/RolesDataList.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface RolesDataListProps {
+    activeId: string | undefined;
+}
+export declare const RolesDataList: ({ activeId }: RolesDataListProps) => React.JSX.Element;

package/ui/views/Roles/RolesDataList.js

@@ -0,0 +1,141 @@
+import react, { useCallback, useMemo, useState } from "react";
+import orderBy from "lodash/orderBy.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Button, DataList, DataListModal, DeleteIcon, Grid, List, Select, Tooltip } from "@webiny/admin-ui";
+import { SearchUI, useConfirmationDialog, useRouter, useSnackbar } from "@webiny/app-admin";
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import { DELETE_ROLE, LIST_ROLES } from "./graphql.js";
+import { deserializeSorters } from "../utils.js";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { Routes } from "../../../routes.js";
+const t = i18n.ns("app-security/admin/roles/data-list");
+const SORTERS = [
+    {
+        label: t`Newest to oldest`,
+        sorter: "createdOn_DESC"
+    },
+    {
+        label: t`Oldest to newest`,
+        sorter: "createdOn_ASC"
+    },
+    {
+        label: t`Name A-Z`,
+        sorter: "name_ASC"
+    },
+    {
+        label: t`Name Z-A`,
+        sorter: "name_DESC"
+    }
+];
+const RolesDataList = ({ activeId })=>{
+    const [filter, setFilter] = useState("");
+    const [sort, setSort] = useState(SORTERS[0].sorter);
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const { showConfirmation } = useConfirmationDialog({
+        dataTestId: "default-data-list.delete-dialog"
+    });
+    const { data: listResponse, loading: listLoading } = useQuery(LIST_ROLES);
+    const [deleteIt, { loading: deleteLoading }] = useMutation(DELETE_ROLE, {
+        refetchQueries: [
+            {
+                query: LIST_ROLES
+            }
+        ]
+    });
+    const data = listLoading && !listResponse ? [] : listResponse?.security.roles.data || [];
+    const filterRole = useCallback(({ name, slug, description })=>name.toLowerCase().includes(filter) || slug.toLowerCase().includes(filter) || description && description.toLowerCase().includes(filter), [
+        filter
+    ]);
+    const sortRoles = useCallback((roles)=>{
+        if (!sort) return roles;
+        const [key, sortBy] = deserializeSorters(sort);
+        return orderBy(roles, [
+            key
+        ], [
+            sortBy
+        ]);
+    }, [
+        sort
+    ]);
+    const deleteItem = useCallback((item)=>{
+        showConfirmation(async ()=>{
+            const { data } = await deleteIt({
+                variables: item
+            });
+            const { error } = data.security.deleteRole;
+            if (error) return showSnackbar(error.message);
+            showSnackbar(t`Role "{slug}" deleted.`({
+                slug: item.slug
+            }));
+            if (activeId === item.id) goToRoute(Routes.Roles.List);
+        });
+    }, [
+        activeId
+    ]);
+    const rolesDataListModalOverlay = useMemo(()=>/*#__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: t`Sort by`,
+            options: SORTERS.map(({ label, sorter: value })=>({
+                    label,
+                    value
+                }))
+        })))), [
+        sort
+    ]);
+    const filteredData = "" === filter ? data : data.filter(filterRole);
+    const groupList = sortRoles(filteredData);
+    return /*#__PURE__*/ react.createElement(DataList, {
+        title: t`Roles`,
+        actions: /*#__PURE__*/ react.createElement(Button, {
+            text: t`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: groupList,
+        loading: listLoading || deleteLoading,
+        search: /*#__PURE__*/ react.createElement(SearchUI, {
+            value: filter,
+            onChange: setFilter,
+            inputPlaceholder: t`Search roles...`
+        }),
+        modalOverlay: rolesDataListModalOverlay,
+        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: /*#__PURE__*/ react.createElement("span", null, item.system ? t`Cannot delete system roles.` : t`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"
+                })
+            }))));
+};
+export { RolesDataList };
+
+//# sourceMappingURL=RolesDataList.js.map

package/ui/views/Roles/RolesDataList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui/views/Roles/RolesDataList.js","sources":["../../../../src/ui/views/Roles/RolesDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { List, DataList, DataListModal, DeleteIcon } from \"@webiny/admin-ui\";\n\nimport { useRouter, SearchUI, useSnackbar, useConfirmationDialog } from \"@webiny/app-admin\";\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport type { ListRolesResponse } from \"./graphql.js\";\nimport { LIST_ROLES, DELETE_ROLE } from \"./graphql.js\";\nimport { deserializeSorters } from \"../utils.js\";\nimport type { Role } from \"~/types.js\";\nimport { Button, Grid, Select, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-security/admin/roles/data-list\");\n\nconst SORTERS = [\n    {\n        label: t`Newest to oldest`,\n        sorter: \"createdOn_DESC\"\n    },\n    {\n        label: t`Oldest to newest`,\n        sorter: \"createdOn_ASC\"\n    },\n    {\n        label: t`Name A-Z`,\n        sorter: \"name_ASC\"\n    },\n    {\n        label: t`Name Z-A`,\n        sorter: \"name_DESC\"\n    }\n];\n\nexport interface RolesDataListProps {\n    activeId: string | undefined;\n}\n\nexport const RolesDataList = ({ activeId }: RolesDataListProps) => {\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState(SORTERS[0].sorter);\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"default-data-list.delete-dialog\"\n    });\n\n    const { data: listResponse, loading: listLoading } = useQuery<ListRolesResponse>(LIST_ROLES);\n\n    const [deleteIt, { loading: deleteLoading }] = useMutation(DELETE_ROLE, {\n        refetchQueries: [{ query: LIST_ROLES }]\n    });\n\n    const data = listLoading && !listResponse ? [] : listResponse?.security.roles.data || [];\n\n    const filterRole = useCallback(\n        ({ name, slug, description }: Role) => {\n            return (\n                name.toLowerCase().includes(filter) ||\n                slug.toLowerCase().includes(filter) ||\n                (description && description.toLowerCase().includes(filter))\n            );\n        },\n        [filter]\n    );\n\n    const sortRoles = useCallback(\n        (roles: Role[]) => {\n            if (!sort) {\n                return roles;\n            }\n            const [key, sortBy] = deserializeSorters(sort);\n            return orderBy(roles, [key], [sortBy]);\n        },\n        [sort]\n    );\n\n    const deleteItem = useCallback(\n        (item: Role) => {\n            showConfirmation(async () => {\n                const { data } = await deleteIt({\n                    variables: item\n                });\n\n                const { error } = data.security.deleteRole;\n                if (error) {\n                    return showSnackbar(error.message);\n                }\n\n                showSnackbar(t`Role \"{slug}\" deleted.`({ slug: item.slug }));\n\n                if (activeId === item.id) {\n                    goToRoute(Routes.Roles.List);\n                }\n            });\n        },\n        [activeId]\n    );\n\n    const rolesDataListModalOverlay = useMemo(\n        () => (\n            <DataListModal.Content>\n                <Grid>\n                    <Grid.Column span={12}>\n                        <Select\n                            value={sort}\n                            onChange={setSort}\n                            label={t`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        [sort]\n    );\n\n    const filteredData = filter === \"\" ? data : data.filter(filterRole);\n    const groupList = sortRoles(filteredData);\n\n    return (\n        <DataList\n            title={t`Roles`}\n            actions={\n                <Button\n                    text={t`New`}\n                    icon={<AddIcon />}\n                    size={\"sm\"}\n                    className={\"ml-xs\"}\n                    data-testid=\"new-record-button\"\n                    onClick={() => {\n                        goToRoute(Routes.Roles.List, { new: true });\n                    }}\n                />\n            }\n            data={groupList}\n            loading={listLoading || deleteLoading}\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search roles...`}\n                />\n            }\n            modalOverlay={rolesDataListModalOverlay}\n            modalOverlayAction={<DataListModal.Trigger data-testid={\"default-data-list.filter\"} />}\n        >\n            {({ data }: { data: Role[] }) => (\n                <List data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <List.Item\n                            key={item.id}\n                            selected={item.id === activeId}\n                            title={item.name}\n                            description={item.description}\n                            onClick={() => {\n                                goToRoute(Routes.Roles.List, { id: item.id });\n                            }}\n                            actions={\n                                item.system || item.plugin ? (\n                                    <Tooltip\n                                        content={\n                                            <span>\n                                                {item.system\n                                                    ? t`Cannot delete system roles.`\n                                                    : t`Cannot delete roles registered via extensions.`}\n                                            </span>\n                                        }\n                                        trigger={<DeleteIcon disabled />}\n                                    />\n                                ) : (\n                                    <DeleteIcon\n                                        onClick={() => deleteItem(item)}\n                                        data-testid={\"default-data-list.delete\"}\n                                    />\n                                )\n                            }\n                        />\n                    ))}\n                </List>\n            )}\n        </DataList>\n    );\n};\n"],"names":["t","i18n","SORTERS","RolesDataList","activeId","filter","setFilter","useState","sort","setSort","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","listResponse","listLoading","useQuery","LIST_ROLES","deleteIt","deleteLoading","useMutation","DELETE_ROLE","data","filterRole","useCallback","name","slug","description","sortRoles","roles","key","sortBy","deserializeSorters","orderBy","deleteItem","item","error","Routes","rolesDataListModalOverlay","useMemo","DataListModal","Grid","Select","label","value","filteredData","groupList","DataList","Button","AddIcon","SearchUI","List","Tooltip","DeleteIcon"],"mappings":"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"}

package/ui/views/Roles/RolesForm.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface RolesFormProps {
+    newEntry: boolean;
+    id: string | undefined;
+}
+export declare const RolesForm: ({ id, newEntry }: RolesFormProps) => React.JSX.Element;

package/ui/views/Roles/RolesForm.js

@@ -0,0 +1,213 @@
+import react, { useCallback } from "react";
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import get from "lodash/get.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Bind as form_Bind, Form, useForm, useGenerateSlug } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { EmptyView, Permissions, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, useRouter, useSnackbar } from "@webiny/app-admin";
+import { CREATE_ROLE, LIST_ROLES, READ_ROLE, UPDATE_ROLE } from "./graphql.js";
+import isEmpty from "lodash/isEmpty.js";
+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 { Alert, Button, Grid, IconButton, Input, OverlayLoader, Textarea, Tooltip } from "@webiny/admin-ui";
+import { Routes } from "../../../routes.js";
+const t = i18n.ns("app-security/admin/roles/form");
+const RolesForm = ({ id, newEntry })=>{
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const getQuery = useQuery(READ_ROLE, {
+        variables: {
+            id
+        },
+        skip: !id,
+        onCompleted: (data)=>{
+            if (!data) return;
+            const { error } = data.security.role;
+            if (error) {
+                goToRoute(Routes.Roles.List);
+                showSnackbar(error.message);
+            }
+        }
+    });
+    const [create, createMutation] = useMutation(CREATE_ROLE, {
+        refetchQueries: [
+            {
+                query: LIST_ROLES
+            }
+        ]
+    });
+    const [update, updateMutation] = useMutation(UPDATE_ROLE, {
+        refetchQueries: [
+            {
+                query: LIST_ROLES
+            }
+        ]
+    });
+    const loading = [
+        getQuery,
+        createMutation,
+        updateMutation
+    ].find((item)=>item.loading);
+    const onSubmit = useCallback(async ({ id, name, description, slug, permissions, createdOn })=>{
+        if (!permissions || !permissions.length) return void showSnackbar(t`You must configure permissions before saving!`, {
+            timeout: 60000,
+            dismissesOnAction: true
+        });
+        const isUpdate = createdOn;
+        const [operation, args] = isUpdate ? [
+            update,
+            {
+                variables: {
+                    id,
+                    data: {
+                        name,
+                        permissions,
+                        ...description && {
+                            description
+                        }
+                    }
+                }
+            }
+        ] : [
+            create,
+            {
+                variables: {
+                    data: {
+                        name,
+                        slug,
+                        description,
+                        permissions
+                    }
+                }
+            }
+        ];
+        const response = await operation(args);
+        const { data: role, error } = response.data.security.role;
+        if (error) return showSnackbar(error.message);
+        if (!isUpdate) goToRoute(Routes.Roles.List, {
+            id: role.id
+        });
+        showSnackbar(t`Role saved successfully!`);
+    }, [
+        id
+    ]);
+    const data = loading ? {} : get(getQuery, "data.security.role.data", {});
+    const systemRole = "full-access" === data.slug || data.system;
+    const pluginRole = data.plugin ?? false;
+    const canModifyRole = !systemRole && !pluginRole;
+    const showEmptyView = !newEntry && !loading && isEmpty(data);
+    if (showEmptyView) return /*#__PURE__*/ react.createElement(EmptyView, {
+        icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+        title: t`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: t`New Role`,
+            "data-testid": "new-record-button",
+            onClick: ()=>{
+                goToRoute(Routes.Roles.List, {
+                    new: true
+                });
+            }
+        })
+    });
+    return /*#__PURE__*/ react.createElement(Form, {
+        data: data,
+        onSubmit: onSubmit
+    }, ({ data, form, Bind })=>/*#__PURE__*/ react.createElement(SimpleForm, {
+            size: "lg"
+        }, loading && /*#__PURE__*/ react.createElement(OverlayLoader, null), /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+            title: data.name ? data.name : "Untitled"
+        }), /*#__PURE__*/ react.createElement(SimpleFormContent, null, /*#__PURE__*/ react.createElement(FormContent, {
+            pluginRole: pluginRole,
+            canModifyRole: canModifyRole,
+            newEntry: newEntry
+        })), /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+            title: "Permissions",
+            rounded: false
+        }, /*#__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: ()=>{
+                    navigator.clipboard.writeText(JSON.stringify(data.permissions, null, 2));
+                    showSnackbar("JSON data copied to clipboard.");
+                }
+            })
+        }))), /*#__PURE__*/ react.createElement(SimpleFormContent, null, systemRole && /*#__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.")), /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(react.Fragment, null, canModifyRole && /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "permissions",
+            defaultValue: []
+        }, (bind)=>/*#__PURE__*/ react.createElement(Permissions, {
+                id: data.id || "new",
+                ...bind
+            })))))), /*#__PURE__*/ react.createElement(SimpleFormFooter, null, canModifyRole && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: t`Cancel`,
+            onClick: ()=>{
+                goToRoute(Routes.Roles.List);
+            },
+            "data-testid": "pb.category.new.form.button.cancel"
+        }), /*#__PURE__*/ react.createElement(Button, {
+            text: t`Save`,
+            "data-testid": "admin.am.role.new.save",
+            onClick: (ev)=>{
+                form.submit(ev);
+            }
+        })))));
+};
+const FormContent = (props)=>{
+    const { pluginRole, canModifyRole, newEntry } = props;
+    const form = useForm();
+    const { generateSlug } = useGenerateSlug(form, "name", "slug");
+    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(react.Fragment, null, pluginRole && /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        title: "Permissions are locked"
+    }, "This role is registered via an extension, and cannot be modified.")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "name",
+        validators: validation.create("required,minLength:1")
+    }, /*#__PURE__*/ react.createElement(Input, {
+        required: true,
+        label: t`Name`,
+        disabled: !canModifyRole,
+        onBlur: generateSlug,
+        "data-testid": "admin.am.role.new.name"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "slug",
+        validators: validation.create("required,minLength:1")
+    }, /*#__PURE__*/ react.createElement(Input, {
+        required: true,
+        disabled: !canModifyRole || !newEntry,
+        label: t`Slug`,
+        "data-testid": "admin.am.role.new.slug"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "description",
+        validators: validation.create("maxLength:500"),
+        defaultValue: ""
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: t`Description`,
+        rows: 3,
+        disabled: !canModifyRole,
+        "data-testid": "admin.am.role.new.description"
+    })))));
+};
+export { RolesForm };
+
+//# sourceMappingURL=RolesForm.js.map