Disable Add hardware toggle when machines are selected.

ui/src/app/machines/components/HeaderStrip/AddHardwareMenu/AddHardwareMenu.js

@@ -29,7 +29,7 @@ const getAddHardwareLinks = (navigationOptions) => {
     : links;
 };
 
-export const AddHardwareMenu = () => {
+export const AddHardwareMenu = ({ disabled = false }) => {
   const dispatch = useDispatch();
   const navigationOptions = useSelector(generalSelectors.navigationOptions.get);
 
@@ -44,6 +44,7 @@ export const AddHardwareMenu = () => {
       links={getAddHardwareLinks(navigationOptions)}
       position="right"
       toggleAppearance="neutral"
+      toggleDisabled={disabled}
       toggleLabel="Add hardware"
     />
   );

ui/src/app/machines/components/HeaderStrip/AddHardwareMenu/AddHardwareMenu.test.js

@@ -43,4 +43,21 @@ describe("AddHardwareMenu", () => {
         .children
     ).toBe("RSD");
   });
+
+  it("can be disabled", () => {
+    const state = { ...initialState };
+
+    const store = mockStore(state);
+    const wrapper = mount(
+      <Provider store={store}>
+        <MemoryRouter
+          initialEntries={[{ pathname: "/machines", key: "testKey" }]}
+        >
+          <AddHardwareMenu disabled />
+        </MemoryRouter>
+      </Provider>
+    );
+
+    expect(wrapper.find("ContextualMenu").props().toggleDisabled).toBe(true);
+  });
 });

ui/src/app/machines/components/HeaderStrip/HeaderStrip.js

@@ -1,4 +1,5 @@
 import { Button, Col, Loader, Row } from "@canonical/react-components";
+import PropTypes from "prop-types";
 import pluralize from "pluralize";
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -16,6 +17,7 @@ export const HeaderStrip = () => {
   const machines = useSelector(machineSelectors.all);
   const machinesLoaded = useSelector(machineSelectors.loaded);
   const selectedMachines = useSelector(machineSelectors.selected);
+  const hasSelectedMachines = selectedMachines.length > 0;
 
   const [selectedAction, setSelectedAction] = useState();
 
@@ -64,7 +66,7 @@ export const HeaderStrip = () => {
                 {!selectedAction && (
                   <>
                     <li className="p-inline-list__item">
-                      <AddHardwareMenu />
+                      <AddHardwareMenu disabled={hasSelectedMachines} />
                     </li>
                     <li className="p-inline-list__item last-item">
                       <TakeActionMenu setSelectedAction={setSelectedAction} />
@@ -92,4 +94,8 @@ export const HeaderStrip = () => {
   );
 };
 
+HeaderStrip.propTypes = {
+  disabled: PropTypes.bool,
+};
+
 export default HeaderStrip;

ui/src/app/machines/components/HeaderStrip/HeaderStrip.test.js

@@ -159,6 +159,25 @@ describe("HeaderStrip", () => {
     expect(wrapper.find('Button[data-test="add-pool"]').length).toBe(0);
   });
 
+  it("disables the add hardware menu when machines are selected", () => {
+    const state = { ...initialState };
+    state.machine.selected = ["foo"];
+    const store = mockStore(state);
+    const wrapper = mount(
+      <Provider store={store}>
+        <MemoryRouter
+          initialEntries={[{ pathname: "/machines", key: "testKey" }]}
+        >
+          <HeaderStrip selectedMachines={[]} setSelectedMachines={jest.fn()} />
+        </MemoryRouter>
+      </Provider>
+    );
+    expect(
+      wrapper.find('ContextualMenu[data-test="add-hardware-dropdown"]').props()
+        .toggleDisabled
+    ).toBe(true);
+  });
+
   it(`displays add pool button and not hardware dropdown when
     at pools route`, () => {
     const state = { ...initialState };