updates

Author: himanshudube97

components/ingest/redesign/__tests__/source-row.test.tsx

@@ -49,6 +49,8 @@ function baseProps(group: SourceGroupData): SourceGroupProps {
     onAddConnection: jest.fn(),
     onEditSource: jest.fn(),
     onDeleteSource: jest.fn(),
+    connectionsStatus: 'ready',
+    onRetryConnections: jest.fn(),
   };
 }
 
@@ -93,4 +95,34 @@ describe('SourceRow', () => {
     expect(screen.queryByTestId('add-connection-s1')).not.toBeInTheDocument();
     expect(screen.getByText('No connections yet')).toBeInTheDocument();
   });
+
+  // Connections are fetched separately from sources, so a source row can render
+  // before its connections have arrived. Zero connections must not be read as
+  // "this source has none" until the fetch has actually answered.
+  it('shows a loading placeholder instead of the add-connection CTA while connections load', () => {
+    const group: SourceGroupData = { source: source('s1', 'Kobo'), connections: [] };
+    render(<SourceRow {...baseProps(group)} connectionsStatus="loading" />);
+    expect(screen.getByTestId('connections-loading-s1')).toBeInTheDocument();
+    expect(screen.queryByTestId('add-connection-s1')).not.toBeInTheDocument();
+    expect(screen.queryByText('No connections yet')).not.toBeInTheDocument();
+  });
+
+  it('shows a retry affordance instead of the add-connection CTA when connections failed to load', () => {
+    const group: SourceGroupData = { source: source('s1', 'Kobo'), connections: [] };
+    const props = baseProps(group);
+    render(<SourceRow {...props} connectionsStatus="error" />);
+    expect(screen.queryByTestId('add-connection-s1')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('retry-connections-s1'));
+    expect(props.onRetryConnections).toHaveBeenCalledTimes(1);
+  });
+
+  it('still renders already-loaded connections while the list is revalidating', () => {
+    const group: SourceGroupData = {
+      source: source('s1', 'Kobo'),
+      connections: [conn('c1', 's1')],
+    };
+    render(<SourceRow {...baseProps(group)} connectionsStatus="loading" />);
+    expect(screen.getByTestId('connection-row-c1')).toBeInTheDocument();
+    expect(screen.queryByTestId('connections-loading-s1')).not.toBeInTheDocument();
+  });
 });

components/ingest/redesign/__tests__/steady-view.test.tsx

@@ -66,6 +66,35 @@ describe('SteadyView (smoke)', () => {
     expect(screen.getByTestId('connection-row-c1')).toBeInTheDocument();
   });
 
+  // Sources and connections are two separate fetches; sources can land first.
+  // Until connections answer, a source must not be labelled as having none.
+  it('does not show the add-connection empty state while connections are still loading', () => {
+    mockConnections.mockReturnValue({ data: [], isLoading: true, mutate: jest.fn() });
+    mockSources.mockReturnValue({ data: [source('s2', 'Sheets')], mutate: jest.fn() });
+
+    render(<SteadyView />);
+
+    expect(screen.getByTestId('source-row-s2')).toBeInTheDocument();
+    expect(screen.getByTestId('connections-loading-s2')).toBeInTheDocument();
+    expect(screen.queryByTestId('add-connection-s2')).not.toBeInTheDocument();
+  });
+
+  it('offers a retry instead of the empty state when the connections fetch failed', () => {
+    const mutate = jest.fn();
+    mockConnections.mockReturnValue({
+      data: [],
+      isLoading: false,
+      isError: new Error('boom'),
+      mutate,
+    });
+    mockSources.mockReturnValue({ data: [source('s2', 'Sheets')], mutate: jest.fn() });
+
+    render(<SteadyView />);
+
+    expect(screen.queryByTestId('add-connection-s2')).not.toBeInTheDocument();
+    expect(screen.getByTestId('retry-connections-s2')).toBeInTheDocument();
+  });
+
   it('shows a source with no connections as a plain add-connection row', () => {
     mockConnections.mockReturnValue({ data: [], mutate: jest.fn() });
     mockSources.mockReturnValue({ data: [source('s2', 'Sheets')], mutate: jest.fn() });

components/ingest/redesign/source-row.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Plus, MoreVertical, Pencil, Trash2, Plug } from 'lucide-react';
+import { Plus, MoreVertical, Pencil, Trash2, Plug, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Table, TableBody } from '@/components/ui/table';
 import {
   DropdownMenu,
@@ -142,6 +143,45 @@ function SourceMenu({
   );
 }
 
+/**
+ * Placeholder occupying the connections column while the connections fetch is in
+ * flight. Sized to a one-connection row so the source row doesn't jump height
+ * when the real rows arrive.
+ */
+function ConnectionsLoading({ sourceId }: { sourceId: string }) {
+  return (
+    <div
+      className="flex h-full items-center gap-3 px-6 py-4"
+      data-testid={`connections-loading-${sourceId}`}
+      aria-busy="true"
+      aria-label="Loading connections"
+    >
+      <Skeleton className="h-4 w-[45%]" />
+      <Skeleton className="h-4 w-[25%]" />
+    </div>
+  );
+}
+
+/** The connections fetch failed — say so and offer a retry instead of guessing. */
+function ConnectionsError({ sourceId, onRetry }: { sourceId: string; onRetry: () => void }) {
+  return (
+    <div className="flex h-full items-center gap-2 px-6 py-4">
+      <AlertCircle className="h-4 w-4 flex-shrink-0 text-destructive" />
+      <p className="text-base text-muted-foreground">
+        Couldn&apos;t load connections.{' '}
+        <button
+          type="button"
+          onClick={onRetry}
+          data-testid={`retry-connections-${sourceId}`}
+          className="cursor-pointer font-medium text-primary underline underline-offset-2 hover:opacity-80"
+        >
+          Retry
+        </button>
+      </p>
+    </div>
+  );
+}
+
 /**
  * One source rendered as a horizontal band for the "Side-by-side" layout:
  * a fixed-width left column (source identity + 3-dots menu, which owns the
@@ -172,8 +212,14 @@ export function SourceRow({
   onAddConnection,
   onEditSource,
   onDeleteSource,
+  connectionsStatus,
+  onRetryConnections,
 }: SourceGroupProps) {
   const { source, connections } = group;
+  // Zero connections is only meaningful once the fetch has answered — before
+  // that it's absence of data, not absence of connections. Already-loaded
+  // connections keep rendering through a background revalidate.
+  const pending = connections.length === 0 && connectionsStatus !== 'ready';
 
   return (
     <div
@@ -199,7 +245,13 @@ export function SourceRow({
       {/* Right — connections stacked as full-width rows, vertically centered so a
           single connection lines up with the source block instead of sitting at the top */}
       <div className="flex-1 min-w-0 flex flex-col justify-center">
-        {connections.length === 0 ? (
+        {pending ? (
+          connectionsStatus === 'error' ? (
+            <ConnectionsError sourceId={source.sourceId} onRetry={onRetryConnections} />
+          ) : (
+            <ConnectionsLoading sourceId={source.sourceId} />
+          )
+        ) : connections.length === 0 ? (
           // Empty state — the source is connected but has no connections yet.
           // An inline sentence with a clickable "add a connection" that opens the
           // connection modal (a button reads as a hard action; this reads as guidance).

components/ingest/redesign/steady-view.tsx

@@ -27,7 +27,10 @@ import { PendingActions } from '@/components/connections/pending-actions';
 import { SchemaChangeForm } from '@/components/connections/schema-change-form';
 import { SourceForm } from '@/components/ingest/sources/SourceForm';
 import { SourceRow } from '@/components/ingest/redesign/source-row';
-import { groupConnectionsBySource } from '@/components/ingest/redesign/utils';
+import {
+  groupConnectionsBySource,
+  type ConnectionsStatus,
+} from '@/components/ingest/redesign/utils';
 import type { Connection, ClearStreamData } from '@/types/connections';
 import type { Source } from '@/types/source';
 
@@ -94,7 +97,12 @@ function compareSources(a: Source, b: Source, sort: SortOption): number {
  * forms.
  */
 export function SteadyView() {
-  const { data: connections, mutate: mutateConnections } = useConnectionsList();
+  const {
+    data: connections,
+    isLoading: connectionsLoading,
+    isError: connectionsError,
+    mutate: mutateConnections,
+  } = useConnectionsList();
   const { data: sources, mutate: mutateSources } = useSources();
   const { hasPermission } = useRbac();
   const { confirm, DialogComponent } = useConfirmationDialog();
@@ -165,6 +173,19 @@ export function SteadyView() {
     );
   }, [sources, connections, searchTerm, sortOption]);
 
+  // Sources and connections are separate fetches, and this view mounts as soon as
+  // sources land. Passing the connections fetch state down stops each source row
+  // reading "still loading" as "no connections" (see ConnectionsStatus).
+  const connectionsStatus: ConnectionsStatus = connectionsError
+    ? 'error'
+    : connectionsLoading
+      ? 'loading'
+      : 'ready';
+
+  const handleRetryConnections = useCallback(() => {
+    mutateConnections();
+  }, [mutateConnections]);
+
   const handleSortSources = useCallback(() => {
     setSortOption((prev) => nextSort(prev));
   }, []);
@@ -501,6 +522,8 @@ export function SteadyView() {
                   <SourceRow
                     key={group.source.sourceId}
                     group={group}
+                    connectionsStatus={connectionsStatus}
+                    onRetryConnections={handleRetryConnections}
                     syncingIds={syncingIds}
                     canSync={canSync}
                     canEditConnection={canEditConnection}

components/ingest/redesign/utils.ts

@@ -8,13 +8,25 @@ export interface SourceGroupData {
   connections: Connection[];
 }
 
+/**
+ * How the connections fetch is doing. Sources and connections are two separate
+ * requests, so a source row can render before its connections exist client-side.
+ * Without this, an unanswered (or failed) fetch is indistinguishable from a
+ * source that genuinely has no connections — and the row wrongly tells the user
+ * to go add one. Same trap as the warehouse/NO_WAREHOUSE split in state.ts.
+ */
+export type ConnectionsStatus = 'loading' | 'error' | 'ready';
+
 /**
  * Props for a source renderer (SourceRow). Carries one grouped source plus the
  * permission flags and action callbacks passed straight through to the reused
  * ConnectionRow and source menu.
  */
 export interface SourceGroupProps {
   group: SourceGroupData;
+  // Fetch state of the connections list (see ConnectionsStatus)
+  connectionsStatus: ConnectionsStatus;
+  onRetryConnections: () => void;
   // Connection permissions + action wiring (passed straight to ConnectionRow)
   syncingIds: string[];
   canSync: boolean;