Merge pull request #1624 from eclipse-tractusx/release/v2.5.0

build(v2.5.0): merge release into main

#1624

Author: typecastcloud

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 2.5.0-RC1
+## 2.5.0
 
 ### Feature
 
@@ -17,12 +17,26 @@
 
 - **Company Subscription**:
   - fixed back button on details page returns on wrong tab [#1532](https://github.com/eclipse-tractusx/portal-frontend/pull/1532)
+  - center aligned row cells with multi-browser friendly logic [1611](https://github.com/eclipse-tractusx/portal-frontend/pull/1611)
 - **Notifications**:
   - fixed notification to display as text and technical user creation title [#1535](https://github.com/eclipse-tractusx/portal-frontend/pull/1535)
 - **User Management**:
   - fixed app roles display and text to accurate description in user list table in app user management [#1546](https://github.com/eclipse-tractusx/portal-frontend/pull/1546)
 - **App/Service Release Process**:
   - added missing translation for consent and terms step [#1557](https://github.com/eclipse-tractusx/portal-frontend/pull/1557)
+  - fixed user roles CSV template and read logic [#1584](https://github.com/eclipse-tractusx/portal-frontend/pull/1584)
+- **App & Service Admin Detail**
+  - added missing user technical profiles on admin detail board [1615](https://github.com/eclipse-tractusx/portal-frontend/pull/1615)
+- **User Management | App Access Management**:
+  - updated logic for persist user selection on navigating back from role selection [#1603](https://github.com/eclipse-tractusx/portal-frontend/pull/1603)
+- **Connector Registration**:
+  - updated technical user list for new connector fetch request [1612](https://github.com/eclipse-tractusx/portal-frontend/pull/1612)
+- **Technical User**:
+  - updated CSS for technical user table to span to full available width [1602](https://github.com/eclipse-tractusx/portal-frontend/pull/1602)
+- **IDP Management**
+  - fixed disabled save metadata button [1604](https://github.com/eclipse-tractusx/portal-frontend/pull/1604)
+- **Service Marketplace**
+  - replaced hardcoded images in service marketplace and detail [#1195](https://github.com/eclipse-tractusx/portal-frontend/issues/1195)
 
 ### Technical Support
 
@@ -39,7 +53,12 @@
 
 ### Known Knowns
 
-- please refer to the list of [open bugs] (https://github.com/eclipse-tractusx/portal-frontend/issues?q=is%3Aopen+is%3Aissue+label%3Abug)
+- Please refer to the [list of open bugs](https://github.com/eclipse-tractusx/portal-frontend/issues?q=is%3Aopen+is%3Aissue+label%3Abug)
+- Auto-setup feature for App Subscriptions: validation by ValidatingInput component is triggered on opening pop up. [#1589](https://github.com/eclipse-tractusx/portal-frontend/issues/1589)
+- **Note for Gaia-X Clearing House Tagus upgrade**
+  - If a company was onboarded with ELBE clearing house, the legal person self description document is not accepted when creating a connector with newer versions of the clearing house. Portal operators are advised to create new legal person and connector self description documents for all previously onboarded companies. The portal backend will activate connector without updated legal person self description document to allow for a transition phase. The connector will not have a document until reissuance for both company and connector is triggered by operators.
+- Feature Support and Development for auto-setup Process Worker: there is no frontend support for the extended auto-setup process worker, specifically in terms of error handling and status transparency.
+- During end-to-end testing, some minor issues and in regards to system internal notifications as well as the UI were detected.
 
 ## 2.4.0
 

DEPENDENCIES

@@ -30,7 +30,7 @@ npm/npmjs/-/array.prototype.flatmap/1.3.3, MIT, approved, #4651
 npm/npmjs/-/array.prototype.tosorted/1.1.4, MIT, approved, #5051
 npm/npmjs/-/arraybuffer.prototype.slice/1.0.3, MIT, approved, #9657
 npm/npmjs/-/arraybuffer.prototype.slice/1.0.4, MIT, approved, #9657
-npm/npmjs/-/asn1/0.2.6, MIT, approved, clearlydefined
+npm/npmjs/-/asn1/0.2.6, MIT, approved, #21125
 npm/npmjs/-/assert-plus/1.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/astral-regex/2.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/async/3.2.6, Apache-2.0 AND MIT, approved, #1553
@@ -41,7 +41,6 @@ npm/npmjs/-/autosuggest-highlight/3.3.4, MIT, approved, clearlydefined
 npm/npmjs/-/available-typed-arrays/1.0.7, MIT, approved, clearlydefined
 npm/npmjs/-/aws-sign2/0.7.0, Apache-2.0, approved, clearlydefined
 npm/npmjs/-/aws4/1.13.2, MIT, approved, clearlydefined
-npm/npmjs/-/axios/1.8.4, MIT, approved, #19551
 npm/npmjs/-/babel-jest/29.7.0, MIT, approved, clearlydefined
 npm/npmjs/-/babel-plugin-istanbul/6.1.1, BSD-3-Clause, approved, clearlydefined
 npm/npmjs/-/babel-plugin-jest-hoist/29.6.3, MIT, approved, clearlydefined
@@ -151,7 +150,7 @@ npm/npmjs/-/dom-helpers/5.2.1, MIT, approved, clearlydefined
 npm/npmjs/-/domexception/4.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/dot-case/3.0.4, MIT, approved, clearlydefined
 npm/npmjs/-/dunder-proto/1.0.1, MIT, approved, #17824
-npm/npmjs/-/ecc-jsbn/0.1.2, , approved, #17389
+npm/npmjs/-/ecc-jsbn/0.1.2, MIT AND LicenseRef-MIT-style, approved, #17389
 npm/npmjs/-/ejs/3.1.10, Apache-2.0, approved, #1373
 npm/npmjs/-/electron-to-chromium/1.5.80, ISC, approved, #16451
 npm/npmjs/-/emittery/0.13.1, MIT, approved, clearlydefined
@@ -230,7 +229,6 @@ npm/npmjs/-/find-up/4.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/find-up/5.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/flat-cache/3.2.0, MIT, approved, clearlydefined
 npm/npmjs/-/flatted/3.3.1, ISC AND (ISC AND MIT), approved, #13460
-npm/npmjs/-/follow-redirects/1.15.9, MIT, approved, #10782
 npm/npmjs/-/for-each/0.3.3, MIT, approved, clearlydefined
 npm/npmjs/-/forever-agent/0.6.1, Apache-2.0, approved, clearlydefined
 npm/npmjs/-/form-data/4.0.1, MIT, approved, clearlydefined
@@ -516,7 +514,6 @@ npm/npmjs/-/process/0.11.10, MIT, approved, CQ23452
 npm/npmjs/-/prompts/2.4.2, MIT, approved, clearlydefined
 npm/npmjs/-/prop-types/15.8.1, MIT, approved, clearlydefined
 npm/npmjs/-/proxy-from-env/1.0.0, MIT, approved, clearlydefined
-npm/npmjs/-/proxy-from-env/1.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/psl/1.9.0, MIT AND CC0-1.0, approved, #3080
 npm/npmjs/-/pump/3.0.2, MIT, approved, clearlydefined
 npm/npmjs/-/punycode/2.3.1, MIT, approved, #6373

package.json

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

public/template_app_role_upload.csv

@@ -1,6 +1,6 @@
 roles;description_en;description_de
-"Administrator;Administrator are able to configure the application as per the costumer need;Administratoren sind in der Lage, die Anwendung nach den Bedürfnissen der Kunden zu konfigurieren."
-Commercial Specialist;Commercial Specialist can approve commercial request and send them for the manager review;Der Handelsspezialist kann Handelsanfragen genehmigen und sie zur Überprüfung durch den Manager senden.
-Commercial Manager;Commercial Specialist can do the final approval of commercial request and trigger the payout;Der Handelsspezialist kann die endgültige Genehmigung des Handelsantrags vornehmen und die Auszahlung veranlassen.
-Recycler;Recycler can buy recycled material;Recycler können recyceltes Material kaufen
-Manager;This is only a test text in EN;Das is in Deutsch
+Administrator;Administrator are able to configure the application as per the costumer need.;Administratoren sind in der Lage, die Anwendung nach den Bedürfnissen der Kunden zu konfigurieren.
+Commercial Specialist;Commercial Specialist can approve commercial request and send them for the manager review.;Der Handelsspezialist kann Handelsanfragen genehmigen und sie zur Überprüfung durch den Manager senden.
+Commercial Manager;Commercial Specialist can do the final approval of commercial request and trigger the payout.;Der Handelsspezialist kann die endgültige Genehmigung des Handelsantrags vornehmen und die Auszahlung veranlassen.
+Recycler;Recycler can buy recycled material.;Recycler können recyceltes Material kaufen.
+Manager;This is only a test text in EN.;Das ist auf Deutsch.

src/components/overlays/AddAppUserRoles/AppRoles.tsx

@@ -32,9 +32,9 @@ export const AppRoles = () => {
   const dispatch = useDispatch()
   const { appId } = useParams()
   const { data } = useFetchAppRolesQuery(appId ?? '')
+  const roles = useSelector((state: RootState) => state.admin.user.rolesToAdd)
 
   const selectRole = (roleName: string, select: boolean) => {
-    const roles = useSelector((state: RootState) => state.admin.user.rolesToAdd)
     const isSelected = roles.includes(roleName)
     if (!isSelected && select) {
       dispatch(setRolesToAdd([...roles, roleName]))

src/components/overlays/UpdateIDP/UpdateIDPContent.tsx

@@ -43,7 +43,7 @@ const isWellknownMetadata = (expr: string) =>
 const idpToForm = (idp: IdentityProvider) => {
   const form: IHashMap<string> = {}
   form.displayName = idp.displayName ?? ''
-  form.metadataUrl = ''
+  form.metadataUrl = idp.oidc?.metadataUrl ?? ''
   form.clientId = idp.oidc?.clientId ?? ''
   form.secret = ''
   form.clientAuthMethod =
@@ -101,6 +101,7 @@ const UpdateIDPForm = ({
           hint={t('field.metadata.hint')}
           debounceTime={0}
           onValid={onChange}
+          onInvalid={onChange}
         />
       </div>
       <div style={{ margin: '12px 0' }}>
@@ -111,6 +112,7 @@ const UpdateIDPForm = ({
           hint={t('field.clientId.hint')}
           validate={isIDPClientID}
           onValid={onChange}
+          onInvalid={onChange}
         />
       </div>
       <div style={{ margin: '12px 0 30px' }}>
@@ -120,6 +122,7 @@ const UpdateIDPForm = ({
           hint={t('field.clientSecret.hint')}
           validate={isIDPClientSecret}
           onValid={onChange}
+          onInvalid={onChange}
         />
       </div>
       <Typography variant="label2">{t('edit.metaDataHeading')}</Typography>

src/components/pages/AdminBoardDetail/BoardTechnicalUserSetup/index.tsx

@@ -57,7 +57,9 @@ export default function BoardTechnicalUserSetup({
         {t('content.adminboardDetail.technicalUserSetup.message')}
       </Typography>
       {item.technicalUserProfile &&
-        getTechnicalUserData(Object.values(item?.technicalUserProfile)[0])}
+        getTechnicalUserData(
+          Object.values(item?.technicalUserProfile).flat() as string[]
+        )}
     </>
   )
 }

src/components/pages/AdminBoardDetail/style.scss

@@ -55,10 +55,12 @@
         gap: 56px;
       }
 
-      .lead-image > img {
-        border-radius: 16px;
-        max-width: 100%;
-        width: 412px;
+      .lead-image {
+        max-width: 288px;
+        & > img {
+          border-radius: 16px;
+          width: 100%;
+        }
       }
       .service-app-content {
         flex: 1;

src/components/pages/AppOverview/AddRolesOverlay.tsx

@@ -64,6 +64,8 @@ const AddRolesOverlay = ({
     uploadAppRoles: '',
   }
 
+  const validHeader = 'roles;description_en;description_de'
+
   const {
     control,
     trigger,
@@ -91,11 +93,8 @@ const AddRolesOverlay = ({
             ?.split('\n')
             .filter((item) => item !== '')
             .map((item) => item)
-
-          if (
-            CSVCells[0] === 'roles;description\r' ||
-            CSVCells[0] === 'roles;description'
-          ) {
+          const header = CSVCells[0]?.trim().toLowerCase()
+          if (header === validHeader) {
             const roleDescription = str
               ?.split('\n')
               .filter((item) => item !== '')

src/components/pages/CompanySubscriptions/index.tsx

@@ -200,12 +200,13 @@ export default function CompanySubscriptions() {
       <PageLoadingTable<SubscribedActiveApps, FetchHookArgsType>
         sx={{
           '.MuiDataGrid-cell': {
-            alignContent: 'center !important',
+            display: 'flex',
+            alignItems: 'center',
           },
         }}
         autoFocus={false}
         searchExpr={searchExpr}
-        alignCell="start"
+        alignCell="flex-start"
         defaultFilter={group}
         filterViews={filterView}
         toolbarVariant={'searchAndFilter'}

src/components/pages/EdcConnector/AddConnectorOverlay/index.tsx

@@ -101,7 +101,8 @@ const AddConnectorOverlay = ({
   const { data } = useFetchOfferSubscriptionsQuery()
   const { data: ownCompanyDetails } = useFetchOwnCompanyDetailsQuery('')
   const [page, setPage] = useState<number>(0)
-  const { data: serviceAccounts } = useFetchServiceAccountUsersQuery(page)
+  const { data: serviceAccounts, refetch } =
+    useFetchServiceAccountUsersQuery(page)
   const [newTechnicalUSer, setNewTechnicalUSer] = useState(false)
   const [allAccounts, setAllAccounts] = useState<ServiceAccountListEntry[]>([])
 
@@ -120,6 +121,17 @@ const AddConnectorOverlay = ({
 
   const [selected, setSelected] = useState<ConnectorType>({})
 
+  useEffect(() => {
+    if (openDialog) {
+      setPage(0)
+      setAllAccounts([])
+    }
+  }, [openDialog, connectorStep])
+
+  useEffect(() => {
+    refetch()
+  }, [page, refetch])
+
   useEffect(() => {
     if (openDialog || connectorStep === 0) {
       reset(formFields)

src/components/pages/ServiceAdminBoardDetail/index.tsx

@@ -22,10 +22,10 @@ import {
   Button,
   StaticTable,
   Typography,
+  Image,
 } from '@catena-x/portal-shared-components'
 import { useNavigate, useParams } from 'react-router-dom'
 import '../AdminBoardDetail/style.scss'
-import { getAssetBase } from 'services/EnvironmentService'
 import {
   type ServiceDetailsType,
   useFetchBoardServiceDetailsQuery,
@@ -42,6 +42,8 @@ import { Grid, Box, Divider } from '@mui/material'
 import { download } from 'utils/downloadUtils'
 import { DocumentTypeText } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 
 enum TableData {
   SUCCESS = 'SUCCESS',
@@ -132,9 +134,10 @@ export default function ServiceAdminBoardDetail() {
         <Box className="service-content">
           <div className="service-board-header">
             <div className="lead-image">
-              <img
-                src={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
+              <Image
+                src={`${getApiBase()}/api/services/${appId}/serviceDocuments/${serviceData?.documents?.SERVICE_LEADIMAGE?.[0].documentId}`}
                 alt={serviceData.title}
+                loader={fetchImageWithToken}
               />
             </div>
             <Box className="service-app-content">
@@ -251,7 +254,7 @@ export default function ServiceAdminBoardDetail() {
 
           {serviceData.technicalUserProfile &&
             getTechUserData(
-              Object.values(serviceData?.technicalUserProfile)[0]
+              Object.values(serviceData.technicalUserProfile).flat() as string[]
             )}
 
           <div className="divider-height" />

src/components/pages/ServiceMarketplace/RecommendedServices.tsx

@@ -27,7 +27,8 @@ import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './style.scss'
 import NoItems from '../NoItems'
-import { getAssetBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
@@ -73,9 +74,18 @@ export default function RecommendedServices({
               <CardHorizontal
                 borderRadius={6}
                 image={{
+                  src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
                   alt: 'App Card',
-                  src: `${getAssetBase()}/images/content/ServiceMarketplace.png`,
+                  style: {
+                    flex: '0 0 33.333333%',
+                    maxWidth: '33.333333%',
+                    minHeight: '200px',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  },
                 }}
+                imageLoader={fetchImageWithToken}
                 label={service.provider}
                 buttonText="Details"
                 onBtnClick={() => {

src/components/pages/ServiceMarketplace/ServicesElements.tsx

@@ -24,9 +24,10 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './style.scss'
-import { getAssetBase } from 'services/EnvironmentService'
 import { useCallback } from 'react'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function ServicesElements({
   services,
@@ -81,9 +82,18 @@ export default function ServicesElements({
                     <CardHorizontal
                       borderRadius={6}
                       image={{
+                        src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
                         alt: 'App Card',
-                        src: `${getAssetBase()}/images/content/ServiceMarketplace.png`,
+                        style: {
+                          flex: '0 0 33.333333%',
+                          maxWidth: '33.333333%',
+                          minHeight: '200px',
+                          backgroundRepeat: 'no-repeat',
+                          backgroundSize: 'cover',
+                          backgroundPosition: 'center',
+                        },
                       }}
+                      imageLoader={fetchImageWithToken}
                       label={service.provider}
                       buttonText="Details"
                       onBtnClick={() => {

src/components/pages/ServiceMarketplaceDetail/MarketplaceHeader/index.tsx

@@ -19,18 +19,19 @@
  ********************************************************************************/
 
 import { useDispatch } from 'react-redux'
-import { Button, Typography } from '@catena-x/portal-shared-components'
+import { Button, Typography, Image } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import { show } from 'features/control/overlay'
 import { OVERLAYS, ROLES } from 'types/Constants'
 import './style.scss'
 import { setSuccessType } from 'features/serviceMarketplace/slice'
-import { getAssetBase } from 'services/EnvironmentService'
 import { Box } from '@mui/material'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
 import { userHasPortalRole } from 'services/AccessService'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function MarketplaceHeader({
   item,
@@ -88,9 +89,10 @@ export default function MarketplaceHeader({
   return (
     <div className="service-marketplace-header">
       <div className="lead-image">
-        <img
-          src={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
+        <Image
+          src={`${getApiBase()}/api/services/${serviceId}/serviceDocuments/${item?.leadPictureId}`}
           alt={item.title}
+          loader={fetchImageWithToken}
         />
       </div>
       <Box className="marketplace-app-content">