feat: #1125: Add client app uninstall confirm dialog

reapit · May 7, 2020 · 5b0d9cb · 5b0d9cb
1 parent 2c19976
commit 5b0d9cb
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 28 deletions.
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
@@ -34,33 +34,10 @@ export const mapState = (useSelector): MapState => {
   }
 }
 
-export const onInstallAppButtonClick = () => {
-  return () => {}
-}
-
-export const renderAppHeaderButtonGroup = (path: string, installedOn?: string) => {
-  switch (path) {
-    case Routes.CLIENT_APP_DETAIL:
-      return 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={() => {}}>
-          Install App
-        </Button>
-      )
-    default:
-      break
-  }
-}
-
 const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const match = useRouteMatch()
   const { path } = match
   const { appDetailData, isLoadingAppDetail, loginType } = mapState(useSelector)
-  const { installedOn } = appDetailData
 
   if (!appDetailData.id || isLoadingAppDetail) {
     return <Loader />

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
@@ -3,7 +3,7 @@ import { FaCheck } from 'react-icons/fa'
 import { AppDetailModel } from '@reapit/foundations-ts-definitions'
 import styles from '@/styles/pages/developer-app-detail.scss?mod'
 import { Button } from '@reapit/elements'
-import ClientAppInstallationConfirmation from './client-app-installation-confirmation'
+import ClientAppInstallConfirmation from './client-app-install-confirmation'
 
 export type ClientAppDetailButtonGroupProps = {
   appDetailData: AppDetailModel & {
@@ -43,7 +43,7 @@ const ClientAppDetailButtonGroup: React.FC<ClientAppDetailButtonGroupProps> = ({
           Install App
         </Button>
       )}
-      <ClientAppInstallationConfirmation
+      <ClientAppInstallConfirmation
         visible={isVisibleInstallConfirmation}
         appDetailData={appDetailData}
         closeInstallConfirmationModal={closeInstallConfirmationModal}

diff --git a/.../client-app-installation-confirmation.tsx → ...etail/client-app-install-confirmation.tsx b/.../client-app-installation-confirmation.tsx → ...etail/client-app-install-confirmation.tsx
@@ -6,7 +6,7 @@ import { Button, Modal } from '@reapit/elements'
 import { appInstallationsRequestInstall } from '@/actions/app-installations'
 import { Dispatch } from 'redux'
 
-export type ClientAppInstallationConfirmationProps = {
+export type ClientAppInstallConfirmationProps = {
   appDetailData?: AppDetailModel
   visible: boolean
   closeInstallConfirmationModal: () => void
@@ -22,7 +22,7 @@ export const onInstallButtonClick = (appId: string, dispatch: Dispatch<any>) =>
   }
 }
 
-const ClientAppInstallationConfirmation: React.FC<ClientAppInstallationConfirmationProps> = ({
+const ClientAppInstallConfirmation: React.FC<ClientAppInstallConfirmationProps> = ({
   appDetailData,
   visible,
   closeInstallConfirmationModal,
@@ -84,4 +84,4 @@ const ClientAppInstallationConfirmation: React.FC<ClientAppInstallationConfirmat
   )
 }
 
-export default ClientAppInstallationConfirmation
+export default ClientAppInstallConfirmation
diff --git a/...ges/marketplace/src/components/ui/client-app-detail/client-app-uninstall-confirmation.tsx b/...ges/marketplace/src/components/ui/client-app-detail/client-app-uninstall-confirmation.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react'
+import { useDispatch } from 'react-redux'
+import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+import appPermissionContentStyles from '@/styles/pages/app-permission-content.scss?mod'
+import { Button, Modal } from '@reapit/elements'
+import { appInstallationsRequestUninstall } from '@/actions/app-installations'
+import { Dispatch } from 'redux'
+
+export type ClientAppUninstallConfirmationProps = {
+  appDetailData?: AppDetailModel
+  visible: boolean
+  closeInstallConfirmationModal: () => void
+}
+
+export const onInstallButtonClick = (appId: string, dispatch: Dispatch<any>) => {
+  return () => {
+    dispatch(
+      appInstallationsRequestUninstall({
+        appId,
+      }),
+    )
+  }
+}
+
+const ClientAppUninstallConfirmation: React.FC<ClientAppUninstallConfirmationProps> = ({
+  appDetailData,
+  visible,
+  closeInstallConfirmationModal,
+}) => {
+  const { name, id = '', scopes = [] } = appDetailData || {}
+  const dispatch = useDispatch()
+
+  return (
+    <Modal
+      visible={visible}
+      title={`Confirm ${name} installation`}
+      afterClose={closeInstallConfirmationModal}
+      footerItems={
+        <>
+          <Button
+            dataTest="agree-btn"
+            loading={false}
+            className={appPermissionContentStyles.installButton}
+            type="button"
+            variant="primary"
+            onClick={onInstallButtonClick(id, dispatch)}
+          >
+            Confirm
+          </Button>
+          <Button
+            dataTest="disagree-btn"
+            disabled={false}
+            className={appPermissionContentStyles.installButton}
+            type="button"
+            variant="danger"
+            onClick={closeInstallConfirmationModal}
+          >
+            Cancel
+          </Button>
+        </>
+      }
+    >
+      <>Are you sure you wish to uninstall {name}? This action will uninstall the app for ALL platform users</>
+    </Modal>
+  )
+}
+
+export default ClientAppUninstallConfirmation