From 68ee4502f800ee9f93cb47cf3a0100136ac82d53 Mon Sep 17 00:00:00 2001
From: Nicolas Molina <hi@nicobytes.com>
Date: Mon, 9 Sep 2024 18:24:11 -0400
Subject: [PATCH] chore(block-editor): fix error #29672

---
 .../dot-upload-asset.component.html           | 34 ++++++++-----------
 .../dot-upload-asset.component.spec.ts        |  6 ++++
 core-web/yarn.lock                            | 25 +++++++++-----
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.html b/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.html
index c9e163193bb9..74fee248fea8 100644
--- a/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.html
@@ -1,27 +1,23 @@
-<p-fileUpload
-    *ngIf="status === 'SELECT'; else preview"
-    (onSelect)="onSelectFile($event.files)"
-    [accept]="type + '/*'"
-    [customUpload]="true"
-    chooseLabel="browse files"
-    mode="basic"></p-fileUpload>
-
-<ng-template #preview>
+@if (status === 'SELECT') {
+    <p-fileUpload
+        (onSelect)="onSelectFile($event.files)"
+        [accept]="type + '/*'"
+        [customUpload]="true"
+        chooseLabel="browse files"
+        mode="basic" />
+} @else {
     <div class="preview-container">
-        <dot-asset-preview
-            *ngIf="status === 'UPLOAD'"
-            [type]="type"
-            [file]="file"
-            [src]="src"></dot-asset-preview>
-
-        <ng-template *ngIf="status === 'ERROR'" #errorTemplate>
+        @if (status === 'UPLOAD') {
+            <dot-asset-preview [type]="type" [file]="file" [src]="src" />
+        }
+        @if (status === 'ERROR') {
             <span class="error">{{ error }}</span>
-        </ng-template>
+        }
     </div>
 
     <div class="action-container">
         <div class="loading-message">
-            <dot-spinner [size]="'30px'"></dot-spinner>
+            <dot-spinner [size]="'30px'" />
             <span (@shakeit.done)="shakeEnd($event)" class="warning" [@shakeit]="animation">
                 {{ errorMessage }}
             </span>
@@ -30,4 +26,4 @@
             Cancel
         </button>
     </div>
-</ng-template>
+}
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.spec.ts b/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.spec.ts
index 169a4be0809e..4f08ee0909ec 100644
--- a/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.spec.ts
+++ b/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/dot-upload-asset.component.spec.ts
@@ -3,6 +3,9 @@ import { of } from 'rxjs';
 import { Component, DebugElement, EventEmitter, Input, Output } from '@angular/core';
 import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { By, DomSanitizer } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ButtonModule } from 'primeng/button';
 
 import { delay } from 'rxjs/operators';
 
@@ -55,6 +58,7 @@ describe('DotUploadAssetComponent', () => {
                 FileUploadMockComponent,
                 DotSpinnerMockComponent
             ],
+            imports: [BrowserAnimationsModule, ButtonModule],
             providers: [
                 {
                     provide: DotUploadFileService,
@@ -186,6 +190,8 @@ describe('DotUploadAssetComponent', () => {
             );
             const emitSpy = jest.spyOn(component.uploadedFile, 'emit');
 
+            console.log(de.nativeElement.innerHTML);
+
             // Click on Upload Button
             const btn = de.query(By.css('[data-test-id="upload-btn"]'));
             const btnBack = de.query(By.css('[data-test-id="back-btn"]'));
diff --git a/core-web/yarn.lock b/core-web/yarn.lock
index 0995b400a72c..061814888fa7 100644
--- a/core-web/yarn.lock
+++ b/core-web/yarn.lock
@@ -5826,10 +5826,10 @@
   dependencies:
     "@types/jasmine" "*"
 
-"@types/jest@29.5.10":
-  version "29.5.10"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.10.tgz#a10fc5bab9e426081c12b2ef73d24d4f0c9b7f50"
-  integrity sha512-tE4yxKEphEyxj9s4inideLHktW/x6DwesIwWZ9NN1FKf9zbJYsnhBoA9vrHA/IuIOKwPa5PcFBNV4lpMIOEzyQ==
+"@types/jest@29.5.12":
+  version "29.5.12"
+  resolved "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz#7f7dc6eb4cf246d2474ed78744b05d06ce025544"
+  integrity sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==
   dependencies:
     expect "^29.0.0"
     pretty-format "^29.0.0"
@@ -20995,7 +20995,14 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^7.0.1:
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -21967,10 +21974,10 @@ undici-types@~6.13.0:
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5"
   integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==
 
-undici@6.11.1:
-  version "6.11.1"
-  resolved "https://registry.yarnpkg.com/undici/-/undici-6.11.1.tgz#75ab573677885b421ca2e6f5f17ff1185b24c68d"
-  integrity sha512-KyhzaLJnV1qa3BSHdj4AZ2ndqI0QWPxYzaIOio0WzcEJB9gvuysprJSLtpvc2D9mhR9jPDUk7xlJlZbH2KR5iw==
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"