Device User UI: Update policy banners (#6825)

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

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

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 {

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;

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