Fix/refactor: remove doc observables, fix username async (#8908)

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -1,3 +1,5 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
   TestBed,
@@ -51,7 +53,11 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      providers: [FilterPipe],
+      providers: [
+        FilterPipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
       imports: [NgxBootstrapIconsModule.pick(allIcons)],
     }).compileComponents()
 

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts

@@ -1,3 +1,5 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Tag } from 'src/app/data/tag'
 import { TagComponent } from '../../tag/tag.component'
@@ -12,7 +14,10 @@ describe('ToggleableDropdownButtonComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      providers: [],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
       imports: [ToggleableDropdownButtonComponent, TagComponent],
     }).compileComponents()
 

src-ui/src/app/components/common/tag/tag.component.html

@@ -1,4 +1,4 @@
-@if (tag !== undefined) {
+@if (tag) {
   @if (!clickable) {
     <span class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
   }

src-ui/src/app/components/common/tag/tag.component.spec.ts

@@ -1,6 +1,11 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
+import { of } from 'rxjs'
 import { Tag } from 'src/app/data/tag'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { TagService } from 'src/app/services/rest/tag.service'
 import { TagComponent } from './tag.component'
 
 const tag: Tag = {
@@ -12,13 +17,20 @@ const tag: Tag = {
 describe('TagComponent', () => {
   let component: TagComponent
   let fixture: ComponentFixture<TagComponent>
+  let permissionsService: PermissionsService
+  let tagService: TagService
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      providers: [],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
       imports: [TagComponent],
     }).compileComponents()
 
+    permissionsService = TestBed.inject(PermissionsService)
+    tagService = TestBed.inject(TagService)
     fixture = TestBed.createComponent(TagComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -47,4 +59,13 @@ describe('TagComponent', () => {
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('a.badge'))).not.toBeNull()
   })
+
+  it('should support retrieving tag by ID', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    const getCachedSpy = jest.spyOn(tagService, 'getCached')
+    getCachedSpy.mockReturnValue(of(tag))
+    component.tagID = 1
+    expect(getCachedSpy).toHaveBeenCalledWith(1)
+    expect(component.tag).toEqual(tag)
+  })
 })

src-ui/src/app/components/common/tag/tag.component.ts

@@ -1,5 +1,11 @@
 import { Component, Input } from '@angular/core'
 import { Tag } from 'src/app/data/tag'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import { TagService } from 'src/app/services/rest/tag.service'
 
 @Component({
   selector: 'pngx-tag',
@@ -7,10 +13,39 @@ import { Tag } from 'src/app/data/tag'
   styleUrls: ['./tag.component.scss'],
 })
 export class TagComponent {
-  constructor() {}
+  private _tag: Tag
+  private _tagID: number
+
+  constructor(
+    private permissionsService: PermissionsService,
+    private tagService: TagService
+  ) {}
 
   @Input()
-  tag: Tag
+  public set tag(tag: Tag) {
+    this._tag = tag
+  }
+
+  public get tag(): Tag {
+    return this._tag
+  }
+
+  @Input()
+  set tagID(tagID: number) {
+    if (tagID !== this._tagID) {
+      this._tagID = tagID
+      if (
+        this.permissionsService.currentUserCan(
+          PermissionAction.View,
+          PermissionType.Tag
+        )
+      ) {
+        this.tagService.getCached(this._tagID).subscribe((tag) => {
+          this.tag = tag
+        })
+      }
+    }
+  }
 
   @Input()
   linkTitle: string = ''