diff --git a/src/pages/networks/EditNetwork.tsx b/src/pages/networks/EditNetwork.tsx index 182cf52e0f..449479c0df 100644 --- a/src/pages/networks/EditNetwork.tsx +++ b/src/pages/networks/EditNetwork.tsx @@ -1,5 +1,10 @@ import { FC, useState } from "react"; -import { ActionButton, Button, useNotify } from "@canonical/react-components"; +import { + ActionButton, + Button, + Notification, + useNotify, +} from "@canonical/react-components"; import { useFormik } from "formik"; import * as Yup from "yup"; import { useQueryClient } from "@tanstack/react-query"; @@ -34,6 +39,15 @@ const EditNetwork: FC = ({ network, project }) => { const queryClient = useQueryClient(); const controllerState = useState(null); + if (!network?.managed) { + return ( + + Configuration is only available for managed networks. This network is + not managed. + + ); + } + const NetworkSchema = Yup.object().shape({ name: Yup.string() .test( diff --git a/src/pages/networks/NetworkDetail.tsx b/src/pages/networks/NetworkDetail.tsx index 2f86033a1d..97613d63d3 100644 --- a/src/pages/networks/NetworkDetail.tsx +++ b/src/pages/networks/NetworkDetail.tsx @@ -13,8 +13,6 @@ import CustomLayout from "components/CustomLayout"; import TabLinks from "components/TabLinks"; import NetworkForwards from "pages/networks/NetworkForwards"; -const tabs: string[] = ["Overview", "Configuration", "Forwards"]; - const NetworkDetail: FC = () => { const { name, project, activeTab } = useParams<{ name: string; @@ -39,6 +37,19 @@ const NetworkDetail: FC = () => { return ; } + const getTabs = () => { + if (!network?.managed) { + return ["Overview"]; + } + + const type = network?.type ?? ""; + if (type === "physical") { + return ["Overview", "Configuration"]; + } + + return ["Overview", "Configuration", "Forwards"]; + }; + return ( { > diff --git a/src/pages/networks/forms/NetworkFormMain.tsx b/src/pages/networks/forms/NetworkFormMain.tsx index 5142209f9c..51eade342d 100644 --- a/src/pages/networks/forms/NetworkFormMain.tsx +++ b/src/pages/networks/forms/NetworkFormMain.tsx @@ -61,91 +61,93 @@ const NetworkFormMain: FC = ({ formik, project }) => { )} - { - void formik.setFieldValue("ipv4_address", value); + {formik.values.networkType !== "physical" && ( + { + void formik.setFieldValue("ipv4_address", value); - if (value === "none") { - const nullFields = [ - "ipv4_nat", - "ipv4_dhcp", - "ipv4_dhcp_expiry", - "ipv4_dhcp_ranges", - ]; - nullFields.forEach( - (field) => void formik.setFieldValue(field, undefined), - ); - } - }} - /> - ), - }), + if (value === "none") { + const nullFields = [ + "ipv4_nat", + "ipv4_dhcp", + "ipv4_dhcp_expiry", + "ipv4_dhcp_ranges", + ]; + nullFields.forEach( + (field) => void formik.setFieldValue(field, undefined), + ); + } + }} + /> + ), + }), - ...(formik.values.ipv4_address !== "none" - ? [ - getConfigurationRow({ - formik, - name: "ipv4_nat", - label: "IPv4 NAT", - defaultValue: "", - children: , + }), + ] + : []), - getConfigurationRow({ - formik, - name: "ipv6_address", - label: "IPv6 address", - defaultValue: "auto", - children: ( - { - void formik.setFieldValue("ipv6_address", value); + getConfigurationRow({ + formik, + name: "ipv6_address", + label: "IPv6 address", + defaultValue: "auto", + children: ( + { + void formik.setFieldValue("ipv6_address", value); - if (value === "none") { - const nullFields = [ - "ipv6_nat", - "ipv6_dhcp", - "ipv6_dhcp_expiry", - "ipv6_dhcp_ranges", - "ipv6_dhcp_stateful", - "ipv6_ovn_ranges", - ]; - nullFields.forEach( - (field) => void formik.setFieldValue(field, undefined), - ); - } - }} - /> - ), - }), + if (value === "none") { + const nullFields = [ + "ipv6_nat", + "ipv6_dhcp", + "ipv6_dhcp_expiry", + "ipv6_dhcp_ranges", + "ipv6_dhcp_stateful", + "ipv6_ovn_ranges", + ]; + nullFields.forEach( + (field) => void formik.setFieldValue(field, undefined), + ); + } + }} + /> + ), + }), - ...(formik.values.ipv6_address !== "none" - ? [ - getConfigurationRow({ - formik, - name: "ipv6_nat", - label: "IPv6 NAT", - defaultValue: "", - children: , + }), + ] + : []), + ]} + /> + )} ); }; diff --git a/src/pages/networks/forms/NetworkFormMenu.tsx b/src/pages/networks/forms/NetworkFormMenu.tsx index f3f8141509..b0d869ae91 100644 --- a/src/pages/networks/forms/NetworkFormMenu.tsx +++ b/src/pages/networks/forms/NetworkFormMenu.tsx @@ -42,51 +42,53 @@ const NetworkFormMenu: FC = ({ active, setActive, formik }) => {