From 6fb4daf03e593706d123584398cd5e1e2f85bc66 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 25 Jan 2024 13:22:03 -0800
Subject: [PATCH] Fix: tweak doc detail component behavior while awaiting
 metadata (#5546)

---
 .../document-detail.component.html            | 67 ++++++++++---------
 .../document-detail.component.spec.ts         |  1 +
 .../document-detail.component.ts              |  2 +
 3 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 038a44dbe..a3890f961 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -324,44 +324,45 @@
         <ng-container i18n>Loading...</ng-container>
       </div>
     </div>
-  }
-  @switch (contentRenderType) {
-    @case (ContentRenderType.PDF) {
-      @if (!useNativePdfViewer) {
-        <div class="preview-sticky pdf-viewer-container">
-          <pngx-pdf-viewer
-            [src]="{ url: previewUrl, password: password }"
-            [original-size]="false"
-            [show-borders]="true"
-            [show-all]="true"
-            [(page)]="previewCurrentPage"
-            [zoom-scale]="previewZoomScale"
-            [zoom]="previewZoomSetting"
-            (error)="onError($event)"
-            (after-load-complete)="pdfPreviewLoaded($event)">
-          </pngx-pdf-viewer>
+  } @else {
+    @switch (contentRenderType) {
+      @case (ContentRenderType.PDF) {
+        @if (!useNativePdfViewer) {
+          <div class="preview-sticky pdf-viewer-container">
+            <pngx-pdf-viewer
+              [src]="{ url: previewUrl, password: password }"
+              [original-size]="false"
+              [show-borders]="true"
+              [show-all]="true"
+              [(page)]="previewCurrentPage"
+              [zoom-scale]="previewZoomScale"
+              [zoom]="previewZoomSetting"
+              (error)="onError($event)"
+              (after-load-complete)="pdfPreviewLoaded($event)">
+            </pngx-pdf-viewer>
+          </div>
+        } @else {
+          <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
+        }
+      }
+      @case (ContentRenderType.Text) {
+        <div class="preview-sticky bg-light p-3 overflow-auto" width="100%">{{previewText}}</div>
+      }
+      @case (ContentRenderType.Image) {
+        <div class="preview-sticky">
+          <img [src]="previewUrl | safeUrl" width="100%" height="100%" alt="{{title}}" />
         </div>
-      } @else {
+      }
+      @case (ContentRenderType.Other) {
         <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
       }
     }
-    @case (ContentRenderType.Text) {
-      <div class="preview-sticky bg-light p-3 overflow-auto" width="100%">{{previewText}}</div>
-    }
-    @case (ContentRenderType.Image) {
-      <div class="preview-sticky">
-        <img [src]="previewUrl | safeUrl" width="100%" height="100%" alt="{{title}}" />
+    @if (requiresPassword) {
+      <div class="password-prompt">
+        <form>
+          <input autocomplete="" autofocus="true" class="form-control" i18n-placeholder placeholder="Enter Password" type="password" (keyup)="onPasswordKeyUp($event)" />
+        </form>
       </div>
     }
-    @case (ContentRenderType.Other) {
-      <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
-    }
-  }
-  @if (requiresPassword) {
-    <div class="password-prompt">
-      <form>
-        <input autocomplete="" autofocus="true" class="form-control" i18n-placeholder placeholder="Enter Password" type="password" (keyup)="onPasswordKeyUp($event)" />
-      </form>
-    </div>
   }
 </ng-template>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
index cccf2677b..af0e0e78e 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -681,6 +681,7 @@ describe('DocumentDetailComponent', () => {
 
   it('should support Enter key in password field', () => {
     initNormally()
+    component.metadata = { has_archive_version: true }
     component.onError({ name: 'PasswordException' }) // normally dispatched by pdf viewer
     fixture.detectChanges()
     expect(component.password).toBeUndefined()
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 18e6b1211..0ce9fa007 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -82,6 +82,7 @@ enum ContentRenderType {
   Image = 'image',
   Text = 'text',
   Other = 'other',
+  Unknown = 'unknown',
 }
 
 enum ZoomSetting {
@@ -211,6 +212,7 @@ export class DocumentDetailComponent
   }
 
   get contentRenderType(): ContentRenderType {
+    if (!this.metadata) return ContentRenderType.Unknown
     const contentType = this.metadata?.has_archive_version
       ? 'application/pdf'
       : this.metadata?.original_mime_type