Feature: help tooltips (#5383)

src-ui/src/app/components/admin/config/config.component.html

@@ -1,4 +1,10 @@
-<pngx-page-header title="Application Configuration" subTitle="Global Paperless-ngx configuration options" i18n-title i18n-subTitle></pngx-page-header>
+<pngx-page-header
+    title="Application Configuration"
+    i18n-title
+    info="Global app configuration options which apply to <strong>every</strong> user of this install of Paperless-ngx. Options can also be set using environment variables or the configuration file but the value here will always take precedence."
+    i18n-info
+    infoLink="configuration">
+</pngx-page-header>
 
 <form [formGroup]="configForm" (ngSubmit)="saveConfig()" class="pb-4">
 

src-ui/src/app/components/admin/logs/logs.component.html

@@ -1,4 +1,8 @@
-<pngx-page-header title="Logs" i18n-title>
+<pngx-page-header
+  title="Logs"
+  i18n-title
+  info="Review the log files for the application and for email checking."
+  i18n-info>
   <div class="form-check form-switch" (click)="toggleAutoRefresh()">
     <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
     <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>

src-ui/src/app/components/admin/settings/settings.component.html

@@ -1,4 +1,9 @@
-<pngx-page-header title="Settings" i18n-title>
+<pngx-page-header
+  title="Settings"
+  i18n-title
+  info="Options to customize appearance, notifications, saved views and more. Settings apply to the <strong>current user only</strong>."
+  i18n-info
+  >
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
   <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
     <ng-container i18n>Open Django Admin</ng-container>

src-ui/src/app/components/admin/tasks/tasks.component.html

@@ -1,4 +1,9 @@
-<pngx-page-header title="File Tasks" i18n-title>
+<pngx-page-header
+  title="File Tasks"
+  i18n-title
+  info="File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process."
+  i18n-info
+  >
   <div class="btn-toolbar col col-md-auto align-items-center">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
       <svg class="sidebaricon" fill="currentColor">

src-ui/src/app/components/admin/users-groups/users-groups.component.html

@@ -1,4 +1,10 @@
-<pngx-page-header title="Users & Groups" i18n-title>
+<pngx-page-header
+  title="Users & Groups"
+  i18n-title
+  info="Create, delete and edit users and groups."
+  i18n-info
+  infoLink="usage/#users-and-groups"
+  >
 </pngx-page-header>
 
 @if (users) {

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

@@ -5,6 +5,22 @@
       @if (subTitle) {
         <span class="h6 mb-0 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
       }
+      @if (info) {
+        <button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
+          <svg class="sidebaricon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
+          </svg>
+        </button>
+        <ng-template #infoPopover>
+          <p [class.mb-0]="!infoLink" [innerHTML]="info"></p>
+          @if (infoLink) {
+            <a href="https://docs.paperless-ngx.com/{{infoLink}}" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
+            <svg class="sidebaricon-sm text-muted ms-1" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up-right"/>
+            </svg>
+          }
+        </ng-template>
+      }
     </h3>
   </div>
   <div class="btn-toolbar col col-md-auto">

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

@@ -24,4 +24,10 @@ export class PageHeaderComponent {
 
   @Input()
   subTitle: string = ''
+
+  @Input()
+  info: string
+
+  @Input()
+  infoLink: string
 }

src-ui/src/app/components/manage/custom-fields/custom-fields.component.html

@@ -1,4 +1,10 @@
-<pngx-page-header title="Custom Fields" i18n-title>
+<pngx-page-header
+  title="Custom Fields"
+  i18n-title
+  info="Customize the data fields that can be attached to documents."
+  i18n-info
+  infoLink="usage/#custom-fields"
+  >
   <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editField()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
     <svg class="sidebaricon me-1" fill="currentColor">
       <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />

src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts

@@ -90,7 +90,7 @@ describe('CustomFieldsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const createButton = fixture.debugElement.queryAll(By.css('button'))[0]
+    const createButton = fixture.debugElement.queryAll(By.css('button'))[1]
     createButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -114,7 +114,7 @@ describe('CustomFieldsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const editButton = fixture.debugElement.queryAll(By.css('button'))[1]
+    const editButton = fixture.debugElement.queryAll(By.css('button'))[2]
     editButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -139,7 +139,7 @@ describe('CustomFieldsComponent', () => {
     const deleteSpy = jest.spyOn(customFieldsService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[3]
+    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[4]
     deleteButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()

src-ui/src/app/components/manage/mail/mail.component.html

@@ -1,4 +1,10 @@
-<pngx-page-header title="Mail Settings" i18n-title>
+<pngx-page-header
+  title="Mail Settings"
+  i18n-title
+  info="Manage e-mail accounts and rules for automatically importing documents."
+  i18n-info
+  infoLink="usage/#usage-email"
+  >
 </pngx-page-header>
 
 <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }">

src-ui/src/app/components/manage/workflows/workflows.component.html

@@ -1,4 +1,10 @@
-<pngx-page-header title="Workflows" i18n-title>
+<pngx-page-header
+  title="Workflows"
+  i18n-title
+  info="Use workflows to customize the behavior of Paperless-ngx when events 'trigger' a workflow."
+  i18n-info
+  infoLink="usage/#workflows"
+  >
   <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }">
     <svg class="sidebaricon me-1" fill="currentColor">
       <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />

src-ui/src/app/components/manage/workflows/workflows.component.spec.ts

@@ -125,7 +125,7 @@ describe('WorkflowsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const createButton = fixture.debugElement.queryAll(By.css('button'))[0]
+    const createButton = fixture.debugElement.queryAll(By.css('button'))[1]
     createButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -149,7 +149,7 @@ describe('WorkflowsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const editButton = fixture.debugElement.queryAll(By.css('button'))[1]
+    const editButton = fixture.debugElement.queryAll(By.css('button'))[2]
     editButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -174,7 +174,7 @@ describe('WorkflowsComponent', () => {
     const deleteSpy = jest.spyOn(workflowService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[3]
+    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[4]
     deleteButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()