From 947eaddb13d5a7314a16d68ad7b9657cc63b1a9d Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 18 Aug 2023 09:16:10 -0400
Subject: [PATCH] Fleet UI: Update banner to remove old icon and use InfoBanner
 component (#13312)

---
 assets/images/icon-close-8x8@2x.png           | Bin 363 -> 0 bytes
 assets/images/icon-close-white-16x16@2x.png   | Bin 282 -> 0 bytes
 frontend/components/InfoBanner/InfoBanner.tsx |   2 +-
 frontend/components/InfoBanner/_styles.scss   |   9 +++++++
 .../hosts/ManageHostsPage/ManageHostsPage.tsx |  22 ++++++-----------
 .../pages/hosts/ManageHostsPage/_styles.scss  |  23 ------------------
 6 files changed, 18 insertions(+), 38 deletions(-)
 delete mode 100644 assets/images/icon-close-8x8@2x.png
 delete mode 100644 assets/images/icon-close-white-16x16@2x.png

diff --git a/assets/images/icon-close-8x8@2x.png b/assets/images/icon-close-8x8@2x.png
deleted file mode 100644
index 22fc241309d2ce01835e471471fa7f7f8ac2a072..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 363
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|&H|6fVg?2=RS;(M3{v?36l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-Q&j=|H#F{FZV?c}|pO$GwT-xn~d2S}G+aPpE<
zmF|!}z?Q=x-4Pv-?Yz>q)uK^Ypt$lFyCS>hpZ(L%@BY2_jw<7i$rE-tPjKO=n6`R*
z&dsf-^z{zbO^|yU5HM$XM#s(=ou?(tOkVaOe4hncf{trW;EChgla^rb;m@UFGqG=v
z<P2V?sDSTTuYPCk&Q6`HbXacf_TTBZuk>qnI20cGcTCYINo3QDWdcbru4J^{S+&UJ
z@_|D-mjo`X{AxN;jeBELOoCd=6Gr7X0UOLDZm&^)l(&5O!Q3cEJ^^i>ScMSbr)O+<
zf6acubg^}ARr(9Ai;oiSO`oyT!DGwvVA<xL`{x~(CCKZ&o-#|CJM$4RY#2OU{an^L
HB{Ts5YYB_{

diff --git a/assets/images/icon-close-white-16x16@2x.png b/assets/images/icon-close-white-16x16@2x.png
deleted file mode 100644
index 999954108d7d6f8aed7de179330d7c0dfa3b8a8e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 282
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?2=RS;(M3{v?36l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-RjzuwcuF{Fa=?KDTOBL*C<seUu0kIeqgVR>l2
zh>?Qv!oc8my_yHBw*KEL!W%eA#h=aL<<%<Ly{i_k@7m`ScZ^xZyHijv^GWI+)-6Jl
zKTK}k^Cj)roK-ybiMJe;1;y4)<lqnYIMObyIzuVa!$7ifqO8UGx5Xb1dtMPXR<dz>
zq%<c{B5ZqmcXg6Vf`pNx(2u)qmp`-~S$lhesO^2B=-V55)?WZhI6u1l+<t<J=O_Mq
YZ2R763tpZ73g~nOPgg&ebxsLQ0Q{?FSO5S3

diff --git a/frontend/components/InfoBanner/InfoBanner.tsx b/frontend/components/InfoBanner/InfoBanner.tsx
index 2833ec4f7..1eb8d6d02 100644
--- a/frontend/components/InfoBanner/InfoBanner.tsx
+++ b/frontend/components/InfoBanner/InfoBanner.tsx
@@ -10,7 +10,7 @@ export interface IInfoBannerProps {
   children?: React.ReactNode;
   className?: string;
   /** default light purple */
-  color?: "yellow";
+  color?: "yellow" | "grey";
   pageLevel?: boolean;
   /** cta and link are mutually exclusive */
   cta?: JSX.Element;
diff --git a/frontend/components/InfoBanner/_styles.scss b/frontend/components/InfoBanner/_styles.scss
index 2bca9b9b1..5902cba3d 100644
--- a/frontend/components/InfoBanner/_styles.scss
+++ b/frontend/components/InfoBanner/_styles.scss
@@ -15,6 +15,11 @@
     border-color: $ui-yellow-banner-outline;
   }
 
+  &__grey {
+    background-color: $ui-off-white;
+    border-color: $ui-fleet-black-50;
+  }
+
   &__page-banner {
     padding: $pad-large $pad-xlarge;
     margin-bottom: $pad-large;
@@ -40,6 +45,10 @@
 
     &:hover {
       cursor: pointer;
+
+      svg path {
+        stroke: $core-vibrant-blue;
+      }
     }
   }
 }
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 43e573ac7..b64349713 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -64,6 +64,7 @@ import Icon from "components/Icon/Icon";
 // @ts-ignore
 import Dropdown from "components/forms/fields/Dropdown";
 import TableContainer from "components/TableContainer";
+import InfoBanner from "components/InfoBanner/InfoBanner";
 import { ITableQueryData } from "components/TableContainer/TableContainer";
 import TableDataError from "components/DataError";
 import { IActionButtonProps } from "components/TableContainer/DataTable/ActionButton/ActionButton";
@@ -84,7 +85,6 @@ import {
   DEFAULT_PAGE_INDEX,
   getHostSelectStatuses,
   MANAGE_HOSTS_PAGE_FILTER_KEYS,
-  ManageHostsPageQueryParams,
 } from "./HostsPageConfig";
 import { isAcceptableStatus } from "./helpers";
 
@@ -97,7 +97,6 @@ import EditColumnsModal from "./components/EditColumnsModal/EditColumnsModal";
 import TransferHostModal from "../components/TransferHostModal";
 import DeleteHostModal from "../components/DeleteHostModal";
 import DeleteLabelModal from "./components/DeleteLabelModal";
-import CloseIconBlack from "../../../../assets/images/icon-close-fleet-black-16x16@2x.png";
 import LabelFilterSelect from "./components/LabelFilterSelect";
 import HostsFilterBlock from "./components/HostsFilterBlock";
 
@@ -1470,24 +1469,19 @@ const ManageHostsPage = ({
       ((canEnrollHosts && noTeamEnrollSecrets) ||
         (canEnrollGlobalHosts && noGlobalEnrollSecrets)) &&
       showNoEnrollSecretBanner && (
-        <div className={`${baseClass}__no-enroll-secret-banner`}>
+        <InfoBanner
+          className={`${baseClass}__no-enroll-secret-banner`}
+          pageLevel
+          closable
+          color="grey"
+        >
           <div>
             <span>
               You have no enroll secrets. Manage enroll secrets to enroll hosts
               to <b>{isAnyTeamSelected ? currentTeamName : "Fleet"}</b>.
             </span>
           </div>
-          <div className={`dismiss-banner-button`}>
-            <Button
-              variant="unstyled"
-              onClick={() =>
-                setShowNoEnrollSecretBanner(!showNoEnrollSecretBanner)
-              }
-            >
-              <img alt="Dismiss no enroll secret banner" src={CloseIconBlack} />
-            </Button>
-          </div>
-        </div>
+        </InfoBanner>
       )
     );
   };
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index f07518019..e83c786b6 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -285,29 +285,6 @@
     padding-bottom: $pad-large;
   }
 
-  &__no-enroll-secret-banner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: $x-small;
-    background-color: $ui-off-white;
-    padding: $pad-large;
-    border-radius: 10px;
-    border: 1px solid $ui-fleet-black-50;
-
-    .dismiss-banner-button {
-      display: flex;
-      align-items: center;
-      img {
-        height: 16px;
-        width: auto;
-      }
-    }
-    &:not(:only-child) {
-      margin-bottom: $pad-medium;
-    }
-  }
-
   .total-issues-count {
     margin-left: $pad-small;
   }