diff --git a/packages/marketplace/src/actions/app-installations.ts b/packages/marketplace/src/actions/app-installations.ts index 3ca0fc96f4..3724af3537 100644 --- 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(ActionTypes.APP_INSTALLATIONS_REQUEST_DATA) diff --git a/packages/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx b/packages/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx index 8441c37eb6..ed077fee0a 100644 --- a/packages/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx +++ b/packages/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 = () => { - 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 (
+ installedOn && ( + ) } /> - {isLoadingAppDetail && }
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 fa4c681d70..7c0ece299d 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 @@ -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 = () => { const isLoadingAppDetail = useSelector(selectAppDetailLoading) const loginType = useSelector(selectLoginType) + const { id, installedOn } = appDetailData + return (
+ id && ( +
+ {installedOn ? ( +
+ + Installed +
+ ) : ( + + )} +
) } /> 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 deleted file mode 100644 index 77185f8c7c..0000000000 --- a/packages/marketplace/src/components/ui/client-app-detail/client-app-detail-button-group.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react' -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' - -export type ClientAppDetailButtonGroupProps = { - appDetailData: AppDetailModel & { - apiKey?: string | undefined - } - handleInstallAppButtonClick: () => void -} - -const ClientAppDetailButtonGroup: React.FC = ({ - appDetailData, - handleInstallAppButtonClick, -}) => { - const { installedOn } = appDetailData - - return ( -
- {installedOn ? ( -
- - Installed -
- ) : ( - - )} -
- ) -} - -export default ClientAppDetailButtonGroup 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 index 2d05f72c3f..ef68c3b386 100644 --- 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 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 <> + + + } + > + <>Are you sure you wish to uninstall {name}? This action will uninstall the app for ALL platform users + + <> - - + {name} has been successfully uninstalled + - } - > - <>Are you sure you wish to uninstall {name}? This action will uninstall the app for ALL platform users - + + ) } diff --git a/packages/marketplace/src/sagas/app-installations.ts b/packages/marketplace/src/sagas/app-installations.ts index b699fd3d3f..32b05e5732 100644 --- a/packages/marketplace/src/sagas/app-installations.ts +++ b/packages/marketplace/src/sagas/app-installations.ts @@ -116,12 +116,16 @@ export const appInstallSaga = function*(options) { } } -export const appUninstallSaga = function*({ data }) { +export const appUninstallSaga = function*(options) { + const data: UninstallParams = options.data try { yield put(appInstallationsSetFormState('SUBMITTING')) const email = yield select(selectLoggedUserEmail) yield call(fetchUninstallApp, { data, email }) + if (data.callback) { + data.callback() + } yield put(appInstallationsSetFormState('SUCCESS')) } catch (err) { logger(err) diff --git a/packages/marketplace/src/selector/installations.ts b/packages/marketplace/src/selector/installations.ts index 6fb2bcf87f..8103b0ac97 100644 --- a/packages/marketplace/src/selector/installations.ts +++ b/packages/marketplace/src/selector/installations.ts @@ -7,3 +7,7 @@ export const getInstallations = (state: ReduxState) => { export const selectInstallAppLoading = (state: ReduxState) => { return state.installations.loading } + +export const selectInstallationFormState = (state: ReduxState) => { + return state.installations.formState +}