Web: Client: AccessSelector: Added default access for new items, fixed styles

packages/client/src/components/panels/AddUsersPanel/index.js

@@ -13,6 +13,7 @@ import withLoader from "../../../HOCs/withLoader";
 
 const AddUsersPanel = ({
   isEncrypted,
+  defaultAccess,
   onClose,
   onParentPanelClose,
   shareDataItems,
@@ -25,7 +26,9 @@ const AddUsersPanel = ({
   isMultiSelect,
   theme,
 }) => {
-  const accessRight = isEncrypted
+  const accessRight = defaultAccess
+    ? defaultAccess
+    : isEncrypted
     ? ShareAccessRights.FullAccess
     : ShareAccessRights.ReadOnly;
 

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -72,6 +72,10 @@ const StyledRow = styled.div`
 
 const StyledInviteInput = styled(TextInput)`
   margin-left: 16px;
+  margin-right: ${(props) => (props.hideSelector ? "16px" : "8px")};
+`;
+
+const StyledAccessSelector = styled.div`
   margin-right: 16px;
 `;
 
@@ -94,7 +98,7 @@ const StyledComboBox = styled(ComboBox)`
   }
 `;
 
-const StyledInviteInputContainer = styled(Box)`
+const StyledInviteInputContainer = styled.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -206,4 +210,5 @@ export {
   StyledButtons,
   StyledLink,
   ScrollList,
+  StyledAccessSelector,
 };

packages/client/src/components/panels/InvitePanel/index.js

@@ -20,30 +20,29 @@ import ItemsList from "./sub-components/ItemsList";
 import InviteInput from "./sub-components/InviteInput";
 
 const InvitePanel = ({
-  invitePanelOptions,
-  setInvitePanelOptions,
-  visible,
-  t,
-  getFolderInfo,
   folders,
-  setInviteItems,
+  getFolderInfo,
   inviteItems,
+  roomId,
+  setInviteItems,
+  setInvitePanelOptions,
+  t,
+  visible,
 }) => {
   const [selectedRoom, setSelectedRoom] = useState(null);
   const [hasErrors, setHasErrors] = useState(false);
 
   useEffect(() => {
-    const { id } = invitePanelOptions;
-    const room = folders.find((folder) => folder.id === id);
+    const room = folders.find((folder) => folder.id === roomId);
 
     if (room) {
       setSelectedRoom(room);
     } else {
-      getFolderInfo(id).then((info) => {
+      getFolderInfo(roomId).then((info) => {
         setSelectedRoom(info);
       });
     }
-  }, [invitePanelOptions]);
+  }, [roomId]);
 
   const onClose = () => {
     setInvitePanelOptions({ visible: false });
@@ -135,9 +134,9 @@ export default inject(({ auth, peopleStore, filesStore, dialogsStore }) => {
   const { getFolderInfo, folders, getShareUsers } = filesStore;
 
   return {
-    invitePanelOptions,
     setInvitePanelOptions,
     visible: invitePanelOptions.visible,
+    roomId: invitePanelOptions.roomId,
     theme,
     getUsersByQuery,
     getFolderInfo,
@@ -147,7 +146,7 @@ export default inject(({ auth, peopleStore, filesStore, dialogsStore }) => {
     inviteItems,
   };
 })(
-  withTranslation(["InviteDialog", "SharingPanel", "Common"])(
+  withTranslation(["InviteDialog", "SharingPanel", "Translations", "Common"])(
     observer(InvitePanel)
   )
 );

packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js

@@ -2,13 +2,22 @@ import React from "react";
 import AccessRightSelect from "@docspace/components/access-right-select";
 import { getAccessOptions } from "../utils";
 
-const AccessSelector = ({ t, roomType }) => {
-  const accessOptions = getAccessOptions(t, roomType);
+import { StyledAccessSelector } from "../StyledInvitePanel";
+
+const AccessSelector = ({ t, roomType, onSelectAccess, containerRef }) => {
+  const width = containerRef?.current?.offsetWidth - 32;
+  const accessOptions = getAccessOptions(t, roomType, false, true);
   return (
-    <AccessRightSelect
-      selectedOption={accessOptions[0]}
-      options={accessOptions}
-    />
+    <StyledAccessSelector>
+      <AccessRightSelect
+        selectedOption={accessOptions[0]}
+        onSelect={onSelectAccess}
+        accessOptions={accessOptions}
+        noBorder={false}
+        directionX="right"
+        manualWidth={width + "px"}
+      />
+    </StyledAccessSelector>
   );
 };
 

packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useRef } from "react";
 import debounce from "lodash.debounce";
 import { inject, observer } from "mobx-react";
 
@@ -23,25 +23,29 @@ import {
 } from "../StyledInvitePanel";
 
 const InviteInput = ({
-  invitePanelOptions,
+  defaultAccess,
   getShareUsers,
-  setInviteItems,
-  inviteItems,
   getUsersByQuery,
-  t,
+  hideSelector,
+  inviteItems,
   onClose,
+  roomId,
+  setInviteItems,
+  t,
+  ...props
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [usersList, setUsersList] = useState([]);
   const [panelVisible, setPanelVisible] = useState(false);
   const [roomUsers, setRoomUsers] = useState([]);
   const [showUsersPanel, setShowUsersPanel] = useState(false);
+  const [selectedAccess, setSelectedAccess] = useState(defaultAccess);
+
+  const inputsRef = useRef();
 
   useEffect(() => {
-    const { id } = invitePanelOptions;
-
-    getShareUsers([id]).then((users) => setRoomUsers(users));
-  }, [invitePanelOptions]);
+    getShareUsers([roomId]).then((users) => setRoomUsers(users));
+  }, [roomId]);
 
   const inRoom = (id) => {
     return roomUsers.some((user) => user.sharedTo.id === id);
@@ -90,7 +94,7 @@ const InviteInput = ({
 
     const invited = inRoom(id);
 
-    item.access = ShareAccessRights.ReadOnly; //TODO: get from main selector;
+    item.access = selectedAccess;
 
     const addUser = () => {
       setInviteItems([...inviteItems, item]);
@@ -162,6 +166,10 @@ const InviteInput = ({
 
   const accessOptions = getAccessOptions(t, 5);
 
+  const onSelectAccess = (item) => {
+    setSelectedAccess(item.access);
+  };
+
   return (
     <>
       <StyledSubHeader>
@@ -176,13 +184,21 @@ const InviteInput = ({
         </StyledLink>
       </StyledSubHeader>
 
-      <StyledInviteInputContainer>
+      <StyledInviteInputContainer ref={inputsRef}>
         <StyledInviteInput
           onChange={onChange}
           placeholder={t("SearchPlaceholder")}
           value={inputValue}
+          {...props}
         />
-        <AccessSelector t={t} roomType={5} />
+        {!hideSelector && (
+          <AccessSelector
+            t={t}
+            roomType={5}
+            onSelectAccess={onSelectAccess}
+            containerRef={inputsRef}
+          />
+        )}
         <StyledDropDown
           isDefaultMode={false}
           open={panelVisible}
@@ -211,6 +227,7 @@ const InviteInput = ({
             accessOptions={accessOptions}
             isMultiSelect
             isEncrypted={true}
+            defaultAccess={selectedAccess}
           />
         )}
       </StyledInviteInputContainer>
@@ -229,6 +246,8 @@ export default inject(({ auth, peopleStore, filesStore, dialogsStore }) => {
     setInviteItems,
     inviteItems,
     getUsersByQuery,
-    invitePanelOptions,
+    roomId: invitePanelOptions.id,
+    hideSelector: invitePanelOptions.hideSelector,
+    defaultAccess: invitePanelOptions.defaultAccess,
   };
 })(observer(InviteInput));

packages/client/src/components/panels/InvitePanel/utils/index.js

@@ -10,36 +10,40 @@ export const getAccessOptions = (
   const accesses = {
     roomManager: {
       key: "roomManager",
-      label: "Room manager",
-      title: "Room manager",
-      description: "Room manager",
-      quota: "Paid",
+      label: t("Translations:RoleRoomManager"),
+      description: t("Translations:RoleRoomManagerDescription"),
+      quota: t("Common:Paid"),
       color: "#EDC409",
       access: ShareAccessRights.FullAccess,
     },
     editor: {
       key: "editor",
-      label: "Editor",
+      label: t("Translations:RoleEditor"),
+      description: t("Translations:RoleEditorDescription"),
       access: ShareAccessRights.CustomFilter,
     },
     formFiller: {
       key: "formFiller",
-      label: "Form filler",
+      label: t("Translations:RoleFormFiller"),
+      description: t("Translations:RoleFormFillerDescription"),
       access: ShareAccessRights.FormFilling,
     },
     reviewer: {
       key: "reviewer",
-      label: "Reviewer",
+      label: t("Translations:RoleReviewer"),
+      description: t("Translations:RoleReviewerDescription"),
       access: ShareAccessRights.Review,
     },
     commentator: {
       key: "commentator",
-      label: "Commentator",
+      label: t("Translations:RoleCommentator"),
+      description: t("Translations:RoleCommentatorDescription"),
       access: ShareAccessRights.Comment,
     },
     viewer: {
       key: "viewer",
-      label: "Viewer",
+      label: t("Translations:RoleViewer"),
+      description: t("Translations:RoleViewerDescription"),
       access: ShareAccessRights.ReadOnly,
     },
   };
@@ -97,7 +101,7 @@ export const getAccessOptions = (
     },
     {
       key: "remove",
-      label: "Remove",
+      label: t("Translations:Remove"),
     },
   ];