feat: #1125 Standalone app page (#1240)

* feat: #1125: Create app details standalone page

packages/elements/src/components/DropdownSelect/index.tsx

@@ -34,7 +34,7 @@ export const DropdownSelect: React.FC<DropdownSelectProps> = ({
   const handleRenderTags = (props: CustomTagProps) => {
     const { value, onClose } = props
     const option = options.find(option => option.value === value) as SelectOption
-    return <CustomTag label={option?.value} description={option.description} link={option.link} onClose={onClose} />
+    return <CustomTag label={option?.value} description={option?.description} link={option?.link} onClose={onClose} />
   }
 
   const handleChangeOption = field => value => {

packages/marketplace/src/actions/__tests__/client.ts

@@ -1,28 +1,32 @@
-import { clientLoading, clientReceiveData, clientRequestData, clientClearData } from '../client'
+import {
+  clientFetchAppSummary,
+  clientFetchAppSummarySuccess,
+  clientFetchAppSummaryFailed,
+  clientClearAppSummary,
+} from '../client'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub, featuredAppsDataStub } from '../../sagas/__stubs__/apps'
 
 describe('client actions', () => {
-  it('should create a clientLoading action', () => {
-    expect(clientLoading.type).toEqual(ActionTypes.CLIENT_LOADING)
-    expect(clientLoading(true).data).toEqual(true)
+  it('should create a clientFetchAppSummary action', () => {
+    expect(clientFetchAppSummary.type).toEqual(ActionTypes.CLIENT_FETCH_APP_SUMMARY)
+    expect(clientFetchAppSummary({ page: 1 }).data).toEqual({ page: 1 })
   })
-
-  it('should create a clientReceiveData action', () => {
-    expect(clientReceiveData.type).toEqual(ActionTypes.CLIENT_RECEIVE_DATA)
-    expect(clientReceiveData({ featuredApps: featuredAppsDataStub.data.data, apps: appsDataStub.data }).data).toEqual({
+  it('should create a clientFetchAppSummarySuccess action', () => {
+    expect(clientFetchAppSummarySuccess.type).toEqual(ActionTypes.CLIENT_FETCH_APP_SUMMARY_SUCCESS)
+    expect(
+      clientFetchAppSummarySuccess({ featuredApps: featuredAppsDataStub.data.data, apps: appsDataStub.data }).data,
+    ).toEqual({
       featuredApps: featuredAppsDataStub.data.data,
       apps: appsDataStub.data,
     })
   })
-
-  it('should create a clientRequestData action', () => {
-    expect(clientRequestData.type).toEqual(ActionTypes.CLIENT_REQUEST_DATA)
-    expect(clientRequestData({ page: 1 }).data).toEqual({ page: 1 })
+  it('should create a clientFetchAppSummaryFailed action', () => {
+    expect(clientFetchAppSummaryFailed.type).toEqual(ActionTypes.CLIENT_FETCH_APP_SUMMARY_FAILED)
+    expect(clientFetchAppSummaryFailed('error').data).toEqual('error')
   })
-
   it('should create a clientClearData action', () => {
-    expect(clientClearData.type).toEqual(ActionTypes.CLIENT_CLEAR_DATA)
-    expect(clientClearData(null).data).toEqual(null)
+    expect(clientClearAppSummary.type).toEqual(ActionTypes.CLIENT_CLEAR_APP_SUMMARY)
+    expect(clientClearAppSummary(null).data).toEqual(null)
   })
 })

packages/marketplace/src/actions/app-installations.ts

@@ -20,10 +20,11 @@ export interface InstallationParams {
   pageNumber?: number
 }
 
-export type InstallParams = CreateInstallationModel
+export type InstallParams = CreateInstallationModel & { callback?: () => void }
 
 export type UninstallParams = {
   installationId: string
+  callback?: () => void
 } & TerminateInstallationModel
 
 export const appInstallationsRequestData = actionCreator<InstallationParams>(ActionTypes.APP_INSTALLATIONS_REQUEST_DATA)

packages/marketplace/src/actions/client.ts

@@ -1,9 +1,17 @@
-import { actionCreator } from '../utils/actions'
-import ActionTypes from '../constants/action-types'
-import { ClientItem, ClientParams } from '../reducers/client'
+import { actionCreator } from '@/utils/actions'
+import ActionTypes from '@/constants/action-types'
+import { ClientAppSummary, ClientAppSummaryParams } from '@/reducers/client/app-summary'
+import { AppDetailData } from '@/reducers/client/app-detail'
+import { FetchAppDetailParams } from '@/services/apps'
 
-export const clientRequestData = actionCreator<ClientParams>(ActionTypes.CLIENT_REQUEST_DATA)
-export const clientRequestDataFailure = actionCreator<void>(ActionTypes.CLIENT_REQUEST_FAILURE)
-export const clientLoading = actionCreator<boolean>(ActionTypes.CLIENT_LOADING)
-export const clientReceiveData = actionCreator<ClientItem | undefined>(ActionTypes.CLIENT_RECEIVE_DATA)
-export const clientClearData = actionCreator<null>(ActionTypes.CLIENT_CLEAR_DATA)
+export const clientFetchAppSummary = actionCreator<ClientAppSummaryParams>(ActionTypes.CLIENT_FETCH_APP_SUMMARY)
+export const clientFetchAppSummarySuccess = actionCreator<ClientAppSummary | undefined>(
+  ActionTypes.CLIENT_FETCH_APP_SUMMARY_SUCCESS,
+)
+export const clientFetchAppSummaryFailed = actionCreator<string>(ActionTypes.CLIENT_FETCH_APP_SUMMARY_FAILED)
+export const clientClearAppSummary = actionCreator<null>(ActionTypes.CLIENT_CLEAR_APP_SUMMARY)
+
+// Client App Detail
+export const clientFetchAppDetail = actionCreator<FetchAppDetailParams>(ActionTypes.CLIENT_FETCH_APP_DETAIL)
+export const clientFetchAppDetailSuccess = actionCreator<AppDetailData>(ActionTypes.CLIENT_FETCH_APP_DETAIL_SUCCESS)
+export const clientFetchAppDetailFailed = actionCreator<string>(ActionTypes.CLIENT_FETCH_APP_DETAIL_FAILED)

packages/marketplace/src/actions/developer.ts

@@ -2,6 +2,7 @@
 import { actionCreator } from '../utils/actions'
 import ActionTypes from '../constants/action-types'
 import {
+  AppDetailData,
   DeveloperItem,
   DeveloperRequestParams,
   Billing,
@@ -11,9 +12,17 @@ import {
 import { CreateDeveloperModel, DeveloperModel } from '@reapit/foundations-ts-definitions'
 import { FormState } from '@/types/core'
 import { FetchBillingParams } from '@/sagas/api'
+import { FetchAppDetailParams } from '@/services/apps'
 import { FetchMonthlyBillingParams } from '@/services/billings'
 import { WebhookPingTestParams } from '@/services/subscriptions'
 
+// Developer App Detail
+export const developerFetchAppDetail = actionCreator<FetchAppDetailParams>(ActionTypes.DEVELOPER_FETCH_APP_DETAIL)
+export const developerFetchAppDetailSuccess = actionCreator<AppDetailData>(
+  ActionTypes.DEVELOPER_FETCH_APP_DETAIL_SUCCESS,
+)
+export const developerFetchAppDetailFailed = actionCreator<string>(ActionTypes.DEVELOPER_FETCH_APP_DETAIL_FAILED)
+
 export const developerRequestData = actionCreator<DeveloperRequestParams>(ActionTypes.DEVELOPER_REQUEST_DATA)
 export const developerRequestDataFailure = actionCreator<void>(ActionTypes.DEVELOPER_REQUEST_DATA_FAILURE)
 export const developerLoading = actionCreator<boolean>(ActionTypes.DEVELOPER_LOADING)

packages/marketplace/src/actions/revision-detail.ts

@@ -7,6 +7,7 @@ import { FormState } from '@/types/core'
 export interface RevisionDetailRequestParams {
   appId: string
   appRevisionId: string
+  callback?: () => void
 }
 
 export interface RevisionReceiveDataParams extends RevisionDetailItem {

packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-home.tsx.snap

@@ -60,7 +60,7 @@ exports[`DeveloperHome should match a snapshot 1`] = `
       pagination={
         Object {
           "onChange": [Function],
-          "pageNumber": 2,
+          "pageNumber": 1,
           "pageSize": 2,
           "totalCount": 6,
         }
@@ -139,7 +139,7 @@ exports[`DeveloperHome should match a snapshot 3`] = `
       pagination={
         Object {
           "onChange": [Function],
-          "pageNumber": 2,
+          "pageNumber": 1,
           "pageSize": 2,
           "totalCount": 6,
         }

packages/marketplace/src/components/pages/__tests__/client.tsx

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux'
 import { shallow, mount } from 'enzyme'
 import { appsDataStub, featuredAppsDataStub } from '@/sagas/__stubs__/apps'
 import { ReduxState } from '@/types/core'
-import { ClientItem } from '@/reducers/client'
+import { ClientAppSummary } from '@/reducers/client/app-summary'
 import {
   Client,
   ClientProps,
@@ -34,12 +34,12 @@ const routerProps = {
 } as RouteComponentProps<any, StaticContext, any>
 
 const props = (loading: boolean): ClientProps => ({
-  clientState: {
-    loading: loading,
-    clientData: {
+  appSummaryState: {
+    isAppSummaryLoading: loading,
+    data: {
       featuredApps: featuredAppsDataStub.data,
       apps: appsDataStub,
-    } as ClientItem,
+    } as ClientAppSummary,
   },
   appDetail: {
     appDetailData: appDetailDataStub,
@@ -81,12 +81,12 @@ describe('Client', () => {
     } as RouteComponentProps<any, StaticContext, any>
 
     const props: ClientProps = {
-      clientState: {
-        loading: false,
-        clientData: {
+      appSummaryState: {
+        isAppSummaryLoading: false,
+        data: {
           featuredApps: [] as AppSummaryModel[],
           apps: appsDataStub,
-        } as ClientItem,
+        } as ClientAppSummary,
       },
       appDetail: {
         appDetailData: appDetailDataStub,
@@ -111,12 +111,12 @@ describe('Client', () => {
 
   it('should match a snapshot when featured apps is undefined', () => {
     const props: ClientProps = {
-      clientState: {
-        loading: false,
-        clientData: {
+      appSummaryState: {
+        isAppSummaryLoading: false,
+        data: {
           featuredApps: undefined,
           apps: appsDataStub,
-        } as ClientItem,
+        } as ClientAppSummary,
       },
       appDetail: {
         appDetailData: appDetailDataStub,
@@ -143,9 +143,18 @@ describe('Client', () => {
     it('should return correctly', () => {
       const mockState = {
         client: {
-          clientData: {
-            featuredApps: featuredAppsDataStub.data,
-            apps: appsDataStub,
+          appSummary: {
+            data: {
+              apps: appsDataStub.data,
+              featuredApps: featuredAppsDataStub.data,
+            },
+            isAppSummaryLoading: false,
+            error: 'error',
+          },
+          appDetail: {
+            data: appDetailDataStub.data,
+            isAppDetailLoading: false,
+            error: '',
           },
         },
         appDetail: {
@@ -165,7 +174,7 @@ describe('Client', () => {
         },
       } as ReduxState
       const output = {
-        clientState: mockState.client,
+        appSummaryState: mockState.client.appSummary,
         appDetail: mockState.appDetail,
         clientId: 'ABC',
         installationsFormState: 'PENDING',

packages/marketplace/src/components/pages/__tests__/developer-home.tsx

@@ -31,6 +31,10 @@ describe('DeveloperHome', () => {
         webhookPingTestStatus: null,
         loading: false,
         isVisible: false,
+        developerAppDetail: {
+          data: null,
+          isAppDetailLoading: false,
+        },
         developerData: {
           ...appsDataStub,
           scopes: appPermissionStub,
@@ -76,6 +80,10 @@ describe('DeveloperHome', () => {
         },
         loading: false,
         isVisible: true,
+        developerAppDetail: {
+          data: null,
+          isAppDetailLoading: false,
+        },
         developerData: {
           ...appsDataStub,
           scopes: appPermissionStub,
@@ -125,10 +133,10 @@ describe('DeveloperHome', () => {
     it('should call push correctly', () => {
       const mockHistory = {
         push: jest.fn(),
-      }
+      } as any
       const fn = handleOnChange(mockHistory)
       fn(1)
-      expect(mockHistory.push).toBeCalledWith(`${routes.DEVELOPER_MY_APPS}/${1}`)
+      expect(mockHistory.push).toBeCalledWith(`${routes.DEVELOPER_MY_APPS}?page=1`)
     })
   })