feat(ENG-12176): Add auth config selection step with actions and account counts

package.json

@@ -61,4 +61,4 @@
         "tslib": "^2.8.1",
         "typescript": "^5.8.3"
     }
-}
+}

src/modules/integration-picker/IntegrationPicker.tsx

@@ -39,6 +39,10 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
         accountData,
         connectorData,
         selectedIntegration,
+        selectedProvider,
+        uniqueProviderIntegrations,
+        providerIntegrations,
+        hasOnlyOneProvider,
         fields,
         guide,
 
@@ -54,6 +58,10 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
 
         // Actions
         setSelectedIntegration,
+        setSelectedProvider,
+        setSelectedVersion,
+        handleProviderSelect,
+        handleCreateNewAuthConfig,
         setFormData,
         setIsFormValid,
         handleConnect,
@@ -82,10 +90,17 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
     }, [hubData]);
 
     const onBack = () => {
-        setSelectedIntegration(null);
-        resetConnectionState();
-        setSelectedCategory(null);
-        setSearch('');
+        if (selectedIntegration) {
+            // From form to auth config selection
+            setSelectedIntegration(null);
+            resetConnectionState();
+        } else if (selectedProvider) {
+            // From auth config selection to provider list
+            setSelectedProvider(null);
+            setSelectedVersion(null);
+            setSelectedCategory(null);
+            setSearch('');
+        }
     };
 
     return (
@@ -126,13 +141,16 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
                             hasOnlyOneIntegration
                         }
                         connectorData={connectorData?.config ?? null}
+                        selectedProvider={selectedProvider}
+                        hasOnlyOneProvider={hasOnlyOneProvider}
+                        uniqueProviderIntegrations={uniqueProviderIntegrations}
                     />
                 )
             }
             height={height}
             padding="0"
             headerConfig={
-                selectedIntegration
+                selectedIntegration || selectedProvider
                     ? undefined
                     : {
                           padding: '0',
@@ -145,12 +163,17 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
                     hasError={hasError}
                     connectionState={connectionState}
                     selectedIntegration={selectedIntegration}
+                    selectedProvider={selectedProvider}
+                    uniqueProviderIntegrations={uniqueProviderIntegrations}
+                    providerIntegrations={providerIntegrations}
                     connectorData={connectorData?.config ?? null}
                     hubData={hubData ?? null}
                     fields={fields}
                     errorHubData={(errorHubData as Error) ?? null}
                     errorConnectorData={(errorConnectorData as Error) ?? null}
-                    onSelect={setSelectedIntegration}
+                    onProviderSelect={handleProviderSelect}
+                    onAuthConfigSelect={setSelectedIntegration}
+                    onCreateNewAuthConfig={dashboardUrl ? handleCreateNewAuthConfig : undefined}
                     onChange={setFormData}
                     onValidationChange={handleValidationChange}
                     selectedCategory={selectedCategory}

src/modules/integration-picker/components/IntegrationPickerContent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ConnectorConfig, ConnectorConfigField, HubData, Integration } from '../types';
+import { AuthConfigSelectionView } from './views/AuthConfigSelectionView';
 import { ErrorView } from './views/ErrorView';
 import { IntegrationFormView } from './views/IntegrationFormView';
 import { IntegrationListView } from './views/IntegrationListView';
@@ -21,6 +22,9 @@ interface IntegrationPickerContentProps {
 
     // Data
     selectedIntegration: Integration | null;
+    selectedProvider: string | null;
+    uniqueProviderIntegrations: Integration[];
+    providerIntegrations: Integration[];
     connectorData: ConnectorConfig | null;
     hubData: HubData | null;
     fields: ConnectorConfigField[];
@@ -32,7 +36,9 @@ interface IntegrationPickerContentProps {
     errorConnectorData: Error | null;
 
     // Actions
-    onSelect: (integration: Integration) => void;
+    onProviderSelect: (integration: Integration) => void;
+    onAuthConfigSelect: (integration: Integration) => void;
+    onCreateNewAuthConfig?: () => void;
     onChange: (data: Record<string, string>) => void;
     onValidationChange?: (isValid: boolean) => void;
     editingSecrets?: Set<string>;
@@ -44,14 +50,19 @@ export const IntegrationPickerContent: React.FC<IntegrationPickerContentProps> =
     hasError,
     connectionState,
     selectedIntegration,
+    selectedProvider,
+    uniqueProviderIntegrations,
+    providerIntegrations,
     connectorData,
     hubData,
     fields,
     selectedCategory,
     search,
     errorHubData,
     errorConnectorData,
-    onSelect,
+    onProviderSelect,
+    onAuthConfigSelect,
+    onCreateNewAuthConfig,
     onChange,
     onValidationChange,
     editingSecrets,
@@ -90,23 +101,8 @@ export const IntegrationPickerContent: React.FC<IntegrationPickerContentProps> =
         return <SuccessView integrationName={connectorData?.name ?? selectedIntegration.name} />;
     }
 
-    // Integration selection flow
-    if (!selectedIntegration) {
-        if (!hubData?.integrations.length) {
-            return <ErrorView message="No configured integrations available." />;
-        }
-        return (
-            <IntegrationListView
-                integrations={hubData.integrations}
-                onSelect={onSelect}
-                selectedCategory={selectedCategory}
-                search={search}
-            />
-        );
-    }
-
-    // Form view (when integration is selected and connector data is available)
-    if (connectorData) {
+    // Form view (when auth config is selected and connector data is available)
+    if (selectedIntegration && connectorData) {
         return (
             <IntegrationFormView
                 fields={fields}
@@ -120,6 +116,27 @@ export const IntegrationPickerContent: React.FC<IntegrationPickerContentProps> =
         );
     }
 
-    // Fallback
-    return null;
+    // Auth Config selection (provider selected, auth config not yet selected)
+    if (selectedProvider && !selectedIntegration) {
+        return (
+            <AuthConfigSelectionView
+                integrations={providerIntegrations}
+                onSelect={onAuthConfigSelect}
+                onCreateNew={onCreateNewAuthConfig}
+            />
+        );
+    }
+
+    // Provider/Connector selection
+    if (!hubData?.integrations.length) {
+        return <ErrorView message="No configured integrations available." />;
+    }
+    return (
+        <IntegrationListView
+            integrations={uniqueProviderIntegrations}
+            onSelect={onProviderSelect}
+            selectedCategory={selectedCategory}
+            search={search}
+        />
+    );
 };

src/modules/integration-picker/components/IntegrationPickerTitle.tsx

@@ -1,4 +1,5 @@
-import { ConnectorConfig, HubData } from '../types';
+import { Button, Typography } from '@stackone/malachite';
+import { ConnectorConfig, HubData, Integration } from '../types';
 import CardTitle from './cardTitle';
 import { IntegrationListHeader } from './views/IntegrationListView';
 
@@ -14,6 +15,9 @@ interface IntegrationPickerTitleProps {
     onCategoryChange: (category: string | null) => void;
     onSearchChange: (search: string) => void;
     hideBackButton?: boolean;
+    selectedProvider: string | null;
+    hasOnlyOneProvider: boolean;
+    uniqueProviderIntegrations: Integration[];
 }
 
 export const IntegrationPickerTitle: React.FC<IntegrationPickerTitleProps> = ({
@@ -28,6 +32,9 @@ export const IntegrationPickerTitle: React.FC<IntegrationPickerTitleProps> = ({
     onCategoryChange,
     onSearchChange,
     hideBackButton,
+    selectedProvider,
+    hasOnlyOneProvider,
+    uniqueProviderIntegrations,
 }) => {
     if (connectorData) {
         return (
@@ -39,6 +46,28 @@ export const IntegrationPickerTitle: React.FC<IntegrationPickerTitleProps> = ({
         );
     }
 
+    if (selectedProvider) {
+        const showBackButton = !hasOnlyOneProvider && !accountData;
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    width: '100%',
+                    justifyContent: 'flex-start',
+                }}
+            >
+                {showBackButton && (
+                    <Button variant="ghost" onClick={onBack} icon="←" size="small" />
+                )}
+                <Typography.Text fontWeight="semi-bold" size="medium">
+                    Select Auth Config
+                </Typography.Text>
+            </div>
+        );
+    }
+
     const shouldShowListHeader = !isLoading && !hasError && hubData?.integrations;
 
     if (!shouldShowListHeader) {
@@ -47,7 +76,7 @@ export const IntegrationPickerTitle: React.FC<IntegrationPickerTitleProps> = ({
 
     return (
         <IntegrationListHeader
-            integrations={hubData.integrations}
+            integrations={uniqueProviderIntegrations}
             selectedCategory={selectedCategory}
             onCategoryChange={onCategoryChange}
             onSearchChange={onSearchChange}