diff --git a/packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md b/packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md new file mode 100644 index 00000000000..bb9b4ff6328 --- /dev/null +++ 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/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx index 843b6e4e3f4..be21628f59f 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx +++ b/packages/manager/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) => { /> )} { + 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} /> { + 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 index da980e603ef..6b32ca54c5c 100644 --- 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: ( Set to either TCP, HTTP, or HTTPS. See{' '}