[CLD-573] Change button uninstall to installed on browse apps (#206)

* [CLD-573] Change button uninstall to installed on browse apps * [CLD-573] fix review * [CLD-573] move inline style to css
reapit · Dec 16, 2019 · dea3107 · dea3107
1 parent 1ffc84e
commit dea3107
Show file tree

Hide file tree

Showing 21 changed files with 334 additions and 147 deletions.
diff --git a/src/actions/__tests__/app-detail-modal.ts b/src/actions/__tests__/app-detail-modal.ts
@@ -1,18 +1,18 @@
 import {
-  setAppDetailModalStateView,
-  setAppDetailModalStateViewConfirm,
+  setAppDetailModalStateBrowse,
+  setAppDetailModalStateInstall,
   setAppDetailModalStateSuccess
 } from '../app-detail-modal'
 
 import ActionTypes from '../../constants/action-types'
 
 describe('app permission actions', () => {
-  it('should create a setAppDetailModalStateView action', () => {
-    expect(setAppDetailModalStateView.type).toEqual(ActionTypes.SET_APP_DETAIL_MODAL_STATE_VIEW)
+  it('should create a setAppDetailModalStateBrowse action', () => {
+    expect(setAppDetailModalStateBrowse.type).toEqual(ActionTypes.SET_APP_DETAIL_MODAL_STATE_BROWSE)
   })
 
-  it('should create a setAppDetailModalStateViewConfirm action', () => {
-    expect(setAppDetailModalStateViewConfirm.type).toEqual(ActionTypes.SET_APP_DETAIL_MODAL_STATE_CONFIRM)
+  it('should create a setAppDetailModalStateInstall action', () => {
+    expect(setAppDetailModalStateInstall.type).toEqual(ActionTypes.SET_APP_DETAIL_MODAL_STATE_INSTALL)
   })
 
   it('should create a setAppDetailModalStateSuccess action', () => {

diff --git a/src/actions/app-detail-modal.ts b/src/actions/app-detail-modal.ts
@@ -1,7 +1,8 @@
 import { actionCreator } from '../utils/actions'
 import ActionTypes from '../constants/action-types'
 
-export const setAppDetailModalStateView = actionCreator<void>(ActionTypes.SET_APP_DETAIL_MODAL_STATE_VIEW)
-export const setAppDetailModalStateViewConfirm = actionCreator<void>(ActionTypes.SET_APP_DETAIL_MODAL_STATE_CONFIRM)
+export const setAppDetailModalStateBrowse = actionCreator<void>(ActionTypes.SET_APP_DETAIL_MODAL_STATE_BROWSE)
+export const setAppDetailModalStateInstall = actionCreator<void>(ActionTypes.SET_APP_DETAIL_MODAL_STATE_INSTALL)
 export const setAppDetailModalStateUninstall = actionCreator<void>(ActionTypes.SET_APP_DETAIL_MODAL_STATE_UNINSTALL)
 export const setAppDetailModalStateSuccess = actionCreator<void>(ActionTypes.SET_APP_DETAIL_MODAL_STATE_SUCCESS)
+export const setAppDetailModalStateManage = actionCreator<void>(ActionTypes.SET_APP_DETAIL_MODAL_STATE_MANAGE)
diff --git a/src/components/pages/__tests__/client.tsx b/src/components/pages/__tests__/client.tsx
@@ -44,6 +44,7 @@ const props = (loading: boolean): ClientProps => ({
     error: false
   },
   clientId: '1',
+  setStateViewBrowse: jest.fn(),
   installationsFormState: 'PENDING',
   installationsSetFormState: jest.fn(),
   fetchAppDetail: jest.fn(),
@@ -86,6 +87,7 @@ describe('Client', () => {
       },
       clientId: '1',
       installationsFormState: 'PENDING',
+      setStateViewBrowse: jest.fn(),
       installationsSetFormState: jest.fn(),
       fetchAppDetail: jest.fn(),
       ...routerProps
@@ -110,6 +112,7 @@ describe('Client', () => {
       },
       clientId: '1',
       installationsFormState: 'PENDING',
+      setStateViewBrowse: jest.fn(),
       installationsSetFormState: jest.fn(),
       fetchAppDetail: jest.fn(),
       ...routerProps
@@ -194,6 +197,7 @@ describe('Client', () => {
         appDetail: {
           appDetailData: appsDataStub.data
         },
+        setStateViewBrowse: jest.fn(),
         fetchAppDetail: jest.fn(),
         clientId: 'ABC'
       }

diff --git a/src/components/pages/client.tsx b/src/components/pages/client.tsx
@@ -16,8 +16,10 @@ import styles from '@/styles/pages/client.scss?mod'
 import { appInstallationsSetFormState } from '@/actions/app-installations'
 
 import { addQuery, getParamValueFromPath, hasFilterParams } from '@/utils/client-url-params'
+import { setAppDetailModalStateBrowse } from '@/actions/app-detail-modal'
 
 export interface ClientMappedActions {
+  setStateViewBrowse: () => void
   fetchAppDetail: (id: string, clientId: string) => void
   installationsSetFormState: (formState: FormState) => void
 }
@@ -33,8 +35,11 @@ export const handleAfterClose = ({ setVisible }) => () => setVisible(false)
 export const handleOnChange = history => (page: number) => {
   history.push(addQuery({ page }))
 }
-export const handleOnCardClick = ({ setVisible, appDetail, fetchAppDetail, clientId }) => (app: AppSummaryModel) => {
+export const handleOnCardClick = ({ setVisible, setStateViewBrowse, appDetail, fetchAppDetail, clientId }) => (
+  app: AppSummaryModel
+) => {
   setVisible(true)
+  setStateViewBrowse()
   if (app.id && (!appDetail.appDetailData || appDetail.appDetailData.data.id !== app.id)) {
     fetchAppDetail(app.id, clientId)
   }
@@ -62,6 +67,7 @@ export const Client: React.FunctionComponent<ClientProps> = ({
   fetchAppDetail,
   appDetail,
   clientId,
+  setStateViewBrowse,
   installationsFormState,
   installationsSetFormState
 }) => {
@@ -98,7 +104,13 @@ export const Client: React.FunctionComponent<ClientProps> = ({
                   list={featuredApps}
                   title="Featured Apps"
                   loading={loading}
-                  onCardClick={handleOnCardClick({ setVisible, appDetail, fetchAppDetail, clientId })}
+                  onCardClick={handleOnCardClick({
+                    setVisible,
+                    setStateViewBrowse,
+                    appDetail,
+                    fetchAppDetail,
+                    clientId
+                  })}
                   infoType="CLIENT_APPS_EMPTY"
                   numOfColumn={3}
                 />
@@ -108,7 +120,7 @@ export const Client: React.FunctionComponent<ClientProps> = ({
             <AppList
               list={apps}
               loading={loading}
-              onCardClick={handleOnCardClick({ setVisible, appDetail, fetchAppDetail, clientId })}
+              onCardClick={handleOnCardClick({ setVisible, setStateViewBrowse, appDetail, fetchAppDetail, clientId })}
               infoType={pageNumber > 1 || hasParams ? '' : 'CLIENT_APPS_EMPTY'}
               pagination={{
                 totalCount,
@@ -134,6 +146,7 @@ export const mapStateToProps = (state: ReduxState): ClientMappedProps => ({
 })
 
 export const mapDispatchToProps = (dispatch: any): ClientMappedActions => ({
+  setStateViewBrowse: () => dispatch(setAppDetailModalStateBrowse()),
   fetchAppDetail: (id: string, clientId: string) => dispatch(appDetailRequestData({ id, clientId })),
   installationsSetFormState: (formState: FormState) => dispatch(appInstallationsSetFormState(formState))
 })

diff --git a/src/components/pages/my-apps.tsx b/src/components/pages/my-apps.tsx
@@ -15,8 +15,10 @@ import { selectClientId } from '@/selector/client'
 import { AppSummaryModel } from '@/types/marketplace-api-schema'
 import { handleLaunchApp } from '../../utils/launch-app'
 import { appInstallationsSetFormState } from '@/actions/app-installations'
+import { setAppDetailModalStateManage } from '@/actions/app-detail-modal'
 
 export interface MyAppsMappedActions {
+  setStateViewManage: () => void
   fetchAppDetail: (id: string, clientId: string) => void
   fetchMyApp: (page: number) => void
   installationsSetFormState: (formState: FormState) => void
@@ -47,6 +49,7 @@ export const MyApps: React.FunctionComponent<MyAppsProps> = ({
   fetchMyApp,
   fetchAppDetail,
   appDetail,
+  setStateViewManage,
   installationsFormState,
   installationsSetFormState,
   history
@@ -74,6 +77,7 @@ export const MyApps: React.FunctionComponent<MyAppsProps> = ({
         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)
           }
@@ -99,6 +103,7 @@ export const mapStateToProps = (state: ReduxState): MyAppsMappedProps => ({
 })
 
 export const mapDispatchToProps = (dispatch: any): MyAppsMappedActions => ({
+  setStateViewManage: () => dispatch(setAppDetailModalStateManage()),
   fetchAppDetail: (id: string, clientId: string) => dispatch(appDetailRequestData({ id, clientId })),
   fetchMyApp: (page: number) => dispatch(myAppsRequestData(page)),
   installationsSetFormState: (formState: FormState) => dispatch(appInstallationsSetFormState(formState))

diff --git a/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap b/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppDetailModalInner should match a snapshot 1`] = `
+<Fragment>
+  <ModalHeader
+    afterClose={[MockFunction]}
+    title=""
+  />
+  <ModalBody
+    body={
+      <React.Fragment>
+        <Tile
+          heading=""
+          image={
+            <img
+              className="image"
+              src="https://bulma.io/images/placeholders/48x48.png"
+            />
+          }
+          subHeading=""
+        >
+          <div>
+            <FaTimes />
+            <span
+              className="ml-2"
+            >
+              Not listed
+            </span>
+          </div>
+        </Tile>
+        <H6 />
+        <p>
+          App ID: 
+        </p>
+        <br />
+        <p />
+        <br />
+        <p>
+          Permissions
+        </p>
+        <small>
+          <i>
+            You have requested the following permissions for this App:
+          </i>
+        </small>
+        <ul />
+      </React.Fragment>
+    }
+  />
+  <ModalFooter />
+</Fragment>
+`;
diff --git a/src/components/ui/__tests__/app-confirm-install.tsx b/src/components/ui/__tests__/app-confirm-install.tsx
@@ -10,7 +10,7 @@ const mockProps = {
   installationsFormState: 'PENDING' as FormState,
   afterClose: jest.fn(),
   installApp: jest.fn(),
-  setAppDetailModalStateView: jest.fn(),
+  setAppDetailModalStateBrowse: jest.fn(),
   setAppDetailModalStateSuccess: jest.fn()
 }
 
@@ -49,11 +49,11 @@ describe('AppConfirmInstallContent', () => {
   })
   it('handleCloseModal', () => {
     const afterClose = jest.fn()
-    const setAppDetailModalStateView = jest.fn()
-    const fn = handleCloseModal(afterClose, setAppDetailModalStateView)
+    const setAppDetailModalStateBrowse = jest.fn()
+    const fn = handleCloseModal(afterClose, setAppDetailModalStateBrowse)
     fn()
     expect(afterClose).toBeCalled()
-    expect(setAppDetailModalStateView).toBeCalled()
+    expect(setAppDetailModalStateBrowse).toBeCalled()
   })
 
   describe('mapDispatchToProps', () => {
@@ -63,8 +63,8 @@ describe('AppConfirmInstallContent', () => {
       fn.installApp({ appId: '1' })()
       expect(dispatch).toBeCalled()
     })
-    it('should call dispatch when involke setAppDetailModalStateView', () => {
-      fn.setAppDetailModalStateView()
+    it('should call dispatch when involke setAppDetailModalStateBrowse', () => {
+      fn.setAppDetailModalStateBrowse()
       expect(dispatch).toBeCalled()
     })
     it('should call dispatch when involke setAppDetailModalStateSuccess', () => {

diff --git a/src/components/ui/__tests__/app-confirm-uninstall.tsx b/src/components/ui/__tests__/app-confirm-uninstall.tsx
@@ -10,7 +10,7 @@ const mockProps = {
   installationsFormState: 'PENDING' as FormState,
   afterClose: jest.fn(),
   uninstallApp: jest.fn(),
-  setAppDetailModalStateView: jest.fn(),
+  setAppDetailModalStateBrowse: jest.fn(),
   setAppDetailModalStateSuccess: jest.fn()
 }
 
@@ -49,11 +49,11 @@ describe('AppConfirmUninstall', () => {
   })
   it('handleCloseModal', () => {
     const afterClose = jest.fn()
-    const setAppDetailModalStateView = jest.fn()
-    const fn = handleCloseModal(afterClose, setAppDetailModalStateView)
+    const setAppDetailModalStateBrowse = jest.fn()
+    const fn = handleCloseModal(afterClose, setAppDetailModalStateBrowse)
     fn()
     expect(afterClose).toBeCalled()
-    expect(setAppDetailModalStateView).toBeCalled()
+    expect(setAppDetailModalStateBrowse).toBeCalled()
   })
 
   describe('mapDispatchToProps', () => {
@@ -63,8 +63,8 @@ describe('AppConfirmUninstall', () => {
       fn.uninstallApp({ appId: '1', installationId: '1' })()
       expect(dispatch).toBeCalled()
     })
-    it('should call dispatch when involke setAppDetailModalStateView', () => {
-      fn.setAppDetailModalStateView()
+    it('should call dispatch when involke setAppDetailModalStateBrowse', () => {
+      fn.setAppDetailModalStateBrowse()
       expect(dispatch).toBeCalled()
     })
     it('should call dispatch when involke setAppDetailModalStateSuccess', () => {

diff --git a/src/components/ui/__tests__/app-detail.tsx b/src/components/ui/__tests__/app-detail.tsx
@@ -2,11 +2,11 @@ import * as React from 'react'
 import { mount, shallow } from 'enzyme'
 import { AppDetail, AppDetailProps, mapDispatchToProps, SlickButtonNav } from '../app-detail'
 import { setDeveloperAppModalStateDelete } from '@/actions/developer-app-modal'
-import { setAppDetailModalStateViewConfirm, setAppDetailModalStateUninstall } from '@/actions/app-detail-modal'
+import { setAppDetailModalStateInstall, setAppDetailModalStateUninstall } from '@/actions/app-detail-modal'
 
 const props: AppDetailProps = {
   setDeveloperAppModalStateDelete: jest.fn(),
-  setAppDetailModalStateViewConfirm: jest.fn(),
+  setAppDetailModalStateInstall: jest.fn(),
   setAppDetailModalStateUninstall: jest.fn(),
   isCurrentLoggedUserDeveloper: true,
   isCurrentLoggedUserClient: false,
@@ -15,26 +15,18 @@ const props: AppDetailProps = {
 }
 
 describe('AppDetailModalInner', () => {
-  it('Should show uninstall app button if isCurrentLoggedUserClient = true and installedOn exist', () => {
-    const modifiedProps: AppDetailProps = { ...props, isCurrentLoggedUserClient: true, data: { installedOn: 'yep' } }
-    const shallowAppDetailModalInner = mount(<AppDetail {...modifiedProps} />)
-    expect(shallowAppDetailModalInner.find('[dataTest="btnAppDetailUninstallApp"]')).toHaveLength(1)
-  })
-
-  it('Should show install app button if isCurrentLoggedUserClient = true and installedOn not exist', () => {
-    const modifiedProps: AppDetailProps = { ...props, isCurrentLoggedUserClient: true }
-    const shallowAppDetailModalInner = mount(<AppDetail {...modifiedProps} />)
-    expect(shallowAppDetailModalInner.find('[dataTest="btnAppDetailInstallApp"]')).toHaveLength(1)
+  it('should match a snapshot', () => {
+    expect(shallow(<AppDetail {...props} />)).toMatchSnapshot()
   })
 
   describe('mapDispatchToProps', () => {
-    it('should dispatch correctly if mapped setAppDetailModalStateViewConfirm is called', () => {
+    it('should dispatch correctly if mapped setAppDetailModalStateInstall is called', () => {
       const mockedDispatch = jest.fn()
-      const { setAppDetailModalStateViewConfirm: mappedsetAppDetailModalStateViewConfirm } = mapDispatchToProps(
+      const { setAppDetailModalStateInstall: mappedsetAppDetailModalStateViewConfirm } = mapDispatchToProps(
         mockedDispatch
       )
       mappedsetAppDetailModalStateViewConfirm()
-      expect(mockedDispatch).toHaveBeenNthCalledWith(1, setAppDetailModalStateViewConfirm())
+      expect(mockedDispatch).toHaveBeenNthCalledWith(1, setAppDetailModalStateInstall())
     })
 
     it('should dispatch correctly if mapped requestUninstall is called', () => {
@@ -61,7 +53,7 @@ describe('SlickButtonNav', () => {
   it('should match snapshot', () => {
     const mockProps = {
       currentSlide: '',
-      setAppDetailModalStateViewConfirm: jest.fn(),
+      setAppDetailModalStateInstall: jest.fn(),
       slideCount: jest.fn()
     }
     const wrapper = shallow(