feat: #1126 Route to the new standalone app page

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

@@ -5,19 +5,11 @@ import { mount } from 'enzyme'
 import configureStore from 'redux-mock-store'
 import appState from '@/reducers/__stubs__/app-state'
 import Routes from '@/constants/routes'
-import DeveloperHome, {
-  handleOnCardClick,
-  handleAfterClose,
-  handleFetchDeveloperApps,
-  handleOnChange,
-} from '../developer-home'
+import DeveloperHome, { handleOnCardClick, handleFetchDeveloperApps, handleOnChange } from '../developer-home'
 import { AppSummaryModel } from '@/types/marketplace-api-schema'
-import { appDetailRequestData, removeAuthenticationCode } from '@/actions/app-detail'
-import { developerAppShowModal } from '@/actions/developer-app-modal'
 import { developerRequestData } from '@/actions/developer'
 import { getMockRouterProps } from '@/utils/mock-helper'
 import routes from '@/constants/routes'
-import { AppDetailState } from '@/reducers/app-detail'
 
 describe('Login', () => {
   const { history } = getMockRouterProps({})
@@ -42,31 +34,12 @@ describe('Login', () => {
   })
   describe('handleOnCardClick', () => {
     it('should run correctly', () => {
-      const mockAppDetailState = {
-        appDetailData: {
-          data: {
-            id: 'testId',
-          },
-        },
-      } as AppDetailState
       const mockAppSummary: AppSummaryModel = {
-        id: 'testId2',
+        id: 'testId',
       }
-      const fn = handleOnCardClick(mockAppDetailState, spyDispatch)
+      const fn = handleOnCardClick(history)
       fn(mockAppSummary)
-      expect(spyDispatch).toBeCalledWith(
-        appDetailRequestData({
-          id: mockAppSummary.id || '',
-        }),
-      )
-    })
-  })
-  describe('handleAfterClose', () => {
-    it('should run correctly', () => {
-      const fn = handleAfterClose(spyDispatch)
-      fn()
-      expect(spyDispatch).toBeCalledWith(removeAuthenticationCode())
-      expect(spyDispatch).toBeCalledWith(developerAppShowModal(false))
+      expect(history.push).toBeCalledWith(`${Routes.DEVELOPER_MY_APPS}/${mockAppSummary.id}`)
     })
   })
   describe('handleFetchDeveloperApps', () => {

packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap

@@ -492,6 +492,28 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
                 </div>
               </div>
             </AppContent>
+            <Component
+              className="is-clearfix"
+            >
+              <div
+                className="form-section mb-4 is-clearfix"
+              >
+                <Component
+                  className="is-pulled-right"
+                  onClick={[Function]}
+                >
+                  <button
+                    className="button is-pulled-right is-primary  "
+                    data-test=""
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    Back To Apps
+                  </button>
+                </Component>
+              </div>
+            </Component>
           </div>
         </div>
       </ClientAppDetail>

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

@@ -1,4 +1,7 @@
 import * as React from 'react'
+import { History } from 'history'
+import { useHistory } from 'react-router'
+import classNames from 'classnames'
 import {
   handleUninstallAppButtonClick,
   handleCloseUninstallConfirmationModal,
@@ -12,11 +15,12 @@ import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-a
 import { selectLoginType, selectIsAdmin } from '@/selector/auth'
 import AppHeader from '@/components/ui/standalone-app-detail/app-header'
 import AppContent from './app-content'
-import { Loader, Button } from '@reapit/elements'
+import { Loader, Button, FormSection } 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'
+import Routes from '@/constants/routes'
 
 export type ClientAppDetailProps = {}
 
@@ -32,6 +36,12 @@ export const handleInstallAppButtonClick = (setIsVisibleInstallConfirmation: (is
   }
 }
 
+export const onBackToAppsButtonClick = (history: History) => {
+  return () => {
+    history.push(Routes.CLIENT)
+  }
+}
+
 export const renderAppHeaderButtonGroup = (
   id: string,
   installedOn: string,
@@ -71,6 +81,7 @@ export const renderAppHeaderButtonGroup = (
 }
 
 const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
+  const history = useHistory()
   const [isVisibleInstallConfirmation, setIsVisibleInstallConfirmation] = React.useState(false)
   const [isVisibleUninstallConfirmation, setIsVisibleUninstallConfirmation] = React.useState(false)
   const closeUninstallConfirmationModal = React.useCallback(
@@ -121,6 +132,11 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
           )}
         />
         <AppContent desktopIntegrationTypes={userDesktopIntegrationTypes} appDetailData={appDetailData} />
+        <FormSection className={classNames('is-clearfix', clientAppDetailStyles.footerContainer)}>
+          <Button className="is-pulled-right" onClick={onBackToAppsButtonClick(history)}>
+            Back To Apps
+          </Button>
+        </FormSection>
         {isVisibleUninstallConfirmation && (
           <ClientAppUninstallConfirmation
             visible={isVisibleUninstallConfirmation}

packages/marketplace/src/components/pages/client-app-management/__tests__/client-apps-management.test.tsx

@@ -5,20 +5,11 @@ import { MemoryRouter } from 'react-router'
 import configureStore from 'redux-mock-store'
 import * as ReactRedux from 'react-redux'
 import routes from '@/constants/routes'
-import ClientAppsManagement, {
-  handleOnChange,
-  handleUseEffect,
-  handleFetchMyApp,
-  handleSetStateViewManage,
-  handleFetchAppDetail,
-  handleInstallationsSetFormState,
-} from '../client-apps-management'
+import ClientAppsManagement, { handleOnChange, handleOnSettingClick } from '../client-apps-management'
 import Routes from '@/constants/routes'
 import { ReduxState } from '@/types/core'
-import { myAppsRequestData } from '@/actions/my-apps'
-import { setAppDetailModalStateManage } from '@/actions/app-detail-modal'
-import { appDetailRequestData } from '@/actions/app-detail'
-import { appInstallationsSetFormState } from '@/actions/app-installations'
+import { getMockRouterProps } from '@/utils/mock-helper'
+import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 
 const createStore = (loading, isAdmin) => {
   return {
@@ -39,6 +30,7 @@ const createStore = (loading, isAdmin) => {
 }
 
 describe('MyApps', () => {
+  const { history } = getMockRouterProps({})
   let mockStore
   let store
   beforeEach(() => {
@@ -83,51 +75,19 @@ describe('MyApps', () => {
   })
 
   it('handleOnChange', () => {
-    const mockHistory = {
-      push: jest.fn(),
-    }
-    const fn = handleOnChange(mockHistory)
+    const fn = handleOnChange(history)
     fn(1)
-    expect(mockHistory.push).toBeCalledWith(`${routes.MY_APPS}/${1}`)
+    expect(history.push).toBeCalledWith(`${routes.MY_APPS}/${1}`)
   })
 
-  it('handleUseEffect', () => {
-    const mockProps = {
-      isDone: true,
-      installationsSetFormState: jest.fn(),
-      fetchMyApp: jest.fn(),
-      pageNumber: 1,
-    }
-    const fn = handleUseEffect(mockProps)
-    fn()
-    expect(mockProps.installationsSetFormState).toBeCalled()
-    expect(mockProps.fetchMyApp).toBeCalledWith(mockProps.pageNumber)
-  })
-
-  it('handleFetchMyApp', () => {
-    const dispatch = jest.fn()
-    const fn = handleFetchMyApp(dispatch, 1)
-    fn()
-    expect(dispatch).toBeCalledWith(myAppsRequestData(1))
-  })
-  it('handleSetStateViewManage', () => {
-    const dispatch = jest.fn()
-    const fn = handleSetStateViewManage(dispatch)
-    fn()
-    expect(dispatch).toBeCalledWith(setAppDetailModalStateManage())
-  })
-  it('handleFetchAppDetail', () => {
-    const dispatch = jest.fn()
-    const id = '1'
-    const clientId = '2'
-    const fn = handleFetchAppDetail(dispatch)
-    fn(id, clientId)
-    expect(dispatch).toBeCalledWith(appDetailRequestData({ id, clientId }))
-  })
-  it('handleInstallationsSetFormState', () => {
-    const dispatch = jest.fn()
-    const fn = handleInstallationsSetFormState(dispatch)
-    fn('DONE')
-    expect(dispatch).toBeCalledWith(appInstallationsSetFormState('DONE'))
+  describe('handleOnSettingClick', () => {
+    it('should run correctly', () => {
+      const mockAppSummary: AppSummaryModel = {
+        id: 'testId',
+      }
+      const fn = handleOnSettingClick(history)
+      fn(mockAppSummary)
+      expect(history.push).toBeCalledWith(`${Routes.CLIENT}/${mockAppSummary.id}`)
+    })
   })
 })

packages/marketplace/src/components/pages/client-app-management/client-apps-management.tsx

@@ -1,73 +1,36 @@
 import * as React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { useParams, useHistory } from 'react-router'
-import { FormState } from '@/types/core'
+import { History } from 'history'
 import { Loader, Info } from '@reapit/elements'
 import ErrorBoundary from '@/components/hocs/error-boundary'
 import routes from '@/constants/routes'
 import AppList from '@/components/ui/app-list'
-import { appDetailRequestData } from '@/actions/app-detail'
 import AppDetailModal from '@/components/ui/app-detail-modal'
-import { myAppsRequestData } from '@/actions/my-apps'
-import { selectClientId, selectMyApps, selectAppDetail } from '@/selector/client'
+import { selectMyApps } from '@/selector/client'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import { handleLaunchApp } from '@/utils/launch-app'
-import { appInstallationsSetFormState } from '@/actions/app-installations'
-import { setAppDetailModalStateManage } from '@/actions/app-detail-modal'
 import { selectIsAdmin } from '@/selector/auth'
-import { selectInstallationFormState } from '@/selector/installations'
-import { Dispatch } from 'redux'
+import Routes from '@/constants/routes'
 
 export const handleOnChange = history => (page: number) => history.push(`${routes.MY_APPS}/${page}`)
 
-export const handleUseEffect = ({ isDone, installationsSetFormState, fetchMyApp, pageNumber }) => () => {
-  if (isDone) {
-    installationsSetFormState('PENDING')
-    fetchMyApp(pageNumber)
-  }
-}
-
-export const handleFetchMyApp = (dispatch: Dispatch, page: number) => () => {
-  dispatch(myAppsRequestData(page))
-}
-
-export const handleSetStateViewManage = (dispatch: Dispatch) => () => {
-  dispatch(setAppDetailModalStateManage())
-}
-
-export const handleFetchAppDetail = (dispatch: Dispatch) => (id: string, clientId: string) => {
-  dispatch(appDetailRequestData({ id, clientId }))
-}
-
-export const handleInstallationsSetFormState = (dispatch: Dispatch) => (formState: FormState) => {
-  dispatch(appInstallationsSetFormState(formState))
+export const handleOnSettingClick = (history: History) => (app: AppSummaryModel) => {
+  history.push(`${Routes.CLIENT}/${app.id}`)
 }
 
 export const ClientAppsManagement: React.FunctionComponent = () => {
-  const dispatch = useDispatch()
-
+  const history = useHistory()
   const myAppsState = useSelector(selectMyApps)
-  const appDetail = useSelector(selectAppDetail)
-  const clientId = useSelector(selectClientId)
-  const installationsFormState = useSelector(selectInstallationFormState)
   const isAdmin = useSelector(selectIsAdmin)
-  const history = useHistory()
   const { page = 1 } = useParams()
   const pageNumber = Number(page)
 
-  const fetchMyApp = handleFetchMyApp(dispatch, pageNumber)
-  const setStateViewManage = handleSetStateViewManage(dispatch)
-  const fetchAppDetail = handleFetchAppDetail(dispatch)
-  const installationsSetFormState = handleInstallationsSetFormState(dispatch)
-
   const unfetched = !myAppsState.myAppsData
   const loading = myAppsState.loading
   const list = myAppsState?.myAppsData?.data?.data || []
   const { totalCount, pageSize } = myAppsState?.myAppsData?.data || {}
   const [visible, setVisible] = React.useState(false)
-  const isDone = installationsFormState === 'DONE'
-
-  React.useEffect(handleUseEffect({ isDone, installationsSetFormState, fetchMyApp, pageNumber }), [isDone])
 
   if (unfetched || loading) {
     return <Loader />
@@ -81,13 +44,7 @@ export const ClientAppsManagement: React.FunctionComponent = () => {
         title="Manage Apps"
         loading={loading}
         onCardClick={(app: AppSummaryModel) => handleLaunchApp(app)}
-        onSettingsClick={(app: AppSummaryModel) => {
-          setVisible(true)
-          setStateViewManage()
-          if (app.id && (!appDetail.appDetailData || appDetail.appDetailData.data.id !== app.id)) {
-            fetchAppDetail(app.id, clientId)
-          }
-        }}
+        onSettingsClick={handleOnSettingClick(history)}
         infoType="INSTALLED_APPS_EMPTY"
         pagination={{
           totalCount,