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

package/dist/server/assets/Sharing-lbff3IeO.js

@@ -0,0 +1,579 @@
+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 } from "react/jsx-runtime";
+import { Component } from "react";
+import PropTypes from "prop-types";
+import { aS as UPDATE_SHARING, aT as GET_SHARING, b as getBaseUrl, T as Toast, $ as $149c1bd638913645$export$2e2bcd8739ae039, H as HelmetExport, ag as Pluggable, ah as Plug, I as Icon$1, S as aheadSVG, k as clearSVG, o as backSVG } from "../entry-server.js";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { withRouter, Link } from "react-router-dom";
+import { map, find, isEqual } from "lodash-es";
+import { createPortal } from "react-dom";
+import { Container, Segment, Form as Form$1, Input, Table, Icon, Checkbox, Button } from "semantic-ui-react";
+import jwtDecode from "jwt-decode";
+import { injectIntl, defineMessages, FormattedMessage } from "react-intl";
+import { T as Toolbar } from "./Toolbar-DVsVq7NQ.js";
+import { toast } from "react-toastify";
+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 "./users-BY0qskQF.js";
+import "./User-CeYa32LY.js";
+import "./PersonalInformation--cOokZv2.js";
+function updateSharing(url, sharing) {
+  return {
+    type: UPDATE_SHARING,
+    request: {
+      op: "post",
+      path: `${url}/@sharing`,
+      data: sharing
+    }
+  };
+}
+function getSharing(url, search = "") {
+  return {
+    type: GET_SHARING,
+    request: {
+      op: "get",
+      path: `${url}/@sharing${search !== "" ? `?search=${search}` : ""}`
+    }
+  };
+}
+const messages = defineMessages({
+  searchForUserOrGroup: {
+    id: "Search for user or group",
+    defaultMessage: "Search for user or group"
+  },
+  search: {
+    id: "Search",
+    defaultMessage: "Search"
+  },
+  inherit: {
+    id: "Inherit permissions from higher levels",
+    defaultMessage: "Inherit permissions from higher levels"
+  },
+  save: {
+    id: "Save",
+    defaultMessage: "Save"
+  },
+  cancel: {
+    id: "Cancel",
+    defaultMessage: "Cancel"
+  },
+  back: {
+    id: "Back",
+    defaultMessage: "Back"
+  },
+  sharing: {
+    id: "Sharing",
+    defaultMessage: "Sharing"
+  },
+  user: {
+    id: "User",
+    defaultMessage: "User"
+  },
+  group: {
+    id: "Group",
+    defaultMessage: "Group"
+  },
+  globalRole: {
+    id: "Global role",
+    defaultMessage: "Global role"
+  },
+  inheritedValue: {
+    id: "Inherited value",
+    defaultMessage: "Inherited value"
+  },
+  permissionsUpdated: {
+    id: "Permissions updated",
+    defaultMessage: "Permissions updated"
+  },
+  permissionsUpdatedSuccessfully: {
+    id: "Permissions have been updated successfully",
+    defaultMessage: "Permissions have been updated successfully"
+  },
+  assignNewRoles: {
+    id: "Assign the {role} role to {entry}",
+    defaultMessage: "Assign the {role} role to {entry}"
+  }
+});
+class SharingComponent extends Component {
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Sharing
+   */
+  constructor(props) {
+    super(props);
+    this.onCancel = this.onCancel.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onChangeSearch = this.onChangeSearch.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onToggleInherit = this.onToggleInherit.bind(this);
+    this.state = {
+      search: "",
+      isLoading: false,
+      inherit: props.inherit,
+      entries: props.entries,
+      isClient: false
+    };
+  }
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+    this.setState({ isClient: true });
+  }
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
+      this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+      toast.success(
+        /* @__PURE__ */ jsx(
+          Toast,
+          {
+            success: true,
+            title: this.props.intl.formatMessage(messages.permissionsUpdated),
+            content: this.props.intl.formatMessage(
+              messages.permissionsUpdatedSuccessfully
+            )
+          }
+        )
+      );
+    }
+    this.setState({
+      inherit: this.props.inherit === null ? nextProps.inherit : this.state.inherit,
+      entries: map(nextProps.entries, (entry) => {
+        const values = find(this.state.entries, { id: entry.id });
+        return {
+          ...entry,
+          roles: values ? values.roles : entry.roles
+        };
+      })
+    });
+  }
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {object} event Event object.
+   * @returns {undefined}
+   */
+  onSubmit(event) {
+    const data = { entries: [] };
+    event.preventDefault();
+    if (this.props.inherit !== this.state.inherit) {
+      data.inherit = this.state.inherit;
+    }
+    for (let i = 0; i < this.props.entries.length; i += 1) {
+      if (!isEqual(this.props.entries[i].roles, this.state.entries[i].roles)) {
+        data.entries.push({
+          id: this.state.entries[i].id,
+          type: this.state.entries[i].type,
+          roles: this.state.entries[i].roles
+        });
+      }
+    }
+    this.props.updateSharing(getBaseUrl(this.props.pathname), data);
+  }
+  /**
+   * Search handler
+   * @method onSearch
+   * @param {object} event Event object.
+   * @returns {undefined}
+   */
+  onSearch(event) {
+    event.preventDefault();
+    this.setState({ isLoading: true });
+    this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search).then(() => {
+      this.setState({ isLoading: false });
+    }).catch((error) => {
+      this.setState({ isLoading: false });
+      console.error("Error searching users or groups", error);
+    });
+  }
+  /**
+   * On change search handler
+   * @method onChangeSearch
+   * @param {object} event Event object.
+   * @returns {undefined}
+   */
+  onChangeSearch(event) {
+    this.setState({
+      search: event.target.value
+    });
+  }
+  /**
+   * On toggle inherit handler
+   * @method onToggleInherit
+   * @returns {undefined}
+   */
+  onToggleInherit() {
+    this.setState((state) => ({
+      inherit: !state.inherit
+    }));
+  }
+  /**
+   * On change handler
+   * @method onChange
+   * @param {object} event Event object
+   * @param {string} value Entry value
+   * @returns {undefined}
+   */
+  onChange(event, { value }) {
+    const [principal, role] = value.split(":");
+    this.setState({
+      entries: map(this.state.entries, (entry) => ({
+        ...entry,
+        roles: entry.id === principal ? {
+          ...entry.roles,
+          [role]: !entry.roles[role]
+        } : entry.roles
+      }))
+    });
+  }
+  /**
+   * Cancel handler
+   * @method onCancel
+   * @returns {undefined}
+   */
+  onCancel() {
+    this.props.history.push(getBaseUrl(this.props.pathname));
+  }
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    var _a, _b;
+    const Container$1 = $149c1bd638913645$export$2e2bcd8739ae039.getComponent({ name: "Container" }).component || Container;
+    return /* @__PURE__ */ jsxs(Container$1, { id: "page-sharing", children: [
+      /* @__PURE__ */ jsx(HelmetExport, { title: this.props.intl.formatMessage(messages.sharing) }),
+      /* @__PURE__ */ jsxs(Segment.Group, { raised: true, children: [
+        /* @__PURE__ */ jsx(
+          Pluggable,
+          {
+            name: "sharing-component",
+            params: { isLoading: this.state.isLoading }
+          }
+        ),
+        /* @__PURE__ */ jsx(Plug, { pluggable: "sharing-component", id: "sharing-component-title", children: /* @__PURE__ */ jsx(Segment, { className: "primary", children: /* @__PURE__ */ jsx(
+          FormattedMessage,
+          {
+            id: "Sharing for {title}",
+            defaultMessage: "Sharing for {title}",
+            values: { title: /* @__PURE__ */ jsx("q", { children: this.props.title }) }
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          Plug,
+          {
+            pluggable: "sharing-component",
+            id: "sharing-component-description",
+            children: /* @__PURE__ */ jsx(Segment, { secondary: true, children: /* @__PURE__ */ jsx(
+              FormattedMessage,
+              {
+                id: "You can control who can view and edit your item using the list below.",
+                defaultMessage: "You can control who can view and edit your item using the list below."
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(Plug, { pluggable: "sharing-component", id: "sharing-component-search", children: ({ isLoading }) => {
+          return /* @__PURE__ */ jsx(Segment, { children: /* @__PURE__ */ jsx(Form$1, { onSubmit: this.onSearch, children: /* @__PURE__ */ jsx(Form$1.Field, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              name: "SearchableText",
+              action: {
+                icon: "search",
+                loading: isLoading,
+                disabled: isLoading,
+                "aria-label": this.props.intl.formatMessage(
+                  messages.search
+                )
+              },
+              placeholder: this.props.intl.formatMessage(
+                messages.searchForUserOrGroup
+              ),
+              onChange: this.onChangeSearch,
+              id: "sharing-component-search"
+            }
+          ) }) }) });
+        } }),
+        /* @__PURE__ */ jsx(
+          Plug,
+          {
+            pluggable: "sharing-component",
+            id: "sharing-component-form",
+            dependencies: [this.state.entries, this.props.available_roles],
+            children: /* @__PURE__ */ jsxs(Form$1, { onSubmit: this.onSubmit, children: [
+              /* @__PURE__ */ jsxs(Table, { celled: true, padded: true, striped: true, attached: true, children: [
+                /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Name", defaultMessage: "Name" }) }),
+                  (_a = this.props.available_roles) == null ? void 0 : _a.map((role) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: role.title }, role.id))
+                ] }) }),
+                /* @__PURE__ */ jsx(Table.Body, { children: (_b = this.state.entries) == null ? void 0 : _b.map((entry) => {
+                  var _a2;
+                  return /* @__PURE__ */ jsxs(Table.Row, { children: [
+                    /* @__PURE__ */ jsxs(Table.Cell, { children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          name: entry.type === "user" ? "user" : "users",
+                          title: entry.type === "user" ? this.props.intl.formatMessage(messages.user) : this.props.intl.formatMessage(messages.group)
+                        }
+                      ),
+                      " ",
+                      entry.title,
+                      entry.login && ` (${entry.login})`
+                    ] }),
+                    (_a2 = this.props.available_roles) == null ? void 0 : _a2.map((role) => /* @__PURE__ */ jsxs(Table.Cell, { children: [
+                      entry.roles[role.id] === "global" && /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          name: "check circle outline",
+                          title: this.props.intl.formatMessage(
+                            messages.globalRole
+                          ),
+                          color: "blue"
+                        }
+                      ),
+                      entry.roles[role.id] === "acquired" && /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          name: "check circle outline",
+                          color: "green",
+                          title: this.props.intl.formatMessage(
+                            messages.inheritedValue
+                          )
+                        }
+                      ),
+                      typeof entry.roles[role.id] === "boolean" && /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          name: this.props.intl.formatMessage(
+                            messages.assignNewRoles,
+                            {
+                              entry: entry.title,
+                              role: role.id
+                            }
+                          ),
+                          "aria-label": this.props.intl.formatMessage(
+                            messages.assignNewRoles,
+                            {
+                              entry: entry.title,
+                              role: role.id
+                            }
+                          ),
+                          onChange: this.onChange,
+                          value: `${entry.id}:${role.id}`,
+                          checked: entry.roles[role.id],
+                          disabled: entry.login === this.props.login
+                        }
+                      )
+                    ] }, role.id))
+                  ] }, entry.id);
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Segment, { attached: true, children: [
+                /* @__PURE__ */ jsx(Form$1.Field, { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "inherit-permissions-checkbox",
+                    name: "inherit-permissions-checkbox",
+                    defaultChecked: this.state.inherit,
+                    onChange: this.onToggleInherit,
+                    label: /* @__PURE__ */ jsx("label", { htmlFor: "inherit-permissions-checkbox", children: this.props.intl.formatMessage(messages.inherit) })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("p", { className: "help", children: /* @__PURE__ */ jsx(
+                  FormattedMessage,
+                  {
+                    id: "By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator.",
+                    defaultMessage: "By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator.",
+                    values: {
+                      inherited: /* @__PURE__ */ jsx(Icon, { name: "check circle outline", color: "green" }),
+                      global: /* @__PURE__ */ jsx(Icon, { name: "check circle outline", color: "blue" })
+                    }
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs(Segment, { className: "actions", attached: true, clearing: true, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    basic: true,
+                    primary: true,
+                    floated: "right",
+                    type: "submit",
+                    "aria-label": this.props.intl.formatMessage(messages.save),
+                    title: this.props.intl.formatMessage(messages.save),
+                    loading: this.props.updateRequest.loading,
+                    onClick: this.onSubmit,
+                    children: /* @__PURE__ */ jsx(Icon$1, { className: "circled", name: aheadSVG, size: "30px" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    basic: true,
+                    secondary: true,
+                    "aria-label": this.props.intl.formatMessage(messages.cancel),
+                    title: this.props.intl.formatMessage(messages.cancel),
+                    floated: "right",
+                    onClick: this.onCancel,
+                    children: /* @__PURE__ */ jsx(Icon$1, { className: "circled", name: clearSVG, size: "30px" })
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ] }),
+      this.state.isClient && createPortal(
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            pathname: this.props.pathname,
+            hideDefaultViewButtons: true,
+            inner: /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: `${getBaseUrl(this.props.pathname)}`,
+                className: "item",
+                children: /* @__PURE__ */ jsx(
+                  Icon$1,
+                  {
+                    name: backSVG,
+                    className: "contents circled",
+                    size: "30px",
+                    title: this.props.intl.formatMessage(messages.back)
+                  }
+                )
+              }
+            )
+          }
+        ),
+        document.getElementById("toolbar")
+      )
+    ] });
+  }
+}
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+__publicField(SharingComponent, "propTypes", {
+  updateSharing: PropTypes.func.isRequired,
+  getSharing: PropTypes.func.isRequired,
+  updateRequest: PropTypes.shape({
+    loading: PropTypes.bool,
+    loaded: PropTypes.bool
+  }).isRequired,
+  pathname: PropTypes.string.isRequired,
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      login: PropTypes.string,
+      roles: PropTypes.object,
+      title: PropTypes.string,
+      type: PropTypes.string
+    })
+  ).isRequired,
+  available_roles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  inherit: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  login: PropTypes.string
+});
+/**
+ * Default properties
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+__publicField(SharingComponent, "defaultProps", {
+  inherit: null,
+  login: ""
+});
+const Sharing = compose(
+  withRouter,
+  injectIntl,
+  connect(
+    (state, props) => ({
+      entries: state.sharing.data.entries,
+      inherit: state.sharing.data.inherit,
+      available_roles: state.sharing.data.available_roles,
+      updateRequest: state.sharing.update,
+      pathname: props.location.pathname,
+      title: state.content.data.title,
+      login: state.userSession.token ? jwtDecode(state.userSession.token).sub : ""
+    }),
+    { updateSharing, getSharing }
+  )
+)(SharingComponent);
+export {
+  Sharing as default
+};