From 25a383506758cf31dae32e32026f0adcec5006f0 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 11 Mar 2025 09:37:23 -0700
Subject: [PATCH] UI - Update label chooser empty state (#27019)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## For #23830

No labels state –> label present state in 4 places:


![ezgif-38e21421995afd](https://github.com/user-attachments/assets/d71c6a41-ab13-45b1-b6a1-ec1de14fad96)

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 .../23830-update-label-chooser-empty-state    |  1 +
 .../TargetLabelSelector.tsx                   | 66 +++++++++----------
 .../TargetLabelSelector/_styles.scss          | 13 ----
 3 files changed, 32 insertions(+), 48 deletions(-)
 create mode 100644 changes/23830-update-label-chooser-empty-state

diff --git a/changes/23830-update-label-chooser-empty-state b/changes/23830-update-label-chooser-empty-state
new file mode 100644
index 0000000000..1c9fcceb5a
--- /dev/null
+++ b/changes/23830-update-label-chooser-empty-state
@@ -0,0 +1 @@
+* Update the empty states when choosing a label scope for new software, queries, and profiles
\ No newline at end of file
diff --git a/frontend/components/TargetLabelSelector/TargetLabelSelector.tsx b/frontend/components/TargetLabelSelector/TargetLabelSelector.tsx
index bd660cdb9b..ab75cc86c9 100644
--- a/frontend/components/TargetLabelSelector/TargetLabelSelector.tsx
+++ b/frontend/components/TargetLabelSelector/TargetLabelSelector.tsx
@@ -98,41 +98,22 @@ const LabelChooser = ({
       ?.helpText;
   };
 
-  const renderLabels = () => {
-    if (isLoading) {
-      return <Spinner centered={false} />;
-    }
+  if (isLoading) {
+    return <Spinner centered={false} />;
+  }
 
-    if (isError) {
-      return <DataError />;
-    }
+  if (isError) {
+    return <DataError />;
+  }
 
-    if (!labels.length) {
-      return (
-        <div className={`${baseClass}__no-labels`}>
-          <span>
-            <Link to={PATHS.LABEL_NEW_DYNAMIC}>Add labels</Link> to target
-            specific hosts.
-          </span>
-        </div>
-      );
-    }
-
-    return labels.map((label) => {
-      return (
-        <div className={`${baseClass}__label`} key={label.name}>
-          <Checkbox
-            className={`${baseClass}__checkbox`}
-            name={label.name}
-            value={!!selectedLabels[label.name]}
-            onChange={onSelectLabel}
-            parseTarget
-          />
-          <div className={`${baseClass}__label-name`}>{label.name}</div>
-        </div>
-      );
-    });
-  };
+  if (!labels.length) {
+    return (
+      <div className={`${baseClass}__no-labels`}>
+        <Link to={PATHS.LABEL_NEW_DYNAMIC}>Add label</Link> to target specific
+        hosts.
+      </div>
+    );
+  }
 
   return (
     <div className={`${baseClass}__custom-label-chooser`}>
@@ -145,7 +126,22 @@ const LabelChooser = ({
       <div className={`${baseClass}__description`}>
         {getHelpText(selectedCustomTarget)}
       </div>
-      <div className={`${baseClass}__checkboxes`}>{renderLabels()}</div>
+      <div className={`${baseClass}__checkboxes`}>
+        {labels.map((label) => {
+          return (
+            <div className={`${baseClass}__label`} key={label.name}>
+              <Checkbox
+                className={`${baseClass}__checkbox`}
+                name={label.name}
+                value={!!selectedLabels[label.name]}
+                onChange={onSelectLabel}
+                parseTarget
+              />
+              <div className={`${baseClass}__label-name`}>{label.name}</div>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };
@@ -182,7 +178,7 @@ const TargetLabelSelector = ({
   onSelectCustomTarget,
   onSelectLabel,
 }: ITargetLabelSelectorProps) => {
-  const classNames = classnames(baseClass, className);
+  const classNames = classnames(baseClass, className, "form");
 
   return (
     <div className={classNames}>
diff --git a/frontend/components/TargetLabelSelector/_styles.scss b/frontend/components/TargetLabelSelector/_styles.scss
index 86897f2feb..0388dbb3dd 100644
--- a/frontend/components/TargetLabelSelector/_styles.scss
+++ b/frontend/components/TargetLabelSelector/_styles.scss
@@ -10,19 +10,6 @@
     margin: $pad-medium 0;
   }
 
-  &__no-labels {
-    display: flex;
-    height: 187px;
-    flex-direction: column;
-    align-items: center;
-    gap: $pad-small;
-    justify-content: center;
-
-    span {
-      color: $ui-fleet-black-75;
-    }
-  }
-
   &__checkboxes {
     display: flex;
     max-height: 187px;