Merge pull request #2540 from trycompai/sale-28-vendor-integrations-priority

SALE-28: Prioritize vendor-listed integrations

Author: tofikwest

apps/app/src/app/(app)/[orgId]/integrations/components/PlatformIntegrations.test.tsx

@@ -18,35 +18,21 @@ vi.mock('@/hooks/use-permissions', () => ({
 
 // Mock integration platform hooks
 const mockStartOAuth = vi.fn();
+const mockUseIntegrationProviders = vi.fn();
+const mockUseIntegrationConnections = vi.fn();
 vi.mock('@/hooks/use-integration-platform', () => ({
-  useIntegrationProviders: () => ({
-    providers: [
-      {
-        id: 'github',
-        name: 'GitHub',
-        description: 'Code hosting',
-        category: 'Development',
-        logoUrl: '/github.png',
-        authType: 'oauth2',
-        oauthConfigured: true,
-        isActive: true,
-        requiredVariables: [],
-        mappedTasks: [],
-        supportsMultipleConnections: false,
-      },
-    ],
-    isLoading: false,
-  }),
-  useIntegrationConnections: () => ({
-    connections: [],
-    isLoading: false,
-    refresh: vi.fn(),
-  }),
+  useIntegrationProviders: mockUseIntegrationProviders,
+  useIntegrationConnections: mockUseIntegrationConnections,
   useIntegrationMutations: () => ({
     startOAuth: mockStartOAuth,
   }),
 }));
 
+const mockUseVendors = vi.fn();
+vi.mock('@/hooks/use-vendors', () => ({
+  useVendors: mockUseVendors,
+}));
+
 // Mock integrations data
 vi.mock('../data/integrations', () => ({
   CATEGORIES: ['Development'],
@@ -159,6 +145,38 @@ const defaultProps = {
 describe('PlatformIntegrations', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockUseIntegrationProviders.mockReturnValue({
+      providers: [
+        {
+          id: 'github',
+          name: 'GitHub',
+          description: 'Code hosting',
+          category: 'Development',
+          logoUrl: '/github.png',
+          authType: 'oauth2',
+          oauthConfigured: true,
+          isActive: true,
+          requiredVariables: [],
+          mappedTasks: [],
+          supportsMultipleConnections: false,
+        },
+      ],
+      isLoading: false,
+    });
+    mockUseIntegrationConnections.mockReturnValue({
+      connections: [],
+      isLoading: false,
+      refresh: vi.fn(),
+    });
+    mockUseVendors.mockReturnValue({
+      data: {
+        data: {
+          data: [],
+          count: 0,
+        },
+        status: 200,
+      },
+    });
   });
 
   describe('Permission gating', () => {
@@ -329,4 +347,77 @@ describe('PlatformIntegrations', () => {
       expect(toast.info).not.toHaveBeenCalled();
     });
   });
+
+  describe('Vendor-prioritized ordering', () => {
+    it('shows integrations from vendor list before non-vendor integrations', () => {
+      mockUseIntegrationProviders.mockReturnValue({
+        providers: [
+          {
+            id: 'github',
+            name: 'GitHub',
+            description: 'Code hosting',
+            category: 'Development',
+            logoUrl: '/github.png',
+            authType: 'oauth2',
+            oauthConfigured: true,
+            isActive: true,
+            requiredVariables: [],
+            mappedTasks: [],
+            supportsMultipleConnections: false,
+          },
+          {
+            id: 'slack',
+            name: 'Slack',
+            description: 'Team communication',
+            category: 'Communication',
+            logoUrl: '/slack.png',
+            authType: 'api_key',
+            isActive: true,
+            requiredVariables: [],
+            mappedTasks: [],
+            supportsMultipleConnections: false,
+          },
+        ],
+        isLoading: false,
+      });
+      mockUseIntegrationConnections.mockReturnValue({
+        connections: [
+          {
+            id: 'conn-1',
+            providerSlug: 'github',
+            status: 'active',
+            variables: {},
+          },
+        ],
+        isLoading: false,
+        refresh: vi.fn(),
+      });
+      mockUseVendors.mockReturnValue({
+        data: {
+          data: {
+            data: [
+              {
+                id: 'vnd-1',
+                name: 'Slack',
+              },
+            ],
+            count: 1,
+          },
+          status: 200,
+        },
+      });
+
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(<PlatformIntegrations {...defaultProps} />);
+
+      const integrationTitles = screen
+        .getAllByRole('heading', { level: 3 })
+        .map((heading) => heading.textContent?.trim())
+        .filter(Boolean);
+
+      expect(integrationTitles[0]).toBe('Slack');
+      expect(integrationTitles[1]).toBe('GitHub');
+    });
+  });
 });

apps/app/src/app/(app)/[orgId]/integrations/components/PlatformIntegrations.tsx

@@ -3,6 +3,7 @@
 import { ConnectIntegrationDialog } from '@/components/integrations/ConnectIntegrationDialog';
 import { ManageIntegrationDialog } from '@/components/integrations/ManageIntegrationDialog';
 import { usePermissions } from '@/hooks/use-permissions';
+import { useVendors } from '@/hooks/use-vendors';
 import {
   ConnectionListItem,
   IntegrationProvider,
@@ -66,6 +67,16 @@ const providerNeedsConfiguration = (
   return requiredVariables.some((varId) => !currentVars[varId]);
 };
 
+const normalizeIntegrationName = (value: string): string => {
+  return value
+    .toLowerCase()
+    .replace(/\s*\([^)]*\)\s*$/, '')
+    .replace(/[_-]+/g, ' ')
+    .replace(/[^a-z0-9 ]+/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+};
+
 interface RelevantTask {
   taskId: string; // Actual task ID for navigation
   taskTemplateId: string;
@@ -96,6 +107,7 @@ export function PlatformIntegrations({ className, taskTemplates }: PlatformInteg
   const { hasPermission } = usePermissions();
   const canCreate = hasPermission('integration', 'create');
   const { startOAuth } = useIntegrationMutations();
+  const { data: vendorsResponse } = useVendors();
 
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<IntegrationCategory | 'All'>('All');
@@ -183,7 +195,20 @@ export function PlatformIntegrations({ className, taskTemplates }: PlatformInteg
     [connections],
   );
 
-  // Merge and sort: platform first (warnings, then connected, then disconnected), then custom
+  const vendorNames = useMemo(() => {
+    const vendors = vendorsResponse?.data?.data;
+    if (!Array.isArray(vendors)) {
+      return new Set<string>();
+    }
+
+    return new Set(
+      vendors
+        .map((vendor) => normalizeIntegrationName(vendor.name))
+        .filter((name) => name.length > 0),
+    );
+  }, [vendorsResponse]);
+
+  // Merge/sort integrations, then prioritize entries matching vendors in the org's vendor list.
   const unifiedIntegrations = useMemo<UnifiedIntegration[]>(() => {
     const platformIntegrations: UnifiedIntegration[] = (providers?.filter((p) => p.isActive) || [])
       .map((provider) => ({
@@ -214,8 +239,33 @@ export function PlatformIntegrations({ className, taskTemplates }: PlatformInteg
       integration,
     }));
 
-    return [...platformIntegrations, ...customIntegrations];
-  }, [providers, connectionsByProvider]);
+    const allIntegrations = [...platformIntegrations, ...customIntegrations];
+    if (vendorNames.size === 0) {
+      return allIntegrations;
+    }
+
+    const vendorListedIntegrations: UnifiedIntegration[] = [];
+    const otherIntegrations: UnifiedIntegration[] = [];
+
+    allIntegrations.forEach((integration) => {
+      const candidateNames =
+        integration.type === 'platform'
+          ? [integration.provider.name, integration.provider.id]
+          : [integration.integration.name, integration.integration.id];
+
+      const isVendorListed = candidateNames
+        .map((candidateName) => normalizeIntegrationName(candidateName))
+        .some((normalizedCandidateName) => vendorNames.has(normalizedCandidateName));
+
+      if (isVendorListed) {
+        vendorListedIntegrations.push(integration);
+      } else {
+        otherIntegrations.push(integration);
+      }
+    });
+
+    return [...vendorListedIntegrations, ...otherIntegrations];
+  }, [providers, connectionsByProvider, vendorNames]);
 
   // Get all unique categories
   const allCategories = useMemo(() => {