feat: [WD-32423] Add ACL default action for Instance NICs (#1772)

## Done
Add ACL default action for Instance NICs
~~Currently NON-FUNCTIONAL~~

- [x] Show ACL default action selector in Instance NIC side panel
- [x] Be able to edit default action selector (DAS)
- [x] Be able to display accurate values in DAS
- [x] Show read-only DAS accurately
- [x] Disable DAS for non-OVN networks (but still fetch data on bridge
networks)

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask @Kxiru
or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](https://github.com/canonical/lxd-ui/blob/main/CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
    - Create an OVN network X
- Create an ACL for OVN network rejecting everything and assign to OVN
network
    - Create an instance and add custom network X to it.
- Edit the custom network to have ACL default values that are NOT the
same as those assigned to the network, such as Allow.
- Save, and verify that the changes are reflected in the Read-Only and
the YAML configuration.

## Screenshots

<img width="1623" height="1021" alt="image"
src="https://github.com/user-attachments/assets/69d2142e-8c54-4b2a-b6d8-3313232265db"
/>

Author: Kxiru

src/components/forms/NetworkDevicesForm/edit/NetworkDevicePanel.tsx

@@ -32,8 +32,12 @@ import {
   supportsNicDeviceAcls,
   getNetworkAcls,
   combineAcls,
+  ovnType,
 } from "util/networks";
 import usePanelParams, { panels } from "util/usePanelParams";
+import NetworkDefaultACLSelector, {
+  type Direction,
+} from "pages/networks/forms/NetworkDefaultACLSelector";
 import type { InstanceAndProfileFormikProps } from "types/forms/instanceAndProfileFormProps";
 import type { NetworkDeviceFormValues } from "types/forms/networkDevice";
 
@@ -161,6 +165,10 @@ const NetworkDevicePanel: FC<Props> = ({
       acls: combinedAcls,
       ipv4: device?.["ipv4.address"] || "",
       ipv6: device?.["ipv6.address"] || "",
+      security_acls_default_egress_action:
+        device?.["security.acls.default.egress.action"] || "",
+      security_acls_default_ingress_action:
+        device?.["security.acls.default.ingress.action"] || "",
     };
   };
 
@@ -185,6 +193,10 @@ const NetworkDevicePanel: FC<Props> = ({
           userSelectedAcls.length > 0 ? userSelectedAcls.join(",") : undefined,
         "ipv4.address": values.ipv4 || undefined,
         "ipv6.address": values.ipv6 || undefined,
+        "security.acls.default.egress.action":
+          values.security_acls_default_egress_action || undefined,
+        "security.acls.default.ingress.action":
+          values.security_acls_default_ingress_action || undefined,
       };
 
       const originalDeviceName = deviceName;
@@ -265,6 +277,25 @@ const NetworkDevicePanel: FC<Props> = ({
     );
   }
 
+  const getDefaultEgressIngress = () => {
+    // Return NIC device default egress/ingress actions if set, fallback to network defaults if not, or rejected if neither are set
+    return {
+      Egress:
+        formik.values.security_acls_default_egress_action ??
+        selectedNetwork?.config["security.acls.default.egress.action"] ??
+        "",
+      Ingress:
+        formik.values.security_acls_default_ingress_action ??
+        selectedNetwork?.config["security.acls.default.ingress.action"] ??
+        "",
+    };
+  };
+
+  const directionField: Record<Direction, string> = {
+    Egress: "security_acls_default_egress_action",
+    Ingress: "security_acls_default_ingress_action",
+  };
+
   return (
     <SidePanel>
       <SidePanel.Header>
@@ -306,18 +337,6 @@ const NetworkDevicePanel: FC<Props> = ({
               error={formik.touched.network ? formik.errors.network : undefined}
             />
 
-            <NetworkAclSelector
-              project={project}
-              selectedAcls={selectedAcls}
-              setSelectedAcls={(selectedItems) => {
-                void formik.setFieldValue("acls", selectedItems.join(","));
-              }}
-              inheritedAcls={networkAcls}
-              canSelectManualAcls={supportsNicDeviceAcls(selectedNetwork)}
-              help={getAclHelperText()}
-              label="ACLs"
-            />
-
             {isInstance && selectedNetwork && (
               <>
                 <NetworkDeviceIPAddressEdit
@@ -332,6 +351,30 @@ const NetworkDevicePanel: FC<Props> = ({
                 />
               </>
             )}
+
+            <NetworkAclSelector
+              project={project}
+              selectedAcls={selectedAcls}
+              setSelectedAcls={(selectedItems) => {
+                void formik.setFieldValue("acls", selectedItems.join(","));
+              }}
+              inheritedAcls={networkAcls}
+              canSelectManualAcls={supportsNicDeviceAcls(selectedNetwork)}
+              help={getAclHelperText()}
+              label="ACLs"
+            />
+
+            <NetworkDefaultACLSelector
+              onChange={(fieldValue, value) => {
+                void formik.setFieldValue(fieldValue, value);
+              }}
+              values={getDefaultEgressIngress()}
+              disabled={
+                formik.values.acls?.length === 0 ||
+                selectedNetwork?.type !== ovnType
+              }
+              directionField={directionField}
+            />
           </Form>
         </ScrollableContainer>
       </SidePanel.Content>

src/components/forms/NetworkDevicesForm/read/NetworkDeviceRows.tsx

@@ -13,6 +13,7 @@ import { combineAcls, getNetworkAcls } from "util/networks";
 import { getDeviceAcls } from "util/devices";
 import NetworkRichChip from "pages/networks/NetworkRichChip";
 import { ROOT_PATH } from "util/rootPath";
+import NetworkDefaultACLRead from "pages/networks/forms/NetworkDefaultACLRead";
 
 const getNetworkDeviceIpAddress = ({
   network,
@@ -86,9 +87,9 @@ export const getNetworkDeviceRows = ({
   if (device.type === "custom-nic") {
     rows.push(
       getConfigurationRowBase({
-        className: "no-border-top",
+        className: "no-border-top device-last-row",
         configuration: (
-          <span
+          <div
             className={classnames({
               "u-text--line-through": isDetached,
             })}
@@ -97,7 +98,7 @@ export const getNetworkDeviceRows = ({
             <Tooltip message="A custom network can be viewed and edited only from the YAML configuration">
               <Icon name="information" />
             </Tooltip>
-          </span>
+          </div>
         ),
         inherited: null,
         override: null,
@@ -129,34 +130,6 @@ export const getNetworkDeviceRows = ({
     );
 
     const acls = combineAcls(getNetworkAcls(network), getDeviceAcls(device));
-    if (acls.length > 0) {
-      rows.push(
-        getConfigurationRowBase({
-          className: classnames("no-border-top", {
-            "device-last-row": !showIpAddresses,
-          }),
-          configuration: <div className="u-text--muted">ACLs</div>,
-          inherited: (
-            <div>
-              <ExpandableList
-                items={acls.map((acl) => (
-                  <ResourceLink
-                    key={acl}
-                    type="network-acl"
-                    value={acl}
-                    to={`${ROOT_PATH}/ui/project/${encodeURIComponent(project || "default")}/network-acl/${encodeURIComponent(acl)}`}
-                    className={classnames("acl-chip", {
-                      "u-text--line-through": isDetached,
-                    })}
-                  />
-                ))}
-              />
-            </div>
-          ),
-          override: null,
-        }),
-      );
-    }
 
     if (showIpAddresses) {
       const families = ["IPv4", "IPv6"] as const;
@@ -171,7 +144,8 @@ export const getNetworkDeviceRows = ({
         rows.push(
           getConfigurationRowBase({
             className: classnames("no-border-top", {
-              "device-last-row": index === activeIps.length - 1,
+              "device-last-row":
+                acls.length === 0 && index === activeIps.length - 1,
             }),
             configuration: <div className="u-text--muted">{family}</div>,
             inherited: (
@@ -190,6 +164,63 @@ export const getNetworkDeviceRows = ({
         );
       });
     }
+
+    if (acls.length > 0) {
+      rows.push(
+        getConfigurationRowBase({
+          className: "no-border-top",
+          configuration: <div className="u-text--muted">ACLs</div>,
+          inherited: (
+            <div>
+              <ExpandableList
+                items={acls.map((acl) => (
+                  <ResourceLink
+                    key={acl}
+                    type="network-acl"
+                    value={acl}
+                    to={`${ROOT_PATH}/ui/project/${encodeURIComponent(project || "default")}/network-acl/${encodeURIComponent(acl)}`}
+                    className={classnames("acl-chip", {
+                      "u-text--line-through": isDetached,
+                    })}
+                  />
+                ))}
+              />
+            </div>
+          ),
+          override: null,
+        }),
+      );
+    }
+
+    if (acls.length > 0) {
+      const getDefaultEgressIngress = () => {
+        return {
+          Egress:
+            device["security.acls.default.egress.action"] ??
+            network.config["security.acls.default.egress.action"] ??
+            "",
+          Ingress:
+            device["security.acls.default.ingress.action"] ??
+            network.config["security.acls.default.ingress.action"] ??
+            "",
+        };
+      };
+
+      rows.push(
+        getConfigurationRowBase({
+          className: classnames("no-border-top device-last-row acl-defaults", {
+            "u-text--line-through": isDetached,
+          }),
+          configuration: <div className="u-text--muted"></div>,
+          inherited: (
+            <div>
+              <NetworkDefaultACLRead values={getDefaultEgressIngress()} />
+            </div>
+          ),
+          override: null,
+        }),
+      );
+    }
   }
 
   return rows;

src/pages/networks/forms/NetworkAclSelector.tsx

@@ -1,7 +1,6 @@
 import type { FC, ReactNode } from "react";
 import { MultiSelect } from "@canonical/react-components";
 import { useNetworkAcls } from "context/useNetworkAcls";
-import classnames from "classnames";
 
 interface Props {
   project: string;
@@ -52,16 +51,7 @@ const NetworkAclSelector: FC<Props> = ({
 
   return (
     <>
-      {label && (
-        <label
-          className={classnames({
-            "u-text--muted": !isEnabled,
-          })}
-          htmlFor={id}
-        >
-          {label}
-        </label>
-      )}
+      {label && <label htmlFor={id}>{label}</label>}
       <MultiSelect
         items={toOptionList(
           availableAcls.map((acl) => acl.name),

src/pages/networks/forms/NetworkAcls.tsx

@@ -7,7 +7,9 @@ import FormEditButton from "components/FormEditButton";
 import { ensureEditMode } from "util/instanceEdit";
 import NetworkAclSelector from "pages/networks/forms/NetworkAclSelector";
 import { Label } from "@canonical/react-components";
-import NetworkDefaultACLSelector from "./NetworkDefaultACLSelector";
+import NetworkDefaultACLSelector, {
+  type Direction,
+} from "./NetworkDefaultACLSelector";
 import NetworkDefaultACLRead from "./NetworkDefaultACLRead";
 import { ROOT_PATH } from "util/rootPath";
 
@@ -23,6 +25,11 @@ const NetworkAcls: FC<Props> = ({ formik, project }) => {
     Ingress: formik.values.security_acls_default_ingress ?? "",
   };
 
+  const directionField: Record<Direction, string> = {
+    Egress: "security_acls_default_egress",
+    Ingress: "security_acls_default_ingress",
+  };
+
   return (
     <div className="general-field">
       <div className="general-field-label can-edit">
@@ -87,6 +94,7 @@ const NetworkAcls: FC<Props> = ({ formik, project }) => {
             }}
             values={defaultEgressIngress}
             disabled={formik.values.security_acls.length === 0}
+            directionField={directionField}
           />
         )}
       </div>

src/pages/networks/forms/NetworkDefaultACLRead.tsx

@@ -14,11 +14,11 @@ const NetworkDefaultACLRead: FC<{
       When no ACL rule matches:
       <br />
       <Icon name="arrow-left" className="network-default-acl-icon" />
-      Egress traffic will be{" "}
+      Egress traffic is:{" "}
       <code>{conjugateACLAction(egressAction || "reject")}</code>
       <br />
       <Icon name="arrow-right" className="network-default-acl-icon" />
-      Ingress traffic will be{" "}
+      Ingress traffic is:{" "}
       <code>{conjugateACLAction(ingressAction || "reject")}</code>
     </div>
   );

src/pages/networks/forms/NetworkDefaultACLSelector.tsx

@@ -9,19 +9,17 @@ interface Props {
   onChange: (fieldValue: string, value: string) => void;
   values?: Record<Direction, string>;
   disabled?: boolean;
+  directionField: Record<Direction, string>;
 }
 
 const NetworkDefaultACLSelector: FC<Props> = ({
   values,
   onChange,
   disabled,
+  directionField,
 }) => {
   const DIRECTIONS: Direction[] = ["Egress", "Ingress"];
   const ACTIONS = ["allow", "drop", "reject"];
-  const FIELD_BY_DIRECTION: Record<Direction, string> = {
-    Egress: "security_acls_default_egress",
-    Ingress: "security_acls_default_ingress",
-  };
 
   const options = [
     { label: "Select option", value: "" },
@@ -50,7 +48,7 @@ const NetworkDefaultACLSelector: FC<Props> = ({
                   className="u-no-margin--bottom"
                   options={options}
                   onChange={(e) => {
-                    onChange(FIELD_BY_DIRECTION[direction], e.target.value);
+                    onChange(directionField[direction], e.target.value);
                   }}
                   value={values?.[direction]}
                   disabled={disabled}

src/sass/_network_device_form.scss

@@ -1,4 +1,15 @@
 .network-device-form {
+  .acl-defaults .inherited {
+    padding-top: 0;
+  }
+
+  .custom-devices,
+  .inherited-devices {
+    .inherited {
+      width: 12rem;
+    }
+  }
+
   .scrollable-container {
     .content-details {
       .inherited-network-device-configuration-table,

src/types/device.d.ts

@@ -27,6 +27,8 @@ export interface LxdNicDevice {
   "ipv4.address"?: string;
   "ipv6.address"?: string;
   "security.acls"?: string;
+  "security.acls.default.egress.action"?: string;
+  "security.acls.default.ingress.action"?: string;
 }
 
 export interface LxdPhysicalGPUDevice {

src/types/forms/networkDevice.d.ts

@@ -4,4 +4,6 @@ export interface NetworkDeviceFormValues {
   acls?: string;
   ipv4?: string;
   ipv6?: string;
+  security_acls_default_ingress_action?: string;
+  security_acls_default_egress_action?: string;
 }

src/util/devices.tsx

@@ -85,6 +85,8 @@ export const isCustomNic = (device: LxdDeviceValue): boolean => {
     "security.acls",
     "ipv4.address",
     "ipv6.address",
+    "security.acls.default.egress.action",
+    "security.acls.default.ingress.action",
   ];
   return (
     isNicDevice(device) &&