Merge pull request #2527 from trycompai/fix/integrations-setup-cta

feat(app): flag pre-cutoff cloud connections for reconnect

Author: tofikwest

apps/app/src/app/(app)/[orgId]/cloud-tests/components/ProviderTabs.tsx

@@ -1,5 +1,6 @@
 import { useApi } from '@/hooks/use-api';
 import { useConnectionServices } from '@/hooks/use-integration-platform';
+import { CLOUD_RECONNECT_CUTOFF_LABEL } from '@/lib/cloud-reconnect-policy';
 import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsContent, TabsList, TabsTrigger } from '@trycompai/design-system';
 import { Add } from '@trycompai/design-system/icons';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -24,6 +25,7 @@ interface ProviderTabsProps {
   onAddConnection: (providerType: string) => void;
   onConfigure: (provider: Provider) => void;
   needsConfiguration: (provider: Provider) => boolean;
+  requiresReconnect: (provider: Provider) => boolean;
   canRunScan?: boolean;
   canAddConnection?: boolean;
   orgId: string;
@@ -218,6 +220,7 @@ export function ProviderTabs({
   onAddConnection,
   onConfigure,
   needsConfiguration,
+  requiresReconnect,
   canRunScan,
   canAddConnection,
   orgId,
@@ -293,9 +296,29 @@ export function ProviderTabs({
                 </div>
 
                 {connections.map((connection) => {
+                  const reconnectRequired = requiresReconnect(connection);
+
                   return (
                     <TabsContent key={connection.id} value={connection.id}>
                       <div className="mt-4">
+                        {reconnectRequired && (
+                          <div className="mb-4 rounded-lg border border-warning/30 bg-warning/10 px-4 py-3">
+                            <div className="flex items-center justify-between gap-3">
+                              <div>
+                                <p className="text-sm font-medium">Reconnect this account</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">
+                                  This connection was created before {CLOUD_RECONNECT_CUTOFF_LABEL}. Reconnect it to keep scans and remediation fully reliable.
+                                </p>
+                              </div>
+                              {canAddConnection !== false && (
+                                <Button size="sm" onClick={() => onAddConnection(providerType)}>
+                                  Reconnect
+                                </Button>
+                              )}
+                            </div>
+                          </div>
+                        )}
+
                         <ConnectionDetails connection={connection} />
 
                         {/* New platform connections get full tabbed UI */}

apps/app/src/app/(app)/[orgId]/cloud-tests/components/TestsLayout.tsx

@@ -4,6 +4,7 @@ import { ConnectIntegrationDialog } from '@/components/integrations/ConnectInteg
 import { useApi } from '@/hooks/use-api';
 import { usePermissions } from '@/hooks/use-permissions';
 import { ManageIntegrationDialog } from '@/components/integrations/ManageIntegrationDialog';
+import { CLOUD_RECONNECT_CUTOFF_LABEL, requiresCloudReconnect } from '@/lib/cloud-reconnect-policy';
 import { Button, PageHeader, PageHeaderDescription, PageLayout } from '@trycompai/design-system';
 import { Add, Settings } from '@trycompai/design-system/icons';
 import { useSearchParams, useRouter } from 'next/navigation';
@@ -101,6 +102,18 @@ export function TestsLayout({ initialFindings, initialProviders, orgId }: TestsL
   const isProvidersValidating = providersResponse.isValidating;
 
   const connectedProviders = providers;
+  const reconnectRequiredCount = useMemo(
+    () =>
+      connectedProviders.filter((provider) =>
+        requiresCloudReconnect({
+          providerId: provider.integrationId,
+          createdAt: provider.createdAt,
+          isLegacy: provider.isLegacy,
+          status: provider.status,
+        }),
+      ).length,
+    [connectedProviders],
+  );
 
   // Group connections by provider type (aws, gcp, azure)
   const providerGroups = useMemo(() => {
@@ -269,6 +282,17 @@ export function TestsLayout({ initialFindings, initialProviders, orgId }: TestsL
         <PageHeaderDescription>{multiProviderDescription}</PageHeaderDescription>
       </PageHeader>
 
+      {reconnectRequiredCount > 0 && (
+        <div className="mb-4 rounded-lg border border-warning/30 bg-warning/10 px-4 py-3">
+          <p className="text-sm font-medium text-foreground">
+            Reconnect required for {reconnectRequiredCount} cloud connection{reconnectRequiredCount === 1 ? '' : 's'}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Connections created before {CLOUD_RECONNECT_CUTOFF_LABEL} should be re-added to keep scans and remediation fully reliable.
+          </p>
+        </div>
+      )}
+
       <ProviderTabs
         providerGroups={providerGroups}
         providerTypes={activeProviderTypes}
@@ -303,6 +327,14 @@ export function TestsLayout({ initialFindings, initialProviders, orgId }: TestsL
           setConfigureDialogOpen(true);
         }}
         needsConfiguration={needsVariableConfiguration}
+        requiresReconnect={(provider) =>
+          requiresCloudReconnect({
+            providerId: provider.integrationId,
+            createdAt: provider.createdAt,
+            isLegacy: provider.isLegacy,
+            status: provider.status,
+          })
+        }
         canRunScan={canRunScan}
         canAddConnection={canCreateIntegration}
         orgId={orgId}

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

@@ -7,6 +7,10 @@ import {
   type ConnectionListItem,
   type IntegrationProvider,
 } from '@/hooks/use-integration-platform';
+import {
+  CLOUD_RECONNECT_CUTOFF_LABEL,
+  requiresCloudReconnect,
+} from '@/lib/cloud-reconnect-policy';
 import { api } from '@/lib/api-client';
 import {
   Breadcrumb,
@@ -63,6 +67,14 @@ export function ProviderDetailView({ provider, initialConnections }: ProviderDet
       }
     ).services ?? [];
   const isCloudProvider = provider.category === 'Cloud';
+  const selectedConnectionRequiresReconnect = useMemo(() => {
+    if (!isCloudProvider || !selectedConnection) return false;
+    return requiresCloudReconnect({
+      providerId: provider.id,
+      createdAt: selectedConnection.createdAt,
+      status: selectedConnection.status,
+    });
+  }, [isCloudProvider, provider.id, selectedConnection]);
 
   // Services hook for the selected connection
   const {
@@ -182,6 +194,20 @@ export function ProviderDetailView({ provider, initialConnections }: ProviderDet
           onAddAccount={() => void handleConnect()}
         />
 
+        {selectedConnectionRequiresReconnect && (
+          <div className="rounded-lg border border-warning/30 bg-warning/10 px-4 py-3 flex items-center justify-between gap-3">
+            <div>
+              <p className="text-sm font-medium">Reconnect this account</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                This connection was created before {CLOUD_RECONNECT_CUTOFF_LABEL}. Reconnect it to keep scans and remediation fully reliable.
+              </p>
+            </div>
+            <Button size="sm" variant="outline" onClick={() => void handleConnect()}>
+              Reconnect
+            </Button>
+          </div>
+        )}
+
         {/* Content: zero state OR findings */}
         {!isConnected && (
           <EmptyStateOnboarding

apps/app/src/lib/cloud-reconnect-policy.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import {
+  CLOUD_RECONNECT_CUTOFF_ISO_UTC,
+  requiresCloudReconnect,
+} from './cloud-reconnect-policy';
+
+describe('requiresCloudReconnect', () => {
+  it('returns true for cloud connections created before the cutoff date', () => {
+    expect(
+      requiresCloudReconnect({
+        providerId: 'aws',
+        createdAt: '2026-04-12T23:59:59.999Z',
+        status: 'active',
+      }),
+    ).toBe(true);
+  });
+
+  it('returns false for cloud connections created exactly at the cutoff timestamp', () => {
+    expect(
+      requiresCloudReconnect({
+        providerId: 'aws',
+        createdAt: CLOUD_RECONNECT_CUTOFF_ISO_UTC,
+        status: 'active',
+      }),
+    ).toBe(false);
+  });
+
+  it('returns false for cloud connections created after the cutoff date', () => {
+    expect(
+      requiresCloudReconnect({
+        providerId: 'gcp',
+        createdAt: '2026-04-14T00:00:00.000Z',
+        status: 'active',
+      }),
+    ).toBe(false);
+  });
+
+  it('returns false for non-cloud providers', () => {
+    expect(
+      requiresCloudReconnect({
+        providerId: 'github',
+        createdAt: CLOUD_RECONNECT_CUTOFF_ISO_UTC,
+        status: 'active',
+      }),
+    ).toBe(false);
+  });
+
+  it('returns false for invalid dates', () => {
+    expect(
+      requiresCloudReconnect({
+        providerId: 'azure',
+        createdAt: 'not-a-date',
+        status: 'active',
+      }),
+    ).toBe(false);
+  });
+});

apps/app/src/lib/cloud-reconnect-policy.ts

@@ -0,0 +1,33 @@
+const CLOUD_RECONNECT_PROVIDER_IDS = new Set(['aws', 'gcp', 'azure']);
+
+/**
+ * Connections created before this UTC timestamp require re-connection.
+ * This rollout date is fixed intentionally so the behavior is stable over time.
+ */
+export const CLOUD_RECONNECT_CUTOFF_ISO_UTC = '2026-04-13T00:00:00.000Z';
+export const CLOUD_RECONNECT_CUTOFF_LABEL = 'April 13, 2026';
+
+const CLOUD_RECONNECT_CUTOFF_MS = new Date(CLOUD_RECONNECT_CUTOFF_ISO_UTC).getTime();
+
+type ReconnectCandidate = {
+  providerId: string;
+  createdAt?: Date | string | null;
+  isLegacy?: boolean;
+  status?: string | null;
+};
+
+export function requiresCloudReconnect(candidate: ReconnectCandidate): boolean {
+  if (!CLOUD_RECONNECT_PROVIDER_IDS.has(candidate.providerId)) return false;
+  if (candidate.isLegacy) return false;
+
+  if (candidate.status && candidate.status !== 'active' && candidate.status !== 'pending') {
+    return false;
+  }
+
+  if (!candidate.createdAt) return false;
+
+  const createdAt = new Date(candidate.createdAt);
+  if (Number.isNaN(createdAt.getTime())) return false;
+
+  return createdAt.getTime() < CLOUD_RECONNECT_CUTOFF_MS;
+}