Fleet UI: Host filter styling/click bug fixes (#22147)

fleetdm · Sep 17, 2024 · 0fe6b6c · 0fe6b6c
1 parent 7e389d1
commit 0fe6b6c
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 85 deletions.
diff --git 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
@@ -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
@@ -300,7 +300,7 @@ const SoftwareTable = ({
             options={SOFTWARE_TITLES_DROPDOWN_OPTIONS}
             searchable={false}
             onChange={handleCustomFilterDropdownChange}
-            tableFilterDropdown
+            iconName="filter"
           />
         )}
         <Slider

diff --git a/...age/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTable.tsx b/...age/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
@@ -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
@@ -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
@@ -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/[email protected]);
-        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
@@ -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
@@ -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/[email protected]);
-        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
@@ -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
@@ -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
@@ -272,7 +272,7 @@ const QueriesTable = ({
         options={PLATFORM_FILTER_OPTIONS}
         searchable={false}
         onChange={handlePlatformFilterDropdownChange}
-        tableFilterDropdown
+        iconName="filter"
       />
     );
   }, [platform, queryParams, router]);