@webiny/app-admin 6.6.0-alpha.1 → 6.6.0-alpha.10

package/presentation/accessManagement/teams/components/TeamsView.js

@@ -1,204 +1,12 @@
-import react, { useCallback, useEffect, useMemo, useState } from "react";
-import { observer } from "mobx-react-lite";
-import orderBy from "lodash/orderBy.js";
+import react, { useEffect } from "react";
 import { useFeature } from "@webiny/app";
-import { EmptyView, FormErrors, LeftPanel, RightPanel, SearchUI, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, SplitView, useConfirmationDialog, useRoute, useRouter, useSnackbar } from "../../../../index.js";
-import { FormView } from "../../../../features/formModel/FormView.js";
-import { Alert, Button, DataList, DataListModal, DeleteIcon, Grid, List, OverlayLoader, Select, Tooltip } from "@webiny/admin-ui";
-import { ReactComponent } from "@webiny/icons/add.svg";
-import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
+import { LeftPanel, RightPanel, SplitView, useRoute } from "../../../../index.js";
 import { TeamsPresenterFeature } from "../feature.js";
 import { Routes } from "../../routes.js";
-const SORTERS = [
-    {
-        label: "Newest to oldest",
-        sorter: "createdOn_DESC"
-    },
-    {
-        label: "Oldest to newest",
-        sorter: "createdOn_ASC"
-    },
-    {
-        label: "Name A-Z",
-        sorter: "name_ASC"
-    },
-    {
-        label: "Name Z-A",
-        sorter: "name_DESC"
-    }
-];
-const deserializeSorters = (data)=>{
-    const [field, order] = data.split("_");
-    return [
-        field,
-        "asc" === order.toLowerCase() ? "asc" : "desc"
-    ];
-};
-const TeamsDataList = observer(({ activeId })=>{
-    const { presenter } = useFeature(TeamsPresenterFeature);
-    const { goToRoute } = useRouter();
-    const { showSnackbar } = useSnackbar();
-    const { showConfirmation } = useConfirmationDialog({
-        dataTestId: "default-data-list.delete-dialog"
-    });
-    const [filter, setFilter] = useState("");
-    const [sort, setSort] = useState(SORTERS[0].sorter);
-    const teams = presenter.list.vm.rows;
-    const loading = presenter.list.vm.pagination.loading;
-    const filteredData = useMemo(()=>{
-        if ("" === filter) return teams;
-        const lc = filter.toLowerCase();
-        return teams.filter((t)=>t.name.toLowerCase().includes(lc) || t.slug.toLowerCase().includes(lc) || t.description && t.description.toLowerCase().includes(lc));
-    }, [
-        teams,
-        filter
-    ]);
-    const sortedData = useMemo(()=>{
-        if (!sort) return filteredData;
-        const [key, order] = deserializeSorters(sort);
-        return orderBy(filteredData, [
-            key
-        ], [
-            order
-        ]);
-    }, [
-        filteredData,
-        sort
-    ]);
-    const deleteItem = useCallback((item)=>{
-        showConfirmation(async ()=>{
-            try {
-                await presenter.deleteTeam(item.id);
-                showSnackbar(`Team "${item.slug}" deleted.`);
-                if (activeId === item.id) goToRoute(Routes.Teams.List);
-            } catch (e) {
-                showSnackbar(e.message);
-            }
-        });
-    }, [
-        activeId
-    ]);
-    return /*#__PURE__*/ react.createElement(DataList, {
-        title: "Teams",
-        refresh: null,
-        actions: /*#__PURE__*/ react.createElement(Button, {
-            text: "New",
-            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            size: "sm",
-            className: "ml-xs",
-            "data-testid": "new-record-button",
-            onClick: ()=>goToRoute(Routes.Teams.List, {
-                    new: true
-                })
-        }),
-        data: sortedData,
-        loading: loading,
-        search: /*#__PURE__*/ react.createElement(SearchUI, {
-            value: filter,
-            onChange: setFilter,
-            inputPlaceholder: "Search teams..."
-        }),
-        modalOverlay: /*#__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: "Sort by",
-            options: SORTERS.map(({ label, sorter: value })=>({
-                    label,
-                    value
-                }))
-        })))),
-        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
-            "data-testid": "default-data-list.filter"
-        })
-    }, ({ data })=>/*#__PURE__*/ react.createElement(List, {
-            "data-testid": "default-data-list"
-        }, data.map((item)=>/*#__PURE__*/ react.createElement(List.Item, {
-                key: item.id,
-                selected: item.id === activeId,
-                title: item.name,
-                description: item.description,
-                onClick: ()=>goToRoute(Routes.Teams.List, {
-                        id: item.id
-                    }),
-                actions: item.system || item.plugin ? /*#__PURE__*/ react.createElement(Tooltip, {
-                    content: item.system ? "Cannot delete system teams." : "Cannot delete teams registered via extensions.",
-                    trigger: /*#__PURE__*/ react.createElement(DeleteIcon, {
-                        disabled: true
-                    })
-                }) : /*#__PURE__*/ react.createElement(DeleteIcon, {
-                    onClick: ()=>deleteItem(item),
-                    "data-testid": "default-data-list.delete"
-                })
-            }))));
-});
-const TeamsForm = observer(({ newEntry, id })=>{
-    const { presenter } = useFeature(TeamsPresenterFeature);
-    const { goToRoute } = useRouter();
-    const { showSnackbar } = useSnackbar();
-    const { vm } = presenter;
-    useEffect(()=>{
-        if (id) presenter.selectTeam(id);
-        else if (newEntry) presenter.createNew();
-        else presenter.deselect();
-    }, [
-        id,
-        newEntry
-    ]);
-    const handleSave = useCallback(async ()=>{
-        try {
-            const team = await presenter.save();
-            if (team) {
-                if (!vm.selectedTeam || vm.selectedTeam.id !== team.id) goToRoute(Routes.Teams.List, {
-                    id: team.id
-                });
-                showSnackbar("Team saved successfully!");
-            }
-        } catch (e) {
-            showSnackbar(e.message);
-        }
-    }, [
-        presenter,
-        vm.selectedTeam
-    ]);
-    if (!vm.showForm) return /*#__PURE__*/ react.createElement(EmptyView, {
-        icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
-        title: "Click on the left side list to display team details or create a...",
-        action: /*#__PURE__*/ react.createElement(Button, {
-            text: "New Team",
-            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            "data-testid": "new-record-button",
-            onClick: ()=>goToRoute(Routes.Teams.List, {
-                    new: true
-                })
-        })
-    });
-    return /*#__PURE__*/ react.createElement(SimpleForm, null, vm.loading || vm.saving ? /*#__PURE__*/ react.createElement(OverlayLoader, null) : null, /*#__PURE__*/ react.createElement(SimpleFormHeader, {
-        title: vm.selectedTeam ? vm.selectedTeam.name || "Untitled" : "Untitled"
-    }), /*#__PURE__*/ react.createElement(SimpleFormContent, null, vm.selectedTeam && vm.selectedTeam.system ? /*#__PURE__*/ react.createElement(Alert, {
-        type: "info",
-        title: "Permissions are locked"
-    }, "This is a protected system team and you can't modify its permissions.") : null, vm.selectedTeam && vm.selectedTeam.plugin ? /*#__PURE__*/ react.createElement(Alert, {
-        type: "info",
-        title: "Important"
-    }, "This team is registered via an extension, and cannot be modified.") : null, /*#__PURE__*/ react.createElement(FormErrors, {
-        form: vm.form,
-        className: "mb-md"
-    }), /*#__PURE__*/ react.createElement(FormView, {
-        name: "Team",
-        form: vm.form
-    })), /*#__PURE__*/ react.createElement(SimpleFormFooter, null, /*#__PURE__*/ react.createElement(Button, {
-        variant: "secondary",
-        text: "Cancel",
-        onClick: ()=>goToRoute(Routes.Teams.List)
-    }), vm.canModify ? /*#__PURE__*/ react.createElement(Button, {
-        text: "Save",
-        "data-testid": "admin.am.team.new.save",
-        onClick: handleSave
-    }) : null));
-});
-const TeamsView = observer(()=>{
+import { createReactiveComponent } from "../../../createReactiveComponent.js";
+import { TeamsDataList } from "./TeamsDataList.js";
+import { TeamsForm } from "./TeamsForm.js";
+const TeamsView = createReactiveComponent(()=>{
     const { presenter } = useFeature(TeamsPresenterFeature);
     const { route } = useRoute(Routes.Teams.List);
     useEffect(()=>{

package/presentation/accessManagement/teams/components/TeamsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/accessManagement/teams/components/TeamsView.js","sources":["../../../../../src/presentation/accessManagement/teams/components/TeamsView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { useFeature } from \"@webiny/app\";\nimport {\n    SplitView,\n    LeftPanel,\n    RightPanel,\n    SimpleForm,\n    SimpleFormHeader,\n    SimpleFormContent,\n    SimpleFormFooter,\n    EmptyView,\n    useSnackbar,\n    useConfirmationDialog,\n    SearchUI,\n    useRouter,\n    useRoute\n} from \"~/index.js\";\nimport { FormView } from \"~/features/formModel/FormView.js\";\nimport {\n    Alert,\n    Button,\n    DataList,\n    DataListModal,\n    DeleteIcon,\n    Grid,\n    List,\n    OverlayLoader,\n    Select,\n    Tooltip\n} from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { TeamsPresenterFeature } from \"../feature.js\";\nimport { Routes } from \"../../routes.js\";\nimport type { Team } from \"~/features/accessManagement/types.js\";\nimport { FormErrors } from \"~/index.js\";\n\nconst SORTERS = [\n    { label: \"Newest to oldest\", sorter: \"createdOn_DESC\" },\n    { label: \"Oldest to newest\", sorter: \"createdOn_ASC\" },\n    { label: \"Name A-Z\", sorter: \"name_ASC\" },\n    { label: \"Name Z-A\", sorter: \"name_DESC\" }\n];\n\nconst deserializeSorters = (data: string): [string, \"asc\" | \"desc\"] => {\n    const [field, order] = data.split(\"_\");\n    return [field, order.toLowerCase() === \"asc\" ? \"asc\" : \"desc\"];\n};\n\nconst TeamsDataList = observer(({ activeId }: { activeId: string | undefined }) => {\n    const { presenter } = useFeature(TeamsPresenterFeature);\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"default-data-list.delete-dialog\"\n    });\n\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState(SORTERS[0].sorter);\n\n    const teams = presenter.list.vm.rows;\n    const loading = presenter.list.vm.pagination.loading;\n\n    const filteredData = useMemo(() => {\n        if (filter === \"\") {\n            return teams;\n        }\n        const lc = filter.toLowerCase();\n        return teams.filter(\n            (t: Team) =>\n                t.name.toLowerCase().includes(lc) ||\n                t.slug.toLowerCase().includes(lc) ||\n                (t.description && t.description.toLowerCase().includes(lc))\n        );\n    }, [teams, filter]);\n\n    const sortedData = useMemo(() => {\n        if (!sort) {\n            return filteredData;\n        }\n        const [key, order] = deserializeSorters(sort);\n        return orderBy(filteredData, [key], [order]);\n    }, [filteredData, sort]);\n\n    const deleteItem = useCallback(\n        (item: Team) => {\n            showConfirmation(async () => {\n                try {\n                    await presenter.deleteTeam(item.id);\n                    showSnackbar(`Team \"${item.slug}\" deleted.`);\n                    if (activeId === item.id) {\n                        goToRoute(Routes.Teams.List);\n                    }\n                } catch (e: any) {\n                    showSnackbar(e.message);\n                }\n            });\n        },\n        [activeId]\n    );\n\n    return (\n        <DataList\n            title={\"Teams\"}\n            refresh={null}\n            actions={\n                <Button\n                    text={\"New\"}\n                    icon={<AddIcon />}\n                    size={\"sm\"}\n                    className={\"ml-xs\"}\n                    data-testid=\"new-record-button\"\n                    onClick={() => goToRoute(Routes.Teams.List, { new: true })}\n                />\n            }\n            data={sortedData}\n            loading={loading}\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={\"Search teams...\"}\n                />\n            }\n            modalOverlay={\n                <DataListModal.Content>\n                    <Grid>\n                        <Grid.Column span={12}>\n                            <Select\n                                value={sort}\n                                onChange={setSort}\n                                label={\"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            modalOverlayAction={<DataListModal.Trigger data-testid={\"default-data-list.filter\"} />}\n        >\n            {({ data }: { data: Team[] }) => (\n                <List data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <List.Item\n                            key={item.id}\n                            selected={item.id === activeId}\n                            title={item.name}\n                            description={item.description}\n                            onClick={() => goToRoute(Routes.Teams.List, { id: item.id })}\n                            actions={\n                                item.system || item.plugin ? (\n                                    <Tooltip\n                                        content={\n                                            item.system\n                                                ? \"Cannot delete system teams.\"\n                                                : \"Cannot delete teams registered via extensions.\"\n                                        }\n                                        trigger={<DeleteIcon disabled />}\n                                    />\n                                ) : (\n                                    <DeleteIcon\n                                        onClick={() => deleteItem(item)}\n                                        data-testid={\"default-data-list.delete\"}\n                                    />\n                                )\n                            }\n                        />\n                    ))}\n                </List>\n            )}\n        </DataList>\n    );\n});\n\nconst TeamsForm = observer(({ newEntry, id }: { newEntry: boolean; id: string | undefined }) => {\n    const { presenter } = useFeature(TeamsPresenterFeature);\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const { vm } = presenter;\n\n    useEffect(() => {\n        if (id) {\n            presenter.selectTeam(id);\n        } else if (newEntry) {\n            presenter.createNew();\n        } else {\n            presenter.deselect();\n        }\n    }, [id, newEntry]);\n\n    const handleSave = useCallback(async () => {\n        try {\n            const team = await presenter.save();\n            if (team) {\n                if (!vm.selectedTeam || vm.selectedTeam.id !== team.id) {\n                    goToRoute(Routes.Teams.List, { id: team.id });\n                }\n                showSnackbar(\"Team saved successfully!\");\n            }\n        } catch (e: any) {\n            showSnackbar(e.message);\n        }\n    }, [presenter, vm.selectedTeam]);\n\n    if (!vm.showForm) {\n        return (\n            <EmptyView\n                icon={<SettingsIcon />}\n                title={\"Click on the left side list to display team details or create a...\"}\n                action={\n                    <Button\n                        text={\"New Team\"}\n                        icon={<AddIcon />}\n                        data-testid=\"new-record-button\"\n                        onClick={() => goToRoute(Routes.Teams.List, { new: true })}\n                    />\n                }\n            />\n        );\n    }\n\n    return (\n        <SimpleForm>\n            {vm.loading || vm.saving ? <OverlayLoader /> : null}\n            <SimpleFormHeader\n                title={vm.selectedTeam ? vm.selectedTeam.name || \"Untitled\" : \"Untitled\"}\n            />\n            <SimpleFormContent>\n                {vm.selectedTeam && vm.selectedTeam.system ? (\n                    <Alert type={\"info\"} title={\"Permissions are locked\"}>\n                        This is a protected system team and you can&apos;t modify its permissions.\n                    </Alert>\n                ) : null}\n                {vm.selectedTeam && vm.selectedTeam.plugin ? (\n                    <Alert type={\"info\"} title={\"Important\"}>\n                        This team is registered via an extension, and cannot be modified.\n                    </Alert>\n                ) : null}\n                <FormErrors form={vm.form} className={\"mb-md\"} />\n                <FormView name={\"Team\"} form={vm.form} />\n            </SimpleFormContent>\n            <SimpleFormFooter>\n                <Button\n                    variant={\"secondary\"}\n                    text={\"Cancel\"}\n                    onClick={() => goToRoute(Routes.Teams.List)}\n                />\n                {vm.canModify ? (\n                    <Button\n                        text={\"Save\"}\n                        data-testid=\"admin.am.team.new.save\"\n                        onClick={handleSave}\n                    />\n                ) : null}\n            </SimpleFormFooter>\n        </SimpleForm>\n    );\n});\n\nexport const TeamsView = observer(() => {\n    const { presenter } = useFeature(TeamsPresenterFeature);\n    const { route } = useRoute(Routes.Teams.List);\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    return (\n        <SplitView>\n            <LeftPanel>\n                <TeamsDataList activeId={route.params.id} />\n            </LeftPanel>\n            <RightPanel>\n                <TeamsForm newEntry={route.params.new === true} id={route.params.id} />\n            </RightPanel>\n        </SplitView>\n    );\n});\n"],"names":["SORTERS","deserializeSorters","data","field","order","TeamsDataList","observer","activeId","presenter","useFeature","TeamsPresenterFeature","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","filter","setFilter","useState","sort","setSort","teams","loading","filteredData","useMemo","lc","t","sortedData","key","orderBy","deleteItem","useCallback","item","Routes","e","DataList","Button","AddIcon","SearchUI","DataListModal","Grid","Select","label","value","List","Tooltip","DeleteIcon","TeamsForm","newEntry","id","vm","useEffect","handleSave","team","EmptyView","SettingsIcon","SimpleForm","OverlayLoader","SimpleFormHeader","SimpleFormContent","Alert","FormErrors","FormView","SimpleFormFooter","TeamsView","route","useRoute","SplitView","LeftPanel","RightPanel"],"mappings":";;;;;;;;;;;AAuCA,MAAMA,UAAU;IACZ;QAAE,OAAO;QAAoB,QAAQ;IAAiB;IACtD;QAAE,OAAO;QAAoB,QAAQ;IAAgB;IACrD;QAAE,OAAO;QAAY,QAAQ;IAAW;IACxC;QAAE,OAAO;QAAY,QAAQ;IAAY;CAC5C;AAED,MAAMC,qBAAqB,CAACC;IACxB,MAAM,CAACC,OAAOC,MAAM,GAAGF,KAAK,KAAK,CAAC;IAClC,OAAO;QAACC;QAA+B,UAAxBC,MAAM,WAAW,KAAe,QAAQ;KAAO;AAClE;AAEA,MAAMC,gBAAgBC,SAAS,CAAC,EAAEC,QAAQ,EAAoC;IAC1E,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,YAAY;IAChB;IAEA,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IACrC,MAAM,CAACC,MAAMC,QAAQ,GAAGF,SAASnB,OAAO,CAAC,EAAE,CAAC,MAAM;IAElD,MAAMsB,QAAQd,UAAU,IAAI,CAAC,EAAE,CAAC,IAAI;IACpC,MAAMe,UAAUf,UAAU,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO;IAEpD,MAAMgB,eAAeC,QAAQ;QACzB,IAAIR,AAAW,OAAXA,QACA,OAAOK;QAEX,MAAMI,KAAKT,OAAO,WAAW;QAC7B,OAAOK,MAAM,MAAM,CACf,CAACK,IACGA,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAACD,OAC9BC,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAACD,OAC7BC,EAAE,WAAW,IAAIA,EAAE,WAAW,CAAC,WAAW,GAAG,QAAQ,CAACD;IAEnE,GAAG;QAACJ;QAAOL;KAAO;IAElB,MAAMW,aAAaH,QAAQ;QACvB,IAAI,CAACL,MACD,OAAOI;QAEX,MAAM,CAACK,KAAKzB,MAAM,GAAGH,mBAAmBmB;QACxC,OAAOU,QAAQN,cAAc;YAACK;SAAI,EAAE;YAACzB;SAAM;IAC/C,GAAG;QAACoB;QAAcJ;KAAK;IAEvB,MAAMW,aAAaC,YACf,CAACC;QACGlB,iBAAiB;YACb,IAAI;gBACA,MAAMP,UAAU,UAAU,CAACyB,KAAK,EAAE;gBAClCpB,aAAa,CAAC,MAAM,EAAEoB,KAAK,IAAI,CAAC,UAAU,CAAC;gBAC3C,IAAI1B,aAAa0B,KAAK,EAAE,EACpBtB,UAAUuB,OAAO,KAAK,CAAC,IAAI;YAEnC,EAAE,OAAOC,GAAQ;gBACbtB,aAAasB,EAAE,OAAO;YAC1B;QACJ;IACJ,GACA;QAAC5B;KAAS;IAGd,OAAO,WAAP,GACI,oBAAC6B,UAAQA;QACL,OAAO;QACP,SAAS;QACT,uBACI,oBAACC,QAAMA;YACH,MAAM;YACN,oBAAM,oBAACC,gBAAOA;YACd,MAAM;YACN,WAAW;YACX,eAAY;YACZ,SAAS,IAAM3B,UAAUuB,OAAO,KAAK,CAAC,IAAI,EAAE;oBAAE,KAAK;gBAAK;;QAGhE,MAAMN;QACN,SAASL;QACT,sBACI,oBAACgB,UAAQA;YACL,OAAOtB;YACP,UAAUC;YACV,kBAAkB;;QAG1B,4BACI,oBAACsB,cAAc,OAAO,sBAClB,oBAACC,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,QAAMA;YACH,OAAOtB;YACP,UAAUC;YACV,OAAO;YACP,SAASrB,QAAQ,GAAG,CAAC,CAAC,EAAE2C,KAAK,EAAE,QAAQC,KAAK,EAAE,GAAM;oBAChDD;oBACAC;gBACJ;;QAMpB,kCAAoB,oBAACJ,cAAc,OAAO;YAAC,eAAa;;OAEvD,CAAC,EAAEtC,IAAI,EAAoB,iBACxB,oBAAC2C,MAAIA;YAAC,eAAY;WACb3C,KAAK,GAAG,CAAC+B,CAAAA,OAAAA,WAAAA,GACN,oBAACY,KAAK,IAAI;gBACN,KAAKZ,KAAK,EAAE;gBACZ,UAAUA,KAAK,EAAE,KAAK1B;gBACtB,OAAO0B,KAAK,IAAI;gBAChB,aAAaA,KAAK,WAAW;gBAC7B,SAAS,IAAMtB,UAAUuB,OAAO,KAAK,CAAC,IAAI,EAAE;wBAAE,IAAID,KAAK,EAAE;oBAAC;gBAC1D,SACIA,KAAK,MAAM,IAAIA,KAAK,MAAM,GAAG,WAAH,GACtB,oBAACa,SAAOA;oBACJ,SACIb,KAAK,MAAM,GACL,gCACA;oBAEV,uBAAS,oBAACc,YAAUA;wBAAC;;mCAGzB,oBAACA,YAAUA;oBACP,SAAS,IAAMhB,WAAWE;oBAC1B,eAAa;;;AAUrD;AAEA,MAAMe,YAAY1C,SAAS,CAAC,EAAE2C,QAAQ,EAAEC,EAAE,EAAiD;IACvF,MAAM,EAAE1C,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAM,EAAEqC,EAAE,EAAE,GAAG3C;IAEf4C,UAAU;QACN,IAAIF,IACA1C,UAAU,UAAU,CAAC0C;aAClB,IAAID,UACPzC,UAAU,SAAS;aAEnBA,UAAU,QAAQ;IAE1B,GAAG;QAAC0C;QAAID;KAAS;IAEjB,MAAMI,aAAarB,YAAY;QAC3B,IAAI;YACA,MAAMsB,OAAO,MAAM9C,UAAU,IAAI;YACjC,IAAI8C,MAAM;gBACN,IAAI,CAACH,GAAG,YAAY,IAAIA,GAAG,YAAY,CAAC,EAAE,KAAKG,KAAK,EAAE,EAClD3C,UAAUuB,OAAO,KAAK,CAAC,IAAI,EAAE;oBAAE,IAAIoB,KAAK,EAAE;gBAAC;gBAE/CzC,aAAa;YACjB;QACJ,EAAE,OAAOsB,GAAQ;YACbtB,aAAasB,EAAE,OAAO;QAC1B;IACJ,GAAG;QAAC3B;QAAW2C,GAAG,YAAY;KAAC;IAE/B,IAAI,CAACA,GAAG,QAAQ,EACZ,OAAO,WAAP,GACI,oBAACI,WAASA;QACN,oBAAM,oBAACC,6BAAYA;QACnB,OAAO;QACP,sBACI,oBAACnB,QAAMA;YACH,MAAM;YACN,oBAAM,oBAACC,gBAAOA;YACd,eAAY;YACZ,SAAS,IAAM3B,UAAUuB,OAAO,KAAK,CAAC,IAAI,EAAE;oBAAE,KAAK;gBAAK;;;IAO5E,OAAO,WAAP,GACI,oBAACuB,YAAUA,MACNN,GAAG,OAAO,IAAIA,GAAG,MAAM,GAAG,WAAH,GAAG,oBAACO,eAAaA,QAAM,oBAC/C,oBAACC,kBAAgBA;QACb,OAAOR,GAAG,YAAY,GAAGA,GAAG,YAAY,CAAC,IAAI,IAAI,aAAa;sBAElE,oBAACS,mBAAiBA,MACbT,GAAG,YAAY,IAAIA,GAAG,YAAY,CAAC,MAAM,GAAG,WAAH,GACtC,oBAACU,OAAKA;QAAC,MAAM;QAAQ,OAAO;OAA0B,2EAGtD,MACHV,GAAG,YAAY,IAAIA,GAAG,YAAY,CAAC,MAAM,GAAG,WAAH,GACtC,oBAACU,OAAKA;QAAC,MAAM;QAAQ,OAAO;OAAa,uEAGzC,oBACJ,oBAACC,YAAUA;QAAC,MAAMX,GAAG,IAAI;QAAE,WAAW;sBACtC,oBAACY,UAAQA;QAAC,MAAM;QAAQ,MAAMZ,GAAG,IAAI;uBAEzC,oBAACa,kBAAgBA,MAAAA,WAAAA,GACb,oBAAC3B,QAAMA;QACH,SAAS;QACT,MAAM;QACN,SAAS,IAAM1B,UAAUuB,OAAO,KAAK,CAAC,IAAI;QAE7CiB,GAAG,SAAS,GAAG,WAAH,GACT,oBAACd,QAAMA;QACH,MAAM;QACN,eAAY;QACZ,SAASgB;SAEb;AAIpB;AAEO,MAAMY,YAAY3D,SAAS;IAC9B,MAAM,EAAEE,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEwD,KAAK,EAAE,GAAGC,SAASjC,OAAO,KAAK,CAAC,IAAI;IAE5CkB,UAAU;QACN5C,UAAU,IAAI;IAClB,GAAG;QAACA;KAAU;IAEd,OAAO,WAAP,GACI,oBAAC4D,WAASA,MAAAA,WAAAA,GACN,oBAACC,WAASA,MAAAA,WAAAA,GACN,oBAAChE,eAAaA;QAAC,UAAU6D,MAAM,MAAM,CAAC,EAAE;uBAE5C,oBAACI,YAAUA,MAAAA,WAAAA,GACP,oBAACtB,WAASA;QAAC,UAAUkB,AAAqB,SAArBA,MAAM,MAAM,CAAC,GAAG;QAAW,IAAIA,MAAM,MAAM,CAAC,EAAE;;AAInF"}
+{"version":3,"file":"presentation/accessManagement/teams/components/TeamsView.js","sources":["../../../../../src/presentation/accessManagement/teams/components/TeamsView.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEffect } from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { SplitView } from \"~/index.js\";\nimport { LeftPanel } from \"~/index.js\";\nimport { RightPanel } from \"~/index.js\";\nimport { useRoute } from \"~/index.js\";\nimport { TeamsPresenterFeature } from \"../feature.js\";\nimport { Routes } from \"../../routes.js\";\nimport { createReactiveComponent } from \"~/presentation/createReactiveComponent.js\";\nimport { TeamsDataList } from \"./TeamsDataList.js\";\nimport { TeamsForm } from \"./TeamsForm.js\";\n\nexport const TeamsView = createReactiveComponent(() => {\n    const { presenter } = useFeature(TeamsPresenterFeature);\n    const { route } = useRoute(Routes.Teams.List);\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    return (\n        <SplitView>\n            <LeftPanel>\n                <TeamsDataList activeId={route.params.id} />\n            </LeftPanel>\n            <RightPanel>\n                <TeamsForm newEntry={route.params.new === true} id={route.params.id} />\n            </RightPanel>\n        </SplitView>\n    );\n});\n"],"names":["TeamsView","createReactiveComponent","presenter","useFeature","TeamsPresenterFeature","route","useRoute","Routes","useEffect","SplitView","LeftPanel","TeamsDataList","RightPanel","TeamsForm"],"mappings":";;;;;;;;AAaO,MAAMA,YAAYC,wBAAwB;IAC7C,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,KAAK,CAAC,IAAI;IAE5CC,UAAU;QACNN,UAAU,IAAI;IAClB,GAAG;QAACA;KAAU;IAEd,OAAO,WAAP,GACI,oBAACO,WAASA,MAAAA,WAAAA,GACN,oBAACC,WAASA,MAAAA,WAAAA,GACN,oBAACC,eAAaA;QAAC,UAAUN,MAAM,MAAM,CAAC,EAAE;uBAE5C,oBAACO,YAAUA,MAAAA,WAAAA,GACP,oBAACC,WAASA;QAAC,UAAUR,AAAqB,SAArBA,MAAM,MAAM,CAAC,GAAG;QAAW,IAAIA,MAAM,MAAM,CAAC,EAAE;;AAInF"}

package/presentation/adminUsers/AdminUsers.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * The Users screen, the Account screen, and the "Admin Users" permission, for identity providers
+ * whose users are created and edited in Webiny. Rendered by such a provider's admin extension, which
+ * also has to serve the `adminUsers` create, update and delete mutations behind these screens. The
+ * password rules come from the build, see `readPasswordPolicyRules`.
+ */
+declare const AdminUsersComponent: () => React.JSX.Element;
+export declare const AdminUsers: React.MemoExoticComponent<typeof AdminUsersComponent>;
+export {};

package/presentation/adminUsers/AdminUsers.js

@@ -0,0 +1,77 @@
+import react, { Fragment, memo } from "react";
+import { useRouter } from "@webiny/app";
+import { AdminConfig } from "../../config/AdminConfig.js";
+import { AdminLayout } from "../../components/AdminLayout.js";
+import { RegisterFeature } from "../../components/RegisterFeature.js";
+import { HasPermission } from "../security/components/HasPermission.js";
+import { AdminUsersPermissionsFeature } from "../../features/adminUsers/permissions/feature.js";
+import { GetCurrentUserFeature } from "../../features/adminUsers/account/getCurrentUser/index.js";
+import { UpdateCurrentUserFeature } from "../../features/adminUsers/account/updateCurrentUser/index.js";
+import { ListUsersFeature } from "../../features/adminUsers/users/listUsers/index.js";
+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 { DeleteUserFeature } from "../../features/adminUsers/users/deleteUser/index.js";
+import { UsersView } from "./views/Users/UsersView.js";
+import { UserAccountForm } from "./views/Account/index.js";
+import { SecurityPermission } from "./SecurityPermission.js";
+import { AccountDetails } from "./userMenu/AccountDetails.js";
+import { Routes } from "./routes.js";
+const { Route: Route, Menu: Menu } = AdminConfig;
+const AdminUsersComponent = ()=>{
+    const { getLink } = useRouter();
+    return /*#__PURE__*/ react.createElement(Fragment, null, /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: AdminUsersPermissionsFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: GetCurrentUserFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: UpdateCurrentUserFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: ListUsersFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: GetUserFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: CreateUserFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: UpdateUserFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: DeleteUserFeature
+    }), /*#__PURE__*/ react.createElement(SecurityPermission, null), /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(HasPermission, {
+        name: "adminUsers.user"
+    }, /*#__PURE__*/ react.createElement(Route, {
+        route: Routes.Users.List,
+        element: /*#__PURE__*/ react.createElement(AdminLayout, {
+            title: "Admin Users"
+        }, /*#__PURE__*/ react.createElement(AdminConfig.Breadcrumb, {
+            name: "users",
+            label: "Users"
+        }), /*#__PURE__*/ react.createElement(UsersView, null))
+    }), /*#__PURE__*/ react.createElement(Menu, {
+        name: "security.adminUsers",
+        parent: "settings.security",
+        before: "$first",
+        element: /*#__PURE__*/ react.createElement(Menu.Link, {
+            text: "Users",
+            to: getLink(Routes.Users.List),
+            pinnable: true
+        })
+    })), /*#__PURE__*/ react.createElement(Route, {
+        route: Routes.Users.Account,
+        element: /*#__PURE__*/ react.createElement(AdminLayout, {
+            title: "User Account"
+        }, /*#__PURE__*/ react.createElement(AdminConfig.Breadcrumb, {
+            name: "account",
+            label: "Account"
+        }), /*#__PURE__*/ react.createElement(UserAccountForm, null))
+    }), /*#__PURE__*/ react.createElement(Menu.User, {
+        name: "accountSettings",
+        after: "userInfo",
+        element: /*#__PURE__*/ react.createElement(AccountDetails, {
+            accountRoute: getLink(Routes.Users.Account)
+        })
+    })));
+};
+const AdminUsers = /*#__PURE__*/ memo(AdminUsersComponent);
+export { AdminUsers };
+
+//# sourceMappingURL=AdminUsers.js.map

package/presentation/adminUsers/AdminUsers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/AdminUsers.js","sources":["../../../src/presentation/adminUsers/AdminUsers.tsx"],"sourcesContent":["import React from \"react\";\nimport { Fragment } from \"react\";\nimport { memo } from \"react\";\nimport { useRouter } from \"@webiny/app\";\nimport { AdminConfig } from \"~/config/AdminConfig.js\";\nimport { AdminLayout } from \"~/components/AdminLayout.js\";\nimport { RegisterFeature } from \"~/components/RegisterFeature.js\";\nimport { HasPermission } from \"~/presentation/security/components/HasPermission.js\";\nimport { AdminUsersPermissionsFeature } from \"~/features/adminUsers/permissions/feature.js\";\nimport { GetCurrentUserFeature } from \"~/features/adminUsers/account/getCurrentUser/index.js\";\nimport { UpdateCurrentUserFeature } from \"~/features/adminUsers/account/updateCurrentUser/index.js\";\nimport { ListUsersFeature } from \"~/features/adminUsers/users/listUsers/index.js\";\nimport { GetUserFeature } from \"~/features/adminUsers/users/getUser/index.js\";\nimport { CreateUserFeature } from \"~/features/adminUsers/users/createUser/index.js\";\nimport { UpdateUserFeature } from \"~/features/adminUsers/users/updateUser/index.js\";\nimport { DeleteUserFeature } from \"~/features/adminUsers/users/deleteUser/index.js\";\nimport { UsersView } from \"./views/Users/UsersView.js\";\nimport { UserAccountForm } from \"./views/Account/index.js\";\nimport { SecurityPermission } from \"./SecurityPermission.js\";\nimport { AccountDetails } from \"./userMenu/AccountDetails.js\";\nimport { Routes } from \"./routes.js\";\n\nconst { Route, Menu } = AdminConfig;\n\n/**\n * The Users screen, the Account screen, and the \"Admin Users\" permission, for identity providers\n * whose users are created and edited in Webiny. Rendered by such a provider's admin extension, which\n * also has to serve the `adminUsers` create, update and delete mutations behind these screens. The\n * password rules come from the build, see `readPasswordPolicyRules`.\n */\nconst AdminUsersComponent = () => {\n    const { getLink } = useRouter();\n\n    return (\n        <Fragment>\n            <RegisterFeature feature={AdminUsersPermissionsFeature} />\n            <RegisterFeature feature={GetCurrentUserFeature} />\n            <RegisterFeature feature={UpdateCurrentUserFeature} />\n            <RegisterFeature feature={ListUsersFeature} />\n            <RegisterFeature feature={GetUserFeature} />\n            <RegisterFeature feature={CreateUserFeature} />\n            <RegisterFeature feature={UpdateUserFeature} />\n            <RegisterFeature feature={DeleteUserFeature} />\n            <SecurityPermission />\n            <AdminConfig>\n                <HasPermission name={\"adminUsers.user\"}>\n                    <Route\n                        route={Routes.Users.List}\n                        element={\n                            <AdminLayout title={\"Admin Users\"}>\n                                <AdminConfig.Breadcrumb name={\"users\"} label={\"Users\"} />\n                                <UsersView />\n                            </AdminLayout>\n                        }\n                    />\n\n                    <Menu\n                        name={\"security.adminUsers\"}\n                        parent={\"settings.security\"}\n                        before={\"$first\"}\n                        element={\n                            <Menu.Link\n                                text={\"Users\"}\n                                to={getLink(Routes.Users.List)}\n                                pinnable={true}\n                            />\n                        }\n                    />\n                </HasPermission>\n\n                {/* Not behind `adminUsers.user`: every user can change their own details, and the\n                    menu item below links here for everyone. */}\n                <Route\n                    route={Routes.Users.Account}\n                    element={\n                        <AdminLayout title={\"User Account\"}>\n                            <AdminConfig.Breadcrumb name={\"account\"} label={\"Account\"} />\n                            <UserAccountForm />\n                        </AdminLayout>\n                    }\n                />\n\n                <Menu.User\n                    name={\"accountSettings\"}\n                    after={\"userInfo\"}\n                    element={<AccountDetails accountRoute={getLink(Routes.Users.Account)} />}\n                />\n            </AdminConfig>\n        </Fragment>\n    );\n};\n\nexport const AdminUsers = memo(AdminUsersComponent);\n"],"names":["Route","Menu","AdminConfig","AdminUsersComponent","getLink","useRouter","Fragment","RegisterFeature","AdminUsersPermissionsFeature","GetCurrentUserFeature","UpdateCurrentUserFeature","ListUsersFeature","GetUserFeature","CreateUserFeature","UpdateUserFeature","DeleteUserFeature","SecurityPermission","HasPermission","Routes","AdminLayout","UsersView","UserAccountForm","AccountDetails","AdminUsers","memo"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAM,EAAEA,OAAAA,KAAK,EAAEC,MAAAA,IAAI,EAAE,GAAGC;AAQxB,MAAMC,sBAAsB;IACxB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,OAAO,WAAP,GACI,oBAACC,UAAQA,MAAAA,WAAAA,GACL,oBAACC,iBAAeA;QAAC,SAASC;sBAC1B,oBAACD,iBAAeA;QAAC,SAASE;sBAC1B,oBAACF,iBAAeA;QAAC,SAASG;sBAC1B,oBAACH,iBAAeA;QAAC,SAASI;sBAC1B,oBAACJ,iBAAeA;QAAC,SAASK;sBAC1B,oBAACL,iBAAeA;QAAC,SAASM;sBAC1B,oBAACN,iBAAeA;QAAC,SAASO;sBAC1B,oBAACP,iBAAeA;QAAC,SAASQ;sBAC1B,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAACd,aAAWA,MAAAA,WAAAA,GACR,oBAACe,eAAaA;QAAC,MAAM;qBACjB,oBAACjB,OAAKA;QACF,OAAOkB,OAAO,KAAK,CAAC,IAAI;QACxB,uBACI,oBAACC,aAAWA;YAAC,OAAO;yBAChB,oBAACjB,YAAY,UAAU;YAAC,MAAM;YAAS,OAAO;0BAC9C,oBAACkB,WAASA;sBAKtB,oBAACnB,MAAIA;QACD,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,IAAIG,QAAQc,OAAO,KAAK,CAAC,IAAI;YAC7B,UAAU;;uBAQ1B,oBAAClB,OAAKA;QACF,OAAOkB,OAAO,KAAK,CAAC,OAAO;QAC3B,uBACI,oBAACC,aAAWA;YAAC,OAAO;yBAChB,oBAACjB,YAAY,UAAU;YAAC,MAAM;YAAW,OAAO;0BAChD,oBAACmB,iBAAeA;sBAK5B,oBAACpB,KAAK,IAAI;QACN,MAAM;QACN,OAAO;QACP,uBAAS,oBAACqB,gBAAcA;YAAC,cAAclB,QAAQc,OAAO,KAAK,CAAC,OAAO;;;AAKvF;AAEO,MAAMK,aAAa,WAAHA,GAAGC,KAAKrB"}

package/presentation/adminUsers/SecurityPermission.d.ts

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

package/presentation/adminUsers/SecurityPermission.js

@@ -0,0 +1,15 @@
+import react from "react";
+import { AdminConfig } from "../../config/AdminConfig.js";
+import { ReactComponent } from "@webiny/icons/group.svg";
+import { ADMIN_USERS_PERMISSIONS_SCHEMA } from "../../features/adminUsers/permissionsSchema.js";
+const { Security: Security } = AdminConfig;
+const SecurityPermission = ()=>/*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Security.Permissions, {
+        name: "admin-users",
+        title: "Admin Users",
+        description: "Manage Admin Users permissions.",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        schema: ADMIN_USERS_PERMISSIONS_SCHEMA
+    }));
+export { SecurityPermission };
+
+//# sourceMappingURL=SecurityPermission.js.map

package/presentation/adminUsers/SecurityPermission.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/SecurityPermission.js","sources":["../../../src/presentation/adminUsers/SecurityPermission.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig } from \"~/config/AdminConfig.js\";\nimport { ReactComponent as PermissionsIcon } from \"@webiny/icons/group.svg\";\nimport { ADMIN_USERS_PERMISSIONS_SCHEMA } from \"~/features/adminUsers/permissionsSchema.js\";\n\nconst { Security } = AdminConfig;\n\nexport const SecurityPermission = () => {\n    return (\n        <AdminConfig>\n            <Security.Permissions\n                name=\"admin-users\"\n                title=\"Admin Users\"\n                description=\"Manage Admin Users permissions.\"\n                icon={<PermissionsIcon />}\n                schema={ADMIN_USERS_PERMISSIONS_SCHEMA}\n            />\n        </AdminConfig>\n    );\n};\n"],"names":["Security","AdminConfig","SecurityPermission","PermissionsIcon","ADMIN_USERS_PERMISSIONS_SCHEMA"],"mappings":";;;;AAKA,MAAM,EAAEA,UAAAA,QAAQ,EAAE,GAAGC;AAEd,MAAMC,qBAAqB,IACvB,WAAP,GACI,oBAACD,aAAWA,MAAAA,WAAAA,GACR,oBAACD,SAAS,WAAW;QACjB,MAAK;QACL,OAAM;QACN,aAAY;QACZ,oBAAM,oBAACG,gBAAeA;QACtB,QAAQC"}

package/presentation/adminUsers/UserItem.d.ts

@@ -0,0 +1,10 @@
+export interface UserItem {
+    id: string;
+    avatar: {
+        src: string;
+    };
+    firstName: string;
+    lastName: string;
+    email: string;
+    external?: boolean;
+}

package/presentation/adminUsers/components/AvatarImage/AvatarImage.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { SingleImageUploadProps } from "../../../../components/SingleImageUpload.js";
+export declare const AvatarImage: ({ round, ...props }: SingleImageUploadProps) => React.JSX.Element;

package/presentation/adminUsers/components/AvatarImage/AvatarImage.js

@@ -0,0 +1,31 @@
+import { SingleImageUpload } from "../../../../components/SingleImageUpload.js";
+import { AvatarImagePreview } from "./AvatarImagePreview.js";
+import { AvatarImageTrigger } from "./AvatarImageTrigger.js";
+import { cn } from "@webiny/admin-ui";
+import * as __rspack_external_react from "react";
+const AvatarImage = ({ round, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "w-full flex-1"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn([
+            "size-[128px] mx-auto relative overflow-hidden",
+            round && "rounded-full"
+        ])
+    }, /*#__PURE__*/ __rspack_external_react.createElement(SingleImageUpload, {
+        ...props,
+        className: "p-0 border-none!",
+        variant: "ghost",
+        type: "area",
+        renderFilePreview: ({ onReplaceItem, onRemoveItem, value, disabled })=>/*#__PURE__*/ __rspack_external_react.createElement(AvatarImagePreview, {
+                onReplaceItem: onReplaceItem,
+                onRemoveItem: onRemoveItem,
+                value: value,
+                disabled: disabled
+            }),
+        renderTrigger: ({ onSelectItem, disabled })=>/*#__PURE__*/ __rspack_external_react.createElement(AvatarImageTrigger, {
+                disabled: disabled,
+                onSelectItem: onSelectItem
+            })
+    })));
+export { AvatarImage };
+
+//# sourceMappingURL=AvatarImage.js.map

package/presentation/adminUsers/components/AvatarImage/AvatarImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/components/AvatarImage/AvatarImage.js","sources":["../../../../../src/presentation/adminUsers/components/AvatarImage/AvatarImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SingleImageUploadProps } from \"~/components/SingleImageUpload.js\";\nimport { SingleImageUpload } from \"~/components/SingleImageUpload.js\";\nimport { AvatarImagePreview } from \"./AvatarImagePreview.js\";\nimport { AvatarImageTrigger } from \"~/presentation/adminUsers/components/AvatarImage/AvatarImageTrigger.js\";\nimport { cn } from \"@webiny/admin-ui\";\n\nexport const AvatarImage = ({ round, ...props }: SingleImageUploadProps) => {\n    return (\n        <div className={\"w-full flex-1\"}>\n            <div\n                className={cn([\n                    \"size-[128px] mx-auto relative overflow-hidden\",\n                    round && \"rounded-full\"\n                ])}\n            >\n                <SingleImageUpload\n                    {...props}\n                    className={\"p-0 border-none!\"}\n                    variant={\"ghost\"}\n                    type={\"area\"}\n                    renderFilePreview={({ onReplaceItem, onRemoveItem, value, disabled }) => {\n                        return (\n                            <AvatarImagePreview\n                                onReplaceItem={onReplaceItem}\n                                onRemoveItem={onRemoveItem}\n                                value={value}\n                                disabled={disabled}\n                            />\n                        );\n                    }}\n                    renderTrigger={({ onSelectItem, disabled }) => {\n                        return (\n                            <AvatarImageTrigger disabled={disabled} onSelectItem={onSelectItem} />\n                        );\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["AvatarImage","round","props","cn","SingleImageUpload","onReplaceItem","onRemoveItem","value","disabled","AvatarImagePreview","onSelectItem","AvatarImageTrigger"],"mappings":";;;;;AAOO,MAAMA,cAAc,CAAC,EAAEC,KAAK,EAAE,GAAGC,OAA+B,GAC5D,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QACG,WAAWC,GAAG;YACV;YACAF,SAAS;SACZ;qBAED,sCAACG,mBAAiBA;QACb,GAAGF,KAAK;QACT,WAAW;QACX,SAAS;QACT,MAAM;QACN,mBAAmB,CAAC,EAAEG,aAAa,EAAEC,YAAY,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GACzD,WAAP,GACI,sCAACC,oBAAkBA;gBACf,eAAeJ;gBACf,cAAcC;gBACd,OAAOC;gBACP,UAAUC;;QAItB,eAAe,CAAC,EAAEE,YAAY,EAAEF,QAAQ,EAAE,GAC/B,WAAP,GACI,sCAACG,oBAAkBA;gBAAC,UAAUH;gBAAU,cAAcE"}

package/presentation/adminUsers/components/AvatarImage/AvatarImagePreview.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { type FileItemFormatted } from "@webiny/admin-ui";
+interface AvatarImagePreviewProps {
+    value: FileItemFormatted;
+    onReplaceItem: any;
+    onRemoveItem: any;
+    disabled?: boolean;
+}
+declare const AvatarImagePreview: ({ value, onReplaceItem, onRemoveItem, disabled }: AvatarImagePreviewProps) => React.JSX.Element;
+export { AvatarImagePreview, type AvatarImagePreviewProps };

package/presentation/adminUsers/components/AvatarImage/AvatarImagePreview.js

@@ -0,0 +1,53 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { Icon, IconButton, Tooltip, cn } from "@webiny/admin-ui";
+const AvatarImagePreview = ({ value, onReplaceItem, onRemoveItem, disabled })=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-full flex-1"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("size-[128px] mx-auto relative overflow-hidden")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "size-full"
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: value.url,
+        alt: value.name,
+        className: "object-cover size-full"
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "flex justify-center items-center gap-xs size-full",
+            "absolute top-0 left-0",
+            "bg-neutral-xstrong/90",
+            "opacity-0 hover:opacity-100 transition-opacity"
+        ])
+    }, onReplaceItem && /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Select another image",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+                label: "Select another image",
+                size: "md",
+                color: "neutral-light"
+            }),
+            variant: "ghost-negative",
+            size: "sm",
+            onClick: onReplaceItem,
+            disabled: disabled
+        })
+    }), onRemoveItem && /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Remove image",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Remove",
+                size: "md",
+                color: "neutral-light"
+            }),
+            variant: "ghost-negative",
+            size: "sm",
+            onClick: onRemoveItem,
+            disabled: disabled
+        })
+    }))));
+export { AvatarImagePreview };
+
+//# sourceMappingURL=AvatarImagePreview.js.map

package/presentation/adminUsers/components/AvatarImage/AvatarImagePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/components/AvatarImage/AvatarImagePreview.js","sources":["../../../../../src/presentation/adminUsers/components/AvatarImage/AvatarImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\n\nimport { Icon, IconButton, Tooltip, cn, type FileItemFormatted } from \"@webiny/admin-ui\";\n\ninterface AvatarImagePreviewProps {\n    value: FileItemFormatted;\n    onReplaceItem: any;\n    onRemoveItem: any;\n    disabled?: boolean;\n}\n\nconst AvatarImagePreview = ({\n    value,\n    onReplaceItem,\n    onRemoveItem,\n    disabled\n}: AvatarImagePreviewProps) => {\n    return (\n        <div className={\"w-full flex-1\"}>\n            <div className={cn(\"size-[128px] mx-auto relative overflow-hidden\")}>\n                <div className={\"size-full\"}>\n                    <img src={value.url} alt={value.name} className={\"object-cover size-full\"} />\n                </div>\n                <div\n                    className={cn([\n                        \"flex justify-center items-center gap-xs size-full\",\n                        \"absolute top-0 left-0\",\n                        \"bg-neutral-xstrong/90\",\n                        \"opacity-0 hover:opacity-100 transition-opacity\"\n                    ])}\n                >\n                    {onReplaceItem && (\n                        <Tooltip\n                            content={\"Select another image\"}\n                            trigger={\n                                <IconButton\n                                    icon={\n                                        <Icon\n                                            icon={<EditIcon />}\n                                            label={\"Select another image\"}\n                                            size={\"md\"}\n                                            color={\"neutral-light\"}\n                                        />\n                                    }\n                                    variant={\"ghost-negative\"}\n                                    size={\"sm\"}\n                                    onClick={onReplaceItem}\n                                    disabled={disabled}\n                                />\n                            }\n                        ></Tooltip>\n                    )}\n                    {onRemoveItem && (\n                        <Tooltip\n                            content={\"Remove image\"}\n                            trigger={\n                                <IconButton\n                                    icon={\n                                        <Icon\n                                            icon={<TrashIcon />}\n                                            label={\"Remove\"}\n                                            size={\"md\"}\n                                            color={\"neutral-light\"}\n                                        />\n                                    }\n                                    variant={\"ghost-negative\"}\n                                    size={\"sm\"}\n                                    onClick={onRemoveItem}\n                                    disabled={disabled}\n                                />\n                            }\n                        />\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport { AvatarImagePreview, type AvatarImagePreviewProps };\n"],"names":["AvatarImagePreview","value","onReplaceItem","onRemoveItem","disabled","cn","Tooltip","IconButton","Icon","EditIcon","TrashIcon"],"mappings":";;;;AAaA,MAAMA,qBAAqB,CAAC,EACxBC,KAAK,EACLC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACc,GACf,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAWC,GAAG;qBACf,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKJ,MAAM,GAAG;QAAE,KAAKA,MAAM,IAAI;QAAE,WAAW;uBAErD,oBAAC;QACG,WAAWI,GAAG;YACV;YACA;YACA;YACA;SACH;OAEAH,iBAAiB,WAAjBA,GACG,oBAACI,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,oBACI,oBAACC,MAAIA;gBACD,oBAAM,oBAACC,yBAAQA;gBACf,OAAO;gBACP,MAAM;gBACN,OAAO;;YAGf,SAAS;YACT,MAAM;YACN,SAASP;YACT,UAAUE;;QAKzBD,gBAAgB,WAAhBA,GACG,oBAACG,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,oBACI,oBAACC,MAAIA;gBACD,oBAAM,oBAACE,gBAASA;gBAChB,OAAO;gBACP,MAAM;gBACN,OAAO;;YAGf,SAAS;YACT,MAAM;YACN,SAASP;YACT,UAAUC"}

package/presentation/adminUsers/components/AvatarImage/AvatarImageTrigger.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface AvatarImageTriggerProps {
+    onSelectItem: () => void;
+    disabled?: boolean;
+}
+declare const AvatarImageTrigger: ({ onSelectItem, disabled }: AvatarImageTriggerProps) => React.JSX.Element;
+export { AvatarImageTrigger };

package/presentation/adminUsers/components/AvatarImage/AvatarImageTrigger.js

@@ -0,0 +1,28 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/image.svg";
+import { Icon, IconButton, Tooltip, cn } from "@webiny/admin-ui";
+const AvatarImageTrigger = ({ onSelectItem, disabled })=>/*#__PURE__*/ react.createElement("div", {
+        "data-role": "select-image",
+        className: cn([
+            "size-[128px]",
+            "flex justify-center items-center gap-xs",
+            "bg-neutral-strong"
+        ])
+    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Select from library",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Select from library",
+                size: "lg",
+                color: "neutral-light"
+            }),
+            variant: "ghost-negative",
+            size: "lg",
+            onClick: onSelectItem,
+            disabled: disabled
+        })
+    }));
+export { AvatarImageTrigger };
+
+//# sourceMappingURL=AvatarImageTrigger.js.map

package/presentation/adminUsers/components/AvatarImage/AvatarImageTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/components/AvatarImage/AvatarImageTrigger.js","sources":["../../../../../src/presentation/adminUsers/components/AvatarImage/AvatarImageTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { cn, Icon, IconButton, Tooltip } from \"@webiny/admin-ui\";\n\ninterface AvatarImageTriggerProps {\n    onSelectItem: () => void;\n    disabled?: boolean;\n}\n\nconst AvatarImageTrigger = ({ onSelectItem, disabled }: AvatarImageTriggerProps) => {\n    return (\n        <div\n            data-role={\"select-image\"}\n            className={cn([\n                \"size-[128px]\",\n                \"flex justify-center items-center gap-xs\",\n                \"bg-neutral-strong\"\n            ])}\n        >\n            <Tooltip\n                content={\"Select from library\"}\n                trigger={\n                    <IconButton\n                        icon={\n                            <Icon\n                                icon={<ImageIcon />}\n                                label={\"Select from library\"}\n                                size={\"lg\"}\n                                color={\"neutral-light\"}\n                            />\n                        }\n                        variant={\"ghost-negative\"}\n                        size={\"lg\"}\n                        onClick={onSelectItem}\n                        disabled={disabled}\n                    />\n                }\n            />\n        </div>\n    );\n};\n\nexport { AvatarImageTrigger };\n"],"names":["AvatarImageTrigger","onSelectItem","disabled","cn","Tooltip","IconButton","Icon","ImageIcon"],"mappings":";;;AASA,MAAMA,qBAAqB,CAAC,EAAEC,YAAY,EAAEC,QAAQ,EAA2B,GACpE,WAAP,GACI,oBAAC;QACG,aAAW;QACX,WAAWC,GAAG;YACV;YACA;YACA;SACH;qBAED,oBAACC,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,oBACI,oBAACC,MAAIA;gBACD,oBAAM,oBAACC,gBAASA;gBAChB,OAAO;gBACP,MAAM;gBACN,OAAO;;YAGf,SAAS;YACT,MAAM;YACN,SAASN;YACT,UAAUC"}

package/presentation/adminUsers/components/AvatarImage/index.d.ts

@@ -0,0 +1 @@
+export * from "./AvatarImage.js";

package/presentation/adminUsers/components/AvatarImage/index.js

@@ -0,0 +1 @@
+export * from "./AvatarImage.js";

package/presentation/adminUsers/routes.d.ts

@@ -0,0 +1,10 @@
+import { Route } from "@webiny/app";
+export declare const Routes: {
+    Users: {
+        List: Route<{
+            id: import("zod").ZodOptional<import("zod").ZodString>;
+            new: import("zod").ZodOptional<import("zod").ZodBoolean>;
+        }>;
+        Account: Route<undefined>;
+    };
+};

package/presentation/adminUsers/routes.js

@@ -0,0 +1,20 @@
+import { Route } from "@webiny/app";
+const Routes = {
+    Users: {
+        List: new Route({
+            name: "AdminUsers/List",
+            path: "/admin-users",
+            params: (z)=>({
+                    id: z.string().optional(),
+                    new: z.boolean().optional()
+                })
+        }),
+        Account: new Route({
+            name: "AdminUsers/Account",
+            path: "/account"
+        })
+    }
+};
+export { Routes };
+
+//# sourceMappingURL=routes.js.map

package/presentation/adminUsers/routes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/adminUsers/routes.js","sources":["../../../src/presentation/adminUsers/routes.ts"],"sourcesContent":["import { Route } from \"@webiny/app\";\n\nexport const Routes = {\n    Users: {\n        List: new Route({\n            name: \"AdminUsers/List\",\n            path: \"/admin-users\",\n            params: z => {\n                return {\n                    id: z.string().optional(),\n                    new: z.boolean().optional()\n                };\n            }\n        }),\n        Account: new Route({\n            name: \"AdminUsers/Account\",\n            path: \"/account\"\n        })\n    }\n};\n"],"names":["Routes","Route","z"],"mappings":";AAEO,MAAMA,SAAS;IAClB,OAAO;QACH,MAAM,IAAIC,MAAM;YACZ,MAAM;YACN,MAAM;YACN,QAAQC,CAAAA,IACG;oBACH,IAAIA,EAAE,MAAM,GAAG,QAAQ;oBACvB,KAAKA,EAAE,OAAO,GAAG,QAAQ;gBAC7B;QAER;QACA,SAAS,IAAID,MAAM;YACf,MAAM;YACN,MAAM;QACV;IACJ;AACJ"}

package/presentation/adminUsers/userMenu/AccountDetails.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface AccountDetailsProps {
+    accountRoute: string;
+}
+export declare const AccountDetails: (props: AccountDetailsProps) => React.JSX.Element | null;
+export {};