From 39f5e479bcbc8009ef6aff8b43329fcf4f898adb Mon Sep 17 00:00:00 2001
From: "Pal K. Klucsik" <krisztian.klucsik@dynatrace.com>
Date: Mon, 14 Oct 2024 15:56:06 +0200
Subject: [PATCH] [frontend] fix imageSlowload headers not applied (#1733)

Co-authored-by: Juliano Costa <julianocosta89@outlook.com>
---
 CHANGELOG.md                                    |  3 +++
 .../components/ProductCard/ProductCard.tsx      | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9905856c53..11d1916f36 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,9 @@ the release.
   ([#1727](https://github.com/open-telemetry/opentelemetry-demo/pull/1727))
 * [chore] Fix binding for host's volume mount
   ([#1728](https://github.com/open-telemetry/opentelemetry-demo/pull/1728))
+* [frontend] fix imageSlowLoad headers not applied
+  to 1.8.0 together with other dependencies
+  ([#1733](https://github.com/open-telemetry/opentelemetry-demo/pull/1733))
 
 ## 1.11.1
 
diff --git a/src/frontend/components/ProductCard/ProductCard.tsx b/src/frontend/components/ProductCard/ProductCard.tsx
index 1b051c7241..3205fb1872 100644
--- a/src/frontend/components/ProductCard/ProductCard.tsx
+++ b/src/frontend/components/ProductCard/ProductCard.tsx
@@ -12,8 +12,8 @@ interface IProps {
   product: Product;
 }
 
-async function getImageWithHeaders(url: RequestInfo, headers: Record<string, string>) {
-  const res = await fetch(url, { headers });
+async function getImageWithHeaders(requestInfo: Request) {
+  const res = await fetch(requestInfo);
   return await res.blob();
 }
 
@@ -33,9 +33,16 @@ const ProductCard = ({
   const [imageSrc, setImageSrc] = useState<string>('');
 
   useEffect(() => {
-    const requestInfo = new Request('/images/products/' + picture);
-    const headers = { 'x-envoy-fault-delay-request': imageSlowLoad.toString(), 'Cache-Control': 'no-cache' };
-    getImageWithHeaders(requestInfo, headers).then(blob => {
+    const headers = new Headers();
+    headers.append('x-envoy-fault-delay-request', imageSlowLoad.toString());
+    headers.append('Cache-Control', 'no-cache')
+    const requestInit = {
+      method: "GET",
+      headers: headers
+    };
+    const image_url ='/images/products/' + picture
+    const requestInfo = new Request(image_url, requestInit);
+    getImageWithHeaders(requestInfo).then(blob => {
       setImageSrc(URL.createObjectURL(blob));
     });
   }, [imageSlowLoad, picture]);