Move default permissions to its own settings tab

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

@@ -132,7 +132,46 @@
           </div>
         </div>
 
-        <h4 i18n>Permissions</h4>
+        <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
+
+        <div class="row mb-3">
+          <div class="offset-md-3 col">
+            <p i18n>
+              Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/>
+              Actual updating of the app must still be performed manually.
+            </p>
+            <p i18n>
+              <em>No tracking data is collected by the app in any way.</em>
+            </p>
+            <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+          </div>
+        </div>
+
+        <h4 class="mt-4" i18n>Bulk editing</h4>
+
+        <div class="row mb-3">
+          <div class="offset-md-3 col">
+            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
+            <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
+          </div>
+        </div>
+
+        <h4 class="mt-4" i18n>Notes</h4>
+
+        <div class="row mb-3">
+          <div class="offset-md-3 col">
+            <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+          </div>
+        </div>
+
+      </ng-template>
+    </li>
+
+    <li [ngbNavItem]="SettingsNavIDs.Permissions">
+      <a ngbNavLink i18n>Permissions</a>
+      <ng-template ngbNavContent>
+
+        <h4 i18n>Default Permissions</h4>
 
         <div class="row mb-3">
           <div class="offset-md-3 col">
@@ -207,39 +246,6 @@
             </div>
           </div>
         </div>
-
-        <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <p i18n>
-              Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/>
-              Actual updating of the app must still be performed manually.
-            </p>
-            <p i18n>
-              <em>No tracking data is collected by the app in any way.</em>
-            </p>
-            <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled" i18n-hint hint="Note that for users of third-party containers e.g. linuxserver.io this notification may be 'ahead' of the current third-party release."></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 class="mt-4" i18n>Bulk editing</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
-            <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 class="mt-4" i18n>Notes</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
-          </div>
-        </div>
-
       </ng-template>
     </li>
 

src-ui/src/app/components/admin/settings/settings.component.spec.ts

@@ -153,8 +153,10 @@ describe('SettingsComponent', () => {
     const navigateSpy = jest.spyOn(router, 'navigate')
     const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
     tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
     tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click'))
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'savedviews'])
 
     const initSpy = jest.spyOn(component, 'initialize')
@@ -178,7 +180,7 @@ describe('SettingsComponent', () => {
     activatedRoute.snapshot.fragment = '#notifications'
     const scrollSpy = jest.spyOn(viewportScroller, 'scrollToAnchor')
     component.ngOnInit()
-    expect(component.activeNavID).toEqual(2) // Users & Groups
+    expect(component.activeNavID).toEqual(3) // Users & Groups
     component.ngAfterViewInit()
     expect(scrollSpy).toHaveBeenCalledWith('#notifications')
   })

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

@@ -9,7 +9,7 @@ import {
 } from '@angular/core'
 import { FormGroup, FormControl } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
-import { NgbModal, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
@@ -40,16 +40,13 @@ import {
   LanguageOption,
 } from 'src/app/services/settings.service'
 import { ToastService, Toast } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
-import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 enum SettingsNavIDs {
   General = 1,
-  Notifications = 2,
+  Permissions = 2,
-  SavedViews = 3,
+  Notifications = 3,
+  SavedViews = 4,
 }
 
 @Component({