Fix Bug 60961 - Accounts. The account is selected twice when clicking on the user icon (checkbox)

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/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(() => {
-    if (isSeveralSelection && isChecked) {
-      return;
-    }
-    setBufferSelection(item);
-  }, [isChecked, isSeveralSelection, item, setBufferSelection]);
+  const onRowClick = React.useCallback(() => {
+    onContentRowClick && onContentRowClick(!isChecked, item);
+  }, [isChecked, item, onContentRowClick]);
+
+  const onRowContextClick = React.useCallback(() => {
+    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 options = [];
+  // const getRoomsOptions = React.useCallback(() => {
+  //   const options = [];
 
-    fakeRooms.forEach((room) => {
-      options.push(
-        <DropDownItem key={room.name} noHover={true}>
-          {room.name} &nbsp;
-          <Text fontSize="13px" fontWeight={600} color={sideInfoColor} truncate>
-            ({room.role})
-          </Text>
-        </DropDownItem>
-      );
-    });
+  //   fakeRooms.forEach((room) => {
+  //     options.push(
+  //       <DropDownItem key={room.name} noHover={true}>
+  //         {room.name} &nbsp;
+  //         <Text fontSize="13px" fontWeight={600} color={sideInfoColor} truncate>
+  //           ({room.role})
+  //         </Text>
+  //       </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) {
-      this.bufferSelection = null;
-    }
-    this.selection.push(user);
+    const index = this.selection.findIndex((el) => el.id === user.id);
+
+    const exists = index > -1;
+
+    //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);
-    return (this.selection = newData);
+    const index = this.selection.findIndex((el) => el.id === user.id);
+
+    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) => {