fix groups not updating after a change (#15888)

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

@@ -16,13 +16,18 @@ import Tooltip from "metabase/components/Tooltip";
 import UserAvatar from "metabase/components/UserAvatar";
 import PaginationControls from "metabase/components/PaginationControls";
 import { getUser } from "metabase/selectors/user";
+
 import User from "metabase/entities/users";
+import Group from "metabase/entities/groups";
 
 import UserGroupSelect from "../components/UserGroupSelect";
 import { USER_STATUS } from "../constants";
 import { isLastPage } from "../utils";
 import { loadMemberships } from "../people";
 
+@Group.loadList({
+  reload: true,
+})
 @User.loadList({
   reload: true,
   query: (_, { query }) => ({
@@ -52,6 +57,7 @@ export default class PeopleList extends Component {
     }),
     user: PropTypes.object.isRequired,
     users: PropTypes.array,
+    groups: PropTypes.array,
     loadMemberships: PropTypes.func.isRequired,
     onNextPage: PropTypes.func,
     onPreviousPage: PropTypes.func,
@@ -91,6 +97,7 @@ export default class PeopleList extends Component {
     const {
       user,
       users,
+      groups,
       query,
       total,
       onNextPage,
@@ -172,6 +179,7 @@ export default class PeopleList extends Component {
                     <React.Fragment>
                       <td>
                         <UserGroupSelect
+                          groups={groups}
                           userId={user.id}
                           isCurrentUser={isCurrentUser(user)}
                         />

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

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import Group from "metabase/entities/groups";
 import { connect } from "react-redux";
 
 import { createMembership, deleteMembership } from "../people";
@@ -10,7 +9,6 @@ import LoadingSpinner from "metabase/components/LoadingSpinner";
 
 import GroupSelect from "./GroupSelect";
 
-@Group.loadList()
 @connect(
   (state, props) => ({
     groups: getGroupsWithoutMetabot(state, props),
@@ -51,9 +49,9 @@ export default class UserGroupSelect extends Component {
   };
 
   render() {
-    const { loading, groups, userMemberships, isCurrentUser } = this.props;
+    const { groups, userMemberships, isCurrentUser } = this.props;
 
-    if (loading || !userMemberships) {
+    if (!groups || groups.length === 0 || !userMemberships) {
       return <LoadingSpinner />;
     }
 

frontend/src/metabase/admin/people/components/group-members/GroupMembersTable.jsx

@@ -39,6 +39,12 @@ export default function GroupMembersTable({
     <User.ListLoader pageSize={15} entityQuery={entityQuery}>
       {({ list, page, pageSize, onNextPage, onPreviousPage, reload }) => {
         const hasMembers = members.length !== 0;
+
+        const handleAddUser = async user => {
+          await onAddUserDone();
+          reload();
+        };
+
         const handleRemoveUser = async user => {
           await onRemoveUserClicked(user);
           reload();
@@ -53,7 +59,7 @@ export default function GroupMembersTable({
                   text={text}
                   selectedUsers={selectedUsers}
                   onCancel={onAddUserCancel}
-                  onDone={onAddUserDone}
+                  onDone={handleAddUser}
                   onTextChange={onAddUserTextChange}
                   onSuggestionAccepted={onUserSuggestionAccepted}
                   onRemoveUserFromSelection={onRemoveUserFromSelection}