@webiny/app-security-access-management 0.0.0-mt-1

package/ui/views/Groups/GroupsForm.js

@@ -0,0 +1,234 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback } from "react";
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import styled from "@emotion/styled";
+import pick from "lodash/pick";
+import get from "lodash/get";
+import { useRouter } from "@webiny/react-router";
+import { i18n } from "@webiny/app/i18n";
+import { Form } from "@webiny/form";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Input } from "@webiny/ui/Input";
+import { Alert } from "@webiny/ui/Alert";
+import { ButtonDefault, ButtonIcon, ButtonPrimary } from "@webiny/ui/Button";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { validation } from "@webiny/validation";
+import { SimpleForm, SimpleFormFooter, SimpleFormContent, SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
+import { Typography } from "@webiny/ui/Typography";
+import { Permissions } from "@webiny/app-admin/components/Permissions";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { CREATE_GROUP, LIST_GROUPS, READ_GROUP, UPDATE_GROUP } from "./graphql";
+import { SnackbarAction } from "@webiny/ui/Snackbar";
+import isEmpty from "lodash/isEmpty";
+import EmptyView from "@webiny/app-admin/components/EmptyView";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+var t = i18n.ns("app-security/admin/groups/form");
+var ButtonWrapper = /*#__PURE__*/styled("div", {
+  target: "euuiyav0",
+  label: "ButtonWrapper"
+})({
+  display: "flex",
+  justifyContent: "space-between"
+});
+
+var GroupForm = function GroupForm() {
+  var _useRouter = useRouter(),
+      location = _useRouter.location,
+      history = _useRouter.history;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var newGroup = new URLSearchParams(location.search).get("new") === "true";
+  var id = new URLSearchParams(location.search).get("id");
+  var getQuery = useQuery(READ_GROUP, {
+    variables: {
+      id: id
+    },
+    skip: !id,
+    onCompleted: function onCompleted(data) {
+      if (!data) {
+        return;
+      }
+
+      var error = data.security.group.error;
+
+      if (error) {
+        history.push("/access-management/groups");
+        showSnackbar(error.message);
+      }
+    }
+  });
+
+  var _useMutation = useMutation(CREATE_GROUP, {
+    refetchQueries: [{
+      query: LIST_GROUPS
+    }]
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 2),
+      create = _useMutation2[0],
+      createMutation = _useMutation2[1];
+
+  var _useMutation3 = useMutation(UPDATE_GROUP, {
+    refetchQueries: [{
+      query: LIST_GROUPS
+    }]
+  }),
+      _useMutation4 = _slicedToArray(_useMutation3, 2),
+      update = _useMutation4[0],
+      updateMutation = _useMutation4[1];
+
+  var loading = [getQuery, createMutation, updateMutation].find(function (item) {
+    return item.loading;
+  });
+  var onSubmit = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
+      var isUpdate, _ref2, _ref3, operation, args, response, _response$data$securi, group, error;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(!data.permissions || !data.permissions.length)) {
+                _context.next = 3;
+                break;
+              }
+
+              showSnackbar(t(_templateObject || (_templateObject = _taggedTemplateLiteral(["You must configure permissions before saving!"]))), {
+                timeout: 60000,
+                dismissesOnAction: true,
+                action: /*#__PURE__*/React.createElement(SnackbarAction, {
+                  label: "OK"
+                })
+              });
+              return _context.abrupt("return");
+
+            case 3:
+              isUpdate = data.createdOn;
+              _ref2 = isUpdate ? [update, {
+                variables: {
+                  id: data.id,
+                  data: pick(data, ["name", "description", "permissions"])
+                }
+              }] : [create, {
+                variables: {
+                  data: pick(data, ["name", "slug", "description", "permissions"])
+                }
+              }], _ref3 = _slicedToArray(_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 = _taggedTemplateLiteral(["Group saved successfully!"]))));
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [id]);
+  var data = loading ? {} : get(getQuery, "data.security.group.data", {});
+  var systemGroup = data.slug === "full-access";
+  var showEmptyView = !newGroup && !loading && isEmpty(data); // Render "No content" selected view.
+
+  if (showEmptyView) {
+    return /*#__PURE__*/React.createElement(EmptyView, {
+      title: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Click on the left side list to display group details or create a..."]))),
+      action: /*#__PURE__*/React.createElement(ButtonDefault, {
+        "data-testid": "new-record-button",
+        onClick: function onClick() {
+          return history.push("/access-management/groups?new=true");
+        }
+      }, /*#__PURE__*/React.createElement(ButtonIcon, {
+        icon: /*#__PURE__*/React.createElement(AddIcon, null)
+      }), t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["New Group"]))))
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Form, {
+    data: data,
+    onSubmit: onSubmit
+  }, function (_ref4) {
+    var data = _ref4.data,
+        form = _ref4.form,
+        Bind = _ref4.Bind;
+    return /*#__PURE__*/React.createElement(SimpleForm, null, loading && /*#__PURE__*/React.createElement(CircularProgress, null), /*#__PURE__*/React.createElement(SimpleFormHeader, {
+      title: data.name ? data.name : "Untitled"
+    }), /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "name",
+      validators: validation.create("required,minLength:3")
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Name"]))),
+      disabled: systemGroup
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "slug",
+      validators: validation.create("required,minLength:3")
+    }, /*#__PURE__*/React.createElement(Input, {
+      disabled: Boolean(data.id),
+      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Slug"])))
+    })))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "description",
+      validators: validation.create("maxLength:500")
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Description"]))),
+      rows: 3,
+      disabled: systemGroup
+    })))), systemGroup && /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Alert, {
+      type: "info",
+      title: "Permissions are locked"
+    }, "This is a protected system group and you can't modify its permissions."))), !systemGroup && /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "subtitle1"
+    }, t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Permissions"]))))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "permissions",
+      defaultValue: []
+    }, function (bind) {
+      return /*#__PURE__*/React.createElement(Permissions, Object.assign({
+        id: data.id || "new"
+      }, bind));
+    })))), systemGroup ? null : /*#__PURE__*/React.createElement(SimpleFormFooter, null, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonDefault, {
+      onClick: function onClick() {
+        return history.push("/access-management/groups");
+      }
+    }, t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(ButtonPrimary, {
+      onClick: form.submit
+    }, t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Save group"])))))));
+  });
+};
+
+export default GroupForm;

package/ui/views/Groups/graphql.d.ts

@@ -0,0 +1,5 @@
+export declare const LIST_GROUPS: any;
+export declare const READ_GROUP: any;
+export declare const CREATE_GROUP: any;
+export declare const UPDATE_GROUP: any;
+export declare const DELETE_GROUP: any;

package/ui/views/Groups/graphql.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import gql from "graphql-tag";
+var fields = "\n    id\n    name\n    slug\n    description\n    permissions\n    createdOn\n";
+export var LIST_GROUPS = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    query listGroups {\n        security {\n            groups: listGroups {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n            }\n        }\n    }\n"])));
+export var READ_GROUP = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    query getGroup($id: ID!) {\n        security {\n            group: getGroup(where: { id: $id }){\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n"])), fields);
+export var CREATE_GROUP = gql(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    mutation createGroup($data: SecurityGroupCreateInput!){\n        security {\n            group: createGroup(data: $data) {\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n"])), fields);
+export var UPDATE_GROUP = gql(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    mutation updateGroup($id: ID!, $data: SecurityGroupUpdateInput!){\n        security {\n            group: updateGroup(id: $id, data: $data) {\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n"])), fields);
+export var DELETE_GROUP = gql(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    mutation deleteGroup($id: ID!) {\n        security {\n            deleteGroup(id: $id) {\n                data\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n"])));

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

@@ -0,0 +1 @@
+export { default as Groups } from "./Groups";

package/ui/views/Groups/index.js

@@ -0,0 +1 @@
+export { default as Groups } from "./Groups";

package/ui/views/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const serializeSorters: (data: any) => any;
+export declare const deserializeSorters: (data: string) => Record<string, "asc" | "desc" | boolean>;

package/ui/views/utils.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export var serializeSorters = function serializeSorters(data) {
+  if (!data) {
+    return data;
+  }
+
+  var _Object$entries = Object.entries(data),
+      _Object$entries2 = _slicedToArray(_Object$entries, 1),
+      _Object$entries2$ = _slicedToArray(_Object$entries2[0], 2),
+      key = _Object$entries2$[0],
+      value = _Object$entries2$[1];
+
+  return "".concat(key, ":").concat(value);
+};
+export var deserializeSorters = function deserializeSorters(data) {
+  if (typeof data !== "string") {
+    return data;
+  }
+
+  var _ref = data.split(":"),
+      _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+
+  return _defineProperty({}, key, value);
+};