From 93ace41f2baef06a146597990239564cc8458ef0 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 17 Aug 2021 19:39:24 -0400
Subject: [PATCH] Manage Users Page: Fix teams header to render on refresh
 (#1687)

* Fix teams header to render on refresh
---
 .../UserManagementPage/UserManagementPage.jsx | 24 +++++++++++--------
 .../UserManagementPage/UsersTableConfig.tsx   |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
index 50ed0ade01..fcd6629cd6 100644
--- a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
+++ b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
@@ -83,17 +83,13 @@ export class UserManagementPage extends Component {
       userEditing: null,
       usersEditing: [],
     };
-
-    const { isBasicTier } = props;
-
-    // done as an instance variable as these headers will not change, so dont
-    // want to recalculate on re-renders.
-    this.tableHeaders = generateTableHeaders(this.onActionSelect, isBasicTier);
   }
 
   componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(teamActions.loadAll({}));
+    const { dispatch, isBasicTier } = this.props;
+    if (isBasicTier) {
+      dispatch(teamActions.loadAll({}));
+    }
   }
 
   onEditUser = (formData) => {
@@ -544,7 +540,6 @@ export class UserManagementPage extends Component {
 
   render() {
     const {
-      tableHeaders,
       renderCreateUserModal,
       renderEditUserModal,
       renderDeleteUserModal,
@@ -554,7 +549,16 @@ export class UserManagementPage extends Component {
       onTableQueryChange,
       onActionSelect,
     } = this;
-    const { loadingTableData, users, invites, currentUser } = this.props;
+
+    const {
+      loadingTableData,
+      users,
+      invites,
+      currentUser,
+      isBasicTier,
+    } = this.props;
+
+    const tableHeaders = generateTableHeaders(onActionSelect, isBasicTier);
 
     let tableData = [];
     if (!loadingTableData) {
diff --git a/frontend/pages/admin/UserManagementPage/UsersTableConfig.tsx b/frontend/pages/admin/UserManagementPage/UsersTableConfig.tsx
index d80bced4dd..927bc7affc 100644
--- a/frontend/pages/admin/UserManagementPage/UsersTableConfig.tsx
+++ b/frontend/pages/admin/UserManagementPage/UsersTableConfig.tsx
@@ -49,7 +49,7 @@ interface IUserTableData {
 // more info here https://react-table.tanstack.com/docs/api/useTable#cell-properties
 const generateTableHeaders = (
   actionSelectHandler: (value: string, user: IUser | IInvite) => void,
-  isBasicTier = false
+  isBasicTier: boolean
 ): IDataColumn[] => {
   const tableHeaders: IDataColumn[] = [
     {