clarify ipv4 address label on network creation (#981)

## Done - clarify ipv4 address label on network creation. - additional help text for v4/v6 address on the network form
canonical · Nov 7, 2024 · de45aa3 · de45aa3
2 parents 77100c5 + 2db779d
commit de45aa3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/pages/networks/forms/IpAddressSelector.tsx b/src/pages/networks/forms/IpAddressSelector.tsx
@@ -5,9 +5,10 @@ interface Props {
   id: string;
   address?: string;
   setAddress: (address: string) => void;
+  family: "IPv4" | "IPv6";
 }
 
-const IpAddressSelector: FC<Props> = ({ id, address, setAddress }) => {
+const IpAddressSelector: FC<Props> = ({ id, address, setAddress, family }) => {
   const isCustom = address !== "none" && address !== "auto";
 
   return (
@@ -36,10 +37,17 @@ const IpAddressSelector: FC<Props> = ({ id, address, setAddress }) => {
           name={id}
           type="text"
           placeholder="Enter address"
-          className="u-no-margin--bottom"
           onChange={(e) => setAddress(e.target.value)}
           value={isCustom && address ? address : ""}
           disabled={!isCustom}
+          help={
+            <>
+              Use CIDR notation.
+              <br />
+              You can set the option to <code>none</code> to turn off {family},
+              or to <code>auto</code> to generate a new random unused subnet.
+            </>
+          }
         />
       </div>
     </>

diff --git a/src/pages/networks/forms/NetworkFormMain.tsx b/src/pages/networks/forms/NetworkFormMain.tsx
@@ -71,11 +71,12 @@ const NetworkFormMain: FC<Props> = ({ formik, project, isClustered }) => {
             getConfigurationRow({
               formik,
               name: "ipv4_address",
-              label: "IPv4 address",
+              label: "IPv4 address range",
               defaultValue: "auto",
               children: (
                 <IpAddressSelector
                   id="ipv4_address"
+                  family="IPv4"
                   address={formik.values.ipv4_address}
                   setAddress={(value) => {
                     void formik.setFieldValue("ipv4_address", value);
@@ -109,11 +110,12 @@ const NetworkFormMain: FC<Props> = ({ formik, project, isClustered }) => {
             getConfigurationRow({
               formik,
               name: "ipv6_address",
-              label: "IPv6 address",
+              label: "IPv6 address range",
               defaultValue: "auto",
               children: (
                 <IpAddressSelector
                   id="ipv6_address"
+                  family="IPv6"
                   address={formik.values.ipv6_address}
                   setAddress={(value) => {
                     void formik.setFieldValue("ipv6_address", value);

diff --git a/src/sass/_forms.scss b/src/sass/_forms.scss
@@ -150,7 +150,7 @@
     align-items: flex-start;
 
     > :nth-child(2) {
-      margin-left: -65px;
+      margin-left: -1.5rem;
       margin-top: -5px;
     }