[frontend] Update nodejs to latest LTS and bump dependencies (#1670)

* Update frontend nodejs to latest LTS and bump dependencies

* changelog

---------

Co-authored-by: Pierre Tessier <[email protected]>

CHANGELOG.md

@@ -7,12 +7,18 @@ the release.
 
 ## Unreleased
 
+* [otel-col] Add docker stats receiver
+  ([#1650](https://github.com/open-telemetry/opentelemetry-demo/pull/1650))
 * [otel-col] strip high-cardinality segments of span names
   ([#1668](https://github.com/open-telemetry/opentelemetry-demo/pull/1668))
 * [tests] run trace based tests concurrently
   ([#1659](https://github.com/open-telemetry/opentelemetry-demo/pull/1659))
+* [otel-col] Set OTLP receiver endpoint to avoid breaking changes
+  ([#1662](https://github.com/open-telemetry/opentelemetry-demo/pull/1662))
 * [accountingservice] increase memory to 120MB
   ([#1666](https://github.com/open-telemetry/opentelemetry-demo/pull/1666))
+* [frontend] Update nodejs to latest LTS and bump dependencies
+  ([#1670](https://github.com/open-telemetry/opentelemetry-demo/pull/1670))
 
 ## 1.11.0
 
@@ -27,10 +33,6 @@ the release.
   ([#1619](https://github.com/open-telemetry/opentelemetry-demo/pull/1619))
 * [recommendation] updated flag name to match flagd configuration
   ([#1634](https://github.com/open-telemetry/opentelemetry-demo/pull/1634))
-* [otel-col] Add docker stats receiver
-  ([#1650](https://github.com/open-telemetry/opentelemetry-demo/pull/1650))
-* [otel-col] Set OTLP receiver endpoint to avoid breaking changes
-  ([#1662](https://github.com/open-telemetry/opentelemetry-demo/pull/1662))
 
 ## 1.10.0
 

src/frontend/Dockerfile

@@ -2,15 +2,15 @@
 # SPDX-License-Identifier: Apache-2.0
 
 
-FROM node:18-alpine AS deps
+FROM node:20-alpine AS deps
 RUN apk add --no-cache libc6-compat
 
 WORKDIR /app
 
 COPY ./src/frontend/package*.json ./
 RUN npm ci
 
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 RUN apk add --no-cache libc6-compat protobuf-dev protoc
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -20,7 +20,7 @@ COPY ./src/frontend .
 RUN npm run grpc:generate
 RUN npm run build
 
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 RUN apk add --no-cache protobuf-dev protoc
 

src/frontend/components/Ad/Ad.styled.ts

@@ -20,4 +20,5 @@ export const Ad = styled.section`
 
 export const Link = styled(RouterLink)`
   color: black;
+  text-decoration: none;
 `;

src/frontend/components/CartItems/CartItems.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import ApiGateway from '../../gateways/Api.gateway';
 import { Address, Money } from '../../protos/demo';
 import { useCurrency } from '../../providers/Currency.provider';
@@ -26,10 +26,13 @@ const CartItems = ({ productList, shouldShowPrice = true }: IProps) => {
     zipCode: '94043',
   };
 
-  const { data: shippingConst = { units: 0, currencyCode: 'USD', nanos: 0 } } = useQuery(['shipping',
-      productList, selectedCurrency, address], () =>
-    ApiGateway.getShippingCost(productList, selectedCurrency, address)
-  );
+  const queryKey = ['shipping', productList, selectedCurrency, address];
+  const queryFn = () => ApiGateway.getShippingCost(productList, selectedCurrency, address);
+  const queryOptions: UseQueryOptions<Money, Error> = {
+    queryKey,
+    queryFn,
+  };
+  const { data: shippingConst = { units: 0, currencyCode: 'USD', nanos: 0 } } = useQuery(queryOptions);
 
   const total = useMemo<Money>(() => {
     const nanoSum =

src/frontend/components/ProductCard/ProductCard.styled.ts

@@ -4,7 +4,9 @@
 import styled from 'styled-components';
 import RouterLink from 'next/link';
 
-export const Link = styled(RouterLink)``;
+export const Link = styled(RouterLink)`
+  text-decoration: none;
+`;
 
 export const Image = styled.div<{ $src: string }>`
   width: 100%;

src/frontend/components/ProductCard/ProductCard.tsx

@@ -6,7 +6,6 @@ import { Product } from '../../protos/demo';
 import ProductPrice from '../ProductPrice';
 import * as S from './ProductCard.styled';
 import { useState, useEffect } from 'react';
-import { RequestInfo } from 'undici-types';
 import { useNumberFlagValue } from '@openfeature/react-sdk';
 
 interface IProps {
@@ -34,11 +33,12 @@ 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('/images/products/' + picture, headers).then(blob => {
+    getImageWithHeaders(requestInfo, headers).then(blob => {
       setImageSrc(URL.createObjectURL(blob));
     });
-  }, [picture, imageSlowLoad]);
+  }, [imageSlowLoad, picture]);
 
   return (
     <S.Link href={`/product/${id}`}>