From 7147859de183c106ff7e31beffacfd4452ab4a46 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 28 Sep 2022 15:12:37 +0100
Subject: [PATCH] fix label filter showing under table header and adding no
 custom filter state (#7998)

---
 ...fix-z-index-and-add-no-custom-labels-state |  1 +
 .../CustomLabelGroupHeading.tsx               |  5 +++
 .../components/LabelFilterSelect/_styles.scss |  1 +
 .../components/LabelFilterSelect/constants.ts |  7 +++-
 .../components/LabelFilterSelect/helpers.ts   | 35 +++++++++++++------
 5 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 changes/issue-7917-fix-z-index-and-add-no-custom-labels-state

diff --git a/changes/issue-7917-fix-z-index-and-add-no-custom-labels-state b/changes/issue-7917-fix-z-index-and-add-no-custom-labels-state
new file mode 100644
index 0000000000..51970a5729
--- /dev/null
+++ b/changes/issue-7917-fix-z-index-and-add-no-custom-labels-state
@@ -0,0 +1 @@
+- This fixes the UI bug where the label filter dropdown goes under the table header and add a "no custom labels" state that shows when the user has not created any custom labels yet.
diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
index e634d7331c..242e68f3d8 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
@@ -1,3 +1,8 @@
+/**
+ * This component is a custom UI for a React Select group header.
+ * More can be learnt about React Select custom components here:
+ * https://react-select.com/components
+ */
 import Button from "components/buttons/Button";
 import { ILabel } from "interfaces/label";
 import React, { useRef } from "react";
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
index b5759583b9..853f08dc64 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
@@ -58,6 +58,7 @@
   .label-filter-select__menu {
     width: 300px;
     margin-top: 0;
+    z-index: 2;
   }
 
   .label-filter-select__menu-list {
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/constants.ts b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/constants.ts
index 9376c2a860..904996a55a 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/constants.ts
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/constants.ts
@@ -2,8 +2,13 @@ import linuxIcon from "../../../../../../assets/images/icon-linux-fleet-black-16
 import darwinIcon from "../../../../../../assets/images/icon-darwin-fleet-black-16x16@2x.png";
 import windowsIcon from "../../../../../../assets/images/icon-windows-fleet-black-16x16@2x.png";
 
+export const NO_LABELS_OPTION = {
+  label: "No custom labels",
+  isDisabled: true,
+};
+
 export const EMPTY_OPTION = {
-  label: "No Matching Labels",
+  label: "No matching labels",
   isDisabled: true,
 };
 
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
index e5f78ae550..2cb5ed66d1 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
@@ -1,5 +1,5 @@
 import { ILabel } from "interfaces/label";
-import { EMPTY_OPTION, FILTERED_LINUX } from "./constants";
+import { EMPTY_OPTION, FILTERED_LINUX, NO_LABELS_OPTION } from "./constants";
 
 export interface IEmptyOption {
   label: string;
@@ -24,7 +24,26 @@ const createOptionGroup = (
   };
 };
 
-export const createDropdownOptions = (labels: ILabel[], labelQuery: string) => {
+/** Will create the custom label group options and handles when no labels have been created yet or
+ * will filter by the desired search query */
+const createCustomLabelOptions = (labels: ILabel[], query: string) => {
+  const customLabels = labels.filter((label) => label.label_type === "regular");
+
+  let customLabelGroupOptions: ILabel[] | IEmptyOption[];
+  if (customLabels.length === 0) {
+    customLabelGroupOptions = [NO_LABELS_OPTION];
+  } else {
+    const matchingLabels = customLabels.filter((label) =>
+      label.display_text.toLowerCase().includes(query)
+    );
+    customLabelGroupOptions =
+      matchingLabels.length !== 0 ? matchingLabels : [EMPTY_OPTION];
+  }
+
+  return customLabelGroupOptions;
+};
+
+export const createDropdownOptions = (labels: ILabel[], query: string) => {
   const builtInLabels = labels.filter(
     // we filter out All Hosts as that is included in hosts status dropdown filter
     (label) =>
@@ -32,16 +51,12 @@ export const createDropdownOptions = (labels: ILabel[], labelQuery: string) => {
       label.name !== "All Hosts" &&
       !FILTERED_LINUX.includes(label.name)
   );
-  const customLabels = labels.filter(
-    (label) =>
-      label.label_type === "regular" &&
-      label.display_text.toLowerCase().includes(labelQuery)
-  );
-  const customGroupOptions =
-    customLabels.length !== 0 ? customLabels : [EMPTY_OPTION];
+
+  const customLabels = createCustomLabelOptions(labels, query);
+
   const options: IGroupOption[] = [
     createOptionGroup("platform", "Platforms", builtInLabels),
-    createOptionGroup("custom", "Labels", customGroupOptions),
+    createOptionGroup("custom", "Labels", customLabels),
   ];
   return options;
 };