User Management Page: Teams column renders for basic tier only (#1023)

* Render teams column only for Basic tier

Co-authored by: Sarah Gillespie @gillespi314

frontend/pages/admin/UserManagementPage/UserManagementPage.jsx

@@ -13,6 +13,7 @@ import inviteInterface from "interfaces/invite";
 import configInterface from "interfaces/config";
 import userInterface from "interfaces/user";
 import teamInterface from "interfaces/team";
+import permissionUtils from "utilities/permissions";
 import paths from "router/paths";
 import entityGetter from "redux/utilities/entityGetter";
 import inviteActions from "redux/nodes/entities/invites/actions";
@@ -60,6 +61,7 @@ export class UserManagementPage extends Component {
       base: PropTypes.string,
       email: PropTypes.string,
     }),
+    isBasicTier: PropTypes.bool,
     users: PropTypes.arrayOf(userInterface),
     userErrors: PropTypes.shape({
       base: PropTypes.string,
@@ -80,9 +82,11 @@ export class UserManagementPage extends Component {
       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);
+    this.tableHeaders = generateTableHeaders(this.onActionSelect, isBasicTier);
   }
 
   componentDidMount() {
@@ -488,6 +492,7 @@ const mapStateToProps = (state) => {
   } = state.entities.invites;
   const { errors: userErrors, loading: loadingUsers } = state.entities.users;
   const loadingTableData = loadingUsers || loadingInvites;
+  const isBasicTier = permissionUtils.isBasicTier(config);
 
   return {
     appConfigLoading,
@@ -497,6 +502,7 @@ const mapStateToProps = (state) => {
     userErrors,
     invites,
     inviteErrors,
+    isBasicTier,
     loadingTableData,
     teams,
   };

frontend/pages/admin/UserManagementPage/UsersTableConfig.tsx

@@ -1,4 +1,3 @@
-import { string } from "prop-types";
 import React from "react";
 
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell";
@@ -50,9 +49,10 @@ interface IUserTableData {
 // NOTE: cellProps come from react-table
 // more info here https://react-table.tanstack.com/docs/api/useTable#cell-properties
 const generateTableHeaders = (
-  actionSelectHandler: (value: string, user: IUser | IInvite) => void
+  actionSelectHandler: (value: string, user: IUser | IInvite) => void,
+  isBasicTier = false
 ): IDataColumn[] => {
-  return [
+  const tableHeaders: IDataColumn[] = [
     {
       title: "Name",
       Header: (cellProps) => (
@@ -83,13 +83,6 @@ const generateTableHeaders = (
       accessor: "email",
       Cell: (cellProps) => <TextCell value={cellProps.cell.value} />,
     },
-    {
-      title: "Teams",
-      Header: "Teams",
-      accessor: "teams",
-      disableSortBy: true,
-      Cell: (cellProps) => <TextCell value={cellProps.cell.value} />,
-    },
     {
       title: "Roles",
       Header: "Roles",
@@ -113,6 +106,19 @@ const generateTableHeaders = (
       ),
     },
   ];
+
+  // Add Teams tab for basic tier only
+  if (isBasicTier) {
+    tableHeaders.splice(3, 0, {
+      title: "Teams",
+      Header: "Teams",
+      accessor: "teams",
+      disableSortBy: true,
+      Cell: (cellProps) => <TextCell value={cellProps.cell.value} />,
+    });
+  }
+
+  return tableHeaders;
 };
 
 // TODO: need to rethink status data.