Fix InferenceService row click details navigation (#194)

## Problem

Clicking an `InferenceService` name in the KServe UI Endpoints table can
move the browser URL to the details route without rendering the details
page.

In the reported flow, the Central Dashboard parent URL and the KServe
iframe URL both changed to:

```text
/kserve-endpoints/details/<namespace>/<name>
```

However, the iframe still displayed the Endpoints list. The details page
rendered only after refreshing the browser on the same details URL or
opening the details URL directly.

That behavior showed the route, Istio path, Dashboard iframe wrapper,
and backend API path were valid. The failing boundary was the row-click
navigation path in the KServe UI: the URL changed, but the details
component was not activated and the detail SSE request was not opened.

## Root Cause

The Endpoints table name column is an internal link. In the embedded
Dashboard flow, that link can leave the KServe UI in a stale list view
after the URL changes to the details route.

When the page is loaded directly on the details route, the details
component initializes correctly and opens the detail SSE stream:

```text
/kserve-endpoints/api/sse/namespaces/<namespace>/inferenceservices/<name>
```

So the fix makes the embedded Dashboard name-click path use the same
reliable page-load behavior as direct details navigation, while
preserving normal Angular router navigation outside the Dashboard
wrapper.

## Changes

- Intercept `name:link` actions for non-terminating `InferenceService`
rows only for normal primary-button clicks.
- Leave modified clicks and non-primary mouse-button clicks to the
browser so open-in-new-tab/window behavior remains intact.
- Track the existing `NamespaceService.dashboardConnected$` state
instead of applying the page-load workaround to every deployment mode.
- In Dashboard-connected mode, stop the table link event, build the
details URL through Angular router serialization and `LocationStrategy`,
then move the parent Dashboard shell to
`/_/kserve-endpoints/details/<namespace>/<name>` while preserving the
selected namespace query parameter.
- In disconnected standalone mode, preserve Angular `router.navigate()`
behavior for row-name navigation.
- If the parent Dashboard URL cannot be read, fall back to loading the
KServe application details URL directly in the current frame.
- Keep the existing terminating-resource guard, including the snackbar
message.
- Add focused Jest coverage for:
  - the name column remaining an internal anchor,
  - Dashboard-wrapper details navigation,
  - standalone router navigation,
  - browser-managed modified clicks,
  - parent-location read failure fallback,
  - blocked navigation for terminating `InferenceService` rows.

## Validation

Automated checks:

```text
npm run format:check --prefix frontend
npm run lint-check --prefix frontend
npm run test:jest --prefix frontend -- --runInBand
npm run build --prefix frontend
git diff --check
```

Results:

- Format check: passed.
- Angular lint: all files passed.
- Full Jest: 29 suites and 142 tests passed.
- Production frontend build: passed.
- Whitespace check: passed.

Notes:

- Jest still emits existing shallow-test Angular unknown-element
warnings for mocked shared UI components.
- The production build still emits existing CommonJS optimization and
bundle-budget warnings.

Live reduced Kind verification:

- Original image `ghcr.io/kserve/models-web-app:1.0.0`: reproduced the
bug. The first row click changed the parent and iframe URLs to the
details route, but the iframe stayed on the Endpoints list until
refresh.
- Fixed image `local/models-web-app:row-click-fix-v5`: verified the
embedded Dashboard page-load approach. The first row click rendered
`Endpoint details` immediately without refresh, and the detail SSE
request returned HTTP 200.
- The later review follow-up preserves that embedded Dashboard path and
adds automated coverage for standalone navigation and browser-managed
click behavior.

---------

Signed-off-by: danish9039 <danishsiddiqui040@gmail.com>

Author: danish9039

frontend/src/app/pages/index/index.component.spec.ts

@@ -12,19 +12,31 @@ import {
   PollerService,
   KubeflowModule,
   DashboardState,
+  STATUS_TYPE,
+  LinkType,
 } from 'kubeflow';
 import { CommonModule } from '@angular/common';
 import { IndexComponent } from './index.component';
-import { Observable, Observer, of, Subject } from 'rxjs';
+import { defaultConfig } from './config';
+import { BehaviorSubject, Observable, Observer, of, Subject } from 'rxjs';
 import { SSEService, WatchEvent } from 'src/app/services/sse.service';
 import { InferenceServiceK8s } from 'src/app/types/kfserving/v1beta1';
+import { Router } from '@angular/router';
+import { LocationStrategy } from '@angular/common';
+import { BROWSER_WINDOW } from './index.component';
 
 let MWABackendServiceStub: Partial<MWABackendService>;
 let NamespaceServiceStub: Partial<NamespaceService>;
 let MWANamespaceServiceStub: Partial<MWANamespaceService>;
 let SSEServiceStub: Partial<SSEService>;
 let sseEvents: Subject<WatchEvent<InferenceServiceK8s>>;
 let sseTeardown: jest.Mock;
+let snackBarOpen: jest.Mock;
+let locationAssign: jest.Mock;
+let parentLocationAssign: jest.Mock;
+let prepareExternalUrl: jest.Mock;
+let browserWindowMock: any;
+let dashboardConnectionState: BehaviorSubject<DashboardState>;
 
 MWABackendServiceStub = {
   getInferenceServices: () => of(),
@@ -52,6 +64,7 @@ MWANamespaceServiceStub = {
 describe('IndexComponent', () => {
   let component: IndexComponent;
   let fixture: ComponentFixture<IndexComponent>;
+  let router: Router;
 
   const inferenceService = (
     name: string,
@@ -83,9 +96,45 @@ describe('IndexComponent', () => {
     } as any,
   });
 
+  const nameLinkAction = (phase: STATUS_TYPE, event: any) =>
+    ({
+      action: 'name:link',
+      data: {
+        metadata: {
+          name: 'model-a',
+          namespace: 'kubeflow-user',
+        },
+        ui: {
+          status: {
+            phase,
+          },
+        },
+      },
+      event,
+    } as any);
+
   beforeEach(waitForAsync(() => {
+    dashboardConnectionState = new BehaviorSubject<DashboardState>(
+      DashboardState.Disconnected,
+    );
     sseEvents = new Subject<WatchEvent<InferenceServiceK8s>>();
     sseTeardown = jest.fn();
+    snackBarOpen = jest.fn();
+    locationAssign = jest.fn();
+    parentLocationAssign = jest.fn();
+    prepareExternalUrl = jest.fn(path => `/kserve-endpoints${path}`);
+    browserWindowMock = {
+      location: {
+        href: 'http://localhost:8081/kserve-endpoints/',
+        assign: locationAssign,
+      },
+      parent: {
+        location: {
+          href: 'http://localhost:8081/_/kserve-endpoints/?ns=kubeflow-user',
+          assign: parentLocationAssign,
+        },
+      },
+    };
     SSEServiceStub = {
       watchInferenceServices: <T>() =>
         new Observable<WatchEvent<T>>(observer => {
@@ -99,6 +148,12 @@ describe('IndexComponent', () => {
         }),
     };
 
+    NamespaceServiceStub = {
+      getSelectedNamespace: () => of(),
+      getSelectedNamespace2: () => of(),
+      dashboardConnected$: dashboardConnectionState.asObservable(),
+    };
+
     TestBed.configureTestingModule({
       declarations: [IndexComponent],
       imports: [
@@ -114,16 +169,27 @@ describe('IndexComponent', () => {
         { provide: NamespaceService, useValue: NamespaceServiceStub },
         { provide: MWANamespaceService, useValue: MWANamespaceServiceStub },
         { provide: SSEService, useValue: SSEServiceStub },
-        { provide: SnackBarService, useValue: {} },
+        { provide: SnackBarService, useValue: { open: snackBarOpen } },
         { provide: Clipboard, useValue: {} },
         { provide: PollerService, useValue: { exponential: () => of() } },
+        {
+          provide: LocationStrategy,
+          useValue: {
+            prepareExternalUrl,
+          },
+        },
+        {
+          provide: BROWSER_WINDOW,
+          useValue: browserWindowMock,
+        },
       ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(IndexComponent);
     component = fixture.componentInstance;
+    router = TestBed.inject(Router);
     fixture.detectChanges();
   });
 
@@ -198,4 +264,118 @@ describe('IndexComponent', () => {
       'model-b',
     ]);
   });
+
+  it('should render name links as internal anchors', () => {
+    const nameColumn = defaultConfig.columns.find(
+      column => column.matColumnDef === 'name',
+    );
+
+    expect(nameColumn?.value.linkType).toBe(LinkType.Internal);
+  });
+
+  it('should reload the parent dashboard to the details route for name link actions', () => {
+    dashboardConnectionState.next(DashboardState.Connected);
+    const event = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    const navigateSpy = jest.spyOn(router, 'navigate').mockResolvedValue(true);
+
+    component.reactToAction(nameLinkAction(STATUS_TYPE.READY, event));
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(prepareExternalUrl).toHaveBeenCalledWith(
+      '/details/kubeflow-user/model-a',
+    );
+    expect(parentLocationAssign).toHaveBeenCalledWith(
+      '/_/kserve-endpoints/details/kubeflow-user/model-a?ns=kubeflow-user',
+    );
+    expect(locationAssign).not.toHaveBeenCalled();
+    expect(navigateSpy).not.toHaveBeenCalled();
+  });
+
+  it('should use router navigation when disconnected from the dashboard', () => {
+    browserWindowMock.parent = browserWindowMock;
+    const event = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    const navigateSpy = jest.spyOn(router, 'navigate').mockResolvedValue(true);
+
+    component.reactToAction(nameLinkAction(STATUS_TYPE.READY, event));
+
+    expect(navigateSpy).toHaveBeenCalledWith([
+      '/details',
+      'kubeflow-user',
+      'model-a',
+    ]);
+    expect(locationAssign).not.toHaveBeenCalled();
+    expect(parentLocationAssign).not.toHaveBeenCalled();
+  });
+
+  it('should let the browser handle modified name link clicks', () => {
+    dashboardConnectionState.next(DashboardState.Connected);
+    const event = {
+      button: 0,
+      ctrlKey: true,
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    const navigateSpy = jest.spyOn(router, 'navigate').mockResolvedValue(true);
+
+    component.reactToAction(nameLinkAction(STATUS_TYPE.READY, event));
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(event.stopPropagation).not.toHaveBeenCalled();
+    expect(navigateSpy).not.toHaveBeenCalled();
+    expect(locationAssign).not.toHaveBeenCalled();
+    expect(parentLocationAssign).not.toHaveBeenCalled();
+  });
+
+  it('should reload the frame directly when parent dashboard location cannot be read', () => {
+    dashboardConnectionState.next(DashboardState.Connected);
+    const event = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    Object.defineProperty(browserWindowMock.parent.location, 'href', {
+      get: () => {
+        throw new DOMException(
+          'Blocked parent location access',
+          'SecurityError',
+        );
+      },
+    });
+
+    component.reactToAction(nameLinkAction(STATUS_TYPE.READY, event));
+
+    expect(locationAssign).toHaveBeenCalledWith(
+      '/kserve-endpoints/details/kubeflow-user/model-a',
+    );
+    expect(parentLocationAssign).not.toHaveBeenCalled();
+  });
+
+  it('should block navigation for terminating inference service name link actions', () => {
+    const event = {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+    };
+    const navigateSpy = jest.spyOn(router, 'navigate').mockResolvedValue(true);
+
+    component.reactToAction(nameLinkAction(STATUS_TYPE.TERMINATING, event));
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(navigateSpy).not.toHaveBeenCalled();
+    expect(locationAssign).not.toHaveBeenCalled();
+    expect(parentLocationAssign).not.toHaveBeenCalled();
+    expect(snackBarOpen).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({
+          msg: 'Endpoint is being deleted, cannot show details.',
+        }),
+      }),
+    );
+  });
 });

frontend/src/app/pages/index/index.component.ts

@@ -1,4 +1,12 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectorRef,
+  Inject,
+  InjectionToken,
+} from '@angular/core';
+import { LocationStrategy } from '@angular/common';
 import { MWABackendService } from 'src/app/services/backend.service';
 import { MWANamespaceService } from 'src/app/services/mwa-namespace.service';
 import { SSEService } from 'src/app/services/sse.service';
@@ -30,6 +38,11 @@ import {
   getPredictorExtensionSpec,
 } from 'src/app/shared/utils';
 
+export const BROWSER_WINDOW = new InjectionToken<Window>('Browser Window', {
+  providedIn: 'root',
+  factory: () => window,
+});
+
 @Component({
   selector: 'app-index',
   templateUrl: './index.component.html',
@@ -47,6 +60,7 @@ export class IndexComponent implements OnInit, OnDestroy {
   inferenceServices: InferenceServiceIR[] = [];
 
   dashboardDisconnectedState = DashboardState.Disconnected;
+  private dashboardState = DashboardState.Disconnected;
 
   private newEndpointButton = new ToolbarButton({
     text: $localize`New Endpoint`,
@@ -79,11 +93,14 @@ export class IndexComponent implements OnInit, OnDestroy {
     public mwaNamespace: MWANamespaceService,
     public poller: PollerService,
     private cdr: ChangeDetectorRef,
+    private locationStrategy: LocationStrategy,
+    @Inject(BROWSER_WINDOW) private browserWindow: Window,
   ) {}
 
   ngOnInit(): void {
     this.dashboardSubscription = this.ns.dashboardConnected$.subscribe(
       dashboardState => {
+        this.dashboardState = dashboardState;
         this.namespaceSubscription.unsubscribe();
 
         if (dashboardState === DashboardState.Disconnected) {
@@ -231,7 +248,7 @@ export class IndexComponent implements OnInit, OnDestroy {
         break;
       case 'name:link':
         /*
-         * don't allow the user to navigate to the details page of a server
+         * do not allow the user to navigate to the details page of a server
          * that is being deleted
          */
         if (inferenceService.ui?.status?.phase === STATUS_TYPE.TERMINATING) {
@@ -246,10 +263,87 @@ export class IndexComponent implements OnInit, OnDestroy {
           this.snack.open(snackConfiguration);
           return;
         }
+        if (this.isBrowserManagedLinkClick(a.event)) {
+          return;
+        }
+
+        a.event?.stopPropagation();
+        a.event?.preventDefault();
+        this.navigateToDetails(inferenceService);
         break;
     }
   }
 
+  private navigateToDetails(inferenceService: InferenceServiceIR) {
+    const namespace = inferenceService.metadata?.namespace || '';
+    const name = inferenceService.metadata?.name || '';
+    const detailsRoute = ['/details', namespace, name];
+
+    if (this.dashboardState !== DashboardState.Connected) {
+      this.router.navigate(detailsRoute);
+      return;
+    }
+
+    const detailsUrl = this.router.serializeUrl(
+      this.router.createUrlTree(detailsRoute),
+    );
+    const applicationDetailsUrl =
+      this.locationStrategy.prepareExternalUrl(detailsUrl);
+
+    if (
+      this.navigateParentDashboardToDetails(applicationDetailsUrl, namespace)
+    ) {
+      return;
+    }
+
+    this.browserWindow.location.assign(applicationDetailsUrl);
+  }
+
+  private navigateParentDashboardToDetails(
+    applicationDetailsUrl: string,
+    namespace: string,
+  ): boolean {
+    const parentWindow = this.browserWindow.parent;
+
+    if (!parentWindow || parentWindow === this.browserWindow) {
+      return false;
+    }
+
+    try {
+      const parentUrl = new URL(parentWindow.location.href);
+      if (!parentUrl.pathname.startsWith('/_/')) {
+        return false;
+      }
+
+      parentUrl.pathname = `/_${applicationDetailsUrl}`;
+      if (namespace) {
+        parentUrl.searchParams.set('ns', namespace);
+      }
+
+      parentWindow.location.assign(
+        `${parentUrl.pathname}${parentUrl.search}${parentUrl.hash}`,
+      );
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  private isBrowserManagedLinkClick(event?: Event): boolean {
+    if (!event) {
+      return false;
+    }
+
+    const mouseEvent = event as MouseEvent;
+    return (
+      mouseEvent.ctrlKey ||
+      mouseEvent.metaKey ||
+      mouseEvent.shiftKey ||
+      mouseEvent.altKey ||
+      (typeof mouseEvent.button === 'number' && mouseEvent.button !== 0)
+    );
+  }
+
   private deleteClicked(inferenceService: InferenceServiceIR) {
     const dialogConfiguration = generateDeleteConfig(inferenceService);