Update action button styles on "Manage packs" page and "Manage queries" page (#960)

- Add `text-icon` variant to buttons on _Manage packs_ page
- Add `text-icon` variant to buttons on _Manage queries_ page

frontend/pages/packs/AllPacksPage/AllPacksPage.jsx

@@ -18,6 +18,10 @@ import scheduledQueryActions from "redux/nodes/entities/scheduled_queries/action
 import scheduledQueryInterface from "interfaces/scheduled_query";
 import PATHS from "router/paths";
 
+import DisableIcon from "../../../../assets/images/icon-action-close-16x15@2x.png";
+import DeleteIcon from "../../../../assets/images/icon-action-delete-14x14@2x.png";
+import EnableIcon from "../../../../assets/images/icon-action-check-16x15@2x.png";
+
 const baseClass = "all-packs-page";
 
 export class AllPacksPage extends Component {
@@ -220,33 +224,40 @@ export class AllPacksPage extends Component {
     const checkedPackCount = this.state.checkedPackIDs.length;
 
     if (checkedPackCount) {
-      const packText = checkedPackCount === 1 ? "Pack" : "Packs";
-
       return (
-        <div>
-          <span className={`${baseClass}__pack-count`}>
+        <div className={`${baseClass}__bulk-action-container`}>
+          <span className={`${baseClass}__selected-count`}>
             <strong>{checkedPackCount}</strong> selected
           </span>
           <Button
-            className={`${btnClass} ${btnClass}--disable`}
+            className={`${btnClass}`}
             onClick={onBulkAction("disable")}
             variant="text-icon"
           >
-            Disable
+            <>
+              <img src={DisableIcon} alt="Disable pack icon" />
+              Disable
+            </>
           </Button>
           <Button
-            className={`${btnClass} ${btnClass}--enable`}
+            className={`${btnClass}`}
             onClick={onBulkAction("enable")}
-            variant="unstyled"
+            variant="text-icon"
           >
-            Enable
+            <>
+              <img src={EnableIcon} alt="Enable pack icon" />
+              Enable
+            </>
           </Button>
           <Button
-            className={`${btnClass} ${btnClass}--delete`}
+            className={`${btnClass}`}
             onClick={onToggleModal}
-            variant="unstyled"
+            variant="text-icon"
           >
-            Delete
+            <>
+              <img src={DeleteIcon} alt="Delete pack icon" />
+              Delete
+            </>
           </Button>
         </div>
       );

frontend/pages/packs/AllPacksPage/AllPacksPage.tests.jsx

@@ -123,16 +123,22 @@ describe("AllPacksPage - component", () => {
 
       selectAllPacks.hostNodes().simulate("change");
 
+      const deleteBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Delete";
+      });
+
+      const enableBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Enable";
+      });
+
+      const disableBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Disable";
+      });
+
       expect(page.state("checkedPackIDs")).toEqual([packStub.id, 101]);
-      expect(
-        page.find(".all-packs-page__bulk-action-btn--disable").length
-      ).toBeGreaterThan(0);
-      expect(
-        page.find(".all-packs-page__bulk-action-btn--enable").length
-      ).toBeGreaterThan(0);
-      expect(
-        page.find(".all-packs-page__bulk-action-btn--delete").length
-      ).toBeGreaterThan(0);
+      expect(deleteBtn.length).toBeGreaterThan(0);
+      expect(enableBtn.length).toBeGreaterThan(0);
+      expect(disableBtn.length).toBeGreaterThan(0);
     });
 
     it("dispatches the pack update function when disable is clicked", () => {
@@ -145,11 +151,11 @@ describe("AllPacksPage - component", () => {
 
       selectAllPacks.hostNodes().simulate("change");
 
-      const disableBtn = page
-        .find(".all-packs-page__bulk-action-btn--disable")
-        .hostNodes();
+      const disableBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Disable";
+      });
 
-      disableBtn.simulate("click");
+      disableBtn.at(0).simulate("click");
 
       const dispatchedActions = mockStore.getActions();
 
@@ -168,11 +174,11 @@ describe("AllPacksPage - component", () => {
 
       selectAllPacks.hostNodes().simulate("change");
 
-      const enableBtn = page
-        .find(".all-packs-page__bulk-action-btn--enable")
-        .hostNodes();
+      const enableBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Enable";
+      });
 
-      enableBtn.simulate("click");
+      enableBtn.at(0).simulate("click");
 
       const dispatchedActions = mockStore.getActions();
 
@@ -193,11 +199,13 @@ describe("AllPacksPage - component", () => {
 
       selectAllPacks.hostNodes().simulate("change");
 
-      const deleteBtn = page
-        .find(".all-packs-page__bulk-action-btn--delete")
-        .hostNodes();
+      const deleteBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Delete";
+      });
 
-      deleteBtn.simulate("click");
+      // We use .at(1) because there are 2 buttons with the
+      // text "Delete" on the screen
+      deleteBtn.at(1).simulate("click");
 
       expect(page.find("Modal").length).toEqual(1);
     });
@@ -214,11 +222,13 @@ describe("AllPacksPage - component", () => {
 
       selectAllPacks.hostNodes().simulate("change");
 
-      const deleteBtn = page
-        .find(".all-packs-page__bulk-action-btn--delete")
-        .hostNodes();
+      const deleteBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Delete";
+      });
 
-      deleteBtn.simulate("click");
+      // We use .at(1) because there are 2 buttons with the
+      // text "Delete" on the screen
+      deleteBtn.at(1).simulate("click");
 
       const modal = page.find("Modal");
 
@@ -243,11 +253,13 @@ describe("AllPacksPage - component", () => {
 
       selectAllPacks.hostNodes().simulate("change");
 
-      const deleteBtn = page
-        .find(".all-packs-page__bulk-action-btn--delete")
-        .hostNodes();
+      const deleteBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Delete";
+      });
 
-      deleteBtn.simulate("click");
+      // We use .at(1) because there are 2 buttons with the
+      // text "Delete" on the screen
+      deleteBtn.at(1).simulate("click");
 
       const modal = page.find("Modal");
 

frontend/pages/packs/AllPacksPage/_styles.scss

@@ -1,34 +1,13 @@
 .all-packs-page {
   font-size: $x-small;
 
-  &__bulk-action-btn {
-    color: $core-fleet-black;
-    font-size: $x-small;
-    font-weight: $regular;
-    margin-left: $pad-large;
-    position: relative;
-    bottom: 0;
+  &__bulk-action-container {
+    display: flex;
+    align-items: center;
+  }
 
-    &--disable {
-      &::before {
-        content: url("../assets/images/icon-action-close-16x15@2x.png");
-        transform: scale(0.5);
-      }
-    }
-
-    &--enable {
-      &::before {
-        content: url("../assets/images/icon-action-check-16x15@2x.png");
-        transform: scale(0.5);
-      }
-    }
-
-    &--delete {
-      &::before {
-        content: url("../assets/images/icon-action-delete-14x14@2x.png");
-        transform: scale(0.5);
-      }
-    }
+  &__selected-count {
+    padding: 0 $pad-medium;
   }
 
   &__header-wrap {
@@ -40,10 +19,8 @@
   &__pack-count {
     color: $core-fleet-black;
     font-size: $x-small;
-    line-height: 35px;
     margin: 0;
-    position: relative;
-    top: -$pad-small;
+    padding: $pad-xlarge 0 0 0;
   }
 
   &__search-create-section {

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx

@@ -18,6 +18,8 @@ import queryInterface from "interfaces/query";
 import userInterface from "interfaces/user";
 import { renderFlash } from "redux/nodes/notifications/actions";
 
+import DeleteIcon from "../../../../assets/images/icon-action-delete-14x14@2x.png";
+
 const baseClass = "manage-queries-page";
 
 export class ManageQueriesPage extends Component {
@@ -187,19 +189,19 @@ export class ManageQueriesPage extends Component {
     const { goToNewQueryPage, onToggleModal } = this;
     const { currentUser } = this.props;
 
-    const btnClass = `${baseClass}__delete-queries-btn`;
     const checkedQueryCount = this.state.checkedQueryIDs.length;
 
     if (checkedQueryCount) {
-      const queryText = checkedQueryCount === 1 ? "Query" : "Queries";
-
       return (
         <div className={`${baseClass}__ctas`}>
-          <p className={`${baseClass}__query-count`}>
-            {checkedQueryCount} {queryText} selected
-          </p>
-          <Button className={btnClass} onClick={onToggleModal} variant="alert">
-            Delete
+          <span className={`${baseClass}__selected-count`}>
+            <strong>{checkedQueryCount}</strong> selected
+          </span>
+          <Button onClick={onToggleModal} variant="text-icon">
+            <>
+              <img src={DeleteIcon} alt="Delete query icon" />
+              Delete
+            </>
           </Button>
         </div>
       );
@@ -224,7 +226,7 @@ export class ManageQueriesPage extends Component {
     }
 
     return (
-      <Modal title="Delete Query" onExit={onToggleModal}>
+      <Modal title="Delete query" onExit={onToggleModal}>
         <p>Are you sure you want to delete the selected queries?</p>
         <div className={`${baseClass}__modal-btn-wrap`}>
           <Button onClick={onDeleteQueries} variant="alert">

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tests.jsx

@@ -225,10 +225,12 @@ describe("ManageQueriesPage - component", () => {
 
       checkAllQueries.hostNodes().simulate("change");
 
+      const deleteBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Delete";
+      });
+
       expect(page.state("checkedQueryIDs")).toEqual([queryStub.id, 101]);
-      expect(
-        page.find(".manage-queries-page__delete-queries-btn").length
-      ).toBeGreaterThan(0);
+      expect(deleteBtn.length).toBeGreaterThan(0);
     });
 
     it("calls the API to delete once the Modal has been accepted", () => {
@@ -243,11 +245,13 @@ describe("ManageQueriesPage - component", () => {
 
       checkAllQueries.hostNodes().simulate("change");
 
-      const deleteBtn = page
-        .find(".manage-queries-page__delete-queries-btn")
-        .hostNodes();
+      const deleteBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Delete";
+      });
 
-      deleteBtn.simulate("click");
+      // We use .at(1) because there are 2 buttons with the
+      // text "Delete" on the screen
+      deleteBtn.at(1).simulate("click");
 
       expect(mockStore.getActions()).not.toContainEqual({
         type: "queries_DESTROY_REQUEST",
@@ -274,11 +278,13 @@ describe("ManageQueriesPage - component", () => {
 
       checkAllQueries.hostNodes().simulate("change");
 
-      const deleteBtn = page
-        .find(".manage-queries-page__delete-queries-btn")
-        .hostNodes();
+      const deleteBtn = page.findWhere((node) => {
+        return node.type() && node.name() && node.text() === "Delete";
+      });
 
-      deleteBtn.simulate("click");
+      // We use .at(1) because there are 2 buttons with the
+      // text "Delete" on the screen
+      deleteBtn.at(1).simulate("click");
 
       expect(mockStore.getActions()).not.toContainEqual({
         type: "queries_DESTROY_REQUEST",

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -1,9 +1,4 @@
 .manage-queries-page {
-  &__delete-queries-btn {
-    font-size: 15px;
-    font-weight: $regular;
-  }
-
   &__header-wrap {
     display: flex;
     justify-content: space-between;
@@ -11,8 +6,13 @@
   }
 
   &__ctas {
-    flex-grow: 1;
-    text-align: right;
+    display: flex;
+    align-items: center;
+    font-size: $x-small;
+  }
+
+  &__selected-count {
+    padding: 0 $pad-medium;
   }
 
   &__query-count {