fix(marketplace): display error bar (#910)

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**:

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",

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",

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;

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<AppDispatch>()
   const navigate = useNavigate()
-  const { data } = useFetchActiveAppsQuery()
+  const { data, error, isError, refetch } = useFetchActiveAppsQuery()
   const { data: favoriteItems } = useFetchFavoriteAppsQuery()
   const control = useSelector(appsControlSelector)
   const [list, setList] = useState<AppMarketplaceApp[]>([])
   const [favList, setFavlist] = useState<string[]>([])
 
+  // 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 <NoItems />
     if (!data) return renderProgress()
     if (!data.length) return renderNoMatch()
     return renderGroups()
   }
 
-  return <section>{renderList()}</section>
+  return (
+    <section>
+      {!isError ? (
+        renderList()
+      ) : (
+        <ErrorBar
+          errorText={
+            activeAppsError?.data?.status >= 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}
+        />
+      )}
+    </section>
+  )
 }

src/components/pages/ServiceMarketplace/index.tsx

@@ -41,13 +41,15 @@ import {
   ViewSelector,
   SortOption,
   CircleProgress,
+  ErrorBar,
 } from '@catena-x/portal-shared-components'
 import {
   type ServiceRequest,
   useFetchServicesQuery,
 } 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 <NoItems />
+    if (!services)
+      return (
+        <div className="loading-progress">
+          <CircleProgress
+            variant="indeterminate"
+            colorVariant="primary"
+            size={50}
+            sx={{
+              color: theme.palette.primary.main,
+            }}
+          />
+        </div>
+      )
+    return (
+      <RecommendedServices services={cardServices?.slice(0, indexToSplit)} />
+    )
+  }
+
   return (
     <main className="serviceMarketplace">
       <div className="mainContainer">
@@ -193,20 +219,21 @@ export default function ServiceMarketplace() {
                 />
               </div>
             </div>
-            {!services ? (
-              <div className="loading-progress">
-                <CircleProgress
-                  variant="indeterminate"
-                  colorVariant="primary"
-                  size={50}
-                  sx={{
-                    color: theme.palette.primary.main,
-                  }}
-                />
-              </div>
+            {!isError ? (
+              renderServices()
             ) : (
-              <RecommendedServices
-                services={cardServices?.slice(0, indexToSplit)}
+              <ErrorBar
+                errorText={
+                  servicesError?.data?.status >= 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}
               />
             )}
           </div>