From 46934a94591e7355fefff6a50bd55e1b4b8d8591 Mon Sep 17 00:00:00 2001
From: Nick De Villiers <nick.devilliers@canonical.com>
Date: Mon, 22 Jul 2024 14:13:12 +0100
Subject: [PATCH] fix(machines): Increase width of bond and bridge forms in
 Network tab 3.5 backport (#5505)

---
 .../NetworkActionRow/NetworkActionRow.tsx     | 14 ++++++----
 .../NetworkTableActions.tsx                   | 27 +++++++++++--------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/app/base/components/NetworkActionRow/NetworkActionRow.tsx b/src/app/base/components/NetworkActionRow/NetworkActionRow.tsx
index 40400ff92f..b6af789a23 100644
--- a/src/app/base/components/NetworkActionRow/NetworkActionRow.tsx
+++ b/src/app/base/components/NetworkActionRow/NetworkActionRow.tsx
@@ -40,7 +40,7 @@ const NetworkActionRow = ({
   setSelected,
 }: Props): JSX.Element | null => {
   const isAllNetworkingDisabled = useIsAllNetworkingDisabled(node);
-  const { setSidePanelContent } = useSidePanel();
+  const { setSidePanelContent, setSidePanelSize } = useSidePanel();
   const { pathname } = useLocation();
   const isMachinesPage = pathname.startsWith("/machine");
 
@@ -63,16 +63,20 @@ const NetworkActionRow = ({
             })
         : () =>
             setSidePanelContent({ view: DeviceSidePanelViews.ADD_INTERFACE }),
-      [ExpandedState.ADD_BOND]: () =>
+      [ExpandedState.ADD_BOND]: () => {
         setSidePanelContent({
           view: MachineSidePanelViews.ADD_BOND,
           extras: { systemId: node.system_id, selected: selected, setSelected },
-        }),
-      [ExpandedState.ADD_BRIDGE]: () =>
+        });
+        setSidePanelSize("large");
+      },
+      [ExpandedState.ADD_BRIDGE]: () => {
         setSidePanelContent({
           view: MachineSidePanelViews.ADD_BRIDGE,
           extras: { systemId: node.system_id, selected: selected, setSelected },
-        }),
+        });
+        setSidePanelSize("large");
+      },
     };
     return expandedStateMap[state]?.();
   };
diff --git a/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.tsx b/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.tsx
index 45ae22d174..b9501afda2 100644
--- a/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.tsx
+++ b/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.tsx
@@ -47,7 +47,7 @@ const NetworkTableActions = ({
   selected,
   setSelected,
 }: Props): JSX.Element | null => {
-  const { setSidePanelContent } = useSidePanel();
+  const { setSidePanelContent, setSidePanelSize } = useSidePanel();
   const machine = useSelector((state: RootState) =>
     machineSelectors.getById(state, systemId)
   );
@@ -149,16 +149,21 @@ const NetworkTableActions = ({
           disabled: item.disabled,
           onClick: () => {
             item.state === ExpandedState.EDIT
-              ? setSidePanelContent({
-                  view: item.view,
-                  extras: {
-                    linkId: link?.id,
-                    nicId: nic?.id,
-                    selected,
-                    setSelected,
-                    systemId: machine.system_id,
-                  },
-                })
+              ? (() => {
+                  setSidePanelContent({
+                    view: item.view,
+                    extras: {
+                      linkId: link?.id,
+                      nicId: nic?.id,
+                      selected,
+                      setSelected,
+                      systemId: machine.system_id,
+                    },
+                  });
+                  if (nic.type === NetworkInterfaceTypes.BOND) {
+                    setSidePanelSize("large");
+                  }
+                })()
               : setSidePanelContent({
                   view: item.view,
                   extras: {