Skip to content

use DropdownWrapper for sort dropdown in Host Reports tab #42650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nulmete merged 4 commits into from
Mar 31, 2026
Merged

use DropdownWrapper for sort dropdown in Host Reports tab #42650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5c06543
use DropdownWrapper for sort dropdown in Host Reports tab
nulmete Mar 30, 2026
737601b
copilot comments
nulmete Mar 30, 2026
1db428f
remove selectedSortOption
nulmete Mar 30, 2026
76b6ecc
fix lint
nulmete Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 16 additions & 20 deletions frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, {
Expand All @@ -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";
Expand All @@ -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" },
Expand Down Expand Up @@ -142,13 +143,17 @@ const HostReportsTab = ({
);

const onSortChange = useCallback(
(value: string) => {
(newValue: SingleValue<CustomOptionType>) => {
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,
},
})
);
Expand Down Expand Up @@ -184,13 +189,6 @@ const HostReportsTab = ({
[router]
);

const sortDropdownOptions = useMemo(() => {
return SORT_OPTIONS.map((opt) => ({
...opt,
label: opt.value === sortOption ? `Sort: ${opt.label}` : opt.label,
}));
}, [sortOption]);

if (isLoading) {
return <Spinner />;
}
Expand Down Expand Up @@ -223,15 +221,13 @@ const HostReportsTab = ({
)}
</div>
<div className={`${baseClass}__controls-right`}>
<ActionsDropdown
options={sortDropdownOptions}
placeholder={`Sort: ${
SORT_OPTIONS.find((o) => o.value === sortOption)?.label ?? ""
}`}
<DropdownWrapper
name="sort-reports"
options={SORT_OPTIONS}
value={sortOption}
onChange={onSortChange}
className={`${baseClass}__sort-dropdown`}
variant="button"
menuAlign="right"
variant="table-filter"
/>
<SearchField
placeholder="Search by name"
Expand Down
28 changes: 24 additions & 4 deletions frontend/pages/hosts/details/HostReportsTab/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,30 @@
display: flex;
align-items: center;
gap: $pad-small;

.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;
Copy link
Copy Markdown
Member Author

@nulmete nulmete Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

saw that in the Host list page we put the filters above the host count, so tried to follow a similar pattern

Image

align-items: stretch;
gap: $pad-smedium;
}

&__controls-right &__sort-dropdown {
width: auto;
}

&__controls-right .search-field__tooltip-container {
flex: 1;
}
}

&__count {
Expand All @@ -33,10 +57,6 @@
width: auto;
}

&__sort-dropdown {
min-width: 160px;
}

&__reports-list {
display: flex;
flex-direction: column;
Expand Down
Loading