Move copy to ngx-clipboard library

src-ui/package-lock.json

@@ -24,6 +24,7 @@
         "file-saver": "^2.0.5",
         "mime-names": "^1.0.0",
         "ng2-pdf-viewer": "^10.0.0",
+        "ngx-clipboard": "^16.0.0",
         "ngx-color": "^9.0.0",
         "ngx-cookie-service": "^16.0.1",
         "ngx-file-drop": "^16.0.0",
@@ -14404,6 +14405,19 @@
         "pdfjs-dist": "~2.16.105"
       }
     },
+    "node_modules/ngx-clipboard": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-16.0.0.tgz",
+      "integrity": "sha512-rZ/Eo1PqiKMiyF8tdjhmUkoUu68f7OzBJ7YH1YFeh2RAaNrerTaW8XfFOzppSckjFQqA1fwGSYuTTJlDhDag5w==",
+      "dependencies": {
+        "ngx-window-token": ">=7.0.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=13.0.0",
+        "@angular/core": ">=13.0.0"
+      }
+    },
     "node_modules/ngx-color": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-9.0.0.tgz",
@@ -14474,6 +14488,21 @@
         "@ng-bootstrap/ng-bootstrap": "^15.0.0"
       }
     },
+    "node_modules/ngx-window-token": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-window-token/-/ngx-window-token-7.0.0.tgz",
+      "integrity": "sha512-5+XfRVSY7Dciu8xyCNMkOlH2UfwR9W2P1Pirz7caaZgOZDjFbL8aEO2stjfJJm2FFf1D6dlVHNzhLWGk9HGkqA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=13.0.0",
+        "@angular/core": ">=13.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

src-ui/package.json

@@ -26,6 +26,7 @@
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
     "ng2-pdf-viewer": "^10.0.0",
+    "ngx-clipboard": "^16.0.0",
     "ngx-color": "^9.0.0",
     "ngx-cookie-service": "^16.0.1",
     "ngx-file-drop": "^16.0.0",

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html

@@ -1,5 +1,5 @@
 <div ngbDropdown>
-    <button class="btn btn-sm btn-outline-primary me-2" id="shareLinksDropdown" ngbDropdownToggle>
+    <button class="btn btn-sm btn-outline-primary me-2" id="shareLinksDropdown" [disabled]="disabled" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#link" />
       </svg>

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.spec.ts

@@ -18,6 +18,7 @@ import { ShareLinkService } from 'src/app/services/rest/share-link.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { ShareLinksDropdownComponent } from './share-links-dropdown.component'
+import { ClipboardService } from 'ngx-clipboard'
 
 describe('ShareLinksDropdownComponent', () => {
   let component: ShareLinksDropdownComponent
@@ -25,6 +26,7 @@ describe('ShareLinksDropdownComponent', () => {
   let shareLinkService: ShareLinkService
   let toastService: ToastService
   let httpController: HttpTestingController
+  let clipboardService: ClipboardService
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -36,6 +38,7 @@ describe('ShareLinksDropdownComponent', () => {
     shareLinkService = TestBed.inject(ShareLinkService)
     toastService = TestBed.inject(ToastService)
     httpController = TestBed.inject(HttpTestingController)
+    clipboardService = TestBed.inject(ClipboardService)
 
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -99,7 +102,7 @@ describe('ShareLinksDropdownComponent', () => {
     const expiration = new Date()
     expiration.setDate(expiration.getDate() + 7)
 
-    const copySpy = jest.spyOn(navigator.clipboard, 'writeText')
+    const copySpy = jest.spyOn(clipboardService, 'copy')
     const refreshSpy = jest.spyOn(component, 'refresh')
 
     component.createLink()

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.ts

@@ -7,6 +7,7 @@ import {
 import { ShareLinkService } from 'src/app/services/rest/share-link.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
+import { ClipboardService } from 'ngx-clipboard'
 
 @Component({
   selector: 'app-share-links-dropdown',
@@ -28,13 +29,16 @@ export class ShareLinksDropdownComponent implements OnInit {
 
   @Input()
   set documentId(id: number) {
-    this._documentId = id
+    if (id !== undefined) {
-    this.refresh()
+      this._documentId = id
+      this.refresh()
+    }
   }
 
-  shareLinks: PaperlessShareLink[]
+  @Input()
+  disabled: boolean = false
 
-  buttonsEnabled: boolean = true
+  shareLinks: PaperlessShareLink[]
 
   loading: boolean = false
 
@@ -46,15 +50,16 @@ export class ShareLinksDropdownComponent implements OnInit {
 
   constructor(
     private shareLinkService: ShareLinkService,
-    private toastService: ToastService
+    private toastService: ToastService,
+    private clipboardService: ClipboardService
   ) {}
 
   ngOnInit(): void {
-    this.refresh()
+    if (this._documentId !== undefined) this.refresh()
   }
 
   refresh() {
-    if (!this._documentId) return
+    if (this._documentId === undefined) return
     this.loading = true
     this.shareLinkService
       .getLinksForDocument(this._documentId)
@@ -86,7 +91,7 @@ export class ShareLinksDropdownComponent implements OnInit {
   }
 
   copy(link: PaperlessShareLink) {
-    navigator.clipboard.writeText(this.getShareUrl(link))
+    this.clipboardService.copy(this.getShareUrl(link))
     this.copied = link.id
     setTimeout(() => {
       this.copied = null

src-ui/src/app/components/common/toasts/toasts.component.spec.ts

@@ -10,6 +10,7 @@ import { ComponentFixture } from '@angular/core/testing'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { of } from 'rxjs'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { ClipboardService } from 'ngx-clipboard'
 
 const toasts = [
   {
@@ -41,6 +42,7 @@ describe('ToastsComponent', () => {
   let component: ToastsComponent
   let fixture: ComponentFixture<ToastsComponent>
   let toastService: ToastService
+  let clipboardService: ClipboardService
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -57,9 +59,10 @@ describe('ToastsComponent', () => {
     }).compileComponents()
 
     fixture = TestBed.createComponent(ToastsComponent)
-    component = fixture.componentInstance
-
     toastService = TestBed.inject(ToastService)
+    clipboardService = TestBed.inject(ClipboardService)
+
+    component = fixture.componentInstance
 
     fixture.detectChanges()
   })
@@ -114,7 +117,7 @@ describe('ToastsComponent', () => {
       'Error 2 message details'
     )
 
-    const copySpy = jest.spyOn(navigator.clipboard, 'writeText')
+    const copySpy = jest.spyOn(clipboardService, 'copy')
     component.copyError(toasts[2].error)
     expect(copySpy).toHaveBeenCalled()
 

src-ui/src/app/components/common/toasts/toasts.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Subscription } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ClipboardService } from 'ngx-clipboard'
 
 @Component({
   selector: 'app-toasts',
@@ -8,7 +9,10 @@ import { Toast, ToastService } from 'src/app/services/toast.service'
   styleUrls: ['./toasts.component.scss'],
 })
 export class ToastsComponent implements OnInit, OnDestroy {
-  constructor(private toastService: ToastService) {}
+  constructor(
+    private toastService: ToastService,
+    private clipboardService: ClipboardService
+  ) {}
 
   private subscription: Subscription
 
@@ -45,7 +49,7 @@ export class ToastsComponent implements OnInit, OnDestroy {
   }
 
   public copyError(error: any) {
-    navigator.clipboard.writeText(JSON.stringify(error))
+    this.clipboardService.copy(JSON.stringify(error))
     this.copied = true
     setTimeout(() => {
       this.copied = false

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -48,7 +48,7 @@
         </div>
     </div>
 
-    <app-share-links-dropdown [documentId]="documentId" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></app-share-links-dropdown>
+    <app-share-links-dropdown [documentId]="documentId" [disabled]="!userIsOwner" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></app-share-links-dropdown>
 
     <button type="button" class="btn btn-sm btn-outline-primary me-2" i18n-title title="Close" (click)="close()">
         <svg class="buttonicon" fill="currentColor">