Show network parent in read and edit mode, when lxd is not clustered (#…

…911)

## Done

- Show network parent in read and edit mode, when lxd is not clustered
- In clustered mode we can not read the parent, thus hiding it for now.

## 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
@mas-who or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](../CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
- edit a network that is of type physical in a clustered and
non-clustered lxd.

src/pages/networks/forms/NetworkForm.tsx

@@ -31,6 +31,8 @@ import { getHandledNetworkConfigKeys, getNetworkKey } from "util/networks";
 import NetworkFormOvn from "pages/networks/forms/NetworkFormOvn";
 import YamlNotification from "components/forms/YamlNotification";
 import { ensureEditMode } from "util/instanceEdit";
+import { useSettings } from "context/useSettings";
+import { isClusteredServer } from "util/settings";
 
 export interface NetworkFormValues {
   readOnly: boolean;
@@ -166,6 +168,8 @@ const NetworkForm: FC<Props> = ({
 }) => {
   const docBaseLink = useDocs();
   const notify = useNotify();
+  const { data: settings } = useSettings();
+  const isClustered = isClusteredServer(settings);
 
   const updateFormHeight = () => {
     updateMaxHeight("form-contents", "p-bottom-controls");
@@ -187,7 +191,11 @@ const NetworkForm: FC<Props> = ({
       <Row className="form-contents" key={section}>
         <Col size={12}>
           {section === slugify(MAIN_CONFIGURATION) && (
-            <NetworkFormMain formik={formik} project={project} />
+            <NetworkFormMain
+              formik={formik}
+              project={project}
+              isClustered={isClustered}
+            />
           )}
           {section === slugify(BRIDGE) && <NetworkFormBridge formik={formik} />}
           {section === slugify(DNS) && <NetworkFormDns formik={formik} />}

src/pages/networks/forms/NetworkFormMain.tsx

@@ -16,9 +16,10 @@ import { ensureEditMode } from "util/instanceEdit";
 interface Props {
   formik: FormikProps<NetworkFormValues>;
   project: string;
+  isClustered: boolean;
 }
 
-const NetworkFormMain: FC<Props> = ({ formik, project }) => {
+const NetworkFormMain: FC<Props> = ({ formik, project, isClustered }) => {
   const getFormProps = (id: "network" | "name" | "description" | "parent") => {
     return {
       id: id,
@@ -59,7 +60,7 @@ const NetworkFormMain: FC<Props> = ({ formik, project }) => {
             <UplinkSelector props={getFormProps("network")} project={project} />
           )}
           {formik.values.networkType === "physical" &&
-            formik.values.isCreating && (
+            (formik.values.isCreating || !isClustered) && (
               <NetworkParentSelector props={getFormProps("parent")} />
             )}
         </Col>

tests/helpers/network.ts

@@ -17,8 +17,8 @@ export const createNetwork = async (
   await page.getByRole("button", { name: "Create network" }).click();
   await page.getByRole("heading", { name: "Create a network" }).click();
   await page.getByLabel("Type").selectOption(type);
-  await page.getByLabel("Name").click();
-  await page.getByLabel("Name").fill(network);
+  await page.getByLabel("Name", { exact: true }).click();
+  await page.getByLabel("Name", { exact: true }).fill(network);
   if (type === "physical") {
     await page.getByLabel("Parent").selectOption({ index: 1 });
   }