upcoming: [M3-7700] - Make ACLB Copy Changes Requested by UX (#10128)

* start adding new copy * update certs copy * update certs copy * revert unintended change * continue adding new copy changes * move some copy to constants * Added changeset: Update ACLB Copy * fix unintended change * fix other SNI form * more copy updates and test fixes * fix unit test * fix routes e2e test * remove comma * use correct docs link urls * Update packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/constants.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> --------- Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
linode · Jan 31, 2024 · ca489da · ca489da
1 parent fa2be99
commit ca489da
Show file tree

Hide file tree

Showing 27 changed files with 140 additions and 139 deletions.
diff --git a/packages/manager/.changeset/pr-10128-upcoming-features-1706647613582.md b/packages/manager/.changeset/pr-10128-upcoming-features-1706647613582.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update ACLB Copy ([#10128](https://github.com/linode/manager/pull/10128))
diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-configurations.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-configurations.spec.ts
@@ -90,7 +90,9 @@ describe('Akamai Cloud Load Balancer configurations page', () => {
       ui.drawer.findByTitle('Add Certificate').within(() => {
         cy.findByLabelText('Add Existing Certificate').click();
 
-        cy.findByLabelText('Host Header').should('be.visible').type('*');
+        cy.findByLabelText('Server Name Indication (SNI) Hostname')
+          .should('be.visible')
+          .type('*');
 
         cy.findByLabelText('Certificate').should('be.visible').click();
 
@@ -319,7 +321,9 @@ describe('Akamai Cloud Load Balancer configurations page', () => {
       ui.drawer.findByTitle('Add Certificate').within(() => {
         cy.findByLabelText('Add Existing Certificate').click();
 
-        cy.findByLabelText('Host Header').should('be.visible').type('*');
+        cy.findByLabelText('Server Name Indication (SNI) Hostname')
+          .should('be.visible')
+          .type('*');
 
         cy.findByLabelText('Certificate').should('be.visible').click();
 
@@ -424,7 +428,9 @@ describe('Akamai Cloud Load Balancer configurations page', () => {
       ui.drawer.findByTitle('Add Certificate').within(() => {
         cy.findByLabelText('Add Existing Certificate').click();
 
-        cy.findByLabelText('Host Header').type('example-1.com');
+        cy.findByLabelText('Server Name Indication (SNI) Hostname').type(
+          'example-1.com'
+        );
 
         cy.findByLabelText('Certificate').click();
 

diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-routes.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-routes.spec.ts
@@ -539,7 +539,7 @@ describe('Akamai Cloud Load Balancer routes page', () => {
         .findByTitle('Edit Rule')
         .should('be.visible')
         .within(() => {
-          cy.findByLabelText('Hostname (optional)')
+          cy.findByLabelText('Hostname Match (optional)')
             .should('have.value', routes[0].rules[0].match_condition.hostname)
             .clear()
             .type('example.com');

diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-service-targets.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-service-targets.spec.ts
@@ -200,7 +200,7 @@ describe('Akamai Cloud Load Balancer service targets', () => {
           .should('be.visible')
           .click();
 
-        cy.findByLabelText('Health Check Host')
+        cy.findByLabelText('Health Check Host Header')
           .scrollIntoView()
           .should('be.visible')
           .type('example.com');
@@ -378,7 +378,7 @@ describe('Akamai Cloud Load Balancer service targets', () => {
           mockServiceTarget.healthcheck.path
         );
 
-        cy.findByLabelText('Health Check Host', { exact: false }).should(
+        cy.findByLabelText('Health Check Host Header', { exact: false }).should(
           'have.value',
           mockServiceTarget.healthcheck.host
         );

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/AddRouteDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/AddRouteDrawer.tsx
@@ -58,7 +58,7 @@ export const AddRouteDrawer = (props: Props) => {
   return (
     <Drawer onClose={onClose} open={open} title="Add Route">
       <Stack spacing={1}>
-        <Typography>{ROUTE_COPY.Description.main}</Typography>
+        <Typography>{ROUTE_COPY.Protocol.main}</Typography>
         <Typography>{ROUTE_COPY.Description[routeProtocol]}</Typography>
       </Stack>
       <RadioGroup onChange={(_, value) => setMode(value as Mode)} value={mode}>

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/ConfigurationDetails.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/ConfigurationDetails.tsx
@@ -9,12 +9,12 @@ import { Link } from 'src/components/Link';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
-import { ACLB_DOCS_TLS_CERTIFICATE } from 'src/features/LoadBalancers/constants';
 
 import {
   CONFIGURATION_COPY,
   protocolOptions,
 } from '../LoadBalancerDetail/Configurations/constants';
+import { ACLB_DOCS } from '../constants';
 
 import type { Handlers } from './LoadBalancerConfigurations';
 import type { LoadBalancerCreateFormData } from './LoadBalancerCreateFormWrapper';
@@ -96,7 +96,7 @@ export const ConfigurationDetails = ({ index }: Props) => {
               />
               After the load balancer is created, and if the protocol is HTTPS,
               upload TLS termination certificates.{' '}
-              <Link to={ACLB_DOCS_TLS_CERTIFICATE}>Learn more.</Link>
+              <Link to={ACLB_DOCS.TLSCertificates}>Learn more.</Link>
             </Typography>
           </Box>
         </Stack>

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/RuleDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/RuleDrawer.tsx
@@ -188,13 +188,13 @@ export const RuleDrawer = (props: Props) => {
                       ? formik.errors.match_condition?.hostname
                       : undefined
                   }
-                  label="Hostname"
+                  label="Hostname Match"
                   labelTooltipText={ROUTE_COPY.Rule.Hostname}
                   name="match_condition.hostname"
                   onBlur={formik.handleBlur}
                   onChange={formik.handleChange}
                   optional
-                  placeholder="www.example.com"
+                  placeholder="www.example.org"
                   value={formik.values.match_condition.hostname}
                 />
                 <Stack direction="row" spacing={2}>

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/ServiceTargetDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/ServiceTargetDrawer.tsx
@@ -9,10 +9,8 @@ import { Drawer } from 'src/components/Drawer';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Radio } from 'src/components/Radio/Radio';
 import { RadioGroup } from 'src/components/RadioGroup';
-import { Typography } from 'src/components/Typography';
 import { getNextLabel } from 'src/utilities/stringUtils';
 
-import { SERVICE_TARGET_COPY } from '../LoadBalancerDetail/ServiceTargets/constants';
 import { LoadBalancerCreateFormData } from './LoadBalancerCreateFormWrapper';
 import { ServiceTargetForm } from './ServiceTargetForm';
 
@@ -38,7 +36,6 @@ export const ServiceTargetDrawer = (props: Props) => {
       open={open}
       title={isEditMode ? 'Edit Service Target' : 'Add a Service Target'}
     >
-      <Typography>{SERVICE_TARGET_COPY.Description}</Typography>
       {!isEditMode && (
         <RadioGroup
           onChange={(_, value) => setMode(value as Mode)}

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/ServiceTargetForm.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/ServiceTargetForm.tsx
@@ -147,6 +147,9 @@ export const ServiceTargetForm = (props: Props) => {
         onChange={(_, { value }) => formik.setFieldValue('protocol', value)}
         options={protocolOptions}
       />
+      <Divider spacingBottom={16} spacingTop={16} />
+      <Typography variant="h3">Algorithm</Typography>
+      <Typography mt={1}>{SERVICE_TARGET_COPY.Headers.Algorithm}</Typography>
       <Autocomplete
         onChange={(e, selected) =>
           formik.setFieldValue('load_balancing_policy', selected.value)
@@ -164,9 +167,6 @@ export const ServiceTargetForm = (props: Props) => {
             </li>
           );
         }}
-        textFieldProps={{
-          labelTooltipText: SERVICE_TARGET_COPY.Tooltips.Algorithm,
-        }}
         value={algorithmOptions.find(
           (option) => option.value === formik.values.load_balancing_policy
         )}
@@ -187,12 +187,9 @@ export const ServiceTargetForm = (props: Props) => {
       {formik.values.protocol === 'https' && (
         <>
           <Divider spacingBottom={12} spacingTop={24} />
-          <Stack alignItems="center" direction="row">
+          <Stack spacing={1}>
             <Typography variant="h3">Service Target CA Certificate</Typography>
-            <TooltipIcon
-              status="help"
-              text={SERVICE_TARGET_COPY.Tooltips.Certificate}
-            />
+            <Typography>{SERVICE_TARGET_COPY.Headers.Certificate}</Typography>
           </Stack>
           <Typography>
             <BetaChip
@@ -201,17 +198,14 @@ export const ServiceTargetForm = (props: Props) => {
             />
             Upload service target endpoint CA certificates after the load
             balancer is created and the protocol is HTTPS.{' '}
-            <Link to={ACLB_DOCS.Certificates}>Learn more.</Link>
+            <Link to={ACLB_DOCS.ServiceTargetCertificates}>Learn more.</Link>
           </Typography>
         </>
       )}
       <Divider spacingBottom={12} spacingTop={24} />
-      <Stack alignItems="center" direction="row">
+      <Stack spacing={1}>
         <Typography variant="h3">Health Checks</Typography>
-        <TooltipIcon
-          status="help"
-          text={SERVICE_TARGET_COPY.Tooltips.Healthcheck.Description}
-        />
+        <Typography>{SERVICE_TARGET_COPY.Headers.HealthCheck}</Typography>
       </Stack>
       <RadioGroup
         onChange={(_, value) =>
@@ -315,12 +309,12 @@ export const ServiceTargetForm = (props: Props) => {
                 ? formik.errors.healthcheck?.host
                 : undefined
             }
-            label="Health Check Host"
+            label="Health Check Host Header"
             labelTooltipText={SERVICE_TARGET_COPY.Tooltips.Healthcheck.Host}
             name="healthcheck.host"
             onBlur={formik.handleBlur}
             onChange={formik.handleChange}
-            placeholder="example.org"
+            placeholder="check.endpoint.org"
             value={formik.values.healthcheck.host}
           />
         </>

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx
@@ -4,7 +4,6 @@ import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
-import { Link } from 'src/components/Link';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Stack } from 'src/components/Stack';
 import { Table } from 'src/components/Table';
@@ -23,6 +22,7 @@ import { useLoadBalancerCertificatesQuery } from 'src/queries/aglb/certificates'
 import { CreateCertificateDrawer } from './CreateCertificateDrawer';
 import { DeleteCertificateDialog } from './DeleteCertificateDialog';
 import { EditCertificateDrawer } from './EditCertificateDrawer';
+import { CERTIFICATES_COPY } from './constants';
 
 import type { Certificate, Filter } from '@linode/api-v4';
 
@@ -98,27 +98,7 @@ export const Certificates = () => {
         gap={2}
         justifyContent="space-between"
       >
-        {certType === 'ca' ? (
-          <Typography>
-            Used by the load balancer to accept responses from your endpoints in
-            your Service Target. This is the certificate installed on your
-            Endpoints. Apply these certificate(s) in the{' '}
-            <Link to={`/loadbalancers/${loadbalancerId}/service-targets`}>
-              Service Targets
-            </Link>{' '}
-            Tab.
-          </Typography>
-        ) : (
-          <Typography>
-            Certificate used by your load balancer to terminate the connection
-            and decrypt request from client. Apply these certificate(s) in the
-            Details section of your HTTPS{' '}
-            <Link to={`/loadbalancers/${loadbalancerId}/configurations`}>
-              Configuration
-            </Link>
-            .
-          </Typography>
-        )}
+        <Typography>{CERTIFICATES_COPY.Tabs[certType]}</Typography>
         <Button
           onClick={() =>
             history.push(

diff --git a/...dBalancerDetail/Certificates/constants.ts → ...BalancerDetail/Certificates/constants.tsx b/...dBalancerDetail/Certificates/constants.ts → ...BalancerDetail/Certificates/constants.tsx
@@ -1,3 +1,7 @@
+import React from 'react';
+
+import { Link } from 'src/components/Link';
+
 import type { Certificate } from '@linode/api-v4';
 
 export const initialValues = {
@@ -21,12 +25,30 @@ export const CERTIFICATES_COPY = {
     downstream:
       'TLS certificates terminate incoming traffic to the load balancer. Once the load balancing policy is applied, traffic is forwarded to your service targets over TLS connections. ',
   },
+  Description:
+    'For HTTPS Cloud Load Balancers, a TLS termination certificate is required. To redirect web connections over port 443/HTTPS, upload your generated certificates for your domains.',
   Edit: {
     // TODO: ACLB - figure out what this should be
     ca: 'You can edit this cert here.',
     downstream:
       'TLS certificates terminate incoming traffic to the load balancer. Once the load balancing policy is applied, traffic is forwarded to your service targets over TLS connections.',
   },
+  Tabs: {
+    ca: (
+      <>
+        Used by the load balancer to accept responses from your service target
+        endpoints. Apply these certificate(s) in the{' '}
+        <Link to="../service-targets">Service Targets</Link> tab.
+      </>
+    ),
+    downstream: (
+      <>
+        Used by the load balancer to terminate the connection and decrypt
+        requests from clients. Apply these certificate(s) in the{' '}
+        <Link to="../configurations">Configurations</Link> tab.
+      </>
+    ),
+  },
   Tooltips: {
     Certificate:
       'Paste the PEM-formatted contents of your SSL certificate. If you have linked multiple segments of a chained certificate, be sure to copy all of its contents into the text field, appearing one after another. The certificate must be signed using the RSA algorithm, which is the default in most cases.',

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/index.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/index.tsx
@@ -7,6 +7,8 @@ import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { Typography } from 'src/components/Typography';
 
+import { CERTIFICATES_COPY } from './constants';
+
 const Certificates = React.lazy(() =>
   import('./Certificates').then((module) => ({
     default: module.Certificates,
@@ -34,10 +36,7 @@ export const LoadBalancerCertificates = () => {
 
   return (
     <Stack paddingTop={1} spacing={1}>
-      <Typography>
-        Upload certificates to your Load Balancer for use across your
-        Configurations and Service Targets.
-      </Typography>
+      <Typography>{CERTIFICATES_COPY.Description}</Typography>
       <Tabs index={tabIndex === -1 ? 0 : tabIndex} onChange={() => null}>
         <TabLinkList
           tabs={tabs.map((t) => ({ ...t, routeName: `${url}/${t.path}` }))}

diff --git a/...c/features/LoadBalancers/LoadBalancerDetail/Configurations/AddExistingCertificateForm.tsx b/...c/features/LoadBalancers/LoadBalancerDetail/Configurations/AddExistingCertificateForm.tsx
@@ -50,10 +50,12 @@ export const AddExistingCertificateForm = (
       />
       <TextField
         errorText={formik.touched.hostname ? formik.errors.hostname : undefined}
-        label="Host Header"
+        label="Server Name Indication (SNI) Hostname"
+        labelTooltipText="The request host header sent by the client. This host header tells the load balancer which certificate to use when responding back to the client."
         name="hostname"
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
+        placeholder="www.example.org"
         value={formik.values.hostname}
       />
       <ActionsPanel

diff --git a/...er/src/features/LoadBalancers/LoadBalancerDetail/Configurations/AddNewCertificateForm.tsx b/...er/src/features/LoadBalancers/LoadBalancerDetail/Configurations/AddNewCertificateForm.tsx
@@ -111,10 +111,12 @@ export const AddNewCertificateForm = (props: AddCertificateDrawerProps) => {
       />
       <TextField
         errorText={formik.touched.hostname ? formik.errors.hostname : undefined}
-        label="Host Header"
+        label="Server Name Indication (SNI) Hostname"
+        labelTooltipText="The request host header sent by the client. This host header tells the load balancer which certificate to use when responding back to the client."
         name="hostname"
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
+        placeholder="www.example.org"
         value={formik.values.hostname}
       />
       <ActionsPanel

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/constants.tsx
@@ -36,6 +36,8 @@ export const protocolOptions = [
 export const CONFIGURATION_COPY = {
   Certificates:
     'TLS termination certificates create an encrypted link between your clients and Cloud 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.',
+  Description:
+    'Configurations include the ports and protocols the load balancer listens on, and the routes to use for forwarding requests to service target endpoints.',
   Port:
     '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: (

diff --git a/...ages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx b/...ages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx
@@ -8,10 +8,12 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Paper } from 'src/components/Paper';
 import { Stack } from 'src/components/Stack';
+import { Typography } from 'src/components/Typography';
 import { useLoabalancerConfigurationsInfiniteQuery } from 'src/queries/aglb/configurations';
 
 import { ConfigurationAccordion } from './Configurations/ConfigurationAccordion';
 import { ConfigurationForm } from './Configurations/ConfigurationForm';
+import { CONFIGURATION_COPY } from './Configurations/constants';
 
 export const LoadBalancerConfigurations = () => {
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
@@ -39,16 +41,19 @@ export const LoadBalancerConfigurations = () => {
   const configurations = data?.pages.flatMap((page) => page.data);
 
   return (
-    <>
-      {configurations?.map((configuration) => (
-        <ConfigurationAccordion
-          configuration={configuration}
-          key={configuration.id}
-        />
-      ))}
+    <Stack gap={2} mt={2}>
+      <Typography>{CONFIGURATION_COPY.Description}</Typography>
+      <Box>
+        {configurations?.map((configuration) => (
+          <ConfigurationAccordion
+            configuration={configuration}
+            key={configuration.id}
+          />
+        ))}
+      </Box>
       {hasNextPage && <Waypoint onEnter={() => fetchNextPage()} />}
       {isFetchingNextPage && <CircleProgress mini />}
-      <Stack my={2} spacing={2}>
+      <Stack spacing={2}>
         <Box>
           <Button buttonType="outlined" onClick={() => setIsCreating(true)}>
             Add {configurations?.length === 0 ? '' : 'another'} Configuration
@@ -69,6 +74,6 @@ export const LoadBalancerConfigurations = () => {
           </Paper>
         )}
       </Stack>
-    </>
+    </Stack>
   );
 };