upcoming: [DPS-35924] Custom HTTPS form - first part

packages/api-v4/.changeset/pr-13274-changed-1768306424456.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Adjust Custom HTTPS Destination types ([#13274](https://github.com/linode/manager/pull/13274))

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

@@ -57,7 +57,7 @@ export interface Destination extends DestinationCore, AuditData {
 
 export type DestinationDetails =
   | AkamaiObjectStorageDetails
-  | CustomHTTPsDetails;
+  | CustomHTTPSDetails;
 
 export interface AkamaiObjectStorageDetails {
   access_key_id: string;
@@ -74,7 +74,7 @@ export interface AkamaiObjectStorageDetailsExtended
 type ContentType = 'application/json' | 'application/json; charset=utf-8';
 type DataCompressionType = 'gzip' | 'None';
 
-export interface CustomHTTPsDetails {
+export interface CustomHTTPSDetails {
   authentication: Authentication;
   client_certificate_details?: ClientCertificateDetails;
   content_type: ContentType;
@@ -84,13 +84,19 @@ export interface CustomHTTPsDetails {
 }
 
 interface ClientCertificateDetails {
-  client_ca_certificate: string;
-  client_certificate: string;
-  client_private_key: string;
-  tls_hostname: string;
+  client_ca_certificate?: string;
+  client_certificate?: string;
+  client_private_key?: string;
+  tls_hostname?: string;
 }
 
-type AuthenticationType = 'basic' | 'none';
+export const authenticationType = {
+  Basic: 'basic',
+  None: 'none',
+} as const;
+
+export type AuthenticationType =
+  (typeof authenticationType)[keyof typeof authenticationType];
 
 interface Authentication {
   details?: AuthenticationDetails;
@@ -133,7 +139,7 @@ export interface AkamaiObjectStorageDetailsPayload
 
 export type DestinationDetailsPayload =
   | AkamaiObjectStorageDetailsPayload
-  | CustomHTTPsDetails;
+  | CustomHTTPSDetails;
 
 export interface CreateDestinationPayload {
   details: DestinationDetailsPayload;

packages/manager/.changeset/pr-13274-upcoming-features-1768306102161.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Custom HTTPS destination type with proper fields to Create Destination forms ([#13274](https://github.com/linode/manager/pull/13274))

packages/manager/src/featureFlags.ts

@@ -120,6 +120,10 @@ interface AclpLogsFlag extends BetaFeatureFlag {
    * This property indicates whether to bypass account capabilities check or not
    */
   bypassAccountCapabilities?: boolean;
+  /**
+   * This property indicates whether to show Custom HTTPS destination type
+   */
+  customHttpsEnabled?: boolean;
 }
 
 interface LkeEnterpriseFlag extends BaseFeatureFlag {

packages/manager/src/features/Delivery/Destinations/DestinationForm/DestinationCreate.test.tsx

@@ -12,9 +12,11 @@
 import { DestinationCreate } from './DestinationCreate';
 
 import type { CreateDestinationPayload } from '@linode/api-v4';
+import type { Flags } from 'src/featureFlags';
 
 describe('DestinationCreate', () => {
   const renderDestinationCreate = (
+    flags: Partial<Flags>,
     defaultValues?: Partial<CreateDestinationPayload>
   ) => {
     renderWithThemeAndHookFormContext({
@@ -25,88 +27,183 @@
           ...defaultValues,
         },
       },
+      options: {
+        flags,
+      },
     });
   };
 
-  it('should render disabled Destination Type input with proper selection', async () => {
-    renderDestinationCreate();
+  describe('when customHttpsEnabled feature flag is set to false', () => {
+    const flags = {
+      aclpLogs: {
+        enabled: true,
+        beta: false,
+        customHttpsEnabled: false,
+      },
+    };
 
-    const destinationTypeAutocomplete =
-      screen.getByLabelText('Destination Type');
+    it('should render disabled Destination Type input with proper selection', async () => {
+      renderDestinationCreate(flags);
 
-    expect(destinationTypeAutocomplete).toBeDisabled();
-    expect(destinationTypeAutocomplete).toHaveValue('Akamai Object Storage');
-  });
+      const destinationTypeAutocomplete =
+        screen.getByLabelText('Destination Type');
 
-  it(
-    'should render all inputs for Akamai Object Storage type and allow to fill out them',
-    { timeout: 10000 },
-    async () => {
-      renderDestinationCreate({ label: '' });
+      expect(destinationTypeAutocomplete).toBeDisabled();
+      expect(destinationTypeAutocomplete).toHaveValue('Akamai Object Storage');
+    });
 
-      const destinationNameInput = screen.getByLabelText('Destination Name');
-      await userEvent.type(destinationNameInput, 'Test');
-      const hostInput = screen.getByLabelText('Host');
-      await userEvent.type(hostInput, 'test');
-      const bucketInput = screen.getByLabelText('Bucket');
-      await userEvent.type(bucketInput, 'test');
-      const accessKeyIDInput = screen.getByLabelText('Access Key ID');
-      await userEvent.type(accessKeyIDInput, 'Test');
-      const secretAccessKeyInput = screen.getByLabelText('Secret Access Key');
-      await userEvent.type(secretAccessKeyInput, 'Test');
-      const logPathPrefixInput = screen.getByLabelText('Log Path Prefix');
-      await userEvent.type(logPathPrefixInput, 'Test');
+    it(
+      'should render all inputs for Akamai Object Storage type and allow to fill out them',
+      { timeout: 10000 },
+      async () => {
+        renderDestinationCreate(flags, { label: '' });
+
+        const destinationNameInput = screen.getByLabelText('Destination Name');
+        await userEvent.type(destinationNameInput, 'Test');
+        const hostInput = screen.getByLabelText('Host');
+        await userEvent.type(hostInput, 'test');
+        const bucketInput = screen.getByLabelText('Bucket');
+        await userEvent.type(bucketInput, 'test');
+        const accessKeyIDInput = screen.getByLabelText('Access Key ID');
+        await userEvent.type(accessKeyIDInput, 'Test');
+        const secretAccessKeyInput = screen.getByLabelText('Secret Access Key');
+        await userEvent.type(secretAccessKeyInput, 'Test');
+        const logPathPrefixInput = screen.getByLabelText('Log Path Prefix');
+        await userEvent.type(logPathPrefixInput, 'Test');
 
-      expect(destinationNameInput).toHaveValue('Test');
-      expect(hostInput).toHaveValue('test');
-      expect(bucketInput).toHaveValue('test');
-      expect(accessKeyIDInput).toHaveValue('Test');
-      expect(secretAccessKeyInput).toHaveValue('Test');
-      expect(logPathPrefixInput).toHaveValue('Test');
-    }
-  );
-
-  it('should render Sample Destination Object Name and change its value according to Log Path Prefix input', async () => {
-    const accountEuuid = 'XYZ-123';
-    const [month, day, year] = new Date().toLocaleDateString().split('/');
-    server.use(
-      http.get('*/account', () => {
-        return HttpResponse.json(accountFactory.build({ euuid: accountEuuid }));
-      })
+        expect(destinationNameInput).toHaveValue('Test');
+        expect(hostInput).toHaveValue('test');
+        expect(bucketInput).toHaveValue('test');
+        expect(accessKeyIDInput).toHaveValue('Test');
+        expect(secretAccessKeyInput).toHaveValue('Test');
+        expect(logPathPrefixInput).toHaveValue('Test');
+      }
     );
 
-    renderDestinationCreate();
+    it('should render Sample Destination Object Name and change its value according to Log Path Prefix input', async () => {
+      const accountEuuid = 'XYZ-123';
+      const [month, day, year] = new Date().toLocaleDateString().split('/');
+      server.use(
+        http.get('*/account', () => {
+          return HttpResponse.json(
+            accountFactory.build({ euuid: accountEuuid })
+          );
+        })
+      );
+
+      renderDestinationCreate(flags);
+
+      let samplePath;
+      await waitFor(() => {
+        samplePath = screen.getByText(
+          `/audit_logs/com.akamai.audit/${accountEuuid}/${year}/${month}/${day}/akamai_log-000166-1756015362-319597-login.gz`
+        );
+        expect(samplePath).toBeInTheDocument();
+      });
+      // Type the test value inside the input
+      const logPathPrefixInput = screen.getByLabelText('Log Path Prefix');
+
+      await userEvent.type(logPathPrefixInput, 'test');
+      // sample path should be created based on *log path* value
+      expect(samplePath!.textContent).toEqual(
+        '/test/akamai_log-000166-1756015362-319597-login.gz'
+      );
+
+      await userEvent.clear(logPathPrefixInput);
+      await userEvent.type(logPathPrefixInput, '/test');
+      expect(samplePath!.textContent).toEqual(
+        '/test/akamai_log-000166-1756015362-319597-login.gz'
+      );
 
-    let samplePath;
-    await waitFor(() => {
-      samplePath = screen.getByText(
-        `/audit_logs/com.akamai.audit/${accountEuuid}/${year}/${month}/${day}/akamai_log-000166-1756015362-319597-login.gz`
+      await userEvent.clear(logPathPrefixInput);
+      await userEvent.type(logPathPrefixInput, '/');
+      expect(samplePath!.textContent).toEqual(
+        '/akamai_log-000166-1756015362-319597-login.gz'
       );
-      expect(samplePath).toBeInTheDocument();
     });
-    // Type the test value inside the input
-    const logPathPrefixInput = screen.getByLabelText('Log Path Prefix');
+  });
 
-    await userEvent.type(logPathPrefixInput, 'test');
-    // sample path should be created based on *log path* value
-    expect(samplePath!.textContent).toEqual(
-      '/test/akamai_log-000166-1756015362-319597-login.gz'
-    );
+  describe('when customHttpsEnabled feature flag is set to true', () => {
+    const flags = {
+      aclpLogs: {
+        enabled: true,
+        beta: false,
+        customHttpsEnabled: true,
+      },
+    };
 
-    await userEvent.clear(logPathPrefixInput);
-    await userEvent.type(logPathPrefixInput, '/test');
-    expect(samplePath!.textContent).toEqual(
-      '/test/akamai_log-000166-1756015362-319597-login.gz'
-    );
+    it('should render enabled Destination Type input with Akamai Object Storage selected and allow to select Custom HTTPS', async () => {
+      renderDestinationCreate(flags);
+
+      const destinationTypeAutocomplete =
+        screen.getByLabelText('Destination Type');
 
-    await userEvent.clear(logPathPrefixInput);
-    await userEvent.type(logPathPrefixInput, '/');
-    expect(samplePath!.textContent).toEqual(
-      '/akamai_log-000166-1756015362-319597-login.gz'
+      expect(destinationTypeAutocomplete).toBeEnabled();
+      expect(destinationTypeAutocomplete).toHaveValue('Akamai Object Storage');
+      await userEvent.click(destinationTypeAutocomplete);
+      const customHttpsOption = await screen.findByText('Custom HTTPS');
+      await userEvent.click(customHttpsOption);
+      expect(destinationTypeAutocomplete).toHaveValue('Custom HTTPS');
+    });
+
+    it(
+      'should render all inputs for Custom HTTPS type and allow to fill them out',
+      { timeout: 10000 },
+      async () => {
+        renderDestinationCreate(flags, { label: '' });
+
+        const destinationTypeAutocomplete =
+          screen.getByLabelText('Destination Type');
+        await userEvent.click(destinationTypeAutocomplete);
+        const customHttpsOption = await screen.findByText('Custom HTTPS');
+        await userEvent.click(customHttpsOption);
+        expect(destinationTypeAutocomplete).toHaveValue('Custom HTTPS');
+
+        const destinationNameInput = screen.getByLabelText('Destination Name');
+        await userEvent.type(destinationNameInput, 'Test');
+
+        // With None Authentication type selected, the Username and Password inputs should not be rendered
+        const notYetExistingUsernameInput = screen.queryByLabelText('Username');
+        expect(notYetExistingUsernameInput).not.toBeInTheDocument();
+        const notYetExistingPasswordInput = screen.queryByLabelText('Password');
+        expect(notYetExistingPasswordInput).not.toBeInTheDocument();
+
+        // Open Authentication select and choose Basic option
+        const authenticationAutocomplete =
+          screen.getByLabelText('Authentication');
+        expect(authenticationAutocomplete).toHaveValue('None');
+        await userEvent.click(authenticationAutocomplete);
+        const basicAuthentication = await screen.findByText('Basic');
+        await userEvent.click(basicAuthentication);
+        expect(authenticationAutocomplete).toHaveValue('Basic');
+
+        // With Authentication type set to Basic, the Username and Password inputs should be rendered
+        const usernameInput = screen.getByLabelText('Username');
+        await userEvent.type(usernameInput, 'Username test');
+        expect(usernameInput.getAttribute('value')).toEqual('Username test');
+
+        const passwordInput = screen.getByLabelText('Password');
+        await userEvent.type(passwordInput, 'Password test');
+        expect(passwordInput.getAttribute('value')).toEqual('Password test');
+
+        // Endpoint URL
+        const endpointUrlInput = screen.getByLabelText('Endpoint URL');
+        await userEvent.type(endpointUrlInput, 'Endpoint URL test');
+        expect(endpointUrlInput.getAttribute('value')).toEqual(
+          'Endpoint URL test'
+        );
+      }
     );
   });
 
   describe('given Test Connection and Create Destination buttons', () => {
+    const flags = {
+      aclpLogs: {
+        enabled: true,
+        beta: false,
+        customHttpsEnabled: false,
+      },
+    };
     const testConnectionButtonText = 'Test Connection';
     const createDestinationButtonText = 'Create Destination';
 
@@ -144,7 +241,7 @@
           })
         );
 
-        renderDestinationCreate();
+        renderDestinationCreate(flags);
 
         const testConnectionButton = screen.getByRole('button', {
           name: testConnectionButtonText,
@@ -181,7 +278,7 @@
           })
         );
 
-        renderDestinationCreate();
+        renderDestinationCreate(flags);
 
         const testConnectionButton = screen.getByRole('button', {
           name: testConnectionButtonText,