@webiny/app-security-access-management 6.3.0 → 6.4.0-beta.1

package/ui/views/ApiKeys/ApiKeyForm.js

@@ -1,237 +1,220 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import get from "lodash/get.js";
 import isEmpty from "lodash/isEmpty.js";
 import { i18n } from "@webiny/app/i18n/index.js";
-import { Bind, Form, useForm, useGenerateSlug } from "@webiny/form";
-import { useRouter, Permissions, EmptyView, SimpleForm, SimpleFormFooter, SimpleFormContent, SimpleFormHeader } from "@webiny/app-admin";
+import { Bind as form_Bind, Form, useForm, useGenerateSlug } from "@webiny/form";
+import { EmptyView, Permissions, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, useRouter } from "@webiny/app-admin";
 import { validation } from "@webiny/validation";
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { ReactComponent as CopyIcon } from "@webiny/icons/content_copy.svg";
-import { ReactComponent as PasteIcon } from "@webiny/icons/content_paste.svg";
-import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as content_copy_svg_ReactComponent } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as content_paste_svg_ReactComponent } from "@webiny/icons/content_paste.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
 import { pickDataForCreate, pickDataForUpdate } from "./utils.js";
-import * as GQL from "./graphql.js";
 import { Alert, Button, CopyButton, Grid, Icon, IconButton, Input, Label, OverlayLoader, Textarea, Tooltip, useToast } from "@webiny/admin-ui";
 import { Routes } from "../../../routes.js";
+import * as __rspack_external__graphql_js_d64db012 from "./graphql.js";
 const t = i18n.ns("app-security-admin-users/admin/api-keys/form");
-export const ApiKeyForm = ({
-  id,
-  newEntry
-}) => {
-  const {
-    goToRoute
-  } = useRouter();
-  const toast = useToast();
-  const getQuery = useQuery(GQL.READ_API_KEY, {
-    variables: {
-      id
-    },
-    skip: !id,
-    onCompleted: data => {
-      if (!data) {
-        return;
-      }
-      const {
-        error
-      } = data.security.apiKey;
-      if (error) {
-        goToRoute(Routes.ApiKeys.List);
-        toast.showWarningToast({
-          title: error.message
+const ApiKeyForm = ({ id, newEntry })=>{
+    const { goToRoute } = useRouter();
+    const toast = useToast();
+    const getQuery = useQuery(__rspack_external__graphql_js_d64db012.READ_API_KEY, {
+        variables: {
+            id
+        },
+        skip: !id,
+        onCompleted: (data)=>{
+            if (!data) return;
+            const { error } = data.security.apiKey;
+            if (error) {
+                goToRoute(Routes.ApiKeys.List);
+                toast.showWarningToast({
+                    title: error.message
+                });
+            }
+        }
+    });
+    const [create, createMutation] = useMutation(__rspack_external__graphql_js_d64db012.CREATE_API_KEY, {
+        refetchQueries: [
+            {
+                query: __rspack_external__graphql_js_d64db012.LIST_API_KEYS
+            }
+        ]
+    });
+    const [update, updateMutation] = useMutation(__rspack_external__graphql_js_d64db012.UPDATE_API_KEY, {
+        refetchQueries: [
+            {
+                query: __rspack_external__graphql_js_d64db012.LIST_API_KEYS
+            }
+        ]
+    });
+    const loading = [
+        getQuery,
+        createMutation,
+        updateMutation
+    ].find((item)=>item.loading);
+    const onSubmit = useCallback(async (formData)=>{
+        if (!formData.permissions || !formData.permissions.length) return void toast.showWarningToast({
+            title: t`You must configure permissions before saving!`,
+            duration: 1 / 0
+        });
+        const isUpdate = formData.createdOn;
+        const [operation, args] = isUpdate ? [
+            update,
+            {
+                variables: {
+                    id: formData.id,
+                    data: pickDataForUpdate(formData)
+                }
+            }
+        ] : [
+            create,
+            {
+                variables: {
+                    data: pickDataForCreate(formData)
+                }
+            }
+        ];
+        const response = await operation(args);
+        const { error } = response.data.security.apiKey;
+        if (error) return void toast.showWarningToast({
+            title: error.message
+        });
+        const { id } = response.data.security.apiKey.data;
+        if (!isUpdate) goToRoute(Routes.ApiKeys.List, {
+            id
         });
-      }
-    }
-  });
-  const [create, createMutation] = useMutation(GQL.CREATE_API_KEY, {
-    refetchQueries: [{
-      query: GQL.LIST_API_KEYS
-    }]
-  });
-  const [update, updateMutation] = useMutation(GQL.UPDATE_API_KEY, {
-    refetchQueries: [{
-      query: GQL.LIST_API_KEYS
-    }]
-  });
-  const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);
-  const onSubmit = useCallback(async formData => {
-    if (!formData.permissions || !formData.permissions.length) {
-      toast.showWarningToast({
-        title: t`You must configure permissions before saving!`,
-        duration: Infinity
-      });
-      return;
-    }
-    const isUpdate = formData.createdOn;
-    const [operation, args] = isUpdate ? [update, {
-      variables: {
-        id: formData.id,
-        data: pickDataForUpdate(formData)
-      }
-    }] : [create, {
-      variables: {
-        data: pickDataForCreate(formData)
-      }
-    }];
-    const response = await operation(args);
-    const {
-      error
-    } = response.data.security.apiKey;
-    if (error) {
-      toast.showWarningToast({
-        title: error.message
-      });
-      return;
-    }
-    const {
-      id
-    } = response.data.security.apiKey.data;
-    if (!isUpdate) {
-      goToRoute(Routes.ApiKeys.List, {
+        toast.showSuccessToast({
+            title: t`API key saved successfully.`
+        });
+    }, [
         id
-      });
-    }
-    toast.showSuccessToast({
-      title: t`API key saved successfully.`
-    });
-  }, [id]);
-  const data = get(getQuery, "data.security.apiKey.data", {});
-  const showEmptyView = !newEntry && !loading && isEmpty(data);
-  if (showEmptyView) {
-    return /*#__PURE__*/React.createElement(EmptyView, {
-      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: () => {
-          goToRoute(Routes.ApiKeys.List, {
-            new: true
-          });
-        }
-      })
+    ]);
+    const data = get(getQuery, "data.security.apiKey.data", {});
+    const showEmptyView = !newEntry && !loading && isEmpty(data);
+    if (showEmptyView) return /*#__PURE__*/ react.createElement(EmptyView, {
+        icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, 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(ReactComponent, null),
+            text: t`New API Key`,
+            "data-testid": "new-record-button",
+            onClick: ()=>{
+                goToRoute(Routes.ApiKeys.List, {
+                    new: true
+                });
+            }
+        })
     });
-  }
-  return /*#__PURE__*/React.createElement(Form, {
-    data: data,
-    onSubmit: onSubmit
-  }, ({
-    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(FormContent, {
-      newEntry: newEntry
-    })), /*#__PURE__*/React.createElement(SimpleFormHeader, {
-      title: "Permissions",
-      rounded: false
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex justify-end"
-    }, /*#__PURE__*/React.createElement(CopyPermissionsToJson, {
-      permissions: data.permissions
-    }))), /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
-      span: 12
-    }, /*#__PURE__*/React.createElement(Bind, {
-      name: "permissions",
-      defaultValue: []
-    }, 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: () => {
-        goToRoute(Routes.ApiKeys.List);
-      },
-      "data-testid": "sam.key.new.form.button.cancel"
-    }), /*#__PURE__*/React.createElement(Button, {
-      text: t`Save`,
-      "data-testid": "sam.key.new.form.button.save",
-      onClick: form.submit
-    })));
-  });
+    return /*#__PURE__*/ react.createElement(Form, {
+        data: data,
+        onSubmit: onSubmit
+    }, ({ data, form, Bind })=>/*#__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(FormContent, {
+            newEntry: newEntry
+        })), /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+            title: "Permissions",
+            rounded: false
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex justify-end"
+        }, /*#__PURE__*/ react.createElement(CopyPermissionsToJson, {
+            permissions: data.permissions
+        }))), /*#__PURE__*/ react.createElement(SimpleFormContent, null, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "permissions",
+            defaultValue: []
+        }, (bind)=>/*#__PURE__*/ react.createElement(Permissions, {
+                id: data.id || "new",
+                ...bind
+            }))))), /*#__PURE__*/ react.createElement(SimpleFormFooter, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: t`Cancel`,
+            onClick: ()=>{
+                goToRoute(Routes.ApiKeys.List);
+            },
+            "data-testid": "sam.key.new.form.button.cancel"
+        }), /*#__PURE__*/ react.createElement(Button, {
+            text: t`Save`,
+            "data-testid": "sam.key.new.form.button.save",
+            onClick: form.submit
+        }))));
 };
-const FormContent = props => {
-  const {
-    newEntry
-  } = props;
-  const form = useForm();
-  const toast = useToast();
-  const {
-    generateSlug
-  } = useGenerateSlug(form, "name", "slug");
-  const data = form.data;
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "name",
-    validators: validation.create("required")
-  }, /*#__PURE__*/React.createElement(Input, {
-    label: t`Name`,
-    "data-testid": "sam.key.new.form.name",
-    onBlur: generateSlug
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "slug",
-    validators: validation.create("required")
-  }, /*#__PURE__*/React.createElement(Input, {
-    label: t`Slug`,
-    "data-testid": "sam.key.new.form.name",
-    disabled: !newEntry
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "description",
-    validators: validation.create("required")
-  }, /*#__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(Label, {
-    text: t`Token`
-  }), data.token ? /*#__PURE__*/React.createElement("div", {
-    className: "py-sm pl-sm-extra pr-xs rounded-md mt-xs bg-neutral-disabled flex justify-between items-center"
-  }, /*#__PURE__*/React.createElement("div", null, data.token), /*#__PURE__*/React.createElement(CopyButton, {
-    variant: "ghost",
-    value: data.token,
-    onCopy: () => {
-      toast.showSuccessToast({
-        title: "Successfully copied!"
-      });
-    }
-  })) : /*#__PURE__*/React.createElement(Alert, {
-    className: "mt-xs"
-  }, "Your token will be shown once you submit the form."))));
+const FormContent = (props)=>{
+    const { newEntry } = props;
+    const form = useForm();
+    const toast = useToast();
+    const { generateSlug } = useGenerateSlug(form, "name", "slug");
+    const data = form.data;
+    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "name",
+        validators: validation.create("required")
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: t`Name`,
+        "data-testid": "sam.key.new.form.name",
+        onBlur: generateSlug
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "slug",
+        validators: validation.create("required")
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: t`Slug`,
+        "data-testid": "sam.key.new.form.name",
+        disabled: !newEntry
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "description",
+        validators: validation.create("required")
+    }, /*#__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(Label, {
+        text: t`Token`
+    }), data.token ? /*#__PURE__*/ react.createElement("div", {
+        className: "py-sm pl-sm-extra pr-xs rounded-md mt-xs bg-neutral-disabled flex justify-between items-center"
+    }, /*#__PURE__*/ react.createElement("div", null, data.token), /*#__PURE__*/ react.createElement(CopyButton, {
+        variant: "ghost",
+        value: data.token,
+        onCopy: ()=>{
+            toast.showSuccessToast({
+                title: "Successfully copied!"
+            });
+        }
+    })) : /*#__PURE__*/ react.createElement(Alert, {
+        className: "mt-xs"
+    }, "Your token will be shown once you submit the form."))));
 };
-const CopyPermissionsToJson = ({
-  permissions
-}) => {
-  const toast = useToast();
-  return /*#__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(permissions, null, 2));
-        toast.showToast({
-          title: "JSON data copied to clipboard.",
-          icon: /*#__PURE__*/React.createElement(Icon, {
-            icon: /*#__PURE__*/React.createElement(PasteIcon, null),
-            label: "Paste"
-          })
-        });
-      }
-    })
-  });
+const CopyPermissionsToJson = ({ permissions })=>{
+    const toast = useToast();
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Copy permissions as JSON",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            icon: /*#__PURE__*/ react.createElement(content_copy_svg_ReactComponent, null),
+            onClick: ()=>{
+                navigator.clipboard.writeText(JSON.stringify(permissions, null, 2));
+                toast.showToast({
+                    title: "JSON data copied to clipboard.",
+                    icon: /*#__PURE__*/ react.createElement(Icon, {
+                        icon: /*#__PURE__*/ react.createElement(content_paste_svg_ReactComponent, null),
+                        label: "Paste"
+                    })
+                });
+            }
+        })
+    });
 };
+export { ApiKeyForm };
 
 //# sourceMappingURL=ApiKeyForm.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMutation","useQuery","get","isEmpty","i18n","Bind","Form","useForm","useGenerateSlug","useRouter","Permissions","EmptyView","SimpleForm","SimpleFormFooter","SimpleFormContent","SimpleFormHeader","validation","ReactComponent","AddIcon","CopyIcon","PasteIcon","SettingsIcon","pickDataForCreate","pickDataForUpdate","GQL","Alert","Button","CopyButton","Grid","Icon","IconButton","Input","Label","OverlayLoader","Textarea","Tooltip","useToast","Routes","t","ns","ApiKeyForm","id","newEntry","goToRoute","toast","getQuery","READ_API_KEY","variables","skip","onCompleted","data","error","security","apiKey","ApiKeys","List","showWarningToast","title","message","create","createMutation","CREATE_API_KEY","refetchQueries","query","LIST_API_KEYS","update","updateMutation","UPDATE_API_KEY","loading","find","item","onSubmit","formData","permissions","length","duration","Infinity","isUpdate","createdOn","operation","args","response","showSuccessToast","showEmptyView","createElement","icon","action","text","onClick","new","form","size","name","FormContent","rounded","className","CopyPermissionsToJson","Column","span","defaultValue","bind","Object","assign","variant","submit","props","generateSlug","validators","label","onBlur","disabled","rows","token","value","onCopy","content","trigger","navigator","clipboard","writeText","JSON","stringify","showToast"],"sources":["ApiKeyForm.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\nimport get from \"lodash/get.js\";\nimport isEmpty from \"lodash/isEmpty.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Bind, Form, useForm, useGenerateSlug } from \"@webiny/form\";\nimport {\n    useRouter,\n    Permissions,\n    EmptyView,\n    SimpleForm,\n    SimpleFormFooter,\n    SimpleFormContent,\n    SimpleFormHeader\n} from \"@webiny/app-admin\";\nimport { validation } from \"@webiny/validation\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { pickDataForCreate, pickDataForUpdate } from \"./utils.js\";\nimport * as GQL from \"./graphql.js\";\nimport type { ApiKey } from \"~/types.js\";\nimport {\n    Alert,\n    Button,\n    CopyButton,\n    Grid,\n    Icon,\n    IconButton,\n    Input,\n    Label,\n    OverlayLoader,\n    Textarea,\n    Tooltip,\n    useToast\n} from \"@webiny/admin-ui\";\nimport { Routes } from \"~/routes.js\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\n\nconst t = i18n.ns(\"app-security-admin-users/admin/api-keys/form\");\n\ninterface ApiKeyFormProps {\n    newEntry: boolean;\n    id: string | undefined;\n}\n\nexport const ApiKeyForm = ({ id, newEntry }: ApiKeyFormProps) => {\n    const { goToRoute } = useRouter();\n    const toast = useToast();\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                goToRoute(Routes.ApiKeys.List);\n                toast.showWarningToast({ title: 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                toast.showWarningToast({\n                    title: t`You must configure permissions before saving!`,\n                    duration: Infinity\n                });\n                return;\n            }\n\n            const isUpdate = formData.createdOn;\n            const [operation, args] = isUpdate\n                ? [update, { variables: { id: formData.id, data: pickDataForUpdate(formData) } }]\n                : [create, { variables: { data: pickDataForCreate(formData) } }];\n\n            const response = await operation(args);\n\n            const { error } = response.data.security.apiKey;\n            if (error) {\n                toast.showWarningToast({ title: error.message });\n                return;\n            }\n\n            const { id } = response.data.security.apiKey.data;\n\n            if (!isUpdate) {\n                goToRoute(Routes.ApiKeys.List, { id });\n            }\n\n            toast.showSuccessToast({ title: 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\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={() => {\n                            goToRoute(Routes.ApiKeys.List, { new: true });\n                        }}\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                            <FormContent newEntry={newEntry} />\n                        </SimpleFormContent>\n                        <SimpleFormHeader title={\"Permissions\"} rounded={false}>\n                            <div className={\"flex justify-end\"}>\n                                <CopyPermissionsToJson permissions={data.permissions} />\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={() => {\n                                    goToRoute(Routes.ApiKeys.List);\n                                }}\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={form.submit}\n                            />\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                );\n            }}\n        </Form>\n    );\n};\n\ninterface FormContentProps {\n    newEntry: boolean;\n}\n\nconst FormContent = (props: FormContentProps) => {\n    const { newEntry } = props;\n    const form = useForm();\n    const toast = useToast();\n    const { generateSlug } = useGenerateSlug(form, \"name\", \"slug\");\n    const data = form.data;\n\n    return (\n        <Grid>\n            <Grid.Column span={6}>\n                <Bind name=\"name\" validators={validation.create(\"required\")}>\n                    <Input\n                        label={t`Name`}\n                        data-testid=\"sam.key.new.form.name\"\n                        onBlur={generateSlug}\n                    />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={6}>\n                <Bind name=\"slug\" validators={validation.create(\"required\")}>\n                    <Input\n                        label={t`Slug`}\n                        data-testid=\"sam.key.new.form.name\"\n                        disabled={!newEntry}\n                    />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name=\"description\" validators={validation.create(\"required\")}>\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                                \"py-sm pl-sm-extra pr-xs rounded-md mt-xs bg-neutral-disabled flex justify-between items-center\"\n                            }\n                        >\n                            <div>{data.token}</div>\n                            <CopyButton\n                                variant={\"ghost\"}\n                                value={data.token}\n                                onCopy={() => {\n                                    toast.showSuccessToast({ title: \"Successfully copied!\" });\n                                }}\n                            />\n                        </div>\n                    ) : (\n                        <Alert className={\"mt-xs\"}>\n                            {\"Your token will be shown once you submit the form.\"}\n                        </Alert>\n                    )}\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\ninterface CopyPermissionsToJsonProps {\n    permissions: GenericRecord[];\n}\n\nconst CopyPermissionsToJson = ({ permissions }: CopyPermissionsToJsonProps) => {\n    const toast = useToast();\n\n    return (\n        <Tooltip\n            content=\"Copy permissions as JSON\"\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    icon={<CopyIcon />}\n                    onClick={() => {\n                        navigator.clipboard.writeText(JSON.stringify(permissions, null, 2));\n                        toast.showToast({\n                            title: \"JSON data copied to clipboard.\",\n                            icon: <Icon icon={<PasteIcon />} label={\"Paste\"} />\n                        });\n                    }}\n                />\n            }\n        />\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ui/views/ApiKeys/ApiKeyForm.js","sources":["../../../../src/ui/views/ApiKeys/ApiKeyForm.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\nimport get from \"lodash/get.js\";\nimport isEmpty from \"lodash/isEmpty.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Bind, Form, useForm, useGenerateSlug } from \"@webiny/form\";\nimport {\n    useRouter,\n    Permissions,\n    EmptyView,\n    SimpleForm,\n    SimpleFormFooter,\n    SimpleFormContent,\n    SimpleFormHeader\n} from \"@webiny/app-admin\";\nimport { validation } from \"@webiny/validation\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { pickDataForCreate, pickDataForUpdate } from \"./utils.js\";\nimport * as GQL from \"./graphql.js\";\nimport type { ApiKey } from \"~/types.js\";\nimport {\n    Alert,\n    Button,\n    CopyButton,\n    Grid,\n    Icon,\n    IconButton,\n    Input,\n    Label,\n    OverlayLoader,\n    Textarea,\n    Tooltip,\n    useToast\n} from \"@webiny/admin-ui\";\nimport { Routes } from \"~/routes.js\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\n\nconst t = i18n.ns(\"app-security-admin-users/admin/api-keys/form\");\n\ninterface ApiKeyFormProps {\n    newEntry: boolean;\n    id: string | undefined;\n}\n\nexport const ApiKeyForm = ({ id, newEntry }: ApiKeyFormProps) => {\n    const { goToRoute } = useRouter();\n    const toast = useToast();\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                goToRoute(Routes.ApiKeys.List);\n                toast.showWarningToast({ title: 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                toast.showWarningToast({\n                    title: t`You must configure permissions before saving!`,\n                    duration: Infinity\n                });\n                return;\n            }\n\n            const isUpdate = formData.createdOn;\n            const [operation, args] = isUpdate\n                ? [update, { variables: { id: formData.id, data: pickDataForUpdate(formData) } }]\n                : [create, { variables: { data: pickDataForCreate(formData) } }];\n\n            const response = await operation(args);\n\n            const { error } = response.data.security.apiKey;\n            if (error) {\n                toast.showWarningToast({ title: error.message });\n                return;\n            }\n\n            const { id } = response.data.security.apiKey.data;\n\n            if (!isUpdate) {\n                goToRoute(Routes.ApiKeys.List, { id });\n            }\n\n            toast.showSuccessToast({ title: 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\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={() => {\n                            goToRoute(Routes.ApiKeys.List, { new: true });\n                        }}\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                            <FormContent newEntry={newEntry} />\n                        </SimpleFormContent>\n                        <SimpleFormHeader title={\"Permissions\"} rounded={false}>\n                            <div className={\"flex justify-end\"}>\n                                <CopyPermissionsToJson permissions={data.permissions} />\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={() => {\n                                    goToRoute(Routes.ApiKeys.List);\n                                }}\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={form.submit}\n                            />\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                );\n            }}\n        </Form>\n    );\n};\n\ninterface FormContentProps {\n    newEntry: boolean;\n}\n\nconst FormContent = (props: FormContentProps) => {\n    const { newEntry } = props;\n    const form = useForm();\n    const toast = useToast();\n    const { generateSlug } = useGenerateSlug(form, \"name\", \"slug\");\n    const data = form.data;\n\n    return (\n        <Grid>\n            <Grid.Column span={6}>\n                <Bind name=\"name\" validators={validation.create(\"required\")}>\n                    <Input\n                        label={t`Name`}\n                        data-testid=\"sam.key.new.form.name\"\n                        onBlur={generateSlug}\n                    />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={6}>\n                <Bind name=\"slug\" validators={validation.create(\"required\")}>\n                    <Input\n                        label={t`Slug`}\n                        data-testid=\"sam.key.new.form.name\"\n                        disabled={!newEntry}\n                    />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name=\"description\" validators={validation.create(\"required\")}>\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                                \"py-sm pl-sm-extra pr-xs rounded-md mt-xs bg-neutral-disabled flex justify-between items-center\"\n                            }\n                        >\n                            <div>{data.token}</div>\n                            <CopyButton\n                                variant={\"ghost\"}\n                                value={data.token}\n                                onCopy={() => {\n                                    toast.showSuccessToast({ title: \"Successfully copied!\" });\n                                }}\n                            />\n                        </div>\n                    ) : (\n                        <Alert className={\"mt-xs\"}>\n                            {\"Your token will be shown once you submit the form.\"}\n                        </Alert>\n                    )}\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\ninterface CopyPermissionsToJsonProps {\n    permissions: GenericRecord[];\n}\n\nconst CopyPermissionsToJson = ({ permissions }: CopyPermissionsToJsonProps) => {\n    const toast = useToast();\n\n    return (\n        <Tooltip\n            content=\"Copy permissions as JSON\"\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    icon={<CopyIcon />}\n                    onClick={() => {\n                        navigator.clipboard.writeText(JSON.stringify(permissions, null, 2));\n                        toast.showToast({\n                            title: \"JSON data copied to clipboard.\",\n                            icon: <Icon icon={<PasteIcon />} label={\"Paste\"} />\n                        });\n                    }}\n                />\n            }\n        />\n    );\n};\n"],"names":["t","i18n","ApiKeyForm","id","newEntry","goToRoute","useRouter","toast","useToast","getQuery","useQuery","GQL","data","error","Routes","create","createMutation","useMutation","update","updateMutation","loading","item","onSubmit","useCallback","formData","Infinity","isUpdate","operation","args","pickDataForUpdate","pickDataForCreate","response","get","showEmptyView","isEmpty","EmptyView","SettingsIcon","Button","AddIcon","Form","form","Bind","SimpleForm","OverlayLoader","SimpleFormHeader","SimpleFormContent","FormContent","CopyPermissionsToJson","Grid","bind","Permissions","SimpleFormFooter","props","useForm","generateSlug","useGenerateSlug","validation","Input","Textarea","Label","CopyButton","Alert","permissions","Tooltip","IconButton","CopyIcon","navigator","JSON","Icon","PasteIcon"],"mappings":"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"}

package/ui/views/ApiKeys/ApiKeys.js

@@ -1,18 +1,17 @@
-import * as React from "react";
-import { useRoute, SplitView, LeftPanel, RightPanel } from "@webiny/app-admin";
+import { LeftPanel, RightPanel, SplitView, useRoute } from "@webiny/app-admin";
 import { ApiKeysDataList } from "./ApiKeysDataList.js";
 import { ApiKeyForm } from "./ApiKeyForm.js";
 import { Routes } from "../../../routes.js";
-export const ApiKeys = () => {
-  const {
-    route
-  } = useRoute(Routes.ApiKeys.List);
-  return /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, null, /*#__PURE__*/React.createElement(ApiKeysDataList, {
-    activeId: route.params.id
-  })), /*#__PURE__*/React.createElement(RightPanel, null, /*#__PURE__*/React.createElement(ApiKeyForm, {
-    newEntry: route.params.new === true,
-    id: route.params.id
-  })));
+import * as __rspack_external_react from "react";
+const ApiKeys = ()=>{
+    const { route } = useRoute(Routes.ApiKeys.List);
+    return /*#__PURE__*/ __rspack_external_react.createElement(SplitView, null, /*#__PURE__*/ __rspack_external_react.createElement(LeftPanel, null, /*#__PURE__*/ __rspack_external_react.createElement(ApiKeysDataList, {
+        activeId: route.params.id
+    })), /*#__PURE__*/ __rspack_external_react.createElement(RightPanel, null, /*#__PURE__*/ __rspack_external_react.createElement(ApiKeyForm, {
+        newEntry: true === route.params.new,
+        id: route.params.id
+    })));
 };
+export { ApiKeys };
 
 //# sourceMappingURL=ApiKeys.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useRoute","SplitView","LeftPanel","RightPanel","ApiKeysDataList","ApiKeyForm","Routes","ApiKeys","route","List","createElement","activeId","params","id","newEntry","new"],"sources":["ApiKeys.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRoute, SplitView, LeftPanel, RightPanel } from \"@webiny/app-admin\";\nimport { ApiKeysDataList } from \"./ApiKeysDataList.js\";\nimport { ApiKeyForm } from \"./ApiKeyForm.js\";\nimport { Routes } from \"~/routes.js\";\n\nexport const ApiKeys = () => {\n    const { route } = useRoute(Routes.ApiKeys.List);\n\n    return (\n        <SplitView>\n            <LeftPanel>\n                <ApiKeysDataList activeId={route.params.id} />\n            </LeftPanel>\n            <RightPanel>\n                <ApiKeyForm newEntry={route.params.new === true} id={route.params.id} />\n            </RightPanel>\n        </SplitView>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,QAAQ,mBAAmB;AAC9E,SAASC,eAAe;AACxB,SAASC,UAAU;AACnB,SAASC,MAAM;AAEf,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM;IAAEC;EAAM,CAAC,GAAGR,QAAQ,CAACM,MAAM,CAACC,OAAO,CAACE,IAAI,CAAC;EAE/C,oBACIV,KAAA,CAAAW,aAAA,CAACT,SAAS,qBACNF,KAAA,CAAAW,aAAA,CAACR,SAAS,qBACNH,KAAA,CAAAW,aAAA,CAACN,eAAe;IAACO,QAAQ,EAAEH,KAAK,CAACI,MAAM,CAACC;EAAG,CAAE,CACtC,CAAC,eACZd,KAAA,CAAAW,aAAA,CAACP,UAAU,qBACPJ,KAAA,CAAAW,aAAA,CAACL,UAAU;IAACS,QAAQ,EAAEN,KAAK,CAACI,MAAM,CAACG,GAAG,KAAK,IAAK;IAACF,EAAE,EAAEL,KAAK,CAACI,MAAM,CAACC;EAAG,CAAE,CAC/D,CACL,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"version":3,"file":"ui/views/ApiKeys/ApiKeys.js","sources":["../../../../src/ui/views/ApiKeys/ApiKeys.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRoute, SplitView, LeftPanel, RightPanel } from \"@webiny/app-admin\";\nimport { ApiKeysDataList } from \"./ApiKeysDataList.js\";\nimport { ApiKeyForm } from \"./ApiKeyForm.js\";\nimport { Routes } from \"~/routes.js\";\n\nexport const ApiKeys = () => {\n    const { route } = useRoute(Routes.ApiKeys.List);\n\n    return (\n        <SplitView>\n            <LeftPanel>\n                <ApiKeysDataList activeId={route.params.id} />\n            </LeftPanel>\n            <RightPanel>\n                <ApiKeyForm newEntry={route.params.new === true} id={route.params.id} />\n            </RightPanel>\n        </SplitView>\n    );\n};\n"],"names":["ApiKeys","route","useRoute","Routes","SplitView","LeftPanel","ApiKeysDataList","RightPanel","ApiKeyForm"],"mappings":";;;;;AAMO,MAAMA,UAAU;IACnB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,OAAO,CAAC,IAAI;IAE9C,OAAO,WAAP,GACI,sCAACC,WAASA,MAAAA,WAAAA,GACN,sCAACC,WAASA,MAAAA,WAAAA,GACN,sCAACC,iBAAeA;QAAC,UAAUL,MAAM,MAAM,CAAC,EAAE;uBAE9C,sCAACM,YAAUA,MAAAA,WAAAA,GACP,sCAACC,YAAUA;QAAC,UAAUP,AAAqB,SAArBA,MAAM,MAAM,CAAC,GAAG;QAAW,IAAIA,MAAM,MAAM,CAAC,EAAE;;AAIpF"}