feat(Connector): added a view for provided connector (#1569)

eclipse-tractusx/portal-backend#1087

Author: dhiren-singh-007

src/assets/locales/de/main.json

@@ -603,7 +603,8 @@
         "sdDescription": "SD Registration",
         "sdRegistrationToolTip": "Das SD-Dokument ist noch nicht geladen. Dies könnte auf die Deaktivierung der SD-Fabrik zurückzuführen sein. Dieser Prozess wird so bald wie möglich vom CX-Administrator neu ausgelöst.",
         "hostCompanyName": "Host",
-        "providerCompanyName": "Customer",
+        "customerCompanyName": "Customer",
+        "providerCompanyName": "Provider",
         "connectorUrl": "Connector-URL"
       },
       "details": {
@@ -673,6 +674,8 @@
       "tabletitle": "Owned Connectors",
       "managedtabletitle": "Managed Connectors",
       "noConnectorsMessage": "Derzeit sind keine Konnektoren vorhanden. Neue Konnektoren werden hier hinzugefügt, sobald diese hinzugefügt wurden.",
+      "providedtabletitle": "Provided Connectors",
+      "noProvidedConnectorsMessage": "Derzeit stellt Ihr Unternehmen Ihrem Kunden keinen Konnektor zur Verfügung.",
       "imagetext": "Connectoren kombiniert die Vorteile von IDS-Konnektoren (sichere und standardisierte Kommunikation, Kontrolle der Datennutzung) mit der Interoperabilität.",
       "addconnectorbutton": "Connector registrieren",
       "snackbar": {

src/assets/locales/en/main.json

@@ -603,7 +603,8 @@
         "sdDescription": "SD Registration",
         "sdRegistrationToolTip": "The SD Document is not yet loaded. This could be due to the deactivation of the Sd Factory. This process will be retriggered as soon as possible by the CX Admin",
         "hostCompanyName": "Host",
-        "providerCompanyName": "Customer",
+        "customerCompanyName": "Customer",
+        "providerCompanyName": "Provider",
         "connectorUrl": "Connector URL"
       },
       "details": {
@@ -673,6 +674,8 @@
       "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.",
+      "providedTableTitle": "Provided Connectors",
+      "noProvidedConnectorsMessage": "Currently there are no connector provided by your company to your customer.",
       "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.",
       "addconnectorbutton": "Register Connector",
       "snackbar": {

src/components/pages/EdcConnector/edcProvidedConnectorTableColumns.tsx

@@ -0,0 +1,35 @@
+/********************************************************************************
+ * Copyright (c) 2025 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import type { GridColDef } from '@mui/x-data-grid'
+import { useTranslation } from 'react-i18next'
+
+export const ProvidedConnectorTableColumns = (): Array<GridColDef> => {
+  const { t } = useTranslation()
+
+  return [
+    {
+      field: 'hostCompanyName',
+      headerName: t('content.edcconnector.columns.customerCompanyName'),
+      flex: 1,
+      sortable: false,
+      disableColumnMenu: true,
+    },
+  ]
+}

src/components/pages/EdcConnector/index.tsx

@@ -49,6 +49,7 @@ import {
   type ConnectorResponseBody,
   useFetchManagedConnectorsQuery,
   type ConnectorDetailsType,
+  useFetchProvidedConnectorsQuery,
 } from 'features/connector/connectorApiSlice'
 import { ServerResponseOverlay } from 'components/overlays/ServerResponse'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
@@ -65,6 +66,7 @@ import ConnectorDetailsOverlay from './ConnectorDetailsOverlay'
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import { Box } from '@mui/material'
+import { ProvidedConnectorTableColumns } from './edcProvidedConnectorTableColumns'
 
 const EdcConnector = () => {
   const { t } = useTranslation()
@@ -148,10 +150,13 @@ const EdcConnector = () => {
   const rawColumns = ConnectorTableColumns(onDelete) // Common col values for own and managed connectors
   let ownConnectorCols = OwnConnectorTableColumns() // unique col values from own connectors
   let managedConnectorCols = ManagedConnectorTableColumns() // unique col values from managed connectors
+  let providedConnectorCols = ProvidedConnectorTableColumns() // unique col values from provided connectors
   ownConnectorCols.push(...rawColumns)
   ownConnectorCols = swap(ownConnectorCols, 2, 0) //swap position according to the design
   managedConnectorCols.push(...rawColumns)
   managedConnectorCols = swap(managedConnectorCols, 2, 0) //swap position according to the design
+  providedConnectorCols.push(...rawColumns)
+  providedConnectorCols = swap(providedConnectorCols, 2, 0) //swap position according to the design
 
   const closeAndResetModalState = () => {
     setAddConnectorOverlayCurrentStep(0)
@@ -467,35 +472,24 @@ const EdcConnector = () => {
           <Tab
             icon={getTabIcon(1)}
             iconPosition="start"
-            sx={{
-              width: '100%',
-              maxWidth: '550px',
-              '&.Mui-selected': {
-                borderBottom: '3px solid #0f71cb',
-              },
-              textTransform: 'none',
-              display: 'inline-flex',
-            }}
             label={t('content.edcconnector.tabletitle')}
             id={`simple-tab-${activeTab}`}
             aria-controls={`simple-tabpanel-${activeTab}`}
           />
           <Tab
             icon={getTabIcon(2)}
             iconPosition="start"
-            sx={{
-              width: '100%',
-              maxWidth: '550px',
-              '&.Mui-selected': {
-                borderBottom: '3px solid #0f71cb',
-              },
-              textTransform: 'none',
-              display: 'inline-flex',
-            }}
             label={t('content.edcconnector.managedtabletitle')}
             id={`simple-tab-${activeTab}`}
             aria-controls={`simple-tabpanel-${activeTab}`}
           />
+          <Tab
+            icon={getTabIcon(3)}
+            iconPosition="start"
+            label={t('content.edcconnector.providedTableTitle')}
+            id={`simple-tab-${activeTab}`}
+            aria-controls={`simple-tabpanel-${activeTab}`}
+          />
         </Tabs>
         <TabPanel value={activeTab} index={0}>
           <div className="connector-table-container">
@@ -530,6 +524,23 @@ const EdcConnector = () => {
             />
           </div>
         </TabPanel>
+        <TabPanel value={activeTab} index={2}>
+          <div className="connector-table-container">
+            <PageLoadingTable<ConnectorResponseBody, unknown>
+              toolbarVariant="premium"
+              title={t('content.edcconnector.providedTableTitle')}
+              loadLabel={t('global.actions.more')}
+              fetchHook={useFetchProvidedConnectorsQuery}
+              fetchHookRefresh={refresh}
+              getRowId={(row: { [key: string]: string }) => row.id}
+              columns={providedConnectorCols}
+              noRowsMsg={t('content.edcconnector.noProvidedConnectorsMessage')}
+              onCellClick={(params: GridCellParams) => {
+                onTableCellClick(params)
+              }}
+            />
+          </div>
+        </TabPanel>
       </Box>
       {response && (
         <ServerResponseOverlay

src/features/connector/connectorApiSlice.ts

@@ -156,6 +156,13 @@ export const apiSlice = createApi({
       query: (filters) =>
         `/api/administration/connectors/managed?page=${filters.page}&size=10`,
     }),
+    fetchProvidedConnectors: builder.query<
+      PaginResult<ConnectorResponseBody>,
+      PaginFetchArgs
+    >({
+      query: (filters) =>
+        `/api/administration/Connectors/provided?page=${filters.page}&size=10`,
+    }),
     fetchOfferSubscriptions: builder.query<EdcSubscriptionsType[], void>({
       query: () => ({
         url: '/api/administration/Connectors/offerSubscriptions?connectorIdSet=false',
@@ -195,6 +202,7 @@ export const apiSlice = createApi({
 export const {
   useCreateConnectorMutation,
   useCreateManagedConnectorMutation,
+  useFetchProvidedConnectorsQuery,
   useFetchConnectorDetailsQuery,
   useDeleteConnectorMutation,
   useFetchConnectorsQuery,