From 1de6b649d4582b5e42f2e40d7ba9a8eed314eb79 Mon Sep 17 00:00:00 2001
From: andt <andt@reapit.com>
Date: Fri, 29 May 2020 10:51:44 +0700
Subject: [PATCH 1/3] feat: #1127 As a developer, I should be able to see a
 preview of my app

---
 .../src/actions/__tests__/developer.ts        |  5 ++
 packages/marketplace/src/actions/developer.ts |  1 +
 .../client-app-detail/client-app-detail.tsx   | 36 ++++++++++++--
 .../developer-submit-app.test.tsx.snap        | 15 ++++++
 .../developer-submit-app.tsx                  | 33 +++++++++++++
 .../marketplace/src/constants/action-types.ts |  1 +
 packages/marketplace/src/constants/routes.ts  |  1 +
 .../__tests__/__snapshots__/router.tsx.snap   | 13 +++++
 packages/marketplace/src/core/router.tsx      |  1 +
 .../src/sagas/apps/__test__/apps.test.ts      | 48 ++++++++++++++++++-
 packages/marketplace/src/sagas/apps/apps.ts   | 23 ++++++++-
 .../src/selector/client-app-detail.ts         |  4 ++
 .../src/tests/badges/badge-branches.svg       |  2 +-
 .../src/tests/badges/badge-functions.svg      |  2 +-
 .../src/tests/badges/badge-lines.svg          |  2 +-
 .../src/tests/badges/badge-statements.svg     |  2 +-
 16 files changed, 180 insertions(+), 9 deletions(-)

diff --git a/packages/marketplace/src/actions/__tests__/developer.ts b/packages/marketplace/src/actions/__tests__/developer.ts
index bee0a44634..871cbc6c3c 100644
--- a/packages/marketplace/src/actions/__tests__/developer.ts
+++ b/packages/marketplace/src/actions/__tests__/developer.ts
@@ -13,6 +13,7 @@ import {
   fetchMonthlyBillingFailure,
   developerWebhookPing,
   developerSetWebhookPingStatus,
+  developerApplyAppDetails,
 } from '../developer'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub } from '../../sagas/__stubs__/apps'
@@ -112,4 +113,8 @@ describe('developer actions', () => {
     expect(developerSetWebhookPingStatus.type).toEqual(ActionTypes.DEVELOPER_SET_PING_WEBHOOK_STATUS)
     expect(developerSetWebhookPingStatus('SUCCESS').data).toEqual('SUCCESS')
   })
+  it('should create a developerApplyAppDetails action', () => {
+    expect(developerApplyAppDetails.type).toEqual(ActionTypes.DEVELOPER_APPLY_APP_DETAIL)
+    expect(developerApplyAppDetails({}).data).toEqual({})
+  })
 })
diff --git a/packages/marketplace/src/actions/developer.ts b/packages/marketplace/src/actions/developer.ts
index 3cbeb0b0c8..22550767f4 100644
--- a/packages/marketplace/src/actions/developer.ts
+++ b/packages/marketplace/src/actions/developer.ts
@@ -45,3 +45,4 @@ export const developerWebhookPing = actionCreator<PingWebhooksByIdParams>(Action
 export const developerSetWebhookPingStatus = actionCreator<WebhookPingTestStatus>(
   ActionTypes.DEVELOPER_SET_PING_WEBHOOK_STATUS,
 )
+export const developerApplyAppDetails = actionCreator<AppDetailData>(ActionTypes.DEVELOPER_APPLY_APP_DETAIL)
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
index 60de73bfb5..1e569bec52 100644
--- 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
@@ -7,15 +7,19 @@ import ClientAppUninstallConfirmation from '@/components/ui/client-app-detail/cl
 import { DesktopIntegrationTypeModel } from '@/actions/app-integration-types'
 import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
 import { selectIntegrationTypes } from '@/selector/integration-types'
-import { useSelector } from 'react-redux'
-import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-app-detail'
+import { useSelector, useDispatch } from 'react-redux'
+import { selectAppDetailData, selectAppDetailLoading, selectAppDetailError } from '@/selector/client-app-detail'
 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, Alert } 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 { clientFetchAppDetailFailed } from '@/actions/client'
+import { developerApplyAppDetails } from '@/actions/developer'
+import { useParams } from 'react-router'
+import { Dispatch } from 'redux'
 
 export type ClientAppDetailProps = {}
 
@@ -31,6 +35,24 @@ export const handleInstallAppButtonClick = (setIsVisibleInstallConfirmation: (is
   }
 }
 
+export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appid?: string) => () => {
+  try {
+    const appDataString = localStorage.getItem('developer-preview-app')
+    if (!appDataString) {
+      throw 'No app preview'
+    }
+
+    const appData = JSON.parse(appDataString)
+    if (appData.id !== appid) {
+      throw 'No app preview'
+    }
+
+    dispatch(developerApplyAppDetails(appData))
+  } catch (err) {
+    dispatch(clientFetchAppDetailFailed(err))
+  }
+}
+
 export const renderAppHeaderButtonGroup = (
   id: string,
   installedOn: string,
@@ -70,6 +92,9 @@ export const renderAppHeaderButtonGroup = (
 }
 
 const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
+  const dispatch = useDispatch()
+  const { id: appid } = useParams()
+
   const [isVisibleInstallConfirmation, setIsVisibleInstallConfirmation] = React.useState(false)
   const [isVisibleUninstallConfirmation, setIsVisibleUninstallConfirmation] = React.useState(false)
   const closeUninstallConfirmationModal = React.useCallback(
@@ -92,11 +117,16 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const isLoadingAppDetail = useSelector(selectAppDetailLoading)
   const loginType = useSelector(selectLoginType)
   const isAdmin = useSelector(selectIsAdmin)
+  const error = useSelector(selectAppDetailError)
+
   const isInstallBtnHidden = loginType === 'CLIENT' && !isAdmin
   // selector selectAppDetailData return {} if not data
   const unfetched = Object.keys(appDetailData).length === 0
   const { id = '', installedOn = '' } = appDetailData
 
+  React.useEffect(handleApplyAppDetailsFromLocalStorage(dispatch, appid), [dispatch])
+
+  if (error) return <Alert message={error} type="danger"></Alert>
   if (isLoadingAppDetail || unfetched) {
     return <Loader dataTest="client-app-detail-loader" />
   }
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap b/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap
index 882c3a1c04..6e34f8e478 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/developer-submit-app/__test__/__snapshots__/developer-submit-app.test.tsx.snap
@@ -1933,6 +1933,21 @@ exports[`DeveloperSubmitApp should match a snapshot 1`] = `
                                     <div
                                       className="column  "
                                     >
+                                      <Component
+                                        onClick={[Function]}
+                                        type="button"
+                                        variant="primary"
+                                      >
+                                        <button
+                                          className="button  is-primary  "
+                                          data-test=""
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          Preview
+                                        </button>
+                                      </Component>
                                       <Component
                                         dataTest="submit-app-button"
                                         disabled={false}
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx b/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
index 759d93dc17..652c124c44 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
+++ b/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
@@ -17,6 +17,7 @@ import {
   FormikHelpers,
   H6,
   FlexContainerResponsive,
+  FormikValues,
 } from '@reapit/elements'
 import { FIELD_ERROR_DESCRIPTION } from '@/constants/form'
 
@@ -44,6 +45,7 @@ import UploadImageSection from './upload-image-section'
 import MarketplaceStatusSection from './marketplace-status-section'
 import PermissionSection from './permission-section'
 import styles from '@/styles/pages/developer-submit-app.scss?mod'
+import { ScopeModel } from '@/types/marketplace-api-schema'
 
 export type DeveloperSubmitAppProps = {}
 
@@ -274,6 +276,25 @@ export const handleOnSubmitAnotherApp = (dispatch: Dispatch) => {
   }
 }
 
+export type HandleOpenAppPreview = {
+  scopes: ScopeModel[]
+  values: FormikValues
+  appid?: string
+  appDetails?: AppDetailModel & { apiKey?: string }
+}
+
+export const handleOpenAppPreview = ({ appDetails, values, scopes, appid }: HandleOpenAppPreview) => () => {
+  const appDetailState = {
+    ...appDetails,
+    ...values,
+    scopes: scopes.filter(scope => values.scopes.includes(scope.name)),
+  }
+
+  const url = `developer/apps/${appid}/preview`
+  localStorage.setItem('developer-preview-app', JSON.stringify(appDetailState))
+  window.open(url, '_blank')
+}
+
 export const DeveloperSubmitApp: React.FC<DeveloperSubmitAppProps> = () => {
   let initialValues
   let formState
@@ -377,6 +398,18 @@ export const DeveloperSubmitApp: React.FC<DeveloperSubmitAppProps> = () => {
                     <LevelRight>
                       <Grid>
                         <GridItem>
+                          <Button
+                            onClick={handleOpenAppPreview({
+                              appDetails: appDetailState?.appDetailData?.data,
+                              values,
+                              scopes,
+                              appid,
+                            })}
+                            variant="primary"
+                            type="button"
+                          >
+                            Preview
+                          </Button>
                           {!isSubmitApp && (
                             <Button onClick={goBackToApps} variant="primary" type="button">
                               Back To Apps
diff --git a/packages/marketplace/src/constants/action-types.ts b/packages/marketplace/src/constants/action-types.ts
index 20b8eaf009..21d84b83d3 100644
--- a/packages/marketplace/src/constants/action-types.ts
+++ b/packages/marketplace/src/constants/action-types.ts
@@ -116,6 +116,7 @@ const ActionTypes = {
   DEVELOPER_FETCH_APP_DETAIL: 'DEVELOPER_FETCH_APP_DETAIL',
   DEVELOPER_FETCH_APP_DETAIL_FAILED: 'DEVELOPER_FETCH_APP_DETAIL_FAILED',
   DEVELOPER_FETCH_APP_DETAIL_SUCCESS: 'DEVELOPER_FETCH_APP_DETAIL_SUCCESS',
+  DEVELOPER_APPLY_APP_DETAIL: 'DEVELOPER_APPLY_APP_DETAIL',
 
   // App Detail actions
   APP_DETAIL_REQUEST_DATA: 'APP_DETAIL_REQUEST_DATA',
diff --git a/packages/marketplace/src/constants/routes.ts b/packages/marketplace/src/constants/routes.ts
index 553b09907a..82382ea2b6 100644
--- a/packages/marketplace/src/constants/routes.ts
+++ b/packages/marketplace/src/constants/routes.ts
@@ -25,6 +25,7 @@ const Routes = {
   SETTINGS: '/developer/settings',
   SUBMIT_APP: '/developer/submit-app',
   DEVELOPER_HELP: '/developer/help',
+  DEVELOPER_APP_PREVIEW: '/developer/apps/:id/preview',
   CLIENT_HELP: '/client/help',
   REGISTER: '/register',
   REGISTER_CONFIRM: '/register/confirm',
diff --git a/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap b/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
index ae0b56d018..40a3a6962b 100644
--- a/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
+++ b/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
@@ -378,6 +378,19 @@ exports[`Router should match a snapshot 1`] = `
             fetcher={true}
             path="/developer/help"
           />
+          <Component
+            allow="DEVELOPER"
+            component={
+              Object {
+                "$$typeof": Symbol(react.lazy),
+                "_ctor": [Function],
+                "_result": null,
+                "_status": -1,
+              }
+            }
+            exact={true}
+            path="/developer/apps/:id/preview"
+          />
           <Component
             allow="ADMIN"
             component={
diff --git a/packages/marketplace/src/core/router.tsx b/packages/marketplace/src/core/router.tsx
index e397900e1c..9fdc557178 100644
--- a/packages/marketplace/src/core/router.tsx
+++ b/packages/marketplace/src/core/router.tsx
@@ -137,6 +137,7 @@ const Router = () => {
                 fetcher
                 component={DeveloperHelpPage}
               />
+              <PrivateRoute allow="DEVELOPER" path={Routes.DEVELOPER_APP_PREVIEW} exact component={ClientAppDetail} />
 
               <PrivateRoute allow="ADMIN" path={Routes.ADMIN_APPROVALS} component={AdminApprovalsPage} exact fetcher />
               <PrivateRoute allow="ADMIN" path={Routes.ADMIN_APPS} component={AdminAppsPage} fetcher exact />
diff --git a/packages/marketplace/src/sagas/apps/__test__/apps.test.ts b/packages/marketplace/src/sagas/apps/__test__/apps.test.ts
index 7631f387ae..87b74dc9bb 100644
--- a/packages/marketplace/src/sagas/apps/__test__/apps.test.ts
+++ b/packages/marketplace/src/sagas/apps/__test__/apps.test.ts
@@ -4,6 +4,8 @@ import appDetailSagas, {
   clientAppDetailDataListen,
   fetchDeveloperAppDetailSaga,
   developerAppDetailDataListen,
+  developerApplyAppDetailsSaga,
+  developerApplyAppDetailsListen,
 } from '../apps'
 import { fetchDesktopIntegrationTypes } from '@/services/apps'
 import ActionTypes from '@/constants/action-types'
@@ -18,6 +20,7 @@ import { clientFetchAppDetailSuccess } from '@/actions/client'
 import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
 import { integrationTypesStub } from '@/sagas/__stubs__/integration-types'
 import { developerFetchAppDetailSuccess } from '@/actions/developer'
+import { AppDetailData } from '@/reducers/client/app-detail'
 
 jest.mock('@reapit/elements')
 
@@ -219,6 +222,33 @@ describe('client app detail fetch data and fetch apiKey', () => {
   })
 })
 
+describe('client app detail fetch data from local storage', () => {
+  const params: Action<AppDetailData> = {
+    data: appDetailDataStub.data as AppDetailData,
+    type: 'DEVELOPER_APPLY_APP_DETAIL',
+  }
+  const gen = cloneableGenerator(developerApplyAppDetailsSaga)(params)
+  expect(gen.next().value).toEqual(call(fetchDesktopIntegrationTypes))
+
+  test('api call success', () => {
+    const clone = gen.clone()
+    expect(clone.next(integrationTypesStub).value).toEqual(put(integrationTypesReceiveData(integrationTypesStub)))
+    expect(clone.next().value).toEqual(put(clientFetchAppDetailSuccess(appDetailDataStub.data)))
+  })
+  test('api call error', () => {
+    const clone = gen.clone()
+    // @ts-ignore
+    expect(clone.throw('error').value).toEqual(
+      put(
+        errorThrownServer({
+          type: 'SERVER',
+          message: errorMessages.DEFAULT_SERVER_ERROR,
+        }),
+      ),
+    )
+  })
+})
+
 describe('client app detail thunks', () => {
   describe('clientAppDetailDataListen', () => {
     it('should trigger request data when called', () => {
@@ -240,11 +270,27 @@ describe('client app detail thunks', () => {
     })
   })
 
+  describe('developerApplyAppDetailsListen', () => {
+    it('should trigger request data when called', () => {
+      const gen = developerApplyAppDetailsListen()
+      expect(gen.next().value).toEqual(
+        takeLatest<Action<AppDetailData>>(ActionTypes.DEVELOPER_APPLY_APP_DETAIL, developerApplyAppDetailsSaga),
+      )
+      expect(gen.next().done).toBe(true)
+    })
+  })
+
   describe('appDetailSagas', () => {
     it('should listen data request', () => {
       const gen = appDetailSagas()
 
-      expect(gen.next().value).toEqual(all([fork(clientAppDetailDataListen), fork(developerAppDetailDataListen)]))
+      expect(gen.next().value).toEqual(
+        all([
+          fork(clientAppDetailDataListen),
+          fork(developerAppDetailDataListen),
+          fork(developerApplyAppDetailsListen),
+        ]),
+      )
       expect(gen.next().done).toBe(true)
     })
   })
diff --git a/packages/marketplace/src/sagas/apps/apps.ts b/packages/marketplace/src/sagas/apps/apps.ts
index 3000e65c99..86d282bd8c 100644
--- a/packages/marketplace/src/sagas/apps/apps.ts
+++ b/packages/marketplace/src/sagas/apps/apps.ts
@@ -9,6 +9,7 @@ import { logger } from 'logger'
 import { fetchAppById, fetchDesktopIntegrationTypes, FetchAppByIdParams } from '@/services/apps'
 import { developerFetchAppDetailSuccess } from '@/actions/developer'
 import { fetchApiKeyInstallationById } from '@/services/installations'
+import { AppDetailData } from '@/reducers/client/app-detail'
 
 export const fetchClientAppDetailSaga = function*({ data }: Action<FetchAppByIdParams>) {
   try {
@@ -34,6 +35,22 @@ export const fetchClientAppDetailSaga = function*({ data }: Action<FetchAppByIdP
   }
 }
 
+export const developerApplyAppDetailsSaga = function*({ data }: Action<AppDetailData>) {
+  try {
+    const desktopIntegrationTypes = yield call(fetchDesktopIntegrationTypes)
+    yield put(integrationTypesReceiveData(desktopIntegrationTypes))
+    yield put(clientFetchAppDetailSuccess(data))
+  } catch (err) {
+    logger(err)
+    yield put(
+      errorThrownServer({
+        type: 'SERVER',
+        message: errorMessages.DEFAULT_SERVER_ERROR,
+      }),
+    )
+  }
+}
+
 export const fetchDeveloperAppDetailSaga = function*({ data }: Action<FetchAppByIdParams>) {
   try {
     const appDetailResponse = yield call(fetchAppById, { clientId: data.clientId, id: data.id })
@@ -65,8 +82,12 @@ export const developerAppDetailDataListen = function*() {
   yield takeLatest<Action<FetchAppByIdParams>>(ActionTypes.DEVELOPER_FETCH_APP_DETAIL, fetchDeveloperAppDetailSaga)
 }
 
+export const developerApplyAppDetailsListen = function*() {
+  yield takeLatest<Action<AppDetailData>>(ActionTypes.DEVELOPER_APPLY_APP_DETAIL, developerApplyAppDetailsSaga)
+}
+
 const appDetailSagas = function*() {
-  yield all([fork(clientAppDetailDataListen), fork(developerAppDetailDataListen)])
+  yield all([fork(clientAppDetailDataListen), fork(developerAppDetailDataListen), fork(developerApplyAppDetailsListen)])
 }
 
 export default appDetailSagas
diff --git a/packages/marketplace/src/selector/client-app-detail.ts b/packages/marketplace/src/selector/client-app-detail.ts
index e08d660f4d..33b9f0c6de 100644
--- a/packages/marketplace/src/selector/client-app-detail.ts
+++ b/packages/marketplace/src/selector/client-app-detail.ts
@@ -15,3 +15,7 @@ export const selectAppDetailAuthentication = (state: ReduxState) => {
 export const selectAppDetailLoading = (state: ReduxState) => {
   return state.client.appDetail.isAppDetailLoading
 }
+
+export const selectAppDetailError = (state: ReduxState): string | null => {
+  return state.client.appDetail.error || null
+}
diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg
index 024bc6b076..c8bd544537 100644
--- a/packages/marketplace/src/tests/badges/badge-branches.svg
+++ b/packages/marketplace/src/tests/badges/badge-branches.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">71.25%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">71.25%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">71.31%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">71.31%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg
index 928f6ee7be..35712d58e9 100644
--- a/packages/marketplace/src/tests/badges/badge-functions.svg
+++ b/packages/marketplace/src/tests/badges/badge-functions.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="164" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="47" height="20" fill="#e05d44"/><rect width="164" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">78.2%</text><text x="1395" y="140" transform="scale(.1)" textLength="370">78.2%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">78.94%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">78.94%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg
index 3b88c110bf..80e8d210da 100644
--- a/packages/marketplace/src/tests/badges/badge-lines.svg
+++ b/packages/marketplace/src/tests/badges/badge-lines.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.49%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.49%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.68%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.68%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg
index ca40a925d7..8e0ef7cd21 100644
--- a/packages/marketplace/src/tests/badges/badge-statements.svg
+++ b/packages/marketplace/src/tests/badges/badge-statements.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#dfb317"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.37%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.37%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#dfb317"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.57%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.57%</text></g></svg>
\ No newline at end of file

From b9081d9361b33a3dae4fc54fdd3beaf01c1cf349 Mon Sep 17 00:00:00 2001
From: Truong An <andt@reapit.com>
Date: Tue, 2 Jun 2020 15:02:30 +0700
Subject: [PATCH 2/3] chore: #1127 update test, var name

---
 .../__test__/client-app-detail.test.tsx         | 17 +++++++++++++++++
 .../client-app-detail/client-app-detail.tsx     |  8 ++++----
 .../__test__/developer-submit-app.test.tsx      | 15 +++++++++++++++
 .../developer-submit-app.tsx                    |  8 ++++----
 packages/marketplace/src/constants/routes.ts    |  2 +-
 .../__tests__/__snapshots__/router.tsx.snap     |  2 +-
 .../src/selector/client-app-detail.ts           |  2 +-
 .../src/tests/badges/badge-branches.svg         |  2 +-
 .../src/tests/badges/badge-functions.svg        |  2 +-
 .../src/tests/badges/badge-lines.svg            |  2 +-
 .../src/tests/badges/badge-statements.svg       |  2 +-
 11 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
index 5aa9cbeb12..58bbe98fae 100644
--- a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
+++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
@@ -8,10 +8,13 @@ import ClientAppDetail, {
   handleCloseInstallConfirmationModal,
   handleInstallAppButtonClick,
   renderAppHeaderButtonGroup,
+  handleApplyAppDetailsFromLocalStorage,
 } from '../client-app-detail'
 import { Button } from '@reapit/elements'
 import Routes from '@/constants/routes'
 import appState from '@/reducers/__stubs__/app-state'
+import { developerApplyAppDetails } from '@/actions/developer'
+import { AppDetailData } from '@/reducers/client/app-detail'
 
 describe('ClientAppDetail', () => {
   let store
@@ -169,4 +172,18 @@ describe('ClientAppDetail', () => {
       expect(mockFunction).toBeCalledWith(true)
     })
   })
+
+  describe('handleApplyAppDetailsFromLocalStorage', () => {
+    it('should run correctly', () => {
+      const dispatch = jest.fn()
+      const appId = 'appId'
+      const value = { id: 'appId' } as AppDetailData
+      const stringValue = JSON.stringify(value)
+      const spyLocalStorageGetItem = jest.spyOn(window.localStorage, 'getItem').mockImplementation(() => stringValue)
+      const fn = handleApplyAppDetailsFromLocalStorage(dispatch, appId)
+      fn()
+      expect(spyLocalStorageGetItem).toBeCalledWith('developer-preview-app')
+      expect(dispatch).toBeCalledWith(developerApplyAppDetails(value))
+    })
+  })
 })
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
index 5bbc5ce8bd..1a0540ab6e 100644
--- 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
@@ -36,7 +36,7 @@ export const handleInstallAppButtonClick = (setIsVisibleInstallConfirmation: (is
   }
 }
 
-export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appid?: string) => () => {
+export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appId?: string) => () => {
   try {
     const appDataString = localStorage.getItem('developer-preview-app')
     if (!appDataString) {
@@ -44,7 +44,7 @@ export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appid?
     }
 
     const appData = JSON.parse(appDataString)
-    if (appData.id !== appid) {
+    if (appData.id !== appId) {
       throw 'No app preview'
     }
 
@@ -94,7 +94,7 @@ export const renderAppHeaderButtonGroup = (
 
 const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const dispatch = useDispatch()
-  const { id: appid } = useParams()
+  const { appId } = useParams()
 
   const [isVisibleInstallConfirmation, setIsVisibleInstallConfirmation] = React.useState(false)
   const [isVisibleUninstallConfirmation, setIsVisibleUninstallConfirmation] = React.useState(false)
@@ -129,7 +129,7 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const unfetched = Object.keys(appDetailData).length === 0
   const { id = '', installedOn = '' } = appDetailData
 
-  React.useEffect(handleApplyAppDetailsFromLocalStorage(dispatch, appid), [dispatch])
+  React.useEffect(handleApplyAppDetailsFromLocalStorage(dispatch, appId), [dispatch])
 
   if (error) return <Alert message={error} type="danger"></Alert>
   if (isLoadingAppDetail || unfetched) {
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx b/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx
index 651814373d..71abca9a76 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx
+++ b/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx
@@ -20,6 +20,7 @@ import DeveloperSubmitApp, {
   handleGoBackToApps,
   handleOnSubmitAnotherApp,
   generateInitialValues,
+  handleOpenAppPreview,
 } from '../developer-submit-app'
 import { getMockRouterProps } from '@/utils/mock-helper'
 import { FIELD_ERROR_DESCRIPTION } from '@/constants/form'
@@ -292,4 +293,18 @@ describe('DeveloperSubmitApp', () => {
       })
     })
   })
+
+  describe('handleOpenAppPreview', () => {
+    it('should run correctly', () => {
+      const params = { appDetails: {}, values: {}, scopes: [], appId: 'appId' }
+      const spyLocalStorageSetItem = jest.spyOn(window.localStorage, 'setItem')
+      const spyOpenUrl = jest.spyOn(window, 'open')
+      const expected = JSON.stringify({ scopes: [] })
+
+      const fn = handleOpenAppPreview(params)
+      fn()
+      expect(spyLocalStorageSetItem).toBeCalledWith('developer-preview-app', expected)
+      expect(spyOpenUrl).toBeCalledWith('developer/apps/appId/preview', '_blank')
+    })
+  })
 })
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx b/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
index 652c124c44..1f034eba65 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
+++ b/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
@@ -279,18 +279,18 @@ export const handleOnSubmitAnotherApp = (dispatch: Dispatch) => {
 export type HandleOpenAppPreview = {
   scopes: ScopeModel[]
   values: FormikValues
-  appid?: string
+  appId?: string
   appDetails?: AppDetailModel & { apiKey?: string }
 }
 
-export const handleOpenAppPreview = ({ appDetails, values, scopes, appid }: HandleOpenAppPreview) => () => {
+export const handleOpenAppPreview = ({ appDetails, values, scopes, appId }: HandleOpenAppPreview) => () => {
   const appDetailState = {
     ...appDetails,
     ...values,
     scopes: scopes.filter(scope => values.scopes.includes(scope.name)),
   }
 
-  const url = `developer/apps/${appid}/preview`
+  const url = `developer/apps/${appId}/preview`
   localStorage.setItem('developer-preview-app', JSON.stringify(appDetailState))
   window.open(url, '_blank')
 }
@@ -403,7 +403,7 @@ export const DeveloperSubmitApp: React.FC<DeveloperSubmitAppProps> = () => {
                               appDetails: appDetailState?.appDetailData?.data,
                               values,
                               scopes,
-                              appid,
+                              appId: appid,
                             })}
                             variant="primary"
                             type="button"
diff --git a/packages/marketplace/src/constants/routes.ts b/packages/marketplace/src/constants/routes.ts
index 82382ea2b6..a7545b9c3d 100644
--- a/packages/marketplace/src/constants/routes.ts
+++ b/packages/marketplace/src/constants/routes.ts
@@ -25,7 +25,7 @@ const Routes = {
   SETTINGS: '/developer/settings',
   SUBMIT_APP: '/developer/submit-app',
   DEVELOPER_HELP: '/developer/help',
-  DEVELOPER_APP_PREVIEW: '/developer/apps/:id/preview',
+  DEVELOPER_APP_PREVIEW: '/developer/apps/:appId/preview',
   CLIENT_HELP: '/client/help',
   REGISTER: '/register',
   REGISTER_CONFIRM: '/register/confirm',
diff --git a/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap b/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
index 40a3a6962b..e655d4c366 100644
--- a/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
+++ b/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
@@ -389,7 +389,7 @@ exports[`Router should match a snapshot 1`] = `
               }
             }
             exact={true}
-            path="/developer/apps/:id/preview"
+            path="/developer/apps/:appId/preview"
           />
           <Component
             allow="ADMIN"
diff --git a/packages/marketplace/src/selector/client-app-detail.ts b/packages/marketplace/src/selector/client-app-detail.ts
index 33b9f0c6de..af512c8e37 100644
--- a/packages/marketplace/src/selector/client-app-detail.ts
+++ b/packages/marketplace/src/selector/client-app-detail.ts
@@ -17,5 +17,5 @@ export const selectAppDetailLoading = (state: ReduxState) => {
 }
 
 export const selectAppDetailError = (state: ReduxState): string | null => {
-  return state.client.appDetail.error || null
+  return state?.client?.appDetail?.error || null
 }
diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg
index 7b0822daf2..e7ac5f6d41 100644
--- a/packages/marketplace/src/tests/badges/badge-branches.svg
+++ b/packages/marketplace/src/tests/badges/badge-branches.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.79%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.79%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.86%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.86%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg
index c445c4ddea..c2c0a69339 100644
--- a/packages/marketplace/src/tests/badges/badge-functions.svg
+++ b/packages/marketplace/src/tests/badges/badge-functions.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">79.43%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">79.43%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">79.51%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">79.51%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg
index c676371ebd..8ef1721576 100644
--- a/packages/marketplace/src/tests/badges/badge-lines.svg
+++ b/packages/marketplace/src/tests/badges/badge-lines.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.76%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.76%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.88%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.88%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg
index 5b09f408d0..126ee22a7a 100644
--- a/packages/marketplace/src/tests/badges/badge-statements.svg
+++ b/packages/marketplace/src/tests/badges/badge-statements.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#dfb317"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.79%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.79%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="176" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="176" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="47" height="20" fill="#dfb317"/><rect width="176" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1515" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">89.9%</text><text x="1515" y="140" transform="scale(.1)" textLength="370">89.9%</text></g></svg>
\ No newline at end of file

From 71da05a7e578b3c09eae5a4c75d5267c73dd1212 Mon Sep 17 00:00:00 2001
From: Truong An <andt@reapit.com>
Date: Tue, 2 Jun 2020 19:27:47 +0700
Subject: [PATCH 3/3] chore: #1127 avoid load localStorage from client side

---
 .../__test__/client-app-detail.test.tsx        |  2 +-
 .../client-app-detail/client-app-detail.tsx    | 18 ++++++++++++++----
 .../src/tests/badges/badge-branches.svg        |  2 +-
 .../src/tests/badges/badge-functions.svg       |  2 +-
 .../src/tests/badges/badge-lines.svg           |  2 +-
 .../src/tests/badges/badge-statements.svg      |  2 +-
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
index 58bbe98fae..5a0f329fb0 100644
--- a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
+++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
@@ -180,7 +180,7 @@ describe('ClientAppDetail', () => {
       const value = { id: 'appId' } as AppDetailData
       const stringValue = JSON.stringify(value)
       const spyLocalStorageGetItem = jest.spyOn(window.localStorage, 'getItem').mockImplementation(() => stringValue)
-      const fn = handleApplyAppDetailsFromLocalStorage(dispatch, appId)
+      const fn = handleApplyAppDetailsFromLocalStorage(dispatch, 'DEVELOPER', appId)
       fn()
       expect(spyLocalStorageGetItem).toBeCalledWith('developer-preview-app')
       expect(dispatch).toBeCalledWith(developerApplyAppDetails(value))
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
index 0ab7bc6eb5..d3dcf682b3 100644
--- 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
@@ -25,6 +25,7 @@ import { useParams } from 'react-router'
 import { Dispatch } from 'redux'
 import { getDesktopIntegrationTypes } from '@/utils/get-desktop-integration-types'
 import Routes from '@/constants/routes'
+import { LoginType } from '@reapit/cognito-auth'
 
 export type ClientAppDetailProps = {}
 
@@ -40,7 +41,12 @@ export const handleInstallAppButtonClick = (setIsVisibleInstallConfirmation: (is
   }
 }
 
-export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appId?: string) => () => {
+export const handleApplyAppDetailsFromLocalStorage = (
+  dispatch: Dispatch,
+  loginType: LoginType,
+  appId?: string,
+) => () => {
+  if (loginType !== 'DEVELOPER' || !appId) return
   try {
     const appDataString = localStorage.getItem('developer-preview-app')
     if (!appDataString) {
@@ -58,7 +64,11 @@ export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appId?
   }
 }
 
-export const onBackToAppsButtonClick = (history: History) => {
+export const onBackToAppsButtonClick = (history: History, loginType: LoginType) => {
+  if (loginType === 'DEVELOPER')
+    return () => {
+      history.push(Routes.DEVELOPER_MY_APPS)
+    }
   return () => {
     history.push(Routes.CLIENT)
   }
@@ -140,7 +150,7 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const unfetched = Object.keys(appDetailData).length === 0
   const { id = '', installedOn = '' } = appDetailData
 
-  React.useEffect(handleApplyAppDetailsFromLocalStorage(dispatch, appId), [dispatch])
+  React.useEffect(handleApplyAppDetailsFromLocalStorage(dispatch, loginType, appId), [dispatch])
 
   if (error) return <Alert message={error} type="danger"></Alert>
   if (isLoadingAppDetail || unfetched) {
@@ -163,7 +173,7 @@ 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)}>
+          <Button className="is-pulled-right" onClick={onBackToAppsButtonClick(history, loginType)}>
             Back To Apps
           </Button>
         </FormSection>
diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg
index 18c4a2f64b..7fb9823d7f 100644
--- a/packages/marketplace/src/tests/badges/badge-branches.svg
+++ b/packages/marketplace/src/tests/badges/badge-branches.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.94%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.94%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.93%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.93%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg
index 2c5848725e..73a070cff0 100644
--- a/packages/marketplace/src/tests/badges/badge-functions.svg
+++ b/packages/marketplace/src/tests/badges/badge-functions.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">79.05%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">79.05%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">78.99%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">78.99%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg
index d753f47d89..ba860674d4 100644
--- a/packages/marketplace/src/tests/badges/badge-lines.svg
+++ b/packages/marketplace/src/tests/badges/badge-lines.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.81%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.81%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.75%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.75%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg
index 02edc30f9d..d9aa04ef1c 100644
--- a/packages/marketplace/src/tests/badges/badge-statements.svg
+++ b/packages/marketplace/src/tests/badges/badge-statements.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#dfb317"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.82%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.82%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#dfb317"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.76%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.76%</text></g></svg>
\ No newline at end of file