From 2289a6ccd4ed8612f8b40f88263e1230e266a4eb Mon Sep 17 00:00:00 2001
From: Peter Makowski <peter.makowski@canonical.com>
Date: Fri, 24 Nov 2023 12:27:38 +0100
Subject: [PATCH] fix: machine status in the header lp#2044399 (#5221) 3.4
 backport (#5222)

---
 .../MachineHeader/MachineHeader.test.tsx        | 17 ++++++++++++++++-
 .../MachineHeader/MachineHeader.tsx             |  3 ++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.test.tsx b/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.test.tsx
index a8b4c3f2d2..f50e86d476 100644
--- a/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.test.tsx
+++ b/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.test.tsx
@@ -7,7 +7,7 @@ import { MachineHeaderViews } from "app/machines/constants";
 import { actions as machineActions } from "app/store/machine";
 import type { RootState } from "app/store/root/types";
 import { PowerState } from "app/store/types/enum";
-import { NodeActions } from "app/store/types/node";
+import { NodeActions, NodeStatus } from "app/store/types/node";
 import {
   generalState as generalStateFactory,
   machine as machineFactory,
@@ -127,6 +127,21 @@ describe("MachineHeader", () => {
     expect(screen.getByText(/power on/i)).toBeInTheDocument();
   });
 
+  it("displays machine status", () => {
+    state.machine.items[0].status = NodeStatus.DEPLOYED;
+
+    renderWithBrowserRouter(
+      <MachineHeader
+        setSidePanelContent={jest.fn()}
+        sidePanelContent={null}
+        systemId="abc123"
+      />,
+      { state, route: "/machine/abc123" }
+    );
+
+    expect(screen.getByText(/deployed/i)).toBeInTheDocument();
+  });
+
   it("displays power status when checking power", () => {
     state.machine.statuses["abc123"] = machineStatusFactory({
       checkingPower: true,
diff --git a/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.tsx b/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.tsx
index 1884fc63db..b9e24ca050 100644
--- a/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.tsx
+++ b/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.tsx
@@ -105,7 +105,7 @@ const MachineHeader = ({
       subtitle={
         editingName ? null : (
           <div className="u-flex--wrap u-flex--align-center">
-            <div className="u-nudge-left">
+            <div className="u-nudge-left u-nudge-right">
               {machine.locked ? (
                 <TooltipButton
                   aria-label="locked"
@@ -115,6 +115,7 @@ const MachineHeader = ({
                   position="btm-left"
                 />
               ) : null}
+              {machine.status}
             </div>
             <div>
               <PowerIcon