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

@@ -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,

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",