Skip to content

Commit 2535799

Browse files
mduda-akamaimduda-akamai
authored
[DPS-33117] Delivery form (linode#12350)
1 parent aac4196 commit 2535799

File tree

10 files changed

+491
-33
lines changed

10 files changed

+491
-33
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Upcoming Features
3+
---
4+
5+
DataStream: add Delivery form in Create Stream view ([#12350](https://github.com/linode/manager/pull/12350))

packages/manager/src/features/DataStream/Streams/StreamCreate/StreamCreate.styles.ts renamed to packages/manager/src/features/DataStream/DataStream.styles.ts

File renamed without changes.

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Box, InputLabel } from '@linode/ui';
2+
import { styled } from '@mui/material/styles';
3+
import * as React from 'react';
4+
5+
export type PathSampleProps = {
6+
className?: string;
7+
value: string;
8+
};
9+
10+
export const PathSample = (props: PathSampleProps) => {
11+
const { className, value } = props;
12+
13+
return (
14+
<Box className={className} display="flex" flexDirection="column">
15+
<InputLabel>Destination object name sample</InputLabel>
16+
<StyledValue>{value}</StyledValue>
17+
</Box>
18+
);
19+
};
20+
21+
const StyledValue = styled('span', { label: 'StyledValue' })(({ theme }) => ({
22+
backgroundColor: theme.tokens.alias.Interaction.Background.Disabled,
23+
height: 34,
24+
padding: theme.spacingFunction(8),
25+
}));

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,29 @@ import { FormProvider, useForm } from 'react-hook-form';
55

66
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
77
import { LandingHeader } from 'src/components/LandingHeader';
8+
import { useStyles } from 'src/features/DataStream/DataStream.styles';
89

9-
import { useStyles } from './StreamCreate.styles';
1010
import { StreamCreateCheckoutBar } from './StreamCreateCheckoutBar';
1111
import { StreamCreateDataSet } from './StreamCreateDataSet';
1212
import { StreamCreateDelivery } from './StreamCreateDelivery';
1313
import { StreamCreateGeneralInfo } from './StreamCreateGeneralInfo';
14-
import { type CreateStreamForm, EventType, StreamType } from './types';
14+
import {
15+
type CreateStreamForm,
16+
destinationType,
17+
eventType,
18+
streamType,
19+
} from './types';
1520

1621
export const StreamCreate = () => {
1722
const { classes } = useStyles();
1823
const form = useForm<CreateStreamForm>({
1924
defaultValues: {
20-
type: StreamType.AuditLogs,
21-
[EventType.Authorization]: false,
22-
[EventType.Authentication]: false,
23-
[EventType.Configuration]: false,
25+
type: streamType.AuditLogs,
26+
[eventType.Authorization]: false,
27+
[eventType.Authentication]: false,
28+
[eventType.Configuration]: false,
29+
destination_type: destinationType.LinodeObjectStorage,
30+
region: '',
2431
},
2532
});
2633

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { EventType } from './types';
1+
import { eventType } from './types';
22

33
export const dataSets = [
44
{
5-
id: EventType.Configuration,
5+
id: eventType.Configuration,
66
name: 'Configuration',
77
description: 'Resource creation, modification, and deletion.',
88
details: {
@@ -11,7 +11,7 @@ export const dataSets = [
1111
},
1212
},
1313
{
14-
id: EventType.Authentication,
14+
id: eventType.Authentication,
1515
name: 'Authentication',
1616
description: 'Login and identity verification events.',
1717
details: {
@@ -20,7 +20,7 @@ export const dataSets = [
2020
},
2121
},
2222
{
23-
id: EventType.Authorization,
23+
id: eventType.Authorization,
2424
name: 'Authorization',
2525
description: 'User roles, permissions, and access control changes.',
2626
details: {

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { screen } from '@testing-library/react';
2+
import userEvent from '@testing-library/user-event';
3+
import React from 'react';
4+
5+
import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
6+
7+
import { StreamCreateDelivery } from './StreamCreateDelivery';
8+
import { destinationType } from './types';
9+
10+
describe('StreamCreateDelivery', () => {
11+
it('should render disabled Destination Type input with proper selection', async () => {
12+
renderWithThemeAndHookFormContext({
13+
component: <StreamCreateDelivery />,
14+
useFormOptions: {
15+
defaultValues: {
16+
destination_type: destinationType.LinodeObjectStorage,
17+
},
18+
},
19+
});
20+
21+
const destinationTypeAutocomplete =
22+
screen.getByLabelText('Destination Type');
23+
24+
expect(destinationTypeAutocomplete).toBeDisabled();
25+
expect(destinationTypeAutocomplete).toHaveValue('Linode Object Storage');
26+
});
27+
28+
it('should render Destination Name input and allow to select an existing option', async () => {
29+
renderWithThemeAndHookFormContext({
30+
component: <StreamCreateDelivery />,
31+
useFormOptions: {
32+
defaultValues: {
33+
destination_label: '',
34+
},
35+
},
36+
});
37+
38+
const destinationNameAutocomplete =
39+
screen.getByLabelText('Destination Name');
40+
41+
// Open the dropdown
42+
await userEvent.click(destinationNameAutocomplete);
43+
44+
// Select the "Destination 1" option
45+
const firstDestination = await screen.findByText('Destination 1');
46+
await userEvent.click(firstDestination);
47+
48+
expect(destinationNameAutocomplete).toHaveValue('Destination 1');
49+
});
50+
51+
const renderComponentAndAddNewDestinationName = async () => {
52+
renderWithThemeAndHookFormContext({
53+
component: <StreamCreateDelivery />,
54+
useFormOptions: {
55+
defaultValues: {
56+
destination_label: '',
57+
},
58+
},
59+
});
60+
61+
const destinationNameAutocomplete =
62+
screen.getByLabelText('Destination Name');
63+
64+
// Open the dropdown
65+
await userEvent.click(destinationNameAutocomplete);
66+
67+
// Type in a new destination name
68+
await userEvent.type(destinationNameAutocomplete, 'New test destination');
69+
70+
// Select the "Create New test destination" option
71+
const createNewTestDestination = await screen.findByText(
72+
'New test destination',
73+
{ exact: false }
74+
);
75+
await userEvent.click(createNewTestDestination);
76+
};
77+
78+
it('should render Destination Name input and allow to add a new option', async () => {
79+
await renderComponentAndAddNewDestinationName();
80+
81+
const destinationNameAutocomplete =
82+
screen.getByLabelText('Destination Name');
83+
84+
// Move focus away from the dropdown
85+
await userEvent.tab();
86+
87+
expect(destinationNameAutocomplete).toHaveValue('New test destination');
88+
});
89+
90+
it('should render Host input after adding a new destination name and allow to type text', async () => {
91+
await renderComponentAndAddNewDestinationName();
92+
93+
// Type the test value inside the input
94+
const hostInput = screen.getByLabelText('Host');
95+
await userEvent.type(hostInput, 'Test');
96+
97+
expect(hostInput.getAttribute('value')).toEqual('Test');
98+
});
99+
100+
it('should render Bucket input after adding a new destination name and allow to type text', async () => {
101+
await renderComponentAndAddNewDestinationName();
102+
103+
// Type the test value inside the input
104+
const bucketInput = screen.getByLabelText('Bucket');
105+
await userEvent.type(bucketInput, 'Test');
106+
107+
expect(bucketInput.getAttribute('value')).toEqual('Test');
108+
});
109+
110+
it('should render Region input after adding a new destination name and allow to select an option', async () => {
111+
await renderComponentAndAddNewDestinationName();
112+
113+
const regionAutocomplete = screen.getByLabelText('Region');
114+
115+
// Open the dropdown
116+
await userEvent.click(regionAutocomplete);
117+
await userEvent.type(regionAutocomplete, 'US, Chi');
118+
119+
// Select the "US, Chicago, IL (us-ord)" option
120+
const chicagoRegion = await screen.findByText('US, Chicago, IL (us-ord)');
121+
await userEvent.click(chicagoRegion);
122+
123+
expect(regionAutocomplete.getAttribute('value')).toEqual(
124+
'US, Chicago, IL (us-ord)'
125+
);
126+
});
127+
128+
it('should render Access Key ID input after adding a new destination name and allow to type text', async () => {
129+
await renderComponentAndAddNewDestinationName();
130+
131+
// Type the test value inside the input
132+
const accessKeyIDInput = screen.getByLabelText('Access Key ID');
133+
await userEvent.type(accessKeyIDInput, 'Test');
134+
135+
expect(accessKeyIDInput.getAttribute('value')).toEqual('Test');
136+
});
137+
138+
it('should render Secret Access Key input after adding a new destination name and allow to type text', async () => {
139+
await renderComponentAndAddNewDestinationName();
140+
141+
// Type the test value inside the input
142+
const secretAccessKeyInput = screen.getByLabelText('Secret Access Key');
143+
await userEvent.type(secretAccessKeyInput, 'Test');
144+
145+
expect(secretAccessKeyInput.getAttribute('value')).toEqual('Test');
146+
});
147+
148+
it('should render Log Path Prefix input after adding a new destination name and allow to type text', async () => {
149+
await renderComponentAndAddNewDestinationName();
150+
151+
// Type the test value inside the input
152+
const logPathPrefixInput = screen.getByLabelText('Log Path Prefix');
153+
await userEvent.type(logPathPrefixInput, 'Test');
154+
155+
expect(logPathPrefixInput.getAttribute('value')).toEqual('Test');
156+
});
157+
});

0 commit comments

Comments
 (0)