From 19c1018eaddd0c2116e659a6af3b76b20c948402 Mon Sep 17 00:00:00 2001 From: RachelElysia Date: Tue, 24 Sep 2024 09:51:35 -0700 Subject: [PATCH 1/2] Fleet UI: Improve select targets dropdown --- ...276-select-live-query-targets-improvements | 1 + .../components/LiveQuery/SelectTargets.tsx | 11 --- .../LiveQuery/TargetsInput/TargetsInput.tsx | 90 ++++++++++++------- .../LiveQuery/TargetsInput/_styles.scss | 38 ++++---- 4 files changed, 80 insertions(+), 60 deletions(-) create mode 100644 changes/21276-select-live-query-targets-improvements diff --git a/changes/21276-select-live-query-targets-improvements b/changes/21276-select-live-query-targets-improvements new file mode 100644 index 000000000000..75b2086beb03 --- /dev/null +++ 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 index ad46545983c0..5302301a08fd 100644 --- a/frontend/components/LiveQuery/SelectTargets.tsx +++ b/frontend/components/LiveQuery/SelectTargets.tsx @@ -430,17 +430,6 @@ const SelectTargets = ({ ); }; - if (isLoadingLabels || (isPremiumTier && isLoadingTeams)) { - return ( -
-

Select targets

-
- -
-
- ); - } - if (errorLabels || errorTeams) { return (
diff --git a/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx b/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx index dcfc2074d8b6..e54830081ed1 100644 --- 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(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 (
@@ -71,35 +97,35 @@ const TargetsInput = ({ placeholder={placeholder} onChange={setSearchText} /> - {isActiveSearch && - (isTargetsLoading ? ( - - ) : ( -
- > - columnConfigs={searchResultsTableConfig} - data={dropdownHosts} - isLoading={false} - emptyComponent={() => ( -
-
-

No hosts match the current search criteria.

-

- Expecting to see hosts? Try again in a few seconds as - the system catches up. -

-
+ {isActiveSearch && ( +
+ > + columnConfigs={searchResultsTableConfig} + data={dropdownHosts} + isLoading={isTargetsLoading} + emptyComponent={() => ( +
+
+

No hosts match the current search criteria.

+

+ Expecting to see hosts? Try again in a few seconds as the + system catches up. +

- )} - showMarkAllPages={false} - isAllPagesSelected={false} - disableCount - disablePagination - disableMultiRowSelect - onClickRow={handleRowSelect} - /> -
- ))} +
+ )} + showMarkAllPages={false} + isAllPagesSelected={false} + disableCount + disablePagination + disableMultiRowSelect + onClickRow={handleRowSelect} + /> +
+ )} {isSearchError && (
diff --git a/frontend/components/LiveQuery/TargetsInput/_styles.scss b/frontend/components/LiveQuery/TargetsInput/_styles.scss index e219d2660d18..ce68f083fa1e 100644 --- a/frontend/components/LiveQuery/TargetsInput/_styles.scss +++ b/frontend/components/LiveQuery/TargetsInput/_styles.scss @@ -17,9 +17,9 @@ overflow: auto; } - &__data-table-block > div { - min-height: 89px; - } + // &__data-table-block > div { + // min-height: 89px; + // } // Properly vertically aligns host issue icon .display_name__cell { @@ -39,7 +39,7 @@ } .empty-search, - .error-search { + .data-error { padding-top: 72px; padding-bottom: 72px; min-height: 225px; @@ -48,16 +48,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 +97,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; } } From 2d1fb932c6a8e26ed32e0fc08c55e1fb4f0a8b5e Mon Sep 17 00:00:00 2001 From: RachelElysia Date: Wed, 25 Sep 2024 09:08:33 -0700 Subject: [PATCH 2/2] Remove unused code --- frontend/components/LiveQuery/TargetsInput/_styles.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/components/LiveQuery/TargetsInput/_styles.scss b/frontend/components/LiveQuery/TargetsInput/_styles.scss index ce68f083fa1e..a3fac64150b3 100644 --- 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;