fix: machine status in the header lp#2044399 (#5221)

canonical · Nov 24, 2023 · da8d558 · da8d558
1 parent 3031600
commit da8d558
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.test.tsx b/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.test.tsx
@@ -6,7 +6,7 @@ import MachineHeader from "./MachineHeader";
 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, NodeStatusCode } from "app/store/types/node";
+import { NodeActions, NodeStatus, NodeStatusCode } from "app/store/types/node";
 import {
   generalState as generalStateFactory,
   machine as machineFactory,
@@ -84,15 +84,29 @@ describe("MachineHeader", () => {
     );
   });
 
-  it("displays power status", () => {
-    state.machine.items[0].power_state = PowerState.ON;
+  it("displays an icon when locked", () => {
+    state.machine.items[0].locked = true;
+
+    renderWithBrowserRouter(
+      <MachineHeader setSidePanelContent={jest.fn()} systemId="abc123" />,
+      { state, route: "/machine/abc123" }
+    );
+
+    expect(screen.getByRole("button", { name: /locked/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /locked/i })).toHaveClass(
+      "has-icon"
+    );
+  });
+
+  it("displays machine status", () => {
+    state.machine.items[0].status = NodeStatus.DEPLOYED;
 
     renderWithBrowserRouter(
       <MachineHeader setSidePanelContent={jest.fn()} systemId="abc123" />,
       { state, route: "/machine/abc123" }
     );
 
-    expect(screen.getByText(/power on/i)).toBeInTheDocument();
+    expect(screen.getByText(/deployed/i)).toBeInTheDocument();
   });
 
   it("displays power status when checking power", () => {

diff --git a/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.tsx b/src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.tsx
@@ -92,7 +92,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"
@@ -102,6 +102,7 @@ const MachineHeader = ({
                   position="btm-left"
                 />
               ) : null}
+              {machine.status}
             </div>
             <div>
               <PowerIcon