Client: Add people column

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

@@ -49,6 +49,16 @@ class GroupsTableHeader extends React.Component {
         minWidth: 210,
         onClick: this.onFilter,
       },
+      {
+        key: "People",
+        title: props.t("Common:People"),
+        enable: props.peopleAccountsGroupsColumnIsEnabled,
+        default: true,
+        sortBy: "membersCount",
+        onClick: this.onFilter,
+        resizable: true,
+        onChange: this.onColumnChange,
+      },
       {
         key: "Head of Group",
         title: props.t("Common:HeadOfGroup"),
@@ -161,6 +171,8 @@ export default inject(
     setColumnEnable: tableStore.setColumnEnable,
     managerAccountsGroupsColumnIsEnabled:
       tableStore.managerAccountsGroupsColumnIsEnabled,
+    peopleAccountsGroupsColumnIsEnabled:
+      tableStore.peopleAccountsGroupsColumnIsEnabled,
   }),
 )(
   withTranslation(["People", "Common", "PeopleTranslations"])(

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

@@ -45,6 +45,7 @@ const GroupsTableItem = ({
   getGroupContextOptions,
   getModel,
   openGroupAction,
+  peopleAccountsGroupsColumnIsEnabled,
   managerAccountsGroupsColumnIsEnabled,
 
   changeGroupSelection,
@@ -139,6 +140,23 @@ const GroupsTableItem = ({
           <Badges isLDAP={item.isLDAP} />
         </TableCell>
 
+        {peopleAccountsGroupsColumnIsEnabled ? (
+          <TableCell className="table-container_group-people">
+            <Text
+              title={item.membersCount}
+              fontWeight="600"
+              fontSize="13px"
+              isTextOverflow
+              className="table-cell_group-people"
+              color={theme.filesSection.tableView.row.sideColor}
+            >
+              {item.membersCount}
+            </Text>
+          </TableCell>
+        ) : (
+          <div />
+        )}
+
         {managerAccountsGroupsColumnIsEnabled ? (
           <TableCell className={"table-container_group-manager"}>
             <Text

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

@@ -57,6 +57,7 @@ const GroupsTableView = ({
   groupsIsFiltered,
   groupsFilterTotal,
 
+  peopleAccountsGroupsColumnIsEnabled,
   managerAccountsGroupsColumnIsEnabled,
 }) => {
   const ref = useRef(null);
@@ -110,6 +111,9 @@ const GroupsTableView = ({
             managerAccountsGroupsColumnIsEnabled={
               managerAccountsGroupsColumnIsEnabled
             }
+            peopleAccountsGroupsColumnIsEnabled={
+              peopleAccountsGroupsColumnIsEnabled
+            }
           />
         ))}
       </TableBody>
@@ -155,7 +159,10 @@ export default inject(
 
     const { isVisible: infoPanelVisible } = infoPanelStore;
 
-    const { managerAccountsGroupsColumnIsEnabled } = tableStore;
+    const {
+      managerAccountsGroupsColumnIsEnabled,
+      peopleAccountsGroupsColumnIsEnabled,
+    } = tableStore;
 
     return {
       groups,
@@ -177,6 +184,7 @@ export default inject(
       groupsIsFiltered,
       groupsFilterTotal,
 
+      peopleAccountsGroupsColumnIsEnabled,
       managerAccountsGroupsColumnIsEnabled,
     };
   },

packages/client/src/store/TableStore.js

@@ -80,6 +80,7 @@ class TableStore {
   emailAccountsColumnIsEnabled = true;
   storageAccountsColumnIsEnabled = true;
 
+  peopleAccountsGroupsColumnIsEnabled = true;
   managerAccountsGroupsColumnIsEnabled = true;
 
   typeAccountsInsideGroupColumnIsEnabled = true;
@@ -163,6 +164,8 @@ class TableStore {
   setAccountsColumnStorage = (enable) =>
     (this.storageAccountsColumnIsEnabled = enable);
 
+  setAccountsGroupsColumnPeople = (enable) =>
+    (this.peopleAccountsGroupsColumnIsEnabled = enable);
   setAccountsGroupsColumnManager = (enable) =>
     (this.managerAccountsGroupsColumnIsEnabled = enable);
 
@@ -210,6 +213,7 @@ class TableStore {
       }
 
       if (getIsAccountsGroups()) {
+        this.setAccountsGroupsColumnPeople(splitColumns.includes("People"));
         this.setAccountsGroupsColumnManager(
           splitColumns.includes("Head of Group"),
         );
@@ -349,6 +353,12 @@ class TableStore {
           : this.setRoomColumnQuota(!this.roomQuotaColumnIsEnable);
         return;
 
+      case "People":
+        this.setAccountsGroupsColumnPeople(
+          !this.peopleAccountsGroupsColumnIsEnabled,
+        );
+        return;
+
       case "Head of Group":
         this.setAccountsGroupsColumnManager(
           !this.managerAccountsGroupsColumnIsEnabled,