feat(ui): add footer links to machine storage tab

ui/src/app/machines/views/MachineDetails/MachineStorage/MachineStorage.test.tsx

@@ -1,14 +1,17 @@
 import { mount } from "enzyme";
 import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, Route } from "react-router-dom";
 import configureStore from "redux-mock-store";
 import React from "react";
 
+import * as hooks from "app/base/hooks";
 import {
+  machineDetails as machineDetailsFactory,
   machineState as machineStateFactory,
   rootState as rootStateFactory,
 } from "testing/factories";
 import MachineStorage from "./MachineStorage";
+import { act } from "react-dom/test-utils";
 
 const mockStore = configureStore();
 
@@ -31,4 +34,47 @@ describe("MachineStorage", () => {
     );
     expect(wrapper.find("Spinner").exists()).toBe(true);
   });
+
+  it("sends an analytics event when clicking on the MAAS docs footer link", () => {
+    const state = rootStateFactory({
+      machine: machineStateFactory({
+        items: [machineDetailsFactory({ system_id: "abc123" })],
+        loaded: true,
+      }),
+    });
+    const store = mockStore(state);
+    const mockSendAnalytics = jest.fn();
+    const mockUseSendAnalytics = (hooks.useSendAnalytics = jest.fn(
+      () => mockSendAnalytics
+    ));
+    const wrapper = mount(
+      <Provider store={store}>
+        <MemoryRouter
+          initialEntries={[
+            { pathname: "/machine/abc123/storage", key: "testKey" },
+          ]}
+        >
+          <Route
+            exact
+            path="/machine/:id/storage"
+            component={() => <MachineStorage />}
+          />
+        </MemoryRouter>
+      </Provider>
+    );
+
+    act(() => {
+      wrapper.find("[data-test='docs-footer-link']").simulate("click");
+    });
+    wrapper.update();
+
+    expect(mockSendAnalytics).toHaveBeenCalled();
+    expect(mockSendAnalytics.mock.calls[0]).toEqual([
+      "Machine storage",
+      "Click link to MAAS docs",
+      "Windows",
+    ]);
+
+    mockUseSendAnalytics.mockRestore();
+  });
 });

ui/src/app/machines/views/MachineDetails/MachineStorage/MachineStorage.tsx

@@ -1,9 +1,10 @@
 import { Spinner, Strip } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router";
+import { Link } from "react-router-dom";
 import React from "react";
 
-import { useWindowTitle } from "app/base/hooks";
+import { useSendAnalytics, useWindowTitle } from "app/base/hooks";
 import type { RouteParams } from "app/base/types";
 import machineSelectors from "app/store/machine/selectors";
 import type { Disk, Partition } from "app/store/machine/types";
@@ -35,6 +36,7 @@ export const storageDeviceInUse = (
 const MachineStorage = (): JSX.Element => {
   const params = useParams<RouteParams>();
   const { id } = params;
+  const sendAnalytics = useSendAnalytics();
   const machine = useSelector((state: RootState) =>
     machineSelectors.getById(state, id)
   );
@@ -55,6 +57,29 @@ const MachineStorage = (): JSX.Element => {
           <h4>Available disks and partitions</h4>
           <AvailableStorageTable disks={machine.disks} />
         </Strip>
+        <p>
+          Learn more about deploying{" "}
+          <a
+            className="p-link--external"
+            data-test="docs-footer-link"
+            href="https://maas.io/docs/images"
+            onClick={() =>
+              sendAnalytics(
+                "Machine storage",
+                "Click link to MAAS docs",
+                "Windows"
+              )
+            }
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Windows
+          </a>
+        </p>
+        <p>
+          Change the default layout in{" "}
+          <Link to="/settings/storage">Settings &rsaquo; Storage</Link>
+        </p>
       </>
     );
   }