@webiny/app-security-access-management 5.34.8 → 5.35.0-beta.1

package/ui/views/Groups/GroupsDataList.js

@@ -1,62 +1,35 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GroupsDataList = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _orderBy = _interopRequireDefault(require("lodash/orderBy"));
-
 var _i18n = require("@webiny/app/i18n");
-
 var _List = require("@webiny/ui/List");
-
 var _icons = require("@webiny/ui/List/DataList/icons");
-
 var _reactRouter = require("@webiny/react-router");
-
 var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
-
 var _reactHooks = require("@apollo/react-hooks");
-
 var _useConfirmationDialog = require("@webiny/app-admin/hooks/useConfirmationDialog");
-
 var _graphql = require("./graphql");
-
 var _Tooltip = require("@webiny/ui/Tooltip");
-
 var _Button = require("@webiny/ui/Button");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _Select = require("@webiny/ui/Select");
-
 var _SearchUI = _interopRequireDefault(require("@webiny/app-admin/components/SearchUI"));
-
 var _add18px = require("@webiny/app-admin/assets/icons/add-18px.svg");
-
 var _filter24px = require("@webiny/app-admin/assets/icons/filter-24px.svg");
-
 var _utils = require("../utils");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
 var t = _i18n.i18n.ns("app-security/admin/groups/data-list");
-
 var SORTERS = [{
   label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Newest to oldest"]))),
   sorter: "createdOn_DESC"
@@ -70,101 +43,82 @@ var SORTERS = [{
   label: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Name Z-A"]))),
   sorter: "name_DESC"
 }];
-
 var GroupsDataList = function GroupsDataList() {
   var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    filter = _useState2[0],
+    setFilter = _useState2[1];
   var _useState3 = (0, _react.useState)(SORTERS[0].sorter),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      sort = _useState4[0],
-      setSort = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    sort = _useState4[0],
+    setSort = _useState4[1];
   var _useRouter = (0, _reactRouter.useRouter)(),
-      history = _useRouter.history,
-      location = _useRouter.location;
-
+    history = _useRouter.history,
+    location = _useRouter.location;
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
+    showSnackbar = _useSnackbar.showSnackbar;
   var _useConfirmationDialo = (0, _useConfirmationDialog.useConfirmationDialog)({
-    dataTestId: "default-data-list.delete-dialog"
-  }),
-      showConfirmation = _useConfirmationDialo.showConfirmation;
-
+      dataTestId: "default-data-list.delete-dialog"
+    }),
+    showConfirmation = _useConfirmationDialo.showConfirmation;
   var _useQuery = (0, _reactHooks.useQuery)(_graphql.LIST_GROUPS),
-      listResponse = _useQuery.data,
-      listLoading = _useQuery.loading;
-
+    listResponse = _useQuery.data,
+    listLoading = _useQuery.loading;
   var _useMutation = (0, _reactHooks.useMutation)(_graphql.DELETE_GROUP, {
-    refetchQueries: [{
-      query: _graphql.LIST_GROUPS
-    }]
-  }),
-      _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 2),
-      deleteIt = _useMutation2[0],
-      deleteLoading = _useMutation2[1].loading;
-
+      refetchQueries: [{
+        query: _graphql.LIST_GROUPS
+      }]
+    }),
+    _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 2),
+    deleteIt = _useMutation2[0],
+    deleteLoading = _useMutation2[1].loading;
   var data = listLoading && !listResponse ? [] : listResponse.security.groups.data;
   var id = new URLSearchParams(location.search).get("id");
   var filterGroup = (0, _react.useCallback)(function (_ref) {
     var name = _ref.name,
-        slug = _ref.slug,
-        description = _ref.description;
+      slug = _ref.slug,
+      description = _ref.description;
     return name.toLowerCase().includes(filter) || slug.toLowerCase().includes(filter) || description && description.toLowerCase().includes(filter);
   }, [filter]);
   var sortGroups = (0, _react.useCallback)(function (groups) {
     if (!sort) {
       return groups;
     }
-
     var _deserializeSorters = (0, _utils.deserializeSorters)(sort),
-        _deserializeSorters2 = (0, _slicedToArray2.default)(_deserializeSorters, 2),
-        key = _deserializeSorters2[0],
-        sortBy = _deserializeSorters2[1];
-
+      _deserializeSorters2 = (0, _slicedToArray2.default)(_deserializeSorters, 2),
+      key = _deserializeSorters2[0],
+      sortBy = _deserializeSorters2[1];
     return (0, _orderBy.default)(groups, [key], [sortBy]);
   }, [sort]);
   var deleteItem = (0, _react.useCallback)(function (item) {
     showConfirmation( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
       var _yield$deleteIt, data, error;
-
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return deleteIt({
-                variables: item
-              });
-
-            case 2:
-              _yield$deleteIt = _context.sent;
-              data = _yield$deleteIt.data;
-              error = data.security.deleteGroup.error;
-
-              if (!error) {
-                _context.next = 7;
-                break;
-              }
-
-              return _context.abrupt("return", showSnackbar(error.message));
-
-            case 7:
-              showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Group \"{slug}\" deleted."])))({
-                slug: item.slug
-              }));
-
-              if (id === item.id) {
-                history.push("/access-management/groups");
-              }
-
-            case 9:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return deleteIt({
+              variables: item
+            });
+          case 2:
+            _yield$deleteIt = _context.sent;
+            data = _yield$deleteIt.data;
+            error = data.security.deleteGroup.error;
+            if (!error) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return", showSnackbar(error.message));
+          case 7:
+            showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Group \"{slug}\" deleted."])))({
+              slug: item.slug
+            }));
+            if (id === item.id) {
+              history.push("/access-management/groups");
+            }
+          case 9:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     })));
@@ -178,7 +132,7 @@ var GroupsDataList = function GroupsDataList() {
       label: t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Sort by"])))
     }, SORTERS.map(function (_ref3) {
       var label = _ref3.label,
-          sorter = _ref3.sorter;
+        sorter = _ref3.sorter;
       return /*#__PURE__*/_react.default.createElement("option", {
         key: label,
         value: sorter
@@ -235,5 +189,4 @@ var GroupsDataList = function GroupsDataList() {
     }));
   });
 };
-
 exports.GroupsDataList = GroupsDataList;

package/ui/views/Groups/GroupsDataList.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","SORTERS","label","sorter","GroupsDataList","useState","filter","setFilter","sort","setSort","useRouter","history","location","useSnackbar","showSnackbar","useConfirmationDialog","dataTestId","showConfirmation","useQuery","LIST_GROUPS","listResponse","data","listLoading","loading","useMutation","DELETE_GROUP","refetchQueries","query","deleteIt","deleteLoading","security","groups","id","URLSearchParams","search","get","filterGroup","useCallback","name","slug","description","toLowerCase","includes","sortGroups","deserializeSorters","key","sortBy","orderBy","deleteItem","item","variables","error","deleteGroup","message","push","groupsDataListModalOverlay","useMemo","map","filteredData","groupList","system"],"sources":["GroupsDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport orderBy from \"lodash/orderBy\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    DataList,\n    ScrollList,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListActions,\n    DataListModalOverlayAction,\n    DataListModalOverlay\n} from \"@webiny/ui/List\";\nimport { DeleteIcon } from \"@webiny/ui/List/DataList/icons\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport { useConfirmationDialog } from \"@webiny/app-admin/hooks/useConfirmationDialog\";\nimport { LIST_GROUPS, DELETE_GROUP } from \"./graphql\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { ButtonIcon, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport { ReactComponent as FilterIcon } from \"@webiny/app-admin/assets/icons/filter-24px.svg\";\nimport { deserializeSorters } from \"../utils\";\nimport { Group } from \"~/types\";\n\nconst t = i18n.ns(\"app-security/admin/groups/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 GroupsDataListProps {\n    // TODO @ts-refactor delete and go up the tree and sort it out\n    [key: string]: any;\n}\nexport const GroupsDataList: React.FC<GroupsDataListProps> = () => {\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState(SORTERS[0].sorter);\n    const { history, location } = 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(LIST_GROUPS);\n\n    const [deleteIt, { loading: deleteLoading }] = useMutation(DELETE_GROUP, {\n        refetchQueries: [{ query: LIST_GROUPS }]\n    });\n\n    const data = listLoading && !listResponse ? [] : listResponse.security.groups.data;\n    const id = new URLSearchParams(location.search).get(\"id\");\n\n    const filterGroup = useCallback(\n        ({ name, slug, description }) => {\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 sortGroups = useCallback(\n        groups => {\n            if (!sort) {\n                return groups;\n            }\n            const [key, sortBy] = deserializeSorters(sort);\n            return orderBy(groups, [key], [sortBy]);\n        },\n        [sort]\n    );\n\n    const deleteItem = useCallback(\n        item => {\n            showConfirmation(async () => {\n                const { data } = await deleteIt({\n                    variables: item\n                });\n\n                const { error } = data.security.deleteGroup;\n                if (error) {\n                    return showSnackbar(error.message);\n                }\n\n                showSnackbar(t`Group \"{slug}\" deleted.`({ slug: item.slug }));\n\n                if (id === item.id) {\n                    history.push(`/access-management/groups`);\n                }\n            });\n        },\n        [id]\n    );\n\n    const groupsDataListModalOverlay = useMemo(\n        () => (\n            <DataListModalOverlay>\n                <Grid>\n                    <Cell span={12}>\n                        <Select value={sort} onChange={setSort} label={t`Sort by`}>\n                            {SORTERS.map(({ label, sorter }) => {\n                                return (\n                                    <option key={label} value={sorter}>\n                                        {label}\n                                    </option>\n                                );\n                            })}\n                        </Select>\n                    </Cell>\n                </Grid>\n            </DataListModalOverlay>\n        ),\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? data : data.filter(filterGroup);\n    const groupList = sortGroups(filteredData);\n\n    return (\n        <DataList\n            title={t`Groups`}\n            actions={\n                <ButtonSecondary\n                    data-testid=\"new-record-button\"\n                    onClick={() => history.push(\"/access-management/groups?new=true\")}\n                >\n                    <ButtonIcon icon={<AddIcon />} /> {t`New Group`}\n                </ButtonSecondary>\n            }\n            data={groupList}\n            loading={listLoading || deleteLoading}\n            search={\n                <SearchUI value={filter} onChange={setFilter} inputPlaceholder={t`Search Groups`} />\n            }\n            modalOverlay={groupsDataListModalOverlay}\n            modalOverlayAction={\n                <DataListModalOverlayAction\n                    icon={<FilterIcon />}\n                    data-testid={\"default-data-list.filter\"}\n                />\n            }\n        >\n            {({ data }: { data: Group[] }) => (\n                <ScrollList data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <ListItem key={item.id} selected={item.id === id}>\n                            <ListItemText\n                                onClick={() =>\n                                    history.push(`/access-management/groups?id=${item.id}`)\n                                }\n                            >\n                                {item.name}\n                                <ListItemTextSecondary>{item.description}</ListItemTextSecondary>\n                            </ListItemText>\n\n                            <ListItemMeta>\n                                <ListActions>\n                                    {!item.system ? (\n                                        <DeleteIcon\n                                            onClick={() => deleteItem(item)}\n                                            data-testid={\"default-data-list.delete\"}\n                                        />\n                                    ) : (\n                                        <Tooltip\n                                            placement={\"bottom\"}\n                                            content={<span>{t`You can't delete this group.`}</span>}\n                                        >\n                                            <DeleteIcon disabled />\n                                        </Tooltip>\n                                    )}\n                                </ListActions>\n                            </ListItemMeta>\n                        </ListItem>\n                    ))}\n                </ScrollList>\n            )}\n        </DataList>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","SORTERS","label","sorter","GroupsDataList","useState","filter","setFilter","sort","setSort","useRouter","history","location","useSnackbar","showSnackbar","useConfirmationDialog","dataTestId","showConfirmation","useQuery","LIST_GROUPS","listResponse","data","listLoading","loading","useMutation","DELETE_GROUP","refetchQueries","query","deleteIt","deleteLoading","security","groups","id","URLSearchParams","search","get","filterGroup","useCallback","name","slug","description","toLowerCase","includes","sortGroups","deserializeSorters","key","sortBy","orderBy","deleteItem","item","variables","error","deleteGroup","message","push","groupsDataListModalOverlay","useMemo","map","filteredData","groupList","system"],"sources":["GroupsDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport orderBy from \"lodash/orderBy\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    DataList,\n    ScrollList,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListActions,\n    DataListModalOverlayAction,\n    DataListModalOverlay\n} from \"@webiny/ui/List\";\nimport { DeleteIcon } from \"@webiny/ui/List/DataList/icons\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport { useConfirmationDialog } from \"@webiny/app-admin/hooks/useConfirmationDialog\";\nimport { LIST_GROUPS, DELETE_GROUP } from \"./graphql\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { ButtonIcon, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport { ReactComponent as FilterIcon } from \"@webiny/app-admin/assets/icons/filter-24px.svg\";\nimport { deserializeSorters } from \"../utils\";\nimport { Group } from \"~/types\";\n\nconst t = i18n.ns(\"app-security/admin/groups/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 GroupsDataListProps {\n    // TODO @ts-refactor delete and go up the tree and sort it out\n    [key: string]: any;\n}\nexport const GroupsDataList: React.FC<GroupsDataListProps> = () => {\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState(SORTERS[0].sorter);\n    const { history, location } = 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(LIST_GROUPS);\n\n    const [deleteIt, { loading: deleteLoading }] = useMutation(DELETE_GROUP, {\n        refetchQueries: [{ query: LIST_GROUPS }]\n    });\n\n    const data = listLoading && !listResponse ? [] : listResponse.security.groups.data;\n    const id = new URLSearchParams(location.search).get(\"id\");\n\n    const filterGroup = useCallback(\n        ({ name, slug, description }) => {\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 sortGroups = useCallback(\n        groups => {\n            if (!sort) {\n                return groups;\n            }\n            const [key, sortBy] = deserializeSorters(sort);\n            return orderBy(groups, [key], [sortBy]);\n        },\n        [sort]\n    );\n\n    const deleteItem = useCallback(\n        item => {\n            showConfirmation(async () => {\n                const { data } = await deleteIt({\n                    variables: item\n                });\n\n                const { error } = data.security.deleteGroup;\n                if (error) {\n                    return showSnackbar(error.message);\n                }\n\n                showSnackbar(t`Group \"{slug}\" deleted.`({ slug: item.slug }));\n\n                if (id === item.id) {\n                    history.push(`/access-management/groups`);\n                }\n            });\n        },\n        [id]\n    );\n\n    const groupsDataListModalOverlay = useMemo(\n        () => (\n            <DataListModalOverlay>\n                <Grid>\n                    <Cell span={12}>\n                        <Select value={sort} onChange={setSort} label={t`Sort by`}>\n                            {SORTERS.map(({ label, sorter }) => {\n                                return (\n                                    <option key={label} value={sorter}>\n                                        {label}\n                                    </option>\n                                );\n                            })}\n                        </Select>\n                    </Cell>\n                </Grid>\n            </DataListModalOverlay>\n        ),\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? data : data.filter(filterGroup);\n    const groupList = sortGroups(filteredData);\n\n    return (\n        <DataList\n            title={t`Groups`}\n            actions={\n                <ButtonSecondary\n                    data-testid=\"new-record-button\"\n                    onClick={() => history.push(\"/access-management/groups?new=true\")}\n                >\n                    <ButtonIcon icon={<AddIcon />} /> {t`New Group`}\n                </ButtonSecondary>\n            }\n            data={groupList}\n            loading={listLoading || deleteLoading}\n            search={\n                <SearchUI value={filter} onChange={setFilter} inputPlaceholder={t`Search Groups`} />\n            }\n            modalOverlay={groupsDataListModalOverlay}\n            modalOverlayAction={\n                <DataListModalOverlayAction\n                    icon={<FilterIcon />}\n                    data-testid={\"default-data-list.filter\"}\n                />\n            }\n        >\n            {({ data }: { data: Group[] }) => (\n                <ScrollList data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <ListItem key={item.id} selected={item.id === id}>\n                            <ListItemText\n                                onClick={() =>\n                                    history.push(`/access-management/groups?id=${item.id}`)\n                                }\n                            >\n                                {item.name}\n                                <ListItemTextSecondary>{item.description}</ListItemTextSecondary>\n                            </ListItemText>\n\n                            <ListItemMeta>\n                                <ListActions>\n                                    {!item.system ? (\n                                        <DeleteIcon\n                                            onClick={() => deleteItem(item)}\n                                            data-testid={\"default-data-list.delete\"}\n                                        />\n                                    ) : (\n                                        <Tooltip\n                                            placement={\"bottom\"}\n                                            content={<span>{t`You can't delete this group.`}</span>}\n                                        >\n                                            <DeleteIcon disabled />\n                                        </Tooltip>\n                                    )}\n                                </ListActions>\n                            </ListItemMeta>\n                        </ListItem>\n                    ))}\n                </ScrollList>\n            )}\n        </DataList>\n    );\n};\n"],"mappings":"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"}

package/ui/views/Groups/GroupsForm.js

@@ -1,72 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GroupsForm = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactHooks = require("@apollo/react-hooks");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _pick = _interopRequireDefault(require("lodash/pick"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 var _reactRouter = require("@webiny/react-router");
-
 var _i18n = require("@webiny/app/i18n");
-
 var _form = require("@webiny/form");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _Input = require("@webiny/ui/Input");
-
 var _Alert = require("@webiny/ui/Alert");
-
 var _Button = require("@webiny/ui/Button");
-
 var _Progress = require("@webiny/ui/Progress");
-
 var _validation = require("@webiny/validation");
-
 var _SimpleForm = require("@webiny/app-admin/components/SimpleForm");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var _Permissions = require("@webiny/app-admin/components/Permissions");
-
 var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
-
 var _graphql = require("./graphql");
-
 var _Snackbar = require("@webiny/ui/Snackbar");
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _EmptyView = _interopRequireDefault(require("@webiny/app-admin/components/EmptyView"));
-
 var _add18px = require("@webiny/app-admin/assets/icons/add-18px.svg");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
 var t = _i18n.i18n.ns("app-security/admin/groups/form");
-
 var ButtonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "euuiyav0",
   label: "ButtonWrapper"
@@ -74,15 +42,12 @@ var ButtonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   display: "flex",
   justifyContent: "space-between"
 });
-
 var GroupsForm = function GroupsForm() {
   var _useRouter = (0, _reactRouter.useRouter)(),
-      location = _useRouter.location,
-      history = _useRouter.history;
-
+    location = _useRouter.location,
+    history = _useRouter.history;
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
+    showSnackbar = _useSnackbar.showSnackbar;
   var newGroup = new URLSearchParams(location.search).get("new") === "true";
   var id = new URLSearchParams(location.search).get("id");
   var getQuery = (0, _reactHooks.useQuery)(_graphql.READ_GROUP, {
@@ -94,105 +59,89 @@ var GroupsForm = function GroupsForm() {
       if (!data) {
         return;
       }
-
       var error = data.security.group.error;
-
       if (error) {
         history.push("/access-management/groups");
         showSnackbar(error.message);
       }
     }
   });
-
   var _useMutation = (0, _reactHooks.useMutation)(_graphql.CREATE_GROUP, {
-    refetchQueries: [{
-      query: _graphql.LIST_GROUPS
-    }]
-  }),
-      _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 2),
-      create = _useMutation2[0],
-      createMutation = _useMutation2[1];
-
+      refetchQueries: [{
+        query: _graphql.LIST_GROUPS
+      }]
+    }),
+    _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 2),
+    create = _useMutation2[0],
+    createMutation = _useMutation2[1];
   var _useMutation3 = (0, _reactHooks.useMutation)(_graphql.UPDATE_GROUP, {
-    refetchQueries: [{
-      query: _graphql.LIST_GROUPS
-    }]
-  }),
-      _useMutation4 = (0, _slicedToArray2.default)(_useMutation3, 2),
-      update = _useMutation4[0],
-      updateMutation = _useMutation4[1];
-
+      refetchQueries: [{
+        query: _graphql.LIST_GROUPS
+      }]
+    }),
+    _useMutation4 = (0, _slicedToArray2.default)(_useMutation3, 2),
+    update = _useMutation4[0],
+    updateMutation = _useMutation4[1];
   var loading = [getQuery, createMutation, updateMutation].find(function (item) {
     return item.loading;
   });
   var onSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(data) {
       var isUpdate, _ref2, _ref3, operation, args, response, _response$data$securi, group, error;
-
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!(!data.permissions || !data.permissions.length)) {
-                _context.next = 3;
-                break;
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!data.permissions || !data.permissions.length)) {
+              _context.next = 3;
+              break;
+            }
+            showSnackbar(t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["You must configure permissions before saving!"]))), {
+              timeout: 60000,
+              dismissesOnAction: true,
+              action: /*#__PURE__*/_react.default.createElement(_Snackbar.SnackbarAction, {
+                label: "OK"
+              })
+            });
+            return _context.abrupt("return");
+          case 3:
+            isUpdate = data.createdOn;
+            _ref2 = isUpdate ? [update, {
+              variables: {
+                id: data.id,
+                data: (0, _pick.default)(data, ["name", "description", "permissions"])
               }
-
-              showSnackbar(t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["You must configure permissions before saving!"]))), {
-                timeout: 60000,
-                dismissesOnAction: true,
-                action: /*#__PURE__*/_react.default.createElement(_Snackbar.SnackbarAction, {
-                  label: "OK"
-                })
-              });
-              return _context.abrupt("return");
-
-            case 3:
-              isUpdate = data.createdOn;
-              _ref2 = isUpdate ? [update, {
-                variables: {
-                  id: data.id,
-                  data: (0, _pick.default)(data, ["name", "description", "permissions"])
-                }
-              }] : [create, {
-                variables: {
-                  data: (0, _pick.default)(data, ["name", "slug", "description", "permissions"])
-                }
-              }], _ref3 = (0, _slicedToArray2.default)(_ref2, 2), operation = _ref3[0], args = _ref3[1];
-              _context.next = 7;
-              return operation(args);
-
-            case 7:
-              response = _context.sent;
-              _response$data$securi = response.data.security.group, group = _response$data$securi.data, error = _response$data$securi.error;
-
-              if (!error) {
-                _context.next = 11;
-                break;
+            }] : [create, {
+              variables: {
+                data: (0, _pick.default)(data, ["name", "slug", "description", "permissions"])
               }
-
-              return _context.abrupt("return", showSnackbar(error.message));
-
-            case 11:
-              !isUpdate && history.push("/access-management/groups?id=".concat(group.id));
-              showSnackbar(t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Group saved successfully!"]))));
-
-            case 13:
-            case "end":
-              return _context.stop();
-          }
+            }], _ref3 = (0, _slicedToArray2.default)(_ref2, 2), operation = _ref3[0], args = _ref3[1];
+            _context.next = 7;
+            return operation(args);
+          case 7:
+            response = _context.sent;
+            _response$data$securi = response.data.security.group, group = _response$data$securi.data, error = _response$data$securi.error;
+            if (!error) {
+              _context.next = 11;
+              break;
+            }
+            return _context.abrupt("return", showSnackbar(error.message));
+          case 11:
+            !isUpdate && history.push("/access-management/groups?id=".concat(group.id));
+            showSnackbar(t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Group saved successfully!"]))));
+          case 13:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
-
     return function (_x) {
       return _ref.apply(this, arguments);
     };
   }(), [id]);
   var data = loading ? {} : (0, _get.default)(getQuery, "data.security.group.data", {});
   var systemGroup = data.slug === "full-access";
-  var showEmptyView = !newGroup && !loading && (0, _isEmpty.default)(data); // Render "No content" selected view.
-
+  var showEmptyView = !newGroup && !loading && (0, _isEmpty.default)(data);
+  // Render "No content" selected view.
   if (showEmptyView) {
     return /*#__PURE__*/_react.default.createElement(_EmptyView.default, {
       title: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Click on the left side list to display group details or create a..."]))),
@@ -206,14 +155,13 @@ var GroupsForm = function GroupsForm() {
       }), t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["New Group"]))))
     });
   }
-
   return /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: data,
     onSubmit: onSubmit
   }, function (_ref4) {
     var data = _ref4.data,
-        form = _ref4.form,
-        Bind = _ref4.Bind;
+      form = _ref4.form,
+      Bind = _ref4.Bind;
     return /*#__PURE__*/_react.default.createElement(_SimpleForm.SimpleForm, null, loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null), /*#__PURE__*/_react.default.createElement(_SimpleForm.SimpleFormHeader, {
       title: data.name ? data.name : "Untitled"
     }), /*#__PURE__*/_react.default.createElement(_SimpleForm.SimpleFormContent, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
@@ -274,5 +222,4 @@ var GroupsForm = function GroupsForm() {
     }, t(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["Save group"])))))));
   });
 };
-
 exports.GroupsForm = GroupsForm;