Address feedback

linode · Oct 3, 2023 · 499247b · 499247b
1 parent ae8cf08
commit 499247b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/packages/api-v4/src/aglb/types.ts b/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;
 }
 

diff --git a/packages/manager/src/factories/aglb.ts b/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',
   }

diff --git a/...er/src/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.tsx b/...er/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"

diff --git a/...src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.test.tsx b/...src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.test.tsx
@@ -3,16 +3,19 @@ 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',
@@ -22,7 +25,7 @@ describe('EditCertificateDrawer', () => {
   it('should contain the name of the cert in the drawer title and label field', () => {
     const onClose = jest.fn();
 
-    const { getByTestId, getByLabelText } = renderWithTheme(
+    const { getByLabelText, getByTestId } = renderWithTheme(
       <EditCertificateDrawer
         certificate={mockTLSCertificate}
         loadbalancerId={0}

diff --git a/...ager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.tsx b/...ager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.tsx
@@ -18,7 +18,7 @@ interface Props {
   open: boolean;
 }
 
-const labelMap: Record<Certificate['type'], string> = {
+export const labelMap: Record<Certificate['type'], string> = {
   ca: 'Server Certificate',
   downstream: 'TLS Certificate',
 };
@@ -92,23 +92,27 @@ export const EditCertificateDrawer = (props: Props) => {
             value={formik.values.label}
           />
           <TextField
+            disabled
             errorText={errorMap.certificate}
             label={labelMap[certificate.type]}
             labelTooltipText="TODO: AGLB"
             multiline
             name="certificate"
             onChange={formik.handleChange}
+            placeholder={certificate.certificate ?? ''}
             trimmed
             value={formik.values.certificate}
           />
           {certificate?.type === 'downstream' && (
             <TextField
+              disabled
               errorText={errorMap.key}
               label="Private Key"
               labelTooltipText="TODO: AGLB"
               multiline
               name="key"
               onChange={formik.handleChange}
+              placeholder="Key is concealed."
               trimmed
               value={formik.values.key}
             />