fix: refactored so members are loaded by TeamPages and use hideFromTabs instead…

fix: refactored so members are loaded by TeamPages and use hideFromTabs instead of filtering out children in navModel

public/app/features/teams/TeamMembers.test.tsx

@@ -12,7 +12,6 @@ const setup = (propOverrides?: object) => {
     members: [] as TeamMember[],
     searchMemberQuery: '',
     setSearchMemberQuery: jest.fn(),
-    loadTeamMembers: jest.fn(),
     addTeamMember: jest.fn(),
     syncEnabled: false,
     editorsCanAdmin: false,

public/app/features/teams/TeamMembers.tsx

@@ -4,8 +4,8 @@ import SlideDown from 'app/core/components/Animations/SlideDown';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { TeamMember, User } from 'app/types';
-import { loadTeamMembers, addTeamMember, setSearchMemberQuery } from './state/actions';
-import { getSearchMemberQuery, getTeamMembers, isSignedInUserTeamAdmin } from './state/selectors';
+import { addTeamMember, setSearchMemberQuery } from './state/actions';
+import { getSearchMemberQuery, isSignedInUserTeamAdmin } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
 import { config } from 'app/core/config';
@@ -15,7 +15,6 @@ import TeamMemberRow from './TeamMemberRow';
 export interface Props {
   members: TeamMember[];
   searchMemberQuery: string;
-  loadTeamMembers: typeof loadTeamMembers;
   addTeamMember: typeof addTeamMember;
   setSearchMemberQuery: typeof setSearchMemberQuery;
   syncEnabled: boolean;
@@ -34,10 +33,6 @@ export class TeamMembers extends PureComponent<Props, State> {
     this.state = { isAdding: false, newTeamMember: null };
   }
 
-  componentDidMount() {
-    this.props.loadTeamMembers();
-  }
-
   onSearchQueryChange = (value: string) => {
     this.props.setSearchMemberQuery(value);
   };
@@ -150,7 +145,6 @@ export class TeamMembers extends PureComponent<Props, State> {
 
 function mapStateToProps(state) {
   return {
-    members: getTeamMembers(state.team),
     searchMemberQuery: getSearchMemberQuery(state.team),
     editorsCanAdmin: config.editorsCanAdmin, // this makes the feature toggle mockable/controllable from tests,
     signedInUser: contextSrv.user, // this makes the feature toggle mockable/controllable from tests,
@@ -158,7 +152,6 @@ function mapStateToProps(state) {
 }
 
 const mapDispatchToProps = {
-  loadTeamMembers,
   addTeamMember,
   setSearchMemberQuery,
 };

public/app/features/teams/TeamPages.test.tsx

@@ -14,6 +14,7 @@ const setup = (propOverrides?: object) => {
     navModel: {} as NavModel,
     teamId: 1,
     loadTeam: jest.fn(),
+    loadTeamMembers: jest.fn(),
     pageName: 'members',
     team: {} as Team,
     members: [] as TeamMember[],

public/app/features/teams/TeamPages.tsx

@@ -8,7 +8,7 @@ import TeamMembers from './TeamMembers';
 import TeamSettings from './TeamSettings';
 import TeamGroupSync from './TeamGroupSync';
 import { NavModel, Team, TeamMember } from 'app/types';
-import { loadTeam } from './state/actions';
+import { loadTeam, loadTeamMembers } from './state/actions';
 import { getTeam, getTeamMembers, isSignedInUserTeamAdmin } from './state/selectors';
 import { getTeamLoadingNav } from './state/navModel';
 import { getNavModel } from 'app/core/selectors/navModel';
@@ -18,6 +18,7 @@ import { contextSrv, User } from 'app/core/services/context_srv';
 export interface Props {
   team: Team;
   loadTeam: typeof loadTeam;
+  loadTeamMembers: typeof loadTeamMembers;
   teamId: number;
   pageName: string;
   navModel: NavModel;
@@ -55,6 +56,7 @@ export class TeamPages extends PureComponent<Props, State> {
     const { loadTeam, teamId } = this.props;
     this.setState({ isLoading: true });
     const team = await loadTeam(teamId);
+    await this.props.loadTeamMembers();
     this.setState({ isLoading: false });
     return team;
   }
@@ -65,9 +67,25 @@ export class TeamPages extends PureComponent<Props, State> {
     return _.includes(pages, currentPage) ? currentPage : pages[0];
   }
 
+  textsAreEqual = (text1: string, text2: string) => {
+    if (!text1 && !text2) {
+      return true;
+    }
+
+    if (!text1 || !text2) {
+      return false;
+    }
+
+    return text1.toLocaleLowerCase() === text2.toLocaleLowerCase();
+  };
+
   hideTabsFromNonTeamAdmin = (navModel: NavModel, isSignedInUserTeamAdmin: boolean) => {
     if (!isSignedInUserTeamAdmin && navModel.main && navModel.main.children) {
-      navModel.main.children = navModel.main.children.filter(navItem => navItem.text === 'Members');
+      navModel.main.children
+        .filter(navItem => !this.textsAreEqual(navItem.text, PageTypes.Members))
+        .map(navItem => {
+          navItem.hideFromTabs = true;
+        });
     }
 
     return navModel;
@@ -75,11 +93,12 @@ export class TeamPages extends PureComponent<Props, State> {
 
   renderPage(isSignedInUserTeamAdmin: boolean) {
     const { isSyncEnabled } = this.state;
+    const { members } = this.props;
     const currentPage = this.getCurrentPage();
 
     switch (currentPage) {
       case PageTypes.Members:
-        return <TeamMembers syncEnabled={isSyncEnabled} />;
+        return <TeamMembers syncEnabled={isSyncEnabled} members={members} />;
 
       case PageTypes.Settings:
         return isSignedInUserTeamAdmin && <TeamSettings />;
@@ -108,13 +127,16 @@ function mapStateToProps(state) {
   const teamId = getRouteParamsId(state.location);
   const pageName = getRouteParamsPage(state.location) || 'members';
   const teamLoadingNav = getTeamLoadingNav(pageName);
+  const navModel = getNavModel(state.navIndex, `team-${pageName}-${teamId}`, teamLoadingNav);
+  const team = getTeam(state.team, teamId);
+  const members = getTeamMembers(state.team);
 
   return {
-    navModel: getNavModel(state.navIndex, `team-${pageName}-${teamId}`, teamLoadingNav),
+    navModel,
     teamId: teamId,
     pageName: pageName,
-    team: getTeam(state.team, teamId),
-    members: getTeamMembers(state.team),
+    team,
+    members,
     editorsCanAdmin: config.editorsCanAdmin, // this makes the feature toggle mockable/controllable from tests,
     signedInUser: contextSrv.user, // this makes the feature toggle mockable/controllable from tests,
   };
@@ -122,6 +144,7 @@ function mapStateToProps(state) {
 
 const mapDispatchToProps = {
   loadTeam,
+  loadTeamMembers,
 };
 
 export default hot(module)(

public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap

@@ -30,6 +30,7 @@ exports[`Render should render member page if team not empty 1`] = `
     isLoading={true}
   >
     <Connect(TeamMembers)
+      members={Array []}
       syncEnabled={true}
     />
   </PageContents>