Merge pull request #1685 from sophieturner0/Required-Properties-Next-…

…Button-Should-Not-Allow

Disable 'Next' Button on Empty Spaces in 'Required Properties' [ChangeNodeTypeModal]

src/components/ModalsContainer/ChangeNodeTypeModal/RequiredPropertiesStep/index.tsx

@@ -11,6 +11,7 @@ import { getNodeType } from '~/network/fetchSourcesData'
 import { colors } from '~/utils'
 import { MapNodeTypeModalStepID, SelectedValues } from '..'
 import { parseJson, parsedObjProps } from '../../BlueprintModal/Body/Editor/utils'
+import { noSpacePattern } from '~/components/AddItemModal/SourceTypeStep/constants'
 
 type Props = {
   skipToStep: (step: MapNodeTypeModalStepID) => void
@@ -75,6 +76,9 @@ export const RequiredPropertiesStep: FC<Props> = ({ handleSelectType, skipToStep
     skipToStep('sourceType')
   }
 
+  const isNextDisabled =
+    !isValid || loading || filteredAttributes.some((attr) => attr.required && !watch(attr.key)?.trim())
+
   return (
     <Flex>
       <Flex align="center" direction="row" justify="space-between" mb={18}>
@@ -100,7 +104,15 @@ export const RequiredPropertiesStep: FC<Props> = ({ handleSelectType, skipToStep
                     name={key}
                     placeholder={required ? 'Required' : 'Optional'}
                     rules={{
-                      ...(required ? requiredRule : {}),
+                      ...(required
+                        ? {
+                            ...requiredRule,
+                            pattern: {
+                              message: 'No leading whitespace allowed',
+                              value: noSpacePattern,
+                            },
+                          }
+                        : {}),
                     }}
                   />
                 </TextFieldWrapper>
@@ -119,7 +131,7 @@ export const RequiredPropertiesStep: FC<Props> = ({ handleSelectType, skipToStep
         <Flex grow={1} ml={20}>
           <Button
             color="secondary"
-            disabled={!isValid || loading || filteredAttributes?.some((attr) => attr.required && !watch(attr.key))}
+            disabled={isNextDisabled}
             onClick={() => skipToStep('createConfirmation')}
             size="large"
             variant="contained"