Manage Host Page: Spiffier icons for filter status/policy button/dropdowns (#2379)

changes/issue-2225-cleaner-ux

@@ -0,0 +1 @@
+* Cleaner buttons and icons on Manage Host Page

cypress/integration/premium/teamflow.spec.ts

@@ -11,6 +11,7 @@ describe("Teams flow", () => {
   it("Create, edit, and delete a team successfully", () => {
     cy.visit("/settings/teams");
 
+    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
     cy.findByRole("button", { name: /create team/i }).click();
 
     cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting

frontend/components/TableContainer/TableContainer.tsx

@@ -222,7 +222,9 @@ const TableContainer = ({
             )}
             {resultsHtml}
           </p>
-        ) : null}
+        ) : (
+          <p />
+        )}
         <div className={`${baseClass}__table-controls`}>
           {!hideActionButton && actionButtonText && (
             <Button

frontend/components/buttons/Button/Button.tsx

@@ -20,7 +20,8 @@ export type ButtonVariant =
   | "disabled"
   | "unstyled"
   | "unstyled-modal-query"
-  | "contextual-nav-item";
+  | "contextual-nav-item"
+  | "small-text-icon";
 
 interface IButtonProps {
   autofocus?: boolean;

frontend/components/buttons/Button/_styles.scss

@@ -173,6 +173,36 @@ $base-class: "button";
       color: $core-vibrant-blue-over;
     }
   }
+  &--small-text-icon {
+    @include button-variant(transparent);
+    margin-left: $pad-medium;
+    padding: 4px;
+    border: 1px solid $ui-fleet-black-25;
+    box-shadow: none;
+    color: $core-fleet-black;
+    font-size: $xx-small;
+    font-weight: $bold;
+    cursor: pointer;
+    height: 28px;
+
+    img {
+      width: 12px;
+      height: 12px;
+      padding: $pad-small;
+    }
+
+    &:active {
+      color: $core-vibrant-blue-down;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      color: $core-vibrant-blue-over;
+    }
+  }
 
   &--inverse {
     @include button-variant(

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -70,7 +70,8 @@ import DeleteHostModal from "./components/DeleteHostModal";
 import EditColumnsIcon from "../../../../assets/images/icon-edit-columns-16x16@2x.png";
 import PencilIcon from "../../../../assets/images/icon-pencil-14x14@2x.png";
 import TrashIcon from "../../../../assets/images/icon-trash-14x14@2x.png";
-import CloseIcon from "../../../../assets/images/icon-close-fleet-black-16x16@2x.png";
+import CloseIcon from "../../../../assets/images/icon-action-close-16x15@2x.png";
+import PolicyIcon from "../../../../assets/images/icon-policy-fleet-black-12x12@2x.png";
 
 interface IManageHostsProps {
   route: RouteProps;
@@ -791,15 +792,26 @@ const ManageHostsPage = ({
   };
 
   const renderPoliciesFilterBlock = () => {
+    const buttonText = (
+      <>
+        <img src={PolicyIcon} alt="Policy" />
+        {policyName}
+        <img src={CloseIcon} alt="Remove policy filter" />
+      </>
+    );
     return (
       <div className={`${baseClass}__policies-filter-block`}>
         <PoliciesFilter
           policyResponse={policyResponse}
           onChange={handleChangePoliciesFilter}
         />
-        <p>{policyName}</p>
-        <Button onClick={handleClearPoliciesFilter} variant={"text-icon"}>
-          <img src={CloseIcon} alt="Remove policy filter" />
+        <Button
+          className={`${baseClass}__clear-policies-filter`}
+          onClick={handleClearPoliciesFilter}
+          variant={"small-text-icon"}
+          title={policyName}
+        >
+          {buttonText}
         </Button>
       </div>
     );

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -138,6 +138,23 @@
         max-height: none;
       }
     }
+    .Select-value {
+      padding-left: $pad-medium;
+      padding-right: $pad-medium;
+
+      &::before {
+        display: inline-block;
+        position: absolute;
+        padding: 5px 0 0 0; // centers spin
+        content: url(../assets/images/icon-filter-black-16x16@2x.png);
+        transform: scale(0.5);
+        height: 26px;
+        left: 2px;
+      }
+    }
+    .Select-value-label {
+      padding-left: $pad-large;
+    }
   }
 
   &__team-dropdown {
@@ -233,7 +250,7 @@
     align-items: center;
 
     p {
-      font-size: $x-small;
+      font-size: $xx-small;
       font-weight: $bold;
       padding-left: $pad-medium;
     }

frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/_styles.scss

@@ -14,5 +14,23 @@
         max-height: none;
       }
     }
+    .Select-value {
+      padding-left: $pad-medium;
+      padding-right: $pad-medium;
+
+      &::before {
+        display: inline-block;
+        position: absolute;
+        padding: 5px 0 0 0; // centers spin
+        content: url(../assets/images/icon-filter-v2-black-16x16@2x.png);
+        transform: scale(0.5);
+        width: 16px;
+        height: 26px;
+        left: 2px;
+      }
+    }
+    .Select-value-label {
+      padding-left: $pad-large;
+    }
   }
 }