Changing source for member count on group detail screen (#32703)

e2e/test/scenarios/admin/people/people.cy.spec.js

@@ -95,10 +95,24 @@ describe("scenarios > admin > people", () => {
 
       // should load the members when navigating to the group directly
       cy.visit(`/admin/people/groups/${DATA_GROUP}`);
+
       // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
       cy.findByText("2 members");
 
-      removeUserFromGroup(noCollectionUserName);
+      cy.findByRole("list", { name: "admin-list-items" })
+        .findByRole("link", { name: /people/i })
+        .click();
+
+      showUserOptions(noCollectionUserName);
+
+      popover().findByText("Deactivate user").click();
+
+      clickButton("Deactivate");
+
+      cy.findByRole("link", { name: /group/i }).click();
+
+      cy.findByRole("table").findByRole("link", { name: /data/i }).click();
+
       // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
       cy.findByText("1 member");
 

frontend/src/metabase/admin/people/components/GroupDetail.jsx

@@ -160,9 +160,9 @@ const GroupDetail = ({
           {getGroupNameLocalized(group ?? {})}
           <span className="text-light ml1">
             {ngettext(
-              msgid`${groupMemberships.length} member`,
-              `${groupMemberships.length} members`,
-              groupMemberships.length,
+              msgid`${group.members.length} member`,
+              `${group.members.length} members`,
+              group.members.length,
             )}
           </span>
         </Fragment>

frontend/src/metabase/admin/people/components/GroupMembersTable/GroupMembersTable.tsx

@@ -61,7 +61,7 @@ function GroupMembersTable({
   const canRemove = (user: IUser) =>
     !isDefaultGroup(group) && !(isAdminGroup(group) && isCurrentUser(user));
 
-  const hasMembers = groupMemberships.length > 0;
+  const hasMembers = group.members.length > 0;
 
   const handleAddUser: GroupMembersTableProps["onAddUserDone"] =
     async userIds => {

frontend/src/metabase/admin/people/containers/GroupDetailApp.jsx

@@ -14,5 +14,5 @@ class GroupDetailApp extends Component {
 
 export default _.compose(
   User.loadList(),
-  Group.load({ id: (_state, props) => props.params.groupId }),
+  Group.load({ id: (_state, props) => props.params.groupId, reload: true }),
 )(GroupDetailApp);

frontend/src/metabase/admin/people/people.js

@@ -2,6 +2,7 @@ import _ from "underscore";
 import { assoc, dissoc } from "icepick";
 import {
   createAction,
+  createThunkAction,
   handleActions,
   combineReducers,
 } from "metabase/lib/redux";
@@ -20,6 +21,8 @@ import {
   CLEAR_TEMPORARY_PASSWORD,
 } from "./events";
 
+import { getMemberships } from "./selectors";
+
 // ACTION CREATORS
 
 export const loadMemberships = createAction(LOAD_MEMBERSHIPS, async () =>
@@ -47,12 +50,14 @@ export const createMembership = createAction(
     };
   },
 );
-export const deleteMembership = createAction(
+export const deleteMembership = createThunkAction(
   DELETE_MEMBERSHIP,
-  async membershipId => {
+  membershipId => async (_dispatch, getState) => {
+    const memberships = getMemberships(getState());
+    const membership = memberships[membershipId];
     await PermissionsApi.deleteMembership({ id: membershipId });
     MetabaseAnalytics.trackStructEvent("People Groups", "Membership Deleted");
-    return { membershipId };
+    return { membershipId, groupId: membership.group_id };
   },
 );
 

frontend/src/metabase/components/LeftNavPane/LeftNavPane.jsx

@@ -47,7 +47,9 @@ export function LeftNavPane({ children, fullHeight = true }) {
         "full-height": fullHeight,
       })}
     >
-      <ul className="AdminList-items pt1">{children}</ul>
+      <ul className="AdminList-items pt1" aria-label="admin-list-items">
+        {children}
+      </ul>
     </div>
   );
 }