From f50421c3f69a0fddc7df2b0de8c112aab8923638 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Tue, 18 Apr 2023 17:23:46 +0300
Subject: [PATCH] Web: Files: fixed invite-panel row

---
 .../panels/InvitePanel/StyledInvitePanel.js   |  5 +++
 .../components/panels/InvitePanel/index.js    |  6 +++-
 .../sub-components/AccessSelector.js          | 19 ++++++-----
 .../InvitePanel/sub-components/InviteInput.js |  2 +-
 .../panels/InvitePanel/sub-components/Item.js | 24 ++++++-------
 .../InvitePanel/sub-components/ItemsList.js   |  4 +++
 .../Home/InfoPanel/Body/styles/members.js     |  4 ---
 .../Home/InfoPanel/Body/views/Members/User.js | 34 ++++++++++---------
 .../InfoPanel/Body/views/Members/index.js     | 12 ++-----
 yarn.lock                                     | 14 ++++----
 10 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
index 43c3d20e44..1b2e6e8743 100644
--- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
+++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
@@ -91,6 +91,11 @@ const StyledRow = styled.div`
     font-size: 14px;
     line-height: 16px;
   }
+
+  .invite-panel_access-selector {
+    margin-left: auto;
+    margin-right: 0;
+  }
 `;
 
 const StyledInviteInput = styled.div`
diff --git a/packages/client/src/components/panels/InvitePanel/index.js b/packages/client/src/components/panels/InvitePanel/index.js
index be060c7cf3..a708283be0 100644
--- a/packages/client/src/components/panels/InvitePanel/index.js
+++ b/packages/client/src/components/panels/InvitePanel/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { observer, inject } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import { isMobileOnly } from "react-device-detect";
@@ -52,6 +52,8 @@ const InvitePanel = ({
   const [isLoading, setIsLoading] = useState(false);
   const [externalLinksVisible, setExternalLinksVisible] = useState(false);
 
+  const inputsRef = useRef();
+
   const onChangeExternalLinksVisible = (visible) => {
     setExternalLinksVisible(visible);
   };
@@ -236,6 +238,7 @@ const InvitePanel = ({
           onClose={onClose}
           roomUsers={roomUsers}
           roomType={roomType}
+          inputsRef={inputsRef}
         />
 
         {!!inviteItems.length && (
@@ -245,6 +248,7 @@ const InvitePanel = ({
               setHasErrors={setHasErrors}
               roomType={roomType}
               externalLinksVisible={externalLinksVisible}
+              inputsRef={inputsRef}
             />
 
             <StyledButtons>
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js b/packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js
index 7885ba5c78..cec1794233 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js
@@ -12,14 +12,18 @@ const AccessSelector = ({
   containerRef,
   defaultAccess,
   isOwner,
-  onAccessSelectorClick,
+  withRemove = false,
 }) => {
   const [horizontalOrientation, setHorizontalOrientation] = useState(false);
-  const width = onAccessSelectorClick
-    ? containerRef?.current?.offsetWidth
-    : containerRef?.current?.offsetWidth - 32;
+  const width = containerRef?.current?.offsetWidth - 32;
 
-  const accessOptions = getAccessOptions(t, roomType, false, true, isOwner);
+  const accessOptions = getAccessOptions(
+    t,
+    roomType,
+    withRemove,
+    true,
+    isOwner
+  );
 
   const selectedOption = accessOptions.filter(
     (access) => access.access === +defaultAccess
@@ -48,10 +52,7 @@ const AccessSelector = ({
     : {};
 
   return (
-    <StyledAccessSelector
-      className="access-right-select-wrapper"
-      onClick={onAccessSelectorClick}
-    >
+    <StyledAccessSelector className="invite-panel_access-selector">
       <AccessRightSelect
         selectedOption={selectedOption}
         onSelect={onSelectAccess}
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js b/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js
index 0b6e4d48f9..0ee1b6f500 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js
@@ -36,6 +36,7 @@ const InviteInput = ({
   roomUsers,
   t,
   isOwner,
+  inputsRef,
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [usersList, setUsersList] = useState([]);
@@ -44,7 +45,6 @@ const InviteInput = ({
 
   const [selectedAccess, setSelectedAccess] = useState(defaultAccess);
 
-  const inputsRef = useRef();
   const searchRef = useRef();
 
   const inRoom = (id) => {
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js
index ce86d44611..6beb14e81b 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js
@@ -16,6 +16,7 @@ import {
   StyledHelpButton,
   StyledDeleteIcon,
 } from "../StyledInvitePanel";
+import AccessSelector from "./AccessSelector";
 import { filterUserRoleOptions } from "SRC_DIR/helpers/utils";
 
 const Item = ({
@@ -27,6 +28,7 @@ const Item = ({
   setHasErrors,
   roomType,
   isOwner,
+  inputsRef,
 }) => {
   const { avatar, displayName, email, id, errors, access } = item;
 
@@ -130,20 +132,14 @@ const Item = ({
           <StyledDeleteIcon size="medium" onClick={removeItem} />
         </>
       ) : (
-        <StyledComboBox
-          onSelect={selectItemAccess}
-          noBorder
-          options={filteredAccesses}
-          size="content"
-          scaled={false}
-          manualWidth="fit-content"
-          selectedOption={defaultAccess}
-          showDisabledItems
-          modernView
-          directionX="right"
-          directionY="bottom"
-          isDefaultMode={false}
-          fixedDirection={true}
+        <AccessSelector
+          t={t}
+          roomType={roomType}
+          defaultAccess={defaultAccess.access}
+          onSelectAccess={selectItemAccess}
+          containerRef={inputsRef}
+          isOwner={isOwner}
+          withRemove={true}
         />
       )}
     </>
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js
index d503563812..6d53591c1f 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js
@@ -18,6 +18,7 @@ const Row = memo(({ data, index, style }) => {
     setHasErrors,
     roomType,
     isOwner,
+    inputsRef,
   } = data;
 
   if (inviteItems === undefined) return;
@@ -35,6 +36,7 @@ const Row = memo(({ data, index, style }) => {
         setHasErrors={setHasErrors}
         roomType={roomType}
         isOwner={isOwner}
+        inputsRef={inputsRef}
       />
     </StyledRow>
   );
@@ -49,6 +51,7 @@ const ItemsList = ({
   roomType,
   isOwner,
   externalLinksVisible,
+  inputsRef,
 }) => {
   const [bodyHeight, setBodyHeight] = useState(0);
   const [offsetTop, setOffsetTop] = useState(0);
@@ -87,6 +90,7 @@ const ItemsList = ({
           setHasErrors,
           roomType,
           isOwner,
+          inputsRef,
           t,
         }}
         outerElementType={CustomScrollbarsVirtualList}
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/styles/members.js b/packages/client/src/pages/Home/InfoPanel/Body/styles/members.js
index 834f148257..03af8b11dd 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/members.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/members.js
@@ -98,10 +98,6 @@ const StyledUser = styled.div`
       }
     }
   }
-
-  .access-right-select-wrapper {
-    margin: 0;
-  }
 `;
 
 StyledUserTypeHeader.defaultProps = { theme: Base };
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
index f672fb6f15..8974301d8e 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
@@ -2,12 +2,13 @@ import React, { useState } from "react";
 import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
 import { StyledUser } from "../../styles/members";
 import Avatar from "@docspace/components/avatar";
+import { ComboBox } from "@docspace/components";
 import DefaultUserPhotoUrl from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
 import toastr from "@docspace/components/toast/toastr";
+import { isMobileOnly } from "react-device-detect";
 import { decode } from "he";
 import { filterUserRoleOptions } from "SRC_DIR/helpers/utils";
 import { getUserRole } from "@docspace/common/utils";
-import AccessSelector from "../../../../../../components/panels/InvitePanel/sub-components/AccessSelector.js";
 
 const User = ({
   t,
@@ -21,7 +22,6 @@ const User = ({
   changeUserType,
   isScrollLocked,
   setIsScrollLocked,
-  getMembersContainerRef,
 }) => {
   if (!selectionParentRoom) return null;
   if (!user.displayName && !user.email) return null;
@@ -30,8 +30,6 @@ const User = ({
   const [isLoading, setIsLoading] = useState(false);
   //if (userIsRemoved) return null;
 
-  const [containerRef, setContainerRef] = useState(null);
-
   const canChangeUserRole = user.canEditAccess;
 
   const fullRoomRoleOptions = membersHelper.getOptionsByRoomType(
@@ -119,11 +117,6 @@ const User = ({
     setIsScrollLocked(!isScrollLocked);
   };
 
-  const onAccessSelectorClick = () => {
-    const containerRef = getMembersContainerRef();
-    setContainerRef(containerRef);
-  };
-
   const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoUrl;
 
   const role = getUserRole(user);
@@ -157,13 +150,22 @@ const User = ({
       {userRole && userRoleOptions && (
         <div className="role-wrapper">
           {canChangeUserRole ? (
-            <AccessSelector
-              t={t}
-              roomType={selectionParentRoom.roomType}
-              defaultAccess={user.access}
-              onSelectAccess={onOptionClick}
-              containerRef={containerRef}
-              onAccessSelectorClick={onAccessSelectorClick}
+            <ComboBox
+              className="role-combobox"
+              selectedOption={userRole}
+              options={userRoleOptions}
+              onSelect={onOptionClick}
+              scaled={false}
+              withBackdrop={isMobileOnly}
+              size="content"
+              modernView
+              title={t("Common:Role")}
+              manualWidth={"fit-content"}
+              isLoading={isLoading}
+              isMobileView={isMobileOnly}
+              directionY="both"
+              toggleAction={onToggle}
+              displaySelectedOption
             />
           ) : (
             <div className="disabled-role-combobox" title={t("Common:Role")}>
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
index e211889016..b3990bd78d 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import toastr from "@docspace/components/toast/toastr";
@@ -46,8 +46,6 @@ const Members = ({
   const [members, setMembers] = useState(null);
   const [showLoader, setShowLoader] = useState(false);
 
-  const membersContainerRef = useRef();
-
   const security = selectionParentRoom ? selectionParentRoom.security : {};
 
   const canInviteUserInRoomAbility = security?.EditAccess;
@@ -169,10 +167,8 @@ const Members = ({
     (member) => member.id === selfId
   );
 
-  const getMembersContainerRef = () => membersContainerRef;
-
   return (
-    <div ref={membersContainerRef}>
+    <>
       <StyledUserTypeHeader>
         <Text className="title">
           {t("UsersInRoom")} : {members.inRoom.length}
@@ -207,7 +203,6 @@ const Members = ({
             changeUserType={changeUserType}
             isScrollLocked={isScrollLocked}
             setIsScrollLocked={setIsScrollLocked}
-            getMembersContainerRef={getMembersContainerRef}
           />
         ))}
       </StyledUserList>
@@ -246,11 +241,10 @@ const Members = ({
             changeUserType={changeUserType}
             isScrollLocked={isScrollLocked}
             setIsScrollLocked={setIsScrollLocked}
-            getMembersContainerRef={getMembersContainerRef}
           />
         ))}
       </StyledUserList>
-    </div>
+    </>
   );
 };
 
diff --git a/yarn.lock b/yarn.lock
index fdfdfbe9d7..7ffb759504 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13306,7 +13306,7 @@ __metadata:
 
 "fsevents@patch:fsevents@^1.2.7#~builtin<compat/fsevents>":
   version: 1.2.13
-  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=d11327"
+  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7"
   dependencies:
     bindings: ^1.5.0
     nan: ^2.12.1
@@ -13316,7 +13316,7 @@ __metadata:
 
 "fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
   dependencies:
     node-gyp: latest
   conditions: os=darwin
@@ -21749,14 +21749,14 @@ __metadata:
 
 "resolve@patch:resolve@1.1.7#~builtin<compat/resolve>":
   version: 1.1.7
-  resolution: "resolve@patch:resolve@npm%3A1.1.7#~builtin<compat/resolve>::version=1.1.7&hash=3bafbf"
+  resolution: "resolve@patch:resolve@npm%3A1.1.7#~builtin<compat/resolve>::version=1.1.7&hash=07638b"
   checksum: e9dbca78600ae56835c43a09f1276876c883e4b4bbd43e2683fa140671519d2bdebeb1c1576ca87c8c508ae2987b3ec481645ac5d3054b0f23254cfc1ce49942
   languageName: node
   linkType: hard
 
 "resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.8.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
   version: 1.22.2
-  resolution: "resolve@patch:resolve@npm%3A1.22.2#~builtin<compat/resolve>::version=1.22.2&hash=c3c19d"
+  resolution: "resolve@patch:resolve@npm%3A1.22.2#~builtin<compat/resolve>::version=1.22.2&hash=07638b"
   dependencies:
     is-core-module: ^2.11.0
     path-parse: ^1.0.7
@@ -21769,7 +21769,7 @@ __metadata:
 
 "resolve@patch:resolve@^2.0.0-next.4#~builtin<compat/resolve>":
   version: 2.0.0-next.4
-  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=c3c19d"
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=07638b"
   dependencies:
     is-core-module: ^2.9.0
     path-parse: ^1.0.7
@@ -24201,11 +24201,11 @@ __metadata:
 
 "typescript@patch:typescript@^4.9.5#~builtin<compat/typescript>":
   version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=ad5954"
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=701156"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 8f6260acc86b56bfdda6004bc53f32ea548f543e8baef7071c8e34d29d292f3e375c8416556c8de10b24deef6933cd1c16a8233dc84a3dd43a13a13265d0faab
+  checksum: 2eee5c37cad4390385db5db5a8e81470e42e8f1401b0358d7390095d6f681b410f2c4a0c496c6ff9ebd775423c7785cdace7bcdad76c7bee283df3d9718c0f20
   languageName: node
   linkType: hard