Implementation/COMMS-1048: Labels field on the work package view with inline creation

config/locales/js-en.yml

@@ -79,6 +79,7 @@ en:
         single: 'Select "%{name}"'
       remove: "Remove %{name}"
     autocompleter:
+      create_label: "Create label"
       notFoundText: "No items found"
       placeholder: "Type to search"
       project:

frontend/src/app/core/apiv3/api-v3.service.ts

@@ -174,6 +174,9 @@ export class ApiV3Service {
   // /api/v3/job_statuses
   public readonly job_statuses = this.apiV3CollectionEndpoint('job_statuses');
 
+  // /api/v3/labels
+  public readonly labels = this.apiV3CollectionEndpoint('labels');
+
   // /api/v3/views
   public readonly views = this.apiV3CustomEndpoint(ApiV3ViewsPaths);
 

frontend/src/app/shared/components/autocompleter/labels-autocompleter/labels-autocompleter-template.component.html

@@ -0,0 +1,6 @@
+<ng-template #optionTemplate let-item let-search="search">
+  <span
+    class="ng-option-label"
+    [opSearchHighlight]="search"
+  >{{ item.name }}</span>
+</ng-template>

frontend/src/app/shared/components/autocompleter/labels-autocompleter/labels-autocompleter-template.component.ts

@@ -0,0 +1,40 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
+import {
+  IAutocompleterTemplateComponent,
+} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
+
+@Component({
+  templateUrl: './labels-autocompleter-template.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class LabelsAutocompleterTemplateComponent implements IAutocompleterTemplateComponent {
+  @ViewChild('optionTemplate') optionTemplate?:TemplateRef<Element>;
+}

frontend/src/app/shared/components/autocompleter/labels-autocompleter/labels-autocompleter.component.spec.ts

@@ -0,0 +1,151 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { of } from 'rxjs';
+import { States } from 'core-app/core/states/states.service';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
+import { CurrentUserService } from 'core-app/core/current-user/current-user.service';
+import { LabelsAutocompleterComponent } from './labels-autocompleter.component';
+
+describe('LabelsAutocompleterComponent', () => {
+  let component:LabelsAutocompleterComponent;
+  let httpMock:HttpTestingController;
+  let halNotification:{ handleRawError:ReturnType<typeof vi.fn> };
+  let currentUser:{ hasCapabilities$:ReturnType<typeof vi.fn> };
+
+  const i18nStub = { t: (key:string) => key };
+
+  beforeEach(async () => {
+    halNotification = { handleRawError: vi.fn() };
+    currentUser = { hasCapabilities$: vi.fn(() => of(true)) };
+
+    await TestBed.configureTestingModule({
+      declarations: [LabelsAutocompleterComponent],
+      imports: [NgSelectModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        States,
+        provideHttpClient(withXhr(), withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        { provide: I18nService, useValue: i18nStub },
+        { provide: HalResourceNotificationService, useValue: halNotification },
+        { provide: CurrentUserService, useValue: currentUser },
+      ],
+    }).compileComponents();
+
+    component = TestBed.createComponent(LabelsAutocompleterComponent).componentInstance;
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  function pendingRequest() {
+    return httpMock.expectOne((req) => req.method === 'POST' && req.url.endsWith('/labels'));
+  }
+
+  it('does not offer to create a blank term', () => {
+    expect(component.createLabel('   ')).toBeUndefined();
+  });
+
+  it('resolves with the created label on success', async () => {
+    const promise = component.createLabel('Urgent');
+
+    pendingRequest().flush({ id: 5, name: 'Urgent', _links: { self: { href: '/api/v3/labels/5' } } });
+
+    await expect(promise).resolves.toEqual({ id: 5, name: 'Urgent', href: '/api/v3/labels/5' });
+  });
+
+  it('delegates errors to the generic handler and rejects', async () => {
+    const promise = component.createLabel('Urgent');
+
+    pendingRequest().flush({ _type: 'Error' }, { status: 422, statusText: 'Unprocessable Entity' });
+
+    await expect(promise).rejects.toBeTruthy();
+    expect(halNotification.handleRawError).toHaveBeenCalled();
+  });
+
+  it('ignores a second call while a request is in flight, then allows a retry', async () => {
+    const first = component.createLabel('Urgent');
+    const second = component.createLabel('Urgent');
+
+    expect(second).toBeUndefined();
+
+    pendingRequest().flush({ id: 5, name: 'Urgent', _links: { self: { href: '/api/v3/labels/5' } } });
+    await first;
+
+    const retry = component.createLabel('Urgent');
+    expect(retry).toBeDefined();
+    pendingRequest().flush({ id: 5, name: 'Urgent', _links: { self: { href: '/api/v3/labels/5' } } });
+    await retry;
+  });
+
+  it('resets the in-flight flag after an error so a retry can be sent', async () => {
+    const first = component.createLabel('Urgent');
+    pendingRequest().flush({ _type: 'Error' }, { status: 500, statusText: 'Internal Server Error' });
+    await expect(first).rejects.toBeTruthy();
+
+    const retry = component.createLabel('Urgent');
+    expect(retry).toBeDefined();
+    pendingRequest().flush({ id: 5, name: 'Urgent', _links: { self: { href: '/api/v3/labels/5' } } });
+    await retry;
+  });
+
+  it('enables addTag once the project grants work_packages/update, without throwing change-detection errors', () => {
+    const fixture = TestBed.createComponent(LabelsAutocompleterComponent);
+    fixture.componentRef.setInput('projectId', '1');
+
+    expect(() => fixture.detectChanges()).not.toThrow();
+    expect(typeof fixture.componentInstance.addTag).toBe('function');
+    expect(currentUser.hasCapabilities$).toHaveBeenCalledWith('work_packages/update', '1');
+  });
+
+  it('does not offer addTag when the project withholds work_packages/update', () => {
+    currentUser.hasCapabilities$.mockReturnValue(of(false));
+
+    const fixture = TestBed.createComponent(LabelsAutocompleterComponent);
+    fixture.componentRef.setInput('projectId', '1');
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.addTag).toBe(false);
+  });
+
+  it('does not offer addTag or query capabilities without a project', () => {
+    const fixture = TestBed.createComponent(LabelsAutocompleterComponent);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.addTag).toBe(false);
+    expect(currentUser.hasCapabilities$).not.toHaveBeenCalled();
+  });
+});

frontend/src/app/shared/components/autocompleter/labels-autocompleter/labels-autocompleter.component.ts

@@ -0,0 +1,152 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
+import { keyBy } from 'lodash-es';
+import { BehaviorSubject, firstValueFrom, Observable, of, throwError } from 'rxjs';
+import { catchError, finalize, map, switchMap } from 'rxjs/operators';
+import {
+  OpAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
+import { ApiV3FilterBuilder } from 'core-app/shared/helpers/api-v3/api-v3-filter-builder';
+import { addFiltersToPath } from 'core-app/core/apiv3/helpers/add-filters-to-path';
+import { IHALCollection } from 'core-app/core/apiv3/types/hal-collection.type';
+import { compareByAttribute } from 'core-app/shared/helpers/angular/tracking-functions';
+import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
+import { CurrentUserService } from 'core-app/core/current-user/current-user.service';
+import {
+  LabelsAutocompleterTemplateComponent,
+} from 'core-app/shared/components/autocompleter/labels-autocompleter/labels-autocompleter-template.component';
+
+export const labelsAutocompleterSelector = 'op-labels-autocompleter';
+
+export interface ILabelAutocompleteItem {
+  id:string|number;
+  name:string;
+  href:string|null;
+}
+
+export interface IApiLabel {
+  id:string|number;
+  name:string;
+  _links:{ self:{ href:string|null } };
+}
+
+@Component({
+  templateUrl: '../op-autocompleter/op-autocompleter.component.html',
+  selector: labelsAutocompleterSelector,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class LabelsAutocompleterComponent extends OpAutocompleterComponent<ILabelAutocompleteItem> implements OnInit {
+  getOptionsFn = this.getLabels.bind(this);
+
+  addTagText = this.I18n.t('js.autocompleter.create_label');
+
+  readonly halNotification = inject(HalResourceNotificationService);
+
+  readonly currentUserService = inject(CurrentUserService);
+
+  private creatingLabel = false;
+
+  private readonly projectId$ = new BehaviorSubject<string|undefined>(undefined);
+
+  @Input()
+  public set projectId(value:string|undefined) {
+    this.projectId$.next(value);
+  }
+
+  public get projectId():string|undefined {
+    return this.projectId$.value;
+  }
+
+  ngOnInit():void {
+    super.ngOnInit();
+    this.applyTemplates(LabelsAutocompleterTemplateComponent);
+
+    this
+      .projectId$
+      .pipe(
+        switchMap((projectId) => (projectId ? this.currentUserService.hasCapabilities$('work_packages/update', projectId) : of(false))),
+        this.untilDestroyed(),
+      )
+      .subscribe((canCreateLabels) => {
+        this.addTag = canCreateLabels ? this.createLabel.bind(this) : false;
+      });
+  }
+
+  public getLabels(searchTerm?:string):Observable<ILabelAutocompleteItem[]> {
+    const filterObject = keyBy(this.filters, 'name');
+    const filters = ApiV3FilterBuilder.fromFilterObject(filterObject);
+    if (searchTerm?.length) {
+      filters.add('name', '~', [searchTerm]);
+    }
+
+    const filteredURL = addFiltersToPath(this.url, filters);
+    filteredURL.searchParams.set('pageSize', '-1');
+    filteredURL.searchParams.set('select', 'elements/id,elements/name,elements/self,total,count,pageSize');
+
+    return this
+      .http
+      .get<IHALCollection<IApiLabel>>(filteredURL.toString())
+      .pipe(
+        map((res) => res._embedded.elements.map((label) => ({ id: label.id, name: label.name, href: label._links.self.href }))),
+      );
+  }
+
+  public createLabel(searchTerm:string):Promise<ILabelAutocompleteItem>|undefined {
+    const name = searchTerm.trim();
+    if (!name || this.creatingLabel) {
+      return undefined;
+    }
+
+    this.creatingLabel = true;
+
+    return firstValueFrom(
+      this
+        .http
+        .post<IApiLabel>(this.apiV3Service.labels.toString(), { name })
+        .pipe(
+          map((label) => ({ id: label.id, name: label.name, href: label._links.self.href })),
+          catchError((error:unknown) => {
+            this.halNotification.handleRawError(error);
+
+            return throwError(() => error);
+          }),
+          finalize(() => { this.creatingLabel = false; }),
+        ),
+    );
+  }
+
+  protected defaultCompareWithFunction():(a:unknown, b:unknown) => boolean {
+    return compareByAttribute('href', 'name');
+  }
+
+  protected defaultTrackByFunction():(item:{ href:unknown, name:unknown }) => unknown {
+    return (item) => item.href ?? item.name;
+  }
+}

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html

@@ -134,6 +134,17 @@
       </ng-template>
     }
 
+    @if (tagTemplate) {
+      <ng-template
+        ng-tag-tmp
+        let-search="searchTerm"
+      >
+        <ng-container [ngTemplateOutlet]="tagTemplate"
+          [ngTemplateOutletContext]="{ search:search }"
+         />
+      </ng-template>
+    }
+
     @if (notFoundTemplate) {
       <ng-template
         ng-notfound-tmp