feat: [M3-7160] - Add AGLB "Edit Certificate" drawer

packages/api-v4/src/aglb/certificates.ts

@@ -7,8 +7,15 @@ import Request, {
 } from '../request';
 import { BETA_API_ROOT } from '../constants';
 import { Filter, Params, ResourcePage } from '../types';
-import { Certificate, CreateCertificatePayload } from './types';
-import { CreateCertificateSchema } from '@linode/validation';
+import {
+  Certificate,
+  CreateCertificatePayload,
+  UpdateCertificatePayload,
+} from './types';
+import {
+  CreateCertificateSchema,
+  UpdateCertificateSchema,
+} from '@linode/validation';
 
 /**
  * getLoadbalancerCertificates
@@ -67,12 +74,12 @@ export const createLoadbalancerCertificate = (
 /**
  * updateLoadbalancerCertificate
  *
- * Creates an Akamai Global Load Balancer certificate
+ * Updates an Akamai Global Load Balancer certificate
  */
 export const updateLoadbalancerCertificate = (
   loadbalancerId: number,
   certificateId: number,
-  data: Partial<CreateCertificatePayload>
+  data: Partial<UpdateCertificatePayload>
 ) =>
   Request<Certificate>(
     setURL(
@@ -81,7 +88,7 @@ export const updateLoadbalancerCertificate = (
       )}/certificates/${encodeURIComponent(certificateId)}`
     ),
     setMethod('PUT'),
-    setData(data)
+    setData(data, UpdateCertificateSchema)
   );
 
 /**

packages/api-v4/src/aglb/types.ts

@@ -141,6 +141,7 @@ type CertificateType = 'ca' | 'downstream';
 export interface Certificate {
   id: number;
   label: string;
+  certificate: string;
   type: CertificateType;
 }
 
@@ -150,3 +151,10 @@ export interface CreateCertificatePayload {
   label: string;
   type: CertificateType;
 }
+
+export interface UpdateCertificatePayload {
+  key?: string;
+  certificate?: string;
+  label?: string;
+  type?: CertificateType;
+}

packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts

@@ -145,7 +145,7 @@ describe('Akamai Global Load Balancer certificates page', () => {
           .should('be.visible')
           .type(mockLoadBalancerCertServiceTarget.label);
 
-        cy.findByLabelText('TLS Certificate')
+        cy.findByLabelText('Server Certificate')
           .should('be.visible')
           .type(randomString(32));
 

packages/manager/src/factories/aglb.ts

@@ -13,7 +13,7 @@ import {
 } from '@linode/api-v4/lib/aglb/types';
 import * as Factory from 'factory.ts';
 
-const certificate = `
+export const mockCertificate = `
 -----BEGIN CERTIFICATE-----
 MIID0DCCArigAwIBAgIBATANBgkqhkiG9w0BAQUFADB/MQswCQYDVQQGEwJGUjET
 MBEGA1UECAwKU29tZS1TdGF0ZTEOMAwGA1UEBwwFUGFyaXMxDTALBgNVBAoMBERp
@@ -39,7 +39,7 @@ cbTV5RDkrlaYwm5yqlTIglvCv7o=
 -----END CERTIFICATE-----
 `;
 
-const key = `
+const mockKey = `
 -----BEGIN RSA PRIVATE KEY-----
 MIIEowIBAAKCAQEAvpnaPKLIKdvx98KW68lz8pGaRRcYersNGqPjpifMVjjE8LuC
 oXgPU0HePnNTUjpShBnynKCvrtWhN+haKbSp+QWXSxiTrW99HBfAl1MDQyWcukoE
@@ -275,15 +275,16 @@ export const createServiceTargetFactory = Factory.Sync.makeFactory<ServiceTarget
 // Certificate endpoints
 // *********************
 export const certificateFactory = Factory.Sync.makeFactory<Certificate>({
+  certificate: mockCertificate,
   id: Factory.each((i) => i),
   label: Factory.each((i) => `certificate-${i}`),
   type: 'ca',
 });
 
 export const createCertificateFactory = Factory.Sync.makeFactory<CreateCertificatePayload>(
   {
-    certificate,
-    key,
+    certificate: mockCertificate,
+    key: mockKey,
     label: 'my-cert',
     type: 'downstream',
   }

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx

@@ -22,6 +22,7 @@ import { useLoadBalancerCertificatesQuery } from 'src/queries/aglb/certificates'
 
 import { CreateCertificateDrawer } from './CreateCertificateDrawer';
 import { DeleteCertificateDialog } from './DeleteCertificateDialog';
+import { EditCertificateDrawer } from './EditCertificateDrawer';
 
 import type { Certificate, Filter } from '@linode/api-v4';
 
@@ -40,6 +41,7 @@ export const Certificates = () => {
   const history = useHistory();
 
   const isCreateDrawerOpen = location.pathname.endsWith('/create');
+  const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false);
   const [isDeleteDrawerOpen, setIsDeleteDrawerOpen] = useState(false);
 
   const [selectedCertificateId, setSelectedCertificateId] = useState<number>();
@@ -69,6 +71,11 @@ export const Certificates = () => {
     filter
   );
 
+  const onEditCertificate = (certificate: Certificate) => {
+    setIsEditDrawerOpen(true);
+    setSelectedCertificateId(certificate.id);
+  };
+
   const onDeleteCertificate = (certificate: Certificate) => {
     setIsDeleteDrawerOpen(true);
     setSelectedCertificateId(certificate.id);
@@ -147,7 +154,10 @@ export const Certificates = () => {
               <TableCell actionCell>
                 <ActionMenu
                   actionsList={[
-                    { onClick: () => null, title: 'Edit' },
+                    {
+                      onClick: () => onEditCertificate(certificate),
+                      title: 'Edit',
+                    },
                     {
                       onClick: () => onDeleteCertificate(certificate),
                       title: 'Delete',
@@ -175,6 +185,12 @@ export const Certificates = () => {
         open={isCreateDrawerOpen}
         type={certType}
       />
+      <EditCertificateDrawer
+        certificate={selectedCertificate}
+        loadbalancerId={id}
+        onClose={() => setIsEditDrawerOpen(false)}
+        open={isEditDrawerOpen}
+      />
       <DeleteCertificateDialog
         certificate={selectedCertificate}
         loadbalancerId={id}

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.tsx

@@ -9,6 +9,8 @@ import { Typography } from 'src/components/Typography';
 import { useLoadBalancerCertificateCreateMutation } from 'src/queries/aglb/certificates';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
+import { labelMap } from './EditCertificateDrawer';
+
 import type { Certificate, CreateCertificatePayload } from '@linode/api-v4';
 
 interface Props {
@@ -91,7 +93,7 @@ export const CreateCertificateDrawer = (props: Props) => {
         />
         <TextField
           errorText={errorMap.certificate}
-          label="TLS Certificate"
+          label={labelMap[type]}
           labelTooltipText="TODO"
           multiline
           name="certificate"

packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.test.tsx

@@ -0,0 +1,118 @@
+import { Certificate } from '@linode/api-v4';
+import { act, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { mockCertificate } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { EditCertificateDrawer } from './EditCertificateDrawer';
+
+const mockTLSCertificate: Certificate = {
+  certificate: mockCertificate,
+  id: 0,
+  label: 'test-tls-cert',
+  type: 'downstream',
+};
+const mockCACertificate: Certificate = {
+  certificate: mockCertificate,
+  id: 0,
+  label: 'test-ca-cert',
+  type: 'ca',
+};
+
+describe('EditCertificateDrawer', () => {
+  it('should contain the name of the cert in the drawer title and label field', () => {
+    const onClose = jest.fn();
+
+    const { getByLabelText, getByTestId } = renderWithTheme(
+      <EditCertificateDrawer
+        certificate={mockTLSCertificate}
+        loadbalancerId={0}
+        onClose={onClose}
+        open
+      />
+    );
+
+    const labelInput = getByLabelText('Certificate Label');
+
+    expect(getByTestId('drawer-title')).toHaveTextContent(
+      `Edit ${mockTLSCertificate.label}`
+    );
+    expect(labelInput).toHaveDisplayValue(mockTLSCertificate.label);
+  });
+
+  it('should contain the cert in the cert field and placeholder text in the private key for a downstream cert', () => {
+    const onClose = jest.fn();
+
+    const { getByLabelText } = renderWithTheme(
+      <EditCertificateDrawer
+        certificate={mockTLSCertificate}
+        loadbalancerId={0}
+        onClose={onClose}
+        open
+      />
+    );
+
+    const certInput = getByLabelText('TLS Certificate');
+    const keyInput = getByLabelText('Private Key');
+
+    expect(certInput).toHaveDisplayValue(mockTLSCertificate.certificate.trim());
+    expect(keyInput).toHaveAttribute(
+      'placeholder',
+      'Private key is redacted for security.'
+    );
+  });
+
+  it('should submit and close drawer when only the label of the certificate is edited', async () => {
+    const onClose = jest.fn();
+
+    const { getByLabelText, getByTestId } = renderWithTheme(
+      <EditCertificateDrawer
+        certificate={mockCACertificate}
+        loadbalancerId={0}
+        onClose={onClose}
+        open
+      />
+    );
+
+    const labelInput = getByLabelText('Certificate Label');
+    const certInput = getByLabelText('Server Certificate');
+
+    expect(labelInput).toHaveDisplayValue(mockCACertificate.label);
+    expect(certInput).toHaveDisplayValue(mockCACertificate.certificate.trim());
+
+    act(() => {
+      userEvent.type(labelInput, 'my-updated-cert-0');
+      userEvent.click(getByTestId('submit'));
+    });
+
+    await waitFor(() => expect(onClose).toBeCalled());
+  });
+
+  it('should submit and close drawer when both a certificate and key are included', async () => {
+    const onClose = jest.fn();
+
+    const { getByLabelText, getByTestId } = renderWithTheme(
+      <EditCertificateDrawer
+        certificate={mockTLSCertificate}
+        loadbalancerId={0}
+        onClose={onClose}
+        open
+      />
+    );
+    const labelInput = getByLabelText('Certificate Label');
+    const certInput = getByLabelText('TLS Certificate');
+    const keyInput = getByLabelText('Private Key');
+
+    act(() => {
+      userEvent.type(labelInput, 'my-cert-0');
+      userEvent.type(certInput, 'massive cert');
+      userEvent.type(keyInput, 'massive key');
+
+      userEvent.click(getByTestId('submit'));
+    });
+
+    await waitFor(() => expect(onClose).toBeCalled());
+  });
+});