Fixes AB#552: Dropdown button title

Adds localization to dropdowns and bookmarks menu

Author: gingi

src/@batch-flask/ui/activity/activity-monitor-footer/activity-monitor-footer.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed, fakeAsync, inject, tick } from "@angular/cor
 import { By } from "@angular/platform-browser";
 import { Router } from "@angular/router";
 import { MaterialModule } from "@batch-flask/core";
+import { I18nTestingModule } from "@batch-flask/core/testing";
 import {
     Activity,
     ActivityModule,
@@ -22,7 +23,7 @@ describe("ActivityMonitorFooterComponent", () => {
         };
 
         TestBed.configureTestingModule({
-            imports: [MaterialModule, ActivityModule],
+            imports: [MaterialModule, ActivityModule, I18nTestingModule],
             declarations: [
             ],
             providers: [

src/@batch-flask/ui/dropdown/dropdown.component.spec.ts

@@ -0,0 +1,48 @@
+import { Component, Type } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { I18nTestingModule } from "@batch-flask/core/testing";
+import { ButtonsModule } from "../buttons";
+import { DropdownComponent } from "./dropdown.component";
+
+describe("DropdownComponent", () => {
+    let fixture: ComponentFixture<Component>;
+
+    function createComponent(comp: Type<Component>) {
+        TestBed.configureTestingModule({
+            imports: [FormsModule, ButtonsModule, I18nTestingModule],
+            declarations: [DropdownComponent, comp],
+        });
+        fixture = TestBed.createComponent(comp);
+        fixture.detectChanges();
+    }
+
+    function $(selector) {
+        return fixture.debugElement.query(By.css("bl-dropdown"))
+            .nativeElement.querySelector(selector);
+    }
+
+    it("uses a default title", () => {
+        createComponent(TestComponent);
+
+        expect($(".dropdown-btn-container").getAttribute("title"))
+            .toEqual("dropdown.button-title");
+    });
+    it("uses a host button title", () => {
+        createComponent(TestComponentWithButton);
+
+        expect($(".dropdown-btn-container").getAttribute("title"))
+            .toEqual("Host title");
+    });
+});
+
+@Component({ template: `<bl-dropdown [title]="title"></bl-dropdown>` })
+class TestComponent { }
+
+@Component({
+    template: `<bl-dropdown [title]="title">
+        <div bl-dropdown-btn button-title="Host title">Button</div>
+    </bl-dropdown>`
+})
+class TestComponentWithButton { }

src/@batch-flask/ui/dropdown/dropdown.component.ts

@@ -1,6 +1,7 @@
 import {
-    ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output,
+    ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output,
 } from "@angular/core";
+import { I18nService } from "@batch-flask/core";
 
 import "./dropdown.scss";
 
@@ -18,7 +19,11 @@ export class DropdownComponent {
     public forcedOpen = false;
     public showDropdown = false;
 
-    constructor(private changeDetector: ChangeDetectorRef) { }
+    constructor(
+        private changeDetector: ChangeDetectorRef,
+        private elementRef: ElementRef,
+        private i18n: I18nService,
+    ) { }
 
     public mouseEnter() {
         this.showDropdown = true;
@@ -51,6 +56,12 @@ export class DropdownComponent {
         }
     }
 
+    public dropdownButtonTitle() {
+        const hostTitle = this.elementRef.nativeElement
+            .querySelector("[bl-dropdown-btn")?.getAttribute("button-title");
+        return hostTitle || this.i18n.t("dropdown.button-title");
+    }
+
     public close() {
         this.showDropdown = false;
         this.changeDetector.markForCheck();

src/@batch-flask/ui/dropdown/dropdown.html

@@ -1,5 +1,11 @@
 <div class="dropdown" (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-    <bl-clickable class="dropdown-btn-container" [class.active]="showDropdown" (do)="toggleForceOpen($event)" (dblclick)="dblClick.emit($event)">
+    <bl-clickable
+        class="dropdown-btn-container"
+        [class.active]="showDropdown"
+        (do)="toggleForceOpen($event)"
+        (dblclick)="dblClick.emit($event)"
+        [title]="dropdownButtonTitle()"
+    >
         <ng-content select="[bl-dropdown-btn]"></ng-content>
     </bl-clickable>
     <div class="dropdown-content" *ngIf="showDropdown" [class.above]="footer" [class.below]="!footer" [attr.align]="align">

src/@batch-flask/ui/dropdown/dropdown.i18n.yml

@@ -0,0 +1,2 @@
+dropdown:
+  button-title: Dropdown button

src/@batch-flask/ui/dropdown/dropdown.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { MaterialModule } from "@batch-flask/core";
 import { ButtonsModule } from "@batch-flask/ui/buttons";
+import { I18nUIModule } from "@batch-flask/ui/i18n";
 import { ScrollableModule } from "../scrollable";
 import { DropdownComponent } from "./dropdown.component";
 
@@ -19,6 +20,7 @@ import { DropdownComponent } from "./dropdown.component";
         MaterialModule,
         ScrollableModule,
         ButtonsModule,
+        I18nUIModule
     ],
 })
 export class DropdownModule {

src/@batch-flask/ui/sidebar/sidebar-bookmarks/sidebar-bookmarks.html

@@ -1,5 +1,6 @@
 <bl-dropdown [footer]="false" align="right">
-    <div bl-dropdown-btn  attr.aria-label="{{references.length}}-forms in progress">
+    <div bl-dropdown-btn
+        [attr.button-title]="'sidebar-bookmarks.dropdown-button-title' | i18n">
         <i class="fa fa-wpforms"></i>
         <span class="count" *ngIf="references.length > 0">{{references.length}}</span>
     </div>
@@ -15,7 +16,7 @@
         </div>
 
         <div *ngIf="references.length === 0" class="dropdown-item no-bookmarks">
-            <div> No forms in progress</div>
+            <div>{{'sidebar-bookmarks.no-references' | i18n }}</div>
         </div>
     </div>
 </bl-dropdown>

src/@batch-flask/ui/sidebar/sidebar-bookmarks/sidebar-bookmarks.i18n.yml

@@ -0,0 +1,3 @@
+sidebar-bookmarks:
+  dropdown-button-title: Toggle bookmarks menu
+  no-references: No bookmark references

src/@batch-flask/ui/sidebar/sidebar.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { MaterialModule } from "@batch-flask/core";
 import { DropdownModule } from "@batch-flask/ui/dropdown";
+import { I18nUIModule } from "@batch-flask/ui/i18n";
 import { SidebarBookmarksComponent } from "./sidebar-bookmarks";
 import { SidebarContentComponent } from "./sidebar-content";
 import { SidebarManager } from "./sidebar-manager";
@@ -26,6 +27,7 @@ const privateComponents = [];
         FormsModule,
         DropdownModule,
         MaterialModule,
+        I18nUIModule
     ],
     providers: [
         SidebarManager, // This needs to be here otherwise entry components in lazy loaded doesn't work

src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { RouterTestingModule } from "@angular/router/testing";
 import { NavigableRecord, PinnableEntity, PinnedEntityType } from "@batch-flask/core";
+import { I18nTestingModule } from "@batch-flask/core/testing";
 import { ContextMenuService } from "@batch-flask/ui";
 import { DropdownModule } from "@batch-flask/ui/dropdown";
 import { BatchAccountService, PinnedEntityService } from "app/services";
@@ -54,7 +55,7 @@ describe("PinnedDropDownComponent", () => {
         };
 
         TestBed.configureTestingModule({
-            imports: [DropdownModule, RouterTestingModule],
+            imports: [DropdownModule, RouterTestingModule, I18nTestingModule],
             declarations: [PinnedDropDownComponent, TestComponent],
             providers: [
                 { provide: BatchAccountService, useValue: accountServiceSpy },