Merge branch 'dev' into feature-better-bs-icons

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,145 +1,165 @@
-<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">
-      <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
-      </button>
-      <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
-        <i-bs  name="check2-all"></i-bs>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
-        </button>
-        <div class="form-check form-switch mb-0" (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>
-        </div>
-      </div>
-    </pngx-page-header>
+      <svg class="sidebaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#x"/>
+      </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
+    </button>
+    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
+      <svg class="sidebaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
+      </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
+    </button>
+    <div class="form-check form-switch mb-0" (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>
+    </div>
+  </div>
+</pngx-page-header>
 
-    @if (!tasksService.completedFileTasks && tasksService.loading) {
-      <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-      <div class="visually-hidden" i18n>Loading...</div>
-    }
+@if (!tasksService.completedFileTasks && tasksService.loading) {
+  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+  <div class="visually-hidden" i18n>Loading...</div>
+}
 
-    <ng-template let-tasks="tasks" #tasksTemplate>
-      <table class="table table-striped align-middle border shadow-sm">
-        <thead>
-          <tr>
-            <th scope="col">
-              <div class="form-check">
-                <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
-                <label class="form-check-label" for="all-tasks"></label>
-              </div>
-            </th>
-            <th scope="col" i18n>Name</th>
-            <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
-            @if (activeTab !== 'started' && activeTab !== 'queued') {
-              <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
-            }
-            <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
-            <th scope="col" i18n>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task) {
-            <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
-              <td>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
-                  <label class="form-check-label" for="task{{task.id}}"></label>
-                </div>
-              </td>
-              <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
-              <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
-              @if (activeTab !== 'started' && activeTab !== 'queued') {
-                <td class="d-none d-lg-table-cell">
-                  @if (task.result?.length > 50) {
-                    <div class="result" (click)="expandTask(task); $event.stopPropagation();"
-                      [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
-                      <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
-                    </div>
-                  }
-                  @if (task.result?.length <= 50) {
-                    <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
-                  }
-                  <ng-template #resultPopover>
-                    <pre class="small mb-0">{{ task.result | slice:0:300 }}@if (task.result.length > 300) {
-                      &hellip;
-                    }</pre>
-                    @if (task.result?.length > 300) {
-                      <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
-                    }
-                  </ng-template>
-                </td>
-              }
-              <td class="d-lg-none">
-                <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
-                  <i-bs class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16" name="info-circle"></i-bs>
-                </button>
-              </td>
-              <td scope="row">
-                <div class="btn-group" role="group">
-                  <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-                    <i-bs  name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container>
-                    </button>
-                    <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-                      @if (task.related_document) {
-                        <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
-                          <i-bs  name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container>
-                          </button>
-                        }
-                      </ng-container>
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
-                    <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
-                  </td>
-                </tr>
-              }
-            </tbody>
-          </table>
-
-          <div class="pb-3 d-sm-flex justify-content-between align-items-center">
-            @if (tasks.length > 0) {
-              <div class="pb-2 pb-sm-0" i18n>{tasks.length, plural, =1 {One {{this.activeTabLocalized}} task} other {{{tasks.length || 0}} total {{this.activeTabLocalized}} tasks}}</div>
-            }
-            @if (tasks.length > pageSize) {
-              <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="tasks.length" maxSize="8" size="sm"></ngb-pagination>
-            }
+<ng-template let-tasks="tasks" #tasksTemplate>
+  <table class="table table-striped align-middle border shadow-sm">
+    <thead>
+      <tr>
+        <th scope="col">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+            <label class="form-check-label" for="all-tasks"></label>
           </div>
-        </ng-template>
+        </th>
+        <th scope="col" i18n>Name</th>
+        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
+        @if (activeTab !== 'started' && activeTab !== 'queued') {
+          <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
+        }
+        <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
+        <th scope="col" i18n>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task) {
+        <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
+          <td>
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
+              <label class="form-check-label" for="task{{task.id}}"></label>
+            </div>
+          </td>
+          <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
+          <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
+          @if (activeTab !== 'started' && activeTab !== 'queued') {
+            <td class="d-none d-lg-table-cell">
+              @if (task.result?.length > 50) {
+                <div class="result" (click)="expandTask(task); $event.stopPropagation();"
+                  [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
+                  <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
+                </div>
+              }
+              @if (task.result?.length <= 50) {
+                <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
+              }
+              <ng-template #resultPopover>
+                <pre class="small mb-0">{{ task.result | slice:0:300 }}@if (task.result.length > 300) {
+                  &hellip;
+                }</pre>
+                @if (task.result?.length > 300) {
+                  <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
+                }
+              </ng-template>
+            </td>
+          }
+          <td class="d-lg-none">
+            <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
+              <svg fill="currentColor" class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+                <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+              </svg>
+            </button>
+          </td>
+          <td scope="row">
+            <div class="btn-group" role="group">
+              <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
+                <svg class="sidebaricon" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                  </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
+              </button>
+              <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+                @if (task.related_document) {
+                  <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
+                    <svg class="sidebaricon" fill="currentColor">
+                      <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
+                    </svg>&nbsp;<ng-container i18n>Open Document</ng-container>
+                  </button>
+                }
+              </ng-container>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
+            <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
 
-        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
-          <li ngbNavItem="failed">
-            <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
-<span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
-}</a>
-            <ng-template ngbNavContent>
-              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
-            </ng-template>
-          </li>
-          <li ngbNavItem="completed">
-            <a ngbNavLink i18n>Complete@if (tasksService.completedFileTasks.length > 0) {
-<span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
-}</a>
-            <ng-template ngbNavContent>
-              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
-            </ng-template>
-          </li>
-          <li ngbNavItem="started">
-            <a ngbNavLink i18n>Started@if (tasksService.startedFileTasks.length > 0) {
-<span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
-}</a>
-            <ng-template ngbNavContent>
-              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
-            </ng-template>
-          </li>
-          <li ngbNavItem="queued">
-            <a ngbNavLink i18n>Queued@if (tasksService.queuedFileTasks.length > 0) {
-<span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
-}</a>
-            <ng-template ngbNavContent>
-              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
-            </ng-template>
-          </li>
-        </ul>
-        <div [ngbNavOutlet]="nav"></div>
+  <div class="pb-3 d-sm-flex justify-content-between align-items-center">
+    @if (tasks.length > 0) {
+      <div class="pb-2 pb-sm-0">
+        <ng-container i18n>{tasks.length, plural, =1 {One {{this.activeTabLocalized}} task} other {{{tasks.length || 0}} total {{this.activeTabLocalized}} tasks}}</ng-container>
+        @if (selectedTasks.size > 0) {
+          <ng-container i18n>&nbsp;({{selectedTasks.size}} selected)</ng-container>
+        }
+      </div>
+    }
+    @if (tasks.length > pageSize) {
+      <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="tasks.length" maxSize="8" size="sm"></ngb-pagination>
+    }
+  </div>
+</ng-template>
+
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
+  <li ngbNavItem="failed">
+    <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
+      <span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="completed">
+    <a ngbNavLink i18n>Complete@if (tasksService.completedFileTasks.length > 0) {
+      <span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="started">
+    <a ngbNavLink i18n>Started@if (tasksService.startedFileTasks.length > 0) {
+      <span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="queued">
+    <a ngbNavLink i18n>Queued@if (tasksService.queuedFileTasks.length > 0) {
+      <span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+</ul>
+<div [ngbNavOutlet]="nav"></div>

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 }">
     <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Field</ng-container>
   </button>

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 }">
     <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Workflow</ng-container>
   </button>

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()