Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Jan 22, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6af23a5
update copy
bnussman Jan 18, 2024
13529c2
update error logic
bnussman Jan 18, 2024
6c34682
remove unrelated change
bnussman Jan 18, 2024
768dacd
Added changeset: Update AGLB Configuration Port Copy
bnussman Jan 18, 2024
49c8fd9
add logic to change port based on protocol
bnussman Jan 18, 2024
a8ae358
add logic to change port based on protocol
bnussman Jan 18, 2024
bb9e10f
Update packages/manager/src/features/LoadBalancers/LoadBalancerDetail…
bnussman-akamai Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-10079-upcoming-features-1705615366001.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

Update AGLB Configuration Port Copy ([#10079](https://github.com/linode/manager/pull/10079))
46 changes: 42 additions & 4 deletions ...anager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import type {
CertificateConfig,
Configuration,
ConfigurationPayload,
Protocol,
} from '@linode/api-v4';

interface EditProps {
Expand Down Expand Up @@ -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);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a better way to handle this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll need to define some defaults first, but then you could do:

const defaultPort = {
    http: 80,
    https: 443,
    tcp: 80,
  };

  const handleProtocolChange = (protocol: Protocol) => {
    const { values, setFormikState } = formik;
    const { protocol: currentProtocol, port } = values;

    // Calculate the default port directly
    const newPort = port === defaultPort[currentProtocol] ? defaultPort[protocol] : port;

    setFormikState((prev) => ({
      ...prev,
      values: {
        ...values,
        port: newPort,
        protocol,
      },
    }));
  };

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks clean! I was mainly asking about having to maintain extra state (hasChangedPort). I don't think I can derive that with formik, but I'm not 100% sure

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well that's what this does, no?


const [routesTableQuery, setRoutesTableQuery] = useState('');

const loadbalancerId = Number(_loadbalancerId);
Expand Down Expand Up @@ -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 ||
Expand All @@ -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,
}}
Expand All @@ -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}
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{' '}
Expand Down