Merge branch 'develop' into bugfix/info-panel-optimization

packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js

@@ -57,6 +57,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
     toastr.clear();
     window.DocSpace.navigate(paymentPageUrl);
   };
+
   onChangeUserStatus = () => {
     const {
       updateUserStatus,
@@ -67,8 +68,11 @@ class ChangeUserStatusDialogComponent extends React.Component {
       userIDs,
       getPeopleListItem,
       setInfoPanelSelection,
+      setInfoPanelSelectedGroup,
       infoPanelVisible,
       needResetUserSelection,
+      infoPanelSelectedGroup,
+      getGroups,
     } = this.props;
 
     this.setState({ isRequestRunning: true }, () => {
@@ -103,6 +107,19 @@ class ChangeUserStatusDialogComponent extends React.Component {
         .finally(() => {
           this.setState({ isRequestRunning: false }, () => {
             needResetUserSelection && setSelected("close");
+            if (infoPanelSelectedGroup) {
+              const updatedGroup = {
+                ...infoPanelSelectedGroup,
+                membersCount:
+                  infoPanelSelectedGroup.membersCount - userIDs.length,
+                members: infoPanelSelectedGroup.members.filter(
+                  (user) => !userIDs.includes(user.id),
+                ),
+              };
+              setInfoPanelSelection(updatedGroup);
+              setInfoPanelSelectedGroup(updatedGroup);
+            }
+            getGroups();
             onClose();
           });
         });
@@ -202,7 +219,14 @@ export default inject(({ peopleStore, infoPanelStore }) => {
   const { getPeopleListItem, updateUserStatus, needResetUserSelection } =
     peopleStore.usersStore;
 
-  const { setInfoPanelSelection, isVisible: infoPanelVisible } = infoPanelStore;
+  const { getGroups } = peopleStore.groupsStore;
+
+  const {
+    setInfoPanelSelection,
+    setInfoPanelSelectedGroup,
+    isVisible: infoPanelVisible,
+    infoPanelSelectedGroup,
+  } = infoPanelStore;
 
   return {
     needResetUserSelection,
@@ -211,8 +235,11 @@ export default inject(({ peopleStore, infoPanelStore }) => {
     setSelected,
 
     getPeopleListItem,
+    getGroups,
 
     setInfoPanelSelection,
+    setInfoPanelSelectedGroup,
     infoPanelVisible,
+    infoPanelSelectedGroup,
   };
 })(observer(ChangeUserStatusDialog));

packages/client/src/pages/Home/InfoPanel/Body/index.js

@@ -62,16 +62,27 @@ const InfoPanelBodyContent = ({
   const isInsideGroup = getIsGroups() && groupId;
   const isGroups =
     getIsGroups() ||
-    (isInsideGroup && (!selectedItems.length || !!selectedItems[0].manager));
+    (isInsideGroup &&
+      (!selectedItems.length ||
+        (selectedItems[0]?.membersCount !== null &&
+          selectedItems[0]?.membersCount !== undefined)));
   const isPeople =
     getIsPeople() ||
-    (getIsGroups() && !isInsideGroup && !selectedItems[0]?.manager) ||
+    (getIsGroups() &&
+      !isInsideGroup &&
+      !(
+        selectedItems[0]?.membersCount !== null &&
+        selectedItems[0]?.membersCount !== undefined
+      )) ||
     (isInsideGroup && selectedItems.length && !selectedItems[0].manager);
 
   const isSeveralItems = props.selectedItems?.length > 1;
 
   const isNoItemGallery = isGallery && !gallerySelected;
-  const isNoItemPeople = isPeople && !isInsideGroup && !selectedItems.length;
+  const isNoItemPeople =
+    isPeople &&
+    !isInsideGroup &&
+    (!selectedItems.length || selectedItems[0].title);
   const isNoItemGroups = isGroups && !isInsideGroup && !selectedItems.length;
   const isRoot =
     infoPanelSelection?.isFolder &&
@@ -166,10 +177,10 @@ const InfoPanelBodyContent = ({
   }, [selectedItems, selectedFolder, groupId]);
 
   // * DEV-ONLY - Logs selection change
-  // useEffect(() => {
-  //   console.log("\nfor-dev  Selected items: ", selectedItems);
-  //   console.log("\nfor-dev  Selected folder: ", selectedFolder);
-  // }, [selectedItems, selectedFolder]);
+  useEffect(() => {
+    console.log("\nfor-dev  Selected items: ", selectedItems);
+    console.log("\nfor-dev  Selected folder: ", selectedFolder);
+  }, [selectedItems, selectedFolder]);
 
   return (
     <StyledInfoPanelBody>

packages/client/src/pages/Home/InfoPanel/Body/styles/history.js

@@ -154,7 +154,16 @@ const StyledHistoryBlockMessage = styled.div`
   .main-message {
     width: max-content;
     max-width: 100%;
-    min-width: max-content;
+
+    strong {
+      max-width: 100%;
+      display: inline-block;
+      vertical-align: top;
+      font-weight: 600;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 
   strong {

packages/client/src/store/GroupsStore.ts

@@ -474,52 +474,57 @@ class GroupsStore {
   ) => {
     const { isRoomAdmin } = this.peopleStore.userStore.user;
 
+    const editGroupsAction = {
+      id: "edit-group",
+      key: "edit-group",
+      className: "group-menu_drop-down",
+      label: t("PeopleTranslations:EditGroup"),
+      title: t("PeopleTranslations:EditGroup"),
+      icon: PencilReactSvgUrl,
+      onClick: () => {
+        const event = new Event(Events.GROUP_EDIT);
+        event.item = item;
+        window.dispatchEvent(event);
+      },
+    };
+
+    const showInfoAction = {
+      id: "info",
+      key: "group-info",
+      className: "group-menu_drop-down",
+      label: t("Common:Info"),
+      title: t("Common:Info"),
+      icon: InfoReactSvgUrl,
+      onClick: () => {
+        if (!forInsideGroup && this.selection.length < 1) {
+          if (this.selection.length < 1) this.setBufferSelection(item);
+        } else {
+          this.peopleStore.selectionStore.setSelection([]);
+          this.peopleStore.selectionStore.setBufferSelection(null);
+        }
+        this.infoPanelStore.setIsVisible(true);
+      },
+    };
+
+    const deleteGroupsAction = {
+      id: "delete-group",
+      key: "delete-group",
+      className: "group-menu_drop-down",
+      label: t("Common:Delete"),
+      title: t("Common:Delete"),
+      icon: TrashReactSvgUrl,
+      onClick: () => this.onDeleteClick(item.name),
+    };
+
+    if (this.selection.length > 1) {
+      return [!isRoomAdmin && deleteGroupsAction];
+    }
+
     return [
-      !isRoomAdmin && {
-        id: "edit-group",
-        key: "edit-group",
-        className: "group-menu_drop-down",
-        label: t("PeopleTranslations:EditGroup"),
-        title: t("PeopleTranslations:EditGroup"),
-        icon: PencilReactSvgUrl,
-        onClick: () => {
-          const event = new Event(Events.GROUP_EDIT);
-          event.item = item;
-          window.dispatchEvent(event);
-        },
-      },
-      !forInfoPanel && {
-        id: "info",
-        key: "group-info",
-        className: "group-menu_drop-down",
-        label: t("Common:Info"),
-        title: t("Common:Info"),
-        icon: InfoReactSvgUrl,
-        onClick: () => {
-          if (!forInsideGroup) {
-            if (this.selection.length < 1) {
-              this.setBufferSelection(item);
-            }
-          } else {
-            this.peopleStore.selectionStore.setSelection([]);
-            this.peopleStore.selectionStore.setBufferSelection(null);
-          }
-          this.infoPanelStore.setIsVisible(true);
-        },
-      },
-      !isRoomAdmin && {
-        key: "separator",
-        isSeparator: true,
-      },
-      !isRoomAdmin && {
-        id: "delete-group",
-        key: "delete-group",
-        className: "group-menu_drop-down",
-        label: t("Common:Delete"),
-        title: t("Common:Delete"),
-        icon: TrashReactSvgUrl,
-        onClick: () => this.onDeleteClick(item.name),
-      },
+      !isRoomAdmin && editGroupsAction,
+      !forInfoPanel && showInfoAction,
+      !isRoomAdmin && { key: "separator", isSeparator: true },
+      !isRoomAdmin && deleteGroupsAction,
     ];
   };
 

packages/shared/skeletons/info-panel/body/body.styled.ts

@@ -251,6 +251,7 @@ export const StyledSeveralItemsLoader = styled.div`
 
 export const StyledGroupsLoader = styled.div`
   width: 100%;
+  padding-top: 128px;
   display: flex;
   flex-direction: column;
   justify-content: center;