upcoming: [M3-7599] - Update AGLB Configuration Ports Copy (linode#10079

) * update copy * update error logic * remove unrelated change * Added changeset: Update AGLB Configuration Port Copy * add logic to change port based on protocol * add logic to change port based on protocol * Update packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx --------- Co-authored-by: Banks Nussman <[email protected]>
jaalah-akamai · Jan 22, 2024 · 155e43c · 155e43c
1 parent d938bfe
commit 155e43c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md b/packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update AGLB Configuration Port Copy ([#10079](https://github.com/linode/manager/pull/10079))
diff --git a/...anager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx b/...anager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx
@@ -38,6 +38,7 @@ import type {
   CertificateConfig,
   Configuration,
   ConfigurationPayload,
+  Protocol,
 } from '@linode/api-v4';
 
 interface EditProps {
@@ -65,6 +66,8 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => {
   const [isAddRouteDrawerOpen, setIsAddRouteDrawerOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
+  const [hasChangedPort, setHasChangedPort] = useState(false);
+
   const [routesTableQuery, setRoutesTableQuery] = useState('');
 
   const loadbalancerId = Number(_loadbalancerId);
@@ -148,9 +151,37 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => {
 
   const handleReset = () => {
     formik.resetForm();
+    setHasChangedPort(false);
     reset();
   };
 
+  const handleProtocolChange = (protocol: Protocol) => {
+    // If the user has changed the port manually, just update the protocol and NOT the port.
+    if (hasChangedPort) {
+      return formik.setFieldValue('protocol', protocol);
+    }
+
+    let newPort = formik.values.port;
+
+    if (protocol === 'http') {
+      newPort = 80;
+    }
+
+    if (protocol === 'https') {
+      newPort = 443;
+    }
+
+    // Update the protocol and port at the same time if the port is unchanged.
+    formik.setFormikState((prev) => ({
+      ...prev,
+      values: {
+        ...prev.values,
+        port: newPort,
+        protocol,
+      },
+    }));
+  };
+
   const generalErrors = error?.reduce((acc, { field, reason }) => {
     if (
       !field ||
@@ -173,15 +204,19 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => {
         />
       )}
       <TextField
-        errorText={formik.errors.label}
+        errorText={formik.touched.label ? formik.errors.label : undefined}
         label="Configuration Label"
         name="label"
+        onBlur={formik.handleBlur}
         onChange={formik.handleChange}
         value={formik.values.label}
       />
       <Stack spacing={2}>
         <Stack direction="row" spacing={2}>
           <Autocomplete
+            onChange={(e, { value }) => {
+              handleProtocolChange(value);
+            }}
             textFieldProps={{
               labelTooltipText: CONFIGURATION_COPY.Protocol,
             }}
@@ -191,15 +226,18 @@ export const ConfigurationForm = (props: CreateProps | EditProps) => {
             disableClearable
             errorText={formik.errors.protocol}
             label="Protocol"
-            onChange={(e, { value }) => formik.setFieldValue('protocol', value)}
             options={protocolOptions}
           />
           <TextField
-            errorText={formik.errors.port}
+            onChange={(e) => {
+              formik.handleChange(e);
+              setHasChangedPort(true);
+            }}
+            errorText={formik.touched.port ? formik.errors.port : undefined}
             label="Port"
             labelTooltipText={CONFIGURATION_COPY.Port}
             name="port"
-            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
             type="number"
             value={formik.values.port}
           />

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx
@@ -31,13 +31,13 @@ export const protocolOptions = [
   { label: 'HTTPS', value: 'https' },
   { label: 'HTTP', value: 'http' },
   { label: 'TCP', value: 'tcp' },
-];
+] as const;
 
 export const CONFIGURATION_COPY = {
   Certificates:
     'TLS termination certificates create an encrypted link between your clients and Global Load Balancer, and terminate incoming traffic on the load balancer. Once the load balancing policy is applied, traffic is forwarded to your service targets over encrypted TLS connections. Responses from your service targets to your clients are also encrypted.',
   Port:
-    'The inbound port that the load balancer listens on. Enter 80 as the port number for HTTP, 443 for HTTPs, and 0-1023 for TCP.',
+    'Set the inbound port value that the load balancer listens on to whichever port the client will connect to. The port can be 1-65535.',
   Protocol: (
     <Typography>
       Set to either TCP, HTTP, or HTTPS. See{' '}