upcoming: [DPS-33117] Delivery form

packages/manager/.changeset/pr-12350-upcoming-features-1749549622351.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DataStream: add Delivery form in Create Stream view ([#12350](https://github.com/linode/manager/pull/12350))

packages/manager/src/features/DataStream/Shared/PathSample.tsx

@@ -0,0 +1,25 @@
+import { Box, InputLabel } from '@linode/ui';
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+
+export type PathSampleProps = {
+  className?: string;
+  value: string;
+};
+
+export const PathSample = (props: PathSampleProps) => {
+  const { className, value } = props;
+
+  return (
+    <Box className={className} display="flex" flexDirection="column">
+      <InputLabel>Destination object name sample</InputLabel>
+      <StyledValue>{value}</StyledValue>
+    </Box>
+  );
+};
+
+const StyledValue = styled('span', { label: 'StyledValue' })(({ theme }) => ({
+  backgroundColor: theme.tokens.alias.Interaction.Background.Disabled,
+  height: 34,
+  padding: theme.spacingFunction(8),
+}));

packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreate.tsx

@@ -5,22 +5,29 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
+import { useStyles } from 'src/features/DataStream/DataStream.styles';
 
-import { useStyles } from './StreamCreate.styles';
 import { StreamCreateCheckoutBar } from './StreamCreateCheckoutBar';
 import { StreamCreateDataSet } from './StreamCreateDataSet';
 import { StreamCreateDelivery } from './StreamCreateDelivery';
 import { StreamCreateGeneralInfo } from './StreamCreateGeneralInfo';
-import { type CreateStreamForm, EventType, StreamType } from './types';
+import {
+  type CreateStreamForm,
+  destinationType,
+  eventType,
+  streamType,
+} from './types';
 
 export const StreamCreate = () => {
   const { classes } = useStyles();
   const form = useForm<CreateStreamForm>({
     defaultValues: {
-      type: StreamType.AuditLogs,
-      [EventType.Authorization]: false,
-      [EventType.Authentication]: false,
-      [EventType.Configuration]: false,
+      type: streamType.AuditLogs,
+      [eventType.Authorization]: false,
+      [eventType.Authentication]: false,
+      [eventType.Configuration]: false,
+      destination_type: destinationType.LinodeObjectStorage,
+      region: '',
     },
   });
 

packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDataSetData.ts

@@ -1,8 +1,8 @@
-import { EventType } from './types';
+import { eventType } from './types';
 
 export const dataSets = [
   {
-    id: EventType.Configuration,
+    id: eventType.Configuration,
     name: 'Configuration',
     description: 'Resource creation, modification, and deletion.',
     details: {
@@ -11,7 +11,7 @@ export const dataSets = [
     },
   },
   {
-    id: EventType.Authentication,
+    id: eventType.Authentication,
     name: 'Authentication',
     description: 'Login and identity verification events.',
     details: {
@@ -20,7 +20,7 @@ export const dataSets = [
     },
   },
   {
-    id: EventType.Authorization,
+    id: eventType.Authorization,
     name: 'Authorization',
     description: 'User roles, permissions, and access control changes.',
     details: {

packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreateDelivery.test.tsx

@@ -0,0 +1,157 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
+
+import { StreamCreateDelivery } from './StreamCreateDelivery';
+import { destinationType } from './types';
+
+describe('StreamCreateDelivery', () => {
+  it('should render disabled Destination Type input with proper selection', async () => {
+    renderWithThemeAndHookFormContext({
+      component: <StreamCreateDelivery />,
+      useFormOptions: {
+        defaultValues: {
+          destination_type: destinationType.LinodeObjectStorage,
+        },
+      },
+    });
+
+    const destinationTypeAutocomplete =
+      screen.getByLabelText('Destination Type');
+
+    expect(destinationTypeAutocomplete).toBeDisabled();
+    expect(destinationTypeAutocomplete).toHaveValue('Linode Object Storage');
+  });
+
+  it('should render Destination Name input and allow to select an existing option', async () => {
+    renderWithThemeAndHookFormContext({
+      component: <StreamCreateDelivery />,
+      useFormOptions: {
+        defaultValues: {
+          destination_label: '',
+        },
+      },
+    });
+
+    const destinationNameAutocomplete =
+      screen.getByLabelText('Destination Name');
+
+    // Open the dropdown
+    await userEvent.click(destinationNameAutocomplete);
+
+    // Select the "Destination 1" option
+    const firstDestination = await screen.findByText('Destination 1');
+    await userEvent.click(firstDestination);
+
+    expect(destinationNameAutocomplete).toHaveValue('Destination 1');
+  });
+
+  const renderComponentAndAddNewDestinationName = async () => {
+    renderWithThemeAndHookFormContext({
+      component: <StreamCreateDelivery />,
+      useFormOptions: {
+        defaultValues: {
+          destination_label: '',
+        },
+      },
+    });
+
+    const destinationNameAutocomplete =
+      screen.getByLabelText('Destination Name');
+
+    // Open the dropdown
+    await userEvent.click(destinationNameAutocomplete);
+
+    // Type in a new destination name
+    await userEvent.type(destinationNameAutocomplete, 'New test destination');
+
+    // Select the "Create New test destination" option
+    const createNewTestDestination = await screen.findByText(
+      'New test destination',
+      { exact: false }
+    );
+    await userEvent.click(createNewTestDestination);
+  };
+
+  it('should render Destination Name input and allow to add a new option', async () => {
+    await renderComponentAndAddNewDestinationName();
+
+    const destinationNameAutocomplete =
+      screen.getByLabelText('Destination Name');
+
+    // Move focus away from the dropdown
+    await userEvent.tab();
+
+    expect(destinationNameAutocomplete).toHaveValue('New test destination');
+  });
+
+  it('should render Host input after adding a new destination name and allow to type text', async () => {
+    await renderComponentAndAddNewDestinationName();
+
+    // Type the test value inside the input
+    const hostInput = screen.getByLabelText('Host');
+    await userEvent.type(hostInput, 'Test');
+
+    expect(hostInput.getAttribute('value')).toEqual('Test');
+  });
+
+  it('should render Bucket input after adding a new destination name and allow to type text', async () => {
+    await renderComponentAndAddNewDestinationName();
+
+    // Type the test value inside the input
+    const bucketInput = screen.getByLabelText('Bucket');
+    await userEvent.type(bucketInput, 'Test');
+
+    expect(bucketInput.getAttribute('value')).toEqual('Test');
+  });
+
+  it('should render Region input after adding a new destination name and allow to select an option', async () => {
+    await renderComponentAndAddNewDestinationName();
+
+    const regionAutocomplete = screen.getByLabelText('Region');
+
+    // Open the dropdown
+    await userEvent.click(regionAutocomplete);
+    await userEvent.type(regionAutocomplete, 'US, Chi');
+
+    // Select the "US, Chicago, IL (us-ord)" option
+    const chicagoRegion = await screen.findByText('US, Chicago, IL (us-ord)');
+    await userEvent.click(chicagoRegion);
+
+    expect(regionAutocomplete.getAttribute('value')).toEqual(
+      'US, Chicago, IL (us-ord)'
+    );
+  });
+
+  it('should render Access Key ID input after adding a new destination name and allow to type text', async () => {
+    await renderComponentAndAddNewDestinationName();
+
+    // Type the test value inside the input
+    const accessKeyIDInput = screen.getByLabelText('Access Key ID');
+    await userEvent.type(accessKeyIDInput, 'Test');
+
+    expect(accessKeyIDInput.getAttribute('value')).toEqual('Test');
+  });
+
+  it('should render Secret Access Key input after adding a new destination name and allow to type text', async () => {
+    await renderComponentAndAddNewDestinationName();
+
+    // Type the test value inside the input
+    const secretAccessKeyInput = screen.getByLabelText('Secret Access Key');
+    await userEvent.type(secretAccessKeyInput, 'Test');
+
+    expect(secretAccessKeyInput.getAttribute('value')).toEqual('Test');
+  });
+
+  it('should render Log Path Prefix input after adding a new destination name and allow to type text', async () => {
+    await renderComponentAndAddNewDestinationName();
+
+    // Type the test value inside the input
+    const logPathPrefixInput = screen.getByLabelText('Log Path Prefix');
+    await userEvent.type(logPathPrefixInput, 'Test');
+
+    expect(logPathPrefixInput.getAttribute('value')).toEqual('Test');
+  });
+});