Feature: email document button (#8950)

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

@@ -0,0 +1,68 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+</div>
+<div class="modal-body p-0">
+  <ul class="list-group list-group-flush">
+    @if (!shareLinks || shareLinks.length === 0) {
+      <li class="list-group-item fst-italic small text-center text-secondary" i18n>
+        No existing links
+      </li>
+    }
+    @for (link of shareLinks; track link) {
+      <li class="list-group-item">
+        <div class="input-group w-100">
+          <input type="text" class="form-control" aria-label="Share link" [value]="getShareUrl(link)" readonly>
+          @if (link.expiration) {
+            <span class="input-group-text">
+              {{ getDaysRemaining(link) }}
+            </span>
+          }
+          <button type="button" class="btn btn-outline-primary" (click)="copy(link)">
+              @if (copied !== link.id) {
+                <i-bs width="1.2em" height="1.2em" name="clipboard-fill"></i-bs>
+              }
+              @if (copied === link.id) {
+                <i-bs width="1.2em" height="1.2em" name="clipboard-check-fill"></i-bs>
+              }
+              <span class="visually-hidden" i18n>Copy</span>
+          </button>
+          @if (canShare(link)) {
+            <button type="button" class="btn btn-outline-primary" (click)="share(link)">
+              <i-bs width="1.2em" height="1.2em" name="box-arrow-up"></i-bs><span class="visually-hidden" i18n>Share</span>
+            </button>
+          }
+          <button type="button" class="btn btn-outline-danger" (click)="delete(link)">
+            <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="visually-hidden" i18n>Delete</span>
+          </button>
+        </div>
+        <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied === link.id" i18n>Copied!</span>
+      </li>
+    }
+  </ul>
+</div>
+<div class="modal-footer">
+  <div class="input-group w-100">
+    <div class="form-check form-switch ms-auto">
+      <input class="form-check-input" type="checkbox" role="switch" id="versionSwitch" [disabled]="!hasArchiveVersion" [(ngModel)]="useArchiveVersion">
+      <label class="form-check-label" for="versionSwitch" i18n>Share archive version</label>
+    </div>
+  </div>
+  <div class="input-group w-100 mt-2">
+    <label class="input-group-text" for="addLink"><ng-container i18n>Expires</ng-container>:</label>
+    <select class="form-select fs-6" [(ngModel)]="expirationDays">
+      @for (option of EXPIRATION_OPTIONS; track option) {
+        <option [ngValue]="option.value">{{ option.label }}</option>
+      }
+    </select>
+    <button class="btn btn-outline-primary ms-auto" type="button" (click)="createLink()" [disabled]="loading">
+      @if (loading) {
+        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      }
+      @if (!loading) {
+        <i-bs name="plus"></i-bs>
+      }
+      <ng-container i18n>Create</ng-container>
+    </button>
+  </div>
+</div>

src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.scss

@@ -0,0 +1,3 @@
+.copied-badge {
+    right: 15em;
+}

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

@@ -0,0 +1,244 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { FileVersion, ShareLink } from 'src/app/data/share-link'
+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 { ShareLinksDialogComponent } from './share-links-dialog.component'
+
+describe('ShareLinksDialogComponent', () => {
+  let component: ShareLinksDialogComponent
+  let fixture: ComponentFixture<ShareLinksDialogComponent>
+  let shareLinkService: ShareLinkService
+  let toastService: ToastService
+  let httpController: HttpTestingController
+  let clipboard: Clipboard
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ShareLinksDialogComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        NgbActiveModal,
+      ],
+    })
+
+    fixture = TestBed.createComponent(ShareLinksDialogComponent)
+    shareLinkService = TestBed.inject(ShareLinkService)
+    toastService = TestBed.inject(ToastService)
+    httpController = TestBed.inject(HttpTestingController)
+    clipboard = TestBed.inject(Clipboard)
+
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should support refresh to retrieve links', () => {
+    const getSpy = jest.spyOn(shareLinkService, 'getLinksForDocument')
+    component.documentId = 99
+
+    const now = new Date()
+    const expiration7days = new Date()
+    expiration7days.setDate(now.getDate() + 7)
+
+    getSpy.mockReturnValue(
+      of([
+        {
+          id: 1,
+          slug: '1234slug',
+          created: now.toISOString(),
+          document: 99,
+          file_version: FileVersion.Archive,
+          expiration: expiration7days.toISOString(),
+        },
+        {
+          id: 1,
+          slug: '1234slug',
+          created: now.toISOString(),
+          document: 99,
+          file_version: FileVersion.Original,
+          expiration: null,
+        },
+      ])
+    )
+
+    component.refresh()
+    expect(getSpy).toHaveBeenCalled()
+
+    fixture.detectChanges()
+
+    expect(component.shareLinks).toHaveLength(2)
+  })
+
+  it('should show error on refresh if needed', () => {
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(shareLinkService, 'getLinksForDocument')
+      .mockReturnValueOnce(throwError(() => new Error('Unable to get links')))
+    component.documentId = 99
+
+    component.ngOnInit()
+    fixture.detectChanges()
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should support link creation then refresh & copy url', fakeAsync(() => {
+    const createSpy = jest.spyOn(shareLinkService, 'createLinkForDocument')
+    component.documentId = 99
+    component.expirationDays = 7
+    component.useArchiveVersion = false
+
+    const expiration = new Date()
+    expiration.setDate(expiration.getDate() + 7)
+
+    const copySpy = jest.spyOn(clipboard, 'copy')
+    copySpy.mockReturnValue(true)
+    const refreshSpy = jest.spyOn(component, 'refresh')
+
+    component.createLink()
+    expect(createSpy).toHaveBeenCalledWith(99, 'original', expiration)
+
+    httpController.expectOne(`${environment.apiBaseUrl}share_links/`).flush({
+      id: 1,
+      slug: '1234slug',
+      document: 99,
+      expiration: expiration.toISOString(),
+    })
+    fixture.detectChanges()
+    tick(3000)
+
+    expect(refreshSpy).toHaveBeenCalled()
+    expect(copySpy).toHaveBeenCalled()
+    expect(component.copied).toEqual(1)
+    tick(100) // copy timeout
+  }))
+
+  it('should show error on link creation if needed', () => {
+    component.documentId = 99
+    component.expirationDays = 7
+
+    const expiration = new Date()
+    expiration.setDate(expiration.getDate() + 7)
+
+    const toastSpy = jest.spyOn(toastService, 'showError')
+
+    component.createLink()
+
+    httpController
+      .expectOne(`${environment.apiBaseUrl}share_links/`)
+      .flush(
+        { error: 'Share link error' },
+        { status: 500, statusText: 'error' }
+      )
+    fixture.detectChanges()
+
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should support delete links & refresh', () => {
+    const deleteSpy = jest.spyOn(shareLinkService, 'delete')
+    deleteSpy.mockReturnValue(of(true))
+    const refreshSpy = jest.spyOn(component, 'refresh')
+
+    component.delete({ id: 12 } as ShareLink)
+    fixture.detectChanges()
+    expect(deleteSpy).toHaveBeenCalledWith({ id: 12 })
+    expect(refreshSpy).toHaveBeenCalled()
+  })
+
+  it('should show error on delete if needed', () => {
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(shareLinkService, 'delete')
+      .mockReturnValueOnce(throwError(() => new Error('Unable to delete link')))
+    component.delete(null)
+    fixture.detectChanges()
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should format days remaining', () => {
+    const now = new Date()
+    const expiration7days = new Date()
+    expiration7days.setDate(now.getDate() + 7)
+    const expiration1day = new Date()
+    expiration1day.setDate(now.getDate() + 1)
+
+    expect(
+      component.getDaysRemaining({
+        expiration: expiration7days.toISOString(),
+      } as ShareLink)
+    ).toEqual('7 days')
+    expect(
+      component.getDaysRemaining({
+        expiration: expiration1day.toISOString(),
+      } as ShareLink)
+    ).toEqual('1 day')
+  })
+
+  // coverage
+  it('should support share', () => {
+    const link = { slug: '12345slug' } as ShareLink
+    if (!('share' in navigator))
+      Object.defineProperty(navigator, 'share', { value: (obj: any) => {} })
+    // const navigatorSpy = jest.spyOn(navigator, 'share')
+    component.share(link)
+    // expect(navigatorSpy).toHaveBeenCalledWith({ url: component.getShareUrl(link) })
+  })
+
+  it('should correctly generate share URLs', () => {
+    environment.apiBaseUrl = 'http://example.com/api/'
+    expect(component.getShareUrl({ slug: '123abc123' } as any)).toEqual(
+      'http://example.com/share/123abc123'
+    )
+    environment.apiBaseUrl = 'http://example.domainwithapiinit.com/api/'
+    expect(component.getShareUrl({ slug: '123abc123' } as any)).toEqual(
+      'http://example.domainwithapiinit.com/share/123abc123'
+    )
+    environment.apiBaseUrl = 'http://example.domainwithapiinit.com:1234/api/'
+    expect(component.getShareUrl({ slug: '123abc123' } as any)).toEqual(
+      'http://example.domainwithapiinit.com:1234/share/123abc123'
+    )
+    environment.apiBaseUrl =
+      'http://example.domainwithapiinit.com:1234/subpath/api/'
+    expect(component.getShareUrl({ slug: '123abc123' } as any)).toEqual(
+      'http://example.domainwithapiinit.com:1234/subpath/share/123abc123'
+    )
+  })
+
+  it('should disable archive switch & option if no archive available', () => {
+    component.hasArchiveVersion = false
+    component.ngOnInit()
+    fixture.detectChanges()
+    expect(component.useArchiveVersion).toBeFalsy()
+    expect(
+      fixture.debugElement.query(By.css("input[type='checkbox']")).attributes[
+        'ng-reflect-is-disabled'
+      ]
+    ).toBeTruthy()
+  })
+
+  it('should support close', () => {
+    const activeModal = TestBed.inject(NgbActiveModal)
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    component.close()
+    expect(closeSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,169 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import { Component, Input, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { first } from 'rxjs'
+import { FileVersion, ShareLink } from 'src/app/data/share-link'
+import { ShareLinkService } from 'src/app/services/rest/share-link.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+
+@Component({
+  selector: 'pngx-share-links-dialog',
+  templateUrl: './share-links-dialog.component.html',
+  styleUrls: ['./share-links-dialog.component.scss'],
+  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
+})
+export class ShareLinksDialogComponent implements OnInit {
+  EXPIRATION_OPTIONS = [
+    { label: $localize`1 day`, value: 1 },
+    { label: $localize`7 days`, value: 7 },
+    { label: $localize`30 days`, value: 30 },
+    { label: $localize`Never`, value: null },
+  ]
+
+  @Input()
+  title = $localize`Share Links`
+
+  _documentId: number
+
+  @Input()
+  set documentId(id: number) {
+    if (id !== undefined) {
+      this._documentId = id
+      this.refresh()
+    }
+  }
+
+  private _hasArchiveVersion: boolean = true
+
+  @Input()
+  set hasArchiveVersion(value: boolean) {
+    this._hasArchiveVersion = value
+    this.useArchiveVersion = value
+  }
+
+  get hasArchiveVersion(): boolean {
+    return this._hasArchiveVersion
+  }
+
+  shareLinks: ShareLink[]
+
+  loading: boolean = false
+
+  copied: number
+
+  expirationDays: number = 7
+
+  useArchiveVersion: boolean = true
+
+  constructor(
+    private activeModal: NgbActiveModal,
+    private shareLinkService: ShareLinkService,
+    private toastService: ToastService,
+    private clipboard: Clipboard
+  ) {}
+
+  ngOnInit(): void {
+    if (this._documentId !== undefined) this.refresh()
+  }
+
+  refresh() {
+    if (this._documentId === undefined) return
+    this.loading = true
+    this.shareLinkService
+      .getLinksForDocument(this._documentId)
+      .pipe(first())
+      .subscribe({
+        next: (results) => {
+          this.loading = false
+          this.shareLinks = results
+        },
+        error: (e) => {
+          this.toastService.showError(
+            $localize`Error retrieving links`,
+            10000,
+            e
+          )
+        },
+      })
+  }
+
+  getShareUrl(link: ShareLink): string {
+    const apiURL = new URL(environment.apiBaseUrl)
+    return `${apiURL.origin}${apiURL.pathname.replace(/\/api\/$/, '/share/')}${
+      link.slug
+    }`
+  }
+
+  getDaysRemaining(link: ShareLink): string {
+    const days: number = Math.round(
+      (Date.parse(link.expiration) - Date.now()) / (1000 * 60 * 60 * 24)
+    )
+    return days === 1 ? $localize`1 day` : $localize`${days} days`
+  }
+
+  copy(link: ShareLink) {
+    const success = this.clipboard.copy(this.getShareUrl(link))
+    if (success) {
+      this.copied = link.id
+      setTimeout(() => {
+        this.copied = null
+      }, 3000)
+    }
+  }
+
+  canShare(link: ShareLink): boolean {
+    return (
+      navigator?.canShare && navigator.canShare({ url: this.getShareUrl(link) })
+    )
+  }
+
+  share(link: ShareLink) {
+    navigator.share({ url: this.getShareUrl(link) })
+  }
+
+  delete(link: ShareLink) {
+    this.shareLinkService.delete(link).subscribe({
+      next: () => {
+        this.refresh()
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error deleting link`, 10000, e)
+      },
+    })
+  }
+
+  createLink() {
+    let expiration
+    if (this.expirationDays) {
+      expiration = new Date()
+      expiration.setDate(expiration.getDate() + this.expirationDays)
+    }
+    this.loading = true
+    this.shareLinkService
+      .createLinkForDocument(
+        this._documentId,
+        this.useArchiveVersion ? FileVersion.Archive : FileVersion.Original,
+        expiration
+      )
+      .subscribe({
+        next: (result) => {
+          this.loading = false
+          setTimeout(() => {
+            this.copy(result)
+          }, 10)
+          this.refresh()
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError($localize`Error creating link`, 10000, e)
+        },
+      })
+  }
+
+  close() {
+    this.activeModal.close()
+  }
+}