From fb12ed10ca0403a375b78fcfaf241d0f2657acf3 Mon Sep 17 00:00:00 2001
From: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
Date: Tue, 15 Jun 2021 13:04:32 -0400
Subject: [PATCH] Add hosts count to Team details page (#1090)

- Display number of hosts assigned to a team on the Team details page
- Add back button styles to "Back to teams" link
---
 .../TeamDetailsWrapper/TeamDetailsWrapper.tsx        | 12 +++++++++---
 .../TeamDetailsWrapper/_styles.scss                  | 10 +++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
index b0160a93c..5751f54ea 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
@@ -17,6 +17,7 @@ import EditTeamModal from "../components/EditTeamModal";
 import { IEditTeamFormData } from "../components/EditTeamModal/EditTeamModal";
 import AddHostsRedirectModal from "./components/AddHostsModal/AddHostsRedirectModal";
 
+import BackChevron from "../../../../../assets/images/icon-chevron-down-9x6@2x.png";
 import PencilIcon from "../../../../../assets/images/icon-pencil-14x14@2x.png";
 import TrashIcon from "../../../../../assets/images/icon-trash-14x14@2x.png";
 
@@ -159,17 +160,22 @@ const TeamDetailsWrapper = (props: ITeamDetailsPageProps): JSX.Element => {
       </div>
     );
   }
+  const hostsCount = team.host_count;
+  const hostsTotalDisplay = hostsCount === 1 ? "1 host" : `${hostsCount} hosts`;
 
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__nav-header`}>
-        <Link className={`${baseClass}__back-link`} to={PATHS.ADMIN_TEAMS}>
-          Back to teams
+        <Link to={PATHS.ADMIN_TEAMS} className={`${baseClass}__back-link`}>
+          <img src={BackChevron} alt="back chevron" id="back-chevron" />
+          <span>Back to teams</span>
         </Link>
         <div className={`${baseClass}__team-header`}>
           <div className={`${baseClass}__team-details`}>
             <h1>{team.name}</h1>
-            <span className={`${baseClass}__host-count`}>0 hosts</span>
+            <span className={`${baseClass}__host-count`}>
+              {hostsTotalDisplay}
+            </span>
           </div>
           <div className={`${baseClass}__team-actions`}>
             <Button onClick={toggleAddHostsRedirectModal}>Add hosts</Button>
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss
index 2e86139d2..e3bb85716 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss
@@ -8,12 +8,20 @@
   }
 
   &__back-link {
-    color: $core-vibrant-blue;
+    display: flex;
+    align-items: center;
+    height: 16px;
     font-size: $x-small;
+    color: $core-vibrant-blue;
     font-weight: $bold;
     text-decoration: none;
   }
 
+  #back-chevron {
+    width: 16px;
+    margin-right: $pad-small;
+  }
+
   &__nav-header {
     padding-top: 15px;
     position: sticky;