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

package/plugins/permissionRenderer/SecurityPermissions.js

@@ -0,0 +1,176 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+
+import React, { Fragment, useCallback, useMemo } from "react";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import { i18n } from "@webiny/app/i18n";
+import { PermissionInfo, gridNoPaddingClass } from "@webiny/app-admin/components/Permissions";
+import { Form } from "@webiny/form";
+import { Elevation } from "@webiny/ui/Elevation";
+import { Typography } from "@webiny/ui/Typography";
+var t = i18n.ns("app-security-admin-users/plugins/permissionRenderer");
+var SECURITY = "security";
+var SECURITY_FULL_ACCESS = "".concat(SECURITY, ".*");
+var SECURITY_GROUP_ACCESS = "".concat(SECURITY, ".group");
+var SECURITY_API_KEY_ACCESS = "".concat(SECURITY, ".apiKey");
+var FULL_ACCESS = "full";
+var NO_ACCESS = "no";
+var CUSTOM_ACCESS = "custom";
+export var SecurityPermissions = function SecurityPermissions(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange;
+  var onFormChange = useCallback(function (data) {
+    var newValue = [];
+
+    if (Array.isArray(value)) {
+      // Let's just filter out the `security*` permission objects, it's easier to build new ones from scratch.
+      newValue = value.filter(function (item) {
+        return !item.name.startsWith(SECURITY);
+      });
+    }
+
+    var permissions = [];
+
+    if (data.accessLevel === FULL_ACCESS) {
+      permissions.push({
+        name: SECURITY_FULL_ACCESS
+      });
+    } else if (data.accessLevel === CUSTOM_ACCESS) {
+      if (data.groupAccessScope === FULL_ACCESS) {
+        permissions.push({
+          name: SECURITY_GROUP_ACCESS
+        });
+      }
+
+      if (data.apiKeyAccessScope === FULL_ACCESS) {
+        permissions.push({
+          name: SECURITY_API_KEY_ACCESS
+        });
+      }
+    }
+
+    if (permissions && permissions.length) {
+      var _newValue;
+
+      (_newValue = newValue).push.apply(_newValue, permissions);
+    }
+
+    onChange(newValue);
+  }, [value]);
+  var formData = useMemo(function () {
+    if (!Array.isArray(value)) {
+      return {
+        accessLevel: NO_ACCESS
+      };
+    }
+
+    var hasFullAccess = value.find(function (item) {
+      return item.name === SECURITY_FULL_ACCESS || item.name === "*";
+    });
+
+    if (hasFullAccess) {
+      return {
+        accessLevel: FULL_ACCESS
+      };
+    }
+
+    var permissions = value.filter(function (item) {
+      return item.name.startsWith(SECURITY);
+    });
+
+    if (permissions.length === 0) {
+      return {
+        accessLevel: NO_ACCESS
+      };
+    }
+
+    var data = {
+      accessLevel: CUSTOM_ACCESS,
+      groupAccessScope: NO_ACCESS,
+      apiKeyAccessScope: NO_ACCESS
+    };
+    var hasGroupAccess = permissions.find(function (item) {
+      return item.name === SECURITY_GROUP_ACCESS;
+    });
+
+    if (hasGroupAccess) {
+      data.groupAccessScope = FULL_ACCESS;
+    }
+
+    var hasApiKeyAccess = permissions.find(function (item) {
+      return item.name === SECURITY_API_KEY_ACCESS;
+    });
+
+    if (hasApiKeyAccess) {
+      data.apiKeyAccessScope = FULL_ACCESS;
+    }
+
+    return data;
+  }, []);
+  return /*#__PURE__*/React.createElement(Form, {
+    data: formData,
+    onChange: onFormChange
+  }, function (_ref2) {
+    var data = _ref2.data,
+        Bind = _ref2.Bind;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+      className: gridNoPaddingClass
+    }, /*#__PURE__*/React.createElement(Cell, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(PermissionInfo, {
+      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Access Level"])))
+    })), /*#__PURE__*/React.createElement(Cell, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "accessLevel"
+    }, /*#__PURE__*/React.createElement(Select, {
+      label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Access Level"])))
+    }, /*#__PURE__*/React.createElement("option", {
+      value: NO_ACCESS
+    }, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["No access"])))), /*#__PURE__*/React.createElement("option", {
+      value: FULL_ACCESS
+    }, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Full access"])))), /*#__PURE__*/React.createElement("option", {
+      value: CUSTOM_ACCESS
+    }, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Custom access"])))))))), data.accessLevel === CUSTOM_ACCESS && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Elevation, {
+      z: 1,
+      style: {
+        marginTop: 10
+      }
+    }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "overline"
+    }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["API Keys"]))))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "apiKeyAccessScope"
+    }, /*#__PURE__*/React.createElement(Select, {
+      label: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Access Scope"])))
+    }, /*#__PURE__*/React.createElement("option", {
+      value: NO_ACCESS
+    }, t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["No access"])))), /*#__PURE__*/React.createElement("option", {
+      value: FULL_ACCESS
+    }, t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Full access"]))))))))), /*#__PURE__*/React.createElement(Elevation, {
+      z: 1,
+      style: {
+        marginTop: 10
+      }
+    }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Typography, {
+      use: "overline"
+    }, t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Groups"]))))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "groupAccessScope"
+    }, /*#__PURE__*/React.createElement(Select, {
+      label: t(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["Access Scope"])))
+    }, /*#__PURE__*/React.createElement("option", {
+      value: NO_ACCESS
+    }, t(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["No access"])))), /*#__PURE__*/React.createElement("option", {
+      value: FULL_ACCESS
+    }, t(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["Full access"])))))))))));
+  });
+};

package/plugins/permissionRenderer/index.d.ts

@@ -0,0 +1,3 @@
+import { PermissionRendererPlugin } from "@webiny/app-admin/plugins/PermissionRendererPlugin";
+declare const _default: PermissionRendererPlugin;
+export default _default;

package/plugins/permissionRenderer/index.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import { AccordionItem } from "@webiny/ui/Accordion";
+import { ReactComponent as SecurityIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/baseline-security-24px.svg";
+import { SecurityPermissions } from "./SecurityPermissions";
+import { PermissionRendererPlugin } from "@webiny/app-admin/plugins/PermissionRendererPlugin";
+var t = i18n.ns("app-security-admin-users/plugins/permissionRenderer");
+export default new PermissionRendererPlugin({
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement(AccordionItem, {
+      icon: /*#__PURE__*/React.createElement(SecurityIcon, null),
+      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Security"]))),
+      description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Manage Security app access permissions."]))),
+      "data-testid": "permission.security"
+    }, /*#__PURE__*/React.createElement(SecurityPermissions, props));
+  }
+});

package/plugins/routes.d.ts

@@ -0,0 +1,3 @@
+import { RoutePlugin } from "@webiny/app/types";
+declare const plugins: RoutePlugin[];
+export default plugins;

package/plugins/routes.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Helmet from "react-helmet";
+import { Route } from "@webiny/react-router";
+import { AdminLayout } from "@webiny/app-admin/components/AdminLayout";
+import { SecureRoute } from "@webiny/app-security/components";
+import { Groups } from "../ui/views/Groups";
+import { ApiKeys } from "../ui/views/ApiKeys";
+import { Permission } from "./constants";
+var plugins = [{
+  name: "route-security-groups",
+  type: "route",
+  route: /*#__PURE__*/React.createElement(Route, {
+    exact: true,
+    path: "/access-management/groups",
+    render: function render() {
+      return /*#__PURE__*/React.createElement(SecureRoute, {
+        permission: Permission.Groups
+      }, /*#__PURE__*/React.createElement(AdminLayout, null, /*#__PURE__*/React.createElement(Helmet, {
+        title: "Access Management - Groups"
+      }), /*#__PURE__*/React.createElement(Groups, null)));
+    }
+  })
+}, {
+  name: "route-security-api-keys",
+  type: "route",
+  route: /*#__PURE__*/React.createElement(Route, {
+    exact: true,
+    path: "/access-management/api-keys",
+    render: function render() {
+      return /*#__PURE__*/React.createElement(SecureRoute, {
+        permission: Permission.ApiKeys
+      }, /*#__PURE__*/React.createElement(AdminLayout, {
+        title: "Access Management - API Keys"
+      }, /*#__PURE__*/React.createElement(ApiKeys, null)));
+    }
+  })
+}];
+export default plugins;

package/plugins/secureRouteError.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Plugin } from "@webiny/plugins/types";
+declare type SecureRouteErrorPlugin = Plugin & {
+    render: () => React.ReactNode;
+};
+declare const plugin: SecureRouteErrorPlugin;
+export default plugin;

package/plugins/secureRouteError.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { NotAuthorizedError } from "../components/NotAuthorizedError";
+var plugin = {
+  type: "secure-route-error",
+  name: "secure-route-error",
+  render: function render() {
+    return /*#__PURE__*/React.createElement(NotAuthorizedError, null);
+  }
+};
+export default plugin;

package/ui/elements/GroupAutocompleteElement.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { InputElement } from "@webiny/app-admin/ui/elements/form/InputElement";
+export declare class GroupAutocompleteElement extends InputElement {
+    render({ formProps }: any): React.ReactElement;
+}

package/ui/elements/GroupAutocompleteElement.js

@@ -0,0 +1,35 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { InputElement } from "@webiny/app-admin/ui/elements/form/InputElement";
+import { GroupAutocomplete } from "../../components/GroupAutocomplete";
+export var GroupAutocompleteElement = /*#__PURE__*/function (_InputElement) {
+  _inherits(GroupAutocompleteElement, _InputElement);
+
+  var _super = _createSuper(GroupAutocompleteElement);
+
+  function GroupAutocompleteElement() {
+    _classCallCheck(this, GroupAutocompleteElement);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(GroupAutocompleteElement, [{
+    key: "render",
+    value: function render(_ref) {
+      var formProps = _ref.formProps;
+      var _ref2 = formProps,
+          Bind = _ref2.Bind;
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: this.id,
+        validators: this.config.validators
+      }, /*#__PURE__*/React.createElement(GroupAutocomplete, {
+        label: "Group"
+      }));
+    }
+  }]);
+
+  return GroupAutocompleteElement;
+}(InputElement);

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ApiKeyForm: () => JSX.Element;
+export default ApiKeyForm;

package/ui/views/ApiKeys/ApiKeyForm.js

@@ -0,0 +1,244 @@
+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 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 { ButtonDefault, ButtonIcon, ButtonPrimary, CopyButton } from "@webiny/ui/Button";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+import { Permissions } from "@webiny/app-admin/components/Permissions";
+import { validation } from "@webiny/validation";
+import { SimpleForm, SimpleFormFooter, SimpleFormContent, SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
+import { Typography } from "@webiny/ui/Typography";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { pickDataForAPI } from "./utils";
+import * as GQL 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";
+import styled from "@emotion/styled";
+var t = i18n.ns("app-security-admin-users/admin/api-keys/form");
+var ButtonWrapper = /*#__PURE__*/styled("div", {
+  target: "e18bg2x40",
+  label: "ButtonWrapper"
+})({
+  display: "flex",
+  justifyContent: "space-between"
+});
+
+var ApiKeyForm = function ApiKeyForm() {
+  var _useRouter = useRouter(),
+      location = _useRouter.location,
+      history = _useRouter.history;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var newEntry = new URLSearchParams(location.search).get("new") === "true";
+  var id = new URLSearchParams(location.search).get("id");
+  var getQuery = useQuery(GQL.READ_API_KEY, {
+    variables: {
+      id: id
+    },
+    skip: !id,
+    onCompleted: function onCompleted(data) {
+      if (!data) {
+        return;
+      }
+
+      var error = data.security.apiKey.error;
+
+      if (error) {
+        history.push("/access-management/api-keys");
+        showSnackbar(error.message);
+      }
+    }
+  });
+
+  var _useMutation = useMutation(GQL.CREATE_API_KEY, {
+    refetchQueries: [{
+      query: GQL.LIST_API_KEYS
+    }]
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 2),
+      create = _useMutation2[0],
+      createMutation = _useMutation2[1];
+
+  var _useMutation3 = useMutation(GQL.UPDATE_API_KEY, {
+    refetchQueries: [{
+      query: GQL.LIST_API_KEYS
+    }]
+  }),
+      _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, error, id;
+
+      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: pickDataForAPI(data)
+                }
+              }] : [create, {
+                variables: {
+                  data: pickDataForAPI(data)
+                }
+              }], _ref3 = _slicedToArray(_ref2, 2), operation = _ref3[0], args = _ref3[1];
+              _context.next = 7;
+              return operation(args);
+
+            case 7:
+              response = _context.sent;
+              error = response.data.security.apiKey.error;
+
+              if (!error) {
+                _context.next = 11;
+                break;
+              }
+
+              return _context.abrupt("return", showSnackbar(error.message));
+
+            case 11:
+              id = response.data.security.apiKey.data.id;
+              !isUpdate && history.push("/access-management/api-keys?id=".concat(id));
+              showSnackbar(t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["API key saved successfully."]))));
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [id]);
+  var data = get(getQuery, "data.security.apiKey.data", {});
+  var showEmptyView = !newEntry && !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 API key details or create a..."]))),
+      action: /*#__PURE__*/React.createElement(ButtonDefault, {
+        "data-testid": "new-record-button",
+        onClick: function onClick() {
+          return history.push("/access-management/api-keys?new=true");
+        }
+      }, /*#__PURE__*/React.createElement(ButtonIcon, {
+        icon: /*#__PURE__*/React.createElement(AddIcon, null)
+      }), " ", t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["New API Key"]))))
+    });
+  }
+
+  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: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "name",
+      validators: validation.create("required")
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Name"])))
+    })))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "description",
+      validators: validation.create("required")
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Description"]))),
+      rows: 4
+    })))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+      use: "subtitle1"
+    }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Token"])))), data.token ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: "var(--mdc-theme-background)",
+        padding: "8px",
+        paddingLeft: "16px"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        lineHeight: "48px",
+        verticalAlign: "middle"
+      }
+    }, data.token), /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: "absolute",
+        right: "32px"
+      }
+    }, /*#__PURE__*/React.createElement(CopyButton, {
+      value: data.token,
+      onCopy: function onCopy() {
+        return showSnackbar("Successfully copied!");
+      }
+    }))) : /*#__PURE__*/React.createElement(FormElementMessage, null, "Your token will be shown once you submit the form.")))), /*#__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));
+    })))), /*#__PURE__*/React.createElement(SimpleFormFooter, null, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonDefault, {
+      onClick: function onClick() {
+        return history.push("/access-management/api-keys");
+      }
+    }, t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(ButtonPrimary, {
+      onClick: form.submit
+    }, t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Save API key"])))))));
+  });
+};
+
+export default ApiKeyForm;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ApiKeys: ({ formProps, listProps }: any) => JSX.Element;
+export default ApiKeys;

package/ui/views/ApiKeys/ApiKeys.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
+import ApiKeysDataList from "./ApiKeysDataList";
+import ApiKeyForm from "./ApiKeyForm";
+
+var ApiKeys = function ApiKeys(_ref) {
+  var formProps = _ref.formProps,
+      listProps = _ref.listProps;
+  return /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, null, /*#__PURE__*/React.createElement(ApiKeysDataList, listProps)), /*#__PURE__*/React.createElement(RightPanel, null, /*#__PURE__*/React.createElement(ApiKeyForm, formProps)));
+};
+
+export default ApiKeys;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ApiKeysDataList: () => JSX.Element;
+export default ApiKeysDataList;