chore: added support of image object for in card horizontal component

src/components/pages/ServiceAdminBoardDetail/index.tsx

@@ -23,7 +23,6 @@ import {
   StaticTable,
   Typography,
   Image,
-  LogoGrayData,
 } from '@catena-x/portal-shared-components'
 import { useNavigate, useParams } from 'react-router-dom'
 import '../AdminBoardDetail/AdminBoardDetail.scss'
@@ -43,14 +42,15 @@ import { Grid, Box, Divider } from '@mui/material'
 import { download } from 'utils/downloadUtils'
 import { DocumentTypeText } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 
 enum TableData {
   SUCCESS = 'SUCCESS',
   ERROR = 'ERROR',
 }
 
 export default function ServiceAdminBoardDetail() {
-  const [leadImg, setLeadImg] = useState<string>('')
   const { t } = useTranslation('servicerelease')
   const navigate = useNavigate()
   const { appId } = useParams()
@@ -65,26 +65,6 @@ export default function ServiceAdminBoardDetail() {
       setServiceData(data)
     }
   }, [isFetching, data])
-
-  useEffect(() => {
-    if (serviceData?.leadPictureId) {
-      setLeadingImg()
-    } else setLeadImg(LogoGrayData)
-  }, [serviceData])
-
-  const setLeadingImg = async () => {
-    try {
-      const response = await fetchDocument({
-        appId,
-        documentId: serviceData?.leadPictureId,
-      }).unwrap()
-      const file = response.data
-      setLeadImg(URL.createObjectURL(file))
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
   const getTypes = useCallback(() => {
     const newArr: string[] = []
     serviceData?.serviceTypes.forEach((serviceType: string) => {
@@ -153,7 +133,11 @@ export default function ServiceAdminBoardDetail() {
         <Box className="service-content">
           <div className="service-board-header">
             <div className="lead-image">
-              <Image src={leadImg} alt={serviceData.title} />
+              <Image
+                src={`${getApiBase()}/api/services/${appId}/serviceDocuments/${serviceData?.documents?.SERVICE_LEADIMAGE?.[0].documentId}`}
+                alt={serviceData.title}
+                loader={fetchImageWithToken}
+              />
             </div>
             <Box className="service-app-content">
               <Typography variant="h5" sx={{ pb: '6px', color: '#888888' }}>

src/components/pages/ServiceMarketplace/RecommendedServices.tsx

@@ -21,7 +21,6 @@
 import {
   CardHorizontal,
   CircleProgress,
-  LogoGrayData,
 } from '@catena-x/portal-shared-components'
 import { Grid, useTheme } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
@@ -31,6 +30,8 @@ import NoItems from '../NoItems'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 
 export default function RecommendedServices({
   services,
@@ -72,12 +73,19 @@ export default function RecommendedServices({
             <Grid className="recommended-card" key={service.id}>
               <CardHorizontal
                 borderRadius={6}
-                imageAlt="App Card"
-                imagePath={
-                  service?.leadPictureId
-                    ? `${service.leadPictureId}`
-                    : `${LogoGrayData}`
-                }
+                image={{
+                  src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
+                  alt: 'App Card',
+                  style: {
+                    flex: '0 0 33.333333%',
+                    maxWidth: '33.333333%',
+                    minHeight: '200px',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  },
+                }}
+                imageLoader={fetchImageWithToken}
                 label={service.provider}
                 buttonText="Details"
                 onBtnClick={() => {

src/components/pages/ServiceMarketplace/ServicesElements.tsx

@@ -18,18 +18,16 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import {
-  CardHorizontal,
-  LogoGrayData,
-  Typography,
-} from '@catena-x/portal-shared-components'
+import { CardHorizontal, Typography } from '@catena-x/portal-shared-components'
 import { Grid, Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './ServiceMarketplace.scss'
 import { useCallback } from 'react'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function ServicesElements({
   services,
@@ -83,12 +81,19 @@ export default function ServicesElements({
                   >
                     <CardHorizontal
                       borderRadius={6}
-                      imageAlt="App Card"
-                      imagePath={
-                        service?.leadPictureId
-                          ? `${service.leadPictureId}`
-                          : `${LogoGrayData}`
-                      }
+                      image={{
+                        src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
+                        alt: 'App Card',
+                        style: {
+                          flex: '0 0 33.333333%',
+                          maxWidth: '33.333333%',
+                          minHeight: '200px',
+                          backgroundRepeat: 'no-repeat',
+                          backgroundSize: 'cover',
+                          backgroundPosition: 'center',
+                        },
+                      }}
+                      imageLoader={fetchImageWithToken}
                       label={service.provider}
                       buttonText="Details"
                       onBtnClick={() => {

src/components/pages/ServiceMarketplace/index.tsx

@@ -48,10 +48,7 @@ import {
   useFetchServicesQuery,
 } from 'features/serviceMarketplace/serviceApiSlice'
 import SortImage from 'components/shared/frame/SortImage'
-import {
-  ServiceTypeIdsEnum,
-  useFetchDocumentMutation,
-} from 'features/serviceManagement/apiSlice'
+import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
 import NoItems from '../NoItems'
 
 dayjs.extend(isToday)
@@ -66,7 +63,6 @@ export default function ServiceMarketplace() {
   const [selected, setSelected] = useState<string>('All Services')
   const [sortOption, setSortOption] = useState<string>('new')
   const [cardServices, setCardServices] = useState<ServiceRequest[]>([])
-  const [fetchDocument] = useFetchDocumentMutation()
 
   let serviceTypeId = ''
 
@@ -101,39 +97,6 @@ export default function ServiceMarketplace() {
   const setView = (e: React.MouseEvent<HTMLInputElement>) => {
     setSelected(e.currentTarget.value)
   }
-
-  const getImage = useCallback(
-    async (service: ServiceRequest) => {
-      try {
-        const response = await fetchDocument({
-          appId: service.id,
-          documentId: service.leadPictureId,
-        }).unwrap()
-        const file = response.data
-        return URL.createObjectURL(file)
-      } catch (error) {
-        console.error('Error fetching image:', error)
-        return null
-      }
-    },
-    [fetchDocument]
-  )
-
-  useEffect(() => {
-    if (services && services.length > 0) {
-      const loadImages = async () => {
-        const serviceWithLeadId = await Promise.all(
-          services.map(async (service) => {
-            const img = await getImage(service)
-            return { ...service, leadPictureId: img }
-          })
-        )
-        setCardServices(serviceWithLeadId as ServiceRequest[])
-      }
-      loadImages()
-    }
-  }, [services])
-
   const sortOptions = [
     {
       label: t('content.serviceMarketplace.sortOptions.new'),

src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx

@@ -31,14 +31,16 @@ import {
   useFetchDocumentMutation,
   useFetchServiceStatusQuery,
 } from 'features/serviceManagement/apiSlice'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Divider } from '@mui/material'
 import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
 import { useParams } from 'react-router-dom'
 import { download } from 'utils/downloadUtils'
 import { type DocumentData } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function ServiceDetails() {
   const { t } = useTranslation('servicerelease')
@@ -47,7 +49,6 @@ export default function ServiceDetails() {
     refetchOnMountOrArgChange: true,
   }).data
   const [fetchDocument] = useFetchDocumentMutation()
-  const [leadImg, setLeadImg] = useState<string>('')
 
   const getServiceTypes = useCallback(() => {
     const newArr: string[] = []
@@ -77,25 +78,6 @@ export default function ServiceDetails() {
     }
   }
 
-  const setLeadingImg = async () => {
-    try {
-      const response = await fetchDocument({
-        appId: serviceId,
-        documentId: fetchServiceStatus?.leadPictureId,
-      }).unwrap()
-      const file = response.data
-      setLeadImg(URL.createObjectURL(file))
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
-  useEffect(() => {
-    if (fetchServiceStatus) {
-      setLeadingImg()
-    }
-  }, [fetchServiceStatus])
-
   return (
     <main>
       <div>
@@ -111,8 +93,19 @@ export default function ServiceDetails() {
             <div className="imageCard">
               <CardHorizontal
                 borderRadius={6}
-                imageAlt="Service Card"
-                imagePath={leadImg}
+                image={{
+                  src: `${getApiBase()}/api/services/${serviceId}/serviceDocuments/${fetchServiceStatus?.leadPictureId}`,
+                  alt: 'Service Card',
+                  style: {
+                    flex: '0 0 33.333333%',
+                    maxWidth: '33.333333%',
+                    minHeight: '200px',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  },
+                }}
+                imageLoader={fetchImageWithToken}
                 label={''}
                 buttonText=""
                 onBtnClick={() => {

src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx

@@ -21,13 +21,13 @@
 import {
   Typography,
   IconButton,
-  CardHorizontal,
   Card,
   LogoGrayData,
   SelectList,
   type UploadFileStatus,
   UploadStatus,
   PageSnackbar,
+  CardHorizontal,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import { Grid } from '@mui/material'
@@ -73,7 +73,8 @@ import {
   type LanguageStatusType,
   type UseCaseType,
 } from 'features/appManagement/types'
-import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 type FormDataType = {
   title: string
@@ -132,7 +133,6 @@ export default function AppMarketCard() {
     salesManagerType[]
   >([defaultSalesManagerValue])
   const [salesManagerId, setSalesManagerId] = useState<string | null>(null)
-  const [fetchDocumentById] = useFetchDocumentByIdMutation()
   const [cardImage, setCardImage] = useState(LogoGrayData)
   const {
     data: fetchAppStatus,
@@ -258,40 +258,6 @@ export default function AppMarketCard() {
     }
   }, [cardImageData])
 
-  useEffect(() => {
-    if (appStatusData?.documents?.APP_LEADIMAGE?.[0].documentId) {
-      void fetchCardImage(
-        appStatusData?.documents?.APP_LEADIMAGE[0].documentId,
-        appStatusData?.documents?.APP_LEADIMAGE[0].documentName
-      )
-    }
-    reset(defaultValues)
-  }, [appStatusData])
-
-  const setFileStatus = (
-    documentId: string,
-    documentName: string,
-    status: UploadFileStatus
-  ) => {
-    setValue('uploadImage.leadPictureUri', {
-      id: documentId,
-      name: documentName,
-      status,
-    } as unknown as string | null)
-  }
-
-  const fetchCardImage = async (documentId: string, documentName: string) => {
-    try {
-      const response = await fetchDocumentById({ appId, documentId }).unwrap()
-      const file = response.data
-      setFileStatus(documentId, documentName, UploadStatus.UPLOAD_SUCCESS)
-      setCardImage(URL.createObjectURL(file))
-    } catch (error) {
-      setFileStatus(documentId, documentName, UploadStatus.UPLOAD_SUCCESS)
-      console.error(error, 'ERROR WHILE FETCHING IMAGE')
-    }
-  }
-
   const cardAppTitle =
     getValues().title ??
     t('content.apprelease.appMarketCard.defaultCardAppTitle')
@@ -495,8 +461,19 @@ export default function AppMarketCard() {
             <CardHorizontal
               label={cardAppProvider ?? ''}
               title={cardAppTitle}
-              imagePath={cardImage}
-              imageAlt={cardImageAlt}
+              image={{
+                src: `${getApiBase()}/api/services/${appId}/serviceDocuments/${appStatusData?.documents?.APP_LEADIMAGE?.[0].documentId}`,
+                alt: 'App Card',
+                style: {
+                  flex: '0 0 33.333333%',
+                  maxWidth: '33.333333%',
+                  minHeight: '200px',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                },
+              }}
+              imageLoader={fetchImageWithToken}
               borderRadius={0}
               description={cardDescription}
               backgroundColor="#F3F3F3"