@webiny/app-security-access-management 6.3.0-beta.4 → 6.4.0-beta.0

package/ui/views/Roles/RolesDataList.js

@@ -1,155 +1,141 @@
-import React, { useCallback, useMemo, useState } from "react";
+import react, { useCallback, useMemo, useState } from "react";
 import orderBy from "lodash/orderBy.js";
 import { i18n } from "@webiny/app/i18n/index.js";
-import { DataList, ScrollList, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListActions, DataListModalOverlayAction, DataListModalOverlay, ListItemTextPrimary } from "@webiny/ui/List/index.js";
-import { DeleteIcon } from "@webiny/ui/List/DataList/icons/index.js";
-import { useRouter, SearchUI, useSnackbar, useConfirmationDialog } from "@webiny/app-admin";
-import { useQuery, useMutation } from "@apollo/react-hooks";
-import { LIST_ROLES, DELETE_ROLE } from "./graphql.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 { Button, Grid, Select, Tooltip } from "@webiny/admin-ui";
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+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"
-}];
-export 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
-  }) => {
-    return name.toLowerCase().includes(filter) || slug.toLowerCase().includes(filter) || description && description.toLowerCase().includes(filter);
-  }, [filter]);
-  const sortRoles = useCallback(roles => {
-    if (!sort) {
-      return roles;
+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 [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);
-      }
+];
+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"
     });
-  }, [activeId]);
-  const rolesDataListModalOverlay = useMemo(() => /*#__PURE__*/React.createElement(DataListModalOverlay, 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(AddIcon, null),
-      size: "sm",
-      className: "ml-xs",
-      "data-testid": "new-record-button",
-      onClick: () => {
-        goToRoute(Routes.Roles.List, {
-          new: true
+    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);
         });
-      }
-    }),
-    data: groupList,
-    loading: listLoading || deleteLoading,
-    search: /*#__PURE__*/React.createElement(SearchUI, {
-      value: filter,
-      onChange: setFilter,
-      inputPlaceholder: t`Search roles...`
-    }),
-    modalOverlay: rolesDataListModalOverlay,
-    modalOverlayAction: /*#__PURE__*/React.createElement(DataListModalOverlayAction, {
-      "data-testid": "default-data-list.filter"
-    })
-  }, ({
-    data
-  }) => /*#__PURE__*/React.createElement(ScrollList, {
-    "data-testid": "default-data-list"
-  }, data.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    selected: item.id === activeId
-  }, /*#__PURE__*/React.createElement(ListItemText, {
-    onClick: () => {
-      goToRoute(Routes.Roles.List, {
-        id: item.id
-      });
-    }
-  }, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, item.name), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, item.description)), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(ListActions, null, 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"
-  })))))));
+    }, [
+        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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","useState","orderBy","i18n","DataList","ScrollList","ListItem","ListItemText","ListItemTextSecondary","ListItemMeta","ListActions","DataListModalOverlayAction","DataListModalOverlay","ListItemTextPrimary","DeleteIcon","useRouter","SearchUI","useSnackbar","useConfirmationDialog","useQuery","useMutation","LIST_ROLES","DELETE_ROLE","deserializeSorters","Button","Grid","Select","Tooltip","ReactComponent","AddIcon","Routes","t","ns","SORTERS","label","sorter","RolesDataList","activeId","filter","setFilter","sort","setSort","goToRoute","showSnackbar","showConfirmation","dataTestId","data","listResponse","loading","listLoading","deleteIt","deleteLoading","refetchQueries","query","security","roles","filterRole","name","slug","description","toLowerCase","includes","sortRoles","key","sortBy","deleteItem","item","variables","error","deleteRole","message","id","Roles","List","rolesDataListModalOverlay","createElement","Column","span","value","onChange","options","map","filteredData","groupList","title","actions","text","icon","size","className","onClick","new","search","inputPlaceholder","modalOverlay","modalOverlayAction","selected","system","plugin","content","trigger","disabled"],"sources":["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 {\n    DataList,\n    ScrollList,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListActions,\n    DataListModalOverlayAction,\n    DataListModalOverlay,\n    ListItemTextPrimary\n} from \"@webiny/ui/List/index.js\";\nimport { DeleteIcon } from \"@webiny/ui/List/DataList/icons/index.js\";\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            <DataListModalOverlay>\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            </DataListModalOverlay>\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={\n                <DataListModalOverlayAction data-testid={\"default-data-list.filter\"} />\n            }\n        >\n            {({ data }: { data: Role[] }) => (\n                <ScrollList data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <ListItem key={item.id} selected={item.id === activeId}>\n                            <ListItemText\n                                onClick={() => {\n                                    goToRoute(Routes.Roles.List, { id: item.id });\n                                }}\n                            >\n                                <ListItemTextPrimary>{item.name}</ListItemTextPrimary>\n                                <ListItemTextSecondary>{item.description}</ListItemTextSecondary>\n                            </ListItemText>\n\n                            <ListItemMeta>\n                                <ListActions>\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                                </ListActions>\n                            </ListItemMeta>\n                        </ListItem>\n                    ))}\n                </ScrollList>\n            )}\n        </DataList>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"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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"}