Merge pull request #1936 from CentreForDigitalHumanities/feature/namechange-alert

Feature/namechange alert

Author: JeltevanBoheemen

frontend/src/app/app.component.html

@@ -1,5 +1,6 @@
 <ia-notifications></ia-notifications>
 <ia-menu role="banner" *ngIf="!iframe"></ia-menu>
+<ia-alert></ia-alert>
 <main id="main" tabindex="-1">
     <router-outlet></router-outlet>
     <ia-dialog></ia-dialog>

frontend/src/app/app.component.ts

@@ -7,14 +7,16 @@ import { environment } from '@environments/environment';
     selector: 'ia-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
-    standalone: false
+    standalone: false,
 })
 export class AppComponent {
     public iframe: boolean;
 
-    constructor(private authService: AuthService) {
+    constructor(
+        private authService: AuthService,
+    ) {
         this.authService.setInitialAuth();
         this.iframe = environment.runInIFrame;
     }
-}
 
+}

frontend/src/app/core/alert/alert.component.html

@@ -0,0 +1,11 @@
+<div *ngIf="visible$|async" class="notification is-warning is-light">
+@let alertConfig = alertMessage$ | async;
+  <button class="delete" (click)="hideAlert()" aria-label="close"></button>
+  @if (alertConfig.renderHtml) {
+    <div [innerHtml]="alertConfig.message"></div>
+  }
+  @else {
+    <div>{{alertConfig.message}}</div>
+  }
+
+</div>

frontend/src/app/core/alert/alert.component.scss

@@ -0,0 +1,13 @@
+.notification {
+    --padding-size: .75rem;
+
+    padding: var(--padding-size) var(--padding-size);
+    border-radius: 0;
+    font-size: small;
+
+    button {
+        top: var(--padding-size)
+    }
+}
+
+

frontend/src/app/core/alert/alert.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertComponent } from './alert.component';
+
+describe('AlertComponent', () => {
+  let component: AlertComponent;
+  let fixture: ComponentFixture<AlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AlertComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/core/alert/alert.component.ts

@@ -0,0 +1,41 @@
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AlertConfig, AlertService } from '@services/alert.service';
+import _ from 'lodash';
+import { BehaviorSubject, filter } from 'rxjs';
+
+@Component({
+    selector: 'ia-alert',
+    standalone: false,
+    templateUrl: './alert.component.html',
+    styleUrl: './alert.component.scss',
+})
+export class AlertComponent {
+    visible$ = new BehaviorSubject<boolean>(false);
+    alertMessage$ = new BehaviorSubject<AlertConfig>(undefined);
+
+    constructor(
+        private alertService: AlertService,
+        private destroyRef: DestroyRef
+    ) {
+        this.alertService.alert$
+            .pipe(
+                takeUntilDestroyed(this.destroyRef),
+                filter(_.negate(_.isUndefined))
+            )
+            .subscribe({
+                next: (config: AlertConfig) => this.showAlert(config),
+            });
+    }
+
+    showAlert(message: AlertConfig): void {
+        this.alertMessage$.next(message);
+        this.visible$.next(true);
+    }
+
+    hideAlert(): void {
+        this.alertMessage$.value.onDismiss?.();
+        this.visible$.next(false);
+        this.alertMessage$.next(undefined);
+    }
+}

frontend/src/app/core/core.module.ts

@@ -7,6 +7,7 @@ import { MenuDropdownComponent } from './menu/menu-dropdown/menu-dropdown.compon
 import { FooterComponent } from './footer/footer.component';
 import { DialogComponent } from './dialog/dialog.component';
 import { CorpusSelectionModule } from '../corpus-selection/corpus-selection.module';
+import { AlertComponent } from './alert/alert.component';
 
 
 /** toplevel components such as the home page and navbar */
@@ -18,16 +19,15 @@ import { CorpusSelectionModule } from '../corpus-selection/corpus-selection.modu
         MenuComponent,
         MenuDropdownComponent,
         NotificationsComponent,
+        AlertComponent,
     ],
-    imports: [
-        SharedModule,
-        CorpusSelectionModule,
-    ],
+    imports: [SharedModule, CorpusSelectionModule],
     exports: [
+        AlertComponent,
         DialogComponent,
         FooterComponent,
         MenuComponent,
         NotificationsComponent,
-    ]
+    ],
 })
-export class CoreModule { }
+export class CoreModule {}

frontend/src/app/services/alert.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AlertService } from './alert.service';
+
+describe('AlertService', () => {
+  let service: AlertService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AlertService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/services/alert.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { environment } from '@environments/environment';
+import { ReplaySubject } from 'rxjs';
+
+export interface AlertConfig {
+    message: string;
+    onDismiss?: () => any;
+    renderHtml?: boolean;
+}
+
+const nameChangeAlert = {
+    message:
+        '"I-Analyzer" has been renamed, and is now called "Textcavator". Read more about this change in <a href="https://github.com/CentreForDigitalHumanities/Textcavator/discussions/1958" target="_blank">this announcement on GitHub.</a>',
+    onDismiss: () => localStorage.setItem('closedNameChangeAlert', 'true'),
+    renderHtml: true,
+};
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AlertService {
+    alert$ = new ReplaySubject<AlertConfig>(1);
+
+    constructor() {
+        this.showNamechangeAlert();
+    }
+
+    private showNamechangeAlert(): void {
+        if (
+            environment.showNamechangeAlert &&
+            !localStorage.getItem('closedNameChangeAlert')
+        ) {
+            this.alert$.next(nameChangeAlert);
+        }
+    }
+}

frontend/src/environments/environment.ts

@@ -15,8 +15,7 @@ export const environment = {
         logo: '/assets/logo.svg',
         logoAlt: undefined,
     },
-    appDescription:
-        `<p>
+    appDescription: `<p>
             Textcavator is a tool for exploring corpora (large collections of texts).
             You can use Textcavator to find relevant documents or visualise broader trends
             in the corpus.
@@ -45,4 +44,5 @@ export const environment = {
     sourceUrl: 'https://github.com/CentreForDigitalHumanities/Textcavator/',
     logos: undefined,
     showCorpusFilters: true,
+    showNamechangeAlert: true,
 };