From f1e42ee77596c31d7ac8ed8789f6c8b3eaa892c1 Mon Sep 17 00:00:00 2001
From: Zach Wasserman <zach@fleetdm.com>
Date: Mon, 28 Jun 2021 10:59:06 -0700
Subject: [PATCH] Display "No team" in Hosts table if the host is not assigned
 to any team (#1221)

- Add new formatter that returns "No team" if `team` does not exist
- Add sort to the "Team" column
---
 frontend/fleet/helpers.ts                            |  9 +++++++++
 .../pages/hosts/ManageHostsPage/HostTableConfig.tsx  | 12 ++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/fleet/helpers.ts b/frontend/fleet/helpers.ts
index dd82f15eea..35963ef0b2 100644
--- a/frontend/fleet/helpers.ts
+++ b/frontend/fleet/helpers.ts
@@ -344,6 +344,14 @@ export const humanHostDetailUpdated = (detailUpdated: string): string => {
   return moment(detailUpdated).fromNow();
 };
 
+export const hostTeamName = (teamName: string | null): string => {
+  if (!teamName) {
+    return "No team";
+  }
+
+  return teamName;
+};
+
 export const humanQueryLastRun = (lastRun: string): string => {
   // Handles the case when a query has never been ran.
   // July 28, 2016 is the date of the initial commit to fleet/fleet.
@@ -405,6 +413,7 @@ export default {
   humanHostEnrolled,
   humanHostMemory,
   humanHostDetailUpdated,
+  hostTeamName,
   humanQueryLastRun,
   secondsToHms,
   labelSlug,
diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
index a9b6c477e3..40f5d1ab78 100644
--- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
@@ -16,6 +16,7 @@ import {
   humanHostUptime,
   humanHostLastSeen,
   humanHostDetailUpdated,
+  hostTeamName,
 } from "fleet/helpers";
 import { IConfig } from "interfaces/config";
 import { IUser } from "interfaces/user";
@@ -107,9 +108,16 @@ const allHostTableHeaders: IHostDataColumn[] = [
   },
   {
     title: "Team",
-    Header: "Team",
+    Header: (cellProps) => (
+      <HeaderCell
+        value={cellProps.column.title}
+        isSortedDesc={cellProps.column.isSortedDesc}
+      />
+    ),
     accessor: "team_name",
-    Cell: (cellProps) => <TextCell value={cellProps.cell.value} />,
+    Cell: (cellProps) => (
+      <TextCell value={cellProps.cell.value} formatter={hostTeamName} />
+    ),
   },
   {
     title: "Status",