Refactor mcp.

Author: kovaren

gravitee-apim-portal-webui-next/src/app/documentation/components/documentation-folder/documentation-folder.component.html

@@ -26,7 +26,7 @@
         }
       </button>
       @if (subscribeApiHasMcp()) {
-        <button mat-stroked-button type="button" (click)="onMcp()" data-testid="mcp-button">
+        <button mat-stroked-button type="button" (click)="this.mcpDrawerOpen.set(true)" data-testid="mcp-button">
           <span i18n="@@documentationMcpButton">MCP</span>
         </button>
       }
@@ -55,7 +55,7 @@
     role="presentation"
     tabindex="-1"
     @documentationFolderMcpBackdrop
-    (click)="closeMcpDrawer()"
+    (click)="this.mcpDrawerOpen.set(false)"
   ></div>
   <div
     class="documentation-folder__mcp-panel"
@@ -68,11 +68,7 @@
   >
     <div class="documentation-folder__mcp-panel__inner">
       <div class="documentation-folder__mcp-panel__body">
-        @if (mcpDrawerLoadError()) {
-          <div class="m3-body-medium" i18n="@@documentationMcpDrawerLoadError">Could not load MCP tools. Try again.</div>
-        } @else if (mcpDrawerLoading()) {
-          <div class="m3-body-medium" i18n="@@documentationMcpDrawerLoading">Loading…</div>
-        } @else if (mcpDrawerApi(); as apiForTools) {
+        @if (api.value(); as apiForTools) {
           <app-api-tab-tools [api]="apiForTools" />
         }
       </div>

gravitee-apim-portal-webui-next/src/app/documentation/components/documentation-folder/documentation-folder.component.ts

@@ -15,8 +15,8 @@
  */
 import { animate, style, transition, trigger } from '@angular/animations';
 import { AsyncPipe } from '@angular/common';
-import { Component, effect, inject, input, signal, untracked } from '@angular/core';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { Component, computed, effect, inject, input, signal, untracked } from '@angular/core';
+import { rxResource, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -89,6 +89,9 @@ const MCP_OVERLAY_DURATION_MS = 400;
   ],
 })
 export class DocumentationFolderComponent {
+  private readonly apiService = inject(ApiService);
+  readonly currentUser = inject(CurrentUserService).isUserAuthenticated;
+
   navItem = input.required<PortalNavigationItem>();
   navId$ = toObservable(this.navItem).pipe(map(({ id }) => id));
   selectedId$ = this.activatedRoute.queryParams.pipe(map(({ selectedId }) => selectedId));
@@ -97,51 +100,20 @@ export class DocumentationFolderComponent {
   tree = signal<TreeNode[]>([]);
   breadcrumbs = signal<Breadcrumb[]>([]);
   subscribeApiId = signal<string | null>(null);
-  readonly currentUser = inject(CurrentUserService).isUserAuthenticated;
-  private readonly apiService = inject(ApiService);
-
-  subscribeApiHasMcp = toSignal(
-    toObservable(this.subscribeApiId).pipe(
-      switchMap((id: string | null) =>
-        id
-          ? this.apiService.details(id).pipe(
-              map((api: Api) => !!api.mcp),
-              catchError(() => of(false)),
-            )
-          : of(false),
-      ),
-    ),
-    { initialValue: false },
-  );
 
+  api = rxResource({
+    params: this.subscribeApiId,
+    stream: ({ params }) => params ? this.apiService.details(params).pipe(map(api => api)) : of(undefined),
+  });
+  subscribeApiHasMcp = computed(() => !!this.api.value()?.mcp);
   mcpDrawerOpen = signal(false);
-  mcpDrawerApi = signal<Api | undefined>(undefined);
-  mcpDrawerLoading = signal(false);
-  mcpDrawerLoadError = signal(false);
-
-  private lastSubscribeApiIdWhenMcpContext: string | null = null;
 
   constructor(
     private readonly router: Router,
     private readonly activatedRoute: ActivatedRoute,
     private readonly itemsService: PortalNavigationItemsService,
     private readonly treeService: TreeService,
   ) {
-    effect(() => {
-      const id = this.subscribeApiId();
-      if (
-        this.mcpDrawerOpen() &&
-        this.lastSubscribeApiIdWhenMcpContext !== null &&
-        id !== this.lastSubscribeApiIdWhenMcpContext
-      ) {
-        untracked(() => {
-          this.mcpDrawerOpen.set(false);
-          this.mcpDrawerApi.set(undefined);
-          this.mcpDrawerLoadError.set(false);
-        });
-      }
-      this.lastSubscribeApiIdWhenMcpContext = id;
-    });
   }
 
   onSelect(selectedPageId: string) {
@@ -158,34 +130,6 @@ export class DocumentationFolderComponent {
     }
   }
 
-  onMcp() {
-    const apiId = this.subscribeApiId();
-    if (!apiId) {
-      return;
-    }
-    this.mcpDrawerOpen.set(true);
-    if (this.mcpDrawerApi()?.id === apiId) {
-      return;
-    }
-    this.mcpDrawerLoading.set(true);
-    this.mcpDrawerLoadError.set(false);
-    this.apiService
-      .details(apiId)
-      .pipe(
-        take(1),
-        finalize(() => this.mcpDrawerLoading.set(false)),
-      )
-      .subscribe({
-        next: (api: Api) => this.mcpDrawerApi.set(api),
-        error: () => this.mcpDrawerLoadError.set(true),
-      });
-  }
-
-  closeMcpDrawer() {
-    this.mcpDrawerOpen.set(false);
-    this.mcpDrawerLoadError.set(false);
-  }
-
   private loadFolderData(): Observable<FolderData | undefined> {
     return merge(this.navId$.pipe(map(() => NavParamsChange.NAV_ID)), this.selectedId$.pipe(map(() => NavParamsChange.PAGE_ID))).pipe(
       debounceTime(0), // merge simultaneous change of navId and selectedId