Merge branch 'feature/files' of github.com:ONLYOFFICE/AppServer into feature/files

products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js

@@ -13,16 +13,17 @@ import {
   DropDownItem,
   GroupButtonsMenu,
   IconButton,
-  toastr
+  toastr,
+  ComboBox,
+  Icons
 } from "asc-web-components";
 import { fetchFiles, setAction } from "../../../../../store/files/actions";
 import { default as filesStore } from "../../../../../store/store";
 import { EmptyTrashDialog, DeleteDialog } from '../../../../dialogs';
+import { SharingPanel, AddGroupsPanel, AddUsersPanel} from "../../../../panels";
 import { isCanBeDeleted } from "../../../../../store/files/selectors";
 
-import SharingPanel from "./panels/SharingPanel";
+
-import AddUsersPanel from "./panels/AddUsersPanel";
-import AddGroupPanel from "./panels/AddGroupPanel";
 
 const { isAdmin } = store.auth.selectors;
 const { FilterType, FileAction } = constants;
@@ -116,8 +117,7 @@ const SectionHeaderContent = props => {
     isRecycleBinFolder,
     filter,
     deleteDialogVisible,
-    user,
+    currentUser
-    groupsCaption
   } = props;
 
   const onCreate = (format) => {
@@ -367,65 +367,97 @@ const SectionHeaderContent = props => {
       onClick: onEmptyTrashAction
     });
 
-    const onFullAccessClick = () => {
+  const [selectedUsers, setSelectedUsers] = useState([currentUser]);
-      console.log("onFullAccessClick");
+  const onSetSelectedUsers = users => setSelectedUsers([...selectedUsers, ...users]);
-      //this.setState({ currentIconName: "AccessEditIcon" });
-    };
-    const onReadOnlyClick = () => {
-      console.log("onReadOnlyClick");
-      //this.setState({ currentIconName: "EyeIcon" });
-    };
-    const onReviewClick = () => {
-      console.log("onReviewClick");
-      //this.setState({ currentIconName: "AccessReviewIcon" });
-    };
-    const onCommentClick = () => {
-      console.log("onCommentClick");
-      //this.setState({ currentIconName: "AccessCommentIcon" });
-    };
-    const onFormFillingClick = () => {
-      console.log("onFormFillingClick");
-      //this.setState({ currentIconName: "AccessFormIcon" });
-    };
-    const onDenyAccessClick = () => {
-      console.log("onDenyAccessClick");
-      //this.setState({ currentIconName: "AccessNoneIcon" });
-    };
 
-    const advancedOptions = (
+  const [accessRight, setAccessRight] = useState({
-      <>
+    icon: "EyeIcon",
-        <DropDownItem
+    rights: "ReadOnly"
-          label="Full access"
+  });
-          icon="AccessEditIcon"
+
-          onClick={onFullAccessClick}
+  const onFullAccessClick = () => {
-        />
+    console.log("onFullAccessClick");
-        <DropDownItem
+    setAccessRight({ icon: "AccessEditIcon", rights: "FullAccess" });
-          label="Read only"
+  };
-          icon="EyeIcon"
+  const onReadOnlyClick = () => {
-          onClick={onReadOnlyClick}
+    console.log("onReadOnlyClick");
-        />
+    setAccessRight({ icon: "EyeIcon", rights: "ReadOnly" });
-        <DropDownItem
+  };
-          label="Review"
+  const onReviewClick = () => {
-          icon="AccessReviewIcon"
+    console.log("onReviewClick");
-          onClick={onReviewClick}
+    setAccessRight({ icon: "AccessReviewIcon", rights: "Review" });
-        />
+  };
-        <DropDownItem
+  const onCommentClick = () => {
-          label="Comment"
+    console.log("onCommentClick");
-          icon="AccessCommentIcon"
+    setAccessRight({ icon: "AccessCommentIcon", rights: "Comment" });
-          onClick={onCommentClick}
+  };
-        />
+  const onFormFillingClick = () => {
-        <DropDownItem
+    console.log("onFormFillingClick");
-          label="Form filling"
+    setAccessRight({ icon: "AccessFormIcon", rights: "FormFilling" });
-          icon="AccessFormIcon"
+  };
-          onClick={onFormFillingClick}
+  const onDenyAccessClick = () => {
-        />
+    console.log("onDenyAccessClick");
-        <DropDownItem
+    setAccessRight({ icon: "AccessNoneIcon", rights: "DenyAccess" });
-          label="Deny access"
+  };
-          icon="AccessNoneIcon"
+
-          onClick={onDenyAccessClick}
+  const onRemoveUserClick = item => {
-        />
+    console.log("onRemoveUserClick", item);
-      </>
+  }
-    );
+
+
+  const advancedOptions = (
+    <>
+      <DropDownItem
+        label="Full access"
+        icon="AccessEditIcon"
+        onClick={onFullAccessClick}
+      />
+      <DropDownItem
+        label="Read only"
+        icon="EyeIcon"
+        onClick={onReadOnlyClick}
+      />
+      <DropDownItem
+        label="Review"
+        icon="AccessReviewIcon"
+        onClick={onReviewClick}
+      />
+      <DropDownItem
+        label="Comment"
+        icon="AccessCommentIcon"
+        onClick={onCommentClick}
+      />
+      <DropDownItem
+        label="Form filling"
+        icon="AccessFormIcon"
+        onClick={onFormFillingClick}
+      />
+      <DropDownItem
+        label="Deny access"
+        icon="AccessNoneIcon"
+        onClick={onDenyAccessClick}
+      />
+    </>
+  );
+
+  const accessOptionsComboBox = (
+    <ComboBox
+      advancedOptions={advancedOptions}
+      options={[]}
+      selectedOption={{ key: 0 }}
+      size="content"
+      className="ad-selector_combo-box"
+      scaled={false}
+      directionX="right"
+      //isDisabled={isDisabled}
+    >
+      {React.createElement(Icons[accessRight.icon], {
+        size: "medium"
+        //color: this.state.currentIconColor,
+        //isfill: isFill
+      })}
+    </ComboBox>
+  );
 
   return (
     <StyledContainer isHeaderVisible={isHeaderVisible}>
@@ -512,28 +544,31 @@ const SectionHeaderContent = props => {
 
       <SharingPanel
         onClose={openSharingPanel}
-        selection={selection}
         visible={showSharingPanel}
         onShowUsersPanel={onShowUsersPanel}
         onShowGroupsPanel={onShowGroupsPanel}
+        advancedOptions={advancedOptions}
+        accessRight={accessRight}
+        users={selectedUsers}
+        onRemoveUserClick={onRemoveUserClick}
       />
 
       <AddUsersPanel
         onSharingPanelClose={openSharingPanel}
         onClose={onShowUsersPanel}
         visible={showAddUsersPanel}
-        me={user}
+        embeddedComponent={accessOptionsComboBox}
-        groupsCaption={groupsCaption}
+        onSetSelectedUsers={onSetSelectedUsers}
-        advancedOptions={advancedOptions}
+        accessRight={accessRight}
       />
 
-      <AddGroupPanel
+      <AddGroupsPanel
         onSharingPanelClose={openSharingPanel}
         onClose={onShowGroupsPanel}
         visible={showAddGroupsPanel}
-        advancedOptions={advancedOptions}
+        embeddedComponent={accessOptionsComboBox}
-        //me={user}
+        onSetSelectedUsers={onSetSelectedUsers}
-        //groupsCaption={groupsCaption}
+        accessRight={accessRight}
       />
     </StyledContainer>
   );
@@ -555,7 +590,8 @@ const mapStateToProps = state => {
     title,
     filter,
     deleteDialogVisible: isCanBeDeleted(selectedFolder, user),
-    groupsCaption: settings.customNames.groupsCaption
+    //groupsCaption: settings.customNames.groupsCaption,
+    currentUser: user
   };
 };
 

products/ASC.Files/Client/src/components/pages/Home/Section/Header/panels/AddGroupPanel.js

@@ -1,173 +0,0 @@
-import React from "react";
-import {
-  Backdrop,
-  Heading,
-  Aside,
-  IconButton,
-  toastr
-} from "asc-web-components";
-import { GroupSelector } from "asc-web-common";
-import styled from "styled-components";
-
-const StyledAddUserPanel = styled.div`
-  .add_users_panel-aside {
-    transform: translateX(${props => (props.visible ? "0" : "500px")});
-    width: 500px;
-
-    @media (max-width: 550px) {
-      width: 320px;
-      transform: translateX(${props => (props.visible ? "0" : "320px")});
-    }
-  }
-`;
-
-const Content = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  padding: 0 16px 16px;
-
-  .add_users_panel-header {
-    max-width: 500px;
-    margin: 0 0 0 16px;
-    line-height: 56px;
-    font-weight: 700;
-  }
-
-  .add_users_panel-plus-icon {
-    margin-left: auto;
-  }
-`;
-
-const HeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Body = styled.div`
-  .selector-wrapper {
-    position: fixed;
-    height: 94%;
-
-    .column-options {
-      padding: 0 0 16px 0;
-      width: 470px;
-
-      @media (max-width: 550px) {
-        width: 320px;
-        padding: 0 28px 16px 0;
-      }
-
-      .body-options {
-        padding-top: 16px;
-      }
-    }
-    .footer {
-      @media (max-width: 550px) {
-        padding: 16px 28px 16px 0;
-      }
-    }
-  }
-`;
-
-class AddGroupPanel extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showActionPanel: false,
-      isNotifyUsers: false,
-      currentIconName: "EyeIcon"
-    };
-
-    this.ref = React.createRef();
-  }
-
-  onPlusClick = () =>
-    this.setState({ showActionPanel: !this.state.showActionPanel });
-
-  onCloseActionPanel = e => {
-    if (this.ref.current.contains(e.target)) return;
-    this.setState({ showActionPanel: !this.state.showActionPanel });
-  };
-
-  onKeyClick = () => console.log("onKeyClick");
-
-  onAddUsers = () => {
-    console.log("onAddUsers");
-    this.props.onClose();
-  };
-
-  onNotifyUsersChange = () =>
-    this.setState({ isNotifyUsers: !this.state.isNotifyUsers });
-
-  onArrowClick = () => this.props.onClose();
-
-  onClosePanels = () => {
-    this.props.onClose();
-    this.props.onSharingPanelClose();
-  };
-
-  onSelectGroups = items => {
-    this.props.onClose();
-    toastr.success("onSelectGroups", "Task in progress");
-    console.log("onSelect", items);
-  };
-
-  render() {
-    const { selection, visible, me, advancedOptions } = this.props;
-    const { currentIconName } = this.state;
-
-    const headerText = "Add group";
-
-    const zIndex = 310;
-    return (
-      <StyledAddUserPanel visible={visible}>
-        <Backdrop
-          onClick={this.onClosePanels}
-          visible={visible}
-          zIndex={zIndex}
-        />
-        <Aside className="add_users_panel-aside">
-          <Content>
-            <HeaderContent>
-              <IconButton
-                size="16"
-                iconName="ArrowPathIcon"
-                onClick={this.onArrowClick}
-              />
-              <Heading
-                className="add_users_panel-header"
-                size="medium"
-                truncate
-              >
-                {headerText}
-              </Heading>
-              <IconButton
-                size="16"
-                iconName="PlusIcon"
-                className="add_users_panel-plus-icon"
-                onClick={() => console.log("onPlusClick")}
-              />
-            </HeaderContent>
-
-            <Body>
-              <GroupSelector
-                isOpen={visible}
-                isMultiSelect
-                displayType="aside"
-                withoutAside
-                comboBoxOptions={advancedOptions}
-                onSelect={this.onSelectGroups}
-                //onCancel={onCloseGroupSelector}
-              />
-            </Body>
-          </Content>
-        </Aside>
-      </StyledAddUserPanel>
-    );
-  }
-}
-
-export default AddGroupPanel;

products/ASC.Files/Client/src/components/pages/Home/Section/Header/panels/AddUsersPanel.js

@@ -1,177 +0,0 @@
-import React from "react";
-import {
-  Backdrop,
-  Heading,
-  Aside,
-  IconButton,
-  toastr
-} from "asc-web-components";
-import { PeopleSelector } from "asc-web-common";
-import styled from "styled-components";
-
-const StyledAddUserPanel = styled.div`
-  .add_users_panel-aside {
-    transform: translateX(${props => (props.visible ? "0" : "500px")});
-    width: 500px;
-
-    @media (max-width: 550px) {
-      width: 320px;
-      transform: translateX(${props => (props.visible ? "0" : "320px")});
-    }
-  }
-`;
-
-const Content = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  padding: 0 16px 16px;
-
-  .add_users_panel-header {
-    max-width: 500px;
-    margin: 0 0 0 16px;
-    line-height: 56px;
-    font-weight: 700;
-  }
-
-  .add_users_panel-plus-icon {
-    margin-left: auto;
-  }
-`;
-
-const HeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Body = styled.div`
-  .selector-wrapper {
-    position: fixed;
-    height: 94%;
-
-    .column-options {
-      padding: 0 0 16px 0;
-      width: 470px;
-
-      @media (max-width: 550px) {
-        width: 320px;
-        padding: 0 28px 16px 0;
-      }
-
-      .body-options {
-        padding-top: 16px;
-      }
-    }
-    .footer {
-      @media (max-width: 550px) {
-        padding: 16px 28px 16px 0;
-      }
-    }
-  }
-`;
-
-class AddUsersPanel extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showActionPanel: false,
-      isNotifyUsers: false,
-      currentIconName: "EyeIcon"
-    };
-
-    this.ref = React.createRef();
-  }
-
-  onPlusClick = () =>
-    this.setState({ showActionPanel: !this.state.showActionPanel });
-
-  onCloseActionPanel = e => {
-    if (this.ref.current.contains(e.target)) return;
-    this.setState({ showActionPanel: !this.state.showActionPanel });
-  };
-
-  onKeyClick = () => console.log("onKeyClick");
-
-  onAddUsers = () => {
-    console.log("onAddUsers");
-    this.props.onClose();
-  };
-
-  onNotifyUsersChange = () =>
-    this.setState({ isNotifyUsers: !this.state.isNotifyUsers });
-
-  onArrowClick = () => this.props.onClose();
-
-  onClosePanels = () => {
-    this.props.onClose();
-    this.props.onSharingPanelClose();
-  };
-
-  onPeopleSelect = items => {
-    this.props.onClose();
-    toastr.success("onPeopleSelect", "Task in progress")
-    console.log("onPeopleSelect", items);
-  };
-
-  render() {
-    const { selection, visible, me, advancedOptions } = this.props;
-    const { currentIconName } = this.state;
-
-    const headerText = "Add users";
-
-    const zIndex = 310;
-    return (
-      <StyledAddUserPanel visible={visible}>
-        <Backdrop
-          onClick={this.onClosePanels}
-          visible={visible}
-          zIndex={zIndex}
-        />
-        <Aside className="add_users_panel-aside">
-          <Content>
-            <HeaderContent>
-              <IconButton
-                size="16"
-                iconName="ArrowPathIcon"
-                onClick={this.onArrowClick}
-              />
-              <Heading
-                className="add_users_panel-header"
-                size="medium"
-                truncate
-              >
-                {headerText}
-              </Heading>
-              <IconButton
-                size="16"
-                iconName="PlusIcon"
-                className="add_users_panel-plus-icon"
-                onClick={() => console.log("onPlusClick")}
-              />
-            </HeaderContent>
-
-            <Body>
-              <PeopleSelector
-                displayType="aside"
-                withoutAside
-                isOpen={visible}
-                isMultiSelect
-                comboBoxOptions={advancedOptions}
-                onSelect={this.onPeopleSelect}
-                defaultOption={me}
-
-                //onCancel={this.onCancelSelector}
-                //groupsCaption={groupsCaption}
-                //defaultOptionLabel={t("MeLabel")}
-              />
-            </Body>
-          </Content>
-        </Aside>
-      </StyledAddUserPanel>
-    );
-  }
-}
-
-export default AddUsersPanel;

products/ASC.Files/Client/src/components/panels/AddGroupPanel.js

@@ -0,0 +1,133 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Backdrop,
+  Heading,
+  Aside,
+  IconButton,
+  toastr
+} from "asc-web-components";
+import { GroupSelector } from "asc-web-common";
+import { getUsersOfGroups } from "../../store/files/actions";
+import {
+  StyledPanel,
+  StyledContent,
+  StyledHeaderContent,
+  StyledBody
+} from "./StyledPanels";
+
+class AddGroupPanel extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { showActionPanel: false };
+  }
+
+  onPlusClick = () =>
+    this.setState({ showActionPanel: !this.state.showActionPanel });
+
+  onKeyClick = () => console.log("onKeyClick");
+
+  onArrowClick = () => this.props.onClose();
+
+  onClosePanels = () => {
+    this.props.onClose();
+    this.props.onSharingPanelClose();
+  };
+
+  onSelectGroups = groups => {
+    const groupIds = [];
+    for (let item of groups) {
+      groupIds.push(item.key);
+    }
+
+    getUsersOfGroups(groupIds)
+      .then(res => {
+        this.props.onSetSelectedUsers(res);
+        this.props.onClose();
+      })
+      .catch(err => toastr.error(err));
+  };
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { showActionPanel } = this.state;
+    const { visible, accessRight } = this.props;
+
+    if (accessRight && accessRight.rights !== nextProps.accessRight.rights) {
+      return true;
+    }
+
+    if (showActionPanel !== nextState.showActionPanel) {
+      return true;
+    }
+
+    if (visible !== nextProps.visible) {
+      return true;
+    }
+
+    return false;
+  }
+
+  render() {
+    const { visible, embeddedComponent } = this.props;
+
+    const headerText = "Add group";
+    const zIndex = 310;
+
+    //console.log("AddGroupPanel render");
+    return (
+      <StyledPanel visible={visible}>
+        <Backdrop
+          onClick={this.onClosePanels}
+          visible={visible}
+          zIndex={zIndex}
+        />
+        <Aside className="header_aside-panel">
+          <StyledContent>
+            <StyledHeaderContent>
+              <IconButton
+                size="16"
+                iconName="ArrowPathIcon"
+                onClick={this.onArrowClick}
+              />
+              <Heading
+                className="header_aside-panel-header"
+                size="medium"
+                truncate
+              >
+                {headerText}
+              </Heading>
+              <IconButton
+                size="16"
+                iconName="PlusIcon"
+                className="header_aside-panel-plus-icon"
+                onClick={() => console.log("onPlusClick")}
+              />
+            </StyledHeaderContent>
+
+            <StyledBody>
+              <GroupSelector
+                isOpen={visible}
+                isMultiSelect
+                displayType="aside"
+                withoutAside
+                onSelect={this.onSelectGroups}
+                embeddedComponent={embeddedComponent}
+                //onCancel={onCloseGroupSelector}
+              />
+            </StyledBody>
+          </StyledContent>
+        </Aside>
+      </StyledPanel>
+    );
+  }
+}
+
+AddGroupPanel.propTypes = {
+  visible: PropTypes.bool,
+  onSharingPanelClose: PropTypes.func,
+  onClose: PropTypes.func,
+  onSetSelectedUsers: PropTypes.func
+};
+
+export default AddGroupPanel;

products/ASC.Files/Client/src/components/panels/AddUsersPanel.js

@@ -0,0 +1,127 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Backdrop,
+  Heading,
+  Aside,
+  IconButton
+} from "asc-web-components";
+import { PeopleSelector } from "asc-web-common";
+import {
+  StyledPanel,
+  StyledContent,
+  StyledHeaderContent,
+  StyledBody
+} from "./StyledPanels";
+
+class AddUsersPanel extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showActionPanel: false
+    };
+  }
+
+  onPlusClick = () =>
+    this.setState({ showActionPanel: !this.state.showActionPanel });
+
+  onKeyClick = () => console.log("onKeyClick");
+
+  onArrowClick = () => this.props.onClose();
+
+  onClosePanels = () => {
+    this.props.onClose();
+    this.props.onSharingPanelClose();
+  };
+
+  onPeopleSelect = users => {
+    this.props.onClose();
+    this.props.onSetSelectedUsers(users);
+  };
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { showActionPanel } = this.state;
+    const { visible, accessRight } = this.props;
+
+    if (accessRight && accessRight.rights !== nextProps.accessRight.rights) {
+      return true;
+    }
+
+    if (showActionPanel !== nextState.showActionPanel) {
+      return true;
+    }
+
+    if (visible !== nextProps.visible) {
+      return true;
+    }
+
+    return false;
+  }
+
+  render() {
+    const { visible, embeddedComponent } = this.props;
+
+    const headerText = "Add users";
+    const zIndex = 310;
+
+    //console.log("AddUsersPanel render");
+    return (
+      <StyledPanel visible={visible}>
+        <Backdrop
+          onClick={this.onClosePanels}
+          visible={visible}
+          zIndex={zIndex}
+        />
+        <Aside className="header_aside-panel">
+          <StyledContent>
+            <StyledHeaderContent>
+              <IconButton
+                size="16"
+                iconName="ArrowPathIcon"
+                onClick={this.onArrowClick}
+              />
+              <Heading
+                className="header_aside-panel-header"
+                size="medium"
+                truncate
+              >
+                {headerText}
+              </Heading>
+              <IconButton
+                size="16"
+                iconName="PlusIcon"
+                className="header_aside-panel-plus-icon"
+                onClick={() => console.log("onPlusClick")}
+              />
+            </StyledHeaderContent>
+
+            <StyledBody>
+              <PeopleSelector
+                displayType="aside"
+                withoutAside
+                isOpen={visible}
+                isMultiSelect
+                onSelect={this.onPeopleSelect}
+                embeddedComponent={embeddedComponent}
+
+                //onCancel={this.onCancelSelector}
+                //groupsCaption={groupsCaption}
+                //defaultOptionLabel={t("MeLabel")}
+              />
+            </StyledBody>
+          </StyledContent>
+        </Aside>
+      </StyledPanel>
+    );
+  }
+}
+
+AddUsersPanel.propTypes = {
+  visible: PropTypes.bool,
+  onSharingPanelClose: PropTypes.func,
+  onClose: PropTypes.func,
+  onSetSelectedUsers: PropTypes.func
+};
+
+export default AddUsersPanel;

products/ASC.Files/Client/src/components/panels/SharingPanel.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import {
   Backdrop,
   Heading,
@@ -7,78 +8,21 @@ import {
   Checkbox,
   Button,
   DropDown,
-  DropDownItem
+  DropDownItem,
+  ComboBox,
+  Row,
+  Text,
+  Icons,
+  utils
 } from "asc-web-components";
-import styled from "styled-components";
 
-const StyledSharingPanel = styled.div`
+import {
-  .sharing_panel-aside {
+  StyledPanel,
-    transform: translateX(${props => (props.visible ? "0" : "500px")});
+  StyledContent,
-    width: 500px;
+  StyledFooter,
-
+  StyledSharingHeaderContent,
-    @media (max-width: 550px) {
+  StyledSharingBody
-      width: ${props => (props.scale ? "100%" : "320px")};
+} from "./StyledPanels";
-      transform: translateX(${props => (props.visible ? "0" : "320px")});
-    }
-  }
-`;
-
-const Content = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  padding: 0 16px 16px;
-
-  .sharing_panel-header {
-    max-width: 500px;
-    margin: 0;
-    line-height: 56px;
-    font-weight: 700;
-  }
-`;
-
-const HeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #dee2e6;
-
-  .sharing_panel-icons-container {
-    display: flex;
-    margin-left: auto;
-
-    .sharing_panel-drop-down-wrapper {
-      position: relative;
-
-      .sharing_panel-drop-down {
-        padding: 8px 16px;
-      }
-      .sharing_panel-plus-icon {
-        margin-right: 12px;
-      }
-    }
-  }
-`;
-
-const Body = styled.div`
-  position: relative;
-  padding: 16px 0;
-`;
-
-const Footer = styled.div`
-  display: flex;
-  position: fixed;
-  bottom: 16px;
-  width: 94%;
-
-  .sharing_panel-button {
-    margin-left: auto;
-  }
-
-  @media (max-width: 550px) {
-    width: 90%;
-  }
-`;
 
 class SharingPanel extends React.Component {
   constructor(props) {
@@ -117,22 +61,77 @@ class SharingPanel extends React.Component {
     this.props.onShowGroupsPanel();
   };
 
+  shouldComponentUpdate(nextProps, nextState) {
+    const { showActionPanel, isNotifyUsers } = this.state;
+    const { visible, users, accessRight } = this.props;
+
+    if (accessRight && accessRight.rights !== nextProps.accessRight.rights) {
+      return true;
+    }
+
+    if (!utils.array.isArrayEqual(nextProps.users, users)) {
+      return true;
+    }
+
+    if (showActionPanel !== nextState.showActionPanel) {
+      return true;
+    }
+
+    if (isNotifyUsers !== nextState.isNotifyUsers) {
+      return true;
+    }
+
+    if (visible !== nextProps.visible) {
+      return true;
+    }
+
+    return false;
+  }
+
   render() {
     const checkboxNotifyUsersLabel = "Notify users";
     const addUserTranslationLabel = "Add user";
     const addGroupTranslationLabel = "Add group";
     const sharingHeaderText = "Sharing settings";
 
-    const { onClose, selection, visible } = this.props;
+    const {
+      onClose,
+      visible,
+      users,
+      advancedOptions,
+      accessRight,
+      onRemoveUserClick
+    } = this.props;
     const { showActionPanel, isNotifyUsers } = this.state;
+    //const element = select('element', ['', 'Avatar', 'Icon', 'ComboBox'], '');
 
     const zIndex = 310;
+
+    const embeddedComponent = (
+      <ComboBox
+        advancedOptions={advancedOptions}
+        options={[]}
+        selectedOption={{ key: 0 }}
+        size="content"
+        className="ad-selector_combo-box"
+        scaled={false}
+        directionX="left"
+        //isDisabled={isDisabled}
+      >
+        {React.createElement(Icons[accessRight.icon], {
+          size: "medium"
+          //color: this.state.currentIconColor,
+          //isfill: isFill
+        })}
+      </ComboBox>
+    );
+    //console.log("SharingPanel render");
     return (
-      <StyledSharingPanel visible={visible}>
+      <StyledPanel visible={visible}>
         <Backdrop onClick={onClose} visible={visible} zIndex={zIndex} />
-        <Aside className="sharing_panel-aside" visible={visible}>
+        <Aside className="header_aside-panel" visible={visible}>
-          <Content>
+          <StyledContent>
-            <HeaderContent>
+            <StyledSharingHeaderContent>
               <Heading className="sharing_panel-header" size="medium" truncate>
                 {sharingHeaderText}
               </Heading>
@@ -169,9 +168,25 @@ class SharingPanel extends React.Component {
                   onClick={this.onKeyClick}
                 />
               </div>
-            </HeaderContent>
+            </StyledSharingHeaderContent>
-            <Body>Sharing content</Body>
+            <StyledSharingBody>
-            <Footer>
+              {users.map((item, index) => (
+                <Row
+                  key={index}
+                  element={embeddedComponent}
+                  contextButtonSpacerWidth="0px"
+                >
+                  <Text truncate>
+                    {item.label ? item.label : item.displayName}
+                  </Text>
+                  <Icons.RemoveIcon
+                    onClick={onRemoveUserClick.bind(this, item)}
+                    className="sharing_panel-remove-icon"
+                  />
+                </Row>
+              ))}
+            </StyledSharingBody>
+            <StyledFooter>
               <Checkbox
                 isChecked={isNotifyUsers}
                 label={checkboxNotifyUsersLabel}
@@ -184,12 +199,21 @@ class SharingPanel extends React.Component {
                 primary
                 onClick={this.onSaveClick}
               />
-            </Footer>
+            </StyledFooter>
-          </Content>
+          </StyledContent>
         </Aside>
-      </StyledSharingPanel>
+      </StyledPanel>
     );
   }
 }
 
+SharingPanel.propTypes = {
+  onClose: PropTypes.func,
+  visible: PropTypes.bool,
+  onShowUsersPanel: PropTypes.func,
+  onShowGroupsPanel: PropTypes.func,
+  onRemoveUserClick: PropTypes.func,
+  users: PropTypes.array
+};
+
 export default SharingPanel;

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -0,0 +1,123 @@
+import styled from "styled-components";
+
+const StyledPanel = styled.div`
+  .header_aside-panel {
+    transform: translateX(${props => (props.visible ? "0" : "500px")});
+    width: 500px;
+
+    @media (max-width: 550px) {
+      width: 320px;
+      transform: translateX(${props => (props.visible ? "0" : "320px")});
+    }
+  }
+`;
+
+const StyledContent = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  padding: 0 16px 16px;
+
+  .header_aside-panel-header {
+    max-width: 500px;
+    margin: 0 0 0 16px;
+    line-height: 56px;
+    font-weight: 700;
+  }
+
+  .header_aside-panel-plus-icon {
+    margin-left: auto;
+  }
+`;
+
+const StyledHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledBody = styled.div`
+  .selector-wrapper {
+    position: fixed;
+    height: 94%;
+
+    .column-options {
+      padding: 0 0 16px 0;
+      width: 470px;
+
+      @media (max-width: 550px) {
+        width: 320px;
+        padding: 0 28px 16px 0;
+      }
+
+      .body-options {
+        padding-top: 16px;
+      }
+    }
+    .footer {
+      @media (max-width: 550px) {
+        padding: 16px 28px 16px 0;
+      }
+    }
+  }
+`;
+
+const StyledSharingHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #dee2e6;
+
+  .sharing_panel-icons-container {
+    display: flex;
+    margin-left: auto;
+
+    .sharing_panel-drop-down-wrapper {
+      position: relative;
+
+      .sharing_panel-drop-down {
+        padding: 8px 16px;
+      }
+      .sharing_panel-plus-icon {
+        margin-right: 12px;
+      }
+    }
+  }
+`;
+
+const StyledSharingBody = styled.div`
+  position: relative;
+  padding: 16px 0;
+
+  .sharing_panel-remove-icon {
+    margin-left: auto;
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+const StyledFooter = styled.div`
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  padding: 16px 0;
+  width: 94%;
+  background-color: #fff;
+
+  .sharing_panel-button {
+    margin-left: auto;
+  }
+
+  @media (max-width: 550px) {
+    width: 90%;
+  }
+`;
+
+export {
+  StyledPanel,
+  StyledContent,
+  StyledHeaderContent,
+  StyledBody,
+  StyledSharingHeaderContent,
+  StyledSharingBody,
+  StyledFooter
+};

products/ASC.Files/Client/src/components/panels/index.js

@@ -0,0 +1,5 @@
+import SharingPanel from "./SharingPanel";
+import AddUsersPanel from "./AddUsersPanel";
+import AddGroupsPanel from "./AddGroupPanel";
+
+export { SharingPanel, AddUsersPanel, AddGroupsPanel }

products/ASC.Files/Client/src/store/files/actions.js

@@ -14,7 +14,7 @@ import {
 import config from "../../../package.json";
 import { getTreeFolders } from "./selectors";
 
-const { files, FilesFilter } = api;
+const { files, groups, FilesFilter } = api;
 
 export const SET_FOLDER = "SET_FOLDER";
 export const SET_FOLDERS = "SET_FOLDERS";
@@ -306,6 +306,20 @@ export function deleteFolder(folderId, deleteAfter, immediately) {
   }
 }
 
+export function getUsersOfGroups(groupsIds) {
+  const requests = groupsIds.map(key => groups.getGroup(key));
+
+  return axios.all(requests).then(
+    axios.spread((...responses) => {
+      let users = [];
+      for(let item of responses) {
+        users = [...users, ...item.members];
+      }
+      return users;
+    })
+  );
+}
+
 /*export function deleteGroup(id) {
   return (dispatch, getState) => {
     const { people } = getState();

web/ASC.Web.Common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-common",
-  "version": "1.0.129",
+  "version": "1.0.130",
   "description": "Ascensio System SIA common components and solutions library",
   "license": "AGPL-3.0",
   "files": [

web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/Footer.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Button, ComboBox, Icons } from "asc-web-components";
+import { Button } from "asc-web-components";
 import StyledFooter from "./StyledFooter";
 
 const Footer = props => {
@@ -10,11 +10,12 @@ const Footer = props => {
     onClick,
     isVisible,
     className,
-    comboBoxOptions
+    embeddedComponent
   } = props;
 
+
   return (
-    <StyledFooter withComboBox={comboBoxOptions} isVisible={isVisible} className={className}>
+    <StyledFooter withEmbeddedComponent={embeddedComponent} isVisible={isVisible} className={className}>
       <Button
         className="add_members_btn"
         primary={true}
@@ -24,24 +25,7 @@ const Footer = props => {
         isDisabled={isDisabled}
         onClick={onClick}
       />
-      {comboBoxOptions && (
+      {embeddedComponent && embeddedComponent}
-        <ComboBox
-          advancedOptions={comboBoxOptions}
-          options={[]}
-          selectedOption={{ key: 0 }}
-          size="content"
-          className="ad-selector_combo-box"
-          scaled={false}
-          directionX="right"
-          //isDisabled={isDisabled}
-        >
-          {React.createElement(Icons["EyeIcon"], {
-            size: "medium"
-            //color: this.state.currentIconColor,
-            //isfill: isFill
-          })}
-        </ComboBox>
-      )}
     </StyledFooter>
   );
 };
@@ -52,7 +36,8 @@ Footer.propTypes = {
   isDisabled: PropTypes.bool,
   isVisible: PropTypes.bool,
   onClick: PropTypes.func,
-  comboBoxOptions: PropTypes.any
+  comboBoxOptions: PropTypes.any,
+  embeddedComponent: PropTypes.any
 };
 
 export default Footer;

web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/Selector.js

@@ -68,7 +68,7 @@ const Selector = props => {
     onGroupChanged,
     size,
     allowGroupSelection,
-    comboBoxOptions
+    embeddedComponent
   } = props;
 
   //console.log("options", options);
@@ -699,7 +699,7 @@ const Selector = props => {
         isDisabled={isDisabled}
         isVisible={isMultiSelect && hasSelected()}
         onClick={onAddClick}
-        comboBoxOptions={comboBoxOptions}
+        embeddedComponent={embeddedComponent}
       />
     </StyledSelector>
   );
@@ -736,7 +736,7 @@ Selector.propTypes = {
   onGroupChanged: PropTypes.func,
   getOptionTooltipContent: PropTypes.func,
 
-  comboBoxOptions: PropTypes.any
+  embeddedComponent: PropTypes.any
 };
 
 Selector.defaultProps = {

web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/StyledFooter.js

@@ -7,7 +7,7 @@ const StyledFooter = styled.div`
   height: 69px;
 
   ${props =>
-    props.withComboBox &&
+    props.withEmbeddedComponent &&
     css`
       display: flex;
       padding: 16px 0;

web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js

@@ -95,7 +95,7 @@ class GroupSelector extends React.Component {
       searchPlaceHolderLabel,
       displayType,
       withoutAside,
-      comboBoxOptions
+      embeddedComponent
     } = this.props;
 
     return (
@@ -123,7 +123,7 @@ class GroupSelector extends React.Component {
         onSearchChanged={this.onSearchChanged}
         onCancel={onCancel}
         withoutAside={withoutAside}
-        comboBoxOptions={comboBoxOptions}
+        embeddedComponent={embeddedComponent}
       />
     );
   }
@@ -144,7 +144,7 @@ GroupSelector.propTypes = {
   useFake: PropTypes.bool,
   displayType: PropTypes.oneOf(["auto", "aside", "dropdown"]),
   withoutAside: PropTypes.bool,
-  comboBoxOptions: PropTypes.any
+  embeddedComponent: PropTypes.any
 };
 
 GroupSelector.defaultProps = {

web/ASC.Web.Common/src/components/PeopleSelector/PeopleSelector.js

@@ -205,7 +205,7 @@ class PeopleSelector extends React.Component {
       groupsCaption,
       displayType,
       withoutAside,
-      comboBoxOptions
+      embeddedComponent
     } = this.props;
 
     return (
@@ -238,7 +238,7 @@ class PeopleSelector extends React.Component {
         getOptionTooltipContent={this.getOptionTooltipContent}
         onCancel={onCancel}
         withoutAside={withoutAside}
-        comboBoxOptions={comboBoxOptions}
+        embeddedComponent={embeddedComponent}
       />
     );
   }
@@ -264,7 +264,7 @@ PeopleSelector.propTypes = {
   role: PropTypes.oneOf(["admin", "user", "guest"]),
   displayType: PropTypes.oneOf(["auto", "aside", "dropdown"]),
   withoutAside: PropTypes.bool,
-  comboBoxOptions: PropTypes.any
+  embeddedComponent: PropTypes.any
 };
 
 PeopleSelector.defaultProps = {