refactor: #1325 Refactor installations using react-redux hooks

packages/marketplace/src/components/pages/app-detail/developer/__tests__/developer-app-content.test.tsx

@@ -4,7 +4,11 @@ import { installationsStub } from '@/sagas/__stubs__/installations'
 import { mount } from 'enzyme'
 import { appInstallationsRequestData } from '@/actions/app-installations'
 import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
-import AppContent, { handleUninstallSuccess, handleOpenAppPreview } from '../developer-app-content'
+import AppContent, {
+  handleUninstallSuccess,
+  handleOpenAppPreview,
+  generateInstallationTableColumns,
+} from '../developer-app-content'
 import { Provider } from 'react-redux'
 import { ReduxState } from '@/types/core'
 import configureStore from 'redux-mock-store'
@@ -73,4 +77,11 @@ describe('AppContent', () => {
       expect(spyOpenUrl).toBeCalledWith('developer/apps/appId/preview', '_blank')
     })
   })
+
+  describe('generateInstallationTableColumns', () => {
+    it('should run correctly', () => {
+      const result = generateInstallationTableColumns(jest.fn())()
+      expect(result).toHaveLength(3)
+    })
+  })
 })

packages/marketplace/src/components/pages/app-detail/developer/developer-app-content.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
+import dayjs from 'dayjs'
 import { Dispatch } from 'redux'
 import { GET_ALL_PAGE_SIZE } from '@/constants/paginator'
 import { appInstallationsRequestData } from '@/actions/app-installations'
 import { selectDeveloperId } from '@/selector'
-import { FlexContainerBasic } from '@reapit/elements'
+import { FlexContainerBasic, Button, DATE_TIME_FORMAT } from '@reapit/elements'
 import ConfirmUninstall from '@/components/ui/app-installations/confirm-uninstall'
 import { PagedResultInstallationModel_, InstallationModel } from '@reapit/foundations-ts-definitions'
 import { handleUninstall, handleAfterClose } from '@/components/ui/app-installations/app-installations-modal'
 import { useSelector, useDispatch } from 'react-redux'
 import { selectInstallationAppData } from '@/selector/installations'
 import { Modal } from '@reapit/elements'
-import { generateColumns } from '@/components/ui/app-installations/installations'
 import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
 import { DeveloperAppDetailState } from '@/reducers/developer'
 import {
@@ -25,6 +25,8 @@ export type AppContentProps = {
   appDetailState: DeveloperAppDetailState
 }
 
+export type CustomUninstallCell = React.FC<{ onClick: () => void }>
+
 interface HandleUninstallSuccessParams {
   handleAfterClose: any
   setUninstallApp: React.Dispatch<React.SetStateAction<InstallationModel | undefined>>
@@ -61,6 +63,38 @@ export const CustomUninstallCell: React.FC<{ onClick: () => void }> = ({ onClick
   <a onClick={onClick}>Uninstall</a>
 )
 
+export const generateInstallationTableColumns = (
+  onUninstall: (app: InstallationModel) => () => void,
+  CustomUninstallCell?: CustomUninstallCell,
+) => () => {
+  const UninstallCell = ({ row }) => {
+    if (CustomUninstallCell) {
+      return <CustomUninstallCell onClick={onUninstall(row.original)} />
+    }
+
+    return (
+      <Button type="button" variant="primary" onClick={onUninstall(row.original)}>
+        Uninstall
+      </Button>
+    )
+  }
+
+  return [
+    {
+      Header: 'Client',
+      accessor: 'client',
+    },
+    {
+      Header: 'Date Installed',
+      accessor: d => dayjs(d.created).format(DATE_TIME_FORMAT.DATE_FORMAT),
+    },
+    {
+      Header: 'Uninstall',
+      Cell: UninstallCell,
+    },
+  ]
+}
+
 const AppContent: React.FC<AppContentProps> = ({ appDetailState }) => {
   const appDetailData = appDetailState.data as AppDetailDataNotNull
   const { summary = '', authFlow = '', externalId = '', id = '', name = '', scopes = [] } = appDetailData
@@ -70,7 +104,10 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailState }) => {
   const developerId = useSelector(selectDeveloperId) || ''
 
   const [uninstallApp, setUninstallApp] = React.useState<InstallationModel>()
-  const columns = generateColumns(handleUninstall(setUninstallApp), CustomUninstallCell)()
+  const installationTableColumns = generateInstallationTableColumns(
+    handleUninstall(setUninstallApp),
+    CustomUninstallCell,
+  )()
   const isVisibleUninstallModal = Boolean(uninstallApp)
 
   return (
@@ -96,7 +133,7 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailState }) => {
       <ListingPreviewSection onClick={handleOpenAppPreview(id)} />
       <AuthenticationSection id={id} authFlow={authFlow} externalId={externalId} />
       <PermissionsSection permissions={scopes} />
-      <InstallationsTableSection columns={columns} data={data} />
+      <InstallationsTableSection columns={installationTableColumns} data={data} />
     </FlexContainerBasic>
   )
 }

packages/marketplace/src/components/pages/app-detail/developer/developer-app-detail.tsx

@@ -12,13 +12,11 @@ import { selectInstallAppLoading } from '@/selector/installations'
 import { Loader, FlexContainerResponsive, FlexContainerBasic, Grid, GridItem } from '@reapit/elements'
 import AppHeader from '@/components/pages/app-detail/common/ui-app-header'
 import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
-import AppInstallations from '@/components/ui/app-installations/app-installations-modal'
 import routes from '@/constants/routes'
 import { getDesktopIntegrationTypes } from '@/utils/get-desktop-integration-types'
 import useReactResponsive from '@/components/hooks/use-react-responsive'
 import { BackToAppsSection } from '../common/ui-sections'
 import AppContent from './developer-app-content'
-import AppRevisionModal from './developer-app-revision-modal'
 
 export type DeveloperAppDetailProps = {}
 
@@ -46,8 +44,6 @@ export const onBackToAppsButtonClick = (history: History) => () => {
 
 const DeveloperAppDetail: React.FC<DeveloperAppDetailProps> = () => {
   const history = useHistory()
-  const [isInstallationsModalOpen, setIsInstallationsModalOpen] = React.useState(false)
-  const [isAppRevisionComparisonModalOpen, setIsAppRevisionComparisonModalOpen] = React.useState(false)
   const { isMobile } = useReactResponsive()
 
   const appDetailState = useSelector(selectAppDetailState)
@@ -57,7 +53,6 @@ const DeveloperAppDetail: React.FC<DeveloperAppDetailProps> = () => {
   const desktopIntegrationTypes = useSelector(selectIntegrationTypes) as DesktopIntegrationTypeModel[]
   const installationsData = useSelector(selectInstallationAppData) as PagedResultInstallationModel_
   const unfetch = !appDetailState?.data || !installationsData?.data
-  const { id = '', name = '' } = appDetailData
   const userDesktopIntegrationTypes = getDesktopIntegrationTypes(
     appDetailData.desktopIntegrationTypeIds || [],
     desktopIntegrationTypes,
@@ -80,23 +75,6 @@ const DeveloperAppDetail: React.FC<DeveloperAppDetailProps> = () => {
             {!isMobile && <BackToAppsSection onClick={onBackToAppsButtonClick(history)} />}
           </FlexContainerBasic>
         </GridItem>
-        {isInstallationsModalOpen && (
-          <AppInstallations
-            appId={id}
-            appName={name}
-            visible={isInstallationsModalOpen}
-            afterClose={closeInstallationsModal(setIsInstallationsModalOpen)}
-            onUninstallSuccess={closeInstallationsModal(setIsInstallationsModalOpen)}
-          />
-        )}
-        {isAppRevisionComparisonModalOpen && (
-          <AppRevisionModal
-            visible={isAppRevisionComparisonModalOpen}
-            appId={id}
-            appDetailState={appDetailState}
-            afterClose={closeAppRevisionComparisonModal(setIsAppRevisionComparisonModalOpen)}
-          />
-        )}
       </Grid>
     </FlexContainerResponsive>
   )

packages/marketplace/src/components/ui/app-installations/__tests__/__snapshots__/app-installations-modal.tsx.snap

@@ -5,11 +5,5 @@ exports[`AppInstallationsModal should match a snapshot 1`] = `
   afterClose={[MockFunction]}
   renderChildren={true}
   visible={true}
->
-  <Connect(Component)
-    afterClose={[Function]}
-    appId="1"
-    onUninstall={[Function]}
-  />
-</Component>
+/>
 `;

packages/marketplace/src/components/ui/app-installations/app-installations-modal.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { ModalProps, Modal } from '@reapit/elements'
 import { InstallationModel } from '@reapit/foundations-ts-definitions'
-import Installations from './installations'
 import ConfirmUninstall from './confirm-uninstall'
 
 interface AppInstallationsModalInnerProps {
@@ -30,7 +29,6 @@ export const handleUninstall = (setUninstallApp: (app: InstallationModel) => voi
 }
 
 export const AppInstallationsModal: React.FC<AppInstallationsModalProps> = ({
-  appId,
   appName,
   visible,
   afterClose,
@@ -41,19 +39,13 @@ export const AppInstallationsModal: React.FC<AppInstallationsModalProps> = ({
   return (
     <Modal visible={visible} afterClose={afterClose} renderChildren>
       <>
-        {uninstallApp ? (
+        {uninstallApp && (
           <ConfirmUninstall
             appName={appName}
             installationDetail={uninstallApp}
             onUninstallSuccess={onUninstallSuccess}
             afterClose={handleAfterClose({ setUninstallApp, afterClose })}
           />
-        ) : (
-          <Installations
-            appId={appId}
-            afterClose={handleAfterClose({ setUninstallApp, afterClose })}
-            onUninstall={handleUninstall(setUninstallApp)}
-          />
         )}
       </>
     </Modal>