Fix: replace drag drop & clipboard dependencies with Angular CDK (#4362)

* Swap ngx-drag-drop dependency for Angular CDK

* Swap ngx-clipboard dependency for Angular CDK

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

@@ -18,7 +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'
+import { Clipboard } from '@angular/cdk/clipboard'
 
 describe('ShareLinksDropdownComponent', () => {
   let component: ShareLinksDropdownComponent
@@ -26,7 +26,7 @@ describe('ShareLinksDropdownComponent', () => {
   let shareLinkService: ShareLinkService
   let toastService: ToastService
   let httpController: HttpTestingController
-  let clipboardService: ClipboardService
+  let clipboard: Clipboard
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -38,7 +38,7 @@ describe('ShareLinksDropdownComponent', () => {
     shareLinkService = TestBed.inject(ShareLinkService)
     toastService = TestBed.inject(ToastService)
     httpController = TestBed.inject(HttpTestingController)
-    clipboardService = TestBed.inject(ClipboardService)
+    clipboard = TestBed.inject(Clipboard)
 
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -102,7 +102,7 @@ describe('ShareLinksDropdownComponent', () => {
     const expiration = new Date()
     expiration.setDate(expiration.getDate() + 7)
 
-    const copySpy = jest.spyOn(clipboardService, 'copy')
+    const copySpy = jest.spyOn(clipboard, 'copy')
     const refreshSpy = jest.spyOn(component, 'refresh')
 
     component.createLink()

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

@@ -7,7 +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'
+import { Clipboard } from '@angular/cdk/clipboard'
 
 @Component({
   selector: 'pngx-share-links-dropdown',
@@ -51,7 +51,7 @@ export class ShareLinksDropdownComponent implements OnInit {
   constructor(
     private shareLinkService: ShareLinkService,
     private toastService: ToastService,
-    private clipboardService: ClipboardService
+    private clipboard: Clipboard
   ) {}
 
   ngOnInit(): void {
@@ -91,7 +91,7 @@ export class ShareLinksDropdownComponent implements OnInit {
   }
 
   copy(link: PaperlessShareLink) {
-    this.clipboardService.copy(this.getShareUrl(link))
+    this.clipboard.copy(this.getShareUrl(link))
     this.copied = link.id
     setTimeout(() => {
       this.copied = null

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

@@ -10,7 +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'
+import { Clipboard } from '@angular/cdk/clipboard'
 
 const toasts = [
   {
@@ -42,7 +42,7 @@ describe('ToastsComponent', () => {
   let component: ToastsComponent
   let fixture: ComponentFixture<ToastsComponent>
   let toastService: ToastService
-  let clipboardService: ClipboardService
+  let clipboard: Clipboard
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -60,7 +60,7 @@ describe('ToastsComponent', () => {
 
     fixture = TestBed.createComponent(ToastsComponent)
     toastService = TestBed.inject(ToastService)
-    clipboardService = TestBed.inject(ClipboardService)
+    clipboard = TestBed.inject(Clipboard)
 
     component = fixture.componentInstance
 
@@ -117,7 +117,7 @@ describe('ToastsComponent', () => {
       'Error 2 message details'
     )
 
-    const copySpy = jest.spyOn(clipboardService, 'copy')
+    const copySpy = jest.spyOn(clipboard, 'copy')
     component.copyError(toasts[2].error)
     expect(copySpy).toHaveBeenCalled()
 

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

@@ -1,7 +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'
+import { Clipboard } from '@angular/cdk/clipboard'
 
 @Component({
   selector: 'pngx-toasts',
@@ -11,7 +11,7 @@ import { ClipboardService } from 'ngx-clipboard'
 export class ToastsComponent implements OnInit, OnDestroy {
   constructor(
     private toastService: ToastService,
-    private clipboardService: ClipboardService
+    private clipboard: Clipboard
   ) {}
 
   private subscription: Subscription
@@ -49,7 +49,7 @@ export class ToastsComponent implements OnInit, OnDestroy {
   }
 
   public copyError(error: any) {
-    this.clipboardService.copy(JSON.stringify(error))
+    this.clipboard.copy(JSON.stringify(error))
     this.copied = true
     setTimeout(() => {
       this.copied = false