From d6eeaaa2f992ce8fc088fdda671c4c1bedc10771 Mon Sep 17 00:00:00 2001
From: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
Date: Tue, 14 Jan 2025 10:45:00 -0600
Subject: [PATCH] Hide dropdown filter in software card on "My device" page
 (#25371)

---
 changes/24959-ui-my-device-software-filter     |  2 ++
 .../details/cards/Software/HostSoftware.tsx    |  9 +++++++--
 .../HostSoftwareTable/HostSoftwareTable.tsx    |  6 +++++-
 .../cards/Software/SelfService/SelfService.tsx |  3 ++-
 .../hosts/details/cards/Software/_styles.scss  | 18 ++++++++++++++++++
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 changes/24959-ui-my-device-software-filter

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" : ""}`}
     >
-      <p className="card__header">Software</p>
+      <div className={`card-header`}>Software</div>
+      {isMyDevicePage && (
+        <div className={`card-subheader`}>
+          Software installed on your device.
+        </div>
+      )}
       {renderHostSoftware()}
     </Card>
   );
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 = ({
               ) : (
                 <>
                   <div className={`${baseClass}__items-count`}>
-                    <b>{data.count} items</b>
+                    <b>{`${data.count} ${pluralize(data.count, "item")}`}</b>
                   </div>
                   <div className={`${baseClass}__items`}>
                     {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;
+  }
+}