From ff5f8a92bbffb6c99f8c3f9b267099364caf961f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Mon, 1 Sep 2025 10:35:54 +0100
Subject: [PATCH 1/2] fix: wrap fields in form

---
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 .../integration-picker/components/IntegrationFields.tsx   | 8 +++++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 82d0eb8..82ac928 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
             "license": "MIT",
             "dependencies": {
                 "@stackone/expressions": "^0.16.0",
-                "@stackone/malachite": "^0.5.0",
+                "@stackone/malachite": "^0.5.1",
                 "@tanstack/react-query": "^5.77.2"
             },
             "devDependencies": {
@@ -1192,9 +1192,9 @@
             }
         },
         "node_modules/@stackone/malachite": {
-            "version": "0.5.0",
-            "resolved": "https://registry.npmjs.org/@stackone/malachite/-/malachite-0.5.0.tgz",
-            "integrity": "sha512-6rXExYUIORdMI2VS1KoX1bstnq/PK/Zwm0tQLUtCek1CCh7Irvu98QyiN2lXTqJjczJdtCNG4VN6bypnEvLMbQ==",
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/@stackone/malachite/-/malachite-0.5.1.tgz",
+            "integrity": "sha512-Xj26IkYaPrEOYXwm+VBRUBKhrELUhSbsKxM7AFnt8OeuLac3aI3qgdJYI/a4QlXFu4C7/VT85uIQxRlj1y1QIA==",
             "dependencies": {
                 "@uiw/react-json-view": "^2.0.0-alpha.35",
                 "marked-react": "^3.0.0"
diff --git a/package.json b/package.json
index 32487a3..5647774 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "license": "MIT",
     "dependencies": {
         "@stackone/expressions": "^0.16.0",
-        "@stackone/malachite": "^0.5.0",
+        "@stackone/malachite": "^0.5.1",
         "@tanstack/react-query": "^5.77.2"
     },
     "peerDependencies": {
diff --git a/src/modules/integration-picker/components/IntegrationFields.tsx b/src/modules/integration-picker/components/IntegrationFields.tsx
index bb66e4c..1ffe62e 100644
--- a/src/modules/integration-picker/components/IntegrationFields.tsx
+++ b/src/modules/integration-picker/components/IntegrationFields.tsx
@@ -1,4 +1,4 @@
-import { Alert, CodeBlock, Dropdown, Input, Padded, Spacer, TextArea } from '@stackone/malachite';
+import { Alert, CodeBlock, Dropdown, Form, Input, Padded, Spacer, TextArea } from '@stackone/malachite';
 import { useEffect, useState } from 'react';
 import { ConnectorConfigField } from '../types';
 
@@ -77,6 +77,7 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({ fields, onCh
                     </Alert>
                 )}
                 <Spacer direction="vertical" size={20} fullWidth>
+                    <Form>
                     {fields.map((field) => {
                         const key =
                             typeof field.key === 'object'
@@ -133,8 +134,9 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({ fields, onCh
                                     />
                                 )}
                             </div>
-                        );
-                    })}
+                            );
+                        })}
+                    </Form>
                 </Spacer>
             </Spacer>
         </Padded>

From c2e8983cee6663c31a3225ec32b5da8d025695b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Mon, 1 Sep 2025 10:40:57 +0100
Subject: [PATCH 2/2] fix: linting

---
 .../components/IntegrationFields.tsx          | 125 ++++++++++--------
 1 file changed, 69 insertions(+), 56 deletions(-)

diff --git a/src/modules/integration-picker/components/IntegrationFields.tsx b/src/modules/integration-picker/components/IntegrationFields.tsx
index 1ffe62e..bc3e2e7 100644
--- a/src/modules/integration-picker/components/IntegrationFields.tsx
+++ b/src/modules/integration-picker/components/IntegrationFields.tsx
@@ -1,4 +1,13 @@
-import { Alert, CodeBlock, Dropdown, Form, Input, Padded, Spacer, TextArea } from '@stackone/malachite';
+import {
+    Alert,
+    CodeBlock,
+    Dropdown,
+    Form,
+    Input,
+    Padded,
+    Spacer,
+    TextArea,
+} from '@stackone/malachite';
 import { useEffect, useState } from 'react';
 import { ConnectorConfigField } from '../types';
 
@@ -78,62 +87,66 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({ fields, onCh
                 )}
                 <Spacer direction="vertical" size={20} fullWidth>
                     <Form>
-                    {fields.map((field) => {
-                        const key =
-                            typeof field.key === 'object'
-                                ? JSON.stringify(field.key)
-                                : String(field.key);
-                        return (
-                            <div key={key} style={{ width: '100%' }}>
-                                {(field.type === 'text' ||
-                                    field.type === 'number' ||
-                                    field.type === 'password') && (
-                                    <Input
-                                        name={key}
-                                        required={field.required}
-                                        placeholder={field.placeholder}
-                                        defaultValue={field.value?.toString()}
-                                        onChange={(value: string) => handleFieldChange(key, value)}
-                                        disabled={field.readOnly}
-                                        label={field.label}
-                                        tooltip={field.guide?.tooltip}
-                                        description={field.guide?.description}
-                                        type={field.type}
-                                    />
-                                )}
+                        {fields.map((field) => {
+                            const key =
+                                typeof field.key === 'object'
+                                    ? JSON.stringify(field.key)
+                                    : String(field.key);
+                            return (
+                                <div key={key} style={{ width: '100%' }}>
+                                    {(field.type === 'text' ||
+                                        field.type === 'number' ||
+                                        field.type === 'password') && (
+                                        <Input
+                                            name={key}
+                                            required={field.required}
+                                            placeholder={field.placeholder}
+                                            defaultValue={field.value?.toString()}
+                                            onChange={(value: string) =>
+                                                handleFieldChange(key, value)
+                                            }
+                                            disabled={field.readOnly}
+                                            label={field.label}
+                                            tooltip={field.guide?.tooltip}
+                                            description={field.guide?.description}
+                                            type={field.type}
+                                        />
+                                    )}
 
-                                {field.type === 'text_area' && (
-                                    <TextArea
-                                        name={key}
-                                        required={field.required}
-                                        defaultValue={formData[key] || ''}
-                                        placeholder={field.placeholder}
-                                        onChange={(value: string) => handleFieldChange(key, value)}
-                                        disabled={field.readOnly}
-                                        label={field.label}
-                                        tooltip={field.guide?.tooltip}
-                                    />
-                                )}
-                                {field.type === 'select' && (
-                                    <Dropdown
-                                        defaultValue={formData[key] || ''}
-                                        disabled={field.readOnly}
-                                        items={
-                                            field.options?.map((option) => ({
-                                                id: option.value,
-                                                label: option.label,
-                                            })) ?? []
-                                        }
-                                        onItemSelected={(value) =>
-                                            handleFieldChange(key, value ?? '')
-                                        }
-                                        name={key}
-                                        label={field.label}
-                                        tooltip={field.guide?.tooltip}
-                                        description={field.guide?.description}
-                                    />
-                                )}
-                            </div>
+                                    {field.type === 'text_area' && (
+                                        <TextArea
+                                            name={key}
+                                            required={field.required}
+                                            defaultValue={formData[key] || ''}
+                                            placeholder={field.placeholder}
+                                            onChange={(value: string) =>
+                                                handleFieldChange(key, value)
+                                            }
+                                            disabled={field.readOnly}
+                                            label={field.label}
+                                            tooltip={field.guide?.tooltip}
+                                        />
+                                    )}
+                                    {field.type === 'select' && (
+                                        <Dropdown
+                                            defaultValue={formData[key] || ''}
+                                            disabled={field.readOnly}
+                                            items={
+                                                field.options?.map((option) => ({
+                                                    id: option.value,
+                                                    label: option.label,
+                                                })) ?? []
+                                            }
+                                            onItemSelected={(value) =>
+                                                handleFieldChange(key, value ?? '')
+                                            }
+                                            name={key}
+                                            label={field.label}
+                                            tooltip={field.guide?.tooltip}
+                                            description={field.guide?.description}
+                                        />
+                                    )}
+                                </div>
                             );
                         })}
                     </Form>