Fleet UI: Hide redundant built in label filtering (#22308)

fleetdm · Sep 24, 2024 · 31ac408 · 31ac408
1 parent 57abc0f
commit 31ac408
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/changes/21343-hide-redundant-built-in-label-pills b/changes/21343-hide-redundant-built-in-label-pills
@@ -0,0 +1 @@
+- UI: Remove redundant built in label filter pills
diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx
@@ -24,6 +24,7 @@ import {
 
 import {
   PLATFORM_LABEL_DISPLAY_NAMES,
+  PLATFORM_TYPE_ICONS,
   isPlatformLabelNameFromAPI,
   PolicyResponse,
 } from "utilities/constants";
@@ -41,6 +42,8 @@ import BootstrapPackageStatusFilter from "../BootstrapPackageStatusFilter/Bootst
 
 const baseClass = "hosts-filter-block";
 
+type PlatformLabelNameFromAPI = keyof typeof PLATFORM_TYPE_ICONS;
+
 interface IHostsFilterBlockProps {
   /**
    * An object of params the the HostFilterBlock uses to render the correct
@@ -145,6 +148,16 @@ const HostsFilterBlock = ({
           PLATFORM_LABEL_DISPLAY_NAMES[display_text]) ||
         display_text;
 
+      // Hide built-in labels supported in label dropdown
+      if (
+        label_type === "builtin" &&
+        Object.keys(PLATFORM_TYPE_ICONS).includes(
+          display_text as PlatformLabelNameFromAPI
+        )
+      ) {
+        return <></>;
+      }
+
       return (
         <>
           <FilterPill

diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
@@ -158,7 +158,7 @@
     min-width: 220px;
 
     &__single-value {
-      max-width: 135px !important; // Must override default styling of .css-qc6sy-singleValue
+      max-width: 210px !important; // Must override default styling of .css-qc6sy-singleValue
     }
   }
 }