Client: Fix header blinking after entering inside group

packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js

@@ -24,13 +24,10 @@ const GroupsTableItem = ({
   setSelection,
   bufferSelection,
   setBufferSelection,
-  setCurrentGroup,
   getGroupContextOptions,
-  setInsideGroupBackUrl,
+  openGroupAction,
   managerAccountsGroupsColumnIsEnabled,
 }) => {
-  const navigate = useNavigate();
-
   const isChecked = selection.includes(item);
   const isActive = bufferSelection?.id === item.id;
 
@@ -46,12 +43,7 @@ const GroupsTableItem = ({
   const onOpenGroup = () => {
     setSelection([]);
     setBufferSelection(null);
-    setCurrentGroup(null);
-    setInsideGroupBackUrl(
-      `${window.location.pathname}${window.location.search}`,
-    );
-
-    navigate(`/accounts/groups/${item.id}/filter`);
+    openGroupAction(item.id, true, item.name);
   };
 
   const onRowClick = (e) => {
@@ -156,9 +148,8 @@ export default inject(({ peopleStore }) => ({
   setSelection: peopleStore.groupsStore.setSelection,
   bufferSelection: peopleStore.groupsStore.bufferSelection,
   setBufferSelection: peopleStore.groupsStore.setBufferSelection,
-  setCurrentGroup: peopleStore.groupsStore.setCurrentGroup,
   getGroupContextOptions: peopleStore.groupsStore.getGroupContextOptions,
-  setInsideGroupBackUrl: peopleStore.groupsStore.setInsideGroupBackUrl,
+  openGroupAction: peopleStore.groupsStore.openGroupAction,
 }))(
   withTranslation(
     "People",

packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableContainer.js

@@ -121,7 +121,7 @@ const Table = ({
   typeAccountsInsideGroupColumnIsEnabled,
   groupAccountsInsideGroupColumnIsEnabled,
   emailAccountsInsideGroupColumnIsEnabled,
-  setCurrentGroup,
+  openGroupAction,
 }) => {
   const ref = useRef(null);
   const [hideColumns, setHideColumns] = React.useState(false);
@@ -182,7 +182,7 @@ const Table = ({
               emailAccountsInsideGroupColumnIsEnabled
             }
             infoPanelVisible={infoPanelVisible}
-            setCurrentGroup={setCurrentGroup}
+            openGroupAction={openGroupAction}
           />
         ))}
       </TableBody>
@@ -221,6 +221,8 @@ export default inject(
       emailAccountsInsideGroupColumnIsEnabled,
     } = tableStore;
 
+    const { openGroupAction } = peopleStore.groupsStore;
+
     return {
       peopleList,
       accountsViewAs,
@@ -239,7 +241,7 @@ export default inject(
       groupAccountsInsideGroupColumnIsEnabled,
       emailAccountsInsideGroupColumnIsEnabled,
 
-      setCurrentGroup: peopleStore.groupsStore.setCurrentGroup,
+      openGroupAction,
     };
   },
 )(observer(Table));

packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js

@@ -189,7 +189,7 @@ const InsideGroupTableRow = (props) => {
     hideColumns,
     value,
     standalone,
-    setCurrentGroup,
+    openGroupAction,
 
     typeAccountsInsideGroupColumnIsEnabled,
     groupAccountsInsideGroupColumnIsEnabled,
@@ -210,8 +210,6 @@ const InsideGroupTableRow = (props) => {
     isSSO,
   } = item;
 
-  const navigate = useNavigate();
-
   const isPending = statusType === "pending" || statusType === "disabled";
 
   const [groupDropDownIsOpened, setGroupDropDownIsOpened] = useState(false);
@@ -282,10 +280,10 @@ const InsideGroupTableRow = (props) => {
     [item, changeUserType],
   );
 
-  const onOpenGroup = React.useCallback(({ action }) => {
-    setCurrentGroup(null);
-    navigate(`/accounts/groups/${action}`);
-  }, []);
+  const onOpenGroup = React.useCallback(
+    ({ action, title }) => openGroupAction(action, false, title),
+    [openGroupAction],
+  );
 
   // const getRoomsOptions = React.useCallback(() => {
   //   const options = [];

packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js

@@ -197,7 +197,7 @@ const PeopleTableRow = (props) => {
     hideColumns,
     value,
     standalone,
-    setCurrentGroup,
+    openGroupAction,
     showStorageInfo,
     typeAccountsColumnIsEnabled,
     emailAccountsColumnIsEnabled,
@@ -219,8 +219,6 @@ const PeopleTableRow = (props) => {
     isSSO,
   } = item;
 
-  const navigate = useNavigate();
-
   const isPending = statusType === "pending" || statusType === "disabled";
 
   const [groupDropDownIsOpened, setGroupDropDownIsOpened] = useState(false);
@@ -291,10 +289,10 @@ const PeopleTableRow = (props) => {
     [item, changeUserType],
   );
 
-  const onOpenGroup = React.useCallback(({ action }) => {
-    setCurrentGroup(null);
-    navigate(`/accounts/groups/${action}`);
-  }, []);
+  const onOpenGroup = React.useCallback(
+    ({ action, title }) => openGroupAction(action, true, title),
+    [openGroupAction],
+  );
 
   // const getRoomsOptions = React.useCallback(() => {
   //   const options = [];
@@ -600,11 +598,14 @@ const PeopleTableRow = (props) => {
   );
 };
 
-export default inject(({ currentQuotaStore }) => {
+export default inject(({ currentQuotaStore, peopleStore }) => {
   const { showStorageInfo } = currentQuotaStore;
 
+  const { openGroupAction } = peopleStore.groupsStore;
+
   return {
     showStorageInfo,
+    openGroupAction,
   };
 })(
   withContent(

packages/client/src/pages/Home/Section/Header/index.js

@@ -153,6 +153,7 @@ const SectionHeaderContent = (props) => {
   const {
     currentFolderId,
     currentGroup,
+    insideGroupTempTitle,
     getGroupContextOptions,
     setSelectFileDialogVisible,
     t,
@@ -1076,11 +1077,17 @@ const SectionHeaderContent = (props) => {
       ? stateIsRoot
       : isRootFolder || isAccountsPage || isSettingsPage;
 
+  const getInsideGroupTitle = () => {
+    return isLoading || !currentGroup?.name
+      ? insideGroupTempTitle
+      : currentGroup?.name;
+  };
+
   const currentTitle = isSettingsPage
     ? t("Common:Settings")
     : isAccountsPage
-      ? isInsideGroup && currentGroup
-        ? currentGroup.name
+      ? isInsideGroup
+        ? getInsideGroupTitle()
         : t("Common:Accounts")
       : isLoading && stateTitle
         ? stateTitle
@@ -1332,6 +1339,7 @@ export default inject(
       currentGroup,
       getGroupContextOptions,
       setSelected: setGroupsSelected,
+      insideGroupTempTitle,
     } = peopleStore.groupsStore;
 
     const {
@@ -1537,6 +1545,7 @@ export default inject(
       currentDeviceType,
       setLeaveRoomDialogVisible,
       inRoom,
+      insideGroupTempTitle,
       currentGroup,
       getGroupContextOptions,
       onCreateAndCopySharedLink,

packages/client/src/store/GroupsStore.ts

@@ -40,6 +40,8 @@ class GroupsStore {
 
   insideGroupBackUrl: string | null = null;
 
+  insideGroupTempTitle: string | null = null;
+
   constructor(
     authStore: any,
     peopleStore: any,
@@ -156,6 +158,10 @@ class GroupsStore {
     this.insideGroupBackUrl = url;
   };
 
+  setInsideGroupTempTitle = (title: string | null) => {
+    this.insideGroupTempTitle = title;
+  };
+
   getGroups = async (
     filter = GroupsFilter.getDefault(),
     updateFilter = false,
@@ -400,8 +406,25 @@ class GroupsStore {
   clearInsideGroup = () => {
     this.currentGroup = null;
     this.insideGroupBackUrl = null;
+    this.insideGroupTempTitle = null;
     this.peopleStore.usersStore.setUsers([]);
   };
+
+  openGroupAction = (
+    groupId: string,
+    withBackURL: boolean,
+    tempTitle: string,
+  ) => {
+    this.setCurrentGroup(null);
+    this.setInsideGroupTempTitle(tempTitle);
+
+    if (withBackURL) {
+      const url = `${window.location.pathname}${window.location.search}`;
+      this.setInsideGroupBackUrl(url);
+    }
+
+    window.DocSpace.navigate(`/accounts/groups/${groupId}`);
+  };
 }
 
 export default GroupsStore;