Fix incorrect labels on VPP and ABM tables (#41986)

frontend/interfaces/team.ts

@@ -7,6 +7,7 @@ import {
 import enrollSecretInterface, { IEnrollSecret } from "./enroll_secret";
 import { ITeamIntegrations } from "./integration";
 import { UserRole } from "./user";
+import { ITokenTeam } from "./mdm";
 
 export default PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -144,3 +145,8 @@ export const APP_CONTEXT_NO_TEAM_SUMMARY: ITeamSummary = {
 
 export const isAnyTeamSelected = (currentTeamId?: number) =>
   currentTeamId !== undefined && currentTeamId > APP_CONTEXT_NO_TEAM_ID;
+
+export const getTeamDisplayName = (team: ITokenTeam) =>
+  team.team_id === APP_CONTEXT_NO_TEAM_ID
+    ? APP_CONTEXT_NO_TEAM_SUMMARY.name
+    : team.name;

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/components/AppleBusinessManagerTable/AppleBusinessManagerTableConfig.tsx

@@ -3,6 +3,7 @@ import { CellProps, Column } from "react-table";
 
 import { IMdmAbmToken } from "interfaces/mdm";
 import { IHeaderProps, IStringCellProps } from "interfaces/datatable_config";
+import { getTeamDisplayName } from "interfaces/team";
 import { IDropdownOption } from "interfaces/dropdownOption";
 
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell";
@@ -90,7 +91,7 @@ export const generateTableConfig = (
     },
     {
       id: "macos_team",
-      accessor: (originalRow) => originalRow.macos_team.name,
+      accessor: (originalRow) => getTeamDisplayName(originalRow.macos_team),
       Header: () => {
         const titleWithToolTip = (
           <TooltipWrapper
@@ -115,7 +116,7 @@ export const generateTableConfig = (
     },
     {
       id: "ios_team",
-      accessor: (originalRow) => originalRow.ios_team.name,
+      accessor: (originalRow) => getTeamDisplayName(originalRow.ios_team),
       Header: () => {
         const titleWithToolTip = (
           <TooltipWrapper
@@ -140,7 +141,7 @@ export const generateTableConfig = (
     },
     {
       id: "ipados_team",
-      accessor: (originalRow) => originalRow.ipados_team.name,
+      accessor: (originalRow) => getTeamDisplayName(originalRow.ipados_team),
       Header: () => {
         const titleWithToolTip = (
           <TooltipWrapper

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppTable/TeamsCell/TeamsCell.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { ITokenTeam } from "interfaces/mdm";
+import { getTeamDisplayName } from "interfaces/team";
 
 import TextCell from "components/TableContainer/DataTable/TextCell";
 import { uniqueId } from "lodash";
@@ -24,7 +25,7 @@ const generateCell = (teams: ITokenTeam[] | null) => {
   let italicize = true;
   if (teams.length === 1) {
     italicize = false;
-    text = teams[0].name;
+    text = getTeamDisplayName(teams[0]);
   } else {
     text = `${teams.length} fleets`;
   }
@@ -37,7 +38,7 @@ const condenseTeams = (teams: ITokenTeam[]) => {
     (teams?.length &&
       teams
         .slice(-NUM_TEAMS_IN_TOOLTIP)
-        .map((team) => team.name)
+        .map((team) => getTeamDisplayName(team))
         .reverse()) ||
     [];
 
@@ -87,7 +88,7 @@ const TeamsCell = ({ teams, className }: ITeamsCellProps) => {
   }
 
   if (teams.length === 1) {
-    return <TextCell value={teams[0].name} />;
+    return <TextCell value={getTeamDisplayName(teams[0])} />;
   }
 
   const cell = generateCell(teams);