feat(connector management): add details overlay

CHANGELOG.md

@@ -8,6 +8,8 @@
   - Fix consistency issue in overlays where form input is used
 - Company Wallet
   - Use appropriate path to display logo on cards
+- Connector Management
+  - fetch details using api, added permissions and fixed error messages
 - App Release Process
   - Integrated role deletion with BE api reponse
 

src/assets/locales/de/main.json

@@ -594,7 +594,16 @@
         "note": "Bitte beachten Sie:",
         "noteDesc": "Wenn Sie die URL des Connectors ändern, wird das aktuelle SD-Dokument ungültig und vom System wird automatisch ein neues erstellt",
         "urlErrorMessage": "Ein Fehler ist aufgetreten. Die Änderungen konnten nicht gespeichert werden. Bitte versuchen Sie es erneut oder kommen Sie später wieder",
-        "pleaseEnterValidURL": "Bitte geben Sie eine gültige URL ein"
+        "pleaseEnterValidURL": "Bitte geben Sie eine gültige URL ein",
+        "reload": "Neu laden",
+        "apiErrorDesc1": "Die Connector-Daten können derzeit nicht geladen werden",
+        "apiErrorDesc2": "Bitte laden Sie die Seite neu oder versuchen Sie es später noch einmal",
+        "apiErrorDesc3": "Sollte das Problem weiterhin bestehen, wenden Sie sich bitte an:",
+        "apiErrorDesc4": "[email protected]",
+        "apiErrorDesc5": "Bitte versuchen Sie es später noch einmal.",
+        "configureConnector": "Connector konfigurieren",
+        "viewEditConnectorData": "Connector-Daten anzeigen/bearbeiten",
+        "featureNotAvailable": "Diese Funktion ist derzeit nicht verfügbar"
       },
       "rowValue": {
         "owned": "Owned",

src/assets/locales/en/main.json

@@ -593,7 +593,16 @@
         "note": "Please Note:",
         "noteDesc": "If you change the URL of the connector, the current SD document becomes invalid and a new one will be created automatically by the system",
         "urlErrorMessage": "An error has occured. The changes could not be saved. Please try again or come back later",
-        "pleaseEnterValidURL": "Please enter a valid URL"
+        "pleaseEnterValidURL": "Please enter a valid URL",
+        "reload": "Reload",
+        "apiErrorDesc1": "The Connector data can not be loaded at the moment",
+        "apiErrorDesc2": "Please reload the page or try again later",
+        "apiErrorDesc3": "If the problem persists, please contact:",
+        "apiErrorDesc4": "[email protected]",
+        "apiErrorDesc5": "Please try again later.",
+        "configureConnector": "Configure Connector",
+        "viewEditConnectorData": "View / edit connector data",
+        "featureNotAvailable": "This feature is currently not available"
       },
       "rowValue": {
         "owned": "Owned",

src/components/pages/EdcConnector/ConfigurationDetailsOverlay.tsx

@@ -28,6 +28,7 @@ import {
   StaticTable,
   type TableType,
   Typography,
+  CircleProgress,
 } from '@catena-x/portal-shared-components'
 import { useFetchDecentralIdentityUrlsQuery } from 'features/connector/connectorApiSlice'
 import './EdcConnector.scss'
@@ -44,7 +45,7 @@ const ConfigurationDetailsOverlay = ({
   handleOverlayClose,
 }: ConfigurationDetailsOverlayProps) => {
   const { t } = useTranslation()
-  const { data } = useFetchDecentralIdentityUrlsQuery()
+  const { data, isFetching } = useFetchDecentralIdentityUrlsQuery()
 
   const tableData: TableType = {
     head: [
@@ -159,48 +160,68 @@ const ConfigurationDetailsOverlay = ({
             padding: '0px 120px 40px 120px',
           }}
         >
-          <StaticTable data={tableData} horizontal={true} />
-
-          <Typography
-            variant="label3"
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              cursor: 'pointer',
-              color: '#0088CC',
-              textDecoration: 'underline',
-              m: '36px auto',
-              fontWeight: 400,
-            }}
-          >
-            <HelpOutlineIcon
-              sx={{
-                width: '22px',
-                height: '22px',
-                mr: '14px',
+          {isFetching ? (
+            <div
+              style={{
+                width: '100%',
+                height: '500px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
               }}
-            />
-            {t('content.edcconnector.configurationDetails.learnMore')}
-          </Typography>
-          <Typography variant="body3">
-            {' '}
-            {t('content.edcconnector.configurationDetails.section.text1')}
-          </Typography>
-          <Typography variant="body3">
-            {t('content.edcconnector.configurationDetails.section.text2')}
-          </Typography>
-          <Typography variant="body3">
-            {t('content.edcconnector.configurationDetails.section.text3')}
-          </Typography>
-          <Typography variant="body3">
-            {t('content.edcconnector.configurationDetails.section.text4')}
-          </Typography>
-          <Typography variant="body3">
-            {t('content.edcconnector.configurationDetails.section.text5')}
-          </Typography>
-          <Typography variant="body3">
-            {t('content.edcconnector.configurationDetails.section.text6')}
-          </Typography>
+            >
+              <CircleProgress
+                colorVariant="primary"
+                size={80}
+                thickness={8}
+                variant="indeterminate"
+              />
+            </div>
+          ) : (
+            <>
+              <StaticTable data={tableData} horizontal={true} />
+              <Typography
+                variant="label3"
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  color: '#0088CC',
+                  textDecoration: 'underline',
+                  m: '36px auto',
+                  fontWeight: 400,
+                }}
+              >
+                <HelpOutlineIcon
+                  sx={{
+                    width: '22px',
+                    height: '22px',
+                    mr: '14px',
+                  }}
+                />
+                {t('content.edcconnector.configurationDetails.learnMore')}
+              </Typography>
+              <Typography variant="body3">
+                {' '}
+                {t('content.edcconnector.configurationDetails.section.text1')}
+              </Typography>
+              <Typography variant="body3">
+                {t('content.edcconnector.configurationDetails.section.text2')}
+              </Typography>
+              <Typography variant="body3">
+                {t('content.edcconnector.configurationDetails.section.text3')}
+              </Typography>
+              <Typography variant="body3">
+                {t('content.edcconnector.configurationDetails.section.text4')}
+              </Typography>
+              <Typography variant="body3">
+                {t('content.edcconnector.configurationDetails.section.text5')}
+              </Typography>
+              <Typography variant="body3">
+                {t('content.edcconnector.configurationDetails.section.text6')}
+              </Typography>
+            </>
+          )}
         </DialogContent>
         <DialogActions>
           <Button