From acb17a466064bdc077720181bb337f475a5b5d37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Wed, 13 Aug 2025 15:51:35 +0100
Subject: [PATCH 1/5] feat: add functioning integration searchbar

---
 .../integration-picker/IntegrationPicker.tsx  |  22 ++-
 .../components/IntegrationFields.tsx          | 137 ++++++++++--------
 .../components/IntegrationList.tsx            |  62 ++++++--
 .../components/cardFooter.tsx                 |  10 +-
 .../hooks/useIntegrationPicker.ts             |   5 +
 5 files changed, 155 insertions(+), 81 deletions(-)

diff --git a/src/modules/integration-picker/IntegrationPicker.tsx b/src/modules/integration-picker/IntegrationPicker.tsx
index f37c1f5..cf66b71 100644
--- a/src/modules/integration-picker/IntegrationPicker.tsx
+++ b/src/modules/integration-picker/IntegrationPicker.tsx
@@ -48,6 +48,7 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
         setSelectedIntegration,
         setFormData,
         handleConnect,
+        resetConnectionState,
     } = useIntegrationPicker({
         token,
         baseUrl,
@@ -61,8 +62,15 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
             footer={
                 <CardFooter
                     selectedIntegration={selectedIntegration}
-                    isLoading={connectionState.loading}
-                    onBack={accountData ? undefined : () => setSelectedIntegration(null)}
+                    showActions={!connectionState.loading && !connectionState.success}
+                    onBack={
+                        accountData
+                            ? undefined
+                            : () => {
+                                  setSelectedIntegration(null);
+                                  resetConnectionState();
+                              }
+                    }
                     onNext={handleConnect}
                 />
             }
@@ -70,12 +78,20 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
                 selectedIntegration && (
                     <CardTitle
                         selectedIntegration={selectedIntegration}
-                        onBack={accountData ? undefined : () => setSelectedIntegration(null)}
+                        onBack={
+                            accountData
+                                ? undefined
+                                : () => {
+                                      setSelectedIntegration(null);
+                                      resetConnectionState();
+                                  }
+                        }
                         guide={guide}
                     />
                 )
             }
             height={height}
+            padding="0"
         >
             {isHubLinkAccountReleaseEnabled && (
                 <IntegrationPickerContent
diff --git a/src/modules/integration-picker/components/IntegrationFields.tsx b/src/modules/integration-picker/components/IntegrationFields.tsx
index 8d29cf1..8fa2504 100644
--- a/src/modules/integration-picker/components/IntegrationFields.tsx
+++ b/src/modules/integration-picker/components/IntegrationFields.tsx
@@ -1,4 +1,13 @@
-import { Alert, Dropdown, Form, Input, Spacer, TextArea, Typography } from '@stackone/malachite';
+import {
+    Alert,
+    Dropdown,
+    Form,
+    Input,
+    Padded,
+    Spacer,
+    TextArea,
+    Typography,
+} from '@stackone/malachite';
 import { useEffect, useState } from 'react';
 import { ConnectorConfigField } from '../types';
 
@@ -62,68 +71,72 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
     };
 
     return (
-        <Spacer direction="vertical" size={8} fullWidth>
-            {guide && <Alert type="info" message={guide?.description} hasMargin={false} />}
-            {error && <Alert type="error" message={error.message} hasMargin={false} />}
-            {error && <Typography.CodeText>{error.provider_response}</Typography.CodeText>}
-            <Spacer direction="vertical" size={20} fullWidth>
-                {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}
-                                />
-                            )}
+        <Padded vertical="large" horizontal="medium">
+            <Spacer direction="vertical" size={8} fullWidth>
+                {guide && <Alert type="info" message={guide?.description} hasMargin={false} />}
+                {error && <Alert type="error" message={error.message} hasMargin={false} />}
+                {error && <Typography.CodeText>{error.provider_response}</Typography.CodeText>}
+                <Spacer direction="vertical" size={20} fullWidth>
+                    {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>
+                        );
+                    })}
+                </Spacer>
             </Spacer>
-        </Spacer>
+        </Padded>
     );
 };
diff --git a/src/modules/integration-picker/components/IntegrationList.tsx b/src/modules/integration-picker/components/IntegrationList.tsx
index b893bf5..ebaafa9 100644
--- a/src/modules/integration-picker/components/IntegrationList.tsx
+++ b/src/modules/integration-picker/components/IntegrationList.tsx
@@ -5,9 +5,12 @@ import {
     FlexDirection,
     FlexGapSize,
     FlexJustify,
+    Input,
     Padded,
+    Spacer,
     Typography,
 } from '@stackone/malachite';
+import { useCallback, useState } from 'react';
 import { CATEGORIES_WITH_LABELS } from '../../../shared/categories';
 import { Integration } from '../types';
 
@@ -52,20 +55,57 @@ export const IntegrationList: React.FC<{
     integrations: Integration[];
     onSelect: (integration: Integration) => void;
 }> = ({ integrations, onSelect }) => {
+    const [availableIntegrations, setAvailableIntegrations] = useState<Integration[]>(
+        integrations.filter((integration) => integration.active && integration.name),
+    );
+
+    const handleSearch = useCallback(
+        (value: string) => {
+            setAvailableIntegrations(
+                integrations.filter(
+                    (integration) =>
+                        integration.name?.toLowerCase().includes(value.toLowerCase()) &&
+                        integration.active &&
+                        integration.name,
+                ),
+            );
+        },
+        [integrations],
+    );
+
     return (
         <>
-            <Padded vertical="medium" horizontal="small" fullHeight={false}>
-                <Typography.SecondaryText>Select integration</Typography.SecondaryText>
-            </Padded>
-            <ButtonList
-                buttons={integrations
-                    ?.filter((integration) => integration.active && integration.name)
-                    .map((integration) => ({
-                        key: integration.provider,
-                        children: <IntegrationRow integration={integration} />,
-                        onClick: () => onSelect(integration),
-                    }))}
+            <Input
+                name="search"
+                placeholder="Search Integrations"
+                variant="underline"
+                size="large"
+                onChange={handleSearch}
             />
+            {availableIntegrations.length > 0 ? (
+                <Padded vertical="medium" horizontal="small" fullHeight={true}>
+                    <Spacer direction="vertical" size={10} align="start">
+                        {/* <Flex direction={FlexDirection.Vertical} fullHeight={true}> */}
+                        <Padded vertical="small" horizontal="small">
+                            <Typography.SecondaryText className="text-left">
+                                Add integration
+                            </Typography.SecondaryText>
+                        </Padded>
+                        <ButtonList
+                            buttons={availableIntegrations.map((integration) => ({
+                                key: integration.provider,
+                                children: <IntegrationRow integration={integration} />,
+                                onClick: () => onSelect(integration),
+                            }))}
+                        />
+                        {/* </Flex> */}
+                    </Spacer>
+                </Padded>
+            ) : (
+                <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight={true}>
+                    <Typography.SecondaryText>No integrations found</Typography.SecondaryText>
+                </Flex>
+            )}
         </>
     );
 };
diff --git a/src/modules/integration-picker/components/cardFooter.tsx b/src/modules/integration-picker/components/cardFooter.tsx
index f4adfe9..7583d1f 100644
--- a/src/modules/integration-picker/components/cardFooter.tsx
+++ b/src/modules/integration-picker/components/cardFooter.tsx
@@ -13,7 +13,7 @@ import { Integration } from '../types';
 interface CardFooterProps {
     selectedIntegration: Integration | null;
     fullWidth?: boolean;
-    isLoading?: boolean;
+    showActions?: boolean;
     onBack?: () => void;
     onNext: () => void;
 }
@@ -21,12 +21,12 @@ interface CardFooterProps {
 const CardFooter: React.FC<CardFooterProps> = ({
     fullWidth = true,
     selectedIntegration,
-    isLoading,
+    showActions,
     onBack,
     onNext,
 }) => {
     const buttons = useMemo(() => {
-        if (!selectedIntegration || isLoading) {
+        if (!selectedIntegration || !showActions) {
             return [];
         }
 
@@ -57,7 +57,7 @@ const CardFooter: React.FC<CardFooterProps> = ({
         });
 
         return buttons;
-    }, [selectedIntegration, onBack, onNext, isLoading]);
+    }, [selectedIntegration, onBack, onNext, showActions]);
 
     if (buttons.length === 0) {
         return <FooterLinks fullWidth={fullWidth} />;
@@ -66,7 +66,7 @@ const CardFooter: React.FC<CardFooterProps> = ({
     return (
         <Spacer direction="horizontal" size={0} justifyContent="space-between">
             <FooterLinks fullWidth={fullWidth} />
-            <Padded vertical="none" horizontal="medium" fullHeight={false}>
+            <Padded vertical="none" horizontal="small" fullHeight={false}>
                 <Flex direction={FlexDirection.Horizontal} justify={FlexJustify.Right}>
                     <Spacer direction="horizontal" size={10}>
                         {buttons.map((button) => (
diff --git a/src/modules/integration-picker/hooks/useIntegrationPicker.ts b/src/modules/integration-picker/hooks/useIntegrationPicker.ts
index 445cd91..99a593c 100644
--- a/src/modules/integration-picker/hooks/useIntegrationPicker.ts
+++ b/src/modules/integration-picker/hooks/useIntegrationPicker.ts
@@ -366,6 +366,10 @@ export const useIntegrationPicker = ({
     const isLoading = isLoadingHubData || isLoadingConnectorData || isLoadingAccountData;
     const hasError = !!(errorHubData || errorConnectorData || errorAccountData);
 
+    const resetConnectionState = useCallback(() => {
+        setConnectionState({ loading: false, success: false });
+    }, []);
+
     return {
         // Data
         hubData,
@@ -390,5 +394,6 @@ export const useIntegrationPicker = ({
         setSelectedIntegration,
         setFormData,
         handleConnect,
+        resetConnectionState,
     };
 };

From e3f59ab962d2dd5814c91d0e86c7c555090ee497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Wed, 13 Aug 2025 16:14:51 +0100
Subject: [PATCH 2/5] feat: add category filter

---
 .../components/IntegrationList.tsx            | 71 +++++++++++++------
 1 file changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/modules/integration-picker/components/IntegrationList.tsx b/src/modules/integration-picker/components/IntegrationList.tsx
index ebaafa9..9e81299 100644
--- a/src/modules/integration-picker/components/IntegrationList.tsx
+++ b/src/modules/integration-picker/components/IntegrationList.tsx
@@ -1,5 +1,7 @@
 import {
+    Button,
     ButtonList,
+    Divider,
     Flex,
     FlexAlign,
     FlexDirection,
@@ -7,10 +9,11 @@ import {
     FlexJustify,
     Input,
     Padded,
+    PillButton,
     Spacer,
     Typography,
 } from '@stackone/malachite';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { CATEGORIES_WITH_LABELS } from '../../../shared/categories';
 import { Integration } from '../types';
 
@@ -55,38 +58,61 @@ export const IntegrationList: React.FC<{
     integrations: Integration[];
     onSelect: (integration: Integration) => void;
 }> = ({ integrations, onSelect }) => {
-    const [availableIntegrations, setAvailableIntegrations] = useState<Integration[]>(
-        integrations.filter((integration) => integration.active && integration.name),
-    );
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
-    const handleSearch = useCallback(
-        (value: string) => {
-            setAvailableIntegrations(
-                integrations.filter(
-                    (integration) =>
-                        integration.name?.toLowerCase().includes(value.toLowerCase()) &&
-                        integration.active &&
-                        integration.name,
-                ),
-            );
-        },
-        [integrations],
-    );
+    const [search, setSearch] = useState<string>('');
+
+    const availableIntegrations = useMemo(() => {
+        return integrations.filter(
+            (integration) =>
+                integration.active &&
+                integration.name &&
+                (selectedCategory ? integration.type === selectedCategory : true) &&
+                (search ? integration.name.toLowerCase().includes(search.toLowerCase()) : true),
+        );
+    }, [integrations, selectedCategory, search]);
+
+    const availableCategories = useMemo(() => {
+        return Array.from(new Set(integrations.map((integration) => integration.type)));
+    }, [integrations]);
 
     return (
         <>
             <Input
                 name="search"
                 placeholder="Search Integrations"
-                variant="underline"
+                variant="ghost"
                 size="large"
-                onChange={handleSearch}
+                onChange={setSearch}
             />
+            <Divider />
+            <Padded vertical="small" horizontal="medium" fullHeight={false}>
+                <Spacer direction="horizontal" size={4} align="start">
+                    {availableCategories.length > 1 &&
+                        availableCategories.map((category) => (
+                            <PillButton
+                                key={category}
+                                label={
+                                    CATEGORIES_WITH_LABELS.find((c) => c.value === category)
+                                        ?.label || category
+                                }
+                                selected={selectedCategory === category}
+                                onClick={() => {
+                                    if (selectedCategory === category) {
+                                        setSelectedCategory(null);
+                                    } else {
+                                        setSelectedCategory(category);
+                                    }
+                                }}
+                            />
+                        ))}
+                </Spacer>
+            </Padded>
+            <Divider />
             {availableIntegrations.length > 0 ? (
-                <Padded vertical="medium" horizontal="small" fullHeight={true}>
+                <Padded vertical="small" horizontal="small" fullHeight={true}>
                     <Spacer direction="vertical" size={10} align="start">
-                        {/* <Flex direction={FlexDirection.Vertical} fullHeight={true}> */}
-                        <Padded vertical="small" horizontal="small">
+                        <Padded vertical="none" horizontal="small">
                             <Typography.SecondaryText className="text-left">
                                 Add integration
                             </Typography.SecondaryText>
@@ -98,7 +124,6 @@ export const IntegrationList: React.FC<{
                                 onClick: () => onSelect(integration),
                             }))}
                         />
-                        {/* </Flex> */}
                     </Spacer>
                 </Padded>
             ) : (

From b37a94da9471b51357300228924ada78431ad335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Wed, 13 Aug 2025 17:41:26 +0100
Subject: [PATCH 3/5] chore: address copilot comments

---
 .../components/IntegrationList.tsx            | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/modules/integration-picker/components/IntegrationList.tsx b/src/modules/integration-picker/components/IntegrationList.tsx
index 9e81299..0860a0b 100644
--- a/src/modules/integration-picker/components/IntegrationList.tsx
+++ b/src/modules/integration-picker/components/IntegrationList.tsx
@@ -1,5 +1,4 @@
 import {
-    Button,
     ButtonList,
     Divider,
     Flex,
@@ -62,6 +61,17 @@ export const IntegrationList: React.FC<{
 
     const [search, setSearch] = useState<string>('');
 
+    const handleCategoryClick = useCallback(
+        (category: string) => {
+            if (selectedCategory === category) {
+                setSelectedCategory(null);
+            } else {
+                setSelectedCategory(category);
+            }
+        },
+        [selectedCategory],
+    );
+
     const availableIntegrations = useMemo(() => {
         return integrations.filter(
             (integration) =>
@@ -97,13 +107,7 @@ export const IntegrationList: React.FC<{
                                         ?.label || category
                                 }
                                 selected={selectedCategory === category}
-                                onClick={() => {
-                                    if (selectedCategory === category) {
-                                        setSelectedCategory(null);
-                                    } else {
-                                        setSelectedCategory(category);
-                                    }
-                                }}
+                                onClick={() => handleCategoryClick(category)}
                             />
                         ))}
                 </Spacer>

From 33103a254784b6a3eb1ba006af91da7641884142 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Wed, 13 Aug 2025 17:48:57 +0100
Subject: [PATCH 4/5] chore: bump malachite version

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 148c59d..3e19d39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
             "license": "MIT",
             "dependencies": {
                 "@stackone/expressions": "^0.16.0",
-                "@stackone/malachite": "^0.3.2",
+                "@stackone/malachite": "^0.4.0",
                 "@tanstack/react-query": "^5.77.2"
             },
             "devDependencies": {
@@ -1192,9 +1192,9 @@
             }
         },
         "node_modules/@stackone/malachite": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/@stackone/malachite/-/malachite-0.3.2.tgz",
-            "integrity": "sha512-jdNaq8d+G5bpCRCyaeL7CAR084jUzSlEkIdqCS9zMCfDXMYSNGmltCfKxXM2jqxLSp//RG+96uPGfn1beUGeTA==",
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@stackone/malachite/-/malachite-0.4.0.tgz",
+            "integrity": "sha512-Oknt0sTaafFhJNTgCLNsZ7CeouzXOU/17WnydU5/U/3I1cJrH5PCD5lmdJr+1CRofzZmKrKOA+IKo4a5uK4vyA==",
             "dependencies": {
                 "marked-react": "^3.0.0"
             },
diff --git a/package.json b/package.json
index 9a733c3..f220d18 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "license": "MIT",
     "dependencies": {
         "@stackone/expressions": "^0.16.0",
-        "@stackone/malachite": "^0.3.2",
+        "@stackone/malachite": "^0.4.0",
         "@tanstack/react-query": "^5.77.2"
     },
     "peerDependencies": {

From 7ae92fb08a493499db6ef73a4693d8e0f107c28b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20De=20Freitas?=
 <6485562+adefreitas@users.noreply.github.com>
Date: Tue, 19 Aug 2025 14:04:32 +0100
Subject: [PATCH 5/5] chore: avoid repetition

---
 .../integration-picker/IntegrationPicker.tsx  | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/modules/integration-picker/IntegrationPicker.tsx b/src/modules/integration-picker/IntegrationPicker.tsx
index cf66b71..60d27d2 100644
--- a/src/modules/integration-picker/IntegrationPicker.tsx
+++ b/src/modules/integration-picker/IntegrationPicker.tsx
@@ -57,20 +57,18 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
         dashboardUrl,
     });
 
+    const onBack = () => {
+        setSelectedIntegration(null);
+        resetConnectionState();
+    };
+
     return (
         <Card
             footer={
                 <CardFooter
                     selectedIntegration={selectedIntegration}
                     showActions={!connectionState.loading && !connectionState.success}
-                    onBack={
-                        accountData
-                            ? undefined
-                            : () => {
-                                  setSelectedIntegration(null);
-                                  resetConnectionState();
-                              }
-                    }
+                    onBack={accountData ? undefined : onBack}
                     onNext={handleConnect}
                 />
             }
@@ -78,14 +76,7 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
                 selectedIntegration && (
                     <CardTitle
                         selectedIntegration={selectedIntegration}
-                        onBack={
-                            accountData
-                                ? undefined
-                                : () => {
-                                      setSelectedIntegration(null);
-                                      resetConnectionState();
-                                  }
-                        }
+                        onBack={accountData ? undefined : onBack}
                         guide={guide}
                     />
                 )