Merge pull request #1210 from aneoconsulting/chore/external-services-…

…ux-improvements

chore: external services ux improvements

src/app/components/icon-picker-dialog.component.html

@@ -1,12 +1,10 @@
-@if(icon) {
-  <button mat-icon-button (click)="$event.preventDefault();" [matMenuTriggerFor]="menu">
+<button mat-icon-button (click)="$event.preventDefault();" [matMenuTriggerFor]="menu" i18n-matTooltip matTooltip="Change the Icon">
+  @if(icon) {
     <mat-icon [fontIcon]="getIcon(icon)" />
-  </button>
-} @else {
-  <button mat-button (click)="$event.preventDefault();" [matMenuTriggerFor]="menu">
-    <span i18n="Button to open the icon picker">Icon</span>
-  </button>
-}
+  } @else {
+    <mat-icon [fontIcon]="getIcon('icon')" />
+  }
+</button>
 <mat-menu #menu="matMenu" yPosition="below">
   <mat-form-field style="width: 100%;" subscriptSizing="dynamic" (click)="$event.stopPropagation();" (keydown.enter)="selectFirst()">
     <mat-label i18n="Input label">Icon</mat-label>

src/app/components/icon-picker-dialog.component.ts

@@ -35,7 +35,7 @@ article {
 export class IconPickerDialogComponent {
   readonly iconsService = inject(IconsService);
 
-  @Input({ required: true }) icon: string = '';
+  @Input({ required: true }) icon: string | null | undefined = '';
   @Output() iconChange = new EventEmitter<string>();
 
   icons: string[] = this.iconsService.getAllIcons();

src/app/components/navigation/external-services/external-services.component.html

@@ -0,0 +1,23 @@
+<button mat-button class="external-services" [matMenuTriggerFor]="external_services" matTooltip="Access to external services">
+  <mat-icon matListItemIcon aria-hidden="true" [fontIcon]="getIcon('arrow-down')"/>
+  <span i18n="Button to view external services">
+    External Services
+  </span>
+</button>
+<mat-menu #external_services="matMenu">
+  @for (service of externalServices; track service.url) {
+    <a mat-menu-item [href]="service.url" target="_blank" rel="noopener noreferrer">
+      @if (service.icon) {
+        <mat-icon matListItemIcon aria-hidden="true" [fontIcon]="getIcon(service.icon)"/>
+      }
+      <span>{{ service.name }}</span>
+    </a>
+  }
+  @if (externalServices.length) {
+    <mat-divider/>
+  }
+  <button mat-menu-item (click)="manageExternalServices()">
+    <mat-icon matListItemIcon aria-hidden="true" [fontIcon]="getIcon('tune')"/>
+    <span i18n="Button">Manage services</span>
+  </button>
+</mat-menu>

src/app/components/navigation/external-services.component.spec.ts → src/app/components/navigation/external-services/external-services.component.spec.ts

@@ -1,4 +1,3 @@
-import { URL } from 'url';
 import { TestBed } from '@angular/core/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { of } from 'rxjs';
@@ -51,15 +50,6 @@ describe('ExternalServicesComponent', () => {
     it('should retrieve saved services', () => {
       expect(component.externalServices).toEqual(savedServices);
     });
-
-    it('should check if it has a service', () => {
-      expect(component.hasService).toBeTruthy();
-    });
-  });
-
-  it('should check if there is no service', () => {
-    component.externalServices = [];
-    expect(component.hasService).toBeFalsy();
   });
 
   it('should get icon', () => {
@@ -78,26 +68,13 @@ describe('ExternalServicesComponent', () => {
       expect(component.externalServices).toEqual(newServices);
     });
 
-    it('should update "hasServices"', () => {
-      expect(component.hasService).toBeTruthy();
-    });
-
     it('should save services', () => {
       expect(mockNavigationService.saveExternalServices).toHaveBeenCalled();
     });
   });
 
   test('saveServices should save local services', () => {
     component.saveServices();
-    expect(mockNavigationService.saveExternalServices).toHaveBeenCalled();
-  });
-
-  it('should allow to navigate to an url', () => {
-    const windowSpy = jest.spyOn(window, 'open');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    windowSpy.mockImplementationOnce((url?: string | URL | null, target?: string | null, features?: string | undefined) => null);
-    const url = 'https://url';
-    component.navigate(url);
-    expect(windowSpy).toHaveBeenCalledWith(url, '_blank');
+    expect(mockNavigationService.saveExternalServices).toHaveBeenCalledWith(component.externalServices);
   });
 });

src/app/components/navigation/external-services.component.ts → src/app/components/navigation/external-services/external-services.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, inject } from '@angular/core';
-import { MatButtonModule, MatIconButton } from '@angular/material/button';
+import { ChangeDetectionStrategy, Component, OnInit, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ExternalService } from '@app/types/external-service';
 import { IconsService } from '@services/icons.service';
@@ -14,44 +15,34 @@ import { ManageExternalServicesDialogComponent } from './manage-external-service
   templateUrl: 'external-services.component.html',
   imports: [
     MatIconModule,
-    MatIconButton,
-    MatTooltipModule,
     MatButtonModule,
     MatDividerModule,
+    MatMenuModule,
+    MatTooltipModule,
   ],
   providers: [
     IconsService,
     NavigationService
   ],
   standalone: true,
-  styles: [`
-  article {
-    display: flex;
-  }
-
-  mat-divider {
-    margin-left: 0.75rem;
-    margin-right: 0.75rem;
-  }
-  `]
+  styleUrl: 'external-services.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ExternalServicesComponent implements OnInit {
   readonly navigationService = inject(NavigationService);
   readonly iconsService = inject(IconsService);
   readonly dialog = inject(MatDialog);
 
-  hasService: boolean = false;
-  private _externalServices: ExternalService[] = [];
+  private _externalServices = signal<ExternalService[]>([]);
 
   set externalServices(entries: ExternalService[] | undefined) {
     if (entries) {
-      this._externalServices = entries;
-      this.hasService = entries.length > 0;
+      this._externalServices.set(entries);
     }
   }
 
   get externalServices(): ExternalService[] {
-    return this._externalServices;
+    return this._externalServices();
   }
 
   ngOnInit(): void {
@@ -80,8 +71,4 @@ export class ExternalServicesComponent implements OnInit {
   saveServices() {
     this.navigationService.saveExternalServices(this.externalServices);
   }
-
-  navigate(url: string) {
-    window.open(url, '_blank');
-  }
 }