Merge branch 'release/rc-v1.2.0' of github.com:ONLYOFFICE/DocSpace into release/rc-v1.2.0

packages/client/src/HOCs/withPeopleContent.js

@@ -11,19 +11,26 @@ export default function withContent(WrappedContent) {
     const {
       item,
       selectGroup,
-      fetchProfile,
-      history,
       checked,
       selectUser,
       deselectUser,
+      setBufferSelection,
 
       theme,
       getModel,
     } = props;
-    const { userName, mobilePhone, email, role, displayName, avatar } = item;
 
-    const onContentRowSelect = (checked, user) =>
+    const { mobilePhone, email, role, displayName, avatar } = item;
+
+    const onContentRowSelect = (checked, user) => {
       checked ? selectUser(user) : deselectUser(user);
+    };
+
+    const onContentRowClick = (checked, user, addToSelection = true) => {
+      checked
+        ? setBufferSelection(user, addToSelection)
+        : setBufferSelection(null);
+    };
 
     const checkedProps = { checked };
 
@@ -88,35 +95,6 @@ export default function withContent(WrappedContent) {
 
     const groups = getFormattedGroups();
 
-    /*const redirectToProfile = () => {
-      history.push(
-        combineUrl(
-          window.DocSpaceConfig?.proxy?.url,
-          config.homepage,
-          `/accounts/view/${userName}`
-        )
-      );
-    };*/
-
-    /*const onUserNameClick = useCallback(
-      (e) => {
-        const timer = setTimeout(() => redirectToProfile(), 500);
-        e.preventDefault();
-        fetchProfile(userName).finally(() => {
-          clearTimeout(timer);
-          if (
-            combineUrl(
-              window.DocSpaceConfig?.proxy?.url,
-              config.homepage,
-              `/accounts/view/${userName}`
-            ) !== window.location.pathname
-          )
-            redirectToProfile();
-        });
-      },
-      [history, userName]
-    );*/
-
     const onPhoneClick = () => window.open(`sms:${mobilePhone}`);
     const onEmailClick = () => window.open(`mailto:${email}`);
 
@@ -137,9 +115,9 @@ export default function withContent(WrappedContent) {
     return (
       <WrappedContent
         onContentRowSelect={onContentRowSelect}
+        onContentRowClick={onContentRowClick}
         onPhoneClick={onPhoneClick}
         onEmailClick={onEmailClick}
-        //onUserNameClick={onUserNameClick}
         groups={groups}
         checkedProps={checkedProps}
         element={element}

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

@@ -73,7 +73,7 @@ const InvitePanel = ({
             title,
             shareLink,
             expirationDate,
-            access: defaultAccess,
+            access: user.access || defaultAccess,
           });
         }
       });
@@ -204,7 +204,12 @@ const InvitePanel = ({
           </StyledHeading>
         </StyledBlock>
 
-        <ExternalLinks t={t} shareLinks={shareLinks} roomType={roomType} />
+        <ExternalLinks
+          t={t}
+          shareLinks={shareLinks}
+          getInfo={getInfo}
+          roomType={roomType}
+        />
 
         <InviteInput
           t={t}

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

@@ -1,6 +1,6 @@
 import MediaDownloadReactSvgUrl from "PUBLIC_DIR/images/media.download.react.svg?url";
 import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
-import React, { useState, useEffect, useRef, memo, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import copy from "copy-to-clipboard";
 
@@ -30,6 +30,7 @@ const ExternalLinks = ({
   shareLinks,
   setInvitationLinks,
   isOwner,
+  getInfo,
 }) => {
   const [linksVisible, setLinksVisible] = useState(false);
   const [actionLinksVisible, setActionLinksVisible] = useState(false);
@@ -37,18 +38,22 @@ const ExternalLinks = ({
 
   const inputsRef = useRef();
 
+  useEffect(() => {
+    if (shareLinks[0]?.expirationDate) toggleLinks();
+  }, [shareLinks]);
+
   const toggleLinks = (e) => {
     let link = null;
+    if (!shareLinks.length) return;
+
     if (roomId === -1) {
       link = shareLinks.find((l) => l.access === +defaultAccess);
 
       setActiveLink(link);
     } else {
-      setInvitationLinks(roomId, shareLinks[0].id, "Invite", +defaultAccess);
-
       link = shareLinks[0];
 
-      setActiveLink(shareLinks[0]);
+      !linksVisible ? editLink() : disableLink();
     }
 
     setLinksVisible(!linksVisible);
@@ -56,6 +61,23 @@ const ExternalLinks = ({
     if (!linksVisible) copyLink(link?.shareLink);
   };
 
+  const disableLink = () => {
+    setInvitationLinks(roomId, shareLinks[0].id, "Invite", 0);
+    setTimeout(() => getInfo(), 100);
+  };
+
+  const editLink = () => {
+    if (!shareLinks[0].expirationDate) {
+      setInvitationLinks(
+        roomId,
+        shareLinks[0].id,
+        "Invite",
+        shareLinks[0].access
+      );
+    }
+    setActiveLink(shareLinks[0]);
+  };
+
   const onSelectAccess = (access) => {
     let link = null;
     if (roomId === -1) {
@@ -84,6 +106,8 @@ const ExternalLinks = ({
     }
   };
 
+  const onCopyLink = () => copyLink(activeLink.shareLink);
+
   const toggleActionLinks = () => {
     setActionLinksVisible(!actionLinksVisible);
   };
@@ -151,11 +175,11 @@ const ExternalLinks = ({
             >
               <DropDownItem
                 label={`${t("SharingPanel:ShareVia")} e-mail`}
-                onClick={() => shareEmail(links[0])}
+                onClick={() => shareEmail(activeLink[0])}
               />
               <DropDownItem
                 label={`${t("SharingPanel:ShareVia")} Twitter`}
-                onClick={() => shareTwitter(links[0])}
+                onClick={() => shareTwitter(activeLink[0])}
               />
             </DropDown>
           </div>
@@ -171,7 +195,7 @@ const ExternalLinks = ({
               value={activeLink.shareLink}
               isReadOnly
               iconName={CopyReactSvgUrl}
-              onIconClick={() => copyLink(activeLink.shareLink)}
+              onIconClick={onCopyLink}
               hoverColor="#333333"
               iconColor="#A3A9AE"
             />

packages/client/src/pages/AccountsHome/Section/Body/RowView/SimpleUserRow.js

@@ -99,20 +99,22 @@ const SimpleUserRow = (props) => {
     contextOptionsProps,
     checkedProps,
     onContentRowSelect,
+    onContentRowClick,
     element,
-    setBufferSelection,
+    //setBufferSelection,
     isActive,
-    isSeveralSelection,
+    //isSeveralSelection,
   } = props;
 
   const isChecked = checkedProps.checked;
 
-  const userContextClick = React.useCallback(() => {
+  const onRowClick = React.useCallback(() => {
-    if (isSeveralSelection && isChecked) {
+    onContentRowClick && onContentRowClick(!isChecked, item);
-      return;
+  }, [isChecked, item, onContentRowClick]);
-    }
+
-    setBufferSelection(item);
+  const onRowContextClick = React.useCallback(() => {
-  }, [isChecked, isSeveralSelection, item, setBufferSelection]);
+    onContentRowClick && onContentRowClick(!isChecked, item, false);
+  }, [isChecked, item, onContentRowClick]);
 
   return (
     <StyledWrapper
@@ -130,7 +132,8 @@ const SimpleUserRow = (props) => {
           sectionWidth={sectionWidth}
           mode={"modern"}
           className={"user-row"}
-          rowContextClick={userContextClick}
+          onRowClick={onRowClick}
+          rowContextClick={onRowContextClick}
         >
           <UserContent {...props} />
         </StyledSimpleUserRow>

packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js

@@ -119,6 +119,7 @@ const PeopleTableRow = (props) => {
     element,
     checkedProps,
     onContentRowSelect,
+    onContentRowClick,
     onEmailClick,
 
     isOwner,
@@ -201,22 +202,22 @@ const PeopleTableRow = (props) => {
     [item, changeUserType]
   );
 
-  const getRoomsOptions = React.useCallback(() => {
+  // const getRoomsOptions = React.useCallback(() => {
-    const options = [];
+  //   const options = [];
 
-    fakeRooms.forEach((room) => {
+  //   fakeRooms.forEach((room) => {
-      options.push(
+  //     options.push(
-        <DropDownItem key={room.name} noHover={true}>
+  //       <DropDownItem key={room.name} noHover={true}>
-          {room.name} &nbsp;
+  //         {room.name} &nbsp;
-          <Text fontSize="13px" fontWeight={600} color={sideInfoColor} truncate>
+  //         <Text fontSize="13px" fontWeight={600} color={sideInfoColor} truncate>
-            ({room.role})
+  //           ({room.role})
-          </Text>
+  //         </Text>
-        </DropDownItem>
+  //       </DropDownItem>
-      );
+  //     );
-    });
+  //   });
 
-    return <>{options.map((option) => option)}</>;
+  //   return <>{options.map((option) => option)}</>;
-  }, []);
+  // }, []);
 
   const getUserTypeLabel = React.useCallback((role) => {
     switch (role) {
@@ -235,14 +236,6 @@ const PeopleTableRow = (props) => {
 
   const isChecked = checkedProps.checked;
 
-  const userContextClick = React.useCallback(() => {
-    if (isSeveralSelection && isChecked) {
-      return;
-    }
-
-    setBufferSelection(item);
-  }, [isSeveralSelection, isChecked, item, setBufferSelection]);
-
   const renderTypeCell = () => {
     const typesOptions = getTypesOptions();
 
@@ -286,20 +279,31 @@ const PeopleTableRow = (props) => {
   const typeCell = renderTypeCell();
 
   const onChange = (e) => {
+    //console.log("onChange");
     onContentRowSelect && onContentRowSelect(e.target.checked, item);
   };
 
+  const onRowContextClick = React.useCallback(() => {
+    //console.log("userContextClick");
+    onContentRowClick && onContentRowClick(!isChecked, item, false);
+  }, [isChecked, item, onContentRowClick]);
+
   const onRowClick = (e) => {
     if (
       e.target.closest(".checkbox") ||
+      e.target.closest(".table-container_row-checkbox") ||
       e.target.closest(".type-combobox") ||
       e.target.closest(".paid-badge") ||
       e.target.closest(".pending-badge") ||
-      e.target.closest(".disabled-badge")
+      e.target.closest(".disabled-badge") ||
+      e.detail === 0
     ) {
       return;
     }
-    onContentRowSelect && onContentRowSelect(!isChecked, item);
+
+    //console.log("onRowClick");
+
+    onContentRowClick && onContentRowClick(!isChecked, item);
   };
 
   return (
@@ -313,9 +317,9 @@ const PeopleTableRow = (props) => {
         className="table-row"
         sideInfoColor={sideInfoColor}
         checked={isChecked}
-        fileContextClick={userContextClick}
         isActive={isActive}
         onClick={onRowClick}
+        fileContextClick={onRowContextClick}
         {...contextOptionsProps}
       >
         <TableCell className={"table-container_user-name-cell"}>

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js

@@ -7,7 +7,6 @@ import { Avatar, ContextMenuButton } from "@docspace/components";
 import Badges from "@docspace/client/src/pages/AccountsHome/Section/Body/Badges";
 import { StyledAccountsItemTitle } from "../../styles/accounts";
 import { StyledTitle } from "../../styles/common";
-import ItemContextOptions from "./ItemContextOptions";
 
 const AccountsItemTitle = ({
   t,

packages/client/src/store/SelectionPeopleStore.js

@@ -15,27 +15,43 @@ class SelectionStore {
   }
 
   setSelection = (selection) => {
+    //console.log("setSelection", { selection });
     this.selection = selection;
-    if (selection?.length && !this.selection.length) {
-      this.bufferSelection = null;
-    }
   };
 
-  setBufferSelection = (bufferSelection) => {
+  setBufferSelection = (bufferSelection, addToSelection = true) => {
     this.bufferSelection = bufferSelection;
-    this.setSelection([]);
+    //console.log("setBufferSelection", { bufferSelection });
+    bufferSelection
+      ? addToSelection && this.setSelection([bufferSelection])
+      : this.clearSelection();
   };
 
   selectUser = (user) => {
-    if (!this.selection.length) {
+    const index = this.selection.findIndex((el) => el.id === user.id);
-      this.bufferSelection = null;
+
-    }
+    const exists = index > -1;
-    this.selection.push(user);
+
+    //console.log("selectUser", { user, selection: this.selection, exists });
+
+    if (exists) return;
+
+    this.setSelection([...this.selection, user]);
   };
 
   deselectUser = (user) => {
-    const newData = this.selection.filter((el) => el.id !== user.id);
+    const index = this.selection.findIndex((el) => el.id === user.id);
-    return (this.selection = newData);
+
+    const exists = index > -1;
+
+    //console.log("deselectUser", { user, selection: this.selection, exists });
+
+    if (!exists) return;
+
+    const newData = [...this.selection];
+    newData = this.selection.splice(index, 1);
+
+    this.setSelection(newData);
   };
 
   selectAll = () => {
@@ -54,7 +70,7 @@ class SelectionStore {
       (u) => u.status === status
     );
 
-    return (this.selection = list);
+    this.setSelection(list);
   };
 
   getUserChecked = (user, selected) => {

packages/components/access-right-select/index.js

@@ -84,7 +84,7 @@ const AccessRightSelect = ({
       onSelect={onSelectCurrentItem}
       options={[]}
       selectedOption={{
-        icon: currentItem.icon,
+        icon: currentItem?.icon,
         default: true,
         key: currentItem?.key,
         label: currentItem?.label,