diff --git a/changes/24959-ui-my-device-software-filter b/changes/24959-ui-my-device-software-filter new file mode 100644 index 0000000000..c90f510a1d --- /dev/null +++ b/changes/24959-ui-my-device-software-filter @@ -0,0 +1,2 @@ +- Fixed UI bug in "My device" page where the "Software" tab included filter elements that did not + match the expected design. diff --git a/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx b/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx index 1bcd30e514..37c52f296c 100644 --- a/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx +++ b/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx @@ -343,9 +343,14 @@ const HostSoftware = ({ borderRadiusSize="xxlarge" paddingSize="xxlarge" includeShadow - className={baseClass} + className={`${baseClass} ${isMyDevicePage ? "device-software" : ""}`} > -

Software

+
Software
+ {isMyDevicePage && ( +
+ Software installed on your device. +
+ )} {renderHostSoftware()} ); diff --git a/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx b/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx index e9bed373c3..bd8b232abc 100644 --- a/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx +++ b/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx @@ -253,7 +253,11 @@ const HostSoftwareTable = ({ inputPlaceHolder="Search by name" onQueryChange={onQueryChange} emptyComponent={memoizedEmptyComponent} - customControl={showFilterHeaders ? memoizedFilterDropdown : undefined} + customControl={ + !isMyDevicePage && showFilterHeaders + ? memoizedFilterDropdown + : undefined + } showMarkAllPages={false} isAllPagesSelected={false} searchable={showFilterHeaders} diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx index 2a772a8e75..b872197a41 100644 --- a/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx +++ b/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx @@ -9,6 +9,7 @@ import deviceApi, { } from "services/entities/device_user"; import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants"; +import { pluralize } from "utilities/strings/stringUtils"; import Card from "components/Card"; import CustomLink from "components/CustomLink"; @@ -118,7 +119,7 @@ const SoftwareSelfService = ({ ) : ( <>
- {data.count} items + {`${data.count} ${pluralize(data.count, "item")}`}
{data.software.map((s) => { diff --git a/frontend/pages/hosts/details/cards/Software/_styles.scss b/frontend/pages/hosts/details/cards/Software/_styles.scss index 1f028166cb..784a3a8e86 100644 --- a/frontend/pages/hosts/details/cards/Software/_styles.scss +++ b/frontend/pages/hosts/details/cards/Software/_styles.scss @@ -1,4 +1,9 @@ .software-card { + .card-header { + font-weight: $bold; + margin: 0 0 $pad-large 0; + } + .table-container__search-input { width: 325px; // Custom to fit placeholder text } @@ -97,3 +102,16 @@ } } } + +.device-software { + .card-header { + font-weight: $regular; + margin: 0 0 $pad-small 0; + } + + .card-subheader { + margin: 0 0 $pad-large 0; + color: $ui-fleet-black-75; + font-size: $x-small; + } +}