From d0ae56e35b3a72e44ca1ebb4bf7fd7d00670d914 Mon Sep 17 00:00:00 2001 From: lavanya-bmw <106523828+lavanya-bmw@users.noreply.github.com> Date: Tue, 16 Jul 2024 14:49:36 +0530 Subject: [PATCH] fix(marketplace): display error bar (#910) --- CHANGELOG.md | 7 +++ src/assets/locales/de/main.json | 6 +- src/assets/locales/en/main.json | 6 +- .../pages/AppMarketplace/AppMarketplace.scss | 2 +- .../components/AppListSection/index.tsx | 36 +++++++++++- .../pages/ServiceMarketplace/index.tsx | 55 ++++++++++++++----- 6 files changed, 92 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 97b5c22b6..b9e020345 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,13 @@ - **Imprint**: - updated imprint page with anonymized data [#906](https://github.com/eclipse-tractusx/portal-frontend/pull/906) +### Feature + +- **App marketplace**: + - show appropriate error information to the user along with refetch button [#910](https://github.com/eclipse-tractusx/portal-frontend/pull/910) +- **Service Marketplace**: + - show appropriate error information to the user along with refetch button [#910](https://github.com/eclipse-tractusx/portal-frontend/pull/910) + ### Bugfixes - **Company Data Management**: diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index d0437a70c..93d054b61 100644 --- a/src/assets/locales/de/main.json +++ b/src/assets/locales/de/main.json @@ -322,7 +322,9 @@ "modularproduction": "Modular Production" }, "noMatch": "Keine Treffer", - "for": "zu Ihrem Suchausdruck" + "for": "zu Ihrem Suchausdruck", + "dataLoadFailed": "Das Laden der Daten ist aufgrund fehlender Berechtigungsrechte fehlgeschlagen.", + "loadFailed": "Laden fehlgeschlagen" } }, "semantichub": { @@ -1382,6 +1384,8 @@ "noDataMessage": "No data available", "subscriptionHeading": ">> there are already active subscriptions for the service {serviceName}", "subscribeSuccessMsg": "Subscribed Successfully", + "dataLoadFailed": "Das Laden der Daten ist aufgrund fehlender Berechtigungsrechte fehlgeschlagen.", + "loadFailed": "Laden fehlgeschlagen", "newServices": "New Services", "recommendations": "Recommendations", "allServices": "All Services", diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index 48e100f08..beb43f709 100644 --- a/src/assets/locales/en/main.json +++ b/src/assets/locales/en/main.json @@ -321,7 +321,9 @@ "modularproduction": "Modular Production" }, "noMatch": "No Match", - "for": "for your search term" + "for": "for your search term", + "dataLoadFailed": "Data Load Failed due to missing permission rights.", + "loadFailed": "Load Failed" } }, "semantichub": { @@ -1349,6 +1351,8 @@ "noDataMessage": "No data available", "subscriptionHeading": ">> there are already active subscriptions for the service {serviceName}", "subscribeSuccessMsg": "Subscribed Successfully", + "dataLoadFailed": "Data Load Failed due to missing permission rights.", + "loadFailed": "Load Failed", "newServices": "New Services", "recommendations": "Recommendations", "allServices": "All Services", diff --git a/src/components/pages/AppMarketplace/AppMarketplace.scss b/src/components/pages/AppMarketplace/AppMarketplace.scss index 974b9b9c8..ddfbe9b81 100644 --- a/src/components/pages/AppMarketplace/AppMarketplace.scss +++ b/src/components/pages/AppMarketplace/AppMarketplace.scss @@ -23,7 +23,7 @@ .app-store { width: 100%; padding: 0; - margin-bottom: -230px; + margin-bottom: -50px; input[type='radio'] { margin-left: 12px; diff --git a/src/components/pages/AppMarketplace/components/AppListSection/index.tsx b/src/components/pages/AppMarketplace/components/AppListSection/index.tsx index feed78d21..33f043518 100644 --- a/src/components/pages/AppMarketplace/components/AppListSection/index.tsx +++ b/src/components/pages/AppMarketplace/components/AppListSection/index.tsx @@ -18,7 +18,11 @@ ********************************************************************************/ import { useTranslation } from 'react-i18next' -import { CircleProgress, Typography } from '@catena-x/portal-shared-components' +import { + CircleProgress, + ErrorBar, + Typography, +} from '@catena-x/portal-shared-components' import { useTheme } from '@mui/material' import { AppListGroupView } from '../AppListGroupView' import { useDispatch, useSelector } from 'react-redux' @@ -34,6 +38,7 @@ import { appsControlSelector } from 'features/apps/control' import { type AppMarketplaceApp } from 'features/apps/types' import { useEffect, useState } from 'react' import { cloneDeep } from 'lodash' +import NoItems from 'components/pages/NoItems' export const label = 'AppList' @@ -43,12 +48,16 @@ export default function AppListSection() { const dispatch = useDispatch() const navigate = useNavigate() - const { data } = useFetchActiveAppsQuery() + const { data, error, isError, refetch } = useFetchActiveAppsQuery() const { data: favoriteItems } = useFetchFavoriteAppsQuery() const control = useSelector(appsControlSelector) const [list, setList] = useState([]) const [favList, setFavlist] = useState([]) + // To-Do fix the type issue with status and data from FetchBaseQueryError + // eslint-disable-next-line + const activeAppsError = error as any + const checkIsFavorite = (appId: string) => favList?.includes(appId) const addOrRemoveFavorite = (event: React.MouseEvent, appId: string) => { @@ -133,10 +142,31 @@ export default function AppListSection() { ) const renderList = () => { + if (data && data.length === 0) return if (!data) return renderProgress() if (!data.length) return renderNoMatch() return renderGroups() } - return
{renderList()}
+ return ( +
+ {!isError ? ( + renderList() + ) : ( + = 400 && + activeAppsError?.data?.status < 500 + ? t('content.appstore.appOverviewSection.dataLoadFailed') + : t('content.appstore.appOverviewSection.loadFailed') + } + showButton={ + activeAppsError.code >= 500 && activeAppsError?.data?.status < 600 + } + buttonText={t('error.tryAgain')} + handleButton={refetch} + /> + )} +
+ ) } diff --git a/src/components/pages/ServiceMarketplace/index.tsx b/src/components/pages/ServiceMarketplace/index.tsx index 9b56336c5..2127af51f 100644 --- a/src/components/pages/ServiceMarketplace/index.tsx +++ b/src/components/pages/ServiceMarketplace/index.tsx @@ -41,6 +41,7 @@ import { ViewSelector, SortOption, CircleProgress, + ErrorBar, } from '@catena-x/portal-shared-components' import { type ServiceRequest, @@ -48,6 +49,7 @@ import { } from 'features/serviceMarketplace/serviceApiSlice' import SortImage from 'components/shared/frame/SortImage' import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice' +import NoItems from '../NoItems' dayjs.extend(isToday) dayjs.extend(isYesterday) @@ -77,13 +79,17 @@ export default function ServiceMarketplace() { const indexToSplit = 2 //show only 2 services in recommended - const { data } = useFetchServicesQuery({ + const { data, error, isError, refetch } = useFetchServicesQuery({ page: 0, serviceType: serviceTypeId, sortingType, }) const services = data?.content + // To-Do fix the type issue with status and data from FetchBaseQueryError + // eslint-disable-next-line + const servicesError = error as any + useEffect(() => { services && setCardServices(services) }, [services]) @@ -162,6 +168,26 @@ export default function ServiceMarketplace() { setShowModal(true) }, []) + const renderServices = () => { + if (services && services.length === 0) return + if (!services) + return ( +
+ +
+ ) + return ( + + ) + } + return (
@@ -193,20 +219,21 @@ export default function ServiceMarketplace() { />
- {!services ? ( -
- -
+ {!isError ? ( + renderServices() ) : ( - = 400 && + servicesError?.data?.status < 500 + ? t('content.serviceMarketplace.dataLoadFailed') + : t('content.serviceMarketplace.loadFailed') + } + showButton={ + servicesError.code >= 500 && servicesError?.data?.status < 600 + } + buttonText={t('error.tryAgain')} + handleButton={refetch} /> )}