From af9e9591123c96d6d5fa94dec33286000168ce06 Mon Sep 17 00:00:00 2001
From: Alessio Biancalana <alessio.biancalana@suse.com>
Date: Mon, 10 Jun 2024 16:53:49 +0200
Subject: [PATCH] Add header to upgradable packages view (#2685)

---
 .../UpgradablePackagesPage/UpgradablePackagesPage.jsx  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/assets/js/pages/UpgradablePackagesPage/UpgradablePackagesPage.jsx b/assets/js/pages/UpgradablePackagesPage/UpgradablePackagesPage.jsx
index 2b2983d7b4..d104fc303a 100644
--- a/assets/js/pages/UpgradablePackagesPage/UpgradablePackagesPage.jsx
+++ b/assets/js/pages/UpgradablePackagesPage/UpgradablePackagesPage.jsx
@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
+import { get } from 'lodash';
 
+import { getHost } from '@state/selectors/host';
 import { getUpgradablePackages } from '@state/selectors/softwareUpdates';
 import { fetchSoftwareUpdatesSettings } from '@state/softwareUpdatesSettings';
 import {
@@ -9,6 +11,7 @@ import {
   fetchUpgradablePackagesPatches,
 } from '@state/softwareUpdates';
 
+import PageHeader from '@common/PageHeader';
 import BackButton from '@common/BackButton';
 import UpgradablePackagesList from '@common/UpgradablePackagesList';
 
@@ -21,6 +24,10 @@ function UpgradablePackagesPage() {
     dispatch(fetchSoftwareUpdatesSettings());
   }, []);
 
+  const host = useSelector(getHost(hostID));
+
+  const hostname = get(host, 'hostname', '');
+
   const upgradablePackages = useSelector((state) =>
     getUpgradablePackages(state, hostID)
   );
@@ -36,6 +43,9 @@ function UpgradablePackagesPage() {
   return (
     <>
       <BackButton url={`/hosts/${hostID}`}>Back to Host Details</BackButton>
+      <PageHeader>
+        Upgradable packages: <span className="font-bold">{hostname}</span>
+      </PageHeader>
       <UpgradablePackagesList upgradablePackages={upgradablePackages} />
     </>
   );