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

package/ui/views/ApiKeys/ApiKeysDataList.js

@@ -0,0 +1,209 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useMemo, useState } from "react";
+import orderBy from "lodash/orderBy";
+import { i18n } from "@webiny/app/i18n";
+import { DataList, ScrollList, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListActions, DataListModalOverlayAction, DataListModalOverlay } from "@webiny/ui/List";
+import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
+import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import { useRouter } from "@webiny/react-router";
+import SearchUI from "@webiny/app-admin/components/SearchUI";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { useQuery, useMutation } from "@apollo/react-hooks";
+import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
+import * as GQL from "./graphql";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+import { ReactComponent as FilterIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/filter-24px.svg";
+import { serializeSorters, deserializeSorters } from "../utils";
+var t = i18n.ns("app-security/admin/groups/data-list");
+var SORTERS = [{
+  label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Newest to oldest"]))),
+  sorters: {
+    createdOn: "desc"
+  }
+}, {
+  label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Oldest to newest"]))),
+  sorters: {
+    createdOn: "asc"
+  }
+}, {
+  label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Name A-Z"]))),
+  sorters: {
+    name: "asc"
+  }
+}, {
+  label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Name Z-A"]))),
+  sorters: {
+    name: "desc"
+  }
+}];
+
+var ApiKeysDataList = function ApiKeysDataList() {
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = useState(serializeSorters(SORTERS[0].sorters)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sort = _useState4[0],
+      setSort = _useState4[1];
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history,
+      location = _useRouter.location;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useConfirmationDialo = useConfirmationDialog({
+    dataTestId: "default-data-list.delete-dialog"
+  }),
+      showConfirmation = _useConfirmationDialo.showConfirmation;
+
+  var filterAPIKey = useCallback(function (_ref) {
+    var description = _ref.description,
+        name = _ref.name;
+    return description && description.toLowerCase().includes(filter) || name.toLowerCase().includes(filter);
+  }, [filter]);
+  var sortKeys = useCallback(function (list) {
+    if (!sort) {
+      return list;
+    }
+
+    var _Object$entries = Object.entries(deserializeSorters(sort)),
+        _Object$entries2 = _slicedToArray(_Object$entries, 1),
+        _Object$entries2$ = _slicedToArray(_Object$entries2[0], 2),
+        key = _Object$entries2$[0],
+        value = _Object$entries2$[1];
+
+    return orderBy(list, [key], [value]);
+  }, [sort]);
+
+  var _useQuery = useQuery(GQL.LIST_API_KEYS),
+      listResponse = _useQuery.data,
+      listLoading = _useQuery.loading;
+
+  var _useMutation = useMutation(GQL.DELETE_API_KEY, {
+    refetchQueries: [{
+      query: GQL.LIST_API_KEYS
+    }]
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 2),
+      deleteIt = _useMutation2[0],
+      deleteLoading = _useMutation2[1].loading;
+
+  var data = listLoading && !listResponse ? [] : listResponse.security.apiKeys.data;
+  var id = new URLSearchParams(location.search).get("id");
+  var deleteItem = useCallback(function (item) {
+    showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$deleteIt, data, error;
+
+      return _regeneratorRuntime.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.deleteApiKey.error;
+
+              if (!error) {
+                _context.next = 7;
+                break;
+              }
+
+              return _context.abrupt("return", showSnackbar(error.message));
+
+            case 7:
+              showSnackbar(t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Api key \"{id}\" deleted."])))({
+                id: item.id
+              }));
+
+              if (id === item.id) {
+                history.push("/access-management/api-keys");
+              }
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+  }, [id]);
+  var groupsDataListModalOverlay = useMemo(function () {
+    return /*#__PURE__*/React.createElement(DataListModalOverlay, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Select, {
+      value: sort,
+      onChange: setSort,
+      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Sort by"])))
+    }, SORTERS.map(function (_ref3) {
+      var label = _ref3.label,
+          sorters = _ref3.sorters;
+      return /*#__PURE__*/React.createElement("option", {
+        key: label,
+        value: serializeSorters(sorters)
+      }, label);
+    })))));
+  }, [sort]);
+  var filteredData = filter === "" ? data : data.filter(filterAPIKey);
+  var list = sortKeys(filteredData);
+  return /*#__PURE__*/React.createElement(DataList, {
+    title: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["API Keys"]))),
+    actions: /*#__PURE__*/React.createElement(ButtonSecondary, {
+      "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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["New API Key"])))),
+    data: list,
+    loading: listLoading || deleteLoading,
+    search: /*#__PURE__*/React.createElement(SearchUI, {
+      value: filter,
+      onChange: setFilter,
+      inputPlaceholder: t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Search API keys"])))
+    }),
+    modalOverlay: groupsDataListModalOverlay,
+    modalOverlayAction: /*#__PURE__*/React.createElement(DataListModalOverlayAction, {
+      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+      "data-testid": "default-data-list.filter"
+    })
+  }, function (_ref4) {
+    var data = _ref4.data;
+    return /*#__PURE__*/React.createElement(ScrollList, {
+      "data-testid": "default-data-list"
+    }, data.map(function (item) {
+      return /*#__PURE__*/React.createElement(ListItem, {
+        key: item.id,
+        selected: item.id === id
+      }, /*#__PURE__*/React.createElement(ListItemText, {
+        onClick: function onClick() {
+          return history.push("/access-management/api-keys?id=".concat(item.id));
+        }
+      }, item.name, /*#__PURE__*/React.createElement(ListItemTextSecondary, null, item.description)), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(ListActions, null, /*#__PURE__*/React.createElement(DeleteIcon, {
+        onClick: function onClick() {
+          return deleteItem(item);
+        },
+        "data-testid": "default-data-list.delete"
+      }))));
+    }));
+  });
+};
+
+export default ApiKeysDataList;

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

@@ -0,0 +1,5 @@
+export declare const LIST_API_KEYS: any;
+export declare const READ_API_KEY: any;
+export declare const CREATE_API_KEY: any;
+export declare const UPDATE_API_KEY: any;
+export declare const DELETE_API_KEY: any;

package/ui/views/ApiKeys/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    description\n    token\n    permissions\n    createdOn\n";
+export var LIST_API_KEYS = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    query ListApiKeys {\n        security {\n            apiKeys: listApiKeys {\n                data {\n                   ", "\n                }\n            }\n        }\n    }\n"])), fields);
+export var READ_API_KEY = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    query GetApiKey($id: ID!) {\n        security {\n            apiKey: getApiKey(id: $id){\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n"])), fields);
+export var CREATE_API_KEY = gql(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    mutation CreateApiKey($data: SecurityApiKeyInput!){\n        security {\n            apiKey: createApiKey(data: $data) {\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n"])), fields);
+export var UPDATE_API_KEY = gql(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    mutation UpdateApiKey($id: ID!, $data: SecurityApiKeyInput!){\n        security {\n            apiKey: updateApiKey(id: $id, data: $data) {\n                data {\n                    ", "\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n"])), fields);
+export var DELETE_API_KEY = gql(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    mutation DeleteApiKey($id: ID!) {\n        security {\n            deleteApiKey(id: $id) {\n                data\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n"])));

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

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

package/ui/views/ApiKeys/index.js

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

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

@@ -0,0 +1 @@
+export declare const pickDataForAPI: (data: any) => any;

package/ui/views/ApiKeys/utils.js

@@ -0,0 +1,5 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _pick from "lodash/pick";
+export var pickDataForAPI = function pickDataForAPI(data) {
+  return _objectSpread({}, _pick(data, ["name", "description", "permissions"]));
+};

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

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

package/ui/views/Groups/Groups.js

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

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

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

package/ui/views/Groups/GroupsDataList.js

@@ -0,0 +1,215 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useMemo, useState } from "react";
+import orderBy from "lodash/orderBy";
+import { i18n } from "@webiny/app/i18n";
+import { DataList, ScrollList, ListItem, ListItemText, ListItemTextSecondary, ListItemMeta, ListActions, DataListModalOverlayAction, DataListModalOverlay } from "@webiny/ui/List";
+import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
+import { useRouter } from "@webiny/react-router";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { useQuery, useMutation } from "@apollo/react-hooks";
+import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
+import { LIST_GROUPS, DELETE_GROUP } from "./graphql";
+import { Tooltip } from "@webiny/ui/Tooltip";
+import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import SearchUI from "@webiny/app-admin/components/SearchUI";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+import { ReactComponent as FilterIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/filter-24px.svg";
+import { deserializeSorters, serializeSorters } from "../utils";
+var t = i18n.ns("app-security/admin/groups/data-list");
+var SORTERS = [{
+  label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Newest to oldest"]))),
+  sorters: {
+    createdOn: "desc"
+  }
+}, {
+  label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Oldest to newest"]))),
+  sorters: {
+    createdOn: "asc"
+  }
+}, {
+  label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Name A-Z"]))),
+  sorters: {
+    name: "asc"
+  }
+}, {
+  label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Name Z-A"]))),
+  sorters: {
+    name: "desc"
+  }
+}];
+
+var GroupsDataList = function GroupsDataList() {
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = useState(serializeSorters(SORTERS[0].sorters)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sort = _useState4[0],
+      setSort = _useState4[1];
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history,
+      location = _useRouter.location;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useConfirmationDialo = useConfirmationDialog({
+    dataTestId: "default-data-list.delete-dialog"
+  }),
+      showConfirmation = _useConfirmationDialo.showConfirmation;
+
+  var _useQuery = useQuery(LIST_GROUPS),
+      listResponse = _useQuery.data,
+      listLoading = _useQuery.loading;
+
+  var _useMutation = useMutation(DELETE_GROUP, {
+    refetchQueries: [{
+      query: LIST_GROUPS
+    }]
+  }),
+      _useMutation2 = _slicedToArray(_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 = useCallback(function (_ref) {
+    var name = _ref.name,
+        slug = _ref.slug,
+        description = _ref.description;
+    return name.toLowerCase().includes(filter) || slug.toLowerCase().includes(filter) || description && description.toLowerCase().includes(filter);
+  }, [filter]);
+  var sortGroups = useCallback(function (groups) {
+    if (!sort) {
+      return groups;
+    }
+
+    var _Object$entries = Object.entries(deserializeSorters(sort)),
+        _Object$entries2 = _slicedToArray(_Object$entries, 1),
+        _Object$entries2$ = _slicedToArray(_Object$entries2[0], 2),
+        key = _Object$entries2$[0],
+        value = _Object$entries2$[1];
+
+    return orderBy(groups, [key], [value]);
+  }, [sort]);
+  var deleteItem = useCallback(function (item) {
+    showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$deleteIt, data, error;
+
+      return _regeneratorRuntime.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 = _taggedTemplateLiteral(["Group \"{slug}\" deleted."])))({
+                slug: item.slug
+              }));
+
+              if (id === item.id) {
+                history.push("/access-management/groups");
+              }
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+  }, [id]);
+  var groupsDataListModalOverlay = useMemo(function () {
+    return /*#__PURE__*/React.createElement(DataListModalOverlay, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Select, {
+      value: sort,
+      onChange: setSort,
+      label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Sort by"])))
+    }, SORTERS.map(function (_ref3) {
+      var label = _ref3.label,
+          sorters = _ref3.sorters;
+      return /*#__PURE__*/React.createElement("option", {
+        key: label,
+        value: serializeSorters(sorters)
+      }, label);
+    })))));
+  }, [sort]);
+  var filteredData = filter === "" ? data : data.filter(filterGroup);
+  var groupList = sortGroups(filteredData);
+  return /*#__PURE__*/React.createElement(DataList, {
+    title: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Groups"]))),
+    actions: /*#__PURE__*/React.createElement(ButtonSecondary, {
+      "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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["New Group"])))),
+    data: groupList,
+    loading: listLoading || deleteLoading,
+    search: /*#__PURE__*/React.createElement(SearchUI, {
+      value: filter,
+      onChange: setFilter,
+      inputPlaceholder: t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Search Groups"])))
+    }),
+    modalOverlay: groupsDataListModalOverlay,
+    modalOverlayAction: /*#__PURE__*/React.createElement(DataListModalOverlayAction, {
+      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+      "data-testid": "default-data-list.filter"
+    })
+  }, function (_ref4) {
+    var data = _ref4.data;
+    return /*#__PURE__*/React.createElement(ScrollList, {
+      "data-testid": "default-data-list"
+    }, data.map(function (item) {
+      return /*#__PURE__*/React.createElement(ListItem, {
+        key: item.id,
+        selected: item.id === id
+      }, /*#__PURE__*/React.createElement(ListItemText, {
+        onClick: function onClick() {
+          return history.push("/access-management/groups?id=".concat(item.id));
+        }
+      }, item.name, /*#__PURE__*/React.createElement(ListItemTextSecondary, null, item.description)), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(ListActions, null, item.slug !== "full-access" ? /*#__PURE__*/React.createElement(DeleteIcon, {
+        onClick: function onClick() {
+          return deleteItem(item);
+        },
+        "data-testid": "default-data-list.delete"
+      }) : /*#__PURE__*/React.createElement(Tooltip, {
+        placement: "bottom",
+        content: /*#__PURE__*/React.createElement("span", null, t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["You can't delete this group."]))))
+      }, /*#__PURE__*/React.createElement(DeleteIcon, {
+        disabled: true
+      })))));
+    }));
+  });
+};
+
+export default GroupsDataList;

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

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