Fleet UI: Update banner to remove old icon and use InfoBanner component (#13312)

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;

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;
+      }
     }
   }
 }

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>
       )
     );
   };

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;
   }