[#70420] Rework close, delete buttons as IconButtons

Fixes various eslint errors, replacing links and other non-focusable
elements with `IconButton`.

Introduces an initial port of Primer's `IconButton` to Angular, along
with `octicon` directive to allow rendering icons by name.

Author: myabc

config/locales/js-en.yml

@@ -225,6 +225,8 @@ en:
         add_table: "Add table of related work packages"
         edit_query: "Edit query"
         new_group: "New group"
+        delete_group: "Delete group"
+        remove_attribute: "Remove from group"
         reset_to_defaults: "Reset to defaults"
 
       working_days:

frontend/src/app/features/admin/types/attribute-group.component.html

@@ -4,7 +4,15 @@
     <op-group-edit-in-place [name]="group.name"
       (onValueChange)="rename($event)"
       class="group-name" />
-    <span class="delete-group icon-small icon-close" (click)="deleteGroup.emit()"></span>
+      <primer-icon-button
+        icon="x"
+        scheme="invisible"
+        size="small"
+        class="delete-group"
+        tooltip-direction="w"
+        [label]="text.delete_group"
+        (clicked)="deleteGroup.emit()"
+      />
   </div>
   <div class="attributes" dragula="attributes" [(dragulaModel)]="group.attributes">
     @for (attribute of group.attributes; track attribute) {
@@ -20,7 +28,15 @@
             </span>
           }
         </span>
-        <span class="delete-attribute icon-small icon-close" (click)="removeFromGroup(attribute)"></span>
+        <primer-icon-button
+          icon="x"
+          scheme="invisible"
+          size="small"
+          class="delete-attribute"
+          tooltip-direction="w"
+          [label]="text.remove_attribute"
+          (clicked)="removeFromGroup(attribute)"
+        />
       </div>
     }
   </div>

frontend/src/app/features/admin/types/attribute-group.component.ts

@@ -19,6 +19,8 @@ export class TypeFormAttributeGroupComponent {
 
   text = {
     custom_field: this.I18n.t('js.admin.type_form.custom_field'),
+    delete_group: this.I18n.t('js.admin.type_form.delete_group'),
+    remove_attribute: this.I18n.t('js.admin.type_form.remove_attribute')
   };
 
   constructor(private I18n:I18nService,

frontend/src/app/features/admin/types/query-group.component.html

@@ -4,7 +4,15 @@
         <op-group-edit-in-place [name]="group.name"
                 (onValueChange)="rename($event)"
                 class="group-name" />
-        <span class="delete-group icon-small icon-close" (click)="deleteGroup.emit()"></span>
+        <primer-icon-button
+          icon="x"
+          scheme="invisible"
+          size="small"
+          class="delete-group"
+          tooltip-direction="w"
+          [label]="text.delete_group"
+          (clicked)="deleteGroup.emit()"
+        />
     </div>
     <div class="type-form-query">
         <span class="type-form-query-group--edit-button" (click)="editQuery.emit()">

frontend/src/app/features/admin/types/query-group.component.ts

@@ -13,6 +13,7 @@ import { TypeGroup } from 'core-app/features/admin/types/type-form-configuration
 export class TypeFormQueryGroupComponent {
   text = {
     edit_query: this.I18n.t('js.admin.type_form.edit_query'),
+    delete_group: this.I18n.t('js.admin.type_form.delete_group')
   };
 
   @Input() public group:TypeGroup;

frontend/src/app/features/work-packages/components/filters/query-filters/query-filters.component.html

@@ -2,11 +2,14 @@
   <fieldset id="filters" class="advanced-filters--container">
     <legend [textContent]="text.selected_filter_list"></legend>
     @if (showCloseFilter) {
-      <a
-        [attr.title]="text.close_form"
-        class="advanced-filters--close icon-context icon-close"
-        (click)="closeFilter()">
-      </a>
+      <primer-icon-button 
+        icon="x"
+        scheme="invisible"
+        class="advanced-filters--close"
+        tooltip-direction="se"
+        [label]="text.close_form"
+        (clicked)="closeFilter()"
+      />
     }
     <ul class="advanced-filters--filters">
       <li id="filter_search"

frontend/src/app/shared/components/primer/abstract-base-button.directive.ts

@@ -0,0 +1,57 @@
+//-- 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, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { booleanAttribute, Directive, input } from '@angular/core';
+
+type ButtonType = 'button' | 'reset' | 'submit';
+
+@Directive({})
+export abstract class AbstractBaseButtonDirective {
+  readonly type = input<ButtonType>('button');
+
+  /**
+   * Whether button is full-width with `display: block`
+   *
+   * @default false
+   */
+  readonly block = input(false, { transform: booleanAttribute });
+
+  /**
+   * Whether or not the button is disabled. If true, this option forces `tag` to `button`.
+   *
+   * @default false
+   */
+  readonly disabled = input(false, { transform: booleanAttribute });
+
+  /**
+   * Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button.
+   *
+   * @default false
+   */
+  readonly inactive = input(false, { transform: booleanAttribute });
+}

frontend/src/app/shared/components/primer/base-button.directive.ts

@@ -0,0 +1,49 @@
+//-- 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, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+/* eslint-disable @angular-eslint/directive-selector */
+
+import { Directive } from '@angular/core';
+import { AbstractBaseButtonDirective } from './abstract-base-button.directive';
+
+@Directive({
+  selector: `
+    button[primerBaseButton],
+    a[primerBaseButton],
+    summary[primerBaseButton],
+    clipboard-copy[primerBaseButton]
+  `,
+  host: {
+    '[class.btn-block]': 'block()',
+    '[class.Button--inactive]': 'inactive()',
+    '[disabled]': 'disabled()',
+    '[attr.type]': 'type()',
+  }
+})
+export class PrimerBaseButtonDirective extends AbstractBaseButtonDirective {
+}

frontend/src/app/shared/components/primer/dynamic-icon-map.ts

@@ -0,0 +1,35 @@
+//-- 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, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { starIconData, SVGData, xIconData } from '@openproject/octicons-angular';
+
+export const ICON_MAP:Record<string, SVGData> = {
+  x: xIconData,
+  star: starIconData,
+  // TODO add more icons
+};