[us40] Show tooltip when the category are automatically set by rules

Author: Musholic

src/app/app.module.ts

@@ -37,6 +37,7 @@ import {MatSnackBarModule} from "@angular/material/snack-bar";
 import {UserRootComponent} from './user-root/user-root.component';
 import {routeReuseStrategyProvider} from "./route-strategy.service";
 import {AceEditorComponent} from "./ace-editor/ace-editor.component";
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 @NgModule({
   declarations: [
@@ -77,7 +78,8 @@ import {AceEditorComponent} from "./ace-editor/ace-editor.component";
     MatChipsModule,
     MatSortModule,
     MatExpansionModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatTooltipModule
   ],
   providers: [
     httpInterceptorProviders,

src/app/file-list/file-list.component.html

@@ -59,6 +59,8 @@
         <th *matHeaderCellDef mat-header-cell> Category</th>
         <td *matCellDef="let element" mat-cell>
           <mat-chip-listbox [multiple]="true">
+            <mat-icon *ngIf="hasMatchingRule(element)" [matTooltip]="getAssignCategoryTooltip(element)">calculate
+            </mat-icon>
             <mat-chip-option (selectionChange)="filterByCategory(cat, $event.selected)" *ngFor="let cat of getCategories(element)"
                              [selected]="isCategorySelected(cat)">{{cat.name}}</mat-chip-option>
           </mat-chip-listbox>
@@ -80,7 +82,7 @@
               <span>Download</span>
             </a>
             <button (click)="setCategory(element)" [disabled]="hasMatchingRule(element)" class="set-category-file"
-                    mat-menu-item>
+                    [matTooltip]="getAssignCategoryTooltip(element)" mat-menu-item>
               <mat-icon>category</mat-icon>
               <span>Set category</span>
             </button>

src/app/file-list/file-list.component.spec.ts

@@ -38,6 +38,8 @@ import {BreakpointObserver} from "@angular/cdk/layout";
 import {FilesCacheService} from "../files-cache/files-cache.service";
 import {mockFilesCacheService} from "../files-cache/files-cache.service.spec";
 import {RuleService} from "../rules/rule.service";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatTooltipHarness} from "@angular/material/tooltip/testing";
 
 function mockRenderAndWaitForChanges() {
   let fixture = MockRender(FileListComponent, null, {reset: true});
@@ -62,6 +64,7 @@ describe('FileListComponent', () => {
     .keep(MatChipsModule)
     .keep(MatSortModule)
     .keep(BreakpointObserver)
+    .keep(MatTooltipModule)
     .provide({
       provide: FilesCacheService,
       useValue: mock<FilesCacheService>()
@@ -526,23 +529,29 @@ describe('FileListComponent', () => {
 
     it('should prevent category assignment when the file categories were automatically assigned', fakeAsync(async () => {
       // Arrange
-      let file = mockFileElement('name');
-      mockFilesCacheService([file], true);
+      let folder = mockFolderElement('Auto');
+      let file = mockFileElement('name', folder.id);
+      mockFilesCacheService([file, folder], true);
 
       let ruleService = ngMocks.get(RuleService);
       let fileToMatchingRuleMap = new Map();
-      fileToMatchingRuleMap.set(file.id, "existing rule");
+      fileToMatchingRuleMap.set(file.id, "Existing Rule");
       when(() => ruleService.getFileToMatchingRuleMap()).thenResolve(fileToMatchingRuleMap);
 
       let fixture = mockRenderAndWaitForChanges();
       let page = new Page(fixture);
 
       // Act
       Page.openItemMenu('name');
-      let isMenuDisabled = await page.isMenuAssignCategoryDisabled();
 
       // Assert
+      fixture.detectChanges();
+      flush();
+      let isMenuDisabled = await page.isMenuAssignCategoryDisabled();
       expect(isMenuDisabled).toBeTruthy();
+      let tooltip = await page.getMenuAssignCategoryTooltip();
+      expect(tooltip).toEqual('Automatically assigned by rule "Existing Rule"');
+      expect(Page.getTableRows()).toEqual([['name', 'calculateAuto', 'Jan 1, 2000, 12:00:00 AM', '0 B', 'more_vert']]);
     }))
   })
 
@@ -878,15 +887,25 @@ class Page {
   }
 
   async clickMenuTrash() {
-    await this.clickMenu('.trash-file');
+    let matMenuItemHarness = await this.getMenu('.trash-file');
+    await matMenuItemHarness.click();
   }
 
   async clickMenuAssignCategory() {
-    await this.clickMenu('.set-category-file');
+    let matMenuItemHarness = await this.getMenu('.set-category-file');
+    await matMenuItemHarness.click();
+  }
+
+  async isMenuAssignCategoryDisabled() {
+    let matMenuItemHarness = await this.getMenu('.set-category-file');
+    return matMenuItemHarness.isDisabled();
   }
 
-  isMenuAssignCategoryDisabled() {
-    return this.isMenuDisabled('.set-category-file');
+  async getMenuAssignCategoryTooltip() {
+    // There is only one toolTip in our tests, so we can simplify this method
+    let matTooltipHarness = await this.loader.getHarness(MatTooltipHarness);
+    await matTooltipHarness.show();
+    return matTooltipHarness.getTooltipText();
   }
 
   async setCategoryInDialog(category: string) {
@@ -962,22 +981,15 @@ class Page {
     return this.fixture.debugElement.parent?.query(By.directive(SelectFileCategoryDialog)).componentInstance as SelectFileCategoryDialog;
   }
 
-  private async clickMenu(selector: string) {
-    let matMenuHarnesses = await this.loader.getAllHarnesses(MatMenuHarness);
-    // The menu should be the one opened
-    let matMenuHarness = await findAsyncSequential(matMenuHarnesses, value => value.isOpen());
-    await matMenuHarness?.clickItem({selector: selector});
-  }
-
-  private async isMenuDisabled(selector: string) {
+  private async getMenu(selector: string) {
     let matMenuHarnesses = await this.loader.getAllHarnesses(MatMenuHarness);
     // The menu should be the one opened
     let matMenuHarness = await findAsyncSequential(matMenuHarnesses, value => value.isOpen());
     if (!matMenuHarness) {
       throw new Error("No menu for selector: " + selector);
     }
     let menuItems = await matMenuHarness.getItems({selector: selector});
-    return menuItems[0].isDisabled();
+    return menuItems[0];
   }
 
 }

src/app/file-list/file-list.component.ts

@@ -257,6 +257,14 @@ export class FileListComponent implements OnInit {
   hasMatchingRule(file: FileElement) {
     return this.fileToMatchingRuleMap.has(file.id);
   }
+
+  getAssignCategoryTooltip(file: FileElement) {
+    let matchingRule = this.fileToMatchingRuleMap.get(file.id);
+    if (matchingRule) {
+      return 'Automatically assigned by rule "' + matchingRule + '"'
+    }
+    return "";
+  }
 }
 
 @Component({

src/styles.scss

@@ -2,3 +2,7 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+mat-chip-listbox > div {
+  align-items: center;
+}