Feature: help tooltips (#5383)

2025-11-03 03:16:10 -06:00 · 2024-01-15 15:40:36 -08:00
parent ad07791bac
commit 58aacd4814
13 changed files with 293 additions and 170 deletions
--- a/src-ui/src/app/components/admin/config/config.component.html
+++ b/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">

--- a/src-ui/src/app/components/admin/logs/logs.component.html
+++ b/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>
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/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>
--- a/src-ui/src/app/components/admin/tasks/tasks.component.html
+++ b/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">
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.html
+++ b/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) {
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/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">
--- a/src-ui/src/app/components/common/page-header/page-header.component.ts
+++ b/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
 }
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
+++ b/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" />
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts
+++ b/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()
--- a/src-ui/src/app/components/manage/mail/mail.component.html
+++ b/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 }">
--- a/src-ui/src/app/components/manage/workflows/workflows.component.html
+++ b/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" />
--- a/src-ui/src/app/components/manage/workflows/workflows.component.spec.ts
+++ b/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()