[MM-14906] Add TeamMembers block which builds off of UserGrid and Dat…

…aGrid (mattermost#5469)

* MM-21730 Create UserGrid < DataGrid and add to team_channel_settings page

* MM-21730 Hide columns as width shrinks

* MM-14906 Add team members component

* MM-21731 Add base user grid component

* MM-21730 Data grid styling changes

* MM-14906 Add team members block changes

* MM-21731 Add user grid name remove and role components

* MM-14906 Add ability to update roles on team members block

* MM-21731 Add ability to update channel or team roles on user grid

* MM-21730 Types and styling fixes for DataGrid

* MM-21730 Data grid tests and styling changes

* User grid iteration

* Add searchProfilesAndTeamMembers and allow all team memberships to be reloaded

* Add ability to add users to team members block

* Add users to team modal component

* Remove unneeded change

* Consolidate empty and loading styles into datagrid

* Fix translations

* Import selector for selectProfilesNotInTeam

* Update redux

* Fix tests

* Styling for new

* Move DataGrid out of widgets

* Use existing num people remaining

* Add some snapshot tests for user grid component

* Add some snapshot tests for user grid component

* Fix linting

* Add tests for add users to team modal

* Add some more tests

* Handle search in the team members block using search selector

* Set private and public methods

* Fix i18n

* Make tested methods public

* Styling changes for the new badge

* Scope styling changes to user grid

* Fix type check and update redux

* Update user grid snapshots

* Apply changes from code review

* Default value for search

* Update redux

* Allow memberships to be updated before saving a newly created user

* Fix nasty infinite loading bug

* Add tests for team_members

* Add missing header

* Use a constant and fix localized default message

* Dont set user role for guests

* Redirect after save as requested by Michael

* Set navigation blocked and clear search on load

* Add search to team members

* Updat redux hash

* Set min height so that loading spinner is not jerky, and always paginate

* Restrict add users to team users to non guests

* Dont need filters on getProfilesNotInTeam

* Update redux

* Fix translations for removing users on teams page

* Update redux

* Use BEM naming conventions

* Use existing color css

* Rename to rowsContainerStyles

* Fix snaps

actions/user_actions.jsx

@@ -42,6 +42,21 @@ export function loadProfilesAndStatusesInChannel(channelId, page = 0, perPage =
  };
 }
 
+export function loadProfilesAndReloadTeamMembers(page, perPage, teamId, options = {}) {
+ return async (doDispatch, doGetState) => {
+ const newTeamId = teamId || getCurrentTeamId(doGetState());
+ const {data} = await doDispatch(UserActions.getProfilesInTeam(newTeamId, page, perPage, '', options));
+ if (data) {
+ await Promise.all([
+ doDispatch(loadTeamMembersForProfilesList(data, newTeamId, true)),
+ doDispatch(loadStatusesForProfilesList(data))
+ ]);
+ }
+
+ return {data: true};
+ };
+}
+
 export function loadProfilesAndTeamMembers(page, perPage, teamId, options) {
  return async (doDispatch, doGetState) => {
  const newTeamId = teamId || getCurrentTeamId(doGetState());
@@ -55,6 +70,21 @@ export function loadProfilesAndTeamMembers(page, perPage, teamId, options) {
  };
 }
 
+export function searchProfilesAndTeamMembers(term = '', options = {}) {
+ return async (doDispatch, doGetState) => {
+ const newTeamId = options.team_id || getCurrentTeamId(doGetState());
+ const {data} = await doDispatch(UserActions.searchProfiles(term, options));
+ if (data) {
+ await Promise.all([
+ doDispatch(loadTeamMembersForProfilesList(data, newTeamId)),
+ doDispatch(loadStatusesForProfilesList(data))
+ ]);
+ }
+
+ return {data: true};
+ };
+}
+
 export function loadProfilesAndTeamMembersAndChannelMembers(page, perPage, teamId, channelId) {
  return async (doDispatch, doGetState) => {
  const state = doGetState();
@@ -73,15 +103,15 @@ export function loadProfilesAndTeamMembersAndChannelMembers(page, perPage, teamI
  };
 }
 
-export function loadTeamMembersForProfilesList(profiles, teamId) {
+export function loadTeamMembersForProfilesList(profiles, teamId, reloadAllMembers = false) {
  return async (doDispatch, doGetState) => {
  const state = doGetState();
  const teamIdParam = teamId || getCurrentTeamId(state);
  const membersToLoad = {};
  for (let i = 0; i < profiles.length; i++) {
  const pid = profiles[i].id;
 
- if (!getTeamMember(state, teamIdParam, pid)) {
+ if (reloadAllMembers === true || !getTeamMember(state, teamIdParam, pid)) {
  membersToLoad[pid] = true;
  }
  }

actions/user_actions.test.js

@@ -203,6 +203,11 @@ describe('Actions.User', () => {
  await testStore.dispatch(UserActions.loadTeamMembersForProfilesList([{id: 'current_user_id'}], 'team_1'));
  expect(testStore.getActions()).toEqual([]);
 
+ // should call getTeamMembersByIds when reloadAllMembers = true even though 'current_user_id' is already loaded
+ testStore = await mockStore(initialState);
+ await testStore.dispatch(UserActions.loadTeamMembersForProfilesList([{id: 'current_user_id'}], 'team_1', true));
+ expect(testStore.getActions()).toEqual([{args: ['team_1', ['current_user_id']], type: 'MOCK_GET_TEAM_MEMBERS_BY_IDS'}]);
+
  // should not call getTeamMembersByIds since no or empty profile is passed
  testStore = await mockStore(initialState);
  await testStore.dispatch(UserActions.loadTeamMembersForProfilesList([], 'team_1'));