upcoming: [M3-7987] - Linode Create Refactor - Validation

packages/manager/.changeset/pr-10374-upcoming-features-1712936111438.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Linode Create Refactor - Validation ([#10374](https://github.com/linode/manager/pull/10374))

packages/manager/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "2.9.11",
     "@linode/api-v4": "*",
     "@linode/validation": "*",
     "@lukemorales/query-key-factory": "^1.3.4",

packages/manager/src/components/RegionSelect/RegionSelect.tsx

@@ -125,6 +125,7 @@ export const RegionSelect = React.memo((props: RegionSelectProps) => {
           },
         })}
         textFieldProps={{
+          ...props.textFieldProps,
           InputProps: {
             endAdornment: regionFilter !== 'core' &&
               selectedRegion?.site_type === 'edge' && (

packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx

@@ -26,8 +26,10 @@ import { DocsLink } from '../DocsLink/DocsLink';
 import { Link } from '../Link';
 
 import type { LinodeCreateType } from 'src/features/Linodes/LinodesCreate/types';
+import { RegionSelectProps } from '../RegionSelect/RegionSelect.types';
 
 interface SelectRegionPanelProps {
+  RegionSelectProps?: Partial<RegionSelectProps>;
   currentCapability: Capabilities;
   disabled?: boolean;
   error?: string;
@@ -49,6 +51,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
     helperText,
     selectedId,
     selectedLinodeTypeId,
+    RegionSelectProps,
   } = props;
 
   const flags = useFlags();
@@ -147,6 +150,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
         regions={regions ?? []}
         selectedId={selectedId || null}
         showEdgeIconHelperText={showEdgeIconHelperText}
+        {...RegionSelectProps}
       />
       {showClonePriceWarning && (
         <Notice

packages/manager/src/components/VLANSelect.tsx

@@ -21,6 +21,10 @@ interface Props {
    * Default API filter
    */
   filter?: Filter;
+  /**
+   * Called when the field is blurred
+   */
+  onBlur?: () => void;
   /**
    * Is called when a VLAN is selected
    */
@@ -42,7 +46,7 @@ interface Props {
  * - Allows VLAN creation
  */
 export const VLANSelect = (props: Props) => {
-  const { disabled, errorText, filter, onChange, sx, value } = props;
+  const { disabled, errorText, filter, onBlur, onChange, sx, value } = props;
 
   const [open, setOpen] = React.useState(false);
   const [inputValue, setInputValue] = useState<string>('');
@@ -124,6 +128,7 @@ export const VLANSelect = (props: Props) => {
       label="VLAN"
       loading={isFetching}
       noOptionsText="You have no VLANs in this region. Type to create one."
+      onBlur={onBlur}
       open={open}
       options={vlans}
       placeholder="Create or select a VLAN"

packages/manager/src/features/Linodes/LinodeCreatev2/Access.tsx

@@ -32,9 +32,11 @@ export const Access = () => {
               autoComplete="off"
               disabled={isLinodeCreateRestricted}
               errorText={fieldState.error?.message}
+              inputRef={field.ref}
               label="Root Password"
               name="password"
               noMarginTop
+              onBlur={field.onBlur}
               onChange={field.onChange}
               placeholder="Enter a password."
               value={field.value ?? ''}

packages/manager/src/features/Linodes/LinodeCreatev2/Details/Details.tsx

@@ -29,7 +29,9 @@ export const Details = () => {
           <TextField
             disabled={isCreateLinodeRestricted}
             errorText={fieldState.error?.message}
+            inputRef={field.ref}
             label="Linode Label"
+            onBlur={field.onBlur}
             onChange={field.onChange}
             value={field.value ?? ''}
           />

packages/manager/src/features/Linodes/LinodeCreatev2/Error.tsx

@@ -8,16 +8,20 @@ import { Paper } from 'src/components/Paper';
 import type { CreateLinodeRequest } from '@linode/api-v4';
 
 export const Error = () => {
-  const { formState } = useFormContext<CreateLinodeRequest>();
+  const {
+    formState: { errors },
+  } = useFormContext<CreateLinodeRequest>();
 
-  if (!formState.errors.root?.message) {
+  const generalError = errors.root?.message ?? errors.interfaces?.message;
+
+  if (!generalError) {
     return null;
   }
 
   return (
     <Paper sx={{ p: 0 }}>
       <Notice spacingBottom={0} spacingTop={0} variant="error">
-        <Typography py={2}>{formState.errors.root.message}</Typography>
+        <Typography py={2}>{generalError}</Typography>
       </Notice>
     </Paper>
   );

packages/manager/src/features/Linodes/LinodeCreatev2/Firewall.tsx

@@ -48,6 +48,7 @@ export const Firewall = () => {
             label="Assign Firewall"
             loading={isLoading}
             noMarginTop
+            onBlur={field.onBlur}
             onChange={(e, firewall) => field.onChange(firewall?.id ?? null)}
             options={firewalls ?? []}
             placeholder="None"

packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx

@@ -17,6 +17,11 @@ export const Region = () => {
 
   return (
     <SelectRegionPanel
+      RegionSelectProps={{
+        textFieldProps: {
+          inputRef: field.ref,
+        },
+      }}
       currentCapability="Linodes"
       disabled={isLinodeCreateRestricted}
       error={formState.errors.region?.message}

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Distributions.tsx

@@ -23,6 +23,7 @@ export const Distributions = () => {
       <ImageSelectv2
         disabled={isCreateLinodeRestricted}
         errorText={fieldState.error?.message}
+        onBlur={field.onBlur}
         onChange={(_, image) => field.onChange(image?.id ?? null)}
         value={field.value}
         variant="public"

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Images.tsx

@@ -23,6 +23,7 @@ export const Images = () => {
       <ImageSelectv2
         disabled={isCreateLinodeRestricted}
         errorText={fieldState.error?.message}
+        onBlur={field.onBlur}
         onChange={(_, image) => field.onChange(image?.id ?? null)}
         value={field.value}
         variant="private"

packages/manager/src/features/Linodes/LinodeCreatev2/UserData/UserData.tsx

@@ -80,22 +80,24 @@ export const UserData = () => {
       <Controller
         render={({ field, fieldState }) => (
           <TextField
-            onBlur={(e) =>
+            onBlur={(e) => {
+              field.onBlur();
               checkFormat({
                 hasInputValueChanged: false,
                 userData: e.target.value,
-              })
-            }
+              });
+            }}
             onChange={(e) => {
+              field.onChange(e);
               checkFormat({
                 hasInputValueChanged: true,
                 userData: e.target.value,
               });
-              field.onChange(e);
             }}
             disabled={isLinodeCreateRestricted}
             errorText={fieldState.error?.message}
             expand
+            inputRef={field.ref}
             label="User Data"
             labelTooltipText="Compatible formats include cloud-config data and executable scripts."
             multiline

packages/manager/src/features/Linodes/LinodeCreatev2/VLAN.tsx

@@ -86,8 +86,9 @@ export const VLAN = () => {
               disabled={disabled}
               errorText={fieldState.error?.message}
               filter={{ region: regionId }}
+              onBlur={field.onBlur}
               onChange={field.onChange}
-              sx={{ minWidth: 300 }}
+              sx={{ width: 300 }}
               value={field.value ?? null}
             />
           )}
@@ -100,13 +101,15 @@ export const VLAN = () => {
               tooltipText={
                 'IPAM address must use IP/netmask format, e.g. 192.0.2.0/24.'
               }
+              containerProps={{ maxWidth: 335 }}
               disabled={disabled}
               errorText={fieldState.error?.message}
+              inputRef={field.ref}
               label="IPAM Address"
+              onBlur={field.onBlur}
               onChange={field.onChange}
               optional
               placeholder="192.0.2.0/24"
-              sx={{ maxWidth: 300 }}
               value={field.value ?? ''}
             />
           )}

packages/manager/src/features/Linodes/LinodeCreatev2/VPC/VPC.tsx

@@ -92,6 +92,7 @@ export const VPC = () => {
                     : undefined
                 }
                 textFieldProps={{
+                  inputRef: field.ref,
                   sx: (theme) => ({
                     [theme.breakpoints.up('sm')]: { minWidth: inputMaxWidth },
                   }),
@@ -125,6 +126,9 @@ export const VPC = () => {
                     getOptionLabel={(subnet) =>
                       `${subnet.label} (${subnet.ipv4})`
                     }
+                    textFieldProps={{
+                      inputRef: field.ref,
+                    }}
                     value={
                       selectedVPC?.subnets.find(
                         (subnet) => subnet.id === field.value
@@ -133,6 +137,7 @@ export const VPC = () => {
                     errorText={fieldState.error?.message}
                     label="Subnet"
                     noMarginTop
+                    onBlur={field.onBlur}
                     onChange={(e, subnet) => field.onChange(subnet?.id ?? null)}
                     options={selectedVPC?.subnets ?? []}
                     placeholder="Select Subnet"
@@ -182,11 +187,14 @@ export const VPC = () => {
                         <Controller
                           render={({ field, fieldState }) => (
                             <TextField
+                              containerProps={{ sx: { mb: 1, mt: 1 } }}
                               errorText={fieldState.error?.message}
+                              inputRef={field.ref}
                               label="VPC IPv4"
+                              noMarginTop
+                              onBlur={field.onBlur}
                               onChange={field.onChange}
                               required
-                              sx={{ my: 2 }}
                               value={field.value}
                             />
                           )}
@@ -240,6 +248,12 @@ export const VPC = () => {
                     </Link>
                     .
                   </Typography>
+                  {formState.errors.interfaces?.[0]?.ip_ranges?.message && (
+                    <Notice
+                      text={formState.errors.interfaces[0]?.ip_ranges?.message}
+                      variant="error"
+                    />
+                  )}
                   <VPCRanges />
                 </>
               )}

packages/manager/src/features/Linodes/LinodeCreatev2/VPC/VPCRanges.tsx

@@ -32,9 +32,12 @@ export const VPCRanges = () => {
               <TextField
                 errorText={fieldState.error?.message}
                 hideLabel
+                inputRef={field.ref}
                 label={`IP Range ${index}`}
+                onBlur={field.onBlur}
                 onChange={field.onChange}
                 placeholder="10.0.0.0/24"
+                sx={{ minWidth: 290 }}
                 value={field.value}
               />
             )}

packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx

@@ -28,6 +28,7 @@ import {
   defaultValues,
   getLinodeCreatePayload,
   getTabIndex,
+  resolver,
   tabs,
   useLinodeCreateQueryParams,
 } from './utilities';
@@ -38,7 +39,12 @@ import type { CreateLinodeRequest } from '@linode/api-v4';
 import type { SubmitHandler } from 'react-hook-form';
 
 export const LinodeCreatev2 = () => {
-  const methods = useForm<CreateLinodeRequest>({ defaultValues });
+  const methods = useForm<CreateLinodeRequest>({
+    defaultValues,
+    mode: 'onBlur',
+    resolver,
+  });
+
   const history = useHistory();
 
   const { mutateAsync: createLinode } = useCreateLinodeMutation();

packages/manager/src/features/Linodes/LinodeCreatev2/utilities.test.tsx

@@ -24,15 +24,15 @@ describe('getLinodeCreatePayload', () => {
   it('should return a basic payload', () => {
     const values = createLinodeRequestFactory.build();
 
-    expect(getLinodeCreatePayload(values)).toStrictEqual(values);
+    expect(getLinodeCreatePayload(values)).toEqual(values);
   });
 
   it('should base64 encode metadata', () => {
     const values = createLinodeRequestFactory.build({
       metadata: { user_data: userData },
     });
 
-    expect(getLinodeCreatePayload(values)).toStrictEqual({
+    expect(getLinodeCreatePayload(values)).toEqual({
       ...values,
       metadata: { user_data: base64UserData },
     });

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

@@ -1,3 +1,5 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { CreateLinodeSchema } from '@linode/validation';
 import { useHistory } from 'react-router-dom';
 
 import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
@@ -6,6 +8,7 @@ import { utoa } from '../LinodesCreate/utilities';
 
 import type { LinodeCreateType } from '../LinodesCreate/types';
 import type { CreateLinodeRequest, InterfacePayload } from '@linode/api-v4';
+import type { Resolver } from 'react-hook-form';
 
 /**
  * This interface is used to type the query params on the Linode Create flow.
@@ -74,20 +77,21 @@ export const tabs: LinodeCreateType[] = [
 export const getLinodeCreatePayload = (
   payload: CreateLinodeRequest
 ): CreateLinodeRequest => {
-  if (payload.metadata?.user_data) {
-    payload.metadata.user_data = utoa(payload.metadata.user_data);
+  const values = { ...payload };
+  if (values.metadata?.user_data) {
+    values.metadata.user_data = utoa(values.metadata.user_data);
   }
 
-  if (!payload.metadata?.user_data) {
-    payload.metadata = undefined;
+  if (!values.metadata?.user_data) {
+    values.metadata = undefined;
   }
 
-  payload.interfaces = getInterfacesPayload(
-    payload.interfaces,
-    Boolean(payload.private_ip)
+  values.interfaces = getInterfacesPayload(
+    values.interfaces,
+    Boolean(values.private_ip)
   );
 
-  return payload;
+  return values;
 };
 
 /**
@@ -161,3 +165,29 @@ export const defaultValues: CreateLinodeRequest = {
   region: '',
   type: '',
 };
+
+/**
+ * Provides dynamic validation to the Linode Create form.
+ *
+ * Unfortunately, we have to wrap `yupResolver` so that we can transform the payload
+ * using `getLinodeCreatePayload` before validation happens.
+ */
+export const resolver: Resolver<CreateLinodeRequest> = async (
+  values,
+  context,
+  options
+) => {
+  const transformedValues = getLinodeCreatePayload(values);
+
+  const { errors } = await yupResolver(
+    CreateLinodeSchema,
+    {},
+    { rawValues: true }
+  )(transformedValues, context, options);
+
+  if (errors) {
+    return { errors, values };
+  }
+
+  return { errors: {}, values };
+};