feat(network) fix review notes for network overhaul

 - use new view for managed networks, remove old network overview
 - topology should be calculated for managed networks
 - search placeholder: "Search for key"
 - search over the description and field name
 - hide topology on yaml config
 - on creation: asterisk for name and uplink/parent
 - on creation: disable submit until a parent is selected
 - left align topology

Signed-off-by: David Edler <[email protected]>

src/components/ConfigurationRow.tsx

@@ -213,7 +213,7 @@ export const getConfigurationRow = ({
       </div>
     ),
     override: renderOverride(),
-    name: label as string,
+    name: `${label as string}-${name ?? ""}-${metadata.value}-${metadata.configField?.shortdesc}`,
   });
 };
 

src/pages/networks/CreateNetwork.tsx

@@ -177,7 +177,8 @@ const CreateNetwork: FC = () => {
           disabled={
             !formik.isValid ||
             !formik.values.name ||
-            (formik.values.networkType === "ovn" && !formik.values.network)
+            (formik.values.networkType === "ovn" && !formik.values.network) ||
+            (formik.values.networkType === "physical" && !formik.values.parent)
           }
           onClick={() => void formik.submitForm()}
         >

src/pages/networks/EditNetwork.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { Button, Notification, useNotify } from "@canonical/react-components";
+import { Button, useNotify } from "@canonical/react-components";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useQueryClient } from "@tanstack/react-query";
@@ -45,15 +45,6 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   const controllerState = useState<AbortController | null>(null);
   const [version, setVersion] = useState(0);
 
-  if (!network?.managed) {
-    return (
-      <Notification severity="negative">
-        Configuration is only available for managed networks. This network is
-        not managed.
-      </Notification>
-    );
-  }
-
   const NetworkSchema = Yup.object().shape({
     name: Yup.string()
       .test(

src/pages/networks/NetworkDetail.tsx

@@ -8,7 +8,6 @@ import EditNetwork from "pages/networks/EditNetwork";
 import NetworkDetailHeader from "pages/networks/NetworkDetailHeader";
 import Loader from "components/Loader";
 import { Row } from "@canonical/react-components";
-import NetworkDetailOverview from "pages/networks/NetworkDetailOverview";
 import CustomLayout from "components/CustomLayout";
 import TabLinks from "components/TabLinks";
 import NetworkForwards from "pages/networks/NetworkForwards";
@@ -40,12 +39,8 @@ const NetworkDetail: FC = () => {
   const isManagedNetwork = network?.managed;
 
   const getTabs = () => {
-    if (!isManagedNetwork) {
-      return ["Overview"];
-    }
-
     const type = network?.type ?? "";
-    if (type === "physical") {
+    if (type === "physical" || !isManagedNetwork) {
       return ["Configuration"];
     }
 
@@ -66,12 +61,7 @@ const NetworkDetail: FC = () => {
           tabUrl={`/ui/project/${project}/network/${name}`}
         />
         <NotificationRow />
-        {!activeTab && !isManagedNetwork && (
-          <div role="tabpanel" aria-labelledby="overview">
-            {network && <NetworkDetailOverview network={network} />}
-          </div>
-        )}
-        {!activeTab && isManagedNetwork && (
+        {!activeTab && (
           <div role="tabpanel" aria-labelledby="configuration">
             {network && <EditNetwork network={network} project={project} />}
           </div>

src/pages/networks/NetworkList.tsx

@@ -18,6 +18,7 @@ import HelpLink from "components/HelpLink";
 import { useDocs } from "context/useDocs";
 import NetworkForwardCount from "pages/networks/NetworkForwardCount";
 import { useSmallScreen } from "context/useSmallScreen";
+import { renderNetworkType } from "util/networks";
 
 const NetworkList: FC = () => {
   const docBaseLink = useDocs();
@@ -70,7 +71,7 @@ const NetworkList: FC = () => {
           "aria-label": "Name",
         },
         {
-          content: network.type,
+          content: renderNetworkType(network.type),
           role: "rowheader",
           "aria-label": "Type",
         },

src/pages/networks/NetworkTopology.tsx

@@ -10,6 +10,7 @@ import classNames from "classnames";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { fetchNetworks } from "api/networks";
+import classnames from "classnames";
 
 interface Props {
   formik: FormikProps<NetworkFormValues>;
@@ -78,7 +79,10 @@ const NetworkTopology: FC<Props> = ({ formik, project }) => {
               return (
                 <div
                   key={networkUrl}
-                  className="downstream-item downstream-network"
+                  className={classnames("downstream-item", {
+                    "has-descendents":
+                      downstreamNetworks.length > 0 || instances.length > 0,
+                  })}
                 >
                   <ResourceLink
                     type="network"

src/pages/networks/forms/IpAddress.tsx

@@ -8,7 +8,9 @@ interface Props {
 const IpAddress: FC<Props> = ({ row }) => {
   return (
     <div className="general-field ip-address">
-      <div className="general-field-label">{row.columns?.[0].content}</div>
+      <div className="general-field-label can-edit">
+        {row.columns?.[0].content}
+      </div>
       <div className="general-field-content">{row.columns?.[2].content}</div>
     </div>
   );