fix(semantic hub): display error bar (#917)

CHANGELOG.md

@@ -7,6 +7,11 @@
 - **Imprint**:
   - updated imprint page with anonymized data [#906](https://github.com/eclipse-tractusx/portal-frontend/pull/906)
 
+### Feature
+
+- **Semantic Hub**:
+  - show appropriate error information to the user along with refetch button [#917](https://github.com/eclipse-tractusx/portal-frontend/pull/917)
+
 ### Bugfixes
 
 - **Company Data Management**:

package.json

@@ -27,7 +27,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^3.0.21",
+    "@catena-x/portal-shared-components": "^3.0.26",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",

src/assets/locales/de/main.json

@@ -2291,7 +2291,9 @@
       "additionalDescription": "Bitte wenden Sie sich an Ihren Administrator.",
       "noDocumentsAvailable": "No documents available",
       "noRolesAvailable": "No roles available",
-      "noTechnicalUserProfilesAvailable": "No technical user profiles available"
+      "noTechnicalUserProfilesAvailable": "No technical user profiles available",
+      "dataLoadFailed": "Das Laden der Daten ist aufgrund fehlender Berechtigungsrechte fehlgeschlagen.",
+      "loadFailed": "Laden fehlgeschlagen"
     },
     "table": {
       "search": "Enter email to search",

src/assets/locales/en/main.json

@@ -331,7 +331,7 @@
       "title": "Semantic Data Models",
       "introText_0": "Semantic models are used to structure data. As a concept, they make it possible to give fundamental meaning to data and their relationships. In the context of data modeling and data organization they realize the development of applications as well as the maintenance of data consistency.",
       "introText_1": "In Catena-X, semantic data models are provided in a suitable publication system, the so-called Semantic Hub. For data or service providers, the Semantic Hub presents a foundation for the use and reuse of semantic models. For this reason, the publication of a semantic data model takes place under the specification of a version. This supports transparency as well as control over all semantic models and their release status.",
-      "addModel": "Neues Model anlegen",
+      "addModel": "Create new model",
       "alerts": {
         "alertSuccessTitle": "Success!",
         "alertErrorTitle": "Error!",
@@ -2259,7 +2259,9 @@
       "additionalDescription": "Please contact your admin.",
       "noDocumentsAvailable": "No documents available",
       "noRolesAvailable": "No roles available",
-      "noTechnicalUserProfilesAvailable": "No technical user profiles available"
+      "noTechnicalUserProfilesAvailable": "No technical user profiles available",
+      "dataLoadFailed": "Data Load Failed due to missing permission rights.",
+      "loadFailed": "Load Failed"
     },
     "table": {
       "search": "Enter email to search",

src/components/pages/SemanticHub/ModelImportDialog.tsx

@@ -123,7 +123,9 @@ const ModelImportDialog = ({ show, onClose }: ModelDetailDialogProps) => {
           maxRows={18}
           disabled={uploading}
         />
-        {error && <Typography color="error">{error}</Typography>}
+        {typeof error === 'string' && (
+          <Typography color="error">{error}</Typography>
+        )}
         {uploading && (
           <Box sx={{ textAlign: 'center', mt: 2 }}>
             <CircleProgress

src/components/pages/SemanticHub/ModelTable.tsx

@@ -45,7 +45,7 @@ type SelectedFilter = {
 const ModelTable = ({ onModelSelect }: ModelTableProps) => {
   const { t } = useTranslation()
   const dispatch = useDispatch<AppDispatch>()
-  const { modelList, loadingModelList, deleteModelId, uploadedModel } =
+  const { modelList, loadingModelList, deleteModelId, uploadedModel, error } =
     useSelector(semanticModelsSelector)
   const [models, setModels] = useState<SemanticModel[]>([])
   const [pageNumber, setPageNumber] = useState<number>(0)
@@ -149,6 +149,18 @@ const ModelTable = ({ onModelSelect }: ModelTableProps) => {
     }
   }
   const columns = SemanticModelTableColumns(t, onModelSelect)
+  const errorObj = {
+    status: 0,
+    message: '',
+  }
+
+  if (error) {
+    errorObj.status = Number(error)
+    errorObj.message =
+      error && Number(error) >= 400 && Number(error) < 500
+        ? t('global.errors.dataLoadFailed')
+        : t('global.errors.loadFailed')
+  }
 
   return (
     <section>
@@ -176,8 +188,15 @@ const ModelTable = ({ onModelSelect }: ModelTableProps) => {
         }}
         columns={columns}
         rows={models}
-        getRowId={(row) => uniqueId(row.urn)}
+        getRowId={(row: { urn: string | undefined }) => uniqueId(row.urn)}
         hasBorder={false}
+        error={errorObj}
+        reload={() =>
+          dispatch(
+            fetchSemanticModels({ filter: { page: 0, pageSize: rowCount } })
+          )
+        }
+        noRowsMsg={t('global.noData.heading')}
       />
       <div className="load-more-button-container">
         {modelList.totalPages !== pageNumber && (

src/features/semanticModels/actions.ts

@@ -20,7 +20,7 @@
 
 import { createAsyncThunk } from '@reduxjs/toolkit'
 import { Api } from './api'
-import type { FilterParams, NewSemanticModel } from './types'
+import type { ErrorResponse, FilterParams, NewSemanticModel } from './types'
 
 const message = 'The server responded with an error.'
 
@@ -31,10 +31,11 @@ const fetchSemanticModels = createAsyncThunk(
       return await Api.getInstance().getModels(filter)
     } catch (error: unknown) {
       console.error('api call error:', error)
-      throw Error(`Fetching models failed: ${message}`)
+      throw Error(JSON.stringify((error as ErrorResponse).response.status))
     }
   }
 )
+
 const fetchSemanticModelById = createAsyncThunk(
   'semantic/model/fetchById',
   async (id: string) => {

src/features/semanticModels/types.ts

@@ -20,6 +20,12 @@
 
 import type { Nullable } from 'types/MainTypes'
 
+export interface ErrorResponse {
+  response: {
+    status: number
+  }
+}
+
 export interface SemanticModelsInitialState {
   modelList: ModelList
   loadingModelList: boolean
@@ -30,7 +36,7 @@ export interface SemanticModelsInitialState {
   uploadError: string
   openApiLink: string
   openApiError: string
-  error: string
+  error: ErrorResponse | string
   deleteModelId: string
   deleteError: string
 }