diff --git a/packages/api-v4/.changeset/pr-12557-upcoming-features-1753340103984.md b/packages/api-v4/.changeset/pr-12557-upcoming-features-1753340103984.md new file mode 100644 index 00000000000..4bf7b200314 --- /dev/null +++ b/packages/api-v4/.changeset/pr-12557-upcoming-features-1753340103984.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Upcoming Features +--- + +Add validation to Create Stream POST request ([#12557](https://github.com/linode/manager/pull/12557)) diff --git a/packages/api-v4/src/datastream/streams.ts b/packages/api-v4/src/datastream/streams.ts index 70cba790c94..2e9ef2229cd 100644 --- a/packages/api-v4/src/datastream/streams.ts +++ b/packages/api-v4/src/datastream/streams.ts @@ -1,3 +1,5 @@ +import { createStreamSchema } from '@linode/validation'; + import { BETA_API_ROOT } from '../constants'; import Request, { setData, @@ -41,7 +43,7 @@ export const getStreams = (params?: Params, filter?: Filter) => */ export const createStream = (data: CreateStreamPayload) => Request( - setData(data), // @TODO (DPS-34044) add validation schema + setData(data, createStreamSchema), setURL(`${BETA_API_ROOT}/monitor/streams`), setMethod('POST'), ); diff --git a/packages/api-v4/src/datastream/types.ts b/packages/api-v4/src/datastream/types.ts index 340b38517e5..59ca5736517 100644 --- a/packages/api-v4/src/datastream/types.ts +++ b/packages/api-v4/src/datastream/types.ts @@ -86,7 +86,7 @@ interface ClientCertificateDetails { type AuthenticationType = 'basic' | 'none'; interface Authentication { - details: AuthenticationDetails; + details?: AuthenticationDetails; type: AuthenticationType; } diff --git a/packages/manager/.changeset/pr-12557-upcoming-features-1753340182313.md b/packages/manager/.changeset/pr-12557-upcoming-features-1753340182313.md new file mode 100644 index 00000000000..f8387f3e932 --- /dev/null +++ b/packages/manager/.changeset/pr-12557-upcoming-features-1753340182313.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Datastream form validation on create stream and destination ([#12557](https://github.com/linode/manager/pull/12557)) diff --git a/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.test.tsx b/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.test.tsx index d0862710d15..60943a5a9ef 100644 --- a/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.test.tsx +++ b/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.test.tsx @@ -13,7 +13,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_type: destinationType.LinodeObjectStorage, + destination: { type: destinationType.LinodeObjectStorage }, }, }, }); @@ -30,7 +30,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_label: '', + destination: { label: '' }, }, }, }); @@ -47,7 +47,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_type: destinationType.LinodeObjectStorage, + destination: { type: destinationType.LinodeObjectStorage }, }, }, }); @@ -64,7 +64,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_type: destinationType.LinodeObjectStorage, + destination: { type: destinationType.LinodeObjectStorage }, }, }, }); @@ -81,7 +81,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_type: destinationType.LinodeObjectStorage, + destination: { type: destinationType.LinodeObjectStorage }, }, }, }); @@ -104,7 +104,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_type: destinationType.LinodeObjectStorage, + destination: { type: destinationType.LinodeObjectStorage }, }, }, }); @@ -121,7 +121,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_type: destinationType.LinodeObjectStorage, + destination: { type: destinationType.LinodeObjectStorage }, }, }, }); @@ -138,7 +138,7 @@ describe('DestinationCreate', () => { component: , useFormOptions: { defaultValues: { - destination_type: destinationType.LinodeObjectStorage, + destination: { type: destinationType.LinodeObjectStorage }, }, }, }); diff --git a/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.tsx b/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.tsx index 1a5a06d4272..3d318f52d59 100644 --- a/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.tsx +++ b/packages/manager/src/features/DataStream/Destinations/DestinationCreate/DestinationCreate.tsx @@ -1,5 +1,7 @@ +import { yupResolver } from '@hookform/resolvers/yup'; import { destinationType } from '@linode/api-v4'; import { Autocomplete, Box, Button, Paper, TextField } from '@linode/ui'; +import { createDestinationSchema } from '@linode/validation'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form'; @@ -10,7 +12,7 @@ import { getDestinationTypeOption } from 'src/features/DataStream/dataStreamUtil import { DestinationLinodeObjectStorageDetailsForm } from 'src/features/DataStream/Shared/DestinationLinodeObjectStorageDetailsForm'; import { destinationTypeOptions } from 'src/features/DataStream/Shared/types'; -import type { CreateStreamForm } from 'src/features/DataStream/Streams/StreamCreate/types'; +import type { CreateDestinationForm } from 'src/features/DataStream/Shared/types'; export const DestinationCreate = () => { const theme = useTheme(); @@ -30,17 +32,21 @@ export const DestinationCreate = () => { title: 'Create Destination', }; - const form = useForm({ + const form = useForm({ defaultValues: { - destination_type: destinationType.LinodeObjectStorage, - region: '', + type: destinationType.LinodeObjectStorage, + details: { + region: '', + }, }, + mode: 'onBlur', + resolver: yupResolver(createDestinationSchema), }); const { control, handleSubmit } = form; const selectedDestinationType = useWatch({ control, - name: 'destination_type', + name: 'type', }); const onSubmit = handleSubmit(async () => {}); @@ -51,15 +57,16 @@ export const DestinationCreate = () => { -
+ ( { field.onChange(value); }} @@ -71,11 +78,13 @@ export const DestinationCreate = () => { /> ( + name="label" + render={({ field, fieldState }) => ( { field.onChange(value); }} @@ -100,6 +109,7 @@ export const DestinationCreate = () => { >