Feature: sharelink bundles (#11682)

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

@@ -0,0 +1,129 @@
+<div class="modal-header">
+  <h4 class="modal-title">{{ title }}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
+</div>
+<div class="modal-body">
+  @if (!createdBundle) {
+    <form [formGroup]="form" class="d-flex flex-column gap-3">
+      <div>
+        <p class="mb-1">
+          <ng-container i18n>Selected documents:</ng-container>
+          {{ selectionCount }}
+        </p>
+        @if (documentPreview.length > 0) {
+          <ul class="list-unstyled small mb-0">
+            @for (doc of documentPreview; track doc.id) {
+              <li>
+                <strong>{{ doc.title | documentTitle }}</strong>
+              </li>
+            }
+            @if (selectionCount > documentPreview.length) {
+              <li>
+                <ng-container i18n>+ {{ selectionCount - documentPreview.length }} more…</ng-container>
+              </li>
+            }
+          </ul>
+        }
+      </div>
+
+      <div class="d-flex align-items-center justify-content-between">
+        <div class="input-group">
+          <label class="input-group-text" for="expirationDays"><ng-container i18n>Expires</ng-container>:</label>
+          <select class="form-select" id="expirationDays" formControlName="expirationDays">
+            @for (option of expirationOptions; track option.value) {
+              <option [ngValue]="option.value">{{ option.label }}</option>
+            }
+          </select>
+        </div>
+        <div class="form-check form-switch w-100 ms-3">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            role="switch"
+            id="shareArchiveSwitch"
+            formControlName="shareArchiveVersion"
+            aria-checked="{{ shareArchiveVersion }}"
+          />
+          <label class="form-check-label" for="shareArchiveSwitch" i18n>Share archive version (if available)</label>
+        </div>
+      </div>
+    </form>
+  } @else {
+    <div class="d-flex flex-column gap-3">
+      <div class="alert alert-success mb-0" role="status">
+        <h6 class="alert-heading mb-1" i18n>Share link bundle requested</h6>
+        <p class="mb-0 small" i18n>
+          You can copy the share link below or open the manager to monitor progress. The link will start working once the bundle is ready.
+        </p>
+      </div>
+      <dl class="row mb-0 small">
+        <dt class="col-sm-4" i18n>Status</dt>
+        <dd class="col-sm-8">
+          <span class="badge text-bg-secondary text-uppercase">{{ statusLabel(createdBundle.status) }}</span>
+        </dd>
+        <dt class="col-sm-4" i18n>Slug</dt>
+        <dd class="col-sm-8"><code>{{ createdBundle.slug }}</code></dd>
+        <dt class="col-sm-4" i18n>Link</dt>
+        <dd class="col-sm-8">
+          <div class="input-group input-group-sm">
+            <input class="form-control" type="text" [value]="getShareUrl(createdBundle)" readonly>
+            <button
+              class="btn btn-outline-primary"
+              type="button"
+              (click)="copy(createdBundle)"
+            >
+              @if (copied) {
+                <i-bs name="clipboard-check"></i-bs>
+              }
+              @if (!copied) {
+                <i-bs name="clipboard"></i-bs>
+              }
+              <span class="visually-hidden" i18n>Copy link</span>
+            </button>
+          </div>
+        </dd>
+        <dt class="col-sm-4" i18n>Documents</dt>
+        <dd class="col-sm-8">{{ createdBundle.document_count }}</dd>
+        <dt class="col-sm-4" i18n>Expires</dt>
+        <dd class="col-sm-8">
+          @if (createdBundle.expiration) {
+            {{ createdBundle.expiration | date: 'short' }}
+          }
+          @if (!createdBundle.expiration) {
+            <span i18n>Never</span>
+          }
+        </dd>
+        <dt class="col-sm-4" i18n>File version</dt>
+        <dd class="col-sm-8">{{ fileVersionLabel(createdBundle.file_version) }}</dd>
+        @if (createdBundle.size_bytes !== undefined && createdBundle.size_bytes !== null) {
+          <dt class="col-sm-4" i18n>Size</dt>
+          <dd class="col-sm-8">{{ createdBundle.size_bytes | fileSize }}</dd>
+        }
+      </dl>
+    </div>
+  }
+</div>
+<div class="modal-footer">
+  <div class="d-flex align-items-center gap-2 w-100">
+    <div class="text-light fst-italic small">
+      <ng-container i18n>A zip file containing the selected documents will be created for this share link bundle. This process happens in the background and may take some time, especially for large bundles.</ng-container>
+    </div>
+    <button type="button" class="btn btn-outline-secondary btn-sm ms-auto" (click)="cancel()">{{ cancelBtnCaption }}</button>
+    @if (createdBundle) {
+      <button type="button" class="btn btn-outline-secondary btn-sm text-nowrap" (click)="openManage()" i18n>Manage share link bundles</button>
+    }
+
+    @if (!createdBundle) {
+      <button
+        type="button"
+        class="btn btn-primary btn-sm d-inline-flex align-items-center gap-2 text-nowrap"
+        (click)="submit()"
+        [disabled]="loading || !buttonsEnabled">
+        @if (loading) {
+          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+        }
+        {{ btnCaption }}
+      </button>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,161 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { FileVersion } from 'src/app/data/share-link'
+import {
+  ShareLinkBundleStatus,
+  ShareLinkBundleSummary,
+} from 'src/app/data/share-link-bundle'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ShareLinkBundleDialogComponent } from './share-link-bundle-dialog.component'
+
+class MockToastService {
+  showInfo = jest.fn()
+  showError = jest.fn()
+}
+
+describe('ShareLinkBundleDialogComponent', () => {
+  let component: ShareLinkBundleDialogComponent
+  let fixture: ComponentFixture<ShareLinkBundleDialogComponent>
+  let clipboard: Clipboard
+  let toastService: MockToastService
+  let activeModal: NgbActiveModal
+  let originalApiBaseUrl: string
+
+  beforeEach(() => {
+    originalApiBaseUrl = environment.apiBaseUrl
+    toastService = new MockToastService()
+
+    TestBed.configureTestingModule({
+      imports: [
+        ShareLinkBundleDialogComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        NgbActiveModal,
+        { provide: ToastService, useValue: toastService },
+      ],
+    })
+
+    fixture = TestBed.createComponent(ShareLinkBundleDialogComponent)
+    component = fixture.componentInstance
+    clipboard = TestBed.inject(Clipboard)
+    activeModal = TestBed.inject(NgbActiveModal)
+    fixture.detectChanges()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    environment.apiBaseUrl = originalApiBaseUrl
+  })
+
+  it('builds payload and emits confirm on submit', () => {
+    const confirmSpy = jest.spyOn(component.confirmClicked, 'emit')
+    component.documents = [
+      { id: 1, title: 'Doc 1' } as any,
+      { id: 2, title: 'Doc 2' } as any,
+    ]
+    component.form.setValue({
+      shareArchiveVersion: false,
+      expirationDays: 3,
+    })
+
+    component.submit()
+
+    expect(component.payload).toEqual({
+      document_ids: [1, 2],
+      file_version: FileVersion.Original,
+      expiration_days: 3,
+    })
+    expect(component.buttonsEnabled).toBe(false)
+    expect(confirmSpy).toHaveBeenCalled()
+
+    component.form.setValue({
+      shareArchiveVersion: true,
+      expirationDays: 7,
+    })
+    component.submit()
+
+    expect(component.payload).toEqual({
+      document_ids: [1, 2],
+      file_version: FileVersion.Archive,
+      expiration_days: 7,
+    })
+  })
+
+  it('ignores submit when bundle already created', () => {
+    component.createdBundle = { id: 1 } as ShareLinkBundleSummary
+    const confirmSpy = jest.spyOn(component, 'confirm')
+    component.submit()
+    expect(confirmSpy).not.toHaveBeenCalled()
+  })
+
+  it('limits preview to ten documents', () => {
+    const docs = Array.from({ length: 12 }).map((_, index) => ({
+      id: index + 1,
+    }))
+    component.documents = docs as any
+
+    expect(component.selectionCount).toBe(12)
+    expect(component.documentPreview).toHaveLength(10)
+    expect(component.documentPreview[0].id).toBe(1)
+  })
+
+  it('copies share link and resets state after timeout', fakeAsync(() => {
+    const copySpy = jest.spyOn(clipboard, 'copy').mockReturnValue(true)
+    const bundle = {
+      slug: 'bundle-slug',
+      status: ShareLinkBundleStatus.Ready,
+    } as ShareLinkBundleSummary
+
+    component.copy(bundle)
+
+    expect(copySpy).toHaveBeenCalledWith(component.getShareUrl(bundle))
+    expect(component.copied).toBe(true)
+    expect(toastService.showInfo).toHaveBeenCalled()
+
+    tick(3000)
+    expect(component.copied).toBe(false)
+  }))
+
+  it('generates share URLs based on API base URL', () => {
+    environment.apiBaseUrl = 'https://example.com/api/'
+    expect(
+      component.getShareUrl({ slug: 'abc' } as ShareLinkBundleSummary)
+    ).toBe('https://example.com/share/abc')
+  })
+
+  it('opens manage dialog when callback provided', () => {
+    const manageSpy = jest.fn()
+    component.onOpenManage = manageSpy
+    component.openManage()
+    expect(manageSpy).toHaveBeenCalled()
+  })
+
+  it('falls back to cancel when manage callback missing', () => {
+    const cancelSpy = jest.spyOn(component, 'cancel')
+    component.onOpenManage = undefined
+    component.openManage()
+    expect(cancelSpy).toHaveBeenCalled()
+  })
+
+  it('maps status and file version labels', () => {
+    expect(component.statusLabel(ShareLinkBundleStatus.Processing)).toContain(
+      'Processing'
+    )
+    expect(component.fileVersionLabel(FileVersion.Archive)).toContain('Archive')
+  })
+
+  it('closes dialog when cancel invoked', () => {
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    component.cancel()
+    expect(closeSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,118 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import { CommonModule } from '@angular/common'
+import { Component, Input, inject } from '@angular/core'
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Document } from 'src/app/data/document'
+import {
+  FileVersion,
+  SHARE_LINK_EXPIRATION_OPTIONS,
+} from 'src/app/data/share-link'
+import {
+  SHARE_LINK_BUNDLE_FILE_VERSION_LABELS,
+  SHARE_LINK_BUNDLE_STATUS_LABELS,
+  ShareLinkBundleCreatePayload,
+  ShareLinkBundleStatus,
+  ShareLinkBundleSummary,
+} from 'src/app/data/share-link-bundle'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
+import { FileSizePipe } from 'src/app/pipes/file-size.pipe'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-share-link-bundle-dialog',
+  templateUrl: './share-link-bundle-dialog.component.html',
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    FileSizePipe,
+    DocumentTitlePipe,
+  ],
+  providers: [],
+})
+export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
+  private readonly formBuilder = inject(FormBuilder)
+  private readonly clipboard = inject(Clipboard)
+  private readonly toastService = inject(ToastService)
+
+  private _documents: Document[] = []
+
+  selectionCount = 0
+  documentPreview: Document[] = []
+  form: FormGroup = this.formBuilder.group({
+    shareArchiveVersion: true,
+    expirationDays: [7],
+  })
+  payload: ShareLinkBundleCreatePayload | null = null
+
+  readonly expirationOptions = SHARE_LINK_EXPIRATION_OPTIONS
+
+  createdBundle: ShareLinkBundleSummary | null = null
+  copied = false
+  onOpenManage?: () => void
+  readonly statuses = ShareLinkBundleStatus
+
+  constructor() {
+    super()
+    this.loading = false
+    this.title = $localize`Create share link bundle`
+    this.btnCaption = $localize`Create link`
+  }
+
+  @Input()
+  set documents(docs: Document[]) {
+    this._documents = docs.concat()
+    this.selectionCount = this._documents.length
+    this.documentPreview = this._documents.slice(0, 10)
+  }
+
+  submit() {
+    if (this.createdBundle) return
+    this.payload = {
+      document_ids: this._documents.map((doc) => doc.id),
+      file_version: this.form.value.shareArchiveVersion
+        ? FileVersion.Archive
+        : FileVersion.Original,
+      expiration_days: this.form.value.expirationDays,
+    }
+    this.buttonsEnabled = false
+    super.confirm()
+  }
+
+  getShareUrl(bundle: ShareLinkBundleSummary): string {
+    const apiURL = new URL(environment.apiBaseUrl)
+    return `${apiURL.origin}${apiURL.pathname.replace(/\/api\/$/, '/share/')}${
+      bundle.slug
+    }`
+  }
+
+  copy(bundle: ShareLinkBundleSummary): void {
+    const success = this.clipboard.copy(this.getShareUrl(bundle))
+    if (success) {
+      this.copied = true
+      this.toastService.showInfo($localize`Share link copied to clipboard.`)
+      setTimeout(() => {
+        this.copied = false
+      }, 3000)
+    }
+  }
+
+  openManage(): void {
+    if (this.onOpenManage) {
+      this.onOpenManage()
+    } else {
+      this.cancel()
+    }
+  }
+
+  statusLabel(status: ShareLinkBundleSummary['status']): string {
+    return SHARE_LINK_BUNDLE_STATUS_LABELS[status] ?? status
+  }
+
+  fileVersionLabel(version: FileVersion): string {
+    return SHARE_LINK_BUNDLE_FILE_VERSION_LABELS[version] ?? version
+  }
+}