From ce005779e64cc88d7279f7195aa079167c4d11b6 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 21 May 2021 15:08:35 -0400
Subject: [PATCH] Host details page: Render team (#813)

* Render host team for basic tier only
* No team greyed out
---
 .../hosts/HostDetailsPage/HostDetailsPage.jsx | 30 ++++++++++++++++++-
 .../pages/hosts/HostDetailsPage/_styles.scss  |  4 +++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
index e968f4239f..cc88ba6a22 100644
--- a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
+++ b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
@@ -13,6 +13,7 @@ import Modal from "components/modals/Modal";
 import SoftwareListRow from "pages/hosts/HostDetailsPage/SoftwareListRow";
 import PackQueriesListRow from "pages/hosts/HostDetailsPage/PackQueriesListRow";
 
+import permissionUtils from "utilities/permissions";
 import entityGetter from "redux/utilities/entityGetter";
 import queryActions from "redux/nodes/entities/queries/actions";
 import queryInterface from "interfaces/query";
@@ -51,6 +52,7 @@ export class HostDetailsPage extends Component {
     isLoadingHost: PropTypes.bool,
     queries: PropTypes.arrayOf(queryInterface),
     queryErrors: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    isBasicTier: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -413,7 +415,14 @@ export class HostDetailsPage extends Component {
   };
 
   render() {
-    const { host, isLoadingHost, dispatch, queries, queryErrors } = this.props;
+    const {
+      host,
+      isLoadingHost,
+      dispatch,
+      queries,
+      queryErrors,
+      isBasicTier,
+    } = this.props;
     const { showQueryHostModal } = this.state;
     const {
       toggleQueryHostModal,
@@ -467,6 +476,20 @@ export class HostDetailsPage extends Component {
       return <Spinner />;
     }
 
+    const hostTeam = () => {
+      return (
+        <div className="info__item info__item--title">
+          <span className="info__header">Team</span>
+          <span className={`info__data`}>
+            {host.team_name ? (
+              `${host.team_name}`
+            ) : (
+              <span className="info__no-team">No team</span>
+            )}
+          </span>
+        </div>
+      );
+    };
     return (
       <div className={`${baseClass} body-wrap`}>
         <div>
@@ -493,6 +516,7 @@ export class HostDetailsPage extends Component {
                   {titleData.status}
                 </span>
               </div>
+              {isBasicTier ? hostTeam() : null}
               <div className="info__item info__item--title">
                 <span className="info__header">RAM</span>
                 <span className="info__data">
@@ -593,12 +617,16 @@ const mapStateToProps = (state, ownProps) => {
   const { host_id: hostID } = ownProps.params;
   const host = entityGetter(state).get("hosts").findBy({ id: hostID });
   const { loading: isLoadingHost } = state.entities.hosts;
+  const config = state.app.config;
+  const isBasicTier = permissionUtils.isBasicTier(config);
+
   return {
     host,
     hostID,
     isLoadingHost,
     queries,
     queryErrors,
+    isBasicTier,
   };
 };
 
diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss
index 576e55e69f..4d1dc9bfba 100644
--- a/frontend/pages/hosts/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/_styles.scss
@@ -42,6 +42,10 @@
         color: $core-fleet-black;
         font-weight: $bold;
       }
+
+      &__no-team {
+        color: $ui-fleet-black-50;
+      }
     }
 
     .list {