Fleet UI: Improve select targets dropdown (#22348)

fleetdm · Sep 25, 2024 · 18026d5 · 18026d5
1 parent 38ba6cc
commit 18026d5
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 61 deletions.
diff --git a/changes/21276-select-live-query-targets-improvements b/changes/21276-select-live-query-targets-improvements
@@ -0,0 +1 @@
+- UI Improvements to selecting live query targets (e.g. styling, closing behavior)
diff --git a/frontend/components/LiveQuery/SelectTargets.tsx b/frontend/components/LiveQuery/SelectTargets.tsx
@@ -430,17 +430,6 @@ const SelectTargets = ({
     );
   };
 
-  if (isLoadingLabels || (isPremiumTier && isLoadingTeams)) {
-    return (
-      <div className={`${baseClass}__wrapper`}>
-        <h1>Select targets</h1>
-        <div className={`${baseClass}__page-loading`}>
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
   if (errorLabels || errorTeams) {
     return (
       <div className={`${baseClass}__wrapper`}>

diff --git a/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx b/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
 import { Row } from "react-table";
 import { isEmpty, pullAllBy } from "lodash";
 
@@ -9,7 +9,6 @@ import DataError from "components/DataError";
 // @ts-ignore
 import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon/InputFieldWithIcon";
 import TableContainer from "components/TableContainer";
-import Spinner from "components/Spinner";
 import { ITargestInputHostTableConfig } from "./TargetsInputHostsTableConfig";
 
 interface ITargetsInputProps {
@@ -51,12 +50,39 @@ const TargetsInput = ({
   handleRowSelect,
   setSearchText,
 }: ITargetsInputProps): JSX.Element => {
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
   const dropdownHosts =
     searchResults && pullAllBy(searchResults, targetedHosts, "display_name");
-  const isActiveSearch =
-    !isEmpty(searchText) && (!hasFetchError || isTargetsLoading);
+
+  const [isActiveSearch, setIsActiveSearch] = useState(false);
+
   const isSearchError = !isEmpty(searchText) && hasFetchError;
 
+  // Closes target search results when clicking outside of results
+  // But not during API loading state as it will reopen on API return
+  useEffect(() => {
+    if (!isTargetsLoading) {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          dropdownRef.current &&
+          !dropdownRef.current.contains(event.target as Node)
+        ) {
+          setIsActiveSearch(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isTargetsLoading]);
+
+  useEffect(() => {
+    setIsActiveSearch(
+      !isEmpty(searchText) && (!hasFetchError || isTargetsLoading)
+    );
+  }, [searchText, hasFetchError, isTargetsLoading]);
   return (
     <div>
       <div className={baseClass}>
@@ -71,35 +97,35 @@ const TargetsInput = ({
           placeholder={placeholder}
           onChange={setSearchText}
         />
-        {isActiveSearch &&
-          (isTargetsLoading ? (
-            <Spinner />
-          ) : (
-            <div className={`${baseClass}__hosts-search-dropdown`}>
-              <TableContainer<Row<IHost>>
-                columnConfigs={searchResultsTableConfig}
-                data={dropdownHosts}
-                isLoading={false}
-                emptyComponent={() => (
-                  <div className="empty-search">
-                    <div className="empty-search__inner">
-                      <h4>No hosts match the current search criteria.</h4>
-                      <p>
-                        Expecting to see hosts? Try again in a few seconds as
-                        the system catches up.
-                      </p>
-                    </div>
+        {isActiveSearch && (
+          <div
+            className={`${baseClass}__hosts-search-dropdown`}
+            ref={dropdownRef}
+          >
+            <TableContainer<Row<IHost>>
+              columnConfigs={searchResultsTableConfig}
+              data={dropdownHosts}
+              isLoading={isTargetsLoading}
+              emptyComponent={() => (
+                <div className="empty-search">
+                  <div className="empty-search__inner">
+                    <h4>No hosts match the current search criteria.</h4>
+                    <p>
+                      Expecting to see hosts? Try again in a few seconds as the
+                      system catches up.
+                    </p>
                   </div>
-                )}
-                showMarkAllPages={false}
-                isAllPagesSelected={false}
-                disableCount
-                disablePagination
-                disableMultiRowSelect
-                onClickRow={handleRowSelect}
-              />
-            </div>
-          ))}
+                </div>
+              )}
+              showMarkAllPages={false}
+              isAllPagesSelected={false}
+              disableCount
+              disablePagination
+              disableMultiRowSelect
+              onClickRow={handleRowSelect}
+            />
+          </div>
+        )}
         {isSearchError && (
           <div className={`${baseClass}__hosts-search-dropdown`}>
             <DataError />

diff --git a/frontend/components/LiveQuery/TargetsInput/_styles.scss b/frontend/components/LiveQuery/TargetsInput/_styles.scss
@@ -17,10 +17,6 @@
         overflow: auto;
       }
 
-      &__data-table-block > div {
-        min-height: 89px;
-      }
-
       // Properly vertically aligns host issue icon
       .display_name__cell {
         display: inline-flex;
@@ -39,7 +35,7 @@
     }
 
     .empty-search,
-    .error-search {
+    .data-error {
       padding-top: 72px;
       padding-bottom: 72px;
       min-height: 225px;
@@ -48,16 +44,14 @@
       box-shadow: 0px 4px 10px rgba(52, 59, 96, 0.15);
       box-sizing: border-box;
 
-      &__inner {
-        h4 {
-          margin: 0;
-          margin-bottom: 16px;
-          font-size: $small;
-        }
-        p {
-          margin: 0;
-          font-size: $x-small;
-        }
+      h4 {
+        margin: 0;
+        margin-bottom: 16px;
+        font-size: $small;
+      }
+      p {
+        margin: 0;
+        font-size: $x-small;
       }
     }
   }
@@ -99,9 +93,15 @@
     }
   }
 
-  // override the default styles for the spinner.
-  // TODO: set better default styles for the spinner
+  .data-table-block .data-table__no-rows {
+    min-height: 225px; // Match empty and error state
+  }
+
+  .loading-overlay {
+    height: 100%; // Match container height
+  }
+
   .loading-spinner.centered {
-    margin: 1rem auto;
+    margin: auto;
   }
 }