Merge pull request #741 from eclipse-tractusx/release/v2.0.0-RC4

build(2.0.0-rc4): merge release into main

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 2.0.0-RC4
+
+### Feature
+
+- Connected Credential Management UI with new Issuer Component
+
+  ### Bugfix
+
+- App Release Process
+  - updated roles endpoint to get roles
+
 ## 2.0.0-RC3
 
 ### Bugfix

index.html

@@ -29,7 +29,7 @@
     <div id="app"></div>
     <script>
       // Do NOT change 'ENV' without changing 'custom_env_vars_anchor' in scripts/inject-dynamic-env.sh as well
-      const ENV = {PORTAL_ASSETS_URL:"http://localhost:3000/assets",PORTAL_BACKEND_URL:"https://portal-backend.example.org",CENTRALIDP_URL:"https://centralidp.example.org/auth",BPDM_API_URL:"https://business-partners.example.org/pool/api",SEMANTICS_URL:"https://semantics.example.org",MANAGED_IDENTITY_WALLETS_NEW_URL:"https://managed-identity-wallets-new.example.org",REALM:"CX-Central",CLIENT_ID:"Cl2-CX-Portal",CLIENT_ID_SEMANTIC:"Cl3-CX-Semantic",CLIENT_ID_MIW:"Cl5-CX-Custodian"}
+      const ENV = {PORTAL_ASSETS_URL:"http://localhost:3000/assets",PORTAL_BACKEND_URL:"https://portal-backend.example.org",CENTRALIDP_URL:"https://centralidp.example.org/auth",SSI_CREDENTIAL_URL:"https://ssi-credential-issuer.example.org",BPDM_API_URL:"https://business-partners.example.org/pool/api",SEMANTICS_URL:"https://semantics.example.org",MANAGED_IDENTITY_WALLETS_NEW_URL:"https://managed-identity-wallets-new.example.org",REALM:"CX-Central",CLIENT_ID:"Cl2-CX-Portal",CLIENT_ID_SEMANTIC:"Cl3-CX-Semantic",CLIENT_ID_MIW:"Cl5-CX-Custodian",CLIENT_ID_SSI_CREDENTIAL:"Cl24-CX-SSI-CredentialIssuer"}
     </script>
     <script type="module" src="/src/index.tsx"></script>
   </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-frontend",
-  "version": "v2.0.0-RC3",
+  "version": "v2.0.0-RC4",
   "description": "Catena-X Portal Frontend",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

scripts/inject-dynamic-env.sh

@@ -20,9 +20,9 @@
 ###############################################################
 
 # Define custom variable
-custom_env_vars='{PORTAL_ASSETS_URL:"'$PORTAL_ASSETS_URL'",PORTAL_BACKEND_URL:"'$PORTAL_BACKEND_URL'",CENTRALIDP_URL:"'$CENTRALIDP_URL'",BPDM_API_URL:"'$BPDM_API_URL'",SEMANTICS_URL:"'$SEMANTICS_URL'",MANAGED_IDENTITY_WALLETS_NEW_URL:"'$MANAGED_IDENTITY_WALLETS_NEW_URL'",REALM:"'$REALM'",CLIENT_ID:"'$CLIENT_ID'",CLIENT_ID_SEMANTIC:"'$CLIENT_ID_SEMANTIC'",CLIENT_ID_MIW:"'$CLIENT_ID_MIW'"}'
+custom_env_vars='{PORTAL_ASSETS_URL:"'$PORTAL_ASSETS_URL'",PORTAL_BACKEND_URL:"'$PORTAL_BACKEND_URL'",CENTRALIDP_URL:"'$CENTRALIDP_URL'",SSI_CREDENTIAL_URL:"'$SSI_CREDENTIAL_URL'",BPDM_API_URL:"'$BPDM_API_URL'",SEMANTICS_URL:"'$SEMANTICS_URL'",MANAGED_IDENTITY_WALLETS_NEW_URL:"'$MANAGED_IDENTITY_WALLETS_NEW_URL'",REALM:"'$REALM'",CLIENT_ID:"'$CLIENT_ID'",CLIENT_ID_SEMANTIC:"'$CLIENT_ID_SEMANTIC'",CLIENT_ID_MIW:"'$CLIENT_ID_MIW'",CLIENT_ID_SSI_CREDENTIAL:"'$CLIENT_ID_SSI_CREDENTIAL'"}'
 # Define anchor variable
-custom_env_vars_anchor='{PORTAL_ASSETS_URL:"http://localhost:3000/assets",PORTAL_BACKEND_URL:"https://portal-backend.example.org",CENTRALIDP_URL:"https://centralidp.example.org/auth",BPDM_API_URL:"https://business-partners.example.org/pool/api",SEMANTICS_URL:"https://semantics.example.org",MANAGED_IDENTITY_WALLETS_NEW_URL:"https://managed-identity-wallets-new.example.org",REALM:"CX-Central",CLIENT_ID:"Cl2-CX-Portal",CLIENT_ID_SEMANTIC:"Cl3-CX-Semantic",CLIENT_ID_MIW:"Cl5-CX-Custodian"}'
+custom_env_vars_anchor='{PORTAL_ASSETS_URL:"http://localhost:3000/assets",PORTAL_BACKEND_URL:"https://portal-backend.example.org",CENTRALIDP_URL:"https://centralidp.example.org/auth",SSI_CREDENTIAL_URL:"https://ssi-credential-issuer.example.org",BPDM_API_URL:"https://business-partners.example.org/pool/api",SEMANTICS_URL:"https://semantics.example.org",MANAGED_IDENTITY_WALLETS_NEW_URL:"https://managed-identity-wallets-new.example.org",REALM:"CX-Central",CLIENT_ID:"Cl2-CX-Portal",CLIENT_ID_SEMANTIC:"Cl3-CX-Semantic",CLIENT_ID_MIW:"Cl5-CX-Custodian",CLIENT_ID_SSI_CREDENTIAL:"Cl24-CX-SSI-CredentialIssuer"}'
 # Read content of the reference index.html file into the index_html_reference variable
 index_html_reference=`cat /usr/share/nginx/html/index.html.reference`
 # Replace the anchor variable with the custom variable in the index.html file 

src/assets/locales/de/main.json

@@ -62,7 +62,7 @@
     "certificate-credential": "Config - Certificates",
     "about": "About",
     "dataspace": "Data Space",
-    "admin-credential": "Certification Mgmt",
+    "admin-credential": "Credential Requests",
     "companyCertificate": "Company Certificates",
     "companyWallet": "Company Wallet",
     "company-subscriptions": "Firmenabonnements",

src/assets/locales/en/main.json

@@ -61,7 +61,7 @@
     "certificate-credential": "Config - Certificates",
     "about": "About",
     "dataspace": "Data Space",
-    "admin-credential": "Certification Mgmt",
+    "admin-credential": "Credential Requests",
     "companyCertificate": "Company Certificates",
     "companyWallet": "Company Wallet",
     "company-subscriptions": "Company Subscriptions",

src/components/pages/AppOverview/AppOverViewDetails.tsx

@@ -28,7 +28,7 @@ import { Grid } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import {
   ConsentStatusEnum,
-  useFetchRolesDataQuery,
+  useFetchAppRolesDataQuery,
   useSubmitappMutation,
 } from 'features/appManagement/apiSlice'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -50,7 +50,7 @@ export default function AppOverViewDetails({
   const [cardImage, setCardImage] = useState('')
   const [fetchDocumentById] = useFetchDocumentByIdMutation()
   const [cardLanguage, setCardLanguage] = useState<string>('en')
-  const { data } = useFetchRolesDataQuery(id ?? '')
+  const { data } = useFetchAppRolesDataQuery(id ?? '')
   const [submitapp] = useSubmitappMutation()
 
   const defaultValues = useMemo(() => {

src/components/shared/basic/ReleaseProcess/TechnicalIntegration/index.tsx

@@ -43,14 +43,14 @@ import {
 import { Dropzone, type DropzoneFile } from 'components/shared/basic/Dropzone'
 import { isString } from 'lodash'
 import {
-  type rolesType,
   useDeleteRolesMutation,
   useFetchAppStatusQuery,
-  useFetchRolesDataQuery,
+  useFetchAppRolesDataQuery,
   useFetchTechnicalUserProfilesQuery,
   useFetchUserRolesQuery,
   useSaveTechnicalUserProfilesMutation,
   useUpdateRoleDataMutation,
+  type updateRolePayload,
 } from 'features/appManagement/apiSlice'
 import { setAppStatus } from 'features/appManagement/actions'
 import SnackbarNotificationWithButtons from '../components/SnackbarNotificationWithButtons'
@@ -73,7 +73,7 @@ export default function TechnicalIntegration() {
   const fetchAppStatus = useFetchAppStatusQuery(appId ?? '', {
     refetchOnMountOrArgChange: true,
   }).data
-  const { data, refetch: refetchRolesData } = useFetchRolesDataQuery(
+  const { data, refetch: refetchRolesData } = useFetchAppRolesDataQuery(
     appId ?? '',
     {
       refetchOnMountOrArgChange: true,
@@ -580,12 +580,12 @@ export default function TechnicalIntegration() {
                 )}
               </Typography>
               <Grid item container xs={12}>
-                {data?.map((role: rolesType, index) => (
+                {data?.map((role: updateRolePayload, index) => (
                   <Grid
                     item
                     md={6}
                     xs={12}
-                    key={role.roleId}
+                    key={role.role}
                     sx={{
                       pl: !isMobile && index % 2 === 0 ? 0 : 1,
                       pr: !isMobile && index % 2 === 0 ? 1 : 0,
@@ -595,11 +595,11 @@ export default function TechnicalIntegration() {
                       items={[
                         {
                           expanded: false,
-                          id: role.roleId,
+                          id: role.role,
                           title: '',
                           titleElement: (
                             <Chip
-                              key={role.roleId}
+                              key={role.role}
                               label={role.role}
                               withIcon={true}
                               type="delete"
@@ -611,14 +611,14 @@ export default function TechnicalIntegration() {
                                 },
                               }}
                               handleDelete={() => {
-                                onChipDelete(role.roleId)
+                                onChipDelete(role.role)
                               }}
                             />
                           ),
                           color: 'white',
                           children: (
                             <Typography variant="caption3">
-                              {role.description}
+                              {role.descriptions?.[0].description}
                             </Typography>
                           ),
                         },

src/components/shared/basic/ReleaseProcess/ValidateAndPublish/index.tsx

@@ -26,7 +26,7 @@ import { appIdSelector } from 'features/appManagement/slice'
 import {
   ConsentStatusEnum,
   useFetchAppStatusQuery,
-  useFetchRolesDataQuery,
+  useFetchAppRolesDataQuery,
   useSubmitappMutation,
 } from 'features/appManagement/apiSlice'
 import { setAppStatus } from 'features/appManagement/actions'
@@ -48,7 +48,7 @@ export default function ValidateAndPublish({
   const fetchAppStatus = useFetchAppStatusQuery(appId ?? '', {
     refetchOnMountOrArgChange: true,
   }).data
-  const { data } = useFetchRolesDataQuery(appId ?? '')
+  const { data } = useFetchAppRolesDataQuery(appId ?? '')
 
   useEffect(() => {
     if (fetchAppStatus) dispatch(setAppStatus(fetchAppStatus))

src/components/shared/basic/ReleaseProcess/components/CommonValidateAndPublish.tsx

@@ -45,7 +45,7 @@ import {
   ConsentStatusEnum,
   type DocumentData,
   DocumentTypeId,
-  type rolesType,
+  type updateRolePayload,
 } from 'features/appManagement/apiSlice'
 import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
 import CommonService from 'services/CommonService'
@@ -110,7 +110,7 @@ interface CommonValidateAndPublishType {
     | ReleaseProcessTypes.SERVICE_RELEASE
     | AppOverviewTypes.APP_OVERVIEW_DETAILS
   serviceTypes?: string
-  rolesData?: rolesType[]
+  rolesData?: updateRolePayload[]
 }
 
 export default function CommonValidateAndPublish({
@@ -532,9 +532,11 @@ export default function CommonValidateAndPublish({
             {rolesData.length > 0 ? (
               <Grid container spacing={2} sx={{ margin: '0px' }}>
                 {rolesData?.map((role) => (
-                  <Grid item xs={6} key={role.roleId} className="roles-data">
+                  <Grid item xs={6} key={role.role} className="roles-data">
                     <Typography variant="label2">{role.role}</Typography>
-                    <Typography variant="body3">{role.description}</Typography>
+                    <Typography variant="body3">
+                      {role.descriptions?.[0].description}
+                    </Typography>
                   </Grid>
                 ))}
               </Grid>

src/features/appManagement/apiSlice.ts

@@ -304,9 +304,8 @@ export const apiSlice = createApi({
       }),
       invalidatesTags: [Tags.APP],
     }),
-    fetchRolesData: builder.query<rolesType[], string>({
-      query: (appId: string) =>
-        `/api/administration/user/owncompany/roles/apps/${appId}?languageShortName=${i18next.language}`,
+    fetchAppRolesData: builder.query<updateRolePayload[], string>({
+      query: (appId: string) => `/api/apps/AppReleaseProcess/${appId}/roles`,
     }),
     updateRoleData: builder.mutation<postRolesResponseType[], updateRoleType>({
       query: (data) => ({
@@ -449,7 +448,7 @@ export const {
   useFetchSalesManagerDataQuery,
   useSaveAppMutation,
   useDeleteAppReleaseDocumentMutation,
-  useFetchRolesDataQuery,
+  useFetchAppRolesDataQuery,
   useUpdateRoleDataMutation,
   useDeleteRolesMutation,
   useFetchNewDocumentByIdMutation,

src/features/certification/certificationApiSlice.tsx

@@ -20,6 +20,7 @@
 
 import type { PaginFetchArgs } from '@catena-x/portal-shared-components'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { getSsiBase } from 'services/EnvironmentService'
 import { PAGE_SIZE } from 'types/Constants'
 import { apiBaseQuery } from 'utils/rtkUtil'
 
@@ -105,11 +106,9 @@ export const apiSlice = createApi({
     fetchCredentialsSearch: builder.query<CredentialResponse[], PaginFetchArgs>(
       {
         query: (fetchArgs) => ({
-          url: `api/administration/companydata/credentials?page=${
+          url: `${getSsiBase()}/api/issuer?page=${
             fetchArgs.page
-          }&size=${PAGE_SIZE}&companyName=${
-            fetchArgs.args.expr ?? ''
-          }&companySsiDetailStatusId=${fetchArgs.args.filterType ?? ''}`,
+          }&size=${PAGE_SIZE}`,
         }),
       }
     ),

src/features/usecase/usecaseApiSlice.ts

@@ -18,6 +18,7 @@
  ********************************************************************************/
 
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { getSsiBase } from 'services/EnvironmentService'
 import { apiBaseQuery } from 'utils/rtkUtil'
 
 export type VerifiedCredentialsData = {
@@ -59,7 +60,7 @@ export const apiSlice = createApi({
   tagTypes: ['usecase'],
   endpoints: (builder) => ({
     fetchUsecase: builder.query<UsecaseResponse[], void>({
-      query: () => '/api/administration/companydata/useCaseParticipation',
+      query: () => `${getSsiBase()}/api/issuer/useCaseParticipation`,
       providesTags: ['usecase'],
     }),
     addUsecase: builder.mutation<void, UsecaseRequest>({

src/services/EnvironmentService.ts

@@ -27,10 +27,14 @@ export const getClientIdSemantic = () => ENV.CLIENT_ID_SEMANTIC ?? ''
 
 export const getClientIdMiw = () => ENV.CLIENT_ID_MIW ?? ''
 
+export const getClientIdSsiCredential = () => ENV.CLIENT_ID_SSI_CREDENTIAL ?? ''
+
 export const getCentralIdp = () => ENV.CENTRALIDP_URL ?? ''
 
 export const getApiBase = () => ENV.PORTAL_BACKEND_URL ?? ''
 
+export const getSsiBase = () => ENV.SSI_CREDENTIAL_URL ?? ''
+
 export const getAssetBase = () => ENV.PORTAL_ASSETS_URL ?? ''
 
 export const getBpdmApiBase = () => ENV.BPDM_API_URL ?? ''
@@ -44,6 +48,7 @@ const EnvironmentService = {
   getClientId,
   getClientIdSemantic,
   getClientIdMiw,
+  getClientIdSsiCredential,
   getCentralIdp,
   getApiBase,
   getAssetBase,

src/services/UserService.ts

@@ -25,6 +25,7 @@ import {
   getCentralIdp,
   getClientId,
   getClientIdMiw,
+  getClientIdSsiCredential,
   getClientIdSemantic,
   getMiwBase,
   getRealm,
@@ -51,6 +52,12 @@ const keycloakConfigMIW: Keycloak.KeycloakConfig = {
   clientId: getClientIdMiw(),
 }
 
+const keycloakConfigSsiCredential: Keycloak.KeycloakConfig = {
+  url: getMiwBase(),
+  realm: getRealm(),
+  clientId: getClientIdSsiCredential(),
+}
+
 // Add an ESLint exception until there is a solution
 
 const KC = new Keycloak(keycloakConfig)
@@ -116,8 +123,10 @@ const getRoles = (): Array<string> =>
     .concat(
       KC.tokenParsed?.resource_access[keycloakConfigSemantic.clientId]?.roles
     )
+    .concat(KC.tokenParsed?.resource_access[keycloakConfigMIW.clientId]?.roles)
     .concat(
-      KC.tokenParsed?.resource_access[keycloakConfigMIW.clientId]?.roles
+      KC.tokenParsed?.resource_access[keycloakConfigSsiCredential.clientId]
+        ?.roles
     ) ?? []
 
 const hasRole = (role: string) => getRoles()?.includes(role)

src/utils/rtkUtil.ts

@@ -23,6 +23,7 @@ import {
   getBpdmApiBase,
   getMiwBase,
   getAssetBase,
+  getSsiBase,
 } from 'services/EnvironmentService'
 import UserService from 'services/UserService'
 
@@ -34,6 +35,14 @@ export const apiBaseQuery = () => ({
   },
 })
 
+export const apiSsiCredentialQuery = () => ({
+  baseUrl: getSsiBase(),
+  prepareHeaders: (headers: Headers) => {
+    headers.set('authorization', `Bearer ${UserService.getToken()}`)
+    return headers
+  },
+})
+
 export const apiBpdmQuery = () => ({
   baseUrl: getBpdmApiBase(),
   prepareHeaders: (headers: Headers) => {