Hide dropdown filter in software card on "My device" page (#25371)

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.

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>
   );

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}

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) => {

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;
+  }
+}