@plone/volto 18.0.0-alpha.43 → 18.0.0-alpha.44

package/dist/server/assets/GroupsControlpanel-DjZK6zeD.js

@@ -0,0 +1,697 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { l as listGroups, d as deleteGroup, c as createGroup, u as updateGroup } from "./groups-DlLziArH.js";
+import { bQ as AUTH_ROLE, bH as getControlpanel, T as Toast, aw as messages, H as HelmetExport, be as ModalForm, I as Icon, k as clearSVG } from "../entry-server.js";
+import { l as listRoles, a as addUserSvg } from "./add-user-OjrbLPze.js";
+import { g as getUser } from "./users-BY0qskQF.js";
+import jwtDecode from "jwt-decode";
+import { T as Toolbar } from "./Toolbar-DVsVq7NQ.js";
+import { P as Pagination } from "./Pagination-DhaW_lzc.js";
+import { E as Error2 } from "./Error-MJ-ObF_2.js";
+import RenderGroups from "./RenderGroups-15rVe2q0.js";
+import { Link } from "react-router-dom";
+import { i as isManager, a as canAssignRole } from "./User-CeYa32LY.js";
+import { s as saveSVG } from "./save-C0BIu8AK.js";
+import { p as ploneSVG } from "./plone-DmfQ132L.js";
+import { find, map, pull } from "lodash-es";
+import PropTypes from "prop-types";
+import { Component } from "react";
+import { injectIntl, FormattedMessage } from "react-intl";
+import { createPortal } from "react-dom";
+import { connect } from "react-redux";
+import { toast } from "react-toastify";
+import { compose, bindActionCreators } from "redux";
+import { Container, Confirm, Dimmer, Loader, Segment, Form as Form$1, Input, Table, Button } from "semantic-ui-react";
+import "classnames";
+import "moment";
+import "react-router";
+import "react-router-hash-link";
+import "tlds";
+import "prepend-http";
+import "lodash-move";
+import "react-dom/server";
+import "react-transition-group";
+import "promise-file-reader";
+import "uuid";
+import "pretty-bytes";
+import "react-side-effect";
+import "github-slugger";
+import "slate";
+import "hoist-non-react-statics";
+import "query-string";
+import "slate-react";
+import "prettier/standalone";
+import "prettier/parser-html";
+import "prismjs/components/prism-core.js";
+import "react-animate-height";
+import "react-popper";
+import "react-sortable-hoc";
+import "react-dates/initialize.js";
+import "react-anchor-link-smooth-scroll";
+import "react-router-config";
+import "react-fast-compare";
+import "object-assign";
+import "lodash-es/split.js";
+import "lodash-es/join.js";
+import "lodash-es/trim.js";
+import "react-cookie";
+import "react-intl-redux";
+import "universal-cookie";
+import "slate-hyperscript";
+import "is-hotkey";
+import "react-dropzone";
+import "react-intersection-observer";
+import "is-url";
+import "lodash-es/isUndefined.js";
+import "lodash-es/isString.js";
+import "redux-mock-store";
+import "serialize-javascript";
+import "superagent";
+import "connected-react-router";
+import "react-beautiful-dnd";
+import "detect-browser";
+import "locale";
+import "history";
+import "redux-thunk";
+import "redux-localstorage-simple";
+import "debug";
+import "express";
+import "http-proxy-middleware";
+import "./PersonalInformation--cOokZv2.js";
+function authenticatedRole(role) {
+  return {
+    type: AUTH_ROLE,
+    result: role
+  };
+}
+class GroupsControlpanel extends Component {
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Sharing
+   */
+  constructor(props) {
+    super(props);
+    __publicField(this, "fetchData", async () => {
+      await this.props.getControlpanel("usergroup");
+      await this.props.listRoles();
+      if (!this.props.many_groups) {
+        await this.props.listGroups();
+        this.setState({
+          groupEntries: this.props.groups
+        });
+      }
+      await this.props.getUser(this.props.userId);
+    });
+    /**
+     * @param {*} event
+     * @memberof GroupsControlpanel
+     */
+    __publicField(this, "updateGroupRoleSubmit", (e) => {
+      e.stopPropagation();
+      this.state.groupEntries.forEach((item) => {
+        this.props.updateGroup(item.id, item);
+      });
+      this.props.authenticatedRole(this.state.authenticatedRole);
+      toast.success(
+        /* @__PURE__ */ jsx(
+          Toast,
+          {
+            success: true,
+            title: this.props.intl.formatMessage(messages.success),
+            content: this.props.intl.formatMessage(messages.updateGroups)
+          }
+        )
+      );
+    });
+    /**
+     * On change page
+     * @method onChangePage
+     * @param {object} event Event object.
+     * @param {string} value Page value.
+     * @returns {undefined}
+     */
+    __publicField(this, "onChangePage", (event, { value }) => {
+      this.setState({
+        currentPage: value
+      });
+    });
+    this.onChangeSearch = this.onChangeSearch.bind(this);
+    this.onSearchGroups = this.onSearchGroups.bind(this);
+    this.deleteGroup = this.deleteGroup.bind(this);
+    this.onDeleteOk = this.onDeleteOk.bind(this);
+    this.onDeleteCancel = this.onDeleteCancel.bind(this);
+    this.onAddGroupSubmit = this.onAddGroupSubmit.bind(this);
+    this.onAddGroupError = this.onAddGroupError.bind(this);
+    this.onAddGroupSuccess = this.onAddGroupSuccess.bind(this);
+    this.updateGroupRole = this.updateGroupRole.bind(this);
+    this.state = {
+      search: "",
+      isLoading: false,
+      addGroupError: "",
+      showDelete: false,
+      groupToDelete: void 0,
+      showAddGroup: false,
+      groupEntries: [],
+      isClient: false,
+      authenticatedRole: props.inheritedRole || [],
+      currentPage: 0,
+      pageSize: 10
+    };
+  }
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.setState({
+      isClient: true
+    });
+    this.fetchData();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.deleteGroupRequest.loading && nextProps.deleteGroupRequest.loaded || this.props.createGroupRequest.loading && nextProps.createGroupRequest.loaded) {
+      this.props.listGroups(this.state.search);
+    }
+    if (this.props.deleteGroupRequest.loading && nextProps.deleteGroupRequest.loaded) {
+      this.onDeleteGroupSuccess();
+    }
+    if (this.props.createGroupRequest.loading && nextProps.createGroupRequest.loaded) {
+      this.onAddGroupSuccess();
+    }
+    if (this.props.createGroupRequest.loading && nextProps.createGroupRequest.error) {
+      this.onAddGroupError(nextProps.createGroupRequest.error);
+    }
+    if (this.props.loadRolesRequest.loading && nextProps.loadRolesRequest.error) {
+      this.setState({
+        error: nextProps.loadRolesRequest.error
+      });
+    }
+  }
+  getGroupFromProps(value) {
+    return find(this.props.groups, ["@id", value]);
+  }
+  /**
+   *
+   *
+   * @param {*} event Event object
+   * @memberof GroupsControlpanel
+   * @returns {undefined}
+   */
+  onSearchGroups(event) {
+    this.setState({ isLoading: true });
+    event.preventDefault();
+    this.props.listGroups(this.state.search).then(() => {
+      this.setState({ isLoading: false });
+    }).catch((error) => {
+      this.setState({ isLoading: false });
+      console.error("Error searching group", error);
+    });
+  }
+  /**
+   * On change search handler
+   * @method onChangeSearch
+   * @param {object} event Event object.
+   * @returns {undefined}
+   */
+  onChangeSearch(event) {
+    this.setState({
+      search: event.target.value
+    });
+  }
+  /**
+   *
+   *
+   * @param {*} event Event object.
+   * @param {*} { value } id (groupname)
+   * @memberof GroupsControlpanel
+   * @returns {undefined}
+   */
+  deleteGroup(event, { value }) {
+    if (value) {
+      this.setState({
+        showDelete: true,
+        groupToDelete: this.getGroupFromProps(value)
+      });
+    }
+  }
+  /**
+   * On delete ok
+   * @method onDeleteOk
+   * @returns {undefined}
+   */
+  onDeleteOk() {
+    if (this.state.groupToDelete) {
+      this.props.deleteGroup(this.state.groupToDelete.id);
+    }
+  }
+  /**
+   * On delete cancel
+   * @method onDeleteCancel
+   * @returns {undefined}
+   */
+  onDeleteCancel() {
+    this.setState({
+      showDelete: false,
+      itemsToDelete: [],
+      groupToDelete: void 0
+    });
+  }
+  /**
+   *
+   * @param {*} name
+   * @param {*} value
+   * @memberof GroupsControlpanel
+   */
+  updateGroupRole(name, value) {
+    this.setState((prevState) => ({
+      groupEntries: map(this.state.groupEntries, (entry) => ({
+        ...entry,
+        roles: entry.id === name && !entry.roles.includes(value) ? [...entry.roles, value] : entry.id !== name ? entry.roles : pull(entry.roles, value)
+      })),
+      authenticatedRole: name === "AuthenticatedUsers" && !prevState.authenticatedRole.includes(value) ? [...prevState.authenticatedRole, value] : name !== "AuthenticatedUsers" ? prevState.authenticatedRole : pull(prevState.authenticatedRole, value)
+    }));
+  }
+  /**
+   *
+   *
+   * @param {object} data Form data from the ModalForm.
+   * @param {func} callback to set new form data in the ModalForm
+   * @memberof GroupsControlpanel
+   * @returns {undefined}
+   */
+  onAddGroupSubmit(data, callback) {
+    this.props.createGroup(data);
+    this.setState({
+      addGroupSetFormDataCallback: callback
+    });
+  }
+  /**
+   * Handle Errors after createGroup()
+   *
+   * @param {*} error object. Requires the property .message
+   * @memberof GroupsControlpanel
+   * @returns {undefined}
+   */
+  onAddGroupError(error) {
+    this.setState({
+      addGroupError: error.response.body.message
+    });
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.groups !== prevProps.groups) {
+      this.setState({
+        groupEntries: this.props.groups
+      });
+    }
+  }
+  /**
+   * Handle Success after createGroup()
+   *
+   * @memberof GroupsControlpanel
+   * @returns {undefined}
+   */
+  onAddGroupSuccess() {
+    this.state.addGroupSetFormDataCallback({});
+    this.setState({
+      showAddGroup: false,
+      addGroupError: void 0,
+      addGroupSetFormDataCallback: void 0
+    });
+    toast.success(
+      /* @__PURE__ */ jsx(
+        Toast,
+        {
+          success: true,
+          title: this.props.intl.formatMessage(messages.success),
+          content: this.props.intl.formatMessage(messages.groupCreated)
+        }
+      )
+    );
+  }
+  /**
+   * Handle Success after deleteGroup()
+   *
+   * @returns {undefined}
+   */
+  onDeleteGroupSuccess() {
+    this.setState({
+      groupToDelete: void 0,
+      showDelete: false
+    });
+    toast.success(
+      /* @__PURE__ */ jsx(
+        Toast,
+        {
+          success: true,
+          title: this.props.intl.formatMessage(messages.success),
+          content: this.props.intl.formatMessage(messages.groupDeleted)
+        }
+      )
+    );
+  }
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    var _a, _b, _c;
+    if (this.state.error) {
+      return /* @__PURE__ */ jsx(Error2, { error: this.state.error });
+    }
+    let groupNameToDelete = this.state.groupToDelete ? this.state.groupToDelete.id : "";
+    const isUserManager = isManager(this.props.user);
+    return /* @__PURE__ */ jsxs(Container, { className: "users-control-panel", children: [
+      /* @__PURE__ */ jsx(HelmetExport, { title: this.props.intl.formatMessage(messages.groups) }),
+      /* @__PURE__ */ jsxs("div", { className: "container", children: [
+        /* @__PURE__ */ jsx(
+          Confirm,
+          {
+            open: this.state.showDelete,
+            header: this.props.intl.formatMessage(
+              messages.deleteGroupConfirmTitle
+            ),
+            content: /* @__PURE__ */ jsxs("div", { className: "content", children: [
+              /* @__PURE__ */ jsx(Dimmer, { active: (_b = (_a = this == null ? void 0 : this.props) == null ? void 0 : _a.deleteGroupRequest) == null ? void 0 : _b.loading, children: /* @__PURE__ */ jsx(Loader, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Loading", defaultMessage: "Loading." }) }) }),
+              /* @__PURE__ */ jsx("ul", { className: "content", children: /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "Do you really want to delete the group {groupname}?",
+                  defaultMessage: "Do you really want to delete the group {groupname}?",
+                  values: {
+                    groupname: /* @__PURE__ */ jsx("b", { children: groupNameToDelete })
+                  }
+                }
+              ) })
+            ] }),
+            onCancel: this.onDeleteCancel,
+            onConfirm: this.onDeleteOk,
+            size: null
+          }
+        ),
+        this.state.showAddGroup ? /* @__PURE__ */ jsx(
+          ModalForm,
+          {
+            open: this.state.showAddGroup,
+            className: "modal",
+            onSubmit: this.onAddGroupSubmit,
+            submitError: this.state.addGroupError,
+            onCancel: () => this.setState({ showAddGroup: false }),
+            title: this.props.intl.formatMessage(messages.addGroupsFormTitle),
+            loading: this.props.createGroupRequest.loading,
+            schema: {
+              fieldsets: [
+                {
+                  id: "default",
+                  title: "FIXME: Group Data",
+                  fields: [
+                    "title",
+                    "description",
+                    "groupname",
+                    "email",
+                    "roles"
+                  ]
+                }
+              ],
+              properties: {
+                title: {
+                  title: this.props.intl.formatMessage(
+                    messages.addGroupsFormTitleTitle
+                  ),
+                  type: "string",
+                  description: ""
+                },
+                description: {
+                  title: this.props.intl.formatMessage(
+                    messages.addGroupsFormDescriptionTitle
+                  ),
+                  type: "string",
+                  description: ""
+                },
+                groupname: {
+                  title: this.props.intl.formatMessage(
+                    messages.addGroupsFormGroupNameTitle
+                  ),
+                  type: "string",
+                  description: "A unique identifier for the group. Can not be changed after creation."
+                },
+                email: {
+                  title: this.props.intl.formatMessage(
+                    messages.addGroupsFormEmailTitle
+                  ),
+                  type: "string",
+                  description: "",
+                  widget: "email"
+                },
+                roles: {
+                  title: this.props.intl.formatMessage(
+                    messages.addGroupsFormRolesTitle
+                  ),
+                  type: "array",
+                  choices: this.props.roles.filter((role) => canAssignRole(isUserManager, role)).map((role) => [role.id, role.title]),
+                  noValueOption: false,
+                  description: ""
+                }
+              },
+              required: ["groupname"]
+            }
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxs(Segment.Group, { raised: true, children: [
+        /* @__PURE__ */ jsx(Segment, { className: "primary", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Groups", defaultMessage: "Groups" }) }),
+        /* @__PURE__ */ jsx(Segment, { secondary: true, children: /* @__PURE__ */ jsx(
+          FormattedMessage,
+          {
+            id: "Groups are logical collections of users, such as departments and business units. Groups are not directly related to permissions on a global level, you normally use Roles for that - and let certain Groups have a particular role. The symbol{plone_svg}indicates a role inherited from membership in another group.",
+            defaultMessage: "Groups are logical collections of users, such as departments and business units. Groups are not directly related to permissions on a global level, you normally use Roles for that - and let certain Groups have a particular role. The symbol{plone_svg}indicates a role inherited from membership in another group.",
+            values: {
+              plone_svg: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: ploneSVG,
+                  size: "20px",
+                  color: "#007EB1",
+                  title: "plone-svg"
+                }
+              )
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Segment, { children: /* @__PURE__ */ jsx(Form$1, { onSubmit: this.onSearchGroups, children: /* @__PURE__ */ jsx(Form$1.Field, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: "SearchableText",
+            action: {
+              icon: "search",
+              loading: this.state.isLoading,
+              disabled: this.state.isLoading
+            },
+            placeholder: this.props.intl.formatMessage(
+              messages.searchGroups
+            ),
+            onChange: this.onChangeSearch,
+            id: "group-search-input"
+          }
+        ) }) }) }),
+        /* @__PURE__ */ jsxs(Form$1, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "table", children: [
+            (this.props.many_groups && this.state.groupEntries.length > 0 || !this.props.many_groups) && /* @__PURE__ */ jsxs(Table, { padded: true, striped: true, attached: true, unstackable: true, children: [
+              /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+                /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(
+                  FormattedMessage,
+                  {
+                    id: "Groupname",
+                    defaultMessage: "Groupname"
+                  }
+                ) }),
+                this.props.roles.map((role) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: role.title }, role.id)),
+                /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(
+                  FormattedMessage,
+                  {
+                    id: "Actions",
+                    defaultMessage: "Actions"
+                  }
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsx(Table.Body, { "data-group": "groups", children: this.state.groupEntries.slice(
+                this.state.currentPage * 10,
+                this.state.pageSize * (this.state.currentPage + 1)
+              ).map((group) => /* @__PURE__ */ jsx(
+                RenderGroups,
+                {
+                  onDelete: this.deleteGroup,
+                  roles: this.props.roles,
+                  group,
+                  updateGroups: this.updateGroupRole,
+                  inheritedRole: this.state.authenticatedRole,
+                  isUserManager
+                },
+                group.id
+              )) })
+            ] }),
+            this.state.groupEntries.length === 0 && this.state.search && /* @__PURE__ */ jsx(Segment, { children: this.props.intl.formatMessage(messages.groupSearchNoResults) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "contents-pagination", children: /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              current: this.state.currentPage,
+              total: Math.ceil(
+                ((_c = this.state.groupEntries) == null ? void 0 : _c.length) / this.state.pageSize
+              ),
+              onChangePage: this.onChangePage
+            }
+          ) })
+        ] })
+      ] }),
+      this.state.isClient && createPortal(
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            pathname: this.props.pathname,
+            hideDefaultViewButtons: true,
+            inner: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  id: "toolbar-save",
+                  className: "save",
+                  "aria-label": this.props.intl.formatMessage(messages.save),
+                  onClick: this.updateGroupRoleSubmit,
+                  loading: this.props.createGroupRequest.loading,
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: saveSVG,
+                      className: "circled",
+                      size: "30px",
+                      title: this.props.intl.formatMessage(messages.save)
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(Link, { to: "/controlpanel", className: "cancel", children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: clearSVG,
+                  className: "circled",
+                  "aria-label": this.props.intl.formatMessage(
+                    messages.cancel
+                  ),
+                  size: "30px",
+                  title: this.props.intl.formatMessage(messages.cancel)
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  id: "toolbar-add",
+                  "aria-label": this.props.intl.formatMessage(
+                    messages.addGroupsButtonTitle
+                  ),
+                  onClick: () => {
+                    this.setState({ showAddGroup: true });
+                  },
+                  loading: this.props.createGroupRequest.loading,
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: addUserSvg,
+                      size: "45px",
+                      color: "#826A6A",
+                      title: this.props.intl.formatMessage(
+                        messages.addGroupsButtonTitle
+                      )
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        document.getElementById("toolbar")
+      )
+    ] });
+  }
+}
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+__publicField(GroupsControlpanel, "propTypes", {
+  listRoles: PropTypes.func.isRequired,
+  listGroups: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  roles: PropTypes.arrayOf(
+    PropTypes.shape({
+      "@id": PropTypes.string,
+      "@type": PropTypes.string,
+      id: PropTypes.string
+    })
+  ).isRequired,
+  groups: PropTypes.arrayOf(
+    PropTypes.shape({
+      Title: PropTypes.string,
+      Description: PropTypes.string,
+      roles: PropTypes.arrayOf(PropTypes.string),
+      groupname: PropTypes.string
+    })
+  ).isRequired,
+  user: PropTypes.shape({
+    "@id": PropTypes.string,
+    id: PropTypes.string,
+    description: PropTypes.string,
+    email: PropTypes.string,
+    fullname: PropTypes.string,
+    groups: PropTypes.object,
+    location: PropTypes.string,
+    portrait: PropTypes.string,
+    home_page: PropTypes.string,
+    roles: PropTypes.arrayOf(PropTypes.string),
+    username: PropTypes.string
+  }).isRequired
+});
+const GroupsControlpanel$1 = compose(
+  injectIntl,
+  connect(
+    (state, props) => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        user: state.users.user,
+        userId: state.userSession.token ? jwtDecode(state.userSession.token).sub : "",
+        roles: state.roles.roles,
+        groups: state.groups.groups,
+        description: state.description,
+        many_users: (_c = (_b = (_a = state.controlpanels) == null ? void 0 : _a.controlpanel) == null ? void 0 : _b.data) == null ? void 0 : _c.many_users,
+        many_groups: (_f = (_e = (_d = state.controlpanels) == null ? void 0 : _d.controlpanel) == null ? void 0 : _e.data) == null ? void 0 : _f.many_groups,
+        pathname: props.location.pathname,
+        deleteGroupRequest: state.groups.delete,
+        createGroupRequest: state.groups.create,
+        loadRolesRequest: state.roles,
+        inheritedRole: state.authRole.authenticatedRole
+      };
+    },
+    (dispatch) => bindActionCreators(
+      {
+        listRoles,
+        listGroups,
+        deleteGroup,
+        getControlpanel,
+        createGroup,
+        updateGroup,
+        authenticatedRole,
+        getUser
+      },
+      dispatch
+    )
+  )
+)(GroupsControlpanel);
+export {
+  GroupsControlpanel$1 as default
+};