fix: #1210 #1206 - update render Private App

reapit · May 27, 2020 · 16ad7fd · 16ad7fd
1 parent e5405a5
commit 16ad7fd
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 11 deletions.
diff --git a/...e/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap b/...e/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap
@@ -18,6 +18,14 @@ exports[`AppContent AppContent - should match snapshot 1`] = `
     <ul />
   </div>
   <div>
+    <div>
+      <Component>
+        Category
+      </Component>
+      <p>
+        None
+      </p>
+    </div>
     <div>
       <Component>
         Destop Integration
@@ -84,7 +92,18 @@ exports[`AppContent AppContent - should match snapshot 1`] = `
 </div>
 `;
 
-exports[`AppContent renderCategory - should match snapshot 1`] = `<div />`;
+exports[`AppContent renderCategory - should match snapshot 1`] = `
+<div>
+  <div>
+    <Component>
+      Category
+    </Component>
+    <p>
+      None
+    </p>
+  </div>
+</div>
+`;
 
 exports[`AppContent renderDescripion - should match snapshot 1`] = `
 <div>

diff --git a/...etplace/src/components/pages/client-app-detail/__test__/__snapshots__/aside.test.tsx.snap b/...etplace/src/components/pages/client-app-detail/__test__/__snapshots__/aside.test.tsx.snap
@@ -6,7 +6,16 @@ exports[`Aside Aside - should match snapshot 1`] = `
     <Component />
     <Component />
     <Component />
-    <div />
+    <div>
+      <div>
+        <Component>
+          Category
+        </Component>
+        <p>
+          None
+        </p>
+      </div>
+    </div>
     <div>
       <div>
         <Component>

diff --git a/...components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap b/...components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap
@@ -249,8 +249,36 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
                     </div>
                   </Component>
                 </Component>
-                <div />
-                <div />
+                <div>
+                  <div>
+                    <Component>
+                      <h5
+                        className="title is-5  "
+                        id=""
+                      >
+                        Category
+                      </h5>
+                    </Component>
+                    <p>
+                      None
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <Component>
+                      <h5
+                        className="title is-5  "
+                        id=""
+                      >
+                        Destop Integration
+                      </h5>
+                    </Component>
+                    <p>
+                      None
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
           </Component>
@@ -367,6 +395,32 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
                   <ul />
                 </div>
                 <div>
+                  <div>
+                    <Component>
+                      <h5
+                        className="title is-5  "
+                        id=""
+                      >
+                        Category
+                      </h5>
+                    </Component>
+                    <p>
+                      None
+                    </p>
+                  </div>
+                  <div>
+                    <Component>
+                      <h5
+                        className="title is-5  "
+                        id=""
+                      >
+                        Destop Integration
+                      </h5>
+                    </Component>
+                    <p>
+                      None
+                    </p>
+                  </div>
                   <Component
                     header="Developer"
                   >

diff --git a/packages/marketplace/src/components/pages/client-app-detail/app-content.tsx b/packages/marketplace/src/components/pages/client-app-detail/app-content.tsx
@@ -36,7 +36,12 @@ export const renderPermissions = (scopes: ScopeModel[] = []) => (
 
 export const renderCategory = (category: CategoryModel | undefined) => {
   if (!category) {
-    return null
+    return (
+      <div className={clientAppDetailStyles.gutter}>
+        <H5 className={standAloneAppDetailStyles.headerWithoutMargin}>Category</H5>
+        <p>None</p>
+      </div>
+    )
   }
 
   return (
@@ -49,7 +54,12 @@ export const renderCategory = (category: CategoryModel | undefined) => {
 
 export const renderDesktopIntegrationTypes = (desktopIntegrationTypes: DesktopIntegrationTypeModel[]) => {
   if (desktopIntegrationTypes.length === 0) {
-    return null
+    return (
+      <div className={clientAppDetailStyles.gutter}>
+        <H5 className={standAloneAppDetailStyles.headerWithoutMargin}>Destop Integration</H5>
+        <p>None</p>
+      </div>
+    )
   }
 
   return (

diff --git a/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx b/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}

diff --git a/...lace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap b/...lace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap
@@ -5,7 +5,16 @@ exports[`Aside Aside - should match snapshot 1`] = `
   className=" "
 >
   <div>
-    <div />
+    <div>
+      <div>
+        <Component>
+          Category
+        </Component>
+        <p>
+          None
+        </p>
+      </div>
+    </div>
     <div>
       <div>
         <Component>

diff --git a/packages/marketplace/src/components/pages/developer-app-detail/aside.tsx b/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>

diff --git a/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx b/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} />

diff --git a/packages/marketplace/src/utils/__tests__/get-desktop-integration-types.ts b/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]])
+  })
+})
diff --git a/packages/marketplace/src/utils/get-desktop-integration-types.ts b/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 || ''),
+  )