@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.0156a4c312

package/presentation/adminUsers/views/Users/UsersDataList.js

@@ -0,0 +1,180 @@
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import orderBy from "lodash/orderBy.js";
+import { useFeature, useRouter } from "@webiny/app";
+import { Avatar, Button, DataList, DataListModal, DeleteIcon, Grid, List, Select, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useSecurity } from "../../../security/hooks/useSecurity.js";
+import { useSnackbar } from "../../../../hooks/useSnackbar.js";
+import { useConfirmationDialog } from "../../../../hooks/useConfirmationDialog.js";
+import { SearchUI } from "../../../../components/SearchUI.js";
+import { ListUsersFeature } from "../../../../features/adminUsers/users/listUsers/index.js";
+import { DeleteUserFeature } from "../../../../features/adminUsers/users/deleteUser/index.js";
+import { deserializeSorters } from "../utils.js";
+import { Routes } from "../../routes.js";
+const t = i18n.ns("app-identity/admin/users/data-list");
+const SORTERS = [
+    {
+        label: t`Newest to oldest`,
+        sorter: "createdOn_DESC"
+    },
+    {
+        label: t`Oldest to newest`,
+        sorter: "createdOn_ASC"
+    },
+    {
+        label: t`Email A-Z`,
+        sorter: "email_ASC"
+    },
+    {
+        label: t`Email Z-A`,
+        sorter: "email_DESC"
+    }
+];
+const UsersDataList = ()=>{
+    const [filter, setFilter] = useState("");
+    const [sort, setSort] = useState(SORTERS[0].sorter);
+    const [users, setUsers] = useState([]);
+    const [usersLoading, setUsersLoading] = useState(true);
+    const [deleteLoading, setDeleteLoading] = useState(false);
+    const { identity } = useSecurity();
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const { showConfirmation } = useConfirmationDialog({
+        dataTestId: "default-data-list.delete-dialog",
+        title: "Delete user",
+        message: "Are you sure you want to delete this user? This action cannot be undone."
+    });
+    const { useCase: listUsers } = useFeature(ListUsersFeature);
+    const { useCase: deleteUser } = useFeature(DeleteUserFeature);
+    const fetchUsers = useCallback(()=>{
+        setUsersLoading(true);
+        listUsers.execute().then((data)=>{
+            setUsers(data || []);
+            setUsersLoading(false);
+        });
+    }, [
+        listUsers
+    ]);
+    useEffect(()=>{
+        fetchUsers();
+    }, []);
+    const filterUsers = useCallback(({ email, firstName, lastName })=>email.toLowerCase().includes(filter) || firstName.toLowerCase().includes(filter) || lastName.toLowerCase().includes(filter), [
+        filter
+    ]);
+    const sortUsers = useCallback((list)=>{
+        if (!sort) return list;
+        const [key, sortBy] = deserializeSorters(sort);
+        return orderBy(list, [
+            key
+        ], [
+            sortBy
+        ]);
+    }, [
+        sort
+    ]);
+    const filteredData = "" === filter ? users : users.filter(filterUsers);
+    const userList = sortUsers(filteredData);
+    const id = new URLSearchParams(location.search).get("id");
+    const deleteItem = useCallback((item)=>{
+        showConfirmation(async ()=>{
+            setDeleteLoading(true);
+            try {
+                await deleteUser.execute({
+                    id: item.id
+                });
+                showSnackbar(t`User "{email}" deleted.`({
+                    email: item.email
+                }));
+                fetchUsers();
+                if (id === item.id) goToRoute(Routes.Users.List);
+            } catch (error) {
+                const message = error instanceof Error ? error.message : "Unknown error";
+                showSnackbar(message);
+            } finally{
+                setDeleteLoading(false);
+            }
+        });
+    }, [
+        id,
+        deleteUser,
+        fetchUsers
+    ]);
+    const usersDataListModalOverlay = useMemo(()=>/*#__PURE__*/ react.createElement(DataListModal.Content, null, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Select, {
+            value: sort,
+            onChange: setSort,
+            label: t`Sort by`,
+            options: SORTERS.map(({ label, sorter: value })=>({
+                    label,
+                    value
+                }))
+        })))), [
+        sort
+    ]);
+    const loading = usersLoading || deleteLoading;
+    return /*#__PURE__*/ react.createElement(DataList, {
+        title: t`Admin Users`,
+        actions: /*#__PURE__*/ react.createElement(Button, {
+            text: t`New`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            className: "ml-xs",
+            "data-testid": "new-record-button",
+            onClick: ()=>{
+                goToRoute(Routes.Users.List, {
+                    new: true
+                });
+            }
+        }),
+        data: userList,
+        loading: loading,
+        search: /*#__PURE__*/ react.createElement(SearchUI, {
+            value: filter,
+            onChange: setFilter,
+            inputPlaceholder: t`Search users...`
+        }),
+        modalOverlay: usersDataListModalOverlay,
+        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
+            "data-testid": "default-data-list.filter"
+        }),
+        showOptions: {
+            refresh: false
+        }
+    }, ({ data })=>/*#__PURE__*/ react.createElement(List, {
+            "data-testid": "default-data-list"
+        }, data.map((item)=>/*#__PURE__*/ react.createElement(List.Item, {
+                key: item.id,
+                selected: item.id === id,
+                title: `${item.firstName} ${item.lastName}`,
+                description: item.email,
+                icon: /*#__PURE__*/ react.createElement(Avatar, {
+                    image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+                        src: item.avatar ? item.avatar.src : void 0,
+                        alt: item.firstName
+                    }),
+                    fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, {
+                        delayMs: 0
+                    }, item.firstName ? item.firstName.charAt(0) : "A")
+                }),
+                onClick: ()=>{
+                    goToRoute(Routes.Users.List, {
+                        id: item.id
+                    });
+                },
+                actions: identity && identity.id !== item.id ? /*#__PURE__*/ react.createElement(DeleteIcon, {
+                    onClick: ()=>deleteItem(item),
+                    "data-testid": "default-data-list.delete"
+                }) : /*#__PURE__*/ react.createElement(Tooltip, {
+                    content: /*#__PURE__*/ react.createElement("span", null, t`You can't delete your own user account.`),
+                    trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
+                        disabled: true
+                    })
+                })
+            }))));
+};
+const Users_UsersDataList = UsersDataList;
+export default Users_UsersDataList;
+
+//# sourceMappingURL=UsersDataList.js.map

package/presentation/adminUsers/views/Users/UsersDataList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/views/Users/UsersDataList.js","sources":["../../../../../src/presentation/adminUsers/views/Users/UsersDataList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { useFeature } from \"@webiny/app\";\nimport { Avatar, Button, Grid, Select, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useSecurity } from \"~/presentation/security/hooks/useSecurity.js\";\nimport { List, DataList, DataListModal, DeleteIcon } from \"@webiny/admin-ui\";\nimport { useRouter } from \"@webiny/app\";\nimport { useSnackbar } from \"~/hooks/useSnackbar.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { SearchUI } from \"~/components/SearchUI.js\";\nimport { ListUsersFeature } from \"~/features/adminUsers/users/listUsers/index.js\";\nimport { DeleteUserFeature } from \"~/features/adminUsers/users/deleteUser/index.js\";\nimport { deserializeSorters } from \"../utils.js\";\nimport { Routes } from \"~/presentation/adminUsers/routes.js\";\nimport type { UserItem } from \"~/presentation/adminUsers/UserItem.js\";\n\nconst t = i18n.ns(\"app-identity/admin/users/data-list\");\n\nconst SORTERS = [\n    {\n        label: t`Newest to oldest`,\n        sorter: \"createdOn_DESC\"\n    },\n    {\n        label: t`Oldest to newest`,\n        sorter: \"createdOn_ASC\"\n    },\n    {\n        label: t`Email A-Z`,\n        sorter: \"email_ASC\"\n    },\n    {\n        label: t`Email Z-A`,\n        sorter: \"email_DESC\"\n    }\n];\n\ninterface FilterUsersCallable {\n    (user: Pick<UserItem, \"email\" | \"firstName\" | \"lastName\">): boolean;\n}\n\nconst UsersDataList = () => {\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState<string>(SORTERS[0].sorter);\n    const [users, setUsers] = useState<UserItem[]>([]);\n    const [usersLoading, setUsersLoading] = useState(true);\n    const [deleteLoading, setDeleteLoading] = useState(false);\n    const { identity } = useSecurity();\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"default-data-list.delete-dialog\",\n        title: \"Delete user\",\n        message: \"Are you sure you want to delete this user? This action cannot be undone.\"\n    });\n\n    const { useCase: listUsers } = useFeature(ListUsersFeature);\n    const { useCase: deleteUser } = useFeature(DeleteUserFeature);\n\n    const fetchUsers = useCallback(() => {\n        setUsersLoading(true);\n        listUsers.execute().then(data => {\n            setUsers((data || []) as UserItem[]);\n            setUsersLoading(false);\n        });\n    }, [listUsers]);\n\n    useEffect(() => {\n        fetchUsers();\n    }, []);\n\n    const filterUsers = useCallback<FilterUsersCallable>(\n        ({ email, firstName, lastName }) => {\n            return (\n                email.toLowerCase().includes(filter) ||\n                firstName.toLowerCase().includes(filter) ||\n                lastName.toLowerCase().includes(filter)\n            );\n        },\n        [filter]\n    );\n\n    const sortUsers = useCallback(\n        (list: UserItem[]) => {\n            if (!sort) {\n                return list;\n            }\n            const [key, sortBy] = deserializeSorters(sort);\n            return orderBy(list, [key], [sortBy]);\n        },\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? users : users.filter(filterUsers);\n    const userList = sortUsers(filteredData);\n    const id = new URLSearchParams(location.search).get(\"id\");\n\n    const deleteItem = useCallback(\n        (item: Pick<UserItem, \"id\" | \"email\">) => {\n            showConfirmation(async () => {\n                setDeleteLoading(true);\n                try {\n                    await deleteUser.execute({ id: item.id });\n                    showSnackbar(t`User \"{email}\" deleted.`({ email: item.email }));\n                    fetchUsers();\n\n                    if (id === item.id) {\n                        goToRoute(Routes.Users.List);\n                    }\n                } catch (error) {\n                    const message = error instanceof Error ? error.message : \"Unknown error\";\n                    showSnackbar(message);\n                } finally {\n                    setDeleteLoading(false);\n                }\n            });\n        },\n        [id, deleteUser, fetchUsers]\n    );\n\n    const usersDataListModalOverlay = useMemo(\n        () => (\n            <DataListModal.Content>\n                <Grid>\n                    <Grid.Column span={12}>\n                        <Select\n                            value={sort}\n                            onChange={setSort}\n                            label={t`Sort by`}\n                            options={SORTERS.map(({ label, sorter: value }) => ({\n                                label,\n                                value\n                            }))}\n                        />\n                    </Grid.Column>\n                </Grid>\n            </DataListModal.Content>\n        ),\n        [sort]\n    );\n\n    const loading = usersLoading || deleteLoading;\n\n    return (\n        <DataList\n            title={t`Admin Users`}\n            actions={\n                <Button\n                    text={t`New`}\n                    icon={<AddIcon />}\n                    size={\"sm\"}\n                    className={\"ml-xs\"}\n                    data-testid=\"new-record-button\"\n                    onClick={() => {\n                        goToRoute(Routes.Users.List, { new: true });\n                    }}\n                />\n            }\n            data={userList}\n            loading={loading}\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search users...`}\n                />\n            }\n            modalOverlay={usersDataListModalOverlay}\n            modalOverlayAction={<DataListModal.Trigger data-testid={\"default-data-list.filter\"} />}\n            showOptions={{\n                refresh: false\n            }}\n        >\n            {({ data }: { data: UserItem[] }) => (\n                <List data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <List.Item\n                            key={item.id}\n                            selected={item.id === id}\n                            title={`${item.firstName} ${item.lastName}`}\n                            description={item.email}\n                            icon={\n                                <Avatar\n                                    image={\n                                        <Avatar.Image\n                                            src={item.avatar ? item.avatar.src : undefined}\n                                            alt={item.firstName}\n                                        />\n                                    }\n                                    fallback={\n                                        <Avatar.Fallback delayMs={0}>\n                                            {item.firstName ? item.firstName.charAt(0) : \"A\"}\n                                        </Avatar.Fallback>\n                                    }\n                                />\n                            }\n                            onClick={() => {\n                                goToRoute(Routes.Users.List, { id: item.id });\n                            }}\n                            actions={\n                                identity && identity.id !== item.id ? (\n                                    <DeleteIcon\n                                        onClick={() => deleteItem(item)}\n                                        data-testid={\"default-data-list.delete\"}\n                                    />\n                                ) : (\n                                    <Tooltip\n                                        content={\n                                            <span>{t`You can't delete your own user account.`}</span>\n                                        }\n                                        trigger={<DeleteIcon disabled />}\n                                    />\n                                )\n                            }\n                        />\n                    ))}\n                </List>\n            )}\n        </DataList>\n    );\n};\n\nexport default UsersDataList;\n"],"names":["t","i18n","SORTERS","UsersDataList","filter","setFilter","useState","sort","setSort","users","setUsers","usersLoading","setUsersLoading","deleteLoading","setDeleteLoading","identity","useSecurity","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","listUsers","useFeature","ListUsersFeature","deleteUser","DeleteUserFeature","fetchUsers","useCallback","data","useEffect","filterUsers","email","firstName","lastName","sortUsers","list","key","sortBy","deserializeSorters","orderBy","filteredData","userList","id","URLSearchParams","location","deleteItem","item","Routes","error","message","Error","usersDataListModalOverlay","useMemo","DataListModal","Grid","Select","label","value","loading","DataList","Button","AddIcon","SearchUI","List","Avatar","undefined","DeleteIcon","Tooltip"],"mappings":"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"}

package/presentation/adminUsers/views/Users/UsersForm.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface UserFormProps {
+    teams: boolean;
+}
+export declare const UserForm: ({ teams }: UserFormProps) => React.JSX.Element;

package/presentation/adminUsers/views/Users/UsersForm.js

@@ -0,0 +1,175 @@
+import react, { useMemo } from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Form } from "@webiny/form";
+import { validation as validation_validation } from "@webiny/validation";
+import { SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader } from "../../../../components/SimpleForm/index.js";
+import { EmptyView } from "../../../../components/EmptyView.js";
+import { RolesMultiAutocomplete } from "../../../../components/RolesMultiAutocomplete/index.js";
+import { TeamsMultiAutocomplete } from "../../../../components/TeamsMultiAutocomplete/index.js";
+import { useAuthentication } from "../../../security/hooks/useAuthentication.js";
+import { useFeature, useRouter } from "@webiny/app";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as gpp_maybe_svg_ReactComponent } from "@webiny/icons/gpp_maybe.svg";
+import { ReactComponent as admin_panel_settings_svg_ReactComponent } from "@webiny/icons/admin_panel_settings.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
+import { Accordion, Alert, Button, Grid, Input, Link, OverlayLoader } from "@webiny/admin-ui";
+import { AvatarImage } from "../../components/AvatarImage/index.js";
+import { useUserForm } from "./hooks/useUserForm.js";
+import { PasswordPolicyFeature } from "../../../../features/adminUsers/passwordPolicy/index.js";
+import { Routes } from "../../routes.js";
+const t = i18n.ns("app-security-admin-users/account-form");
+const UserForm = ({ teams })=>{
+    const { identity } = useAuthentication();
+    const userForm = useUserForm();
+    const { passwordPolicy } = useFeature(PasswordPolicyFeature);
+    const { getLink } = useRouter();
+    const isExternal = userForm.user?.external === true;
+    const formTitle = userForm.isNewUser ? "New User" : userForm.fullName;
+    const isNewUser = userForm.isNewUser;
+    const emailIsDisabled = !isNewUser;
+    let emailDescription = "Email is your unique identifier used to login. It can't be changed!";
+    if (isNewUser) emailDescription = "Email is your unique identifier used to login. It can't be changed later!";
+    const groupValidators = useMemo(()=>teams ? [] : [
+            validation_validation.create("required")
+        ], [
+        teams
+    ]);
+    const accountLink = getLink(Routes.Users.Account);
+    if (userForm.showEmptyView) return /*#__PURE__*/ react.createElement(EmptyView, {
+        icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+        title: t`Click on the left side list to display user details or create a...`,
+        action: /*#__PURE__*/ react.createElement(Button, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            text: t`New User`,
+            "data-testid": "new-record-button",
+            onClick: userForm.createUser
+        })
+    });
+    const isSelf = userForm.user?.id === identity.id;
+    const isDisabled = isExternal || isSelf;
+    return /*#__PURE__*/ react.createElement(Form, {
+        data: userForm.user,
+        onSubmit: userForm.onSubmit
+    }, ({ data, form, Bind })=>/*#__PURE__*/ react.createElement(SimpleForm, {
+            size: "lg"
+        }, userForm.loading && /*#__PURE__*/ react.createElement(OverlayLoader, null), /*#__PURE__*/ react.createElement("div", {
+            className: "mb-xl"
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "avatar"
+        }, /*#__PURE__*/ react.createElement(AvatarImage, {
+            round: true,
+            disabled: isDisabled
+        }))), /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+            title: formTitle
+        }), /*#__PURE__*/ react.createElement(SimpleFormContent, null, isExternal && /*#__PURE__*/ react.createElement(Grid, {
+            className: "mb-lg"
+        }, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            type: "info",
+            title: "External User"
+        }, "This user is an external user and cannot be edited."))), isSelf && /*#__PURE__*/ react.createElement(Grid, {
+            className: "mb-lg"
+        }, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            type: "info",
+            title: "Own Profile"
+        }, "You cannot edit your own profile using this form. Please use the ", /*#__PURE__*/ react.createElement(Link, {
+            to: accountLink
+        }, "account settings"), " instead."))), /*#__PURE__*/ react.createElement(Accordion, {
+            variant: "underline"
+        }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Bio",
+            description: "Account information",
+            icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+            defaultOpen: true
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "firstName",
+            validators: validation_validation.create("required")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: t`First Name`,
+            disabled: isDisabled,
+            "data-testid": "account.firstname"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "lastName",
+            validators: validation_validation.create("required")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: t`Last Name`,
+            disabled: isDisabled,
+            "data-testid": "account.lastname"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "email",
+            validators: validation_validation.create("required,email")
+        }, /*#__PURE__*/ react.createElement(Input, {
+            value: data.email,
+            label: t`Email`,
+            disabled: emailIsDisabled || isDisabled,
+            "data-testid": "account.email",
+            autoComplete: "new-password",
+            description: emailDescription
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "password",
+            validators: (value)=>passwordPolicy.validate(value)
+        }, /*#__PURE__*/ react.createElement(Input, {
+            autoComplete: "new-password",
+            disabled: isDisabled,
+            description: data.id && "Type a new password to reset it.",
+            type: "password",
+            label: "Password",
+            "data-testid": "account.password"
+        }))))), /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Roles",
+            description: "Assign to security roles",
+            icon: /*#__PURE__*/ react.createElement(gpp_maybe_svg_ReactComponent, null)
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "roles",
+            validators: groupValidators
+        }, ({ value, onChange, validation })=>/*#__PURE__*/ react.createElement(RolesMultiAutocomplete, {
+                values: value,
+                onChange: onChange,
+                validation: validation,
+                label: "Roles",
+                "data-testid": "roles-autocomplete",
+                disabled: isDisabled
+            }))))), teams ? /*#__PURE__*/ react.createElement(Accordion.Item, {
+            title: "Teams",
+            description: "Assign to teams",
+            icon: /*#__PURE__*/ react.createElement(admin_panel_settings_svg_ReactComponent, null)
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "teams"
+        }, ({ value, onChange, validation })=>/*#__PURE__*/ react.createElement(TeamsMultiAutocomplete, {
+                values: value,
+                onChange: onChange,
+                validation: validation,
+                label: "Teams",
+                "data-testid": "teams-autocomplete",
+                disabled: isDisabled
+            }))))) : null)), /*#__PURE__*/ react.createElement(SimpleFormFooter, {
+            "data-testid": "form-footer"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: t`Cancel`,
+            onClick: userForm.cancelEditing
+        }), /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: isNewUser ? t`Create user` : t`Update user`,
+            disabled: isDisabled,
+            onClick: form.submit
+        }))));
+};
+export { UserForm };
+
+//# sourceMappingURL=UsersForm.js.map

package/presentation/adminUsers/views/Users/UsersForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/views/Users/UsersForm.js","sources":["../../../../../src/presentation/adminUsers/views/Users/UsersForm.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport {\n    SimpleForm,\n    SimpleFormHeader,\n    SimpleFormFooter,\n    SimpleFormContent\n} from \"~/components/SimpleForm/index.js\";\nimport { EmptyView } from \"~/components/EmptyView.js\";\nimport { RolesMultiAutocomplete } from \"~/components/RolesMultiAutocomplete/index.js\";\nimport { TeamsMultiAutocomplete } from \"~/components/TeamsMultiAutocomplete/index.js\";\nimport { useAuthentication } from \"~/presentation/security/hooks/useAuthentication.js\";\nimport { useRouter } from \"@webiny/app\";\nimport { useFeature } from \"@webiny/app\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as SecurityIcon } from \"@webiny/icons/gpp_maybe.svg\";\nimport { ReactComponent as SecurityTeamsIcon } from \"@webiny/icons/admin_panel_settings.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { Accordion, Alert, OverlayLoader, Button, Input, Grid, Link } from \"@webiny/admin-ui\";\nimport { AvatarImage } from \"../../components/AvatarImage/index.js\";\nimport { useUserForm } from \"~/presentation/adminUsers/views/Users/hooks/useUserForm.js\";\nimport { PasswordPolicyFeature } from \"~/features/adminUsers/passwordPolicy/index.js\";\nimport { Routes } from \"~/presentation/adminUsers/routes.js\";\n\nconst t = i18n.ns(\"app-security-admin-users/account-form\");\n\nexport interface UserFormProps {\n    teams: boolean;\n}\n\nexport const UserForm = ({ teams }: UserFormProps) => {\n    const { identity } = useAuthentication();\n    const userForm = useUserForm();\n    const { passwordPolicy } = useFeature(PasswordPolicyFeature);\n    const { getLink } = useRouter();\n\n    const isExternal = userForm.user?.external === true;\n    const formTitle = userForm.isNewUser ? \"New User\" : userForm.fullName;\n    const isNewUser = userForm.isNewUser;\n\n    // The email is the sign-in key, so it is set once, when the user is created.\n    const emailIsDisabled = !isNewUser;\n    let emailDescription = \"Email is your unique identifier used to login. It can't be changed!\";\n    if (isNewUser) {\n        emailDescription =\n            \"Email is your unique identifier used to login. It can't be changed later!\";\n    }\n\n    const groupValidators = useMemo(() => {\n        return teams ? [] : [validation.create(\"required\")];\n    }, [teams]);\n\n    const accountLink = getLink(Routes.Users.Account);\n\n    // Render \"No content\" selected view.\n    if (userForm.showEmptyView) {\n        return (\n            <EmptyView\n                icon={<SettingsIcon />}\n                title={t`Click on the left side list to display user details or create a...`}\n                action={\n                    <Button\n                        icon={<AddIcon />}\n                        text={t`New User`}\n                        data-testid=\"new-record-button\"\n                        onClick={userForm.createUser}\n                    />\n                }\n            />\n        );\n    }\n\n    const isSelf = userForm.user?.id === identity.id;\n    const isDisabled = isExternal || isSelf;\n\n    return (\n        <Form data={userForm.user} onSubmit={userForm.onSubmit}>\n            {({ data, form, Bind }) => (\n                <SimpleForm size={\"lg\"}>\n                    {userForm.loading && <OverlayLoader />}\n                    <div className={\"mb-xl\"}>\n                        <Bind name=\"avatar\">\n                            <AvatarImage round disabled={isDisabled} />\n                        </Bind>\n                    </div>\n                    <SimpleFormHeader title={formTitle} />\n                    <SimpleFormContent>\n                        {isExternal && (\n                            <Grid className={\"mb-lg\"}>\n                                <Grid.Column span={12}>\n                                    <Alert type={\"info\"} title={\"External User\"}>\n                                        This user is an external user and cannot be edited.\n                                    </Alert>\n                                </Grid.Column>\n                            </Grid>\n                        )}\n                        {isSelf && (\n                            <Grid className={\"mb-lg\"}>\n                                <Grid.Column span={12}>\n                                    <Alert type={\"info\"} title={\"Own Profile\"}>\n                                        You cannot edit your own profile using this form. Please use\n                                        the <Link to={accountLink}>account settings</Link> instead.\n                                    </Alert>\n                                </Grid.Column>\n                            </Grid>\n                        )}\n                        <Accordion variant={\"underline\"}>\n                            <Accordion.Item\n                                title={\"Bio\"}\n                                description={\"Account information\"}\n                                icon={<SettingsIcon />}\n                                defaultOpen={true}\n                            >\n                                <Grid>\n                                    <Grid.Column span={12}>\n                                        <Bind\n                                            name=\"firstName\"\n                                            validators={validation.create(\"required\")}\n                                        >\n                                            <Input\n                                                label={t`First Name`}\n                                                disabled={isDisabled}\n                                                data-testid=\"account.firstname\"\n                                            />\n                                        </Bind>\n                                    </Grid.Column>\n                                    <Grid.Column span={12}>\n                                        <Bind\n                                            name=\"lastName\"\n                                            validators={validation.create(\"required\")}\n                                        >\n                                            <Input\n                                                label={t`Last Name`}\n                                                disabled={isDisabled}\n                                                data-testid=\"account.lastname\"\n                                            />\n                                        </Bind>\n                                    </Grid.Column>\n                                    <Grid.Column span={12}>\n                                        <Bind\n                                            name=\"email\"\n                                            validators={validation.create(\"required,email\")}\n                                        >\n                                            <Input\n                                                value={data.email}\n                                                label={t`Email`}\n                                                disabled={emailIsDisabled || isDisabled}\n                                                data-testid=\"account.email\"\n                                                autoComplete=\"new-password\"\n                                                description={emailDescription}\n                                            />\n                                        </Bind>\n                                    </Grid.Column>\n                                    <Grid.Column span={12}>\n                                        <Bind\n                                            name=\"password\"\n                                            validators={value => passwordPolicy.validate(value)}\n                                        >\n                                            <Input\n                                                autoComplete=\"new-password\"\n                                                disabled={isDisabled}\n                                                description={\n                                                    data.id && \"Type a new password to reset it.\"\n                                                }\n                                                type=\"password\"\n                                                label={\"Password\"}\n                                                data-testid=\"account.password\"\n                                            />\n                                        </Bind>\n                                    </Grid.Column>\n                                </Grid>\n                            </Accordion.Item>\n                            <Accordion.Item\n                                title={\"Roles\"}\n                                description={\"Assign to security roles\"}\n                                icon={<SecurityIcon />}\n                            >\n                                <Grid>\n                                    <Grid.Column span={12}>\n                                        <Bind name={\"roles\"} validators={groupValidators}>\n                                            {({ value, onChange, validation }) => (\n                                                <RolesMultiAutocomplete\n                                                    values={value}\n                                                    onChange={onChange}\n                                                    validation={validation}\n                                                    label={\"Roles\"}\n                                                    data-testid=\"roles-autocomplete\"\n                                                    disabled={isDisabled}\n                                                />\n                                            )}\n                                        </Bind>\n                                    </Grid.Column>\n                                </Grid>\n                            </Accordion.Item>\n                            {teams ? (\n                                <Accordion.Item\n                                    title={\"Teams\"}\n                                    description={\"Assign to teams\"}\n                                    icon={<SecurityTeamsIcon />}\n                                >\n                                    <Grid>\n                                        <Grid.Column span={12}>\n                                            <Bind name={\"teams\"}>\n                                                {({ value, onChange, validation }) => (\n                                                    <TeamsMultiAutocomplete\n                                                        values={value}\n                                                        onChange={onChange}\n                                                        validation={validation}\n                                                        label={\"Teams\"}\n                                                        data-testid=\"teams-autocomplete\"\n                                                        disabled={isDisabled}\n                                                    />\n                                                )}\n                                            </Bind>\n                                        </Grid.Column>\n                                    </Grid>\n                                </Accordion.Item>\n                            ) : null}\n                        </Accordion>\n                    </SimpleFormContent>\n                    <SimpleFormFooter data-testid={\"form-footer\"}>\n                        <Button\n                            variant={\"secondary\"}\n                            text={t`Cancel`}\n                            onClick={userForm.cancelEditing}\n                        />\n                        <Button\n                            variant={\"primary\"}\n                            text={isNewUser ? t`Create user` : t`Update user`}\n                            disabled={isDisabled}\n                            onClick={form.submit}\n                        />\n                    </SimpleFormFooter>\n                </SimpleForm>\n            )}\n        </Form>\n    );\n};\n"],"names":["t","i18n","UserForm","teams","identity","useAuthentication","userForm","useUserForm","passwordPolicy","useFeature","PasswordPolicyFeature","getLink","useRouter","isExternal","formTitle","isNewUser","emailIsDisabled","emailDescription","groupValidators","useMemo","validation","accountLink","Routes","EmptyView","SettingsIcon","Button","AddIcon","isSelf","isDisabled","Form","data","form","Bind","SimpleForm","OverlayLoader","AvatarImage","SimpleFormHeader","SimpleFormContent","Grid","Alert","Link","Accordion","Input","value","SecurityIcon","onChange","RolesMultiAutocomplete","SecurityTeamsIcon","TeamsMultiAutocomplete","SimpleFormFooter"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAMX,MAAMC,WAAW,CAAC,EAAEC,KAAK,EAAiB;IAC7C,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAMC,WAAWC;IACjB,MAAM,EAAEC,cAAc,EAAE,GAAGC,WAAWC;IACtC,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,MAAMC,aAAaP,SAAS,IAAI,EAAE,aAAa;IAC/C,MAAMQ,YAAYR,SAAS,SAAS,GAAG,aAAaA,SAAS,QAAQ;IACrE,MAAMS,YAAYT,SAAS,SAAS;IAGpC,MAAMU,kBAAkB,CAACD;IACzB,IAAIE,mBAAmB;IACvB,IAAIF,WACAE,mBACI;IAGR,MAAMC,kBAAkBC,QAAQ,IACrBhB,QAAQ,EAAE,GAAG;YAACiB,sBAAAA,MAAiB,CAAC;SAAY,EACpD;QAACjB;KAAM;IAEV,MAAMkB,cAAcV,QAAQW,OAAO,KAAK,CAAC,OAAO;IAGhD,IAAIhB,SAAS,aAAa,EACtB,OAAO,WAAP,GACI,oBAACiB,WAASA;QACN,oBAAM,oBAACC,6BAAYA;QACnB,OAAOxB,CAAC,CAAC,kEAAkE,CAAC;QAC5E,sBACI,oBAACyB,QAAMA;YACH,oBAAM,oBAACC,gBAAOA;YACd,MAAM1B,CAAC,CAAC,QAAQ,CAAC;YACjB,eAAY;YACZ,SAASM,SAAS,UAAU;;;IAOhD,MAAMqB,SAASrB,SAAS,IAAI,EAAE,OAAOF,SAAS,EAAE;IAChD,MAAMwB,aAAaf,cAAcc;IAEjC,OAAO,WAAP,GACI,oBAACE,MAAIA;QAAC,MAAMvB,SAAS,IAAI;QAAE,UAAUA,SAAS,QAAQ;OACjD,CAAC,EAAEwB,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAE,iBAClB,oBAACC,YAAUA;YAAC,MAAM;WACb3B,SAAS,OAAO,IAAI,WAAJ,GAAI,oBAAC4B,eAAaA,OAAAA,WAAAA,GACnC,oBAAC;YAAI,WAAW;yBACZ,oBAACF,MAAAA;YAAK,MAAK;yBACP,oBAACG,aAAWA;YAAC;YAAM,UAAUP;4BAGrC,oBAACQ,kBAAgBA;YAAC,OAAOtB;0BACzB,oBAACuB,mBAAiBA,MACbxB,cAAc,WAAdA,GACG,oBAACyB,MAAIA;YAAC,WAAW;yBACb,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,OAAKA;YAAC,MAAM;YAAQ,OAAO;WAAiB,0DAMxDZ,UAAU,WAAVA,GACG,oBAACW,MAAIA;YAAC,WAAW;yBACb,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,OAAKA;YAAC,MAAM;YAAQ,OAAO;WAAe,mFAEnC,oBAACC,MAAIA;YAAC,IAAInB;WAAa,qBAAuB,8BAKlE,oBAACoB,WAASA;YAAC,SAAS;yBAChB,oBAACA,UAAU,IAAI;YACX,OAAO;YACP,aAAa;YACb,oBAAM,oBAACjB,6BAAYA;YACnB,aAAa;yBAEb,oBAACc,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACN,MAAAA;YACG,MAAK;YACL,YAAYZ,sBAAAA,MAAiB,CAAC;yBAE9B,oBAACsB,OAAKA;YACF,OAAO1C,CAAC,CAAC,UAAU,CAAC;YACpB,UAAU4B;YACV,eAAY;4BAIxB,oBAACU,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACN,MAAAA;YACG,MAAK;YACL,YAAYZ,sBAAAA,MAAiB,CAAC;yBAE9B,oBAACsB,OAAKA;YACF,OAAO1C,CAAC,CAAC,SAAS,CAAC;YACnB,UAAU4B;YACV,eAAY;4BAIxB,oBAACU,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACN,MAAAA;YACG,MAAK;YACL,YAAYZ,sBAAAA,MAAiB,CAAC;yBAE9B,oBAACsB,OAAKA;YACF,OAAOZ,KAAK,KAAK;YACjB,OAAO9B,CAAC,CAAC,KAAK,CAAC;YACf,UAAUgB,mBAAmBY;YAC7B,eAAY;YACZ,cAAa;YACb,aAAaX;4BAIzB,oBAACqB,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACN,MAAAA;YACG,MAAK;YACL,YAAYW,CAAAA,QAASnC,eAAe,QAAQ,CAACmC;yBAE7C,oBAACD,OAAKA;YACF,cAAa;YACb,UAAUd;YACV,aACIE,KAAK,EAAE,IAAI;YAEf,MAAK;YACL,OAAO;YACP,eAAY;8BAMhC,oBAACW,UAAU,IAAI;YACX,OAAO;YACP,aAAa;YACb,oBAAM,oBAACG,8BAAYA;yBAEnB,oBAACN,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACN,MAAAA;YAAK,MAAM;YAAS,YAAYd;WAC5B,CAAC,EAAEyB,KAAK,EAAEE,QAAQ,EAAEzB,UAAU,EAAE,iBAC7B,oBAAC0B,wBAAsBA;gBACnB,QAAQH;gBACR,UAAUE;gBACV,YAAYzB;gBACZ,OAAO;gBACP,eAAY;gBACZ,UAAUQ;oBAOjCzB,QAAQ,WAARA,GACG,oBAACsC,UAAU,IAAI;YACX,OAAO;YACP,aAAa;YACb,oBAAM,oBAACM,yCAAiBA;yBAExB,oBAACT,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACN,MAAAA;YAAK,MAAM;WACP,CAAC,EAAEW,KAAK,EAAEE,QAAQ,EAAEzB,UAAU,EAAE,iBAC7B,oBAAC4B,wBAAsBA;gBACnB,QAAQL;gBACR,UAAUE;gBACV,YAAYzB;gBACZ,OAAO;gBACP,eAAY;gBACZ,UAAUQ;qBAOlC,sBAGZ,oBAACqB,kBAAgBA;YAAC,eAAa;yBAC3B,oBAACxB,QAAMA;YACH,SAAS;YACT,MAAMzB,CAAC,CAAC,MAAM,CAAC;YACf,SAASM,SAAS,aAAa;0BAEnC,oBAACmB,QAAMA;YACH,SAAS;YACT,MAAMV,YAAYf,CAAC,CAAC,WAAW,CAAC,GAAGA,CAAC,CAAC,WAAW,CAAC;YACjD,UAAU4B;YACV,SAASG,KAAK,MAAM;;AAOhD"}

package/presentation/adminUsers/views/Users/UsersView.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const UsersView: () => React.JSX.Element;

package/presentation/adminUsers/views/Users/UsersView.js

@@ -0,0 +1,15 @@
+import react from "react";
+import { LeftPanel, RightPanel, SplitView } from "../../../../components/SplitView/SplitView.js";
+import UsersDataList from "./UsersDataList.js";
+import { useFeatureFlags } from "../../../featureFlags/useFeatureFlags.js";
+import { UserForm } from "./UsersForm.js";
+const UsersView = ()=>{
+    const featureFlags = useFeatureFlags();
+    const teams = featureFlags.isEnabled("advancedAccessControlLayer.teams");
+    return /*#__PURE__*/ react.createElement(SplitView, null, /*#__PURE__*/ react.createElement(LeftPanel, null, /*#__PURE__*/ react.createElement(UsersDataList, null)), /*#__PURE__*/ react.createElement(RightPanel, null, /*#__PURE__*/ react.createElement(UserForm, {
+        teams: teams
+    })));
+};
+export { UsersView };
+
+//# sourceMappingURL=UsersView.js.map

package/presentation/adminUsers/views/Users/UsersView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/views/Users/UsersView.js","sources":["../../../../../src/presentation/adminUsers/views/Users/UsersView.tsx"],"sourcesContent":["import React from \"react\";\nimport { LeftPanel, RightPanel, SplitView } from \"~/components/SplitView/SplitView.js\";\nimport UsersDataList from \"~/presentation/adminUsers/views/Users/UsersDataList.js\";\nimport { useFeatureFlags } from \"~/presentation/featureFlags/useFeatureFlags.js\";\nimport { UserForm } from \"./UsersForm.js\";\n\nexport const UsersView = () => {\n    const featureFlags = useFeatureFlags();\n\n    const teams = featureFlags.isEnabled(\"advancedAccessControlLayer.teams\");\n\n    return (\n        <SplitView>\n            <LeftPanel>\n                <UsersDataList />\n            </LeftPanel>\n            <RightPanel>\n                <UserForm teams={teams} />\n            </RightPanel>\n        </SplitView>\n    );\n};\n"],"names":["UsersView","featureFlags","useFeatureFlags","teams","SplitView","LeftPanel","UsersDataList","RightPanel","UserForm"],"mappings":";;;;;AAMO,MAAMA,YAAY;IACrB,MAAMC,eAAeC;IAErB,MAAMC,QAAQF,aAAa,SAAS,CAAC;IAErC,OAAO,WAAP,GACI,oBAACG,WAASA,MAAAA,WAAAA,GACN,oBAACC,WAASA,MAAAA,WAAAA,GACN,oBAACC,eAAaA,QAAAA,WAAAA,GAElB,oBAACC,YAAUA,MAAAA,WAAAA,GACP,oBAACC,UAAQA;QAAC,OAAOL;;AAIjC"}

package/presentation/adminUsers/views/Users/components/DeleteAction.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { UserItem } from "../../../../../presentation/adminUsers/UserItem.js";
+export interface DeleteActionProps {
+    item: UserItem;
+    onClick: () => void;
+}
+export declare const DeleteAction: ({ item, onClick }: DeleteActionProps) => React.JSX.Element;

package/presentation/adminUsers/views/Users/components/DeleteAction.js

@@ -0,0 +1,29 @@
+import react from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useSecurity } from "../../../../security/hooks/useSecurity.js";
+import { DeleteIcon, Tooltip } from "@webiny/admin-ui";
+const t = i18n.ns("app-identity/admin/users/data-list");
+const DeleteAction = ({ item, onClick })=>{
+    const { identity } = useSecurity();
+    if (identity.id === item.id) return /*#__PURE__*/ react.createElement(Tooltip, {
+        side: "bottom",
+        content: /*#__PURE__*/ react.createElement("span", null, t`You can't delete your own user account.`),
+        trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
+            disabled: true
+        })
+    });
+    if (item.external) return /*#__PURE__*/ react.createElement(Tooltip, {
+        side: "bottom",
+        content: /*#__PURE__*/ react.createElement("span", null, t`You can't delete external users.`),
+        trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
+            disabled: true
+        })
+    });
+    return /*#__PURE__*/ react.createElement(DeleteIcon, {
+        onClick: onClick,
+        "data-testid": "default-data-list.delete"
+    });
+};
+export { DeleteAction };
+
+//# sourceMappingURL=DeleteAction.js.map

package/presentation/adminUsers/views/Users/components/DeleteAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/views/Users/components/DeleteAction.js","sources":["../../../../../../src/presentation/adminUsers/views/Users/components/DeleteAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useSecurity } from \"~/presentation/security/hooks/useSecurity.js\";\nimport { Tooltip, DeleteIcon } from \"@webiny/admin-ui\";\nimport type { UserItem } from \"~/presentation/adminUsers/UserItem.js\";\n\nconst t = i18n.ns(\"app-identity/admin/users/data-list\");\n\nexport interface DeleteActionProps {\n    item: UserItem;\n    onClick: () => void;\n}\n\nexport const DeleteAction = ({ item, onClick }: DeleteActionProps) => {\n    const { identity } = useSecurity();\n\n    if (identity.id === item.id) {\n        return (\n            <Tooltip\n                side={\"bottom\"}\n                content={<span>{t`You can't delete your own user account.`}</span>}\n                trigger={<DeleteIcon disabled />}\n            />\n        );\n    }\n\n    if (item.external) {\n        return (\n            <Tooltip\n                side={\"bottom\"}\n                content={<span>{t`You can't delete external users.`}</span>}\n                trigger={<DeleteIcon disabled />}\n            />\n        );\n    }\n\n    return <DeleteIcon onClick={onClick} data-testid={\"default-data-list.delete\"} />;\n};\n"],"names":["t","i18n","DeleteAction","item","onClick","identity","useSecurity","Tooltip","DeleteIcon"],"mappings":";;;;AAMA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAOX,MAAMC,eAAe,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAqB;IAC7D,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IAErB,IAAID,SAAS,EAAE,KAAKF,KAAK,EAAE,EACvB,OAAO,WAAP,GACI,oBAACI,SAAOA;QACJ,MAAM;QACN,uBAAS,oBAAC,cAAMP,CAAC,CAAC,uCAAuC,CAAC;QAC1D,uBAAS,oBAACQ,YAAUA;YAAC;;;IAKjC,IAAIL,KAAK,QAAQ,EACb,OAAO,WAAP,GACI,oBAACI,SAAOA;QACJ,MAAM;QACN,uBAAS,oBAAC,cAAMP,CAAC,CAAC,gCAAgC,CAAC;QACnD,uBAAS,oBAACQ,YAAUA;YAAC;;;IAKjC,OAAO,WAAP,GAAO,oBAACA,YAAUA;QAAC,SAASJ;QAAS,eAAa;;AACtD"}

package/presentation/adminUsers/views/Users/hooks/useUserForm.d.ts

@@ -0,0 +1,27 @@
+import type { IGetUserGatewayResult } from "../../../../../features/adminUsers/users/getUser/abstractions/GetUserGateway.js";
+interface SubmitUserCallableParams {
+    id?: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    password?: string;
+    avatar: {
+        src?: string;
+    };
+    external?: boolean;
+}
+interface SubmitUserCallable {
+    (data: SubmitUserCallableParams): Promise<void>;
+}
+export declare function useUserForm(): {
+    id: string | undefined;
+    loading: boolean;
+    user: IGetUserGatewayResult | undefined;
+    onSubmit: SubmitUserCallable;
+    isNewUser: boolean;
+    fullName: string;
+    showEmptyView: boolean;
+    createUser(): void;
+    cancelEditing(): void;
+};
+export {};

package/presentation/adminUsers/views/Users/hooks/useUserForm.js

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useState } from "react";
+import isEmpty from "lodash/isEmpty.js";
+import omit from "lodash/omit.js";
+import { useFeature, useRoute, useRouter } from "@webiny/app";
+import { GetUserFeature } from "../../../../../features/adminUsers/users/getUser/index.js";
+import { CreateUserFeature } from "../../../../../features/adminUsers/users/createUser/index.js";
+import { UpdateUserFeature } from "../../../../../features/adminUsers/users/updateUser/index.js";
+import { Routes } from "../../../routes.js";
+import { useToast } from "@webiny/admin-ui";
+function useUserForm() {
+    const { goToRoute } = useRouter();
+    const { route } = useRoute(Routes.Users.List);
+    const toast = useToast();
+    const { useCase: getUser } = useFeature(GetUserFeature);
+    const { useCase: createUser } = useFeature(CreateUserFeature);
+    const { useCase: updateUser } = useFeature(UpdateUserFeature);
+    const id = route.params.id;
+    const newUser = true === route.params.new;
+    const [user, setUser] = useState(void 0);
+    const [userLoading, setUserLoading] = useState(false);
+    const [mutationLoading, setMutationLoading] = useState(false);
+    useEffect(()=>{
+        setUser(void 0);
+        if (!id) return;
+        setUserLoading(true);
+        getUser.execute({
+            id
+        }).then((data)=>{
+            setUser(data);
+            setUserLoading(false);
+        }).catch((error)=>{
+            goToRoute(Routes.Users.List);
+            toast.showWarningToast({
+                title: "Error loading user profile",
+                description: error.message,
+                duration: 1 / 0
+            });
+            setUserLoading(false);
+        });
+    }, [
+        id
+    ]);
+    const loading = userLoading || mutationLoading;
+    const onSubmit = useCallback(async (data)=>{
+        setMutationLoading(true);
+        try {
+            if (newUser) {
+                const resultUser = await createUser.execute({
+                    data
+                });
+                goToRoute(Routes.Users.List, {
+                    id: resultUser.id
+                });
+            } else {
+                const { id: userId, ...rest } = data;
+                await updateUser.execute({
+                    id: userId,
+                    data: omit(rest, [
+                        "external"
+                    ])
+                });
+            }
+            toast.showSuccessToast({
+                title: "User saved successfully."
+            });
+        } catch (error) {
+            const message = error instanceof Error ? error.message : "Unknown error";
+            toast.showWarningToast({
+                title: "Error updating user profile",
+                description: message,
+                duration: 1 / 0
+            });
+        } finally{
+            setMutationLoading(false);
+        }
+    }, [
+        id,
+        newUser
+    ]);
+    const showEmptyView = !newUser && !userLoading && isEmpty(user);
+    return {
+        id,
+        loading,
+        user,
+        onSubmit,
+        isNewUser: newUser,
+        fullName: `${user?.firstName || ""} ${user?.lastName || ""}`.trim(),
+        showEmptyView,
+        createUser () {
+            goToRoute(Routes.Users.List, {
+                new: true
+            });
+        },
+        cancelEditing () {
+            goToRoute(Routes.Users.List);
+        }
+    };
+}
+export { useUserForm };
+
+//# sourceMappingURL=useUserForm.js.map