[CLD-571] installed apps fit 3 icons on one row on ipad (#219)

src/components/pages/__tests__/__snapshots__/my-apps.tsx.snap

@@ -52,6 +52,7 @@ exports[`MyApps should match a snapshot when LOADING false 1`] = `
     }
     loading={false}
     onCardClick={[Function]}
+    onSettingsClick={[Function]}
     pagination={
       Object {
         "onChange": [Function],

src/components/pages/__tests__/my-apps.tsx

@@ -54,19 +54,36 @@ describe('MyApps', () => {
   it('mapStateToProps', () => {
     const mockState = {
       myApps: {},
+      appDetail: {},
+      auth: {
+        loginSession: {
+          loginIdentity: {
+            clientId: ''
+          }
+        }
+      },
       installations: {
         formState: 'PENDING'
       }
     } as ReduxState
     const result = mapStateToProps(mockState)
     const output = {
       myAppsState: {},
+      appDetail: {},
+      clientId: '',
       installationsFormState: 'PENDING'
     }
     expect(result).toEqual(output)
   })
 
   describe('mapDispatchToProps', () => {
+    it('fetchAppDetail', () => {
+      const mockDispatch = jest.fn()
+      const { fetchAppDetail } = mapDispatchToProps(mockDispatch)
+      fetchAppDetail('123', '')
+      expect(mockDispatch).toBeCalled()
+    })
+
     it('fetchMyApp', () => {
       const mockDispatch = jest.fn()
       const { fetchMyApp } = mapDispatchToProps(mockDispatch)

src/components/pages/my-apps.tsx

@@ -7,20 +7,28 @@ import { Loader } 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 { AppDetailState } from '@/reducers/app-detail'
 import AppDetailModal from '../ui/app-detail-modal'
 import { myAppsRequestData } from '@/actions/my-apps'
+import { selectClientId } 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'
 
 export interface MyAppsMappedActions {
+  setStateViewManage: () => void
+  fetchAppDetail: (id: string, clientId: string) => void
   fetchMyApp: (page: number) => void
   installationsSetFormState: (formState: FormState) => void
 }
 
 export interface MyAppsMappedProps {
   myAppsState: MyAppsState
+  appDetail: AppDetailState
   installationsFormState: FormState
+  clientId: string
 }
 
 export type MyAppsProps = MyAppsMappedActions & MyAppsMappedProps & RouteComponentProps<{ page?: any }>
@@ -36,8 +44,12 @@ export const handleUseEffect = ({ isDone, installationsSetFormState, fetchMyApp,
 
 export const MyApps: React.FunctionComponent<MyAppsProps> = ({
   myAppsState,
+  clientId,
   match,
   fetchMyApp,
+  fetchAppDetail,
+  appDetail,
+  setStateViewManage,
   installationsFormState,
   installationsSetFormState,
   history
@@ -63,6 +75,13 @@ export const MyApps: React.FunctionComponent<MyAppsProps> = ({
         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)
+          }
+        }}
         infoType="INSTALLED_APPS_EMPTY"
         pagination={{
           totalCount,
@@ -78,10 +97,14 @@ export const MyApps: React.FunctionComponent<MyAppsProps> = ({
 
 export const mapStateToProps = (state: ReduxState): MyAppsMappedProps => ({
   myAppsState: state.myApps,
+  appDetail: state.appDetail,
+  clientId: selectClientId(state),
   installationsFormState: state.installations.formState
 })
 
 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))
 })

src/styles/blocks/installed-app-card.scss

@@ -3,9 +3,12 @@ $icon-height: 130px;
 
 .container {
   display: flex;
-  width: calc(50% - 1rem);
+  width: 50%;
   flex-direction: column;
   align-items: center;
+  @media (min-width: 668px) {
+    width: 33%;
+  }
 }
 .wrapIcon {
   width: $icon-width;