fix(form): Improve vertical spacing for form

Currently, there's no much spacing between form fields for processors.

This commit adds more spacing between them by enforcing the patternfly
form spacing.

fix: #618

packages/ui/src/components/Visualization/Canvas/CanvasForm.scss

@@ -0,0 +1,12 @@
+/*
+  This is required since there's a div between the form
+  element and its children that breaks the following styles
+    - display: grid
+    - gap: var(--pf-c-form--GridGap)
+  from @patternfly and making the fields very close to
+  each other
+*/
+form[data-testid='autoform'] > div {
+  display: inherit;
+  gap: inherit;
+}

packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx

@@ -10,6 +10,7 @@ import { DataFormatEditor } from './DataFormatEditor';
 import { StepExpressionEditor } from './StepExpressionEditor';
 import { CanvasNode } from './canvas.models';
 import { LoadBalancerEditor } from './LoadBalancerEditor';
+import './CanvasForm.scss';
 
 interface CanvasFormProps {
   selectedNode: CanvasNode;
@@ -118,7 +119,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
         {isExpressionAwareStep && <StepExpressionEditor selectedNode={props.selectedNode} />}
         {isDataFormatAwareStep && <DataFormatEditor selectedNode={props.selectedNode} />}
         {isLoadBalanceAwareStep && <LoadBalancerEditor selectedNode={props.selectedNode} />}
-        <AutoForm ref={formRef} schema={schema} model={model} onChangeModel={handleOnChange}>
+        <AutoForm ref={formRef} schema={schema} model={model} onChangeModel={handleOnChange} data-testid="autoform">
           <AutoFields omitFields={omitFields} />
           <ErrorsField />
         </AutoForm>

packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`CanvasForm should render 1`] = `
   </h1>
   <form
     class="pf-v5-c-form"
-    data-testid="base-form"
+    data-testid="autoform"
     novalidate=""
   >
     <div>