@webiny/app-security-access-management 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/ui/views/ApiKeys/ApiKeyForm.js

@@ -1,244 +1,186 @@
-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, {
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as CopyIcon } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { Alert, Button, CopyButton, Grid, IconButton, Input, Label, OverlayLoader, Textarea, Tooltip } from "@webiny/admin-ui";
+const t = i18n.ns("app-security-admin-users/admin/api-keys/form");
+export const ApiKeyForm = () => {
+  const {
+    location,
+    history
+  } = useRouter();
+  const {
+    showSnackbar
+  } = useSnackbar();
+  const newEntry = new URLSearchParams(location.search).get("new") === "true";
+  const id = new URLSearchParams(location.search).get("id");
+  const getQuery = useQuery(GQL.READ_API_KEY, {
     variables: {
-      id: id
+      id
     },
     skip: !id,
-    onCompleted: function onCompleted(data) {
+    onCompleted: data => {
       if (!data) {
         return;
       }
-
-      var error = data.security.apiKey.error;
-
+      const {
+        error
+      } = data.security.apiKey;
       if (error) {
         history.push("/access-management/api-keys");
         showSnackbar(error.message);
       }
     }
   });
-
-  var _useMutation = useMutation(GQL.CREATE_API_KEY, {
+  const [create, createMutation] = 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, {
+  });
+  const [update, updateMutation] = 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.
-
+  const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);
+  const onSubmit = useCallback(async formData => {
+    if (!formData.permissions || !formData.permissions.length) {
+      showSnackbar(t`You must configure permissions before saving!`, {
+        timeout: 60000,
+        dismissesOnAction: true
+      });
+      return;
+    }
+    const isUpdate = formData.createdOn;
+    const [operation, args] = isUpdate ? [update, {
+      variables: {
+        id: formData.id,
+        data: pickDataForAPI(formData)
+      }
+    }] : [create, {
+      variables: {
+        data: pickDataForAPI(formData)
+      }
+    }];
+    const response = await operation(args);
+    const {
+      error
+    } = response.data.security.apiKey;
+    if (error) {
+      return showSnackbar(error.message);
+    }
+    const {
+      id
+    } = response.data.security.apiKey.data;
+    !isUpdate && history.push(`/access-management/api-keys?id=${id}`);
+    showSnackbar(t`API key saved successfully.`);
+  }, [id]);
+  const data = get(getQuery, "data.security.apiKey.data", {});
+  const 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, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      title: t`Click on the left side list to display API key details or create a...`,
+      action: /*#__PURE__*/React.createElement(Button, {
+        icon: /*#__PURE__*/React.createElement(AddIcon, null),
+        text: t`New API Key`,
         "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"]))))
+        onClick: () => history.push("/access-management/api-keys?new=true")
+      })
     });
   }
-
   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, {
+  }, ({
+    data,
+    form,
+    Bind
+  }) => {
+    return /*#__PURE__*/React.createElement(SimpleForm, {
+      size: "lg"
+    }, loading && /*#__PURE__*/React.createElement(OverlayLoader, 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, {
+    }), /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
       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, {
+      size: "lg",
+      label: t`Name`,
+      "data-testid": "sam.key.new.form.name"
+    }))), /*#__PURE__*/React.createElement(Grid.Column, {
       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, {
+    }, /*#__PURE__*/React.createElement(Textarea, {
+      size: "lg",
+      label: t`Description`,
+      rows: 4,
+      "data-testid": "sam.key.new.form.description"
+    }))), /*#__PURE__*/React.createElement(Grid.Column, {
       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, {
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+      text: t`Token`
+    }), data.token ? /*#__PURE__*/React.createElement("div", {
+      className: "wby-py-sm wby-pl-sm-extra wby-pr-xs wby-rounded-md wby-mt-xs wby-bg-neutral-disabled wby-flex wby-justify-between wby-items-center"
+    }, /*#__PURE__*/React.createElement("div", null, data.token), /*#__PURE__*/React.createElement(CopyButton, {
+      variant: "ghost",
       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, {
+      onCopy: () => showSnackbar("Successfully copied!")
+    })) : /*#__PURE__*/React.createElement(Alert, {
+      className: "wby-mt-xs"
+    }, "Your token will be shown once you submit the form."))))), /*#__PURE__*/React.createElement(SimpleFormHeader, {
+      title: "Permissions",
+      rounded: false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-end"
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: "Copy permissions as JSON",
+      trigger: /*#__PURE__*/React.createElement(IconButton, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React.createElement(CopyIcon, null),
+        onClick: () => {
+          navigator.clipboard.writeText(JSON.stringify(data.permissions, null, 2));
+          showSnackbar("JSON data copied to clipboard.");
+        }
+      })
+    }))), /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
       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");
+    }, bind => /*#__PURE__*/React.createElement(Permissions, Object.assign({
+      id: data.id || "new"
+    }, bind)))))), /*#__PURE__*/React.createElement(SimpleFormFooter, null, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondary",
+      text: t`Cancel`,
+      onClick: () => history.push("/access-management/api-keys"),
+      "data-testid": "sam.key.new.form.button.cancel"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: t`Save`,
+      "data-testid": "sam.key.new.form.button.save",
+      onClick: ev => {
+        form.submit(ev);
       }
-    }, t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["Cancel"])))), /*#__PURE__*/React.createElement(ButtonPrimary, {
-      onClick: form.submit
-    }, t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Save API key"])))))));
+    })));
   });
 };
 
-export default ApiKeyForm;
+//# sourceMappingURL=ApiKeyForm.js.map

package/ui/views/ApiKeys/ApiKeyForm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMutation","useQuery","get","useRouter","i18n","Form","Permissions","validation","SimpleForm","SimpleFormFooter","SimpleFormContent","SimpleFormHeader","useSnackbar","pickDataForAPI","GQL","isEmpty","EmptyView","ReactComponent","AddIcon","CopyIcon","SettingsIcon","Alert","Button","CopyButton","Grid","IconButton","Input","Label","OverlayLoader","Textarea","Tooltip","t","ns","ApiKeyForm","location","history","showSnackbar","newEntry","URLSearchParams","search","id","getQuery","READ_API_KEY","variables","skip","onCompleted","data","error","security","apiKey","push","message","create","createMutation","CREATE_API_KEY","refetchQueries","query","LIST_API_KEYS","update","updateMutation","UPDATE_API_KEY","loading","find","item","onSubmit","formData","permissions","length","timeout","dismissesOnAction","isUpdate","createdOn","operation","args","response","showEmptyView","createElement","icon","title","action","text","onClick","form","Bind","size","name","Column","span","validators","label","rows","token","className","variant","value","onCopy","rounded","content","trigger","navigator","clipboard","writeText","JSON","stringify","defaultValue","bind","Object","assign","ev","submit"],"sources":["ApiKeyForm.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Form } from \"@webiny/form\";\nimport { Permissions } from \"@webiny/app-admin/components/Permissions\";\nimport { validation } from \"@webiny/validation\";\nimport {\n    SimpleForm,\n    SimpleFormFooter,\n    SimpleFormContent,\n    SimpleFormHeader\n} from \"@webiny/app-admin/components/SimpleForm\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { pickDataForAPI } from \"./utils\";\nimport * as GQL from \"./graphql\";\nimport isEmpty from \"lodash/isEmpty\";\nimport EmptyView from \"@webiny/app-admin/components/EmptyView\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { ApiKey } from \"~/types\";\nimport {\n    Alert,\n    Button,\n    CopyButton,\n    Grid,\n    IconButton,\n    Input,\n    Label,\n    OverlayLoader,\n    Textarea,\n    Tooltip\n} from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-security-admin-users/admin/api-keys/form\");\n\nexport interface ApiKeyFormProps {\n    // TODO @ts-refactor delete and go up the tree and sort it out\n    [key: string]: any;\n}\n\nexport const ApiKeyForm = () => {\n    const { location, history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const newEntry = new URLSearchParams(location.search).get(\"new\") === \"true\";\n    const id = new URLSearchParams(location.search).get(\"id\");\n\n    const getQuery = useQuery(GQL.READ_API_KEY, {\n        variables: { id },\n        skip: !id,\n        onCompleted: data => {\n            if (!data) {\n                return;\n            }\n\n            const { error } = data.security.apiKey;\n            if (error) {\n                history.push(\"/access-management/api-keys\");\n                showSnackbar(error.message);\n            }\n        }\n    });\n\n    const [create, createMutation] = useMutation(GQL.CREATE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const [update, updateMutation] = useMutation(GQL.UPDATE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);\n\n    const onSubmit = useCallback(\n        async (formData: ApiKey) => {\n            if (!formData.permissions || !formData.permissions.length) {\n                showSnackbar(t`You must configure permissions before saving!`, {\n                    timeout: 60000,\n                    dismissesOnAction: true\n                });\n                return;\n            }\n\n            const isUpdate = formData.createdOn;\n            const [operation, args] = isUpdate\n                ? [update, { variables: { id: formData.id, data: pickDataForAPI(formData) } }]\n                : [create, { variables: { data: pickDataForAPI(formData) } }];\n\n            const response = await operation(args);\n\n            const { error } = response.data.security.apiKey;\n            if (error) {\n                return showSnackbar(error.message);\n            }\n\n            const { id } = response.data.security.apiKey.data;\n\n            !isUpdate && history.push(`/access-management/api-keys?id=${id}`);\n            showSnackbar(t`API key saved successfully.`);\n        },\n        [id]\n    );\n\n    const data: ApiKey = get(getQuery, \"data.security.apiKey.data\", {});\n\n    const showEmptyView = !newEntry && !loading && isEmpty(data);\n    // Render \"No content\" selected view.\n    if (showEmptyView) {\n        return (\n            <EmptyView\n                icon={<SettingsIcon />}\n                title={t`Click on the left side list to display API key details or create a...`}\n                action={\n                    <Button\n                        icon={<AddIcon />}\n                        text={t`New API Key`}\n                        data-testid=\"new-record-button\"\n                        onClick={() => history.push(\"/access-management/api-keys?new=true\")}\n                    />\n                }\n            />\n        );\n    }\n\n    return (\n        <Form data={data} onSubmit={onSubmit}>\n            {({ data, form, Bind }) => {\n                return (\n                    <SimpleForm size={\"lg\"}>\n                        {loading && <OverlayLoader />}\n                        <SimpleFormHeader title={data.name ? data.name : \"Untitled\"} />\n                        <SimpleFormContent>\n                            <Grid>\n                                <Grid.Column span={12}>\n                                    <Bind name=\"name\" validators={validation.create(\"required\")}>\n                                        <Input\n                                            size={\"lg\"}\n                                            label={t`Name`}\n                                            data-testid=\"sam.key.new.form.name\"\n                                        />\n                                    </Bind>\n                                </Grid.Column>\n                                <Grid.Column span={12}>\n                                    <Bind\n                                        name=\"description\"\n                                        validators={validation.create(\"required\")}\n                                    >\n                                        <Textarea\n                                            size={\"lg\"}\n                                            label={t`Description`}\n                                            rows={4}\n                                            data-testid=\"sam.key.new.form.description\"\n                                        />\n                                    </Bind>\n                                </Grid.Column>\n                                <Grid.Column span={12}>\n                                    <div>\n                                        <Label text={t`Token`} />\n                                        {data.token ? (\n                                            <div\n                                                className={\n                                                    \"wby-py-sm wby-pl-sm-extra wby-pr-xs wby-rounded-md wby-mt-xs wby-bg-neutral-disabled wby-flex wby-justify-between wby-items-center\"\n                                                }\n                                            >\n                                                <div>{data.token}</div>\n                                                <CopyButton\n                                                    variant={\"ghost\"}\n                                                    value={data.token}\n                                                    onCopy={() =>\n                                                        showSnackbar(\"Successfully copied!\")\n                                                    }\n                                                />\n                                            </div>\n                                        ) : (\n                                            <Alert className={\"wby-mt-xs\"}>\n                                                {\n                                                    \"Your token will be shown once you submit the form.\"\n                                                }\n                                            </Alert>\n                                        )}\n                                    </div>\n                                </Grid.Column>\n                            </Grid>\n                        </SimpleFormContent>\n                        <SimpleFormHeader title={\"Permissions\"} rounded={false}>\n                            <div className={\"wby-flex wby-justify-end\"}>\n                                <Tooltip\n                                    content=\"Copy permissions as JSON\"\n                                    trigger={\n                                        <IconButton\n                                            variant={\"ghost\"}\n                                            icon={<CopyIcon />}\n                                            onClick={() => {\n                                                navigator.clipboard.writeText(\n                                                    JSON.stringify(data.permissions, null, 2)\n                                                );\n                                                showSnackbar(\"JSON data copied to clipboard.\");\n                                            }}\n                                        />\n                                    }\n                                />\n                            </div>\n                        </SimpleFormHeader>\n                        <SimpleFormContent>\n                            <Grid>\n                                <Grid.Column span={12}>\n                                    <Bind name={\"permissions\"} defaultValue={[]}>\n                                        {bind => <Permissions id={data.id || \"new\"} {...bind} />}\n                                    </Bind>\n                                </Grid.Column>\n                            </Grid>\n                        </SimpleFormContent>\n                        <SimpleFormFooter>\n                            <Button\n                                variant={\"secondary\"}\n                                text={t`Cancel`}\n                                onClick={() => history.push(\"/access-management/api-keys\")}\n                                data-testid=\"sam.key.new.form.button.cancel\"\n                            />\n                            <Button\n                                text={t`Save`}\n                                data-testid=\"sam.key.new.form.button.save\"\n                                onClick={ev => {\n                                    form.submit(ev);\n                                }}\n                            />\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,8 @@
-/// <reference types="react" />
-declare const ApiKeys: ({ formProps, listProps }: any) => JSX.Element;
-export default ApiKeys;
+import * as React from "react";
+import type { ApiKeysDataListProps } from "./ApiKeysDataList";
+import type { ApiKeyFormProps } from "./ApiKeyForm";
+export interface ApiKeysProps {
+    listProps?: ApiKeysDataListProps;
+    formProps?: ApiKeyFormProps;
+}
+export declare const ApiKeys: ({ formProps, listProps }: ApiKeysProps) => React.JSX.Element;

package/ui/views/ApiKeys/ApiKeys.js

@@ -1,12 +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;
+import { ApiKeysDataList } from "./ApiKeysDataList";
+import { ApiKeyForm } from "./ApiKeyForm";
+export const ApiKeys = ({
+  formProps = {},
+  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;
+//# sourceMappingURL=ApiKeys.js.map

package/ui/views/ApiKeys/ApiKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SplitView","LeftPanel","RightPanel","ApiKeysDataList","ApiKeyForm","ApiKeys","formProps","listProps","createElement"],"sources":["ApiKeys.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { SplitView, LeftPanel, RightPanel } from \"@webiny/app-admin/components/SplitView\";\nimport type { ApiKeysDataListProps } from \"./ApiKeysDataList\";\nimport { ApiKeysDataList } from \"./ApiKeysDataList\";\nimport type { ApiKeyFormProps } from \"./ApiKeyForm\";\nimport { ApiKeyForm } from \"./ApiKeyForm\";\n\nexport interface ApiKeysProps {\n    listProps?: ApiKeysDataListProps;\n    formProps?: ApiKeyFormProps;\n}\nexport const ApiKeys = ({ formProps = {}, listProps = {} }: ApiKeysProps) => {\n    return (\n        <SplitView>\n            <LeftPanel>\n                <ApiKeysDataList {...listProps} />\n            </LeftPanel>\n            <RightPanel>\n                <ApiKeyForm {...formProps} />\n            </RightPanel>\n        </SplitView>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,SAAS,EAAEC,UAAU,QAAQ,wCAAwC;AAEzF,SAASC,eAAe;AAExB,SAASC,UAAU;AAMnB,OAAO,MAAMC,OAAO,GAAGA,CAAC;EAAEC,SAAS,GAAG,CAAC,CAAC;EAAEC,SAAS,GAAG,CAAC;AAAgB,CAAC,KAAK;EACzE,oBACIR,KAAA,CAAAS,aAAA,CAACR,SAAS,qBACND,KAAA,CAAAS,aAAA,CAACP,SAAS,qBACNF,KAAA,CAAAS,aAAA,CAACL,eAAe,EAAKI,SAAY,CAC1B,CAAC,eACZR,KAAA,CAAAS,aAAA,CAACN,UAAU,qBACPH,KAAA,CAAAS,aAAA,CAACJ,UAAU,EAAKE,SAAY,CACpB,CACL,CAAC;AAEpB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,5 @@
-/// <reference types="react" />
-declare const ApiKeysDataList: () => JSX.Element;
-export default ApiKeysDataList;
+import React from "react";
+export interface ApiKeysDataListProps {
+    [key: string]: any;
+}
+export declare const ApiKeysDataList: () => React.JSX.Element;