From 0fe6b6c6e1208aa3eef38b631705c94d18365ea0 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 17 Sep 2024 10:10:34 -0700
Subject: [PATCH] Fleet UI: Host filter styling/click bug fixes (#22147)

---
 .../forms/fields/Dropdown/Dropdown.jsx        | 22 +++++-----
 .../forms/fields/Dropdown/_styles.scss        |  1 -
 .../SoftwareTable/SoftwareTable.tsx           |  2 +-
 .../SoftwareVulnerabilitiesTable.tsx          |  2 +-
 .../hosts/ManageHostsPage/ManageHostsPage.tsx |  2 +-
 .../HostsFilterBlock/HostsFilterBlock.tsx     |  6 +++
 .../components/HostsFilterBlock/_styles.scss  | 37 +++++------------
 .../PoliciesFilter/PoliciesFilter.tsx         |  3 +-
 .../components/PoliciesFilter/_styles.scss    | 40 +------------------
 .../HostSoftwareTable/HostSoftwareTable.tsx   |  2 +-
 .../AddPolicyModal/AddPolicyModal.tsx         |  2 +-
 .../components/QueriesTable/QueriesTable.tsx  |  2 +-
 12 files changed, 36 insertions(+), 85 deletions(-)

diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.jsx
index 302233e5d674..b44d6e4b7d77 100644
--- a/frontend/components/forms/fields/Dropdown/Dropdown.jsx
+++ b/frontend/components/forms/fields/Dropdown/Dropdown.jsx
@@ -49,8 +49,8 @@ class Dropdown extends Component {
     parseTarget: PropTypes.bool,
     tooltip: PropTypes.string,
     autoFocus: PropTypes.bool,
-    /** Includes styled filter icon */
-    tableFilterDropdown: PropTypes.bool,
+    /** Includes styled icon */
+    iconName: PropTypes.string,
     helpText: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
@@ -71,7 +71,7 @@ class Dropdown extends Component {
     parseTarget: false,
     tooltip: "",
     autoFocus: false,
-    tableFilterDropdown: false,
+    iconName: "",
   };
 
   onMenuOpen = () => {
@@ -155,16 +155,16 @@ class Dropdown extends Component {
     );
   };
 
-  // Adds styled filter icon to dropdown
-  renderCustomTableFilter = () => {
-    const { options, value } = this.props;
+  // Adds styled icon to dropdown
+  renderWithIcon = () => {
+    const { options, value, iconName } = this.props;
     const customLabel = options
       .filter((option) => option.value === value)
       .map((option) => option.label);
 
     return (
       <div className={`${baseClass}__custom-value`}>
-        <Icon name="filter" className={`${baseClass}__icon`} />
+        <Icon name={iconName} className={`${baseClass}__icon`} />
         <div className={`${baseClass}__custom-value-label`}>{customLabel}</div>
       </div>
     );
@@ -177,7 +177,7 @@ class Dropdown extends Component {
       onMenuOpen,
       onMenuClose,
       renderCustomDropdownArrow,
-      renderCustomTableFilter,
+      renderWithIcon,
     } = this;
     const {
       error,
@@ -192,7 +192,7 @@ class Dropdown extends Component {
       wrapperClassName,
       searchable,
       autoFocus,
-      tableFilterDropdown,
+      iconName,
     } = this.props;
 
     const formFieldProps = pick(this.props, [
@@ -230,9 +230,7 @@ class Dropdown extends Component {
           onClose={onMenuClose}
           autoFocus={autoFocus}
           arrowRenderer={renderCustomDropdownArrow}
-          valueComponent={
-            tableFilterDropdown ? renderCustomTableFilter : undefined
-          }
+          valueComponent={iconName ? renderWithIcon : undefined}
         />
       </FormField>
     );
diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss
index 1b5f15309d30..c86dc61bf62c 100644
--- a/frontend/components/forms/fields/Dropdown/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/_styles.scss
@@ -6,7 +6,6 @@
     }
 
     &-label {
-      width: 105px;
       line-height: 38px;
       font-size: $small;
     }
diff --git a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTable.tsx b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTable.tsx
index 9b8df49c2cf9..24dd8a95e077 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTable.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTable.tsx
@@ -300,7 +300,7 @@ const SoftwareTable = ({
             options={SOFTWARE_TITLES_DROPDOWN_OPTIONS}
             searchable={false}
             onChange={handleCustomFilterDropdownChange}
-            tableFilterDropdown
+            iconName="filter"
           />
         )}
         <Slider
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTable.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTable.tsx
index 390a3dc86682..b7c49b4b47ef 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTable.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTable.tsx
@@ -242,7 +242,7 @@ const SoftwareVulnerabilitiesTable = ({
         options={getExploitedVulnerabilitiesDropdownOptions(isPremiumTier)}
         searchable={false}
         onChange={handleExploitedVulnFilterDropdownChange}
-        tableFilterDropdown
+        iconName="filter"
       />
     );
   };
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 8587b8641a24..6464f4d59bf4 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -1443,7 +1443,7 @@ const ManageHostsPage = ({
           options={getHostSelectStatuses(isSandboxMode)}
           searchable={false}
           onChange={handleStatusDropdownChange}
-          tableFilterDropdown
+          iconName="filter"
         />
         <LabelFilterSelect
           className={`${baseClass}__label-filter-dropdown`}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx
index cfcd400726ab..62dc63ed56de 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx
@@ -251,6 +251,8 @@ const HostsFilterBlock = ({
           className={`${baseClass}__macsettings-dropdown`}
           options={OS_SETTINGS_FILTER_OPTIONS}
           onChange={onChangeMacSettingsFilter}
+          searchable={false}
+          iconName="filter-alt"
         />
         <FilterPill
           label={label}
@@ -414,6 +416,8 @@ const HostsFilterBlock = ({
           className={`${baseClass}__os_settings-dropdown`}
           options={OS_SETTINGS_FILTER_OPTIONS}
           onChange={onChangeOsSettingsFilter}
+          searchable={false}
+          iconName="filter-alt"
         />
         <FilterPill
           label={label}
@@ -472,7 +476,9 @@ const HostsFilterBlock = ({
           value={softwareStatus}
           className={`${baseClass}__sw-install-status-dropdown`}
           options={OPTIONS}
+          searchable={false}
           onChange={onChangeSoftwareInstallStatusFilter}
+          iconName="filter-alt"
         />
         {renderSoftwareFilterBlock([HOSTS_QUERY_PARAMS.SOFTWARE_STATUS])}
       </>
diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss
index b270d851842b..667c4f086ac4 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss
@@ -10,40 +10,23 @@
       // and other "form-fields" in the filter block
       width: initial;
     }
-  }
 
-  // NOTE: Look more into this styling
-  &__os_settings-dropdown,
-  &__macsettings-dropdown,
-  &__sw-install-status-dropdown {
-    .Select-value {
+    // Vertically centers icon and text
+    .Select-multi-value-wrapper {
       display: flex;
       align-items: center;
-      position: initial !important;
-      line-height: initial !important;
-
-      &::before {
-        position: relative;
-        content: url(../assets/images/icon-filter-v2-black-16x16@2x.png);
-        transform: scale(0.5);
-        top: 1px;
-      }
-    }
-
-    .Select-input {
-      display: none !important;
-    }
-
-    .Select {
-      box-sizing: initial;
-    }
-
-    .Select-control {
-      height: 36px;
     }
+  }
 
+  &__os_settings-dropdown,
+  &__macsettings-dropdown,
+  &__sw-install-status-dropdown {
     .dropdown__select {
       border: 1px solid #e2e4ea;
     }
+
+    .Select-multi-value-wrapper {
+      width: 150px; // Fits all dropdown options without resizing
+    }
   }
 }
diff --git a/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/PoliciesFilter.tsx b/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/PoliciesFilter.tsx
index 77f3118d978c..fae5ba45e175 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/PoliciesFilter.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/PoliciesFilter.tsx
@@ -32,13 +32,14 @@ const PoliciesFilter = ({
   const value = policyResponse;
 
   return (
-    <div className={`${baseClass}__policies-block`}>
+    <div className={baseClass}>
       <Dropdown
         value={value}
         className={`${baseClass}__status_dropdown`}
         options={POLICY_RESPONSE_OPTIONS}
         searchable={false}
         onChange={onChange}
+        iconName="filter-alt"
       />
     </div>
   );
diff --git a/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/_styles.scss
index c7d9fa8af755..c1f44b8863e4 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/PoliciesFilter/_styles.scss
@@ -1,41 +1,5 @@
 .policies-filter {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  &__status_dropdown {
-    width: 114px;
-
-    .Select-menu-outer {
-      width: 114px;
-      max-height: 310px;
-
-      .Select-menu {
-        max-height: none;
-
-        .dropdown__option {
-          font-size: $small !important;
-        }
-      }
-    }
-    .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;
-      font-size: $small !important;
-    }
+  .Select-multi-value-wrapper {
+    width: 91px; // Fits all dropdown options without resizing
   }
 }
diff --git a/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx b/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx
index c3da51aafaf5..be7a476d781a 100644
--- a/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx
+++ b/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx
@@ -114,7 +114,7 @@ const HostSoftwareTable = ({
         options={DROPDOWN_OPTIONS}
         searchable={false}
         onChange={handleFilterDropdownChange}
-        tableFilterDropdown
+        iconName="filter"
       />
     );
   }, [handleFilterDropdownChange, hostSoftwareFilter]);
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx
index f4481316ac60..e6e1e9bd3882 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx
@@ -183,7 +183,7 @@ const AddPolicyModal = ({
           options={PLATFORM_FILTER_OPTIONS}
           searchable={false}
           onChange={onPlatformFilterChange}
-          tableFilterDropdown
+          iconName="filter"
         />
         <div className={`${baseClass}__policy-selection`}>
           {filteredPoliciesCount > 0 ? filteredPoliciesList : renderNoResults()}
diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
index 9037d20a8980..eae763105bc9 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
@@ -272,7 +272,7 @@ const QueriesTable = ({
         options={PLATFORM_FILTER_OPTIONS}
         searchable={false}
         onChange={handlePlatformFilterDropdownChange}
-        tableFilterDropdown
+        iconName="filter"
       />
     );
   }, [platform, queryParams, router]);