feat(network) resolve design review comments from network overhaul

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

src/components/UsedByItem.tsx

@@ -11,9 +11,16 @@ interface Props {
   activeProject: string;
   type: ResourceIconType;
   to: string;
+  projectLinkDetailPage?: string;
 }
 
-const UsedByItem: FC<Props> = ({ item, activeProject, type, to }) => {
+const UsedByItem: FC<Props> = ({
+  item,
+  activeProject,
+  type,
+  to,
+  projectLinkDetailPage = "instances",
+}) => {
   const { data: images = [] } = useQuery({
     queryKey: [queryKeys.images],
     queryFn: () => fetchImageList(activeProject),
@@ -30,7 +37,7 @@ const UsedByItem: FC<Props> = ({ item, activeProject, type, to }) => {
           <ResourceLink
             type="project"
             value={item.project}
-            to={`/ui/project/${item.project}/instances`}
+            to={`/ui/project/${item.project}/${projectLinkDetailPage}`}
           />{" "}
           /{" "}
         </>

src/pages/networks/CreateNetwork.tsx

@@ -83,6 +83,8 @@ const CreateNetwork: FC = () => {
       name: "",
       networkType: hasOvn ? "ovn" : "bridge",
       entityType: "network",
+      ipv4_address: "auto",
+      ipv6_address: "auto",
     },
     validationSchema: NetworkSchema,
     onSubmit: (values) => {

src/pages/networks/EditNetwork.tsx

@@ -18,7 +18,7 @@ import { slugify } from "util/slugify";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
   GENERAL,
-  TOPOLOGY,
+  CONNECTIONS,
   YAML_CONFIGURATION,
 } from "pages/networks/forms/NetworkFormMenu";
 import FormFooterLayout from "components/forms/FormFooterLayout";
@@ -38,7 +38,7 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   const notify = useNotify();
   const toastNotify = useToastNotification();
   const { hash } = useLocation();
-  const initialSection = hash ? hash.substring(1) : slugify(TOPOLOGY);
+  const initialSection = hash ? hash.substring(1) : slugify(CONNECTIONS);
   const [section, updateSection] = useState(initialSection);
 
   const queryClient = useQueryClient();
@@ -121,7 +121,7 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
     if (source === "click") {
       const baseUrl = `/ui/project/${project}/network/${network.name}`;
       if (newSection === GENERAL) {
-        voidnavigate(baseUrl);
+        void navigate(baseUrl);
       } else {
         void navigate(`${baseUrl}/#${slugify(newSection)}`);
       }

src/pages/networks/NetworkTopology.tsx

@@ -2,7 +2,7 @@ import React, { FC, useState } from "react";
 import { FormikProps } from "formik/dist/types";
 import { NetworkFormValues } from "pages/networks/forms/NetworkForm";
 import { slugify } from "util/slugify";
-import { TOPOLOGY } from "pages/networks/forms/NetworkFormMenu";
+import { CONNECTIONS } from "pages/networks/forms/NetworkFormMenu";
 import ResourceLink from "components/ResourceLink";
 import { filterUsedByType } from "util/usedBy";
 import { Button, Icon } from "@canonical/react-components";
@@ -18,7 +18,8 @@ interface Props {
 }
 
 const NetworkTopology: FC<Props> = ({ formik, project }) => {
-  const [isCollapsed, setCollapsed] = useState(true);
+  const [isNetworksCollapsed, setNetworksCollapsed] = useState(true);
+  const [isInstancesCollapsed, setInstancesCollapsed] = useState(true);
   const network = formik.values.bareNetwork;
 
   if (!network) {
@@ -41,8 +42,8 @@ const NetworkTopology: FC<Props> = ({ formik, project }) => {
 
   return (
     <>
-      <h2 className="p-heading--4" id={slugify(TOPOLOGY)}>
-        Topology
+      <h2 className="p-heading--4" id={slugify(CONNECTIONS)}>
+        Connections
       </h2>
       <div className="u-sv3 network-topology">
         {uplink && (
@@ -73,7 +74,7 @@ const NetworkTopology: FC<Props> = ({ formik, project }) => {
         </div>
         <div className="downstream">
           {downstreamNetworks
-            .slice(0, isCollapsed ? 5 : downstreamNetworks.length)
+            .slice(0, isNetworksCollapsed ? 5 : downstreamNetworks.length)
             .map((item) => {
               const networkUrl = `/ui/project/default/network/${item.name}`;
               return (
@@ -91,19 +92,19 @@ const NetworkTopology: FC<Props> = ({ formik, project }) => {
                 </div>
               );
             })}
-          {downstreamNetworks.length > 5 && isCollapsed && (
+          {downstreamNetworks.length > 5 && isNetworksCollapsed && (
             <div className="downstream-item">
               <Button
                 appearance="link"
-                onClick={() => setCollapsed(false)}
+                onClick={() => setNetworksCollapsed(false)}
                 small
               >
                 Show all
               </Button>
             </div>
           )}
           {instances
-            .slice(0, isCollapsed ? 5 : instances.length)
+            .slice(0, isInstancesCollapsed ? 5 : instances.length)
             .map((item) => {
               const instanceUrl = `/ui/project/${item.project}/instance/${item.name}`;
               return (
@@ -116,11 +117,11 @@ const NetworkTopology: FC<Props> = ({ formik, project }) => {
                 </div>
               );
             })}
-          {instances.length > 5 && isCollapsed && (
+          {instances.length > 5 && isInstancesCollapsed && (
             <div className="downstream-item">
               <Button
                 appearance="link"
-                onClick={() => setCollapsed(false)}
+                onClick={() => setInstancesCollapsed(false)}
                 small
               >
                 Show all

src/pages/networks/forms/IpAddressSelector.tsx

@@ -15,12 +15,12 @@ const IpAddressSelector: FC<Props> = ({ id, address, setAddress, family }) => {
     <>
       <div className="ip-address-selector">
         <RadioInput
-          label="auto"
+          label="Auto"
           checked={address === "auto"}
           onChange={() => setAddress("auto")}
         />
         <RadioInput
-          label="none"
+          label="None"
           checked={address === "none"}
           onChange={() => setAddress("none")}
         />

src/pages/networks/forms/NetworkFormBridge.tsx

@@ -36,7 +36,7 @@ const NetworkFormBridge: FC<Props> = ({ formik, filterRows }) => {
           getConfigurationRow({
             formik,
             name: "bridge_driver",
-            label: "Bridge driver",
+            label: "Driver",
             defaultValue: "",
             children: (
               <Select

src/pages/networks/forms/NetworkFormMenu.tsx

@@ -3,7 +3,7 @@ import MenuItem from "components/forms/FormMenuItem";
 import { FormikProps } from "formik/dist/types";
 import { NetworkFormValues } from "pages/networks/forms/NetworkForm";
 
-export const TOPOLOGY = "Topology";
+export const CONNECTIONS = "Connections";
 export const GENERAL = "General";
 export const BRIDGE = "Bridge";
 export const DNS = "DNS";

src/pages/networks/forms/NetworkProfiles.tsx

@@ -31,6 +31,7 @@ const NetworkProfiles: FC<Props> = ({ formik, project }) => {
                 activeProject={project}
                 type="profile"
                 to={`/ui/project/${item.project}/profile/${item.name}`}
+                projectLinkDetailPage="profiles"
               />
             ))}
           />

src/sass/_forms.scss

@@ -148,10 +148,6 @@
 
   .ip-address-custom {
     align-items: flex-start;
-
-    > :nth-child(2) {
-      margin-top: -5px;
-    }
   }
 
   .snapshot-schedule {

src/sass/_network_form.scss

@@ -5,6 +5,18 @@
 .create-network > .row,
 .edit-network > .row {
   padding-right: 0;
+
+  .content-details,
+  .p-bottom-controls {
+    display: block;
+    overflow: auto;
+    padding-right: $sph--x-large;
+    scrollbar-gutter: stable;
+
+    .bottom-btns {
+      max-width: 54rem;
+    }
+  }
 }
 
 .edit-network .p-notification--negative {

src/sass/_network_topology.scss

@@ -12,35 +12,39 @@
     }
   }
 
+  .resource-link .p-chip__value {
+    max-width: 13vw !important;
+  }
+
   .uplink::after,
   .has-parent::before,
   .has-descendents::after,
   .downstream-item::before {
     background-color: #6e7681;
     content: "";
     display: inline-block;
-    height: 30px;
+    height: 2rem;
     position: relative;
     transform: translate(0, 0);
-    width: 30px;
+    width: 2rem;
   }
 
   .uplink::after,
   .has-parent::before,
   .has-descendents::after {
-    clip-path: polygon(100% 80%, 0 80%, 0 85%, 100% 85%);
+    clip-path: polygon(100% 80%, 0 80%, 0 83%, 100% 83%);
   }
 
   .downstream-item::before {
     clip-path: polygon(
       100% 80%,
-      5% 80%,
-      5% 0,
+      4% 80%,
+      4% 0,
       0 0,
       0 100%,
-      5% 100%,
-      5% 85%,
-      100% 85%
+      4% 100%,
+      4% 83%,
+      100% 83%
     );
   }
 
@@ -51,23 +55,23 @@
   }
 
   .downstream-item:first-child::before {
-    clip-path: polygon(100% 80%, 0 80%, 0 100%, 5% 100%, 5% 85%, 100% 85%);
+    clip-path: polygon(100% 80%, 0 80%, 0 100%, 4% 100%, 4% 83%, 100% 83%);
   }
 
   .downstream-item:last-child::before {
-    clip-path: polygon(100% 80%, 5% 80%, 5% 0, 0 0, 0 85%, 100% 85%);
+    clip-path: polygon(100% 80%, 4% 80%, 4% 0, 0 0, 0 83%, 100% 83%);
   }
 
   .downstream-item:only-child::before {
-    clip-path: polygon(100% 80%, 0 80%, 0 85%, 100% 85%);
+    clip-path: polygon(100% 80%, 0 80%, 0 83%, 100% 83%);
   }
 
   .downstream {
     display: flex;
     flex-direction: column;
 
     .downstream-item {
-      height: 30px;
+      height: 2rem;
     }
   }
 }

tests/networks.spec.ts

@@ -70,7 +70,7 @@ test.describe("bridge type", () => {
     await setTextarea(page, "Hardware address", HARDWARE_ADDRESS);
 
     const options = ["openvswitch", "native"];
-    await checkAllOptions(page, "Bridge driver", options);
+    await checkAllOptions(page, "Driver", options);
   });
 
   test("configure bridge DNS settings", async ({ page }) => {