From 338fa2b6e75629d65a5acaee7075fef6f209cb6f Mon Sep 17 00:00:00 2001
From: Nicolas Molina <hi@nicobytes.com>
Date: Wed, 20 Nov 2024 10:45:35 -0400
Subject: [PATCH] chore(edit-content): Fix error with selecting files #30060

---
 .../dot-file-field-preview.component.html     | 23 +++---
 .../dot-file-field-preview.component.ts       | 78 ++++++++-----------
 ...dot-edit-content-file-field.component.html |  1 -
 .../dot-edit-content-file-field.const.ts      |  8 ++
 .../lib/services/dot-edit-content.service.ts  |  4 +-
 5 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
index 1c11b70fa56e..f79f48737967 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
@@ -1,24 +1,23 @@
-@let previewFile = $previewFile();
-@let metadata = $metadata();
-@let downloadLink = $downloadLink();
+@let fileInfo = $fileInfo();
+@let metadata = fileInfo.metadata;
 
 <div class="preview-container" [class.preview-container--fade]="metadata?.editableAsText">
     @if (metadata?.editableAsText) {
         <div class="preview-code_container" data-testId="code-preview">
-            <code>{{ $content() }}</code>
+            <code>{{ fileInfo.content }}</code>
         </div>
     } @else {
         <div class="preview-image__container">
-            @if (previewFile.source === 'temp') {
+            @if (fileInfo.source === 'temp') {
                 <dot-temp-file-thumbnail
-                    [tempFile]="previewFile.file"
+                    [tempFile]="fileInfo.file"
                     [iconSize]="'48px'"
                     data-testId="temp-file-thumbnail" />
             } @else {
                 <dot-contentlet-thumbnail
-                    [fieldVariable]="$fieldVariable()"
+                    [fieldVariable]="fileInfo.contentType"
                     [iconSize]="'48px'"
-                    [contentlet]="previewFile.file"
+                    [contentlet]="fileInfo.file"
                     [playableVideo]="true"
                     data-testId="contentlet-thumbnail" />
             }
@@ -56,12 +55,12 @@
             data-testId="info-btn"
             icon="pi pi-info" />
 
-        @if (downloadLink) {
+        @if (fileInfo.downloadLink) {
             <p-button
                 styleClass="p-button-rounded p-button-sm p-button-outlined"
                 data-testId="download-btn"
                 icon="pi pi-download"
-                (click)="downloadAsset(downloadLink)" />
+                (click)="downloadAsset(fileInfo.downloadLink)" />
         }
     </div>
     <div class="preview-metadata__actions">
@@ -79,12 +78,12 @@
             styleClass="p-button-rounded"
             data-testId="info-btn-responsive"
             icon="pi pi-info" />
-        @if (downloadLink) {
+        @if (fileInfo.downloadLink) {
             <p-button
                 styleClass="p-button-rounded"
                 data-testId="download-btn-responsive"
                 icon="pi pi-download"
-                (click)="downloadAsset(downloadLink)" />
+                (click)="downloadAsset(fileInfo.downloadLink)" />
         }
         <p-button
             (click)="removeFile.emit()"
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
index 436126400073..4fb45d02cd7a 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
@@ -18,7 +18,7 @@ import { DialogModule } from 'primeng/dialog';
 import { catchError } from 'rxjs/operators';
 
 import { DotResourceLinksService } from '@dotcms/data-access';
-import { DotCMSBaseTypesContentTypes, DotCMSContentlet } from '@dotcms/dotcms-models';
+import { DotCMSBaseTypesContentTypes, DotCMSContentlet, DotFileMetadata } from '@dotcms/dotcms-models';
 import {
     DotPreviewResourceLink,
     UploadedFile
@@ -30,8 +30,16 @@ import {
     DotCopyButtonComponent
 } from '@dotcms/ui';
 
+import { CONTENT_TYPES, DEFAULT_CONTENT_TYPE } from '../../dot-edit-content-file-field.const';
 import { getFileMetadata } from '../../utils';
 
+type FileInfo = UploadedFile & {
+    contentType: string;
+    downloadLink: string;
+    content: string | null;
+    metadata: DotFileMetadata;
+};
+
 @Component({
     selector: 'dot-file-field-preview',
     standalone: true,
@@ -57,13 +65,6 @@ export class DotFileFieldPreviewComponent implements OnInit {
      * @memberof DotFileFieldPreviewComponent
      */
     $previewFile = input.required<UploadedFile>({ alias: 'previewFile' });
-
-    /**
-     * Field variable
-     *
-     * @memberof DotFileFieldPreviewComponent
-     */
-    $fieldVariable = input.required<string>({ alias: 'fieldVariable' });
     /**
      * Remove file
      *
@@ -77,47 +78,36 @@ export class DotFileFieldPreviewComponent implements OnInit {
      */
     $showDialog = signal(false);
     /**
-     * File metadata
-     *
-     * @memberof DotFileFieldPreviewComponent
-     */
-    $metadata = computed(() => {
-        const previewFile = this.$previewFile();
-        if (previewFile.source === 'temp') {
-            return previewFile.file.metadata;
-        }
-
-        return getFileMetadata(previewFile.file);
-    });
-    /**
-     * Content
+     * File info
      *
      * @memberof DotFileFieldPreviewComponent
      */
-    $content = computed(() => {
+    $fileInfo = computed<FileInfo>(() => {
         const previewFile = this.$previewFile();
-        if (previewFile.source === 'contentlet') {
-            return previewFile.file.content;
-        }
-
-        return null;
-    });
-    /**
-     * Download link
-     *
-     * @memberof DotFileFieldPreviewComponent
-     */
-    $downloadLink = computed(() => {
-        const previewFile = this.$previewFile();
-        const fieldVariable = this.$fieldVariable();
 
         if (previewFile.source === 'contentlet') {
             const file = previewFile.file;
 
-            return `/contentAsset/raw-data/${file.inode}/${fieldVariable}?byInode=true&force_download=true`;
+            const contentType = CONTENT_TYPES[file.contentType] || DEFAULT_CONTENT_TYPE;
+
+            return {
+                source: previewFile.source,
+                file,
+                content: file.content,
+                contentType,
+                downloadLink: `/contentAsset/raw-data/${file.inode}/${contentType}?byInode=true&force_download=true`,
+                metadata: getFileMetadata(file)
+            };
         }
 
-        return null;
+        return {
+            source: previewFile.source,
+            file: previewFile.file,
+            content: null,
+            contentType: DEFAULT_CONTENT_TYPE,
+            downloadLink: null,
+            metadata: previewFile.file.metadata
+        };
     });
 
     /**
@@ -135,10 +125,10 @@ export class DotFileFieldPreviewComponent implements OnInit {
      * @memberof DotFileFieldPreviewComponent
      */
     ngOnInit() {
-        const previewFile = this.$previewFile();
+        const fileInfo = this.$fileInfo();
 
-        if (previewFile.source === 'contentlet') {
-            this.fetchResourceLinks(previewFile.file);
+        if (fileInfo.source === 'contentlet') {
+            this.fetchResourceLinks(fileInfo.file, fileInfo.contentType);
         }
     }
 
@@ -169,10 +159,10 @@ export class DotFileFieldPreviewComponent implements OnInit {
      * @param {DotCMSContentlet} contentlet The contentlet to fetch the resource links for.
      * @memberof DotFileFieldPreviewComponent
      */
-    private fetchResourceLinks(contentlet: DotCMSContentlet): void {
+    private fetchResourceLinks(contentlet: DotCMSContentlet, contentType: string): void {
         this.#dotResourceLinksService
             .getFileResourceLinks({
-                fieldVariable: this.$fieldVariable(),
+                fieldVariable: contentType,
                 inodeOrIdentifier: contentlet.identifier
             })
             .pipe(
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
index 26950618432e..d80bdfcb1e4a 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.html
@@ -97,7 +97,6 @@
             @let uploadedFile = store.uploadedFile();
             @if (uploadedFile) {
                 <dot-file-field-preview
-                    [fieldVariable]="'asset'"
                     (removeFile)="store.removeFile()"
                     [previewFile]="uploadedFile" />
             }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts
index 24b69514ecc2..b7ef4d318065 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts
@@ -37,3 +37,11 @@ export const INPUT_CONFIG: ConfigActions = {
         maxFileSize: null
     }
 };
+
+export const DEFAULT_CONTENT_TYPE = 'asset';
+
+
+export const CONTENT_TYPES = {
+    'DotAsset': 'asset',
+    'FileAsset': 'fileAsset',
+};
diff --git a/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts b/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts
index ee25b746b86f..635945a905b9 100644
--- a/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts
+++ b/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts
@@ -232,11 +232,11 @@ export class DotEditContentService {
             hostFolderId: folderId,
             showLinks: false,
             showDotAssets: true,
-            showPages: true,
+            showPages: false,
             showFiles: true,
             showFolders: false,
             showWorking: true,
-            showArchived: true,
+            showArchived: false,
             sortByDesc: true,
             mimeTypes
         };