feat #1210: fix review comments

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

@@ -2,7 +2,6 @@ import React from 'react'
 import { DeveloperAppDetailState } from '@/reducers/developer'
 import { Aside, ManageApp, renderListedStatus } from '../aside'
 import { shallow } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import { integrationTypesStub } from '@/sagas/__stubs__/integration-types'
 import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
 import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
@@ -15,13 +14,11 @@ jest.mock('react-router', () => ({
 describe('Aside', () => {
   test('Aside - should match snapshot', () => {
     expect(
-      toJson(
-        shallow(
-          <Aside
-            appDetailState={appDetailDataStub as DeveloperAppDetailState}
-            desktopIntegrationTypes={integrationTypesStub.data as DesktopIntegrationTypeModel[]}
-          />,
-        ),
+      shallow(
+        <Aside
+          appDetailState={appDetailDataStub as DeveloperAppDetailState}
+          desktopIntegrationTypes={integrationTypesStub.data as DesktopIntegrationTypeModel[]}
+        />,
       ),
     ).toMatchSnapshot()
   })
@@ -43,14 +40,8 @@ describe('Aside', () => {
 
   test('ManageApp - should match snapshot', () => {
     expect(
-      toJson(
-        shallow(
-          <ManageApp
-            id="test"
-            pendingRevisions={false}
-            appDetailState={appDetailDataStub as DeveloperAppDetailState}
-          />,
-        ),
+      shallow(
+        <ManageApp id="test" pendingRevisions={false} appDetailState={appDetailDataStub as DeveloperAppDetailState} />,
       ),
     ).toMatchSnapshot()
   })

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { GET_ALL_PAGE_SIZE } from '@/constants/paginator'
 import { InstallationModel } from '@reapit/foundations-ts-definitions'
 import { installationsStub } from '@/sagas/__stubs__/installations'
 import { shallow, mount } from 'enzyme'
@@ -65,7 +66,7 @@ describe('AppContent', () => {
       appInstallationsRequestData({
         appId: [appId],
         pageNumber: 1,
-        pageSize: 15,
+        pageSize: GET_ALL_PAGE_SIZE,
         isInstalled: true,
         developerId: [developerId],
       }),

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { GET_ALL_PAGE_SIZE } from '@/constants/paginator'
 import { appInstallationsRequestData } from '@/actions/app-installations'
 import { selectDeveloperId } from '@/selector'
 import developerAppDetailStyles from '@/styles/pages/developer-app-detail.scss?mod'
@@ -67,7 +68,7 @@ export const handleUninstallSuccess = ({ handleAfterClose, setUninstallApp, deve
     appInstallationsRequestData({
       appId: [appId],
       pageNumber: 1,
-      pageSize: 15,
+      pageSize: GET_ALL_PAGE_SIZE,
       isInstalled: true,
       developerId: [developerId],
     }),
@@ -83,6 +84,7 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
 
   const [uninstallApp, setUninstallApp] = React.useState<InstallationModel>()
   const columns = generateColumns(handleUninstall(setUninstallApp))()
+  const isVisibleUninstallModal = Boolean(uninstallApp)
 
   /**
    * 0 = icon
@@ -92,7 +94,7 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
 
   return (
     <div className={clientAppDetailStyles.appContentContainer}>
-      <Modal visible={Boolean(uninstallApp)}>
+      <Modal visible={isVisibleUninstallModal}>
         <ConfirmUninstall
           isSetAppDetailStaleAfterUninstallSuccess={false}
           appName={name}

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

@@ -6,7 +6,7 @@ import appDetailStyles from '@/styles/blocks/app-detail.scss?mod'
 import developerAppDetailStyles from '@/styles/pages/developer-app-detail.scss?mod'
 import { RenderWithHeader } from './app-detail/render-with-header'
 import { Button } from '@reapit/elements'
-import { BooleanToYesNo } from '@/utils/boolean-to-yes-no'
+import { convertBooleanToYesNoString } from '@/utils/boolean-to-yes-no-string'
 import { renderCategory, renderDesktopIntegrationTypes } from '../client-app-detail/app-content'
 import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
 /* eslint-disable max-len */
@@ -105,8 +105,8 @@ export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetail
       <div className={developerAppDetailStyles.headerWithoutMargin}>
         {renderDesktopIntegrationTypes(desktopIntegrationTypes)}
       </div>
-      <RenderWithHeader header="Private App">{BooleanToYesNo(Boolean(limitToClientIds))}</RenderWithHeader>
-      <RenderWithHeader header="Direct API">{BooleanToYesNo(Boolean(isDirectApi))}</RenderWithHeader>
+      <RenderWithHeader header="Private App">{convertBooleanToYesNoString(Boolean(limitToClientIds))}</RenderWithHeader>
+      <RenderWithHeader header="Direct API">{convertBooleanToYesNoString(Boolean(isDirectApi))}</RenderWithHeader>
       <RenderWithHeader header="Status">{renderListedStatus(Boolean(isListed))}</RenderWithHeader>
       <ManageApp appDetailState={appDetailState} id={id} pendingRevisions={Boolean(pendingRevisions)} />
     </div>

packages/marketplace/src/utils/__tests__/boolean-to-yes-no-string.test.ts

@@ -0,0 +1,9 @@
+import { convertBooleanToYesNoString } from '../boolean-to-yes-no-string'
+describe('convertBooleanToYesNoString', () => {
+  it('should return Yes when input true', () => {
+    expect(convertBooleanToYesNoString(true)).toBe('Yes')
+  })
+  it('should return No when input fasle', () => {
+    expect(convertBooleanToYesNoString(false)).toBe('No')
+  })
+})

packages/marketplace/src/utils/boolean-to-yes-no-string.tsx

@@ -0,0 +1,7 @@
+export const convertBooleanToYesNoString: (value: boolean) => string = value => {
+  if (value) {
+    return 'Yes'
+  }
+
+  return 'No'
+}

packages/marketplace/src/utils/route-dispatcher.ts

@@ -1,9 +1,9 @@
 import { AdminDevManagementRequestDataValues } from './../actions/admin-dev-management'
+import { GET_ALL_PAGE_SIZE } from '@/constants/paginator'
 import { selectDeveloperId } from '@/selector'
 import { appDetailRequestData } from './../actions/app-detail'
 import { RouteValue, StringMap } from '../types/core'
 import Routes from '../constants/routes'
-import { GET_ALL_PAGE_SIZE } from '../constants/paginator'
 import store from '../core/store'
 import { clientFetchAppSummary, clientFetchAppDetail } from '../actions/client'
 import { myAppsRequestData } from '../actions/my-apps'
@@ -78,7 +78,7 @@ const routeDispatcher = async (route: RouteValue, params?: StringMap, search?: s
           appInstallationsRequestData({
             appId: [id],
             pageNumber: 1,
-            pageSize: 15,
+            pageSize: GET_ALL_PAGE_SIZE,
             isInstalled: true,
             developerId: [developerId],
           }),