fix(machines): Increase width of bond and bridge forms in Network tab (…

…#5504) - Increased side panel width for: - "Create bond" form - "Create bridge" form - "Edit bond" form --- Resolves [lp2073575](https://bugs.launchpad.net/maas-ui/+bug/2073575)
canonical · Jul 19, 2024 · 450bbac · 450bbac
1 parent 90df80f
commit 450bbac
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git 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/...ws/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.tsx b/...ws/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: {