From 5c06543725b4bc77456bcc46009ca452c4d6025a Mon Sep 17 00:00:00 2001 From: nulmete Date: Mon, 30 Mar 2026 11:36:44 -0300 Subject: [PATCH 1/4] use DropdownWrapper for sort dropdown in Host Reports tab --- .../details/HostReportsTab/HostReportsTab.tsx | 36 +++++++++---------- .../hosts/details/HostReportsTab/_styles.scss | 28 ++++++++++++--- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx index 8c30210129a..43400001c14 100644 --- a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx +++ b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx @@ -1,6 +1,7 @@ -import React, { useState, useCallback, useMemo } from "react"; +import React, { useState, useCallback } from "react"; import { useQuery } from "react-query"; import { InjectedRouter } from "react-router"; +import { SingleValue } from "react-select-5"; import PATHS from "router/paths"; import hostReportsAPI, { @@ -15,8 +16,8 @@ import Spinner from "components/Spinner"; import DataError from "components/DataError"; import SearchField from "components/forms/fields/SearchField"; import Slider from "components/forms/fields/Slider"; -import ActionsDropdown from "components/ActionsDropdown"; -import { IDropdownOption } from "interfaces/dropdownOption"; +import DropdownWrapper from "components/forms/fields/DropdownWrapper"; +import { CustomOptionType } from "components/forms/fields/DropdownWrapper/DropdownWrapper"; import Pagination from "components/Pagination"; import HostReportCard from "./HostReportCard"; @@ -34,7 +35,7 @@ type SortOption = const DEFAULT_SORT_OPTION: SortOption = "newest_results"; -const SORT_OPTIONS: IDropdownOption[] = [ +const SORT_OPTIONS: CustomOptionType[] = [ { value: "newest_results", label: "Newest results" }, { value: "oldest_results", label: "Oldest results" }, { value: "name_asc", label: "Name A-Z" }, @@ -142,13 +143,17 @@ const HostReportsTab = ({ ); const onSortChange = useCallback( - (value: string) => { + (newValue: SingleValue) => { + if (!newValue) return; router.replace( getNextLocationPath({ pathPrefix: location.pathname, queryParams: { ...location.query, - sort: value === DEFAULT_SORT_OPTION ? undefined : value, + sort: + newValue.value === DEFAULT_SORT_OPTION + ? undefined + : newValue.value, }, }) ); @@ -184,12 +189,7 @@ const HostReportsTab = ({ [router] ); - const sortDropdownOptions = useMemo(() => { - return SORT_OPTIONS.map((opt) => ({ - ...opt, - label: opt.value === sortOption ? `Sort: ${opt.label}` : opt.label, - })); - }, [sortOption]); + const selectedSortOption = SORT_OPTIONS.find((o) => o.value === sortOption); if (isLoading) { return ; @@ -223,15 +223,13 @@ const HostReportsTab = ({ )}
- o.value === sortOption)?.label ?? "" - }`} + Date: Mon, 30 Mar 2026 12:22:13 -0300 Subject: [PATCH 2/4] copilot comments --- .../pages/hosts/details/HostReportsTab/_styles.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/pages/hosts/details/HostReportsTab/_styles.scss b/frontend/pages/hosts/details/HostReportsTab/_styles.scss index df538dabd76..2f7fcabfe7d 100644 --- a/frontend/pages/hosts/details/HostReportsTab/_styles.scss +++ b/frontend/pages/hosts/details/HostReportsTab/_styles.scss @@ -21,15 +21,15 @@ align-items: center; gap: $pad-small; - &__sort-dropdown { - min-width: 160px; - } - .input-icon-field .input-with-icon { min-width: 300px; } } + &__sort-dropdown { + min-width: 160px; + } + @media screen and (max-width: $break-md) { &__controls { flex-direction: column-reverse; @@ -42,7 +42,7 @@ } &__controls-right .search-field__tooltip-container { - flex: 1 + flex: 1; } } From 1db428f167db401d862ccae31ff2e1aae6368f97 Mon Sep 17 00:00:00 2001 From: nulmete Date: Mon, 30 Mar 2026 13:05:26 -0300 Subject: [PATCH 3/4] remove selectedSortOption --- frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx index 43400001c14..057ae43546f 100644 --- a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx +++ b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx @@ -189,7 +189,6 @@ const HostReportsTab = ({ [router] ); - const selectedSortOption = SORT_OPTIONS.find((o) => o.value === sortOption); if (isLoading) { return ; @@ -226,7 +225,7 @@ const HostReportsTab = ({ Date: Mon, 30 Mar 2026 13:42:30 -0300 Subject: [PATCH 4/4] fix lint --- frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx index 057ae43546f..a2899dad829 100644 --- a/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx +++ b/frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx @@ -189,7 +189,6 @@ const HostReportsTab = ({ [router] ); - if (isLoading) { return ; }