Merged in task/ux-plus-2023_02_x/UXP-161 (pull request #13)

[UXP-161] add ds-alert for missing google maps api key

Approved-by: Francesco Molinaro

Author: Andrea Barbasso

src/app/shared/googlemaps/googlemaps.component.html

@@ -1,2 +1,3 @@
 <ds-alert *ngIf="!coordinates" [content]=" 'map.coordinates-invalid' | translate "></ds-alert>
-<div *ngIf="coordinates" #gmap class="map-container"></div>
+<ds-alert *ngIf="noKeyConfigured" [content]=" 'map.no-key-configured' | translate "></ds-alert>
+<div *ngIf="coordinates && !noKeyConfigured" #gmap class="map-container"></div>

src/app/shared/googlemaps/googlemaps.component.spec.ts

@@ -42,16 +42,25 @@ describe('GooglemapsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should rendered google map.',() => {
+  it('should render google map.',() => {
     const container = fixture.debugElement.query(By.css('.map-container'));
     expect(container).toBeTruthy();
   });
 
-  it('should not rendered google map.',() => {
+  it('should not render google map if coordinates are not valid.',() => {
     fixture = TestBed.createComponent(GooglemapsComponent);
     component = fixture.componentInstance;
     component.coordinates = '';
     const container = fixture.debugElement.query(By.css('.map-container'));
     expect(container).toBeFalsy();
   });
+
+  it('should not render google map if the google maps api key is not present.',() => {
+    fixture = TestBed.createComponent(GooglemapsComponent);
+    component = fixture.componentInstance;
+    component.coordinates = coordinates;
+    component.noKeyConfigured = true;
+    const container = fixture.debugElement.query(By.css('.map-container'));
+    expect(container).toBeFalsy();
+  });
 });

src/app/shared/googlemaps/googlemaps.component.ts

@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, Inject, Input, OnInit, Renderer2, ViewChild, } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit, Renderer2, ViewChild, } from '@angular/core';
 
 import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
@@ -38,10 +38,16 @@ export class GooglemapsComponent implements OnInit {
    */
   longitude: string;
 
+  /**
+   * A flag that indicates if the google maps api key is not configured
+   */
+  noKeyConfigured = false;
+
   constructor(
     @Inject(DOCUMENT) private _document: Document,
     private renderer: Renderer2,
     private configService: ConfigurationDataService,
+    private cdr: ChangeDetectorRef,
   ) {
   }
 
@@ -57,6 +63,9 @@ export class GooglemapsComponent implements OnInit {
           this.loadScript(this.buildMapUrl(res?.payload?.values[0])).then(() => {
             this.loadMap();
           });
+        } else if (res.hasSucceeded && !res?.payload?.values[0]) {
+          this.noKeyConfigured = true;
+          this.cdr.detectChanges();
         }
       });
     }

src/assets/i18n/en.json5

@@ -7556,6 +7556,8 @@
 
   "map.coordinates-invalid": "Coordinates are not valid",
 
+  "map.no-key-configured": "No Google Maps key found in the configuration",
+
   "statistics-page.export-map-as-image": "Export map",
 
   "curation-task.task.hocr.label": "Extract text (HOCR) from images",