UI - Update label chooser empty state (#27019)

## 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>

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

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}>

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;