Enhancement: doc details ux improvements (#14485)

src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.html

@@ -1,5 +1,7 @@
 @if (!accordion) {
-  <h5 i18n>Permissions</h5>
+  @if (title?.length > 0) {
+    <h5>{{title}}</h5>
+  }
   <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
 }
 @if (accordion) {

src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.ts

@@ -59,6 +59,9 @@ export class PermissionsFormComponent
   @Input()
   accordion: boolean = false
 
+  @Input()
+  title: string = $localize`Permissions`
+
   form = new FormGroup({
     owner: new FormControl(null),
     set_permissions: new FormGroup({

src-ui/src/app/components/common/page-header/page-header.component.html

@@ -3,13 +3,13 @@
     <h3 class="d-flex align-items-center mb-2 mb-md-1" style="line-height: 1.4">
       <span class="text-truncate">{{title()}}</span>
       @if (id()) {
-        <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyID()">
+        <button type="button" class="badge border-0 bg-primary text-primary-text-contrast ms-3 small fs-normal" (click)="copyID()" title="Copy ID" i18n-title>
           @if (copied()) {
             <i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
           } @else {
             ID: {{id()}}
           }
-        </span>
+        </button>
       }
       @if (subTitle()) {
         <span class="page-subtitle h6 mb-0 mt-1 fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle()}}</span>

src-ui/src/app/components/common/page-header/page-header.component.spec.ts

@@ -43,6 +43,13 @@ describe('PageHeaderComponent', () => {
     expect(titleSpy).toHaveBeenCalledWith(`Foo Bar - ${environment.appTitle}`)
   })
 
+  it('should set html title to just the app title until a title is available', () => {
+    const titleSpy = jest.spyOn(titleService, 'setTitle')
+    fixture.componentRef.setInput('title', undefined)
+    fixture.detectChanges()
+    expect(titleSpy).toHaveBeenCalledWith(environment.appTitle)
+  })
+
   it('should copy id to clipboard, reset after 3 seconds', () => {
     jest.useFakeTimers()
     fixture.componentRef.setInput('id', 42)

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -27,7 +27,10 @@ export class PageHeaderComponent {
 
   constructor() {
     effect(() => {
-      this.titleService.setTitle(`${this.title()} - ${environment.appTitle}`)
+      const title = this.title()
+      this.titleService.setTitle(
+        title ? `${title} - ${environment.appTitle}` : environment.appTitle
+      )
     })
   }