From acdf46314effa3621bec40c3811da11e47666a88 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 22 Jul 2022 12:15:23 -0400
Subject: [PATCH] Device User UI: Update policy banners (#6825)

---
 changes/issue-6021-host-details-policy-banners     |  1 +
 .../details/HostDetailsPage/HostDetailsPage.tsx    |  9 ++++++++-
 .../hosts/details/HostDetailsPage/_styles.scss     |  1 +
 .../PolicyFailingCount/PolicyFailingCount.tsx      | 14 +++++++++-----
 .../hosts/details/cards/Policies/Policies.tsx      |  4 ++--
 5 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 changes/issue-6021-host-details-policy-banners

diff --git a/changes/issue-6021-host-details-policy-banners b/changes/issue-6021-host-details-policy-banners
new file mode 100644
index 0000000000..a8c3ce87dd
--- /dev/null
+++ b/changes/issue-6021-host-details-policy-banners
@@ -0,0 +1 @@
+* Update failing policy banner to include CTA for device user, hide no response banner from device user
\ No newline at end of file
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index a118ac8822..e762bf837b 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -560,7 +560,14 @@ const HostDetailsPage = ({
             <Tab>Details</Tab>
             <Tab>Software</Tab>
             <Tab>Schedule</Tab>
-            <Tab>Policies</Tab>
+            <Tab>
+              {titleData.issues.failing_policies_count > 0 && (
+                <span className="count">
+                  {titleData.issues.failing_policies_count}
+                </span>
+              )}
+              Policies
+            </Tab>
           </TabList>
           <TabPanel>
             <AboutCard
diff --git a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
index f6e8c8b408..4d0acf3a1d 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
@@ -234,6 +234,7 @@
     .react-tabs__tab {
       padding: 6px 0px 16px 0px;
       margin-right: $pad-xxlarge;
+      display: inline-block;
     }
 
     .react-tabs__tab--selected {
diff --git a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx
index 543a93a6a6..4f3e125e56 100644
--- a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx
+++ b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/PolicyFailingCount/PolicyFailingCount.tsx
@@ -5,11 +5,14 @@ import IssueIcon from "../../../../../../../../assets/images/icon-issue-fleet-bl
 
 const baseClass = "policy-failing-count";
 
-const PolicyFailingCount = (policyProps: {
+interface IPolicyFailingCountProps {
   policyList: IHostPolicy[];
-}): JSX.Element | null => {
-  const { policyList } = policyProps;
-
+  deviceUser?: boolean;
+}
+const PolicyFailingCount = ({
+  policyList,
+  deviceUser,
+}: IPolicyFailingCountProps): JSX.Element | null => {
   const failCount = policyList.reduce((sum, policy) => {
     return policy.response === "fail" ? sum + 1 : sum;
   }, 0);
@@ -24,7 +27,8 @@ const PolicyFailingCount = (policyProps: {
       <p>
         Click a policy below to see if there are steps you can take to resolve
         the issue
-        {failCount > 1 ? "s" : ""}.
+        {failCount > 1 ? "s" : ""}.{" "}
+        {deviceUser && " Once resolved, click “Refetch” above to confirm."}
       </p>
     </div>
   ) : null;
diff --git a/frontend/pages/hosts/details/cards/Policies/Policies.tsx b/frontend/pages/hosts/details/cards/Policies/Policies.tsx
index 398147cec9..314f63f87b 100644
--- a/frontend/pages/hosts/details/cards/Policies/Policies.tsx
+++ b/frontend/pages/hosts/details/cards/Policies/Policies.tsx
@@ -61,9 +61,9 @@ const Policies = ({
       {policies.length > 0 && (
         <>
           {failingResponses?.length > 0 && (
-            <PolicyFailingCount policyList={policies} />
+            <PolicyFailingCount policyList={policies} deviceUser={deviceUser} />
           )}
-          {noResponses?.length > 0 && (
+          {noResponses?.length > 0 && !deviceUser && (
             <InfoBanner>
               <p>
                 This host is not updating the response for some policies. Check