feat: move machine details forms to side panel

- Mark connected - Edit Physical - Add VLAN - Remove Physical
canonical · Mar 11, 2024 · 429d10f · 429d10f
1 parent 8cca26c
commit 429d10f
Show file tree

Hide file tree

Showing 23 changed files with 626 additions and 279 deletions.
diff --git a/src/app/base/components/ModelActionForm/ModelActionForm.tsx b/src/app/base/components/ModelActionForm/ModelActionForm.tsx
@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 import { Col, Row } from "@canonical/react-components";
 
 import type { Props as FormikFormProps } from "@/app/base/components/FormikForm/FormikForm";
@@ -6,7 +8,7 @@ import type { EmptyObject } from "@/app/base/types";
 
 type Props = {
   modelType: string;
-  message?: string;
+  message?: ReactNode;
 } & FormikFormProps<EmptyObject>;
 
 const ModelActionForm = ({
@@ -27,9 +29,14 @@ const ModelActionForm = ({
       <Row>
         <Col size={12}>
           <p className="u-nudge-down--small">
-            {message
-              ? message
-              : `Are you sure you want to delete this ${modelType}? This action is permanent and can not be undone.`}
+            {message ? (
+              message
+            ) : (
+              <>
+                Are you sure you want to delete this {modelType}? This action is
+                permanent and can not be undone.
+              </>
+            )}
           </p>
         </Col>
       </Row>

diff --git a/src/app/base/components/node/networking/NetworkTable/NetworkTable.test.tsx b/src/app/base/components/node/networking/NetworkTable/NetworkTable.test.tsx
@@ -1,6 +1,5 @@
 import NetworkTable, { Label } from "./NetworkTable";
 
-import { ExpandedState } from "@/app/base/components/NodeNetworkTab/NodeNetworkTab";
 import { Label as PXEColumnLabel } from "@/app/base/components/node/networking/NetworkTable/PXEColumn/PXEColumn";
 import { Label as NetworkTableActionsLabel } from "@/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions";
 import type { MachineDetails } from "@/app/store/machine/types";
@@ -77,7 +76,6 @@ describe("NetworkTable", () => {
     state.machine.items = [machine];
     renderWithBrowserRouter(
       <NetworkTable
-        expanded={null}
         node={machine}
         selected={[]}
         setExpanded={vi.fn()}
@@ -119,7 +117,6 @@ describe("NetworkTable", () => {
     state.machine.items = [machine];
     renderWithBrowserRouter(
       <NetworkTable
-        expanded={null}
         node={machine}
         selected={[]}
         setExpanded={vi.fn()}
@@ -144,7 +141,6 @@ describe("NetworkTable", () => {
 
     renderWithBrowserRouter(
       <NetworkTable
-        expanded={null}
         node={machine}
         selected={[]}
         setExpanded={vi.fn()}
@@ -190,7 +186,6 @@ describe("NetworkTable", () => {
     state.machine.items = [machine];
     renderWithBrowserRouter(
       <NetworkTable
-        expanded={null}
         node={machine}
         selected={[]}
         setExpanded={vi.fn()}
@@ -211,61 +206,6 @@ describe("NetworkTable", () => {
     expect(within(ipPrimary).getByText("1.2.3.101")).toBeInTheDocument();
   });
 
-  it("expands a row when a matching link is found", () => {
-    machine = machineDetailsFactory({
-      interfaces: [
-        machineInterfaceFactory({
-          discovered: null,
-          links: [networkLinkFactory(), networkLinkFactory({ id: 2 })],
-          name: "alias",
-          type: NetworkInterfaceTypes.ALIAS,
-        }),
-      ],
-      system_id: "abc123",
-    });
-    state.machine.items = [machine];
-    renderWithBrowserRouter(
-      <NetworkTable
-        expanded={{ content: ExpandedState.REMOVE, linkId: 2 }}
-        node={machine}
-        selected={[]}
-        setExpanded={vi.fn()}
-        setSelected={vi.fn()}
-      />,
-      { state }
-    );
-    const alias = screen.getByTestId("alias:1");
-    expect(alias.className.includes("is-active")).toBe(true);
-  });
-
-  it("expands a row when a matching nic is found", () => {
-    machine = machineDetailsFactory({
-      interfaces: [
-        machineInterfaceFactory({
-          id: 2,
-          discovered: null,
-          links: [],
-          name: "eth0",
-          type: NetworkInterfaceTypes.PHYSICAL,
-        }),
-      ],
-      system_id: "abc123",
-    });
-    state.machine.items = [machine];
-    renderWithBrowserRouter(
-      <NetworkTable
-        expanded={{ content: ExpandedState.REMOVE, nicId: 2 }}
-        node={machine}
-        selected={[]}
-        setExpanded={vi.fn()}
-        setSelected={vi.fn()}
-      />,
-      { state }
-    );
-    const alias = screen.getByTestId("eth0");
-    expect(alias.className.includes("is-active")).toBe(true);
-  });
-
   it("displays actions", () => {
     machine = machineDetailsFactory({
       interfaces: [
@@ -294,7 +234,6 @@ describe("NetworkTable", () => {
     state.machine.items = [machine];
     renderWithBrowserRouter(
       <NetworkTable
-        expanded={null}
         node={machine}
         selected={[]}
         setExpanded={vi.fn()}
@@ -398,7 +337,6 @@ describe("NetworkTable", () => {
     it("does not display a checkbox for parent interfaces", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -418,7 +356,6 @@ describe("NetworkTable", () => {
       const setSelected = vi.fn();
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -439,7 +376,6 @@ describe("NetworkTable", () => {
     it("does not display a boot icon for parent interfaces", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -456,7 +392,6 @@ describe("NetworkTable", () => {
     it("does not display a fabric column for parent interfaces", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -475,7 +410,6 @@ describe("NetworkTable", () => {
     it("does not display a DHCP column for parent interfaces", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -494,7 +428,6 @@ describe("NetworkTable", () => {
     it("does not display a subnet column for parent interfaces", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -513,7 +446,6 @@ describe("NetworkTable", () => {
     it("does not display an IP column for parent interfaces", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -532,7 +464,6 @@ describe("NetworkTable", () => {
     it("does not display an actions menu for parent interfaces", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -597,7 +528,6 @@ describe("NetworkTable", () => {
     it("groups the bonds and bridges", () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}
@@ -628,7 +558,6 @@ describe("NetworkTable", () => {
     it("groups the bonds and bridges when in reverse order", async () => {
       renderWithBrowserRouter(
         <NetworkTable
-          expanded={null}
           node={machine}
           selected={[]}
           setExpanded={vi.fn()}

diff --git a/src/app/base/components/node/networking/NetworkTable/NetworkTable.tsx b/src/app/base/components/node/networking/NetworkTable/NetworkTable.tsx
@@ -30,7 +30,6 @@ import {
 import type { Sort } from "@/app/base/types";
 import { SortDirection } from "@/app/base/types";
 import NetworkTableActions from "@/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions";
-import NetworkTableConfirmation from "@/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableConfirmation";
 import type { ControllerDetails } from "@/app/store/controller/types";
 import { actions as fabricActions } from "@/app/store/fabric";
 import fabricSelectors from "@/app/store/fabric/selectors";
@@ -119,8 +118,8 @@ const generateRow = (
   vlans: VLAN[],
   vlansLoaded: boolean,
   hasActions: boolean,
-  setExpanded?: SetExpanded,
-  expanded?: Expanded | null
+  setSelected: Props["setSelected"],
+  setExpanded?: SetExpanded
 ): NetworkRow | null => {
   if (link && !nic) {
     [nic] = getLinkInterface(node, link);
@@ -148,10 +147,6 @@ const generateRow = (
     nic,
     link
   );
-  const isExpanded =
-    !!expanded &&
-    ((link && expanded.linkId === link.id) ||
-      (!link && expanded.nicId === nic?.id));
   const showCheckbox = !isABondOrBridgeParent && hasActions;
   const select = showCheckbox
     ? {
@@ -162,7 +157,6 @@ const generateRow = (
   return {
     className: classNames("p-table__row", {
       "truncated-border": isABondOrBridgeParent,
-      "is-active": isExpanded,
     }),
     columns: [
       {
@@ -231,7 +225,8 @@ const generateRow = (
                   <NetworkTableActions
                     link={link}
                     nic={nic}
-                    setExpanded={setExpanded}
+                    selected={selected}
+                    setSelected={setSelected}
                     systemId={node.system_id}
                   />
                 ) : null,
@@ -240,17 +235,6 @@ const generateRow = (
         : []),
     ],
     "data-testid": name,
-    expanded: isExpanded,
-    expandedContent:
-      hasActions && isExpanded && nodeIsMachine(node) && setExpanded ? (
-        <NetworkTableConfirmation
-          expanded={expanded}
-          link={link}
-          nic={nic}
-          setExpanded={setExpanded}
-          systemId={node.system_id}
-        />
-      ) : null,
     key: name,
     select,
     sortData: {
@@ -283,8 +267,8 @@ const generateRows = (
   vlans: VLAN[],
   vlansLoaded: boolean,
   hasActions: boolean,
-  setExpanded?: (expanded: Expanded | null) => void,
-  expanded?: Expanded | null
+  setSelected: Props["setSelected"],
+  setExpanded?: (expanded: Expanded | null) => void
 ): NetworkRow[] => {
   const rows: NetworkRow[] = [];
   // Create a list of interfaces and aliases to use to generate the table rows.
@@ -306,8 +290,8 @@ const generateRows = (
         vlans,
         vlansLoaded,
         hasActions,
-        setExpanded,
-        expanded
+        setSelected,
+        setExpanded
       );
     if (nic.links.length === 0) {
       const row = createRow(null, nic);
@@ -416,14 +400,12 @@ type BaseProps = {
 };
 
 type ActionProps = BaseProps & {
-  expanded?: Expanded | null;
   selected?: Selected[];
   setExpanded?: SetExpanded;
   setSelected?: SetSelected;
 };
 
 type WithoutActionProps = BaseProps & {
-  expanded?: never;
   selected?: never;
   setExpanded?: never;
   setSelected?: never;
@@ -432,7 +414,6 @@ type WithoutActionProps = BaseProps & {
 type Props = ActionProps | WithoutActionProps;
 
 const NetworkTable = ({
-  expanded,
   node,
   selected,
   setExpanded,
@@ -477,8 +458,8 @@ const NetworkTable = ({
     vlans,
     vlansLoaded,
     hasActions,
-    setExpanded,
-    expanded
+    setSelected,
+    setExpanded
   );
   const sortedRows = sortRows(rows);
   // Generate a list of ids for interfaces that have checkboxes.