feat(ospm): create new page (#1052)

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Feature
+
+- **Onboarding Service Provider Management**:
+  - Create new page for onboarding service provider management [#1052](https://github.com/eclipse-tractusx/portal-frontend/pull/1052)
 - Company data
   - Disable confirm button if input value is not matching with the regular expression
   - Fix infinite loop issue in add New Address Modal

src/assets/locales/de/main.json

@@ -69,7 +69,8 @@
     "companySubscriptions": "Firmenabonnements",
     "mycompany": "My Company",
     "mynotifications": "My Notifications",
-    "companyData": "Company Data"
+    "companyData": "Company Data",
+    "ManagementOnboardingServiceProvider": "Onboarding Service Provider"
   },
   "overlays": {
     "invite": "Neuen Geschäftspartner einladen",
@@ -2144,6 +2145,37 @@
         "title": "Create {name}",
         "description": "The changes could not be saved. Please try again"
       }
+    },
+    "onboardingServiceProvider": {
+      "headertitle": "Onboarding-Dienstleister-Management",
+      "desc": "[description] lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "subDesc1": "OSP-Callback konfiguriert",
+      "subDesc2": "https://url.lorem.ipsum.dolor.sit.amet",
+      "tabletitle1": "OSP-Identitätsanbieter (IDPs)",
+      "tabletitle2": "Kundenübersicht",
+      "userList": "Benutzerliste",
+      "addIdentityProvider": "Identitätsanbieter hinzufügen",
+      "dialogTitle": "IdP-Metadaten konfigurieren",
+      "table": {
+        "customerName": "Kundenname",
+        "status": "Status",
+        "idpName": "IDP-Name",
+        "users": "Anzahl der Benutzer"
+      },
+      "success": "OSP-Rückruf erfolgreich konfiguriert",
+      "callbackUrlError": "Fehler beim Konfigurieren des OSP-Rückrufs",
+      "callbackUrl": {
+        "name": "Rückruf-URL",
+        "hint": "Geben Sie die Rückruf-URL Ihres IDP ein, die mit „/.well-known/openid-configuration“ endet'"
+      },
+      "clientId": {
+        "name": "Kunden-ID",
+        "hint": "Geben Sie die von Ihrem IdP bereitgestellte Client-ID ein"
+      },
+      "clientSecret": {
+        "name": "Client-Geheimnis",
+        "hint": "Geben Sie das von Ihrem IdP bereitgestellte Client-Geheimnis ein"
+      }
     }
   },
   "navigation": {

src/assets/locales/en/main.json

@@ -68,7 +68,8 @@
     "companySubscriptions": "Company Subscriptions",
     "mycompany": "My Company",
     "mynotifications": "My Notifications",
-    "companyData": "Company Data"
+    "companyData": "Company Data",
+    "ManagementOnboardingServiceProvider": "Onboarding Service Provider"
   },
   "overlays": {
     "invite": "Invite new Business Partner",
@@ -2116,6 +2117,37 @@
         "title": "Create {name}",
         "description": "The changes could not be saved. Please try again"
       }
+    },
+    "onboardingServiceProvider": {
+      "headertitle": "Onboarding Service Provider Management",
+      "desc": "[description] lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "subDesc1": "OSP Callback configured",
+      "subDesc2": "https://url.lorem.ipsum.dolor.sit.amet",
+      "tabletitle1": "OSP Identity Provider (IDPs)",
+      "tabletitle2": "Customer Overview",
+      "userList": "User List",
+      "addIdentityProvider": "Add Identity Provider",
+      "dialogTitle": "Configure IdP Metadata",
+      "table": {
+        "customerName": "Customer Name",
+        "status": "Status",
+        "idpName": "IDP name",
+        "users": "# of users"
+      },
+      "success": "Successfully configured OSP callback",
+      "callbackUrlError": "Failed configuring OSP callback",
+      "callbackUrl": {
+        "name": "Callback URL",
+        "hint": "Enter the callback URL from your IDP that ends with '/.well-known/openid-configuration'"
+      },
+      "clientId": {
+        "name": "Client ID",
+        "hint": "Enter the client ID provided by your IdP"
+      },
+      "clientSecret": {
+        "name": "Client Secret",
+        "hint": "Enter the client secret provided by your IdP"
+      }
     }
   },
   "navigation": {

src/components/pages/EdcConnector/EdcConnector.scss

@@ -26,10 +26,6 @@
   margin: 0;
   padding: 0;
   width: 100%;
-
-  .picture-with-text-section {
-    margin-top: 50px;
-  }
 }
 
 .connector-type-selector-container {

src/components/pages/IDPManagement/IDPList.tsx

@@ -78,7 +78,7 @@ const MenuItemOpenOverlay = ({
   )
 }
 
-export const IDPList = () => {
+export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
   const { t } = useTranslation()
   const ti = useTranslation('idp').t
 
@@ -252,6 +252,92 @@ export const IDPList = () => {
     )
   }
 
+  const renderManagementOSPMenu = (idp: IdentityProvider) => {
+    const isManagedIdp = idp.identityProviderTypeId === IDPCategory.MANAGED
+    const menuItems = {
+      edit: (
+        <MenuItemOpenOverlay
+          overlay={OVERLAYS.UPDATE_IDP}
+          label={ti('action.edit')}
+          id={idp.identityProviderId}
+        />
+      ),
+      delete: isManagedIdp ? (
+        <MenuItemOpenOverlay
+          overlay={OVERLAYS.DELETE_MANAGED_IDP}
+          label={ti('action.delete')}
+          id={idp.identityProviderId}
+        />
+      ) : (
+        <MenuItem
+          sx={{
+            color: deleteLoading ? '#b6b6b6' : '#111111',
+          }}
+          onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+            !deleteLoading && doDelete(e, idp)
+          }
+          disabled={idp.enabled}
+        >
+          {ti('action.delete')}
+          {deleteLoading && (
+            <CircleProgress
+              colorVariant="primary"
+              variant="indeterminate"
+              sx={{
+                marginLeft: '5px',
+              }}
+              size={15}
+            />
+          )}
+        </MenuItem>
+      ),
+      enableToggle:
+        isManagedIdp && idp.enabled ? (
+          <MenuItemOpenOverlay
+            overlay={OVERLAYS.DISABLE_MANAGED_IDP}
+            label={ti('action.disable')}
+            id={idp.identityProviderId}
+          />
+        ) : (
+          <MenuItem
+            sx={{
+              color: disableLoading ? '#b6b6b6' : '#111111',
+            }}
+            disabled={
+              data &&
+              idp.enabled &&
+              data?.filter((idp: IdentityProvider) => idp.enabled).length < 2
+            }
+            onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
+              !disableLoading && doEnableDisableToggle(e, idp)
+            }
+          >
+            {idp.enabled ? ti('action.disable') : ti('action.enable')}
+            {disableLoading && (
+              <CircleProgress
+                size={15}
+                variant="indeterminate"
+                sx={{
+                  marginLeft: '5px',
+                }}
+                colorVariant="primary"
+              />
+            )}
+          </MenuItem>
+        ),
+    }
+
+    return (
+      <div className="action-menu">
+        <DropdownMenu buttonText={ti('action.actions')}>
+          {menuItems.edit}
+          {menuItems.enableToggle}
+          {menuItems.delete}
+        </DropdownMenu>
+      </div>
+    )
+  }
+
   return (
     <Table
       rowsCount={idpsData?.length}
@@ -320,10 +406,17 @@ export const IDPList = () => {
           headerName: t('global.field.action'),
           flex: 2,
           sortable: false,
-          renderCell: ({ row }: { row: IdentityProvider }) => renderMenu(row),
+          renderCell: ({ row }: { row: IdentityProvider }) =>
+            isManagementOSP ? renderManagementOSPMenu(row) : renderMenu(row),
         },
       ]}
-      rows={idpsData ?? []}
+      rows={
+        (isManagementOSP
+          ? idpsData?.filter(
+              (a) => a.identityProviderTypeId === IDPCategory.MANAGED
+            )
+          : idpsData) ?? []
+      }
       getRowId={(row: { [key: string]: string }) => row.identityProviderId}
       hasBorder={false}
     />

src/components/pages/OnboardingServiceProvider/OnboardingServiceProvider.scss

@@ -0,0 +1,51 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+.onboarding-service-page-container {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.onboarding-service-header {
+  text-align: center;
+  width: 100%;
+  margin: 0 auto;
+
+  .onboarding-service-title {
+    text-align: center;
+    padding-bottom: 20px;
+    position: relative;
+  }
+
+  .onboarding-service-title::after {
+    content: '';
+    width: 70px;
+    border-bottom: 2px solid;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .onboarding-service-desc {
+    width: 74%;
+    margin: 50px auto;
+  }
+}