feat: #1125: Update client detaill app install + uninstall behavior f…

…lows
reapit · May 8, 2020 · c35dee4 · c35dee4
1 parent 868db84
commit c35dee4
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 108 deletions.
diff --git a/packages/marketplace/src/actions/app-installations.ts b/packages/marketplace/src/actions/app-installations.ts
@@ -24,6 +24,7 @@ export type InstallParams = CreateInstallationModel & { callback?: () => void }
 
 export type UninstallParams = {
   installationId: string
+  callback?: () => void
 } & TerminateInstallationModel
 
 export const appInstallationsRequestData = actionCreator<InstallationParams>(ActionTypes.APP_INSTALLATIONS_REQUEST_DATA)

diff --git a/...es/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx b/...es/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx
@@ -1,61 +1,69 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { selectAppDetailData, selectAppDetailLoading } from '@/selector/developer-app-detail'
+import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-app-detail'
 import { selectLoginType } from '@/selector/auth'
 import AppHeader from '@/components/ui/app-detail/app-header'
 import AppContent from '@/components/ui/app-detail/app-content'
 
-import { Loader } from '@reapit/elements'
+import { Loader, Button } from '@reapit/elements'
 import styles from '@/styles/pages/developer-app-detail.scss?mod'
-import ClientAppDetailButtonGroup from '@/components/ui/client-app-detail/client-app-detail-button-group'
-import ClientAppInstallConfirmation from '@/components/ui/client-app-detail/client-app-install-confirmation'
+import ClientAppUninstallConfirmation from '@/components/ui/client-app-detail/client-app-uninstall-confirmation'
 
 export type ClientAppDetailManageProps = {}
 
-export const handleCloseInstallConfirmationModal = (
-  setIsVisibleInstallConfirmation: (isModalOpen: boolean) => void,
+export const handleCloseUninstallConfirmationModal = (
+  setIsVisibleUninstallConfirmation: (isModalOpen: boolean) => void,
 ) => {
   return () => {
-    setIsVisibleInstallConfirmation(false)
+    setIsVisibleUninstallConfirmation(false)
   }
 }
 
-export const handleInstallAppButtonClick = (setIsVisibleInstallConfirmation: (isModalOpen: boolean) => void) => {
+export const handleUninstallAppButtonClick = (setIsVisibleUninstallConfirmation: (isModalOpen: boolean) => void) => {
   return () => {
-    setIsVisibleInstallConfirmation(true)
+    setIsVisibleUninstallConfirmation(true)
   }
 }
 
 const ClientAppDetailManage: React.FC<ClientAppDetailManageProps> = () => {
-  const [isVisibleInstallConfirmation, setIsVisibleInstallConfirmation] = React.useState(false)
-  const closeInstallConfirmationModal = React.useCallback(
-    handleCloseInstallConfirmationModal(setIsVisibleInstallConfirmation),
+  const [isVisibleUninstallConfirmation, setIsVisibleUninstallConfirmation] = React.useState(false)
+  const closeUninstallConfirmationModal = React.useCallback(
+    handleCloseUninstallConfirmationModal(setIsVisibleUninstallConfirmation),
+    [],
+  )
+  const onUninstallConfirmationModal = React.useCallback(
+    handleUninstallAppButtonClick(setIsVisibleUninstallConfirmation),
     [],
   )
-  const onInstallConfirmationModal = React.useCallback(handleInstallAppButtonClick(setIsVisibleInstallConfirmation), [])
 
   const appDetailData = useSelector(selectAppDetailData)
   const isLoadingAppDetail = useSelector(selectAppDetailLoading)
   const loginType = useSelector(selectLoginType)
 
+  const { installedOn } = appDetailData
+
   return (
     <div className={styles.appDetailContainer}>
       <AppHeader
         appDetailData={appDetailData}
         buttonGroup={
-          appDetailData.id && (
-            <ClientAppDetailButtonGroup
-              appDetailData={appDetailData}
-              handleInstallAppButtonClick={onInstallConfirmationModal}
-            />
+          installedOn && (
+            <Button
+              dataTest="detail-modal-uninstall-button"
+              type="button"
+              variant="primary"
+              onClick={onUninstallConfirmationModal}
+            >
+              Uninstall App
+            </Button>
           )
         }
       />
       <AppContent appDetailData={appDetailData} loginType={loginType} />
-      <ClientAppInstallConfirmation
-        visible={isVisibleInstallConfirmation}
+      <ClientAppUninstallConfirmation
+        visible={isVisibleUninstallConfirmation}
         appDetailData={appDetailData}
-        closeInstallConfirmationModal={closeInstallConfirmationModal}
+        closeUninstallConfirmationModal={closeUninstallConfirmationModal}
       />
       {isLoadingAppDetail && <Loader />}
     </div>

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
@@ -1,13 +1,13 @@
 import * as React from 'react'
+import { FaCheck } from 'react-icons/fa'
 import { useSelector } from 'react-redux'
 import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-app-detail'
 import { selectLoginType } from '@/selector/auth'
 import AppHeader from '@/components/ui/app-detail/app-header'
 import AppContent from '@/components/ui/app-detail/app-content'
 
-import { Loader } from '@reapit/elements'
+import { Loader, Button } from '@reapit/elements'
 import styles from '@/styles/pages/developer-app-detail.scss?mod'
-import ClientAppDetailButtonGroup from '@/components/ui/client-app-detail/client-app-detail-button-group'
 import ClientAppInstallConfirmation from '@/components/ui/client-app-detail/client-app-install-confirmation'
 
 export type ClientAppDetailProps = {}
@@ -38,16 +38,31 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const isLoadingAppDetail = useSelector(selectAppDetailLoading)
   const loginType = useSelector(selectLoginType)
 
+  const { id, installedOn } = appDetailData
+
   return (
     <div className={styles.appDetailContainer}>
       <AppHeader
         appDetailData={appDetailData}
         buttonGroup={
-          appDetailData.id && (
-            <ClientAppDetailButtonGroup
-              appDetailData={appDetailData}
-              handleInstallAppButtonClick={onInstallConfirmationModal}
-            />
+          id && (
+            <div>
+              {installedOn ? (
+                <div data-test="detail-modal-installed" className={styles.installed}>
+                  <FaCheck />
+                  <span>Installed</span>
+                </div>
+              ) : (
+                <Button
+                  dataTest="detail-modal-install-button"
+                  type="button"
+                  variant="primary"
+                  onClick={onInstallConfirmationModal}
+                >
+                  Install App
+                </Button>
+              )}
+            </div>
           )
         }
       />

diff --git a/packages/marketplace/src/components/ui/client-app-detail/client-app-detail-button-group.tsx b/packages/marketplace/src/components/ui/client-app-detail/client-app-detail-button-group.tsx
diff --git a/packages/marketplace/src/components/ui/client-app-detail/client-app-install-confirmation.tsx b/packages/marketplace/src/components/ui/client-app-detail/client-app-install-confirmation.tsx
@@ -5,11 +5,11 @@ import { AppDetailModel } from '@reapit/foundations-ts-definitions'
 import appPermissionContentStyles from '@/styles/pages/app-permission-content.scss?mod'
 import { Button, Modal } from '@reapit/elements'
 import { appInstallationsRequestInstall } from '@/actions/app-installations'
-import { appDetailRequestData } from '@/actions/app-detail'
+import { clientAppDetailRequestData } from '@/actions/client'
 import { Dispatch } from 'redux'
 import CallToAction from '../call-to-action'
 import { selectClientId } from '@/selector/client'
-import { selectInstallAppLoading } from '@/selector/installations'
+import { selectInstallationFormState } from '@/selector/installations'
 
 export type ClientAppInstallConfirmationProps = {
   appDetailData?: AppDetailModel
@@ -30,7 +30,7 @@ export const handleInstallButtonClick = (
         appId,
         callback: () => {
           dispatch(
-            appDetailRequestData({
+            clientAppDetailRequestData({
               id: appId,
               clientId,
             }),
@@ -63,8 +63,10 @@ const ClientAppInstallConfirmation: React.FC<ClientAppInstallConfirmationProps>
   const history = useHistory()
   const [isSuccessAlertVisible, setIsSuccessAlertVisible] = React.useState(false)
   const clientId = useSelector(selectClientId)
-  const isInstallAppLoading = useSelector(selectInstallAppLoading)
-  const { name, installationId, id = '', scopes = [] } = appDetailData || {}
+  const installationFormState = useSelector(selectInstallationFormState)
+  const isSubmitting = installationFormState === 'SUBMITTING'
+
+  const { name, id = '', scopes = [] } = appDetailData || {}
 
   const dispatch = useDispatch()
   const onSuccessAlertButtonClick = React.useCallback(handleSuccessAlertButtonClick(history), [history])
@@ -79,7 +81,7 @@ const ClientAppInstallConfirmation: React.FC<ClientAppInstallConfirmationProps>
           <>
             <Button
               dataTest="agree-btn"
-              loading={isInstallAppLoading}
+              loading={isSubmitting}
               className={appPermissionContentStyles.installButton}
               type="button"
               variant="primary"
@@ -137,7 +139,7 @@ const ClientAppInstallConfirmation: React.FC<ClientAppInstallConfirmationProps>
             onButtonClick={onSuccessAlertButtonClick}
             isCenter
           >
-            {name} has been successfully {installationId ? 'uninstalled' : 'installed'}
+            {name} has been successfully installed
           </CallToAction>
         </>
       </Modal>