fix: #1210 #1206 - update render Private App

packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx

@@ -16,6 +16,7 @@ import { Loader, Button } from '@reapit/elements'
 import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
 import ClientAppInstallConfirmation from '@/components/ui/client-app-detail/client-app-install-confirmation'
 import { Aside } from './aside'
+import { getDesktopIntegrationTypes } from '@/utils/get-desktop-integration-types'
 
 export type ClientAppDetailProps = {}
 
@@ -89,6 +90,10 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
 
   const desktopIntegrationTypes = useSelector(selectIntegrationTypes) as DesktopIntegrationTypeModel[]
   const appDetailData = useSelector(selectAppDetailData) as AppDetailDataNotNull
+  const userDesktopIntegrationTypes = getDesktopIntegrationTypes(
+    appDetailData.desktopIntegrationTypeIds || [],
+    desktopIntegrationTypes,
+  )
   const isLoadingAppDetail = useSelector(selectAppDetailLoading)
   const loginType = useSelector(selectLoginType)
   const isAdmin = useSelector(selectIsAdmin)
@@ -103,7 +108,7 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
 
   return (
     <div data-test="client-app-detail-container" className={clientAppDetailStyles.appDetailContainer}>
-      <Aside appDetailData={appDetailData} desktopIntegrationTypes={desktopIntegrationTypes} />
+      <Aside appDetailData={appDetailData} desktopIntegrationTypes={userDesktopIntegrationTypes} />
       <div className={clientAppDetailStyles.mainContainer}>
         <AppHeader
           appDetailData={appDetailData}

packages/marketplace/src/components/pages/developer-app-detail/aside.tsx

@@ -129,7 +129,7 @@ export const renderListedStatus = (isListed: boolean) => {
 
 export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetailState }) => {
   const { data } = appDetailState
-  const { isDirectApi, category, isListed, pendingRevisions, id = '', limitToClientIds } = data as AppDetailModel
+  const { isDirectApi, category, isListed, pendingRevisions, id = '', limitToClientIds = [] } = data as AppDetailModel
 
   return (
     <div className={asideContainerClasses}>
@@ -139,7 +139,7 @@ export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetail
           {renderDesktopIntegrationTypes(desktopIntegrationTypes)}
         </div>
         <RenderWithHeader header="Private App">
-          {convertBooleanToYesNoString(Boolean(limitToClientIds))}
+          {convertBooleanToYesNoString(Boolean(limitToClientIds.length > 0))}
         </RenderWithHeader>
         <RenderWithHeader header="Direct API">{convertBooleanToYesNoString(Boolean(isDirectApi))}</RenderWithHeader>
         <RenderWithHeader header="Status">{renderListedStatus(Boolean(isListed))}</RenderWithHeader>

packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx

@@ -21,6 +21,7 @@ import styles from '@/styles/pages/developer-app-detail.scss?mod'
 import AppRevisionModal from '@/components/ui/developer-app-detail/app-revision-modal'
 import { useHistory } from 'react-router'
 import { DeveloperAppDetailState } from '@/reducers/developer'
+import { getDesktopIntegrationTypes } from '@/utils/get-desktop-integration-types'
 
 export type DeveloperAppDetailProps = {}
 
@@ -85,14 +86,18 @@ const DeveloperAppDetail: React.FC<DeveloperAppDetailProps> = () => {
   const installationsData = useSelector(selectInstallationAppData) as PagedResultInstallationModel_
   const unfetch = !appDetailState?.data || !installationsData?.data
   const { id = '', name = '' } = appDetailData
+  const userDesktopIntegrationTypes = getDesktopIntegrationTypes(
+    appDetailData.desktopIntegrationTypeIds || [],
+    desktopIntegrationTypes,
+  )
 
   if (isLoadingAppDetail || isLoadingInstallations || unfetch) {
     return <Loader />
   }
 
   return (
     <div className={styles.appDetailContainer}>
-      <Aside desktopIntegrationTypes={desktopIntegrationTypes} appDetailState={appDetailState} />
+      <Aside desktopIntegrationTypes={userDesktopIntegrationTypes} appDetailState={appDetailState} />
       <div className={styles.mainContainer}>
         <AppHeader appDetailData={appDetailData} />
         <AppContent appDetailData={appDetailData} />

packages/marketplace/src/utils/__tests__/get-desktop-integration-types.ts

@@ -0,0 +1,8 @@
+import { getDesktopIntegrationTypes } from '../get-desktop-integration-types'
+
+describe('getDesktopIntegrationTypes', () => {
+  it('shold working correctly', () => {
+    const mockDesktopIntegrationTypes = [{ id: '1' }, { id: '2' }]
+    expect(getDesktopIntegrationTypes(['1'], mockDesktopIntegrationTypes)).toEqual([mockDesktopIntegrationTypes[0]])
+  })
+})

packages/marketplace/src/utils/get-desktop-integration-types.ts

@@ -0,0 +1,9 @@
+import { DesktopIntegrationTypeModel } from '@/actions/app-integration-types'
+
+export const getDesktopIntegrationTypes = (
+  desktopIntegrationTypeIds: string[],
+  desktopIntegrationTypes: DesktopIntegrationTypeModel[],
+) =>
+  desktopIntegrationTypes.filter(desktopIntegrationType =>
+    desktopIntegrationTypeIds.includes(desktopIntegrationType.id || ''),
+  )