upcoming: [M3-8310] - Add Validation to Linode Create v2 Marketplace …

…Tab (linode#10629)

* add validation for marketplace tab

* Added changeset: Add Validation to Linode Create v2 Marketplace Tab

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

packages/manager/.changeset/pr-10629-upcoming-features-1719848495146.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Validation to Linode Create v2 Marketplace Tab ([#10629](https://github.com/linode/manager/pull/10629))

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSelect.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
+import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
@@ -11,6 +13,7 @@ import { useMarketplaceAppsQuery } from 'src/queries/stackscripts';
 import { AppsList } from './AppsList';
 import { categoryOptions } from './utilities';
 
+import type { LinodeCreateFormValues } from '../../utilities';
 import type { AppCategory } from 'src/features/OneClickApps/types';
 
 interface Props {
@@ -23,6 +26,10 @@ interface Props {
 export const AppSelect = (props: Props) => {
   const { onOpenDetailsDrawer } = props;
 
+  const {
+    formState: { errors },
+  } = useFormContext<LinodeCreateFormValues>();
+
   const { isLoading } = useMarketplaceAppsQuery(true);
 
   const [query, setQuery] = useState('');
@@ -32,6 +39,9 @@ export const AppSelect = (props: Props) => {
     <Paper>
       <Stack spacing={2}>
         <Typography variant="h2">Select an App</Typography>
+        {errors.stackscript_id?.message && (
+          <Notice text={errors.stackscript_id.message} variant="error" />
+        )}
         <Stack direction="row" flexWrap="wrap" gap={1}>
           <DebouncedSearchTextField
             InputProps={{ sx: { maxWidth: 'unset !important' } }}

packages/manager/src/features/Linodes/LinodeCreatev2/resolvers.ts

@@ -4,12 +4,13 @@ import { CreateLinodeSchema } from '@linode/validation';
 import {
   CreateLinodeByCloningSchema,
   CreateLinodeFromBackupSchema,
+  CreateLinodeFromMarketplaceAppSchema,
   CreateLinodeFromStackScriptSchema,
 } from './schemas';
 import { getLinodeCreatePayload } from './utilities';
-import { LinodeCreateFormValues } from './utilities';
 
 import type { LinodeCreateType } from '../LinodesCreate/types';
+import type { LinodeCreateFormValues } from './utilities';
 import type { Resolver } from 'react-hook-form';
 
 export const resolver: Resolver<LinodeCreateFormValues> = async (
@@ -52,6 +53,26 @@ export const stackscriptResolver: Resolver<LinodeCreateFormValues> = async (
   return { errors: {}, values };
 };
 
+export const marketplaceResolver: Resolver<LinodeCreateFormValues> = async (
+  values,
+  context,
+  options
+) => {
+  const transformedValues = getLinodeCreatePayload(structuredClone(values));
+
+  const { errors } = await yupResolver(
+    CreateLinodeFromMarketplaceAppSchema,
+    {},
+    { mode: 'async', rawValues: true }
+  )(transformedValues, context, options);
+
+  if (errors) {
+    return { errors, values };
+  }
+
+  return { errors: {}, values };
+};
+
 export const cloneResolver: Resolver<LinodeCreateFormValues> = async (
   values,
   context,
@@ -107,6 +128,6 @@ export const linodeCreateResolvers: Record<
   'Clone Linode': cloneResolver,
   Distributions: resolver,
   Images: resolver,
-  'One-Click': stackscriptResolver,
+  'One-Click': marketplaceResolver,
   StackScripts: stackscriptResolver,
 };

packages/manager/src/features/Linodes/LinodeCreatev2/schemas.ts

@@ -27,3 +27,12 @@ export const CreateLinodeFromStackScriptSchema = CreateLinodeSchema.concat(
     stackscript_id: number().required('You must select a StackScript.'),
   })
 );
+
+/**
+ * Extends the Linode Create schema to make stackscript_id required for the Marketplace tab
+ */
+export const CreateLinodeFromMarketplaceAppSchema = CreateLinodeSchema.concat(
+  object({
+    stackscript_id: number().required('You must select a Marketplace App.'),
+  })
+);