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

package/ui/views/Roles/RolesForm.js

@@ -1,238 +1,213 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import get from "lodash/get.js";
 import { i18n } from "@webiny/app/i18n/index.js";
-import { Bind, Form, useForm, useGenerateSlug } from "@webiny/form";
+import { Bind as form_Bind, Form, useForm, useGenerateSlug } from "@webiny/form";
 import { validation } from "@webiny/validation";
-import { SimpleForm, SimpleFormFooter, SimpleFormContent, SimpleFormHeader, Permissions, EmptyView, useRouter, useSnackbar } from "@webiny/app-admin";
+import { EmptyView, Permissions, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, useRouter, useSnackbar } from "@webiny/app-admin";
 import { CREATE_ROLE, LIST_ROLES, READ_ROLE, UPDATE_ROLE } from "./graphql.js";
 import isEmpty from "lodash/isEmpty.js";
-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 { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as content_copy_svg_ReactComponent } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
 import { Alert, Button, Grid, IconButton, Input, OverlayLoader, Textarea, Tooltip } from "@webiny/admin-ui";
 import { Routes } from "../../../routes.js";
 const t = i18n.ns("app-security/admin/roles/form");
-export const RolesForm = ({
-  id,
-  newEntry
-}) => {
-  const {
-    goToRoute
-  } = useRouter();
-  const {
-    showSnackbar
-  } = useSnackbar();
-  const getQuery = useQuery(READ_ROLE, {
-    variables: {
-      id
-    },
-    skip: !id,
-    onCompleted: data => {
-      if (!data) {
-        return;
-      }
-      const {
-        error
-      } = data.security.role;
-      if (error) {
-        goToRoute(Routes.Roles.List);
-        showSnackbar(error.message);
-      }
-    }
-  });
-  const [create, createMutation] = useMutation(CREATE_ROLE, {
-    refetchQueries: [{
-      query: LIST_ROLES
-    }]
-  });
-  const [update, updateMutation] = useMutation(UPDATE_ROLE, {
-    refetchQueries: [{
-      query: LIST_ROLES
-    }]
-  });
-  const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);
-  const onSubmit = useCallback(async ({
-    id,
-    name,
-    description,
-    slug,
-    permissions,
-    createdOn
-  }) => {
-    if (!permissions || !permissions.length) {
-      showSnackbar(t`You must configure permissions before saving!`, {
-        timeout: 60000,
-        dismissesOnAction: true
-      });
-      return;
-    }
-    const isUpdate = createdOn;
-    const [operation, args] = isUpdate ? [update, {
-      variables: {
-        id,
-        data: {
-          name,
-          permissions,
-          ...(description && {
-            description
-          })
+const RolesForm = ({ id, newEntry })=>{
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const getQuery = useQuery(READ_ROLE, {
+        variables: {
+            id
+        },
+        skip: !id,
+        onCompleted: (data)=>{
+            if (!data) return;
+            const { error } = data.security.role;
+            if (error) {
+                goToRoute(Routes.Roles.List);
+                showSnackbar(error.message);
+            }
         }
-      }
-    }] : [create, {
-      variables: {
-        data: {
-          name,
-          slug,
-          description,
-          permissions
-        }
-      }
-    }];
-    const response = await operation(args);
-    const {
-      data: role,
-      error
-    } = response.data.security.role;
-    if (error) {
-      return showSnackbar(error.message);
-    }
-    if (!isUpdate) {
-      goToRoute(Routes.Roles.List, {
-        id: role.id
-      });
-    }
-    showSnackbar(t`Role saved successfully!`);
-  }, [id]);
-  const data = loading ? {} : get(getQuery, "data.security.role.data", {});
-  const systemRole = data.slug === "full-access" || data.system;
-  const pluginRole = data.plugin ?? false;
-  const canModifyRole = !systemRole && !pluginRole;
-  const showEmptyView = !newEntry && !loading && isEmpty(data);
-  // Render "No content" selected view.
-  if (showEmptyView) {
-    return /*#__PURE__*/React.createElement(EmptyView, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      title: t`Click on the left side list to display role details or create a...`,
-      action: /*#__PURE__*/React.createElement(Button, {
-        icon: /*#__PURE__*/React.createElement(AddIcon, null),
-        text: t`New Role`,
-        "data-testid": "new-record-button",
-        onClick: () => {
-          goToRoute(Routes.Roles.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, {
-      pluginRole: pluginRole,
-      canModifyRole: canModifyRole,
-      newEntry: newEntry
-    })), /*#__PURE__*/React.createElement(SimpleFormHeader, {
-      title: "Permissions",
-      rounded: false
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex 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, systemRole && /*#__PURE__*/React.createElement(Grid.Column, {
-      span: 12
-    }, /*#__PURE__*/React.createElement(Alert, {
-      type: "warning",
-      title: "Permissions are locked"
-    }, "This is a protected system role and you can't modify its permissions.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(React.Fragment, null, canModifyRole && /*#__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, canModifyRole && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      variant: "secondary",
-      text: t`Cancel`,
-      onClick: () => {
-        goToRoute(Routes.Roles.List);
-      },
-      "data-testid": "pb.category.new.form.button.cancel"
-    }), /*#__PURE__*/React.createElement(Button, {
-      text: t`Save`,
-      "data-testid": "admin.am.role.new.save",
-      onClick: ev => {
-        form.submit(ev);
-      }
-    }))));
-  });
+    const [create, createMutation] = useMutation(CREATE_ROLE, {
+        refetchQueries: [
+            {
+                query: LIST_ROLES
+            }
+        ]
+    });
+    const [update, updateMutation] = useMutation(UPDATE_ROLE, {
+        refetchQueries: [
+            {
+                query: LIST_ROLES
+            }
+        ]
+    });
+    const loading = [
+        getQuery,
+        createMutation,
+        updateMutation
+    ].find((item)=>item.loading);
+    const onSubmit = useCallback(async ({ id, name, description, slug, permissions, createdOn })=>{
+        if (!permissions || !permissions.length) return void showSnackbar(t`You must configure permissions before saving!`, {
+            timeout: 60000,
+            dismissesOnAction: true
+        });
+        const isUpdate = createdOn;
+        const [operation, args] = isUpdate ? [
+            update,
+            {
+                variables: {
+                    id,
+                    data: {
+                        name,
+                        permissions,
+                        ...description && {
+                            description
+                        }
+                    }
+                }
+            }
+        ] : [
+            create,
+            {
+                variables: {
+                    data: {
+                        name,
+                        slug,
+                        description,
+                        permissions
+                    }
+                }
+            }
+        ];
+        const response = await operation(args);
+        const { data: role, error } = response.data.security.role;
+        if (error) return showSnackbar(error.message);
+        if (!isUpdate) goToRoute(Routes.Roles.List, {
+            id: role.id
+        });
+        showSnackbar(t`Role saved successfully!`);
+    }, [
+        id
+    ]);
+    const data = loading ? {} : get(getQuery, "data.security.role.data", {});
+    const systemRole = "full-access" === data.slug || data.system;
+    const pluginRole = data.plugin ?? false;
+    const canModifyRole = !systemRole && !pluginRole;
+    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 role details or create a...`,
+        action: /*#__PURE__*/ react.createElement(Button, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            text: t`New Role`,
+            "data-testid": "new-record-button",
+            onClick: ()=>{
+                goToRoute(Routes.Roles.List, {
+                    new: true
+                });
+            }
+        })
+    });
+    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, {
+            pluginRole: pluginRole,
+            canModifyRole: canModifyRole,
+            newEntry: newEntry
+        })), /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+            title: "Permissions",
+            rounded: false
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex justify-end"
+        }, /*#__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(data.permissions, null, 2));
+                    showSnackbar("JSON data copied to clipboard.");
+                }
+            })
+        }))), /*#__PURE__*/ react.createElement(SimpleFormContent, null, systemRole && /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            type: "warning",
+            title: "Permissions are locked"
+        }, "This is a protected system role and you can't modify its permissions.")), /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(react.Fragment, null, canModifyRole && /*#__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, canModifyRole && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: t`Cancel`,
+            onClick: ()=>{
+                goToRoute(Routes.Roles.List);
+            },
+            "data-testid": "pb.category.new.form.button.cancel"
+        }), /*#__PURE__*/ react.createElement(Button, {
+            text: t`Save`,
+            "data-testid": "admin.am.role.new.save",
+            onClick: (ev)=>{
+                form.submit(ev);
+            }
+        })))));
 };
-const FormContent = props => {
-  const {
-    pluginRole,
-    canModifyRole,
-    newEntry
-  } = props;
-  const form = useForm();
-  const {
-    generateSlug
-  } = useGenerateSlug(form, "name", "slug");
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(React.Fragment, null, pluginRole && /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Alert, {
-    type: "warning",
-    title: "Permissions are locked"
-  }, "This role is registered via an extension, and cannot be modified.")), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "name",
-    validators: validation.create("required,minLength:1")
-  }, /*#__PURE__*/React.createElement(Input, {
-    required: true,
-    label: t`Name`,
-    disabled: !canModifyRole,
-    onBlur: generateSlug,
-    "data-testid": "admin.am.role.new.name"
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 6
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "slug",
-    validators: validation.create("required,minLength:1")
-  }, /*#__PURE__*/React.createElement(Input, {
-    required: true,
-    disabled: !canModifyRole || !newEntry,
-    label: t`Slug`,
-    "data-testid": "admin.am.role.new.slug"
-  }))), /*#__PURE__*/React.createElement(Grid.Column, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Bind, {
-    name: "description",
-    validators: validation.create("maxLength:500"),
-    defaultValue: ""
-  }, /*#__PURE__*/React.createElement(Textarea, {
-    label: t`Description`,
-    rows: 3,
-    disabled: !canModifyRole,
-    "data-testid": "admin.am.role.new.description"
-  })))));
+const FormContent = (props)=>{
+    const { pluginRole, canModifyRole, newEntry } = props;
+    const form = useForm();
+    const { generateSlug } = useGenerateSlug(form, "name", "slug");
+    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(react.Fragment, null, pluginRole && /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        title: "Permissions are locked"
+    }, "This role is registered via an extension, and cannot be modified.")), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "name",
+        validators: validation.create("required,minLength:1")
+    }, /*#__PURE__*/ react.createElement(Input, {
+        required: true,
+        label: t`Name`,
+        disabled: !canModifyRole,
+        onBlur: generateSlug,
+        "data-testid": "admin.am.role.new.name"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 6
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "slug",
+        validators: validation.create("required,minLength:1")
+    }, /*#__PURE__*/ react.createElement(Input, {
+        required: true,
+        disabled: !canModifyRole || !newEntry,
+        label: t`Slug`,
+        "data-testid": "admin.am.role.new.slug"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(form_Bind, {
+        name: "description",
+        validators: validation.create("maxLength:500"),
+        defaultValue: ""
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: t`Description`,
+        rows: 3,
+        disabled: !canModifyRole,
+        "data-testid": "admin.am.role.new.description"
+    })))));
 };
+export { RolesForm };
 
 //# sourceMappingURL=RolesForm.js.map

package/ui/views/Roles/RolesForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMutation","useQuery","get","i18n","Bind","Form","useForm","useGenerateSlug","validation","SimpleForm","SimpleFormFooter","SimpleFormContent","SimpleFormHeader","Permissions","EmptyView","useRouter","useSnackbar","CREATE_ROLE","LIST_ROLES","READ_ROLE","UPDATE_ROLE","isEmpty","ReactComponent","AddIcon","CopyIcon","SettingsIcon","Alert","Button","Grid","IconButton","Input","OverlayLoader","Textarea","Tooltip","Routes","t","ns","RolesForm","id","newEntry","goToRoute","showSnackbar","getQuery","variables","skip","onCompleted","data","error","security","role","Roles","List","message","create","createMutation","refetchQueries","query","update","updateMutation","loading","find","item","onSubmit","name","description","slug","permissions","createdOn","length","timeout","dismissesOnAction","isUpdate","operation","args","response","systemRole","system","pluginRole","plugin","canModifyRole","showEmptyView","createElement","icon","title","action","text","onClick","new","form","size","FormContent","rounded","className","content","trigger","variant","navigator","clipboard","writeText","JSON","stringify","Column","span","type","Fragment","defaultValue","bind","Object","assign","ev","submit","props","generateSlug","validators","required","label","disabled","onBlur","rows"],"sources":["RolesForm.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Bind, Form, useForm, useGenerateSlug } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport {\n    SimpleForm,\n    SimpleFormFooter,\n    SimpleFormContent,\n    SimpleFormHeader,\n    Permissions,\n    EmptyView,\n    useRouter,\n    useSnackbar\n} from \"@webiny/app-admin\";\nimport { CREATE_ROLE, LIST_ROLES, READ_ROLE, UPDATE_ROLE } from \"./graphql.js\";\nimport isEmpty from \"lodash/isEmpty.js\";\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 { Role } from \"~/types.js\";\nimport {\n    Alert,\n    Button,\n    Grid,\n    IconButton,\n    Input,\n    OverlayLoader,\n    Textarea,\n    Tooltip\n} from \"@webiny/admin-ui\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-security/admin/roles/form\");\n\nexport interface RolesFormProps {\n    newEntry: boolean;\n    id: string | undefined;\n}\n\nexport const RolesForm = ({ id, newEntry }: RolesFormProps) => {\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n\n    const getQuery = useQuery(READ_ROLE, {\n        variables: { id },\n        skip: !id,\n        onCompleted: data => {\n            if (!data) {\n                return;\n            }\n\n            const { error } = data.security.role;\n            if (error) {\n                goToRoute(Routes.Roles.List);\n                showSnackbar(error.message);\n            }\n        }\n    });\n\n    const [create, createMutation] = useMutation(CREATE_ROLE, {\n        refetchQueries: [{ query: LIST_ROLES }]\n    });\n\n    const [update, updateMutation] = useMutation(UPDATE_ROLE, {\n        refetchQueries: [{ query: LIST_ROLES }]\n    });\n\n    const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);\n\n    const onSubmit = useCallback(\n        async ({ id, name, description, slug, permissions, createdOn }: Role) => {\n            if (!permissions || !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 = createdOn;\n            const [operation, args] = isUpdate\n                ? [\n                      update,\n                      {\n                          variables: {\n                              id,\n                              data: {\n                                  name,\n                                  permissions,\n                                  ...(description && { description })\n                              }\n                          }\n                      }\n                  ]\n                : [\n                      create,\n                      {\n                          variables: {\n                              data: {\n                                  name,\n                                  slug,\n                                  description,\n                                  permissions\n                              }\n                          }\n                      }\n                  ];\n\n            const response = await operation(args);\n\n            const { data: role, error } = response.data.security.role;\n            if (error) {\n                return showSnackbar(error.message);\n            }\n\n            if (!isUpdate) {\n                goToRoute(Routes.Roles.List, { id: role.id });\n            }\n            showSnackbar(t`Role saved successfully!`);\n        },\n        [id]\n    );\n\n    const data: Role = loading ? {} : get(getQuery, \"data.security.role.data\", {});\n\n    const systemRole = data.slug === \"full-access\" || data.system;\n    const pluginRole = data.plugin ?? false;\n    const canModifyRole = !systemRole && !pluginRole;\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 role details or create a...`}\n                action={\n                    <Button\n                        icon={<AddIcon />}\n                        text={t`New Role`}\n                        data-testid=\"new-record-button\"\n                        onClick={() => {\n                            goToRoute(Routes.Roles.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\n                                pluginRole={pluginRole}\n                                canModifyRole={canModifyRole}\n                                newEntry={newEntry}\n                            />\n                        </SimpleFormContent>\n                        <SimpleFormHeader title={\"Permissions\"} rounded={false}>\n                            <div className={\"flex 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                            {systemRole && (\n                                <Grid.Column span={12}>\n                                    <Alert type={\"warning\"} title={\"Permissions are locked\"}>\n                                        This is a protected system role and you can&apos;t modify\n                                        its permissions.\n                                    </Alert>\n                                </Grid.Column>\n                            )}\n                            <Grid>\n                                <>\n                                    {canModifyRole && (\n                                        <Grid.Column span={12}>\n                                            <Bind name={\"permissions\"} defaultValue={[]}>\n                                                {bind => (\n                                                    <Permissions id={data.id || \"new\"} {...bind} />\n                                                )}\n                                            </Bind>\n                                        </Grid.Column>\n                                    )}\n                                </>\n                            </Grid>\n                        </SimpleFormContent>\n                        <SimpleFormFooter>\n                            {canModifyRole && (\n                                <>\n                                    <Button\n                                        variant={\"secondary\"}\n                                        text={t`Cancel`}\n                                        onClick={() => {\n                                            goToRoute(Routes.Roles.List);\n                                        }}\n                                        data-testid=\"pb.category.new.form.button.cancel\"\n                                    />\n                                    <Button\n                                        text={t`Save`}\n                                        data-testid=\"admin.am.role.new.save\"\n                                        onClick={ev => {\n                                            form.submit(ev);\n                                        }}\n                                    />\n                                </>\n                            )}\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                );\n            }}\n        </Form>\n    );\n};\n\ninterface FormContentProps {\n    pluginRole: boolean;\n    canModifyRole: boolean;\n    newEntry: boolean;\n}\n\nconst FormContent = (props: FormContentProps) => {\n    const { pluginRole, canModifyRole, newEntry } = props;\n    const form = useForm();\n    const { generateSlug } = useGenerateSlug(form, \"name\", \"slug\");\n\n    return (\n        <Grid>\n            <>\n                {pluginRole && (\n                    <Grid.Column span={12}>\n                        <Alert type={\"warning\"} title={\"Permissions are locked\"}>\n                            This role is registered via an extension, and cannot be modified.\n                        </Alert>\n                    </Grid.Column>\n                )}\n                <Grid.Column span={6}>\n                    <Bind name=\"name\" validators={validation.create(\"required,minLength:1\")}>\n                        <Input\n                            required\n                            label={t`Name`}\n                            disabled={!canModifyRole}\n                            onBlur={generateSlug}\n                            data-testid=\"admin.am.role.new.name\"\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Bind name=\"slug\" validators={validation.create(\"required,minLength:1\")}>\n                        <Input\n                            required\n                            disabled={!canModifyRole || !newEntry}\n                            label={t`Slug`}\n                            data-testid=\"admin.am.role.new.slug\"\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind\n                        name=\"description\"\n                        validators={validation.create(\"maxLength:500\")}\n                        defaultValue={\"\"}\n                    >\n                        <Textarea\n                            label={t`Description`}\n                            rows={3}\n                            disabled={!canModifyRole}\n                            data-testid=\"admin.am.role.new.description\"\n                        />\n                    </Bind>\n                </Grid.Column>\n            </>\n        </Grid>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ui/views/Roles/RolesForm.js","sources":["../../../../src/ui/views/Roles/RolesForm.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Bind, Form, useForm, useGenerateSlug } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport {\n    SimpleForm,\n    SimpleFormFooter,\n    SimpleFormContent,\n    SimpleFormHeader,\n    Permissions,\n    EmptyView,\n    useRouter,\n    useSnackbar\n} from \"@webiny/app-admin\";\nimport { CREATE_ROLE, LIST_ROLES, READ_ROLE, UPDATE_ROLE } from \"./graphql.js\";\nimport isEmpty from \"lodash/isEmpty.js\";\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 { Role } from \"~/types.js\";\nimport {\n    Alert,\n    Button,\n    Grid,\n    IconButton,\n    Input,\n    OverlayLoader,\n    Textarea,\n    Tooltip\n} from \"@webiny/admin-ui\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-security/admin/roles/form\");\n\nexport interface RolesFormProps {\n    newEntry: boolean;\n    id: string | undefined;\n}\n\nexport const RolesForm = ({ id, newEntry }: RolesFormProps) => {\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n\n    const getQuery = useQuery(READ_ROLE, {\n        variables: { id },\n        skip: !id,\n        onCompleted: data => {\n            if (!data) {\n                return;\n            }\n\n            const { error } = data.security.role;\n            if (error) {\n                goToRoute(Routes.Roles.List);\n                showSnackbar(error.message);\n            }\n        }\n    });\n\n    const [create, createMutation] = useMutation(CREATE_ROLE, {\n        refetchQueries: [{ query: LIST_ROLES }]\n    });\n\n    const [update, updateMutation] = useMutation(UPDATE_ROLE, {\n        refetchQueries: [{ query: LIST_ROLES }]\n    });\n\n    const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);\n\n    const onSubmit = useCallback(\n        async ({ id, name, description, slug, permissions, createdOn }: Role) => {\n            if (!permissions || !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 = createdOn;\n            const [operation, args] = isUpdate\n                ? [\n                      update,\n                      {\n                          variables: {\n                              id,\n                              data: {\n                                  name,\n                                  permissions,\n                                  ...(description && { description })\n                              }\n                          }\n                      }\n                  ]\n                : [\n                      create,\n                      {\n                          variables: {\n                              data: {\n                                  name,\n                                  slug,\n                                  description,\n                                  permissions\n                              }\n                          }\n                      }\n                  ];\n\n            const response = await operation(args);\n\n            const { data: role, error } = response.data.security.role;\n            if (error) {\n                return showSnackbar(error.message);\n            }\n\n            if (!isUpdate) {\n                goToRoute(Routes.Roles.List, { id: role.id });\n            }\n            showSnackbar(t`Role saved successfully!`);\n        },\n        [id]\n    );\n\n    const data: Role = loading ? {} : get(getQuery, \"data.security.role.data\", {});\n\n    const systemRole = data.slug === \"full-access\" || data.system;\n    const pluginRole = data.plugin ?? false;\n    const canModifyRole = !systemRole && !pluginRole;\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 role details or create a...`}\n                action={\n                    <Button\n                        icon={<AddIcon />}\n                        text={t`New Role`}\n                        data-testid=\"new-record-button\"\n                        onClick={() => {\n                            goToRoute(Routes.Roles.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\n                                pluginRole={pluginRole}\n                                canModifyRole={canModifyRole}\n                                newEntry={newEntry}\n                            />\n                        </SimpleFormContent>\n                        <SimpleFormHeader title={\"Permissions\"} rounded={false}>\n                            <div className={\"flex 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                            {systemRole && (\n                                <Grid.Column span={12}>\n                                    <Alert type={\"warning\"} title={\"Permissions are locked\"}>\n                                        This is a protected system role and you can&apos;t modify\n                                        its permissions.\n                                    </Alert>\n                                </Grid.Column>\n                            )}\n                            <Grid>\n                                <>\n                                    {canModifyRole && (\n                                        <Grid.Column span={12}>\n                                            <Bind name={\"permissions\"} defaultValue={[]}>\n                                                {bind => (\n                                                    <Permissions id={data.id || \"new\"} {...bind} />\n                                                )}\n                                            </Bind>\n                                        </Grid.Column>\n                                    )}\n                                </>\n                            </Grid>\n                        </SimpleFormContent>\n                        <SimpleFormFooter>\n                            {canModifyRole && (\n                                <>\n                                    <Button\n                                        variant={\"secondary\"}\n                                        text={t`Cancel`}\n                                        onClick={() => {\n                                            goToRoute(Routes.Roles.List);\n                                        }}\n                                        data-testid=\"pb.category.new.form.button.cancel\"\n                                    />\n                                    <Button\n                                        text={t`Save`}\n                                        data-testid=\"admin.am.role.new.save\"\n                                        onClick={ev => {\n                                            form.submit(ev);\n                                        }}\n                                    />\n                                </>\n                            )}\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                );\n            }}\n        </Form>\n    );\n};\n\ninterface FormContentProps {\n    pluginRole: boolean;\n    canModifyRole: boolean;\n    newEntry: boolean;\n}\n\nconst FormContent = (props: FormContentProps) => {\n    const { pluginRole, canModifyRole, newEntry } = props;\n    const form = useForm();\n    const { generateSlug } = useGenerateSlug(form, \"name\", \"slug\");\n\n    return (\n        <Grid>\n            <>\n                {pluginRole && (\n                    <Grid.Column span={12}>\n                        <Alert type={\"warning\"} title={\"Permissions are locked\"}>\n                            This role is registered via an extension, and cannot be modified.\n                        </Alert>\n                    </Grid.Column>\n                )}\n                <Grid.Column span={6}>\n                    <Bind name=\"name\" validators={validation.create(\"required,minLength:1\")}>\n                        <Input\n                            required\n                            label={t`Name`}\n                            disabled={!canModifyRole}\n                            onBlur={generateSlug}\n                            data-testid=\"admin.am.role.new.name\"\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Bind name=\"slug\" validators={validation.create(\"required,minLength:1\")}>\n                        <Input\n                            required\n                            disabled={!canModifyRole || !newEntry}\n                            label={t`Slug`}\n                            data-testid=\"admin.am.role.new.slug\"\n                        />\n                    </Bind>\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Bind\n                        name=\"description\"\n                        validators={validation.create(\"maxLength:500\")}\n                        defaultValue={\"\"}\n                    >\n                        <Textarea\n                            label={t`Description`}\n                            rows={3}\n                            disabled={!canModifyRole}\n                            data-testid=\"admin.am.role.new.description\"\n                        />\n                    </Bind>\n                </Grid.Column>\n            </>\n        </Grid>\n    );\n};\n"],"names":["t","i18n","RolesForm","id","newEntry","goToRoute","useRouter","showSnackbar","useSnackbar","getQuery","useQuery","READ_ROLE","data","error","Routes","create","createMutation","useMutation","CREATE_ROLE","LIST_ROLES","update","updateMutation","UPDATE_ROLE","loading","item","onSubmit","useCallback","name","description","slug","permissions","createdOn","isUpdate","operation","args","response","role","get","systemRole","pluginRole","canModifyRole","showEmptyView","isEmpty","EmptyView","SettingsIcon","Button","AddIcon","Form","form","Bind","SimpleForm","OverlayLoader","SimpleFormHeader","SimpleFormContent","FormContent","Tooltip","IconButton","CopyIcon","navigator","JSON","Grid","Alert","bind","Permissions","SimpleFormFooter","ev","props","useForm","generateSlug","useGenerateSlug","validation","Input","Textarea"],"mappings":"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"}

package/ui/views/Roles/graphql.js

@@ -1,4 +1,4 @@
-import gql from "graphql-tag";
+import graphql_tag from "graphql-tag";
 const fields = `
     id
     name
@@ -9,7 +9,7 @@ const fields = `
     plugin
     createdOn
 `;
-export const LIST_ROLES = gql`
+const LIST_ROLES = graphql_tag`
     query listRoles {
         security {
             roles: listRoles {
@@ -20,7 +20,7 @@ export const LIST_ROLES = gql`
         }
     }
 `;
-export const READ_ROLE = gql`
+const READ_ROLE = graphql_tag`
     query getRole($id: ID!) {
         security {
             role: getRole(where: { id: $id }){
@@ -35,7 +35,7 @@ export const READ_ROLE = gql`
         }
     }
 `;
-export const CREATE_ROLE = gql`
+const CREATE_ROLE = graphql_tag`
     mutation createRole($data: SecurityRoleCreateInput!){
         security {
             role: createRole(data: $data) {
@@ -51,7 +51,7 @@ export const CREATE_ROLE = gql`
         }
     }
 `;
-export const UPDATE_ROLE = gql`
+const UPDATE_ROLE = graphql_tag`
     mutation updateRole($id: ID!, $data: SecurityRoleUpdateInput!){
         security {
             role: updateRole(id: $id, data: $data) {
@@ -67,7 +67,7 @@ export const UPDATE_ROLE = gql`
         }
     }
 `;
-export const DELETE_ROLE = gql`
+const DELETE_ROLE = graphql_tag`
     mutation deleteRole($id: ID!) {
         security {
             deleteRole(id: $id) {
@@ -81,5 +81,6 @@ export const DELETE_ROLE = gql`
         }
     }
 `;
+export { CREATE_ROLE, DELETE_ROLE, LIST_ROLES, READ_ROLE, UPDATE_ROLE };
 
 //# sourceMappingURL=graphql.js.map

package/ui/views/Roles/graphql.js.map

@@ -1 +1 @@
-{"version":3,"names":["gql","fields","LIST_ROLES","READ_ROLE","CREATE_ROLE","UPDATE_ROLE","DELETE_ROLE"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\nimport type { Role } from \"~/types.js\";\n\nconst fields = `\n    id\n    name\n    slug\n    description\n    permissions\n    system\n    plugin\n    createdOn\n`;\n\nexport interface ListRolesResponse {\n    security: {\n        roles: {\n            data: Role[];\n        };\n    };\n}\n\nexport const LIST_ROLES = gql`\n    query listRoles {\n        security {\n            roles: listRoles {\n                data {\n                    ${fields}\n                }\n            }\n        }\n    }\n`;\n\nexport const READ_ROLE = gql`\n    query getRole($id: ID!) {\n        security {\n            role: getRole(where: { id: $id }){\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n`;\n\nexport const CREATE_ROLE = gql`\n    mutation createRole($data: SecurityRoleCreateInput!){\n        security {\n            role: createRole(data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const UPDATE_ROLE = gql`\n    mutation updateRole($id: ID!, $data: SecurityRoleUpdateInput!){\n        security {\n            role: updateRole(id: $id, data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const DELETE_ROLE = gql`\n    mutation deleteRole($id: ID!) {\n        security {\n            deleteRole(id: $id) {\n                data\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,aAAa;AAG7B,MAAMC,MAAM,GAAG;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,UAAU,GAAGF,GAAG;AAC7B;AACA;AACA;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,SAAS,GAAGH,GAAG;AAC5B;AACA;AACA;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,WAAW,GAAGJ,GAAG;AAC9B;AACA;AACA;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,WAAW,GAAGL,GAAG;AAC9B;AACA;AACA;AACA;AACA,sBAAsBC,MAAM;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,WAAW,GAAGN,GAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ui/views/Roles/graphql.js","sources":["../../../../src/ui/views/Roles/graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\nimport type { Role } from \"~/types.js\";\n\nconst fields = `\n    id\n    name\n    slug\n    description\n    permissions\n    system\n    plugin\n    createdOn\n`;\n\nexport interface ListRolesResponse {\n    security: {\n        roles: {\n            data: Role[];\n        };\n    };\n}\n\nexport const LIST_ROLES = gql`\n    query listRoles {\n        security {\n            roles: listRoles {\n                data {\n                    ${fields}\n                }\n            }\n        }\n    }\n`;\n\nexport const READ_ROLE = gql`\n    query getRole($id: ID!) {\n        security {\n            role: getRole(where: { id: $id }){\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n`;\n\nexport const CREATE_ROLE = gql`\n    mutation createRole($data: SecurityRoleCreateInput!){\n        security {\n            role: createRole(data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const UPDATE_ROLE = gql`\n    mutation updateRole($id: ID!, $data: SecurityRoleUpdateInput!){\n        security {\n            role: updateRole(id: $id, data: $data) {\n                data {\n                    ${fields}\n                }\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n\nexport const DELETE_ROLE = gql`\n    mutation deleteRole($id: ID!) {\n        security {\n            deleteRole(id: $id) {\n                data\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n`;\n"],"names":["fields","LIST_ROLES","gql","READ_ROLE","CREATE_ROLE","UPDATE_ROLE","DELETE_ROLE"],"mappings":";AAGA,MAAMA,SAAS,CAAC;;;;;;;;;AAShB,CAAC;AAUM,MAAMC,aAAaC,WAAG,CAAC;;;;;oBAKV,EAAEF,OAAO;;;;;AAK7B,CAAC;AAEM,MAAMG,YAAYD,WAAG,CAAC;;;;;oBAKT,EAAEF,OAAO;;;;;;;;;AAS7B,CAAC;AAEM,MAAMI,cAAcF,WAAG,CAAC;;;;;oBAKX,EAAEF,OAAO;;;;;;;;;;AAU7B,CAAC;AAEM,MAAMK,cAAcH,WAAG,CAAC;;;;;oBAKX,EAAEF,OAAO;;;;;;;;;;AAU7B,CAAC;AAEM,MAAMM,cAAcJ,WAAG,CAAC;;;;;;;;;;;;;AAa/B,CAAC"}

package/ui/views/Roles/index.js

@@ -1,3 +1 @@
 export * from "./Roles.js";
-
-//# sourceMappingURL=index.js.map

package/ui/views/Teams/Teams.js

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