updates(error bar): use error bar component

src/assets/locales/de/main.json

@@ -99,7 +99,9 @@
     "Lang_en": "Sprache auf Englisch stellen"
   },
   "error": {
-    "deleteTechUserNotificationErrorDescription": "Please try it later again or contact your administrator."
+    "deleteTechUserNotificationErrorDescription": "Please try it later again or contact your administrator.",
+    "tryAgain": "Try Again",
+    "errorBar": "Something went wrong. Try again"
   },
   "content": {
     "admin": {

src/assets/locales/en/main.json

@@ -98,7 +98,9 @@
     "Lang_en": "Switch language to english"
   },
   "error": {
-    "deleteTechUserNotificationErrorDescription": "Please try it later again or contact your administrator."
+    "deleteTechUserNotificationErrorDescription": "Please try it later again or contact your administrator.",
+    "tryAgain": "Try Again",
+    "errorBar": "Something went wrong. Try again"
   },
   "content": {
     "admin": {

src/components/pages/AppOverview/AppOverviewList.tsx

@@ -21,7 +21,6 @@
 import { CardItems, Cards } from '@catena-x/portal-shared-components'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import NoItems from 'components/pages/NoItems'
 import { PAGES } from 'types/Constants'
 import { AppInfo } from 'features/apps/apiSlice'
 import { fetchImageWithToken } from 'services/ImageService'
@@ -42,10 +41,6 @@ export const AppOverviewList = ({
   const { t } = useTranslation()
   const navigate = useNavigate()
 
-  if (filterItem && filterItem.length === 0) {
-    return <NoItems />
-  }
-
   const submenuOptions = [
     {
       label: t('content.appoverview.sortOptions.deactivate'),

src/components/pages/AppOverview/index.tsx

@@ -29,6 +29,7 @@ import {
   CardItems,
   Cards,
   PageSnackbar,
+  ErrorBar,
 } from '@catena-x/portal-shared-components'
 import { useTheme, CircularProgress } from '@mui/material'
 import {
@@ -50,13 +51,14 @@ import { initialState } from 'features/appManagement/types'
 import { fetchImageWithToken } from 'services/ImageService'
 import { setCurrentActiveStep } from 'features/appManagement/slice'
 import { setAppId, setAppStatus } from 'features/appManagement/actions'
+import NoItems from '../NoItems'
 
 export default function AppOverview() {
   const { t } = useTranslation()
   const theme = useTheme()
   const dispatch = useDispatch()
 
-  const { data, refetch } = useFetchProvidedAppsQuery()
+  const { data, refetch, isSuccess, isFetching } = useFetchProvidedAppsQuery()
   const [itemCards, setItemCards] = useState<any>([])
   const [recentlyChangedApps, setRecentlyChangedApps] = useState<any>([])
   const [cards, setCards] = useState<any>([])
@@ -252,7 +254,7 @@ export default function AppOverview() {
         </Box>
 
         <div className="app-detail">
-          {!filterItem ? (
+          {isFetching ? (
             <div style={{ textAlign: 'center' }}>
               <CircularProgress
                 size={50}
@@ -262,10 +264,25 @@ export default function AppOverview() {
               />
             </div>
           ) : (
-            <AppOverviewList
-              filterItem={filterItem}
-              showOverlay={showOverlay}
-            />
+            <>
+              {filterItem && filterItem.length === 0 && isSuccess && (
+                <NoItems />
+              )}
+              {!isSuccess && (
+                <ErrorBar
+                  errorText={t('error.errorBar')}
+                  handleButton={refetch}
+                  buttonText={t('error.tryAgain')}
+                  showButton={true}
+                />
+              )}
+              {filterItem && filterItem.length > 0 && isSuccess && (
+                <AppOverviewList
+                  filterItem={filterItem ?? []}
+                  showOverlay={showOverlay}
+                />
+              )}
+            </>
           )}
         </div>
       </div>

src/components/pages/AppOverviewNew/index.tsx

@@ -20,15 +20,15 @@
 
 import { useTranslation } from 'react-i18next'
 import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
-import { PageHeader } from '@catena-x/portal-shared-components'
+import { ErrorBar, PageHeader } from '@catena-x/portal-shared-components'
 import { useFetchProvidedAppsQuery } from 'features/apps/apiSlice'
 import NoItems from '../NoItems'
 import { AppOverviewList } from '../AppOverview/AppOverviewList'
 import { appToCard } from 'features/apps/mapper'
 
 export default function AppOverviewNew() {
   const { t } = useTranslation()
-  const { data } = useFetchProvidedAppsQuery()
+  const { data, refetch, isSuccess } = useFetchProvidedAppsQuery()
 
   console.log('data', data)
 
@@ -48,7 +48,18 @@ export default function AppOverviewNew() {
             showOverlay={() => {}}
           />
         ) : (
-          <NoItems />
+          <>
+            {isSuccess ? (
+              <NoItems />
+            ) : (
+              <ErrorBar
+                errorText={t('error.errorBar')}
+                handleButton={refetch}
+                buttonText={t('error.tryAgain')}
+                showButton={true}
+              />
+            )}
+          </>
         )}
       </section>
     </main>

src/components/shared/templates/AdminBoard/AdminBoardElements.tsx

@@ -18,7 +18,11 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { CardDecision, PageSnackbar } from '@catena-x/portal-shared-components'
+import {
+  CardDecision,
+  ErrorBar,
+  PageSnackbar,
+} from '@catena-x/portal-shared-components'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTheme, CircularProgress } from '@mui/material'
 import { show } from 'features/control/overlay'
@@ -41,6 +45,7 @@ import {
   useApproveServiceRequestMutation,
 } from 'features/adminBoard/serviceAdminBoardApiSlice'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 export default function AdminBoardElements({
   apps,
@@ -50,6 +55,8 @@ export default function AdminBoardElements({
   errorApproveMsg,
   successDeclineMsg,
   errorDeclineMsg,
+  isSuccess,
+  refetch,
 }: {
   apps?: AppContent[] | ServiceContent[]
   onClick: (appId: string) => void
@@ -58,7 +65,10 @@ export default function AdminBoardElements({
   errorApproveMsg?: string
   successDeclineMsg?: string
   errorDeclineMsg?: string
+  isSuccess: boolean
+  refetch: any
 }) {
+  const { t } = useTranslation()
   const dispatch = useDispatch()
   const theme = useTheme()
   const [approveRequest] = useApproveRequestMutation()
@@ -67,8 +77,17 @@ export default function AdminBoardElements({
   const isDecisionError = useSelector(currentErrorType)
   const [actionApprove, setActionApprove] = useState<boolean>(false)
 
-  if (apps && apps.length === 0) {
+  if (apps && apps.length === 0 && isSuccess) {
     return <NoItems />
+  } else if (!isSuccess) {
+    return (
+      <ErrorBar
+        errorText={t('error.errorBar')}
+        handleButton={refetch}
+        buttonText={t('error.tryAgain')}
+        showButton={true}
+      />
+    )
   }
 
   const handleApprove = async (appId: string) => {

src/components/shared/templates/AdminBoard/index.tsx

@@ -251,7 +251,7 @@ export default function CommonAdminBoard({
 
   const isDecisionSuccess = useSelector(currentSuccessType)
 
-  const { data, refetch, isFetching } = fetchQuery(fetchArgs)
+  const { data, refetch, isFetching, isSuccess } = fetchQuery(fetchArgs)
 
   useEffect(() => {
     if (data && data?.content)
@@ -427,7 +427,7 @@ export default function CommonAdminBoard({
       <div className="admin-board-main">
         <div style={{ height: '60px' }}></div>
         <div className="mainContainer">
-          {!apps || apps?.length === 0 ? (
+          {isFetching ? (
             <div className="loading-progress">
               <CircularProgress
                 size={50}
@@ -445,21 +445,20 @@ export default function CommonAdminBoard({
               errorApproveMsg={errorApproveMsg}
               successDeclineMsg={successDeclineMsg}
               errorDeclineMsg={errorDeclineMsg}
+              isSuccess={isSuccess}
+              refetch={refetch}
             />
           )}
-          {!isFetching &&
-            apps?.length &&
-            data?.meta &&
-            data?.meta?.totalPages > page + 1 && (
-              <div
-                style={{
-                  textAlign: 'center',
-                  marginTop: '30px',
-                }}
-              >
-                <LoadMoreButton onClick={nextPage} label={loadMoreButtonText} />
-              </div>
-            )}
+          {!isFetching && data?.meta && data?.meta?.totalPages > page + 1 && (
+            <div
+              style={{
+                textAlign: 'center',
+                marginTop: '30px',
+              }}
+            >
+              <LoadMoreButton onClick={nextPage} label={loadMoreButtonText} />
+            </div>
+          )}
         </div>
         <div style={{ height: '66px' }}></div>
       </div>

src/components/shared/templates/Subscription/SubscriptionElements.tsx

@@ -26,6 +26,7 @@ import {
   IconButton,
   Tooltips,
   Chip,
+  ErrorBar,
 } from '@catena-x/portal-shared-components'
 import { SubscriptionContent } from 'features/appSubscription/appSubscriptionApiSlice'
 import NoItems from 'components/pages/NoItems'
@@ -121,11 +122,13 @@ export default function SubscriptionElements({
   isAppFilters,
   type,
   refetch,
+  isSuccess,
 }: {
   subscriptions?: SubscriptionContent[]
   isAppFilters?: boolean
   type: string
   refetch: () => void
+  isSuccess: boolean
 }) {
   const theme = useTheme()
   const { t } = useTranslation()
@@ -136,8 +139,17 @@ export default function SubscriptionElements({
   const [subscriptionDetail, setSubscriptionDetail] =
     useState<SubscriptionDataType>(SubscriptionInitialData)
 
-  if (subscriptions && subscriptions.length === 0) {
+  if (subscriptions && subscriptions.length === 0 && isSuccess) {
     return <NoItems />
+  } else if (!isSuccess) {
+    return (
+      <ErrorBar
+        errorText={t('error.errorBar')}
+        handleButton={refetch}
+        buttonText={t('error.tryAgain')}
+        showButton={true}
+      />
+    )
   }
 
   return (

src/components/shared/templates/Subscription/index.tsx

@@ -299,7 +299,12 @@ export default function Subscription({
     }
   }, [appFiltersData, type])
 
-  const { data, refetch, isFetching } = fetchQuery(fetchArgs)
+  const {
+    data,
+    refetch,
+    isFetching,
+    isSuccess: apiSuccess,
+  } = fetchQuery(fetchArgs)
   const isSuccess = useSelector(currentProviderSuccessType)
   const success: boolean = useSelector(currentSuccessType)
 
@@ -545,6 +550,7 @@ export default function Subscription({
                 isAppFilters={appFilters.length > 0}
                 type={type}
                 refetch={refetch}
+                isSuccess={apiSuccess}
               />
             )}
           </div>