feat(portal-next): subscription empty state

Author: jansobczynski

gravitee-apim-portal-webui-next/src/app/api-details/api-details.component.html

@@ -55,6 +55,17 @@
         i18n="@@apiDocumentation"
         >Documentation</a
       >
+      @if (isAuthenticated()) {
+        <a
+          mat-tab-link
+          [routerLink]="['.', 'subscriptions']"
+          routerLinkActive
+          #subscriptionsActive="routerLinkActive"
+          [active]="subscriptionsActive.isActive"
+          i18n="@@apiSubscriptions"
+          >My Subscriptions</a
+        >
+      }
     </nav>
     <mat-tab-nav-panel #tabPanel>
       <div class="api-details__content">

gravitee-apim-portal-webui-next/src/app/api-details/api-details.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { AsyncPipe } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatCard, MatCardActions, MatCardContent } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -27,6 +27,7 @@ import { ApiPictureComponent } from '../../components/api-picture/api-picture.co
 import { BannerComponent } from '../../components/banner/banner.component';
 import { BreadcrumbNavigationComponent } from '../../components/breadcrumb-navigation/breadcrumb-navigation.component';
 import { Api } from '../../entities/api/api';
+import { CurrentUserService } from '../../services/current-user.service';
 
 @Component({
   selector: 'app-api-details',
@@ -50,6 +51,7 @@ import { Api } from '../../entities/api/api';
 })
 export class ApiDetailsComponent implements OnInit {
   @Input() api!: Api;
+  isAuthenticated = inject(CurrentUserService).isUserAuthenticated;
 
   constructor(private breadcrumbService: BreadcrumbService) {}
 

gravitee-apim-portal-webui-next/src/app/api-details/api-tab-subscriptions/api-tab-subscriptions.component.html

@@ -0,0 +1,27 @@
+<!--
+
+    Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+@if (subscriptionsList$ | async; as subscriptions) {
+  @if (subscriptions.length === 0) {
+    <div class="api-tab-subscription__empty" id="no-subscriptions">
+      <header i18n="@@noSubscriptionAvailable" class="api-tab-subscription__empty-header">No subscription found</header>
+      <p i18n="@@subscribeToApi">Subscribe to our API and your subscription will show up here.</p>
+    </div>
+  } @else {
+    <p>Coming soon</p>
+  }
+}

gravitee-apim-portal-webui-next/src/app/api-details/api-tab-subscriptions/api-tab-subscriptions.component.scss

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.api-tab-subscription__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0;
+}

gravitee-apim-portal-webui-next/src/app/api-details/api-tab-subscriptions/api-tab-subscriptions.component.spec.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { HttpTestingController } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApiTabSubscriptionsComponent } from './api-tab-subscriptions.component';
+import { Subscription } from '../../../entities/subscription/subscription';
+import { fakeSubscriptionResponse } from '../../../entities/subscription/subscription.fixture';
+import { AppTestingModule, TESTING_BASE_URL } from '../../../testing/app-testing.module';
+
+describe('ApiTabSubscriptionsComponent', () => {
+  let fixture: ComponentFixture<ApiTabSubscriptionsComponent>;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ApiTabSubscriptionsComponent, AppTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ApiTabSubscriptionsComponent);
+    httpTestingController = TestBed.inject(HttpTestingController);
+    fixture.componentInstance.apiId = 'testId';
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    httpTestingController.verify();
+  });
+
+  describe('empty component', () => {
+    it('should show empty Subscription list', async () => {
+      expectSubscriptionList(fakeSubscriptionResponse({ data: [] }), 'testId');
+      expect(fixture.nativeElement.querySelector('#no-subscriptions')).toBeDefined();
+    });
+  });
+
+  function expectSubscriptionList(subscriptionResponse: Subscription = fakeSubscriptionResponse(), apiId: string) {
+    httpTestingController.expectOne(`${TESTING_BASE_URL}/subscriptions?apiId=${apiId}`).flush(subscriptionResponse);
+  }
+});

gravitee-apim-portal-webui-next/src/app/api-details/api-tab-subscriptions/api-tab-subscriptions.component.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { catchError, map, Observable } from 'rxjs';
+import { of } from 'rxjs/internal/observable/of';
+
+import { SubscriptionData } from '../../../entities/subscription/subscription';
+import { SubscriptionService } from '../../../services/subscription.service';
+
+@Component({
+  selector: 'app-api-tab-subscriptions',
+  standalone: true,
+  imports: [AsyncPipe],
+  templateUrl: './api-tab-subscriptions.component.html',
+  styleUrl: './api-tab-subscriptions.component.scss',
+})
+export class ApiTabSubscriptionsComponent implements OnInit {
+  @Input()
+  apiId!: string;
+
+  subscriptionsList$!: Observable<SubscriptionData[]>;
+  private subscriptionService = inject(SubscriptionService);
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.subscriptionsList$ = this.loadSubscriptions$();
+  }
+
+  private loadSubscriptions$(): Observable<SubscriptionData[]> {
+    return this.subscriptionService.list(this.apiId).pipe(
+      map(response => {
+        return response.data ?? [];
+      }),
+      catchError(_ => of([])),
+    );
+  }
+}

gravitee-apim-portal-webui-next/src/app/app.routes.ts

@@ -18,6 +18,7 @@ import { Routes } from '@angular/router';
 import { ApiDetailsComponent } from './api-details/api-details.component';
 import { ApiTabDetailsComponent } from './api-details/api-tab-details/api-tab-details.component';
 import { ApiTabDocumentationComponent } from './api-details/api-tab-documentation/api-tab-documentation.component';
+import { ApiTabSubscriptionsComponent } from './api-details/api-tab-subscriptions/api-tab-subscriptions.component';
 import { CatalogComponent } from './catalog/catalog.component';
 import { LogInComponent } from './log-in/log-in.component';
 import { LogOutComponent } from './log-out/log-out.component';
@@ -54,6 +55,12 @@ export const routes: Routes = [
             component: ApiTabDocumentationComponent,
             data: { breadcrumb: 'Documentation' },
           },
+          {
+            path: 'subscriptions',
+            component: ApiTabSubscriptionsComponent,
+            data: { breadcrumb: 'Subscriptions' },
+            canActivate: [authGuard],
+          },
         ],
       },
     ],

gravitee-apim-portal-webui-next/src/entities/subscription/subscription.fixture.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { isFunction } from 'rxjs/internal/util/isFunction';
+
+import { Subscription, SubscriptionData } from './subscription';
+
+export function fakeSubscription(
+  modifier?: Partial<SubscriptionData> | ((baseSubscription: SubscriptionData) => SubscriptionData),
+): SubscriptionData {
+  const base: SubscriptionData = {
+    id: '5ac5ca94-160f-4acd-85ca-94160fcacd7d',
+    application: '99c6cbe6-eead-414d-86cb-e6eeadc14db3',
+    plan: 'b6f88a31-777f-45aa-b88a-31777fa5aace',
+    request: '',
+    reason: 'Subscription has been closed.',
+    created_at: '2024-04-17T10:33:29Z',
+    closed_at: '2024-04-17T10:34:05.598Z',
+    subscribed_by: '4015f9f2-c0a4-4c0c-95f9-f2c0a4fc0c4c',
+    status: 'REJECTED',
+  };
+
+  if (isFunction(modifier)) {
+    return modifier(base);
+  }
+
+  return {
+    ...base,
+    ...modifier,
+  };
+}
+
+export function fakeSubscriptionResponse(
+  modifier?: Partial<Subscription> | ((baseSubscription: Subscription) => Subscription),
+): Subscription {
+  const base: Subscription = {
+    data: [fakeSubscription()],
+    links: {
+      self: 'test',
+    },
+  };
+
+  if (isFunction(modifier)) {
+    return modifier(base);
+  }
+
+  return {
+    ...base,
+    ...modifier,
+  };
+}

gravitee-apim-portal-webui-next/src/entities/subscription/subscription.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface Subscription {
+  data: SubscriptionData[];
+  links: SubscriptionLinks;
+}
+
+export interface SubscriptionData {
+  id?: string;
+  api?: string;
+  application?: string;
+  closed_at?: string;
+  created_at?: string;
+  plan?: string;
+  reason?: string;
+  request?: string;
+  status?: string;
+  subscribed_by?: string;
+}
+
+export interface SubscriptionLinks {
+  self?: string;
+}

gravitee-apim-portal-webui-next/src/services/current-user.service.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable, signal, WritableSignal } from '@angular/core';
+import { effect, Injectable, signal, WritableSignal } from '@angular/core';
 import { isEmpty } from 'lodash';
 import { catchError, Observable, tap } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
@@ -27,11 +27,21 @@ import { User } from '../entities/user/user';
 })
 export class CurrentUserService {
   public user: WritableSignal<User> = signal({});
+  public isUserAuthenticated: WritableSignal<boolean> = signal(false);
 
   constructor(
     private http: HttpClient,
     private configuration: ConfigService,
-  ) {}
+  ) {
+    effect(
+      () => {
+        this.isUserAuthenticated.set(!isEmpty(this.user()));
+      },
+      {
+        allowSignalWrites: true,
+      },
+    );
+  }
 
   public isAuthenticated(): boolean {
     return !isEmpty(this.user());