Fix: remove lock and unlock dialog on machine details page (#4970)

Remove dialog when locking/unlocking a machine on details page

src/app/base/components/NodeName/NodeName.test.tsx

@@ -163,6 +163,7 @@ describe("NodeName", () => {
     );
 
     await userEvent.clear(screen.getByRole("textbox", { name: "Hostname" }));
+    await userEvent.tab();
     expect(
       screen.getByText("hostname is a required field")
     ).toBeInTheDocument();

src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.test.tsx

@@ -1,10 +1,13 @@
+import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import MachineHeader from "./MachineHeader";
 
 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 {
   generalState as generalStateFactory,
   machine as machineFactory,
@@ -24,6 +27,7 @@ const mockStore = configureStore<RootState>();
 describe("MachineHeader", () => {
   let state: RootState;
   beforeEach(() => {
+    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("123456");
     state = rootStateFactory({
       machine: machineStateFactory({
         loaded: true,
@@ -37,6 +41,10 @@ describe("MachineHeader", () => {
     });
   });
 
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it("displays a spinner when loading", () => {
     state.machine.items = [];
 
@@ -222,4 +230,37 @@ describe("MachineHeader", () => {
       screen.queryByTestId("section-header-subtitle")
     ).not.toBeInTheDocument();
   });
+
+  it("shouldn't need confirmation before locking a machine", async () => {
+    state.machine.items[0].actions = [NodeActions.LOCK];
+    state.machine.items[0].permissions = ["edit", "delete"];
+    const store = mockStore(state);
+
+    renderWithBrowserRouter(
+      <MachineHeader
+        setSidePanelContent={jest.fn()}
+        sidePanelContent={null}
+        systemId="abc123"
+      />,
+      { store, route: "/machine/abc123" }
+    );
+
+    await userEvent.click(screen.getByRole("switch", { name: /lock/i }));
+
+    expect(
+      screen.queryByRole("complementary", {
+        name: /lock/i,
+      })
+    ).not.toBeInTheDocument();
+    const expectedAction = machineActions.lock(
+      {
+        filter: { id: [state.machine.items[0].system_id] },
+      },
+      "123456"
+    );
+
+    expect(
+      store.getActions().find((action) => action.type === expectedAction.type)
+    ).toStrictEqual(expectedAction);
+  });
 });

src/app/machines/views/MachineDetails/MachineHeader/MachineHeader.tsx

@@ -25,7 +25,10 @@ import { actions as machineActions } from "app/store/machine";
 import machineSelectors from "app/store/machine/selectors";
 import type { Machine } from "app/store/machine/types";
 import { isMachineDetails } from "app/store/machine/utils";
-import { useFetchMachine } from "app/store/machine/utils/hooks";
+import {
+  useFetchMachine,
+  useSelectedMachinesActionsDispatch,
+} from "app/store/machine/utils/hooks";
 import type { RootState } from "app/store/root/types";
 import { ScriptResultStatus } from "app/store/scriptresult/types";
 import { NodeActions } from "app/store/types/node";
@@ -52,10 +55,36 @@ const MachineHeader = ({
   const statuses = useSelector((state: RootState) =>
     machineSelectors.getStatuses(state, systemId)
   );
+  const { dispatch: dispatchForSelectedMachines } =
+    useSelectedMachinesActionsDispatch({
+      selectedMachines: { items: [systemId] },
+    });
   const powerMenuRef = useRef<HTMLSpanElement>(null);
   const isDetails = isMachineDetails(machine);
   useFetchMachine(systemId);
 
+  const handleActionClick = (action: NodeActions) => {
+    sendAnalytics(
+      "Machine details action form",
+      getNodeActionTitle(action),
+      "Open"
+    );
+
+    const isImmediateAction =
+      action === NodeActions.LOCK || action === NodeActions.UNLOCK;
+
+    if (isImmediateAction) {
+      dispatchForSelectedMachines(machineActions[action]);
+    } else {
+      const view = Object.values(MachineHeaderViews).find(
+        ([, actionName]) => actionName === action
+      );
+      if (view) {
+        setSidePanelContent({ view });
+      }
+    }
+  };
+
   if (!machine || !isDetails) {
     return <SectionHeader loading />;
   }
@@ -125,19 +154,7 @@ const MachineHeader = ({
                 isNodeLocked={machine.locked}
                 nodeDisplay="machine"
                 nodes={[machine]}
-                onActionClick={(action) => {
-                  sendAnalytics(
-                    "Machine details action form",
-                    getNodeActionTitle(action),
-                    "Open"
-                  );
-                  const view = Object.values(MachineHeaderViews).find(
-                    ([, actionName]) => actionName === action
-                  );
-                  if (view) {
-                    setSidePanelContent({ view });
-                  }
-                }}
+                onActionClick={handleActionClick}
                 singleNode
               />
             </div>
@@ -151,19 +168,7 @@ const MachineHeader = ({
                 key="action-dropdown"
                 nodeDisplay="machine"
                 nodes={[machine]}
-                onActionClick={(action) => {
-                  sendAnalytics(
-                    "Machine details action form",
-                    getNodeActionTitle(action),
-                    "Open"
-                  );
-                  const view = Object.values(MachineHeaderViews).find(
-                    ([, actionName]) => actionName === action
-                  );
-                  if (view) {
-                    setSidePanelContent({ view });
-                  }
-                }}
+                onActionClick={handleActionClick}
                 toggleAppearance=""
                 toggleClassName="p-action-menu u-no-margin--bottom"
                 toggleLabel="Menu"