diff --git a/DEPENDENCIES b/DEPENDENCIES index bc75f3f98..ed849f6df 100644 --- a/DEPENDENCIES +++ b/DEPENDENCIES @@ -694,7 +694,7 @@ npm/npmjs/@babel/template/7.25.0, MIT, approved, clearlydefined npm/npmjs/@babel/traverse/7.25.6, MIT, approved, clearlydefined npm/npmjs/@babel/types/7.25.6, MIT AND (BSD-2-Clause AND ISC AND MIT) AND BSD-2-Clause AND BSD-3-Clause, approved, #16040 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined -npm/npmjs/@catena-x/portal-shared-components/3.7.3, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #17145 +npm/npmjs/@catena-x/portal-shared-components/3.7.4, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #17145 npm/npmjs/@colors/colors/1.5.0, MIT, approved, clearlydefined npm/npmjs/@cspotcode/source-map-support/0.8.1, MIT, approved, clearlydefined npm/npmjs/@cypress/request/3.0.6, Apache-2.0, approved, clearlydefined diff --git a/package.json b/package.json index 544d416e4..796e8774c 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ ] }, "dependencies": { - "@catena-x/portal-shared-components": "^3.7.3", + "@catena-x/portal-shared-components": "^3.7.4", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@hookform/error-message": "^2.0.1", diff --git a/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss b/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss index 4e2bbce3f..6e3adb318 100644 --- a/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss +++ b/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss @@ -55,10 +55,12 @@ gap: 56px; } - .lead-image > img { - border-radius: 16px; - max-width: 100%; - width: 412px; + .lead-image { + max-width: 288px; + & > img { + border-radius: 16px; + width: 100%; + } } .service-app-content { flex: 1; diff --git a/src/components/pages/ServiceAdminBoardDetail/index.tsx b/src/components/pages/ServiceAdminBoardDetail/index.tsx index 356680a28..b832e77af 100644 --- a/src/components/pages/ServiceAdminBoardDetail/index.tsx +++ b/src/components/pages/ServiceAdminBoardDetail/index.tsx @@ -22,10 +22,10 @@ import { Button, StaticTable, Typography, + Image, } from '@catena-x/portal-shared-components' import { useNavigate, useParams } from 'react-router-dom' import '../AdminBoardDetail/AdminBoardDetail.scss' -import { getAssetBase } from 'services/EnvironmentService' import { type ServiceDetailsType, useFetchBoardServiceDetailsQuery, @@ -42,6 +42,8 @@ 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', @@ -132,9 +134,10 @@ export default function ServiceAdminBoardDetail() {
- {serviceData.title}
diff --git a/src/components/pages/ServiceMarketplace/RecommendedServices.tsx b/src/components/pages/ServiceMarketplace/RecommendedServices.tsx index 9ea51cc36..069b596cd 100644 --- a/src/components/pages/ServiceMarketplace/RecommendedServices.tsx +++ b/src/components/pages/ServiceMarketplace/RecommendedServices.tsx @@ -27,7 +27,8 @@ import { useNavigate } from 'react-router-dom' import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice' import './ServiceMarketplace.scss' import NoItems from '../NoItems' -import { getAssetBase } from 'services/EnvironmentService' +import { fetchImageWithToken } from 'services/ImageService' +import { getApiBase } from 'services/EnvironmentService' import { useCallback } from 'react' import { useTranslation } from 'react-i18next' import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice' @@ -73,9 +74,18 @@ export default function RecommendedServices({ { diff --git a/src/components/pages/ServiceMarketplace/ServicesElements.tsx b/src/components/pages/ServiceMarketplace/ServicesElements.tsx index fb1cce815..f2d0af8c1 100644 --- a/src/components/pages/ServiceMarketplace/ServicesElements.tsx +++ b/src/components/pages/ServiceMarketplace/ServicesElements.tsx @@ -24,9 +24,10 @@ import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice' import './ServiceMarketplace.scss' -import { getAssetBase } from 'services/EnvironmentService' 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, @@ -81,9 +82,18 @@ export default function ServicesElements({ { diff --git a/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/MarketplaceHeader.scss b/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/MarketplaceHeader.scss index 91648282b..37685d62f 100644 --- a/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/MarketplaceHeader.scss +++ b/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/MarketplaceHeader.scss @@ -23,10 +23,14 @@ display: flex; flex-wrap: wrap; .lead-image { + width: 288px; + height: 288px; + overflow: hidden; img { border-radius: 16px; - width: '288px'; - height: '288px'; + width: 100%; + height: 100%; + object-fit: fill; } } .marketplace-app-content { diff --git a/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/index.tsx b/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/index.tsx index c9f585525..f25a32903 100644 --- a/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/index.tsx +++ b/src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/index.tsx @@ -19,7 +19,7 @@ ********************************************************************************/ import { useDispatch } from 'react-redux' -import { Button, Typography } from '@catena-x/portal-shared-components' +import { Button, Typography, Image } from '@catena-x/portal-shared-components' import { useTranslation } from 'react-i18next' import { useParams } from 'react-router-dom' import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice' @@ -27,10 +27,11 @@ import { show } from 'features/control/overlay' import { OVERLAYS, ROLES } from 'types/Constants' import './MarketplaceHeader.scss' import { setSuccessType } from 'features/serviceMarketplace/slice' -import { getAssetBase } from 'services/EnvironmentService' import { Box } from '@mui/material' import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice' import { userHasPortalRole } from 'services/AccessService' +import { getApiBase } from 'services/EnvironmentService' +import { fetchImageWithToken } from 'services/ImageService' export default function MarketplaceHeader({ item, @@ -88,9 +89,10 @@ export default function MarketplaceHeader({ return (
- {item.title}
diff --git a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx index 5ae3e4320..2a9144d9d 100644 --- a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx +++ b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx @@ -31,7 +31,7 @@ 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' @@ -39,6 +39,8 @@ 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('') 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 (
@@ -112,9 +94,18 @@ export default function ServiceDetails() { { diff --git a/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx b/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx index dbf076a0e..f8a498b21 100644 --- a/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx +++ b/src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx @@ -73,9 +73,11 @@ import { type LanguageStatusType, type UseCaseType, } from 'features/appManagement/types' -import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice' import { download } from 'utils/downloadUtils' import { extractFileData } from 'utils/fileUtils' +import { getApiBase } from 'services/EnvironmentService' +import { fetchImageWithToken } from 'services/ImageService' +import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice' type FormDataType = { title: string @@ -100,6 +102,7 @@ export default function AppMarketCard() { const appId = useSelector(appIdSelector) const [pageScrolled, setPageScrolled] = useState(false) const [deleteSuccess, setDeleteSuccess] = useState(false) + const [fetchDocumentById] = useFetchDocumentByIdMutation() const useCasesListData = useFetchUseCasesQuery().data const useCasesList = useMemo(() => useCasesListData ?? [], [useCasesListData]) @@ -134,7 +137,6 @@ export default function AppMarketCard() { salesManagerType[] >([defaultSalesManagerValue]) const [salesManagerId, setSalesManagerId] = useState(null) - const [fetchDocumentById] = useFetchDocumentByIdMutation() const [cardImage, setCardImage] = useState(LogoGrayData) const { data: fetchAppStatus, @@ -260,40 +262,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') @@ -514,9 +482,18 @@ export default function AppMarketCard() { label={cardAppProvider ?? ''} title={cardAppTitle} image={{ - alt: cardImageAlt, - src: cardImage, + 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" diff --git a/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx b/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx index a64f40133..210fd3c38 100644 --- a/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx +++ b/src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx @@ -24,7 +24,6 @@ import { Checkbox, IconButton, LanguageSwitch, - LogoGrayData, PageNotifications, StaticTable, Typography, @@ -38,7 +37,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft' import HelpOutlineIcon from '@mui/icons-material/HelpOutline' import { Grid, Divider, Box } from '@mui/material' import { useForm } from 'react-hook-form' -import { useCallback, useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { useDispatch } from 'react-redux' import { decrement, increment } from 'features/appManagement/slice' import { @@ -52,6 +51,8 @@ import CommonService from 'services/CommonService' import ReleaseStepHeader from '../components/ReleaseStepHeader' import { DocumentTypeText } from 'features/apps/types' import { download } from 'utils/downloadUtils' +import { getApiBase } from 'services/EnvironmentService' +import { fetchImageWithToken } from 'services/ImageService' import { AppOverviewTypes, type AppStatusDataState, @@ -143,28 +144,11 @@ export default function CommonValidateAndPublish({ const { t } = useTranslation() const [validatePublishNotification, setValidatePublishNotification] = useState(false) - const [cardImage, setCardImage] = useState('') const [multipleImages, setMultipleImages] = useState([]) const [defaultValues, setDefaultValues] = useState() const [loading, setLoading] = useState(false) const [cardLanguage, setCardLanguage] = useState('en') - const fetchImage = useCallback( - async (documentId: string) => { - try { - const response = await fetchDocumentById({ - appId: id, - documentId, - }).unwrap() - const file = response.data - setCardImage(URL.createObjectURL(file)) - } catch (error) { - console.error(error, 'ERROR WHILE FETCHING IMAGE') - } - }, - [fetchDocumentById, id] - ) - const { handleSubmit, formState: { isValid }, @@ -175,12 +159,6 @@ export default function CommonValidateAndPublish({ }) useEffect(() => { - if (statusData?.documents?.APP_LEADIMAGE?.[0].documentId) { - fetchImage(statusData?.documents?.APP_LEADIMAGE[0].documentId) - } - if (statusData?.documents?.SERVICE_LEADIMAGE?.[0].documentId) { - fetchImage(statusData?.documents?.SERVICE_LEADIMAGE[0].documentId) - } if (statusData?.documents?.APP_IMAGE?.[0].documentId) { setMultipleImages( CommonService.imagesAndAppidToImageType( @@ -191,7 +169,7 @@ export default function CommonValidateAndPublish({ } setDefaultValues(values) reset(values) - }, [statusData, values, fetchImage, reset, id]) + }, [statusData, values, reset, id]) const handleDownloadFn = async (documentId: string, documentName: string) => { try { @@ -321,8 +299,9 @@ export default function CommonValidateAndPublish({ > { diff --git a/src/components/shared/frame/SubHeaderTitle/index.tsx b/src/components/shared/frame/SubHeaderTitle/index.tsx index f462c556f..62cdb55e1 100644 --- a/src/components/shared/frame/SubHeaderTitle/index.tsx +++ b/src/components/shared/frame/SubHeaderTitle/index.tsx @@ -18,8 +18,7 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import { Typography } from '@catena-x/portal-shared-components' -import type { TypographyProps } from '@mui/material' +import Typography, { type TypographyProps } from '@mui/material/Typography' import { useTranslation } from 'react-i18next' interface ComponentProps extends TypographyProps { diff --git a/src/features/adminBoard/serviceAdminBoardApiSlice.ts b/src/features/adminBoard/serviceAdminBoardApiSlice.ts index f519b7c15..c9ac9c9f2 100644 --- a/src/features/adminBoard/serviceAdminBoardApiSlice.ts +++ b/src/features/adminBoard/serviceAdminBoardApiSlice.ts @@ -79,6 +79,7 @@ export interface ServiceDetailsType { }[] documents: { [key: string]: Array } providerUri: string + leadPictureId: string contactEmail: string contactNumber: null technicalUserProfile?: { diff --git a/src/features/serviceMarketplace/serviceApiSlice.ts b/src/features/serviceMarketplace/serviceApiSlice.ts index 6a1e0d45e..07940682c 100644 --- a/src/features/serviceMarketplace/serviceApiSlice.ts +++ b/src/features/serviceMarketplace/serviceApiSlice.ts @@ -49,6 +49,7 @@ export type ServiceRequest = { serviceTypes: string[] serviceTypeIds?: string[] provider: string + leadPictureId?: string providerUri: string leadPictureUri: string contactEmail: string diff --git a/yarn.lock b/yarn.lock index be109d667..5a0f8c610 100644 --- a/yarn.lock +++ b/yarn.lock @@ -317,10 +317,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@catena-x/portal-shared-components@^3.7.3": - version "3.7.3" - resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.7.3.tgz#65e43d3e3fb9e89d12057c12c9308720e46421ff" - integrity sha512-bfr7LphG60r4QhJ2oxvBkJ61/7TosG6eOxW0GhmZDP9kX5QLlQphwjpW82n65g9QZvxCrJ4D/sTLkRagi4u48g== +"@catena-x/portal-shared-components@^3.7.4": + version "3.7.4" + resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.7.4.tgz#45813f2d88e3bd480255e389fd9462e8314a6826" + integrity sha512-ogNuTAUpA+NKNtbui0ZcKad0xXZvabTTb9Uni+c16JcRW/K7ScnyDzQC3w7ZCzfNPv/TQF34Dq3aM4ZjShKBxw== dependencies: "@date-io/date-fns" "^3.0.0" "@emotion/react" "^11.11.4" @@ -2609,16 +2609,7 @@ create-require@^1.1.0: resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333" integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ== -cross-spawn@^7.0.0: - version "7.0.6" - resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" - integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA== - dependencies: - path-key "^3.1.0" - shebang-command "^2.0.0" - which "^2.0.1" - -cross-spawn@^7.0.2, cross-spawn@^7.0.3: +cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.6" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==