feat(connector management): add details overlay (#813)

#577

CHANGELOG.md

@@ -12,6 +12,8 @@
 - Admin Credential
   - Implement Credential Revocation Feature
   - Add Credential Status
+- Connector Management
+  - Updated main page UI and added details overlay and functionality
 
 ### Change
 

DEPENDENCIES

@@ -599,7 +599,7 @@ npm/npmjs/@babel/template/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@babel/traverse/7.24.1, MIT AND (BSD-2-Clause AND ISC AND MIT) AND BSD-2-Clause AND BSD-3-Clause, approved, #13926
 npm/npmjs/@babel/types/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/3.0.11, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
+npm/npmjs/@catena-x/portal-shared-components/3.0.12, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
 npm/npmjs/@cspotcode/source-map-support/0.8.1, MIT, approved, clearlydefined
 npm/npmjs/@date-io/core/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/@date-io/date-fns/3.0.0, MIT, approved, #14023

package.json

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

src/assets/locales/de/main.json

@@ -19,6 +19,7 @@
     "usermanagement": "Benutzerverwaltung",
     "idpmanagement": "Identitätsprovider (IDP)",
     "technicalsetup": "Technische Integration",
+    "connectormanagement": "Connector-Management",
     "applicationrequests": "Beitrittsanträge",
     "admin": "Verwaltung",
     "developer": "Entwicklung",
@@ -558,13 +559,42 @@
         "name": "Konnektorname",
         "id": "Konnektor-ID",
         "type": "Steckertyp",
-        "details": "Status",
+        "status": "Status",
+        "details": "Einzelheiten",
         "location": "Location",
         "tooltipText": "Connector's status is pending",
         "sdDescription": "SD Registration",
         "sdRegistrationToolTip": "Die Selbstbeschreibung wurde ausgelöst. Der Vorgang kann bis zu ein paar Minuten dauern.",
         "hostCompanyName": "Host",
-        "providerCompanyName": "Customer"
+        "providerCompanyName": "Customer",
+        "connectorUrl": "Connector-URL"
+      },
+      "details": {
+        "heading": "Connector konfigurieren",
+        "name": "Name",
+        "url": "URL",
+        "status": "Status: ",
+        "type": "Typ: ",
+        "host": "Gastgeber: ",
+        "location": "Standort: ",
+        "technicalUser": "Technischer Benutzer: ",
+        "SdRegistration": "SD-Registrierung: ",
+        "SdDocument": "SD-Dokument: ",
+        "noTechnicalUserAvailable": "Kein technischer Benutzer verfügbar",
+        "errormessage": "Fehler! Etwas ist schief gelaufen",
+        "wantToDeleteConnector": "Möchten Sie den Connector wirklich löschen?",
+        "connectorDeletedSuccessfully": "Der Connector wurde erfolgreich gelöscht",
+        "delete": "Löschen",
+        "configureYourConnectorDetails": "Konfigurieren Sie die Connector-Details",
+        "learnMore": "Learn More",
+        "noDocumentAvailable": "Kein Dokument verfügbar",
+        "selfDescriptionDocument": "Selbstbeschreibungsdokument",
+        "deleteConnector": "Connector löschen",
+        "urlUpdatedSuccessfully": "URL erfolgreich aktualisiert",
+        "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"
       },
       "rowValue": {
         "owned": "Owned",
@@ -592,7 +622,7 @@
       "helpTextNew": "Details Connector Configuration",
       "headertitle": "Connector Registration",
       "subheadertitle": "Connector",
-      "tabletitle": "Onboarded Connectors",
+      "tabletitle": "Owned Connectors",
       "managedtabletitle": "Managed Connectors",
       "noConnectorsMessage": "Derzeit sind keine Konnektoren vorhanden. Neue Konnektoren werden hier hinzugefügt, sobald diese hinzugefügt wurden.",
       "imagetext": "Connectoren kombiniert die Vorteile von IDS-Konnektoren (sichere und standardisierte Kommunikation, Kontrolle der Datennutzung) mit der Interoperabilität.",

src/assets/locales/en/main.json

@@ -19,6 +19,7 @@
     "usermanagement": "User Management",
     "idpmanagement": "Identity Provider Config",
     "technicalsetup": "Technical Integration",
+    "connectormanagement": "Connector Management",
     "applicationrequests": "Application Requests",
     "admin": "Administration",
     "developer": "Development",
@@ -557,13 +558,42 @@
         "name": "Connector Name",
         "id": "Connector_ID",
         "type": "Connector Type",
-        "details": "Status",
+        "status": "Status",
+        "details": "Details",
         "location": "Location",
         "tooltipText": "Connector's status is pending",
         "sdDescription": "SD Registration",
         "sdRegistrationToolTip": "The Self-Description is triggered. Process might take up to a couple of minutes.",
         "hostCompanyName": "Host",
-        "providerCompanyName": "Customer"
+        "providerCompanyName": "Customer",
+        "connectorUrl": "Connector URL"
+      },
+      "details": {
+        "heading": "Configure Connector",
+        "name": "Name",
+        "url": "URL",
+        "status": "Status: ",
+        "type": "Type: ",
+        "host": "Host: ",
+        "location": "Location: ",
+        "technicalUser": "Technical User: ",
+        "SdRegistration": "SD Registration: ",
+        "SdDocument": "SD Document: ",
+        "noTechnicalUserAvailable": "No technical user available",
+        "errormessage": "Error! Something went wrong",
+        "wantToDeleteConnector": "Do you really want to delete the connector?",
+        "connectorDeletedSuccessfully": "Connector has been deleted successfully",
+        "delete": "Delete",
+        "configureYourConnectorDetails": "Configure the connector details",
+        "learnMore": "Learn More",
+        "noDocumentAvailable": "No Document available",
+        "selfDescriptionDocument": "Self Description Document",
+        "deleteConnector": "Delete Connector",
+        "urlUpdatedSuccessfully": "URL updated successfully",
+        "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"
       },
       "rowValue": {
         "owned": "Owned",
@@ -590,8 +620,13 @@
       "helpText": "Get some help",
       "helpTextNew": "Details Connector Configuration",
       "headertitle": "Connector Registration",
+      "desc": "The connector combines the benefits of IDS connectors (secure and standardized communication, data usage control) with the interoperability. To register your connector inside the network and create your connector self-description, please register your connector below.",
+      "subDesc1": "Connector Configuration Details",
+      "subDesc2": "https://bpnl00000003crhk-catena-x.authentication.eu10.hana.ondemand.com/oauth/token",
+      "subDesc3": "https://dis-integration-service-prod.eu10.dim.cloud.sap/api/v2.0.0/iatp/catena-x-portal",
+      "subDesc4": "Did:web:xxxxxxxxx",
       "subheadertitle": "Connector",
-      "tabletitle": "Onboarded Connectors",
+      "tabletitle": "Owned Connectors",
       "managedtabletitle": "Managed Connectors",
       "noConnectorsMessage": "Currently there are no onboarded connectors existing. New registered connectors will get added here as soon as available.",
       "imagetext": "The connector combines the benefits of IDS connectors (secure and standardized communication, data usage control) with the interoperability. To register your connector inside the network and create your connector self-description, please register your connector below.",

src/components/pages/EdcConnector/AddConnectorOverlay/components/ConnectorInsertForm.tsx

@@ -39,7 +39,7 @@ import { useEffect, useState } from 'react'
 import './EdcComponentStyles.scss'
 import { ConnectorFormFields } from '..'
 
-const ConnectorFormInput = ({
+export const ConnectorFormInput = ({
   control,
   trigger,
   errors,