removced prefetch of images (#7636)

* removced prefetch of images * fixed e2e
huridocs · Jan 31, 2025 · 6f765c7 · 6f765c7
1 parent e7eae8f
commit 6f765c7
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 63 deletions.
diff --git a/app/react/Forms/components/specs/MediaField.spec.tsx b/app/react/Forms/components/specs/MediaField.spec.tsx
@@ -174,9 +174,7 @@ describe('MediaField', () => {
       await render(imageProps);
       const img = renderResult.container.getElementsByTagName('img')[0];
       fireEvent.error(img);
-      expect(
-        await screen.findByText('This file type is not supported on media fields')
-      ).toBeInTheDocument();
+      expect(await screen.findByText('Error loading your image')).toBeInTheDocument();
     });
   });
 });
diff --git a/app/react/Metadata/components/ImageViewer.tsx b/app/react/Metadata/components/ImageViewer.tsx
@@ -1,50 +1,25 @@
 import { Translate } from 'app/I18N';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 interface ImageViewerProps {
+  key?: string;
+  className?: string;
   src: string;
   alt: string;
-  className?: string;
 }
 
-const ImageViewer = ({ alt, src, className }: ImageViewerProps) => {
-  const [imageExists, setImageExists] = useState<boolean | null>(null);
+const ImageViewer = (props: ImageViewerProps) => {
   const [errorFlag, setErrorFlag] = useState(false);
 
-  useEffect(() => {
-    const checkImageExists = async (url: string) => {
-      try {
-        const response = await fetch(url, { method: 'GET' });
-        setImageExists(Boolean(response.ok));
-      } catch (error) {
-        setImageExists(false);
-      }
-    };
-
-    // eslint-disable-next-line no-void
-    void checkImageExists(src);
-  }, [src]);
-  if (imageExists === false) {
-    return (
-      <div className="media-error">
-        <Translate>Image not found</Translate>
-      </div>
-    );
-  }
-
   if (errorFlag) {
     return (
       <div className="media-error">
-        <Translate>This file type is not supported on media fields</Translate>
+        <Translate>Error loading your image</Translate>
       </div>
     );
   }
 
-  if (imageExists === null) {
-    return <Translate>Loading</Translate>;
-  }
-
-  return <img className={className} src={src} onError={() => setErrorFlag(true)} alt={alt} />;
+  return <img {...props} onError={() => setErrorFlag(true)} alt={props.alt} />;
 };
 
 export { ImageViewer, type ImageViewerProps };
diff --git a/app/react/Metadata/components/specs/ImageViewer.spec.tsx b/app/react/Metadata/components/specs/ImageViewer.spec.tsx
@@ -28,13 +28,6 @@ describe('ImageViewer', () => {
     });
   };
 
-  it('should render loading state initially', async () => {
-    //delay the fetch response
-    (global.fetch as jest.Mock).mockImplementation(async () => new Promise(() => {}));
-    await renderComponent();
-    expect(screen.getByText('Loading')).toBeInTheDocument();
-  });
-
   it('should render the image if it exists', async () => {
     (global.fetch as jest.Mock).mockResolvedValue({ ok: true });
 
@@ -45,14 +38,6 @@ describe('ImageViewer', () => {
     expect(img).toHaveAttribute('src', props.src);
   });
 
-  it('should render an error message if the image does not exist', async () => {
-    (global.fetch as jest.Mock).mockResolvedValue({ ok: false });
-
-    await renderComponent();
-
-    expect(screen.getByText('Image not found')).toBeInTheDocument();
-  });
-
   it('should handle image load errors with onError', async () => {
     (global.fetch as jest.Mock).mockResolvedValue({ ok: true });
 
@@ -66,6 +51,6 @@ describe('ImageViewer', () => {
       img.dispatchEvent(new Event('error'));
     });
 
-    expect(screen.getByText('This file type is not supported on media fields')).toBeInTheDocument();
+    expect(screen.getByText('Error loading your image')).toBeInTheDocument();
   });
 });
diff --git a/contents/ui-translations/ar.csv b/contents/ui-translations/ar.csv
@@ -307,6 +307,7 @@ Entity types,أنواع الكيانات
 Entity updated,Entity updated
 Error,خطأ
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,استكشاف
@@ -377,7 +378,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.","If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io."
 "If you want to continue, please type",إذا كنت ترغب في المتابعة، يرجى كتابة
-Image not found,Image not found
 Impact of property change warning,All entities and documents that have already this property assigned will loose its current value
 Import,استيراد
 Import asset,Import asset

diff --git a/contents/ui-translations/en.csv b/contents/ui-translations/en.csv
@@ -310,6 +310,7 @@ Entity types,Entity types
 Entity updated,Entity updated
 Error,Error
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,Exploration
@@ -380,7 +381,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.","If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io."
 "If you want to continue, please type","If you want to continue, please type"
-Image not found,Image not found
 Impact of property change warning,"By making this change, any values  from the previous thesaurus already assigned to entities will be lost."
 Import,Import
 Import asset,Import asset

diff --git a/contents/ui-translations/es.csv b/contents/ui-translations/es.csv
@@ -306,6 +306,7 @@ Entity types,Tipos de entidades
 Entity updated,Entidad actualizada
 Error,Error
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expandir todo
 Exploration,Exploración
@@ -376,7 +377,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.","Si utilizas una URL externa, utiliza una dirección completa. Ejemplo: http://www.uwazi.io."
 "If you want to continue, please type","Si quieres continuar, por favor escribe"
-Image not found,Image not found
 Impact of property change warning,Todas las entidades y documentos que ya tienen esta propiedad asignada perderán su valor actual
 Import,Importar
 Import asset,Import asset

diff --git a/contents/ui-translations/fr.csv b/contents/ui-translations/fr.csv
@@ -307,6 +307,7 @@ Entity types,Types d'entités
 Entity updated,Entity updated
 Error,Erreur
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,Exploration
@@ -377,7 +378,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.","Si c'est une URL externe, utilisez une URL complète. Par exemple, http://www.uwazi.io."
 "If you want to continue, please type","Si vous voulez continuer, veuillez taper"
-Image not found,Image not found
 Impact of property change warning,All entities and documents that have already this property assigned will loose its current value
 Import,Importer
 Import asset,Import asset

diff --git a/contents/ui-translations/ko.csv b/contents/ui-translations/ko.csv
@@ -308,6 +308,7 @@ Entity types,엔티티 유형
 Entity updated,Entity updated
 Error,오류
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,탐색
@@ -378,7 +379,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.",외부 URL 인 경우 전체 경로 (http://www. 부터 시작하는 전체 URL) 를 넣으십시오.
 "If you want to continue, please type",계속하려면 다음을 입력하십시오:
-Image not found,Image not found
 Impact of property change warning,All entities and documents that have already this property assigned will loose its current value
 Import,업로드
 Import asset,Import asset

diff --git a/contents/ui-translations/my.csv b/contents/ui-translations/my.csv
@@ -308,6 +308,7 @@ Entity types,ဖြည့်သွင်းချက် အမျိုးအစ
 Entity updated,Entity updated
 Error,ချွတ်ယွင်းချက်
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,စူးစမ်းလေ့လာခြင်း
@@ -378,7 +379,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.",ပြင်ပ URL ဖြစ်ပါက URL ပုံစံအပြည့်အစုံကို သုံးပါ။ ဥပမာ- http://www.uwazi.io။
 "If you want to continue, please type",ဆက်လက်ဆောင်ရွက်လိုပါက ကျေးဇူးပြု၍ စာရိုက်ပါ
-Image not found,Image not found
 Impact of property change warning,All entities and documents that have already this property assigned will loose its current value
 Import,ထည့်သွင်းရန်
 Import asset,Import asset

diff --git a/contents/ui-translations/ru.csv b/contents/ui-translations/ru.csv
@@ -305,6 +305,7 @@ Entity types,Типы объектов
 Entity updated,Entity updated
 Error,Ошибка
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,Изучение
@@ -375,7 +376,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.","Если это внешний URL, используйте полностью сформированный URL. Т. е. http://www.uwazi.io."
 "If you want to continue, please type","Если вы хотите продолжить, пожалуйста, введите"
-Image not found,Image not found
 Impact of property change warning,All entities and documents that have already this property assigned will loose its current value
 Import,Импортировать
 Import asset,Import asset

diff --git a/contents/ui-translations/th.csv b/contents/ui-translations/th.csv
@@ -308,6 +308,7 @@ Entity types,ประเภทรายการ
 Entity updated,Entity updated
 Error,ข้อผิดพลาด
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,ค้นหา
@@ -378,7 +379,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.",หากเป็น URL จากภายนอก กรุณาใช้ URL แบบเต็มเช่น http://www.uwazi.io
 "If you want to continue, please type",ถ้าคุณต้องการดำเนินการต่อ กรุณาพิมพ์
-Image not found,Image not found
 Impact of property change warning,All entities and documents that have already this property assigned will loose its current value
 Import,นำเข้า
 Import asset,Import asset

diff --git a/contents/ui-translations/tr.csv b/contents/ui-translations/tr.csv
@@ -308,6 +308,7 @@ Entity types,Varlık türü
 Entity updated,Entity updated
 Error,Hata
 Error adding thesauri.,Error adding thesauri.
+Error loading your image,Error loading your image
 Error updating thesauri.,Error updating thesauri.
 Expand all,Expand all
 Exploration,Arama
@@ -378,7 +379,6 @@ ID,ID
 ID:,ID:
 "If it is an external URL, use a fully formed URL. Ie. http://www.uwazi.io.","Harici bir URL ise, tam olarak oluşturulmuş bir URL kullanın: http://www.uwazi.io."
 "If you want to continue, please type","Devam etmek istiyorsanız, lütfen yazın"
-Image not found,Image not found
 Impact of property change warning,All entities and documents that have already this property assigned will loose its current value
 Import,İçe aktar
 Import asset,Import asset

diff --git a/cypress/e2e/media-metadata.cy.ts b/cypress/e2e/media-metadata.cy.ts
@@ -70,7 +70,7 @@ describe('Media metadata', { defaultCommandTimeout: 5000 }, () => {
     });
   };
 
-  const addInvalidFile = (field: string) => {
+  const addInvalidVideoFile = (field: string) => {
     cy.contains(field).parentsUntil('.form-group').contains('button', 'Add file').scrollIntoView();
     cy.contains(field).parentsUntil('.form-group').contains('button', 'Add file').click();
     cy.contains('button', 'Select from computer');
@@ -89,6 +89,25 @@ describe('Media metadata', { defaultCommandTimeout: 5000 }, () => {
       .should('be.visible');
   };
 
+  const addInvalidImageFile = (field: string) => {
+    cy.contains(field).parentsUntil('.form-group').contains('button', 'Add file').scrollIntoView();
+    cy.contains(field).parentsUntil('.form-group').contains('button', 'Add file').click();
+    cy.contains('button', 'Select from computer');
+    cy.get('.upload-button input[type=file]')
+      .first()
+      .selectFile('./cypress/test_files/sample.pdf', {
+        force: true,
+      });
+    cy.contains(field)
+      .parentsUntil('.form-group')
+      .contains('Error loading your image')
+      .scrollIntoView();
+    cy.contains(field)
+      .parentsUntil('.form-group')
+      .contains('Error loading your image')
+      .should('be.visible');
+  };
+
   const checkMediaSnapshots = (selector: string) => {
     cy.get(selector).scrollIntoView({ offset: { top: -30, left: 0 } });
     cy.get(selector).toMatchImageSnapshot({ disableTimersAndAnimations: true, threshold: 0.08 });
@@ -163,8 +182,8 @@ describe('Media metadata', { defaultCommandTimeout: 5000 }, () => {
   // eslint-disable-next-line max-statements
   it('should show an error for an invalid property and allow to replace it for a valid one', () => {
     addEntity('Reporte con propiedades audiovisuales corregidas');
-    addInvalidFile('Fotografía');
-    addInvalidFile('Video');
+    addInvalidImageFile('Fotografía');
+    addInvalidVideoFile('Video');
     clickMediaAction('Fotografía', 'Unlink');
     addImage();
     clickMediaAction('Video', 'Unlink');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uwazi",
-  "version": "1.198.0-rc4",
+  "version": "1.198.0-rc5",
   "description": "Uwazi is a free, open-source solution for organising, analysing and publishing your documents.",
   "keywords": [
     "react"