sig#809: Management Page for Onboarding Service Providers

[jjeroch]

Description:
This ticket involves implementing the frontend of the management page for onboarding service providers. The page should include the following functionalities:

1. Callback URL Configuration: Allow service providers to configure callback URLs for receiving notifications and updates from the customer registration process.

2. IDP Record Management: Provide a user-friendly interface for service providers to manage their IDP (Identity Provider) records. This includes adding, editing, and deleting IDP records.

3. Overview/List of Registered Customers: Fetch and display a list of registered customers along with their status. This list should be dynamically updated from the backend.

Figma Design: https://www.figma.com/file/pcHZWXTQJUguIT75QSk9KW/Portal-Designs?type=design&node-id=10225-93156&mode=design&t=VgPxdipkIebDxY3k-0

Tasks:

• Implement the new page for onboarding service providers - page: /onboardingServiceProvider
• the page should have a responsive design and work well on different devices and screen sizes
• Add the callback section (more details to this section on edit are described in the bottom of the ticket)
• The callback section displays an endpoint (https) or is empty. Depending on the API response
• The IdP and customer details are displayed in a table with tab function

Design:

---

CallBack URL & Edit function

• support an overlay form for configuring callback URL, including validation for the URL format.
• beside the callback url the user needs to configure the client ID and secret
• use for all fields input pattern validation - those should be already available from previous implementations
• the overlay is getting displayed if the user clicked on the overlay page on the edit icon of the callback field
• if the users company has already a callback url defined (response of the GET call) display the details inside the overlay (note - secrets are always only displayed with ***; similar implementation is existing in the idp overlay from Nidhi - a sync might be helpful)

Display the existing Callback URL
GET /api/administration/RegistrationStatus/callback

And change of the callback URL
POST /api/administration/RegistrationStatus/callback

---

IdP Section

Endoint: GET /api/administration/identityprovider/owncompany/identityproviders

• Only display IdPs of the Type "MANAGED"
• Display total number of connectors based on API Response of "MANAGED" idps
• Display the Alias based on API response "alias"
• Display the DisplayName based on API response "displayName"
• The wireframe called "Progress" bar should be called "Status" and display with an chipcard the IdP Status based on API response "enabled". If enabled is "true" display "Active"; otherwise "Inactive"
• Enable the Action Sub-Menu option where the user can decide between "Activate", "Deactivate", "Delete" and "Edit"..to be recheck with the Product Owner if any logic is needed
• Enable the button "Add Identity Provider"
• If the user selects "Add Identity Provider" the overlay (same as used in the IdP create page) is getting displayed with automatic selection of "Managed" IdP
• Out-of-Scope: do not implement the "Auth Method" - the auth method is always the same

---

Customer Sections

• Fetch and display a list of registered customers along with their status.
• Implement pagination or infinite scrolling for the customer list if necessary.
• Handle any error scenarios, such as failed API requests or invalid data.

[jjeroch]

@lavanya-bmw more details will be needed as part of the refinement. I suggest to start based on the existing information and after the initial functions are implemented lets meet in a meeting and discuss further details

[lavanya-bmw]

@jjeroch
-Please provide the API endpoint for 'customer overview' tab
-Regarding OSP Identity Provider(IDPs)-Tab 1, the same API endpoint is used in https://portal.dev.demo.catena-x.net/idpmanagement please confirm if I can re-use the same table if possible and design looks as below:

[lavanya-bmw]

[jjeroch]

@jjeroch -Please provide the API endpoint for 'customer overview' tab -Regarding OSP Identity Provider(IDPs)-Tab 1, the same API endpoint is used in https://portal.dev.demo.catena-x.net/idpmanagement please confirm if I can re-use the same table if possible and design looks as below:

@lavanya-bmw
yes, the table can get used :)

Regarding the endpoint - I am checking the available implementation right now. Will come back asap.

[jjeroch]

wont make it to 24.08. - rescheduled to 24.12

[MaximilianHauer]

@lavanya-bmw PR is under review and should be merged today
eclipse-tractusx/portal-backend#916
API name will be GET /api/administration/registration/network/companies

[MaximilianHauer]

@lavanya-bmw please adjust the design on this structure it should be identical to the customer overview
please have a look into the screenshot provided above my julia

[MaximilianHauer]

as aligned @lavanya-bmw

• remove "User List"
• add search field based on the ticket sig#809 - Enhance osp identityproviders endpoint with search function  portal-backend#981
• adjust design to be identical with customer overview
• pagination is currently skipped as the endpoint does not provide it and the adjustment would need to refurbish the whole pagination logic

[evegufy]

@MaximilianHauer should we move the issue to milestone for R24.12 due to #541 (comment)?

[MaximilianHauer]

@evegufy moved it to 24.12.
@lavanya-bmw the endpoint is adjusted please finish the ticket