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.

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

feat: [M3-7164] - Update AGLB Certificates UI #9711

Conversation

bnussman-akamai
Copy link
Member

@bnussman-akamai bnussman-akamai commented Sep 22, 2023

Description 📝

  • Updates AGLB Certificates UI from UX feedback

Major Changes 🔄

  • Updates general routing to be more robust
  • Removes logs from Load Balancers
  • Changes LoadBalancers to Load Balancers
  • Adds tabs to the Certificates tab
    • TLS Certificates (downstream)
    • Service Target Certificates (ca)
  • Makes the Create Certificate Drawer have two dynamic modes
    • Upload TLS Certificate
    • Upload Service Target Certificate

Preview 📷

Before After
Screenshot 2023-09-22 at 11 46 47 AM Screenshot 2023-09-22 at 11 46 30 AM

How to test 🧪

  • Turn on the MSW
  • Test any functionality on the http://localhost:3000/loadbalancers/0/certificate page
    • Verify general routing/deep-linking works
    • Check the Create drawer for both TLS Certificates and Service Target Certificates

@bnussman-akamai bnussman-akamai added the ACLB Relating to the Akamai Cloud Load Balancer label Sep 22, 2023
@bnussman-akamai bnussman-akamai self-assigned this Sep 22, 2023
@bnussman-akamai bnussman-akamai marked this pull request as ready for review September 22, 2023 15:52
@bnussman-akamai bnussman-akamai requested a review from a team as a code owner September 22, 2023 15:52
@bnussman-akamai bnussman-akamai requested review from dwiley-akamai and tyler-akamai and removed request for a team September 22, 2023 15:52
@bnussman-akamai
Copy link
Member Author

I need to update the e2es still!

Copy link
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

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

Looks good in the browser ✅ (i would consider a line break after the period here but pretty low on that)

Screenshot 2023-09-25 at 10 38 46

Left a few non blocking comments otherwise regarding the singular/plural usage in a few spots.

/*
* - Confirms Load Balancer certificate upload UI flow using mocked API requests.
* - Confirms that TLS and Service Target certificates can be uploaded.
* - Confirms that certificates table update to reflects uploaded certificates.
*/
it('can upload a Load Balancer Certificate', () => {
it('can upload a tls certificate', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

nitpick: capitalize TLS since it is everywhere else

<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{' '}
Copy link
Contributor

Choose a reason for hiding this comment

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

"This is the certificate installed on your Endpoints. Apply these certificate(s) in the{' '}"

This is a weird mix of singular and plural

) : (
<Typography>
Certificate used by your load balancer to terminate the connection
and decrypt request from client. Apply these certificate(s) in the
Copy link
Contributor

Choose a reason for hiding this comment

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

same

Copy link
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

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

LGTM overall, although I do agree that the copy can use some tightening up in a few places


const id = Number(loadbalancerId);

const { data: loadbalancer } = useLoadBalancerQuery(id);

const tabs = [
{
routeName: `/loadbalancers/${id}/summary`,
component: LoadBalancerSummary,
path: 'summary',
Copy link
Contributor

Choose a reason for hiding this comment

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

(this is present in develop too)

Screenshot 2023-09-25 at 5 16 16 PM

this can be replicated by going {BASE_URL}/loadbalancers/certificates/summary or something similar that's not a legitimate path.

Seems like we should be displaying a Not Found or redirecting back to the landing page?

@tyler-akamai
Copy link
Contributor

Screenshot 2023-09-26 at 10 20 02 AM

Maybe add some padding for the header texts and the 'Upload Certificate' button when width < 960px.

@tyler-akamai
Copy link
Contributor

tyler-akamai commented Sep 26, 2023

It looks a lot cleaner, great job!

I checked:

  • Styling on 'TLS Certificates' tab
  • Styling and functionality of TLS Certificates 'Upload Certificate' drawer
  • Styling on 'Service Target Certificates' tab
  • Styling and functionality of Service Target Certificates 'Upload Certificate' drawer
  • Table sort functionality
  • Styling when the browser shrinks/grows

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ACLB Relating to the Akamai Cloud Load Balancer
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants