fix(app marketplace): prevent app marketplace image reload (#474)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## unreleased 1.8.0-RC4
 
+- App Marketplace
+  - reduce image flickering on user interaction
 - Service overview
   - Add missing translations, fix duplicate error
 - Service Release Process

src/assets/locales/de/main.json

@@ -300,7 +300,7 @@
           "modularproduction": "Modular Production"
         },
         "noMatch": "Keine Treffer",
-        "for": "für"
+        "for": "zu Ihrem Suchausdruck"
       }
     },
     "semantichub": {

src/assets/locales/en/main.json

@@ -298,8 +298,8 @@
           "real-timecontrol": "Real Time Control",
           "modularproduction": "Modular Production"
         },
-        "noMatch": "No Matches",
-        "for": "for"
+        "noMatch": "No Match",
+        "for": "for your search term"
       }
     },
     "semantichub": {

src/components/overlays/AppMarketplaceRequest/index.tsx

@@ -31,7 +31,6 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import { useState } from 'react'
 import {
-  type AgreementRequest,
   useAddSubscribeAppMutation,
   useFetchAgreementsQuery,
   useFetchAppDetailsQuery,
@@ -41,6 +40,7 @@ import { closeOverlay } from 'features/control/overlay'
 import './AppMarketplaceRequest.scss'
 import { error } from 'services/NotifyService'
 import { AgreementStatus } from '../UpdateCompanyRole'
+import { type AgreementRequest } from 'features/apps/types'
 
 export default function AppMarketplaceRequest({ id }: { id: string }) {
   const { t } = useTranslation()

src/components/pages/AdminBoardDetail/BoardContentDetails.tsx

@@ -28,7 +28,7 @@ import {
 import BoardHeader from './components/BoardHeader'
 import BoardDocuments from './components/BoardDocuments'
 import BoardProvider from './components/BoardProvider'
-import { type AppDetails, DocumentTypeText } from 'features/apps/apiSlice'
+import { type AppDetails, DocumentTypeText } from 'features/apps/types'
 import CommonService from 'services/CommonService'
 import BoardPrivacy from './components/BoardPrivacy'
 import BoardRoles from './components/BoardRoles'

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

@@ -24,7 +24,7 @@ import {
   StaticTable,
   type TableType,
 } from '@catena-x/portal-shared-components'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import './BoardConnectedData.scss'
 
 export default function BoardConnectedData({ item }: { item: AppDetails }) {

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

@@ -26,8 +26,8 @@ import {
   type Documents,
   type DocumentData,
   DocumentTypeText,
-  useFetchDocumentByIdMutation,
-} from 'features/apps/apiSlice'
+} from 'features/apps/types'
+import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import { download } from 'utils/downloadUtils'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
 

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

@@ -22,7 +22,7 @@ import { useTranslation } from 'react-i18next'
 import { Typography } from '@catena-x/portal-shared-components'
 import { uniqueId } from 'lodash'
 import { Apartment, Person, LocationOn, Web, Info } from '@mui/icons-material'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import './BoardPrivacy.scss'
 import { PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
 

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

@@ -24,7 +24,7 @@ import {
   StaticTable,
   type TableType,
 } from '@catena-x/portal-shared-components'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import './BoardProvider.scss'
 import { Box } from '@mui/material'
 

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

@@ -22,7 +22,7 @@ import { useTranslation } from 'react-i18next'
 import { Typography } from '@catena-x/portal-shared-components'
 import { Grid } from '@mui/material'
 import { uniqueId } from 'lodash'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 
 export default function BoardRoles({ item }: { item: AppDetails }) {
   const { t } = useTranslation()

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

@@ -21,7 +21,7 @@
 import { useTranslation } from 'react-i18next'
 import { Typography } from '@catena-x/portal-shared-components'
 import { Grid } from '@mui/material'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 
 export default function BoardTechnicalUserSetup({
   item,

src/components/pages/AdminCredential/AdminCredentialElements.tsx

@@ -33,7 +33,7 @@ import { download } from 'utils/downloadUtils'
 import { useFetchNewDocumentByIdMutation } from 'features/appManagement/apiSlice'
 import { error, success } from 'services/NotifyService'
 import { uniqueId } from 'lodash'
-import { SubscriptionStatus } from 'features/apps/apiSlice'
+import { SubscriptionStatus } from 'features/apps/types'
 import { setSearchInput } from 'features/appManagement/actions'
 import { useDispatch } from 'react-redux'
 import {

src/components/pages/AppDetail/AppDetailContentDetails.tsx

@@ -31,7 +31,7 @@ import AppDetailPrivacy from './components/AppDetailPrivacy'
 import AppDetailDocuments from './components/AppDetailDocuments'
 import AppDetailProvider from './components/AppDetailProvider'
 import AppDetailTags from './components/AppDetailTags'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import './AppDetail.scss'
 import CommonService from 'services/CommonService'
 import AppDetailTechUserSetup from './components/AppDetailTechUserSetup'

src/components/pages/AppDetail/components/AppDetailDocuments/index.tsx

@@ -22,11 +22,8 @@ import { useTranslation } from 'react-i18next'
 import { Typography } from '@catena-x/portal-shared-components'
 import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
 import 'components/styles/document.scss'
-import {
-  type AppDetails,
-  type Documents,
-  useFetchDocumentByIdMutation,
-} from 'features/apps/apiSlice'
+import { type AppDetails, type Documents } from 'features/apps/types'
+import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import { download } from 'utils/downloadUtils'
 import '../../AppDetail.scss'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'

src/components/pages/AppDetail/components/AppDetailHeader/index.tsx

@@ -32,10 +32,8 @@ import { OVERLAYS } from 'types/Constants'
 import { show } from 'features/control/overlay'
 import { useParams } from 'react-router-dom'
 import { useEffect, useState } from 'react'
-import {
-  SubscriptionStatus,
-  useFetchDocumentByIdMutation,
-} from 'features/apps/apiSlice'
+import { SubscriptionStatus } from 'features/apps/types'
+import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import CommonService from 'services/CommonService'
 import type { UseCaseType } from 'features/appManagement/types'
 

src/components/pages/AppDetail/components/AppDetailPrivacy/index.tsx

@@ -23,7 +23,7 @@ import { Typography } from '@catena-x/portal-shared-components'
 import { uniqueId } from 'lodash'
 import { Apartment, Person, LocationOn, Web, Info } from '@mui/icons-material'
 import './AppDetailPrivacy.scss'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import { PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
 import '../../AppDetail.scss'
 

src/components/pages/AppDetail/components/AppDetailProvider/index.tsx

@@ -24,7 +24,7 @@ import {
   StaticTable,
   type TableType,
 } from '@catena-x/portal-shared-components'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import '../../AppDetail.scss'
 
 export default function AppDetailProvider({ item }: { item: AppDetails }) {

src/components/pages/AppDetail/components/AppDetailTags/index.tsx

@@ -19,7 +19,7 @@
  ********************************************************************************/
 
 import { Chip, Typography } from '@catena-x/portal-shared-components'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import './AppDetailTags.scss'
 import '../../AppDetail.scss'
 import { useTranslation } from 'react-i18next'

src/components/pages/AppDetail/components/AppDetailTechUserSetup/index.tsx

@@ -20,7 +20,7 @@
 
 import { useTranslation } from 'react-i18next'
 import { Typography } from '@catena-x/portal-shared-components'
-import type { AppDetails } from 'features/apps/apiSlice'
+import type { AppDetails } from 'features/apps/types'
 import { Grid } from '@mui/material'
 import '../../AppDetail.scss'
 

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

@@ -1,6 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021, 2023 BMW Group AG
- * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -22,14 +21,14 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Cards, CategoryDivider } from '@catena-x/portal-shared-components'
 import { fetchImageWithToken } from 'services/ImageService'
-import type { AppItem } from 'features/apps/apiSlice'
+import type { AppMarketplaceCard } from 'features/apps/types'
 
 export const AppListGroup = ({
   category,
   items,
 }: {
   category: string
-  items: AppItem[]
+  items: AppMarketplaceCard[]
 }) => {
   const { t } = useTranslation()
   const [itemsShown, setItemsShown] = useState('4')

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

@@ -1,6 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021, 2023 BMW Group AG
- * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -26,14 +25,13 @@ import { useTranslation } from 'react-i18next'
 import { AppListGroup } from '../AppListGroup'
 import NoItems from 'components/pages/NoItems'
 import { fetchImageWithToken } from 'services/ImageService'
+import { AppGroup, type AppMarketplaceCard } from 'features/apps/types'
 
 export const AppListGroupView = ({
   items,
   groupKey,
 }: {
-  // Add an ESLint exception until there is a solution
-  // eslint-disable-next-line
-  items: any[]
+  items: Array<AppMarketplaceCard>
   groupKey: string
 }) => {
   const { t } = useTranslation()
@@ -42,7 +40,7 @@ export const AppListGroupView = ({
     return <NoItems />
   }
 
-  if (!groupKey || groupKey === '') {
+  if (!groupKey || groupKey === AppGroup.ALL) {
     return (
       <Box>
         <Cards
@@ -60,7 +58,14 @@ export const AppListGroupView = ({
     )
   }
 
-  const group = multiMapBy(items, (item) => item[groupKey])
+  const group = multiMapBy(
+    items,
+    // Note: any here is necessary because the UseCaseType seems to be defined
+    // incorrectly as Object with id and label while the api returns an array of strings.
+    // Fix separately.
+    // eslint-disable-next-line
+    (item) => (item as Record<string, any>)[groupKey]
+  )
 
   return (
     <>