diff --git a/CHANGELOG.md b/CHANGELOG.md index d8242e3c2..99cf9c9ab 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/DEPENDENCIES b/DEPENDENCIES index 09ab5658a..af74fd3a7 100644 --- a/DEPENDENCIES +++ b/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 diff --git a/package.json b/package.json index e91aa707c..c1780099b 100644 --- a/package.json +++ b/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", diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index f1ec3a167..29581c9e1 100644 --- a/src/assets/locales/de/main.json +++ b/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.", diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index 36c017d2c..cd7ca8b2b 100644 --- a/src/assets/locales/en/main.json +++ b/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.", diff --git a/src/components/pages/EdcConnector/AddConnectorOverlay/components/ConnectorInsertForm.tsx b/src/components/pages/EdcConnector/AddConnectorOverlay/components/ConnectorInsertForm.tsx index c7fdb894f..46e78b1e6 100644 --- a/src/components/pages/EdcConnector/AddConnectorOverlay/components/ConnectorInsertForm.tsx +++ b/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, diff --git a/src/components/pages/EdcConnector/ConnectorDetailsOverlay.tsx b/src/components/pages/EdcConnector/ConnectorDetailsOverlay.tsx new file mode 100644 index 000000000..ac0887d03 --- /dev/null +++ b/src/components/pages/EdcConnector/ConnectorDetailsOverlay.tsx @@ -0,0 +1,487 @@ +/******************************************************************************** + * Copyright (c) 2024 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 { useTranslation } from 'react-i18next' +import { + Dialog, + DialogContent, + Button, + DialogActions, + DialogHeader, + Input, + Typography, + Checkbox, + CircleProgress, + LoadingButton, +} from '@catena-x/portal-shared-components' +import { + type ConnectorDetailsType, + useDeleteConnectorMutation, + useUpdateConnectorUrlMutation, +} from 'features/connector/connectorApiSlice' +import { Box, Divider, Grid } from '@mui/material' +import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined' +import { useEffect, useState } from 'react' +import { error, success } from 'services/NotifyService' +import EditIcon from '@mui/icons-material/Edit' +import Patterns from 'types/Patterns' +import { useFetchDocumentMutation } from 'features/serviceManagement/apiSlice' +import { download } from 'utils/downloadUtils' + +interface DeleteConfirmationOverlayProps { + openDialog?: boolean + handleOverlayClose: React.MouseEventHandler + overlayData?: ConnectorDetailsType +} + +const ConnectorDetailsOverlay = ({ + openDialog = false, + handleOverlayClose, + overlayData, +}: DeleteConfirmationOverlayProps) => { + const { t } = useTranslation() + const [fetchDocumentById] = useFetchDocumentMutation() + const [openDeleteConnector, setOpenDeleteConnector] = useState(false) + const [deleteConnectorSuccess, setDeleteConnectorSuccess] = useState(false) + const [deleteConnector] = useDeleteConnectorMutation() + const [loading, setLoading] = useState(false) + const [enableConnectorUrl, setEnableConnectorUrl] = useState(true) + const [updateConnectorUrl] = useUpdateConnectorUrlMutation() + const [isLoading, setIsLoading] = useState(false) + const [enableUrlApiErrorMsg, setEnableUrlApiErrorMsg] = useState(false) + const [urlErrorMsg, setUrlErrorMsg] = useState('') + const [connectorUrlValue, setConnectorUrlValue] = useState('') + + useEffect(() => { + setConnectorUrlValue(overlayData?.connectorUrl ?? '') + }, [overlayData]) + + const detailsData = [ + { + key: t('content.edcconnector.details.status'), + value: overlayData?.status ?? '', + }, + { + key: t('content.edcconnector.details.type'), + value: overlayData?.type ?? '', + }, + { + key: t('content.edcconnector.details.host'), + value: overlayData?.hostCompanyName ?? '', + }, + { + key: t('content.edcconnector.details.location'), + value: overlayData?.location ?? '', + }, + { + key: t('content.edcconnector.details.technicalUser'), + value: + overlayData?.technicalUser === null + ? t('content.edcconnector.details.noTechnicalUserAvailable') + : overlayData?.technicalUser, + }, + { + key: t('content.edcconnector.details.SdRegistration'), + value: overlayData?.selfDescriptionDocumentId, + }, + ] + + const handleDownloadFn = async (documentId: string, documentName: string) => { + if (overlayData?.id) { + try { + const response = await fetchDocumentById({ + appId: overlayData.id, + documentId, + }).unwrap() + + const fileType = response.headers.get('content-type') + const file = response.data + download(file, fileType, documentName) + } catch (err) { + error(t('content.edcconnector.details.errormessage'), '', '') + } + } + } + + const handleDeleteConnector = async () => { + setLoading(true) + await deleteConnector(overlayData?.id ?? '') + .unwrap() + .then(() => { + setDeleteConnectorSuccess(true) + setLoading(false) + }) + .catch((err) => { + setDeleteConnectorSuccess(false) + setLoading(false) + error( + err.status === 409 + ? err.data.title + : t('content.edcconnector.details.errormessage'), + '', + err + ) + }) + } + + const handleUrlSubmit = async () => { + setIsLoading(true) + + if (overlayData?.id) { + const saveData = { + connectorId: overlayData.id, + body: { + connectorUrl: connectorUrlValue, + }, + } + + await updateConnectorUrl(saveData) + .unwrap() + .then(() => { + success(t('content.edcconnector.details.urlUpdatedSuccessfully')) + setEnableConnectorUrl(true) + }) + .catch(() => { + setEnableUrlApiErrorMsg(true) + }) + setIsLoading(false) + } + } + + const validateURL = (value: string) => { + setConnectorUrlValue(value) + if (!Patterns.URL.test(value.trim())) { + setUrlErrorMsg(t('content.edcconnector.details.pleaseEnterValidURL')) + } else { + setUrlErrorMsg('') + } + } + + return ( +
+ {openDeleteConnector && ( + + + + + {deleteConnectorSuccess + ? t('content.edcconnector.details.connectorDeletedSuccessfully') + : t('content.edcconnector.details.wantToDeleteConnector')} + + + + {deleteConnectorSuccess ? ( + + ) : ( + + )} + + {loading ? ( + + + + ) : ( + !deleteConnectorSuccess && ( + + ) + )} + + + )} + + + + + + {t('content.edcconnector.details.configureYourConnectorDetails')} + + + + + + + {t('content.edcconnector.details.name')} + + } + value={overlayData?.name ?? ''} + disabled={true} + sx={{ mb: 2 }} + /> + + + + {t('content.edcconnector.details.url')} + + } + value={connectorUrlValue} + disabled={enableConnectorUrl} + onChange={(e) => { + validateURL(e.target.value) + }} + /> + + {urlErrorMsg} + + + + { + setEnableConnectorUrl(false) + setEnableUrlApiErrorMsg(false) + }} + /> + + {!enableConnectorUrl && ( + <> + + {t('content.edcconnector.details.note')} + + + {t('content.edcconnector.details.noteDesc')} + + + + {isLoading ? ( + { + // do nothing + }} + loading={isLoading} + label={`${t('global.actions.confirm')}`} + loadIndicator="Loading..." + /> + ) : ( + + )} + + + )} + + {enableUrlApiErrorMsg && ( + + {t('content.edcconnector.details.urlErrorMessage')} + + )} + + + {detailsData.map((item) => { + return ( + + + + {item.key} + + + + {item.key === + t('content.edcconnector.details.SdRegistration') ? ( + + + + ) : ( + + + {item.value} + + + )} + + ) + })} + + + + + {t('content.edcconnector.details.SdDocument')} + + + + + {overlayData?.selfDescriptionDocumentId === null ? ( + t('content.edcconnector.details.noDocumentAvailable') + ) : ( + <> + + + + )} + + + + + + + + + + +
+ ) +} + +export default ConnectorDetailsOverlay diff --git a/src/components/pages/EdcConnector/EdcConnector.scss b/src/components/pages/EdcConnector/EdcConnector.scss index 1feed77fb..e0cecec46 100644 --- a/src/components/pages/EdcConnector/EdcConnector.scss +++ b/src/components/pages/EdcConnector/EdcConnector.scss @@ -45,3 +45,31 @@ padding: 20px; } } + +.edc-connector-header { + text-align: center; + width: 100%; + margin: 0 auto; + .edc-connector-title { + text-align: center; + padding-bottom: 20px; + position: relative; + } + .edc-connector-title::after { + content: ''; + width: 70px; + border-bottom: 2px solid; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + } + .edc-connector-desc { + width: 74%; + margin: 50px auto; + } + .add-idp-btn { + margin-top: 30px; + text-transform: capitalize; + } +} diff --git a/src/components/pages/EdcConnector/edcConnectorTableColumns.tsx b/src/components/pages/EdcConnector/edcConnectorTableColumns.tsx index 32c81c6eb..73e42a03c 100644 --- a/src/components/pages/EdcConnector/edcConnectorTableColumns.tsx +++ b/src/components/pages/EdcConnector/edcConnectorTableColumns.tsx @@ -20,6 +20,7 @@ import type { GridColDef } from '@mui/x-data-grid' import { + IconButton, StatusTag, Tooltips, Typography, @@ -29,6 +30,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox' import Box from '@mui/material/Box' import type { ConnectorContentAPIResponse } from 'features/connector/types' import { useTranslation } from 'react-i18next' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' // Columns definitions of Connector page Data Grid export const ConnectorTableColumns = ( @@ -40,14 +42,14 @@ export const ConnectorTableColumns = ( { field: 'name', headerName: t('content.edcconnector.columns.name'), - flex: 1.3, + flex: 1, disableColumnMenu: true, sortable: false, }, { field: 'type', headerName: t('content.edcconnector.columns.type'), - flex: 1, + flex: 0.7, sortable: false, disableColumnMenu: true, renderCell: ({ row }: { row: ConnectorContentAPIResponse }) => ( @@ -58,22 +60,10 @@ export const ConnectorTableColumns = ( ), }, - { - field: 'location', - headerName: t('content.edcconnector.columns.location'), - flex: 0.8, - sortable: false, - disableColumnMenu: true, - align: 'center', - headerAlign: 'center', - renderCell: ({ row }: { row: ConnectorContentAPIResponse }) => ( - {row.location} - ), - }, { field: 'selfDescriptionDocumentId', headerName: t('content.edcconnector.columns.sdDescription'), - flex: 1, + flex: 0.8, sortable: false, disableColumnMenu: true, align: 'center', @@ -116,10 +106,33 @@ export const ConnectorTableColumns = ( ), }, + { + field: 'connectorUrl', + headerName: t('content.edcconnector.columns.connectorUrl'), + flex: 1, + sortable: false, + disableColumnMenu: true, + align: 'center', + headerAlign: 'center', + }, { field: 'details', headerName: t('content.edcconnector.columns.details'), - flex: 1.2, + flex: 0.8, + sortable: false, + disableColumnMenu: true, + align: 'center', + headerAlign: 'center', + renderCell: () => ( + + + + ), + }, + { + field: 'status', + headerName: t('content.edcconnector.columns.status'), + flex: 0.8, sortable: false, disableColumnMenu: true, align: 'center', diff --git a/src/components/pages/EdcConnector/index.tsx b/src/components/pages/EdcConnector/index.tsx index 690eadea0..2100048a2 100644 --- a/src/components/pages/EdcConnector/index.tsx +++ b/src/components/pages/EdcConnector/index.tsx @@ -18,18 +18,21 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import { useState, useEffect } from 'react' +import { type SyntheticEvent, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { ConnectorTableColumns } from 'components/pages/EdcConnector/edcConnectorTableColumns' import type { GridCellParams, GridColDef } from '@mui/x-data-grid' import UserService from 'services/UserService' import { - PageHeader, Typography, PageSnackbar, PageLoadingTable, + Button, + IconButton, + Tabs, + Tab, + TabPanel, } from '@catena-x/portal-shared-components' -import PictureWithText from 'components/shared/frame/PictureWithText' import AddConnectorOverlay from './AddConnectorOverlay' import type { FormFieldsType } from 'components/pages/EdcConnector/AddConnectorOverlay' import './EdcConnector.scss' @@ -45,6 +48,7 @@ import { useFetchConnectorsQuery, type ConnectorResponseBody, useFetchManagedConnectorsQuery, + type ConnectorDetailsType, } from 'features/connector/connectorApiSlice' import { ServerResponseOverlay } from 'components/overlays/ServerResponse' import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline' @@ -57,6 +61,10 @@ import { useAddServiceAccountMutation, useFetchServiceAccountRolesQuery, } from 'features/admin/serviceApiSlice' +import ConnectorDetailsOverlay from './ConnectorDetailsOverlay' +import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' +import { Box } from '@mui/material' const EdcConnector = () => { const { t } = useTranslation() @@ -109,6 +117,9 @@ const EdcConnector = () => { const [newUserLoading, setNewUserLoading] = useState(false) const [newUserSuccess, setNewUserSuccess] = useState(false) const [serviceAccId, setServiceAccId] = useState('') + const [openDetailsOverlay, setOpenDetailsOverlay] = useState(false) + const [overlayData, setOverlayData] = useState() + const [activeTab, setActiveTab] = useState(0) useEffect(() => { if (roles && roles.length > 0) @@ -147,8 +158,16 @@ const EdcConnector = () => { setAddConnectorOverlayOpen(false) } - const onTableCellClick = (params: GridCellParams) => { + const onTableCellClick = (params: GridCellParams, title: string) => { // Show overlay only when detail field clicked + if ( + params.field === 'details' && + title === t('content.edcconnector.tabletitle') + ) { + setOpenDetailsOverlay(true) + setOverlayData(params.row) + } + setSelectedConnector(params.row as ConnectorContentAPIResponse) } @@ -288,10 +307,35 @@ const EdcConnector = () => { } }, []) - const onHelpButtonClicked = () => { - const url = - '/documentation/?path=user%2F02.+Technical+Integration%2F01.+Connector+Registration%2F02.+Connector+Registration.md' - window.open(url, '_blank') + const handleChange = ( + _event: SyntheticEvent, + newValue: number + ) => { + setActiveTab(newValue) + } + + const getTabIcon = (step: number) => { + return ( + + {step} + + ) } return ( @@ -304,6 +348,13 @@ const EdcConnector = () => { severity={notificationType} open={notificationOpen} /> + { + setOpenDetailsOverlay(false) + }} + overlayData={overlayData} + /> { @@ -331,54 +382,147 @@ const EdcConnector = () => { setViewConfigurationDetailsOverlayOpen(false) }} /> - -
- { - onHelpButtonClicked() - }} - onButtonClicked={() => { - setAddConnectorOverlayOpen(true) - }} - onNewHelpButtonClicked={() => { - setViewConfigurationDetailsOverlayOpen(true) - }} - /> +
+
+ + {t('content.edcconnector.headertitle')} + + + {t('content.edcconnector.desc')} + + + + + {t('content.edcconnector.subDesc1')} + + + {t('content.edcconnector.subDesc2')} + + + {t('content.edcconnector.subDesc3')} + + + {' '} + {t('content.edcconnector.subDesc4')}{' '} + + + { + setViewConfigurationDetailsOverlayOpen(true) + }} + sx={{ + right: '0', + position: 'absolute', + top: '50%', + msTransform: 'translateY(-50%)', + transform: 'translateY(-50%)', + }} + > + + + + +
+ +
+
-
- - toolbarVariant="premium" - title={t('content.edcconnector.tabletitle')} - loadLabel={t('global.actions.more')} - fetchHook={useFetchConnectorsQuery} - fetchHookRefresh={refresh} - getRowId={(row: { [key: string]: string }) => row.id} - columns={ownConnectorCols} - onCellClick={(params: GridCellParams) => { - onTableCellClick(params) - }} - /> -
-
- - toolbarVariant="premium" - title={t('content.edcconnector.managedtabletitle')} - loadLabel={t('global.actions.more')} - fetchHook={useFetchManagedConnectorsQuery} - fetchHookRefresh={refresh} - getRowId={(row: { [key: string]: string }) => row.id} - columns={managedConnectorCols} - noRowsMsg={t('content.edcconnector.noConnectorsMessage')} - onCellClick={(params: GridCellParams) => { - onTableCellClick(params) - }} - /> -
+ + + + + + + +
+ + toolbarVariant="premium" + title={t('content.edcconnector.tabletitle')} + loadLabel={t('global.actions.more')} + fetchHook={useFetchConnectorsQuery} + fetchHookRefresh={refresh} + getRowId={(row: { [key: string]: string }) => row.id} + columns={ownConnectorCols} + onCellClick={(params: GridCellParams) => { + onTableCellClick(params, t('content.edcconnector.tabletitle')) + }} + /> +
+ + +
+ + toolbarVariant="premium" + title={t('content.edcconnector.managedtabletitle')} + loadLabel={t('global.actions.more')} + fetchHook={useFetchManagedConnectorsQuery} + fetchHookRefresh={refresh} + getRowId={(row: { [key: string]: string }) => row.id} + columns={managedConnectorCols} + noRowsMsg={t('content.edcconnector.noConnectorsMessage')} + onCellClick={(params: GridCellParams) => { + onTableCellClick( + params, + t('content.edcconnector.managedtabletitle') + ) + }} + /> +
+ + {response && ( { ) case NotificationType.WELCOME_CONNECTOR_REGISTRATION: return ( - + ) case NotificationType.WELCOME_USE_CASES: return diff --git a/src/components/shared/frame/PictureWithText/PictureWithText.scss b/src/components/shared/frame/PictureWithText/PictureWithText.scss deleted file mode 100644 index a593998b7..000000000 --- a/src/components/shared/frame/PictureWithText/PictureWithText.scss +++ /dev/null @@ -1,35 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2023 BMW Group AG - * Copyright (c) 2023 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 - ********************************************************************************/ - -.picture-with-text-container { - display: flex; - flex-direction: row; - justify-content: space-between; - flex: 1; - align-items: center; - - .text-with-button-wrapper { - padding-left: 100px; - flex-direction: column; - display: flex; - align-items: flex-start; - text-align: left; - } -} diff --git a/src/components/shared/frame/PictureWithText/index.tsx b/src/components/shared/frame/PictureWithText/index.tsx deleted file mode 100644 index f9e732959..000000000 --- a/src/components/shared/frame/PictureWithText/index.tsx +++ /dev/null @@ -1,102 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2023 BMW Group AG - * Copyright (c) 2023 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 { Typography, Button } from '@catena-x/portal-shared-components' -import { useTranslation } from 'react-i18next' -import './PictureWithText.scss' -import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline' -import ArrowForwardIcon from '@mui/icons-material/ArrowForward' -import { getAssetBase } from 'services/EnvironmentService' - -type PictureWithTextProps = { - image?: string - text: string - onButtonClicked?: () => void - onHelpButtonClicked?: () => void - onNewHelpButtonClicked?: () => void -} - -export default function PictureWithText({ - image = `${getAssetBase()}/images/content/teaser.png`, - text, - onButtonClicked, - onHelpButtonClicked, - onNewHelpButtonClicked, -}: PictureWithTextProps) { - const { t } = useTranslation() - - return ( -
- {'alt -
- - {t(text)} - - - {onNewHelpButtonClicked && ( - - )} - -
-
- ) -} diff --git a/src/features/connector/connectorApiSlice.ts b/src/features/connector/connectorApiSlice.ts index bb7ed10a1..6085455a9 100644 --- a/src/features/connector/connectorApiSlice.ts +++ b/src/features/connector/connectorApiSlice.ts @@ -83,6 +83,26 @@ export interface DecentralIdentityUrlsType { decentralIdentityManagementAuthUrl: string } +export interface ConnectorDetailsType { + name: string + location: string + id: string + type: string + status: string + hostId: string + hostCompanyName: string + connectorUrl: string + technicalUser: string + selfDescriptionDocumentId?: string | null +} + +export type updateConnectorUrlType = { + connectorId: string + body: { + connectorUrl: string + } +} + export const apiSlice = createApi({ reducerPath: 'rtk/admin/connector', baseQuery: fetchBaseQuery(apiBaseQuery()), @@ -101,6 +121,9 @@ export const apiSlice = createApi({ body, }), }), + fetchConnectorDetails: builder.query({ + query: (connectorID) => `/api/administration/Connectors/${connectorID}`, + }), deleteConnector: builder.mutation({ query: (connectorID) => ({ url: `/api/administration/Connectors/${connectorID}`, @@ -138,15 +161,24 @@ export const apiSlice = createApi({ fetchDecentralIdentityUrls: builder.query({ query: () => 'api/administration/companydata/decentralidentity/urls', }), + updateConnectorUrl: builder.mutation({ + query: (data) => ({ + url: `/api/administration/Connectors/${data.connectorId}/connectorUrl`, + method: 'PUT', + body: data.body, + }), + }), }), }) export const { useCreateConnectorMutation, useCreateManagedConnectorMutation, + useFetchConnectorDetailsQuery, useDeleteConnectorMutation, useFetchConnectorsQuery, useFetchManagedConnectorsQuery, useFetchOfferSubscriptionsQuery, useFetchDecentralIdentityUrlsQuery, + useUpdateConnectorUrlMutation, } = apiSlice diff --git a/src/types/Config.tsx b/src/types/Config.tsx index c7e36d5a7..5c7e9f591 100644 --- a/src/types/Config.tsx +++ b/src/types/Config.tsx @@ -402,10 +402,16 @@ export const ALL_PAGES: IPage[] = [ { name: PAGES.COOKIE_POLICY, element: }, { name: PAGES.ABOUTPAGE, element: }, { - name: PAGES.TECHNICAL_SETUP, + name: PAGES.CONNECTOR_MANAGEMENT, role: ROLES.TECHNICAL_SETUP_VIEW, element: , }, + // The below code which refers to "technicalsetup" page should get removed again with 24.12 since we expect that all users which are using bookmarks have switched to the new page. + { + name: PAGES.TECHNICAL_SETUP, + role: ROLES.TECHNICAL_SETUP_VIEW, + element: , + }, { name: PAGES.LOGOUT, element: }, { name: PAGES.INTRODUCTION, element: }, { name: PAGES.INTRODUCTION_APP_PROVIDER, element: }, @@ -806,7 +812,7 @@ export const userMenuFull = [ PAGES.NOTIFICATIONS, PAGES.USER_MANAGEMENT, PAGES.IDP_MANAGEMENT, - PAGES.TECHNICAL_SETUP, + PAGES.CONNECTOR_MANAGEMENT, PAGES.APPLICATION_REQUESTS, PAGES.INVITE, PAGES.COMPANY_ROLE, @@ -824,7 +830,7 @@ export const userMenuCompany = [ PAGES.ORGANIZATION, PAGES.USER_MANAGEMENT, PAGES.IDP_MANAGEMENT, - PAGES.TECHNICAL_SETUP, + PAGES.CONNECTOR_MANAGEMENT, PAGES.APPLICATION_REQUESTS, PAGES.INVITE, PAGES.COMPANY_ROLE, diff --git a/src/types/Constants.ts b/src/types/Constants.ts index 14b8c66fc..faf68fe27 100644 --- a/src/types/Constants.ts +++ b/src/types/Constants.ts @@ -46,6 +46,7 @@ export enum PAGES { PARTNER_NETWORK = 'partnernetwork', USER_MANAGEMENT = 'usermanagement', TECHNICAL_SETUP = 'technicalsetup', + CONNECTOR_MANAGEMENT = 'connectormanagement', TECHUSER_MANAGEMENT = 'technicaluser', TECHUSER_DETAILS = 'techuserdetails', IDP_MANAGEMENT = 'idpmanagement', diff --git a/yarn.lock b/yarn.lock index 16e355ee7..73775a89a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -336,10 +336,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@catena-x/portal-shared-components@^3.0.11": - version "3.0.11" - resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.11.tgz#24efe546ef1f6c31d76afd129e20a8709ff3ccd6" - integrity sha512-7BLuDQqKnT4ghcIAIMRTIhE84Cz7a/ooIr3mYJ7Hs9XWHSF8JIodXEkRWI9/50S+pdIhdk81ueMvE9nqW37HNQ== +"@catena-x/portal-shared-components@^3.0.12": + version "3.0.12" + resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.12.tgz#c8dbfe05c4adab19a9ca06e3ba60142b4d03a3a8" + integrity sha512-t6hcg/+koQgVYz6GsgPfCs9MbS1pR/i96JgTjlI3zbbFmttbZr/jTwTvJxg0Jb4igjSATL3tBuT5Dk6hNQQFAg== dependencies: "@date-io/date-fns" "^3.0.0" "@emotion/react" "^11.11.4"