Merge branch 'release/v1.6.0-RC6' into merge-v1.6.0-RC6-in-main

.eslintrc.json

@@ -80,6 +80,7 @@
         "react/display-name": 0,
         "react/jsx-key": 0,
         "react/no-children-prop": 0,
+        "react/no-deprecated": 0,
         "react/no-unescaped-entities": 0,
         "spaced-comment": 0
       }

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.6.0-RC6
+
+### Change
+
+- Service Account creation - added multiLangugae support when fetching the role description from BE
+
+### Technical Support
+
+- Sonar findings fixed (Code smells and bugs)
+- Dependabot findings fixed (Upgrading dependencies to the latest versions)
+
+### Bugfix
+
+- Application card favorite button click (separation from the rest of the card where the click results into opening the app card)
+- Admin Credential Board - views/filter function fixed
+- Service Release Form - fixed erase of entered data on deleting uploaded image
+- Service Detail - header UI fix of rendering issues
+
 ## 1.6.0-RC5
 
 ### Change

DEPENDENCIES

@@ -576,7 +576,6 @@ npm/npmjs/-/normalize-path/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/normalize-range/0.1.2, MIT, approved, clearlydefined
 npm/npmjs/-/normalize-url/6.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/npm-run-path/4.0.1, MIT, approved, clearlydefined
-npm/npmjs/-/nth-check/1.0.2, BSD-2-Clause, approved, CQ22629
 npm/npmjs/-/nth-check/2.1.1, BSD-2-Clause, approved, clearlydefined
 npm/npmjs/-/nwsapi/2.2.5, MIT, approved, #7909
 npm/npmjs/-/object-assign/4.1.1, MIT, approved, clearlydefined
@@ -1124,7 +1123,7 @@ npm/npmjs/@babel/template/7.22.5, MIT, approved, #9017
 npm/npmjs/@babel/traverse/7.22.5, MIT, approved, #8954
 npm/npmjs/@babel/types/7.22.5, MIT, approved, #8967
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/2.0.14, Apache-2.0 AND (BSD-3-Clause AND MIT), approved, #9187
+npm/npmjs/@catena-x/portal-shared-components/2.0.18, Apache-2.0 AND (BSD-3-Clause AND MIT), approved, #9187
 npm/npmjs/@csstools/normalize.css/12.0.0, CC0-1.0, approved, clearlydefined
 npm/npmjs/@csstools/postcss-cascade-layers/1.1.1, CC0-1.0, approved, clearlydefined
 npm/npmjs/@csstools/postcss-color-function/1.1.1, CC0-1.0 AND (MIT AND W3C-20150513) AND W3C-20150513 AND MIT, approved, #3022

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-frontend",
-  "version": "v1.6.0-RC5",
+  "version": "v1.6.0-RC6",
   "description": "Catena-X Portal Frontend",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
@@ -26,7 +26,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^2.0.14",
+    "@catena-x/portal-shared-components": "^2.0.18",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",
@@ -87,13 +87,16 @@
     "react-scripts": "5.0.1",
     "typescript": "5.0.4"
   },
+  "resolutions": {
+    "**/nth-check": "^2.1.1"
+  },
   "scripts": {
     "prepare": "husky install",
     "build:sources": "zip -r portal-frontend.zip src package.json yarn.lock -x '*.stories.*' -x '*.test.*' -x '*.css' -x '*.scss' -x '*.svg' -x '*.jpg' -x '*.png' -x '*.webp' -x '*.ttf'",
     "pretty": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,sass,scss,xml,md}\"",
     "lint": "yarn run eslint \"./src/**/*.{ts,tsx}\"",
     "start": "PORT=3001 BROWSER=none GENERATE_SOURCEMAP=false react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "test:ci": "CI=true react-scripts test",
     "build:docker": "if [ -d \"./build\" ]; then yarn build:docker:prebuilt; else yarn build:docker:full; fi",

src/assets/locales/de/main.json

@@ -977,10 +977,10 @@
       },
       "appPage": {
         "headerTitle": "App Details",
-        "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
-        "longDescriptionEN": "Long Description - EN",
-        "longDescriptionDE": "Long Description - DE",
-        "images": "Images",
+        "headerDescription": "Füllen Sie die Seite mit den App-Details aus. Auf dem Marktplatz werden die folgenden zusätzlichen Informationen für Kunden öffentlich verfügbar sein, um einen erweiterten Überblick über die von Ihrer Anwendung unterstützten Funktionen sowie notwendige Details zu Sicherheit, Architektur usw. zu erhalten.",
+        "longDescriptionEN": "Detailierte Beschreibung - EN",
+        "longDescriptionDE": "Detailierte Beschreibung - DE",
+        "images": "Bilder",
         "note": "Note:",
         "maxThreeImages": "Max.3 Images",
         "uploadDataPrerequisits": "Upload “Data Prerequisits”",
@@ -1008,16 +1008,16 @@
       },
       "technicalIntegration": {
         "headerTitle": "Technical Integration",
-        "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
+        "headerDescription": "Integrieren Sie Ihre App mit dem catena-x-Datenraum. Für die Integration müssen Sie die von der Anwendung unterstützten Rollen sowie das erforderliche technische Benutzerprofil hochladen, das zum Ausführen Ihrer Anwendung im Netzwerk erforderlich ist. Bitte beachten Sie: In diesem Schritt legen Sie nur den Rahmen der Authentifizierung fest – es werden keine Benutzer erstellt. Wenn Sie Unterstützung benötigen, können Sie gerne die Schaltfläche „Hilfe“ oder die beigefügte Vorlage verwenden.",
         "step1Header": "1. User Role Upload",
-        "step1HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
+        "step1HeaderDescription": "Laden Sie Ihre Anwendungsrollen hoch, die Benutzeridentitäten zugewiesen werden können, um auf die Anwendung zugreifen zu können.",
         "clientID": "Client ID",
         "URL": "URL",
         "pleaseEnterValidURL": "Please enter a valid URL",
         "URLPlaceholder": "http://www.loremipsum.de",
         "clientCreated": "Client created",
         "step2Header": "2. Technical User Setup",
-        "step2HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
+        "step2HeaderDescription": "Richten Sie das technische Profil eines technischen Benutzer-/Dienstkontos mit den erforderlichen Berechtigungen ein, um die Anwendung im Datenraum ausführen zu können.",
         "uploadRolesDescription": "Upload all app roles by using the available upload template (csv) file added attached",
         "rolesPreview": "Preview of Roles uploaded",
         "uploadAppRolesButton": "Upload App Roles",

src/assets/locales/en/main.json

@@ -939,7 +939,7 @@
       },
       "appPage": {
         "headerTitle": "App Details",
-        "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
+        "headerDescription": "Fill out your app details page. On the marketplace the following added information will be public available for customers to get a extended view of your application supported functions as well as necessary details regarding security, architecture, etc.",
         "longDescriptionEN": "Long Description (en)",
         "longDescriptionDE": "Long Description (de)",
         "images": "Images",
@@ -950,8 +950,8 @@
         "uploadAppContract": "Upload “App Contract”",
         "providerDetails": "Provider Details",
         "providerHomePage": "Provider Homepage",
-        "providerContactEmail": "Customer Contact E-Mail",
-        "providerPhoneContact": "Provider Phone Contact",
+        "providerContactEmail": "Contact (E-Mail)",
+        "providerPhoneContact": "Contac (Phone Number)",
         "providerPhoneContactPlaceholder": "Following formats are supported: +xx (xxx) xxxxxxxxxx; +xx xxxxxxxxxx and +xxxxxxxxxxxx",
         "pleaseEnterValidHomePageURL": "Please enter a valid url - eg: https://catena-x.net",
         "pleaseEnterValidEmail": "Please enter a valid Customer Contact E-Mail",
@@ -970,16 +970,16 @@
       },
       "technicalIntegration": {
         "headerTitle": "Technical Integration",
-        "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
+        "headerDescription": "Integrate your app with the catena-x dataspace. For the integration you need to upload the application supported roles as well as the necessary technical user profile which is needed to run your application inside the network. Please note: in this step you are only setting the frame of the authentication - no users are going to get created. If you need any support feel free to use the 'Help' button or the attached template.",
         "step1Header": "1. User Role Upload",
-        "step1HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
+        "step1HeaderDescription": "Upload your application roles which can get assigned to user identities to be able to access the application.",
         "clientID": "Client ID",
         "URL": "URL",
         "pleaseEnterValidURL": "Please enter a valid URL",
         "URLPlaceholder": "http://www.loremipsum.de",
         "clientCreated": "Client created",
         "step2Header": "2. Technical User Setup",
-        "step2HeaderDescription": "[copy] Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis,",
+        "step2HeaderDescription": "Setup the technical profile of a technical user/service account of needed permissions to be able to run the application inside the dataspace.",
         "uploadRolesDescription": "Upload all app roles by using the available upload template (csv) file added attached",
         "rolesPreview": "Preview of Roles uploaded",
         "uploadAppRolesButton": "Upload App Roles",

src/assets/locales/en/servicerelease.json

@@ -52,13 +52,13 @@
   },
   "technicalIntegration": {
     "headerTitle": "Technical Integration",
-    "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
-    "technicalUserSetupMandatory": "Please select atleast one technical user setup",
+    "headerDescription": "Setup the technical profile of a technical user/service account of needed permissions to be able to run the application inside the dataspace. Select minimum one permission, the selected permission(s) will be stored as service technical user profile and used to create technical users for subscription activations.",
+    "technicalUserSetupMandatory": "Please select at least one technical user permission for the service tech user profile",
     "technicalUserProfileError": "Error while updating technical user profiles"
   },
   "step4": {
     "headerTitle": "Validate & Publish",
-    "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard ",
+    "headerDescription": "Below you can find a summary of all your service registration inputs as well as the look of the marketplace service card and detail page. Please check your entered data carefully before sending the service for release. We will validate your service registration shortly after the service submission.",
     "appDetails": "Service Details",
     "documents": "Documents",
     "providerInformation": "Provider Information",
@@ -104,7 +104,7 @@
     "overview": "My services overview"
   },
   "defaultValues": {
-    "conformityDocumentsDescription": "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.",
+    "conformityDocumentsDescription": "To publish your service on the marketplace, a number of Catena-X specific agreements need to get signed by you. Please have a look at the mentioned agreements and agree to them via the checklist approval.",
     "documentsDescription": "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."
   },
   "serviceoverview": {

src/components/pages/AdminBoardDetail/BoardContentDetails.tsx

@@ -18,7 +18,6 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
@@ -39,20 +38,6 @@ import BoardTechnicalUserSetup from './components/BoardTechnicalUserSetup'
 export default function BoardContentDetails({ item }: { item: AppDetails }) {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const [images, setImages] = useState<any>()
-
-  useEffect(() => {
-    if (item) {
-      const newPromies = CommonService.fetchLeadPictures(item.images, item.id)
-      Promise.all(newPromies)
-        .then((result) => {
-          setImages(result.flat())
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-    }
-  }, [item])
 
   return (
     item && (
@@ -79,7 +64,13 @@ export default function BoardContentDetails({ item }: { item: AppDetails }) {
             </div>
           ))}
         </div>
-        {images && <ImageGallery gallery={images} modalWidth="900" />}
+        <ImageGallery
+          gallery={CommonService.imagesAndAppidToImageType(
+            item.images,
+            item.id
+          )}
+          modalWidth="900"
+        />
         <div className="divider-height" />
         <BoardPrivacy item={item} />
         <div className="divider-height" />

src/components/pages/AdminCredential/AdminCredentialElements.tsx

@@ -57,7 +57,6 @@ export default function AdminCredentialElements() {
   const [refresh, setRefresh] = useState<number>(0)
   const [group, setGroup] = useState<string>(FilterType.ALL)
   const [searchExpr, setSearchExpr] = useState<string>('')
-  const [filterStatus, setFilterStatus] = useState<string>()
   const [filterValueAPI, setFilterValueAPI] = useState<string>('')
   const [fetchHookArgs, setFetchHookArgs] = useState({})
 
@@ -69,23 +68,21 @@ export default function AdminCredentialElements() {
     const viewValue = e.currentTarget.value
     if (viewValue === FilterType.OPEN)
       setFilterValueAPI(SubscriptionStatus.PENDING)
-    if (viewValue === FilterType.CONFIRMED)
+    else if (viewValue === FilterType.CONFIRMED)
       setFilterValueAPI(SubscriptionStatus.ACTIVE)
-    if (viewValue === FilterType.DECLINED)
+    else if (viewValue === FilterType.DECLINED)
       setFilterValueAPI(SubscriptionStatus.INACTIVE)
-    setFilterStatus(viewValue)
+    else setFilterValueAPI('')
     setGroup(viewValue)
     setRefresh(Date.now())
   }
 
   useEffect(() => {
-    if (onValidate(searchExpr)) {
-      setFetchHookArgs({
-        filterType: filterValueAPI,
-        expr: searchExpr,
-      })
-    }
-  }, [filterStatus, searchExpr])
+    setFetchHookArgs({
+      filterType: filterValueAPI,
+      expr: searchExpr,
+    })
+  }, [filterValueAPI, searchExpr])
 
   const onValidate = (expr: string) => {
     const validateExpr = /^[ A-Za-z0-9]{1,1000}$/.test(expr)

src/components/pages/AppDetail/AppDetailContentDetails.tsx

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import {
   Typography,
   Navigation,
@@ -47,7 +47,6 @@ export default function AppDetailContentDetails({
 }) {
   const navigate = useNavigate()
   const { t } = useTranslation()
-  const [images, setImages] = useState<any>()
   const [selectedItem, setSelectedItem] = useState<string>('#description')
 
   const navigationItems = [
@@ -73,19 +72,6 @@ export default function AppDetailContentDetails({
     },
   ]
 
-  useEffect(() => {
-    if (item) {
-      const newPromies = CommonService.fetchLeadPictures(item.images, item.id)
-      Promise.all(newPromies)
-        .then((result) => {
-          setImages(result.flat())
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-    }
-  }, [item])
-
   return (
     item && (
       <>
@@ -122,11 +108,15 @@ export default function AppDetailContentDetails({
             </Typography>
           </div>
           <div className="divider-height" />
-          {images && (
-            <div id="image-gallery">
-              <ImageGallery gallery={images} modalWidth="900" />
-            </div>
-          )}
+          <div id="image-gallery">
+            <ImageGallery
+              gallery={CommonService.imagesAndAppidToImageType(
+                item.images,
+                item.id
+              )}
+              modalWidth="900"
+            />
+          </div>
           <div className="divider-height" />
           <AppDetailPrivacy item={item} />
           <div className="divider-height" />

src/components/pages/AppMarketplace/components/AppListSection/index.tsx

@@ -77,7 +77,8 @@ export default function AppListSection() {
 
   const checkIsFavorite = (appId: string) => favoriteItems.includes(appId)
 
-  const addOrRemoveFavorite = (appId: string) => {
+  const addOrRemoveFavorite = (event: React.MouseEvent, appId: string) => {
+    event?.stopPropagation()
     dispatch(checkIsFavorite(appId) ? removeItem(appId) : addItem(appId))
   }
 
@@ -141,7 +142,8 @@ export default function AppListSection() {
           items={cardsData.map((card) => ({
             ...card,
             onButtonClick: () => navigate(`/appdetail/${card.id}`),
-            onSecondaryButtonClick: () => addOrRemoveFavorite(card.id!),
+            onSecondaryButtonClick: (e: React.MouseEvent) =>
+              addOrRemoveFavorite(e, card.id!),
             addButtonClicked: checkIsFavorite(card.id!),
           }))}
           groupKey={group}

src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/MarketplaceHeader.scss

@@ -22,12 +22,15 @@
   height: 288px;
   display: flex;
   flex-wrap: wrap;
-  .lead-image > img {
-    border-radius: 16px;
-    width: '288px';
-    height: '288px';
+  .lead-image {
+    img {
+      border-radius: 16px;
+      width: '288px';
+      height: '288px';
+    }
   }
   .marketplace-app-content {
+    width: 50%;
     padding: 0px 0px 0px 56px;
   }
 }