From f2af7ec25d9acd67bf625947a4cf10e0d1d04d9f Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Wed, 20 May 2020 18:31:46 -0300
Subject: [PATCH] Wip 4

---
 client/admin/apps/AppDetailsPage.js           | 117 ++++++++++++++
 client/admin/apps/AppMenu.js                  |  10 ++
 client/admin/apps/AppStatus.js                |  87 ++++++++++
 client/admin/apps/AppsRoute.js                |  11 +-
 client/admin/apps/CloudLoginModal.js          |  29 ++++
 client/admin/apps/IframeModal.js              |  29 ++++
 client/admin/apps/MarketplacePage.js          |  29 +---
 client/admin/apps/MarketplaceTable.js         | 134 ++++++++--------
 client/admin/apps/PriceDisplay.js             |  31 ++++
 client/admin/apps/helpers.js                  | 144 +++++++++++++++++
 client/admin/apps/hooks/useAppInfo.js         |  96 +++++++++++
 client/admin/apps/hooks/useMarketplaceApps.js | 122 ++++++++++++++
 client/admin/apps/hooks/useMenuOptions.js     | 151 ++++++++++++++++++
 client/admin/routes.js                        |   2 +-
 client/hooks/useResizeInlineBreakpoint.js     |   9 ++
 15 files changed, 912 insertions(+), 89 deletions(-)
 create mode 100644 client/admin/apps/AppDetailsPage.js
 create mode 100644 client/admin/apps/AppMenu.js
 create mode 100644 client/admin/apps/AppStatus.js
 create mode 100644 client/admin/apps/CloudLoginModal.js
 create mode 100644 client/admin/apps/IframeModal.js
 create mode 100644 client/admin/apps/PriceDisplay.js
 create mode 100644 client/admin/apps/helpers.js
 create mode 100644 client/admin/apps/hooks/useAppInfo.js
 create mode 100644 client/admin/apps/hooks/useMarketplaceApps.js
 create mode 100644 client/admin/apps/hooks/useMenuOptions.js
 create mode 100644 client/hooks/useResizeInlineBreakpoint.js

diff --git a/client/admin/apps/AppDetailsPage.js b/client/admin/apps/AppDetailsPage.js
new file mode 100644
index 000000000000..572dd5f24059
--- /dev/null
+++ b/client/admin/apps/AppDetailsPage.js
@@ -0,0 +1,117 @@
+import React, { useState, useCallback } from 'react';
+import { Button, ButtonGroup, Icon, Avatar, Box, Divider, Chip, Margins } from '@rocket.chat/fuselage';
+
+import Page from '../../components/basic/Page';
+import { useRoute } from '../../contexts/RouterContext';
+import { useMethod } from '../../contexts/ServerContext';
+import PriceDisplay from './PriceDisplay';
+import { AppStatus } from './AppStatus';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useAppInfo } from './hooks/useAppInfo';
+import { AppMenu } from './AppMenu';
+
+const objectFit = { objectFit: 'contain' };
+
+export default function AppDetailsPage({ id }) {
+	const t = useTranslation();
+	const data = useAppInfo(id);
+	const [modal, setModal] = useState(null);
+
+	const router = useRoute('admin-apps');
+	const handleReturn = useCallback(() => router.push({}));
+
+	const {
+		iconFileData = '',
+		name,
+		author: { name: authorName, homepage, support } = {},
+		description,
+		categories = [],
+		version,
+		price,
+		purchaseType,
+		pricingPlans,
+		iconFileContent,
+		installed,
+		bundledIn,
+	} = data;
+
+	const getLoggedInCloud = useMethod('cloud:checkUserLoggedIn');
+	const isLoggedIn = getLoggedInCloud();
+
+	return <><Page flexDirection='column'>
+		<Page.Header title={t('App_Details')}>
+			<ButtonGroup>
+				<Button primary disabled>
+					{t('Save_changes')}
+				</Button>
+				<Button onClick={handleReturn}>
+					<Icon name='back'/>
+					{t('Back')}
+				</Button>
+			</ButtonGroup>
+		</Page.Header>
+		<Page.ScrollableContent maxWidth='x600' w='full' alignSelf='center'>
+			<Box display='flex' flexDirection='row' mbe='x20' w='full'>
+				<Avatar style={objectFit} size='x120' mie='x20' url={iconFileContent || `data:image/png;base64,${ iconFileData }`}/>
+				<Box display='flex' flexDirection='column' justifyContent='space-between' flexGrow={1}>
+					<Box fontScale='h1' fontWeight='500'>{name}</Box>
+					<Box display='flex' flexDirection='row' color='hint' alignItems='center'>
+						<Box fontScale='p2' mie='x4'>{`${ t('By') } ${ authorName }`}</Box>
+						|
+						<Box mis= 'x4'>{`${ t('Version') } ${ version }`}</Box>
+					</Box>
+					<Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
+						<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center'>
+							<AppStatus mie='x4' app={data} setModal={setModal} isLoggedIn={isLoggedIn}/>
+							{!installed && <PriceDisplay mis='x4' purchaseType={purchaseType} pricingPlans={pricingPlans} price={price} showType={false}/>}
+						</Box>
+						{installed && <AppMenu app={data} setModal={setModal} isLoggedIn={isLoggedIn} />}
+					</Box>
+				</Box>
+			</Box>
+			<Divider />
+			<Box display='flex' flexDirection='column'>
+
+				<Margins block='x12'>
+					<Box fontScale='h1' textTransform='uppercase'>{t('Categories')}</Box>
+					<Box display='flex' flexDirection='row'>
+						{categories && categories.map((current) => <Chip key={current} textTransform='uppercase' mie='x8'><Box color='hint'>{current}</Box></Chip>)}
+					</Box>
+
+					<Box fontScale='h1' textTransform='uppercase'>{t('Contact')}</Box>
+					<Box display='flex' flexDirection='row'>
+						<Box display='flex' flexDirection='column' mie='x12'>
+							<Box fontScale='s1' color='hint' textTransform='uppercase'>{t('Author_Site')}</Box>
+							<Box withRichContent><a href={homepage}>{homepage}</a></Box>
+						</Box>
+						<Box display='flex' flexDirection='column'>
+							<Box fontScale='s1' color='hint' textTransform='uppercase'>{t('Support')}</Box>
+							<Box withRichContent><a href={support}>{support}</a></Box>
+						</Box>
+					</Box>
+
+					<Box fontScale='h1' textTransform='uppercase'>{t('Details')}</Box>
+					<Box display='flex' flexDirection='row'>{description}</Box>
+				</Margins>
+
+			</Box>
+			{bundledIn && <>
+				<Divider />
+				<Box display='flex' flexDirection='column'>
+					<Margins block='x12'>
+						<Box fontScale='h1' textTransform='uppercase'>{t('Bundles')}</Box>
+						{bundledIn.map((bundle) => <Box key={bundle.bundleId} display='flex' flexDirection='row' alignItems='center'>
+							<Box width='x80' height='x80' display='flex' flexDirection='row' justifyContent='space-around' flexWrap='wrap' flexShrink={0}>
+								{bundle.apps.map((app) => <Avatar size='x36' url={app.latest.iconFileContent || `data:image/png;base64,${ app.latest.iconFileData }`} />)}
+							</Box>
+							<Box display='flex' flexDirection='column' mis='x12'>
+								<Box fontScale='p2'>{bundle.bundleName}</Box>
+								{bundle.apps.map((app) => <Box key={app.latest.name}>{app.latest.name},</Box>)}
+							</Box>
+						</Box>)}
+					</Margins>
+				</Box>
+			</>}
+		</Page.ScrollableContent>
+	</Page>{modal}</>;
+}
diff --git a/client/admin/apps/AppMenu.js b/client/admin/apps/AppMenu.js
new file mode 100644
index 000000000000..745d0c0cdf3f
--- /dev/null
+++ b/client/admin/apps/AppMenu.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Menu } from '@rocket.chat/fuselage';
+
+import { useMenuOptions } from './hooks/useMenuOptions';
+
+export const AppMenu = ({ app, setModal, isLoggedIn, ...props }) => {
+	const menuOptions = useMenuOptions({ app, setModal, isLoggedIn });
+
+	return <Menu options={menuOptions} placement='bottom left' {...props}/>;
+};
diff --git a/client/admin/apps/AppStatus.js b/client/admin/apps/AppStatus.js
new file mode 100644
index 000000000000..4ea476ce1353
--- /dev/null
+++ b/client/admin/apps/AppStatus.js
@@ -0,0 +1,87 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Button, Icon, Throbber } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { appButtonProps, appStatusSpanProps, handleAPIError, warnStatusChange } from './helpers';
+import { Apps } from '../../../app/apps/client/orchestrator';
+import { IframeModal } from './IframeModal';
+import { CloudLoginModal } from './CloudLoginModal';
+
+const installApp = async ({ id, name, version }) => {
+	try {
+		const { status } = await Apps.installApp(id, version);
+		warnStatusChange(name, status);
+	} catch (error) {
+		handleAPIError(error);
+	}
+};
+
+const actions = {
+	purchase: installApp,
+	install: installApp,
+	update: async ({ id, name, version }) => {
+		try {
+			const { status } = await Apps.updateApp(id, version);
+			warnStatusChange(name, status);
+		} catch (error) {
+			handleAPIError(error);
+		}
+	},
+};
+
+export const AppStatus = React.memo(({ app, setModal, isLoggedIn, ...props }) => {
+	const t = useTranslation();
+	const [loading, setLoading] = useState();
+
+	const button = appButtonProps(app);
+	const status = !button && appStatusSpanProps(app);
+
+	const { id } = app;
+
+	const confirmAction = () => {
+		setModal(null);
+
+		actions[button.action](app).then(() => {
+			setLoading(false);
+		});
+	};
+
+	const cancelAction = () => {
+		setModal(null);
+		setLoading(false);
+	};
+
+	const openModal = async () => {
+		try {
+			const data = await Apps.buildExternalUrl(app.id, app.purchaseType, false);
+
+			setModal(() => <IframeModal url={data.url} cancel={cancelAction} confirm={confirmAction}/>);
+		} catch (error) {
+			handleAPIError(error);
+		}
+	};
+
+	const handleClick = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (isLoggedIn) {
+			setLoading(true);
+
+			button.action === 'purchase' ? openModal() : confirmAction();
+			return;
+		}
+		setModal(<CloudLoginModal cancel={() => setModal(null)} />);
+	}, [id, isLoggedIn, button && button.action]);
+
+	return <Box {...props}>
+		{button && <Button primary disabled={loading} onClick={handleClick}>
+			{loading && <Throbber />}
+			{!loading && button.icon && <Icon name={button.icon} />}
+			{!loading && t(button.label)}
+		</Button>}
+		{status && <Box color={status.label === 'Disabled' ? 'warning' : 'hint'} display='flex' alignItems='center'>
+			<Icon size='x20' name={status.icon} mie='x4'/>
+			{t(status.label)}
+		</Box>}
+	</Box>;
+});
diff --git a/client/admin/apps/AppsRoute.js b/client/admin/apps/AppsRoute.js
index 1fe4b493d82b..7b5bd1cfb6bf 100644
--- a/client/admin/apps/AppsRoute.js
+++ b/client/admin/apps/AppsRoute.js
@@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { Box } from '@rocket.chat/fuselage';
 
 import { Apps } from '../../../app/apps/client/orchestrator';
+import { useRouteParameter } from '../../contexts/RouterContext';
 import { usePermission } from '../../contexts/AuthorizationContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import NotAuthorizedPage from '../NotAuthorizedPage';
+import AppDetailsPage from './AppDetailsPage';
 import MarketplacePage from './MarketplacePage';
 
 export default function AppsRoute() {
@@ -13,6 +15,10 @@ export default function AppsRoute() {
 	const canViewAppsAndMarketplace = usePermission('manage-apps');
 	const [isEnabled, setEnabled] = useState(false);
 
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+	const version = useRouteParameter('version');
+
 	useEffect(() => {
 		(async () => setEnabled(await Apps.isEnabled()))();
 	}, []);
@@ -25,5 +31,8 @@ export default function AppsRoute() {
 		return <Box>{t('Apps_disabled')}</Box>;
 	}
 
-	return <MarketplacePage />;
+	return <>
+		{!context && <MarketplacePage />}
+		{context === 'details' && <AppDetailsPage id={id} marketplaceVersion={version}/>}
+	</>;
 }
diff --git a/client/admin/apps/CloudLoginModal.js b/client/admin/apps/CloudLoginModal.js
new file mode 100644
index 000000000000..0effb2f61f88
--- /dev/null
+++ b/client/admin/apps/CloudLoginModal.js
@@ -0,0 +1,29 @@
+
+import React from 'react';
+import { Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { Modal } from '../../components/basic/Modal';
+import { useRoute } from '../../contexts/RouterContext';
+
+export const CloudLoginModal = ({ cancel, ...props }) => {
+	const t = useTranslation();
+	const router = useRoute('cloud');
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='danger' name='info-circled' size={20}/>
+			<Modal.Title>{t('Apps_Marketplace_Login_Required_Title')}</Modal.Title>
+			<Modal.Close onClick={cancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			{t('Apps_Marketplace_Login_Required_Description')}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button ghost onClick={cancel}>{t('Cancel')}</Button>
+				<Button primary danger onClick={() => router.push({})}>{t('Login')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
diff --git a/client/admin/apps/IframeModal.js b/client/admin/apps/IframeModal.js
new file mode 100644
index 000000000000..bd5cce284012
--- /dev/null
+++ b/client/admin/apps/IframeModal.js
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { Box } from '@rocket.chat/fuselage';
+
+import { Modal } from '../../components/basic/Modal';
+
+const iframeMsgListener = (confirm, cancel) => (e) => {
+	let data;
+	try {
+		data = JSON.parse(e.data);
+	} catch (e) {
+		return;
+	}
+
+	data.result ? confirm(data) : cancel();
+};
+
+export const IframeModal = ({ url, confirm, cancel, ...props }) => {
+	useEffect(() => {
+		const listener = iframeMsgListener(confirm, cancel);
+		window.addEventListener('message', listener);
+
+		return () => window.removeEventListener('message', listener);
+	}, []);
+	return <Modal height='x360' {...props}>
+		<Box padding='x12' w='full' h='full' flexGrow={1}>
+			<iframe style={{ border: 'none', height: '100%', width: '100%' }} src={url}/>
+		</Box>
+	</Modal>;
+};
diff --git a/client/admin/apps/MarketplacePage.js b/client/admin/apps/MarketplacePage.js
index ff1edc6fd7f9..bee2bfa3169d 100644
--- a/client/admin/apps/MarketplacePage.js
+++ b/client/admin/apps/MarketplacePage.js
@@ -1,37 +1,22 @@
-import { Button, ButtonGroup, Icon, Tabs } from '@rocket.chat/fuselage';
-import React, { useEffect, useCallback } from 'react';
+import { Button, ButtonGroup, Icon } from '@rocket.chat/fuselage';
+import React, { useState } from 'react';
 
 import Page from '../../components/basic/Page';
-import { Apps } from '../../../app/apps/client/orchestrator';
 import { useTranslation } from '../../contexts/TranslationContext';
-import { useRoute, useRouteParameter } from '../../contexts/RouterContext';
+import { useRoute } from '../../contexts/RouterContext';
 import { useMethod } from '../../contexts/ServerContext';
 import MarketplaceTable from './MarketplaceTable';
 
 function MarketplacePage() {
 	const t = useTranslation();
+	const [modal, setModal] = useState(null);
 
 	const cloudRouter = useRoute('cloud');
 
-	// const handleNewButtonClick = useCallback(() => {
-	// 	router.push({ context: 'new', type: 'incoming' });
-	// }, []);
-
-	// const context = useRouteParameter('context');
-	// useEffect(() => {
-	// 	if (!context) {
-	// 		router.push({ context: 'webhook-incoming' });
-	// 	}
-	// }, [context]);
-
 	const getLoggedInCloud = useMethod('cloud:checkUserLoggedIn');
 	const isLoggedInCloud = getLoggedInCloud();
 
-	useEffect(() => {
-		(async () => console.log(await Apps.getAppsFromMarketplace()))();
-	}, []);
-
-	return <Page flexDirection='column'>
+	return <><Page flexDirection='column'>
 		<Page.Header title={t('Marketplace')}>
 			{isLoggedInCloud && <ButtonGroup>
 				<Button onClick={() => { cloudRouter.push({}); }}>
@@ -40,9 +25,9 @@ function MarketplacePage() {
 			</ButtonGroup>}
 		</Page.Header>
 		<Page.Content>
-			{/* <MarketplaceTable /> */}
+			<MarketplaceTable setModal={setModal}/>
 		</Page.Content>
-	</Page>;
+	</Page>{ modal }</>;
 }
 
 export default MarketplacePage;
diff --git a/client/admin/apps/MarketplaceTable.js b/client/admin/apps/MarketplaceTable.js
index 2766cf1f6b6a..5cfdf5cb9b6f 100644
--- a/client/admin/apps/MarketplaceTable.js
+++ b/client/admin/apps/MarketplaceTable.js
@@ -1,17 +1,16 @@
-import { Box, Table, TextInput, Icon, Chip } from '@rocket.chat/fuselage';
-import { useDebouncedValue, useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import { Box, Table, TextInput, Icon, Tag, Avatar } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
+import PriceDisplay from './PriceDisplay';
+import { AppStatus } from './AppStatus';
 import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { useMethod } from '../../contexts/ServerContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useRoute } from '../../contexts/RouterContext';
-import { useEndpointDataExperimental } from '../../hooks/useEndpointDataExperimental';
-import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';
-import { Apps } from '../../../app/apps/client/orchestrator';
-import { formatPricingPlan } from '../../../app/apps/client/admin/helpers';
-
-
-// const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
+import { useMarketplaceApps } from './hooks/useMarketplaceApps';
+import { useResizeInlineBreakpoint } from '../../hooks/useResizeInlineBreakpoint';
+import { AppMenu } from './AppMenu';
 
 const FilterByText = React.memo(({ setFilter, ...props }) => {
 	const t = useTranslation();
@@ -29,60 +28,29 @@ const FilterByText = React.memo(({ setFilter, ...props }) => {
 	</Box>;
 });
 
-const useResizeInlineBreakpoint = (sizes = [], debounceDelay = 0) => {
-	const { ref, borderBoxSize } = useResizeObserver({ debounceDelay });
-	const inlineSize = borderBoxSize ? borderBoxSize.inlineSize : 0;
-	sizes = useMemo(() => sizes.map((current) => (inlineSize ? inlineSize > current : true)), [inlineSize]);
-	return [ref, ...sizes];
-};
-
-const formatPrice = (purchaseType, pricingPlans, price) => {
-	if (purchaseType === 'subscription') {
-		if (!pricingPlans || !Array.isArray(pricingPlans) || pricingPlans.length === 0) {
-			return;
-		}
-
-		return formatPricingPlan(pricingPlans[0]);
-	}
-
-	if (price > 0) {
-		return formatPrice(price);
-	}
-
-	return 'Free';
-};
+const objectFit = { objectFit: 'contain' };
 
-export function MarketplaceTable({ type }) {
+export function MarketplaceTable({ setModal }) {
 	const t = useTranslation();
-	const formatDateAndTime = useFormatDateAndTime();
 	const [ref, isBig] = useResizeInlineBreakpoint([700], 200);
 
-	const [data, setData] = useState({});
-
-	useEffect(() => {
-		(async () => {
-			const appsData = await Promise.all([Apps.getAppsFromMarketplace(), Apps.getApps()]);
-			setData(await Apps.getAppsFromMarketplace())
-		})();
-	}, []);
-
 	const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
 	const [sort, setSort] = useState(['name', 'asc']);
 
 	const debouncedText = useDebouncedValue(params.text, 500);
-	const debouncedSort = useDebouncedValue(sort, 500);
+	const debouncedSort = useDebouncedValue(sort, 200);
 
-	const filteredData = useMemo(() => {
-		const filteredValues = Object.values(data).filter(debouncedSort).sort((a, b) => (a.name > b.name ? 1 : -1));
-		return debouncedSort[1] === 'asc' ? filteredValues : filteredValues.reverse();
-	}, [debouncedText, debouncedSort, params.current, params.itemsPerPage, JSON.stringify(data)]);
+	const [data, total] = useMarketplaceApps({ debouncedSort, debouncedText, ...params });
 
-	const router = useRoute('admin-integrations');
+	const getLoggedInCloud = useMethod('cloud:checkUserLoggedIn');
+	const isLoggedIn = getLoggedInCloud();
 
-	const onClick = (_id, type) => () => router.push({
-		context: 'edit',
-		type: type === 'webhook-incoming' ? 'incoming' : 'outgoing',
-		id: _id,
+	const router = useRoute('admin-apps');
+
+	const onClick = (id, version) => () => router.push({
+		context: 'details',
+		version,
+		id,
 	});
 
 	const onHeaderClick = useCallback((id) => {
@@ -100,31 +68,67 @@ export function MarketplaceTable({ type }) {
 		<Th key={'details'}>{t('Details')}</Th>,
 		<Th key={'price'}>{t('Price')}</Th>,
 		isBig && <Th key={'status'}>{t('Status')}</Th>,
-
 	].filter(Boolean), [sort, isBig]);
 
-	const renderRow = useCallback(({ author, name, id, description, categories, purchaseType, pricingPlans, price, purchased,  }) => {
-		const handler = useMemo(() => onClick(id, type), []);
-		return <Table.Row key={id} onKeyDown={handler} onClick={handler} tabIndex={0} role='link' action>
+	const renderRow = useCallback((props) => {
+		const {
+			author: { name: authorName },
+			name,
+			id,
+			description,
+			categories,
+			purchaseType,
+			pricingPlans,
+			price,
+			iconFileData,
+			marketplaceVersion,
+			installed,
+		} = props;
+
+		const [showStatus, setShowStatus] = useState(false);
+
+		const toggleShow = (state) => () => setShowStatus(state);
+		const handler = onClick(id, marketplaceVersion);
+		const preventDefault = useCallback((e) => { e.preventDefault(); e.stopPropagation(); }, []);
+
+		return useMemo(() => <Table.Row key={id} onKeyDown={handler} onClick={handler} tabIndex={0} role='link' onMouseEnter={toggleShow(true)} onMouseLeave={toggleShow(false)} >
 			<Table.Cell withTruncatedText display='flex' flexDirection='row'>
-				<Box w='x40' h='x40' alignSelf='center'>avatar</Box>
+				<Avatar style={objectFit} size='x40' mie='x8' alignSelf='center' url={`data:image/png;base64,${ iconFileData }`}/>
 				<Box display='flex' flexDirection='column' alignSelf='flex-start'>
 					<Box color='default' fontScale='p2'>{name}</Box>
-					<Box color='default' fontScale='p2'>{`${ t('By') } ${ author.name }`}</Box>
+					<Box color='default' fontScale='p2'>{`${ t('By') } ${ authorName }`}</Box>
 				</Box>
 			</Table.Cell>
-			<Table.Cell withTruncatedText>
+			<Table.Cell>
 				<Box display='flex' flexDirection='column'>
-					<Box color='default'>{description}</Box>
-					{categories && <Box color='hint'>{categories.map((current) => <Chip key={current}>{current}</Chip>)}</Box>}
+					<Box color='default' withTruncatedText>{description}</Box>
+					{categories && <Box color='hint' display='flex' flex-direction='row' withTruncatedText>
+						{categories.map((current) => <Tag disabled key={current} mie='x4'>{current}</Tag>)}
+					</Box>}
 				</Box>
 			</Table.Cell>
-			<Table.Cell withTruncatedText>{formatPrice(purchaseType, pricingPlans, price)}</Table.Cell>
-			{isBig && <Table.Cell withTruncatedText>{}</Table.Cell>}
-		</Table.Row>;
+			<Table.Cell >
+				<PriceDisplay {...{ purchaseType, pricingPlans, price }} />
+			</Table.Cell>
+			{isBig && <Table.Cell withTruncatedText>
+				<Box display={showStatus ? 'flex' : 'none'} flexDirection='row' alignItems='center' onClick={preventDefault}>
+					<AppStatus app={props} setModal={setModal} isLoggedIn={isLoggedIn} mie='x12'/>
+					{installed && <AppMenu app={props} setModal={setModal} isLoggedIn={isLoggedIn} mis='x12'/>}
+				</Box>
+			</Table.Cell>}
+		</Table.Row>, [showStatus, JSON.stringify(props)]);
 	}, []);
 
-	return <GenericTable ref={ref} FilterComponent={FilterByText} header={header} renderRow={renderRow} results={filteredData} total={filteredData.length} setParams={setParams} params={params} />;
+	return <GenericTable
+		ref={ref}
+		FilterComponent={FilterByText}
+		header={header}
+		renderRow={renderRow}
+		results={data}
+		total={total}
+		setParams={setParams}
+		params={params}
+	/>;
 }
 
 export default MarketplaceTable;
diff --git a/client/admin/apps/PriceDisplay.js b/client/admin/apps/PriceDisplay.js
new file mode 100644
index 000000000000..266e1029ea0f
--- /dev/null
+++ b/client/admin/apps/PriceDisplay.js
@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { Box } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { formatPricingPlan, formatPrice } from '../../../app/apps/client/admin/helpers';
+
+const formatPriceAndPurchaseType = (purchaseType, pricingPlans, price) => {
+	if (purchaseType === 'subscription') {
+		const type = 'Subscription';
+		if (!pricingPlans || !Array.isArray(pricingPlans) || pricingPlans.length === 0) {
+			return { type, price: '-' };
+		}
+		return { type, price: formatPricingPlan(pricingPlans[0]) };
+	}
+
+	if (price > 0) {
+		return { type: 'Paid', price: formatPrice(price) };
+	}
+
+	return { type: 'Free', price: '-' };
+};
+
+export default function PriceDisplay({ purchaseType, pricingPlans, price, showType = true, ...props }) {
+	const t = useTranslation();
+
+	const { type, price: formatedPrice } = useMemo(() => formatPriceAndPurchaseType(purchaseType, pricingPlans, price), [purchaseType, pricingPlans, price]);
+	return <Box display='flex' flexDirection='column' {...props}>
+		{showType && <Box color='default' withTruncatedText>{t(type)}</Box>}
+		<Box color='hint' withTruncatedText>{!showType && type === 'Free' ? t(type) : formatedPrice}</Box>
+	</Box>;
+}
diff --git a/client/admin/apps/helpers.js b/client/admin/apps/helpers.js
new file mode 100644
index 000000000000..56b23c36b719
--- /dev/null
+++ b/client/admin/apps/helpers.js
@@ -0,0 +1,144 @@
+import { AppStatus } from '@rocket.chat/apps-engine/definition/AppStatus';
+import semver from 'semver';
+import toastr from 'toastr';
+
+import { t } from '../../../app/utils/client';
+
+export const appEnabledStatuses = [
+	AppStatus.AUTO_ENABLED,
+	AppStatus.MANUALLY_ENABLED,
+];
+
+const appErroredStatuses = [
+	AppStatus.COMPILER_ERROR_DISABLED,
+	AppStatus.ERROR_DISABLED,
+	AppStatus.INVALID_SETTINGS_DISABLED,
+	AppStatus.INVALID_LICENSE_DISABLED,
+];
+
+export const handleAPIError = (error) => {
+	console.error(error);
+	const message = (error.xhr && error.xhr.responseJSON && error.xhr.responseJSON.error) || error.message;
+	toastr.error(message);
+};
+
+export const warnStatusChange = (appName, status) => {
+	if (appErroredStatuses.includes(status)) {
+		toastr.error(t(`App_status_${ status }`), appName);
+		return;
+	}
+
+	toastr.info(t(`App_status_${ status }`), appName);
+};
+
+export const appButtonProps = ({
+	installed,
+	version,
+	marketplaceVersion,
+	isPurchased,
+	price,
+	purchaseType,
+	subscriptionInfo,
+}) => {
+	const canUpdate = installed
+		&& version && marketplaceVersion
+		&& semver.lt(version, marketplaceVersion);
+	if (canUpdate) {
+		return {
+			action: 'update',
+			icon: 'reload',
+			label: 'Update',
+		};
+	}
+
+	if (installed) {
+		return;
+	}
+
+	const canDownload = isPurchased;
+	if (canDownload) {
+		return {
+			action: 'install',
+			label: 'Install',
+		};
+	}
+
+	const canTrial = purchaseType === 'subscription' && !subscriptionInfo.status;
+	if (canTrial) {
+		return {
+			action: 'purchase',
+			label: 'Trial',
+		};
+	}
+
+	const canBuy = price > 0;
+	if (canBuy) {
+		return {
+			action: 'purchase',
+			label: 'Buy',
+		};
+	}
+
+	return {
+		action: 'purchase',
+		label: 'Install',
+	};
+};
+
+export const appStatusSpanProps = ({
+	installed,
+	status,
+	subscriptionInfo,
+}) => {
+	if (!installed) {
+		return;
+	}
+
+	const isFailed = appErroredStatuses.includes(status);
+	if (isFailed) {
+		return {
+			type: 'failed',
+			icon: 'warning',
+			label: status === AppStatus.INVALID_SETTINGS_DISABLED ? 'Config Needed' : 'Failed',
+		};
+	}
+
+	const isEnabled = appEnabledStatuses.includes(status);
+	if (!isEnabled) {
+		return {
+			type: 'warning',
+			icon: 'warning',
+			label: 'Disabled',
+		};
+	}
+
+	const isOnTrialPeriod = subscriptionInfo && subscriptionInfo.status === 'trialing';
+	if (isOnTrialPeriod) {
+		return {
+			icon: 'checkmark-circled',
+			label: 'Trial period',
+		};
+	}
+
+	return {
+		icon: 'checkmark-circled',
+		label: 'Enabled',
+	};
+};
+
+export const formatPrice = (price) => `\$${ Number.parseFloat(price).toFixed(2) }`;
+
+export const formatPricingPlan = ({ strategy, price, tiers = [] }) => {
+	const { perUnit = false } = (Array.isArray(tiers) && tiers.find((tier) => tier.price === price)) || {};
+
+	const pricingPlanTranslationString = [
+		'Apps_Marketplace_pricingPlan',
+		Array.isArray(tiers) && tiers.length > 0 && 'startingAt',
+		strategy,
+		perUnit && 'perUser',
+	].filter(Boolean).join('_');
+
+	return t(pricingPlanTranslationString, {
+		price: formatPrice(price),
+	});
+};
diff --git a/client/admin/apps/hooks/useAppInfo.js b/client/admin/apps/hooks/useAppInfo.js
new file mode 100644
index 000000000000..bbacb24192c9
--- /dev/null
+++ b/client/admin/apps/hooks/useAppInfo.js
@@ -0,0 +1,96 @@
+import { useState, useCallback, useEffect } from 'react';
+
+import { Apps } from '../../../../app/apps/client/orchestrator';
+import { AppEvents } from '../../../../app/apps/client/communication';
+import { handleAPIError } from '../helpers';
+
+
+const getBundledIn = async (bundledIn) => {
+	try {
+		bundledIn && await Promise.all(bundledIn.map((bundle, i) => Apps.getAppsOnBundle(bundle.bundleId).then((value) => {
+			bundle.apps = value.slice(0, 4);
+			bundledIn[i] = bundle;
+		})));
+	} catch (e) {
+		handleAPIError(e);
+	}
+
+	return bundledIn;
+};
+
+const attachMarketplaceInfo = async (app) => {
+	try {
+		console.log(app);
+		const {
+			categories,
+			isPurchased,
+			price,
+			bundledIn,
+			purchaseType,
+			subscriptionInfo,
+			version: marketplaceVersion,
+		} = await Apps.getLatestAppFromMarketplace(app.id, app.version);
+
+		const bundledInWithApps = await getBundledIn(bundledIn);
+		return { ...app, categories, isPurchased, price, purchaseType, subscriptionInfo, marketplaceVersion, bundledIn: bundledInWithApps };
+	} catch (error) {
+		if (error.xhr && error.xhr.status === 404) {
+			return;
+		}
+
+		handleAPIError(error);
+	}
+};
+
+const loadApp = async (id, setData) => {
+	let app;
+	try {
+		app = await Apps.getApp(id);
+
+		if (app) {
+			app.installed = true;
+
+			app = await attachMarketplaceInfo(app);
+
+			setData(app);
+			return;
+		}
+	} catch (error) {
+		console.log(error);
+	}
+
+	try {
+		app = await Apps.getAppFromMarketplace(id);
+	} catch (error) {
+		console.log(error);
+	}
+
+	const bundledIn = await getBundledIn(app.bundledIn);
+	setData({ ...app, installed: false, marketplaceVersion: app.version, bundledIn });
+};
+
+export const useAppInfo = (id) => {
+	const [data, setData] = useState({});
+
+	const handleChange = useCallback(() => {
+		loadApp(id, setData);
+	}, []);
+
+	useEffect(() => {
+		loadApp(id, setData);
+
+		Apps.getWsListener().registerListener(AppEvents.APP_ADDED, handleChange);
+		Apps.getWsListener().registerListener(AppEvents.APP_UPDATED, handleChange);
+		Apps.getWsListener().registerListener(AppEvents.APP_REMOVED, handleChange);
+		Apps.getWsListener().registerListener(AppEvents.APP_STATUS_CHANGE, handleChange);
+
+		() => {
+			Apps.getWsListener().unregisterListener(AppEvents.APP_ADDED, handleChange);
+			Apps.getWsListener().unregisterListener(AppEvents.APP_UPDATED, handleChange);
+			Apps.getWsListener().unregisterListener(AppEvents.APP_REMOVED, handleChange);
+			Apps.getWsListener().unregisterListener(AppEvents.APP_STATUS_CHANGE, handleChange);
+		};
+	}, []);
+
+	return data;
+};
diff --git a/client/admin/apps/hooks/useMarketplaceApps.js b/client/admin/apps/hooks/useMarketplaceApps.js
new file mode 100644
index 000000000000..6b58ea636378
--- /dev/null
+++ b/client/admin/apps/hooks/useMarketplaceApps.js
@@ -0,0 +1,122 @@
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+
+import { Apps } from '../../../../app/apps/client/orchestrator';
+import { AppEvents } from '../../../../app/apps/client/communication';
+import { handleAPIError } from '../helpers';
+
+/* TODO
+ *	If order is reversed and search is performed, the result will return in the wrong order, then refresh correctly
+ */
+export function useMarketplaceApps({ debouncedText, debouncedSort, current, itemsPerPage }) {
+	const [data, setData] = useState({});
+	const ref = useRef();
+	ref.current = data;
+
+	const getDataCopy = () => ref.current.slice(0);
+
+	const stringifiedData = JSON.stringify(data);
+
+	const handleAppAddedOrUpdated = useCallback(async (appId) => {
+		try {
+			const { status, version } = await Apps.getApp(appId);
+			const app = await Apps.getAppFromMarketplace(appId, version);
+			const updatedData = getDataCopy();
+			const index = updatedData.findIndex(({ id }) => id === appId);
+			updatedData[index] = {
+				...app,
+				installed: true,
+				status,
+				version,
+				marketplaceVersion: app.version,
+			};
+			setData(updatedData);
+		} catch (error) {
+			handleAPIError(error);
+		}
+	}, [stringifiedData, setData]);
+
+	const handleAppRemoved = useCallback((appId) => {
+		const updatedData = getDataCopy();
+		const app = updatedData.find(({ id }) => id === appId);
+		if (!app) {
+			return;
+		}
+		delete app.installed;
+		delete app.status;
+		app.version = app.marketplaceVersion;
+
+		setData(updatedData);
+	}, [stringifiedData, setData]);
+
+	const handleAppStatusChange = useCallback(({ appId, status }) => {
+		const updatedData = getDataCopy();
+		const app = updatedData.find(({ id }) => id === appId);
+
+		if (!app) {
+			return;
+		}
+		app.status = status;
+		setData(updatedData);
+	}, [stringifiedData, setData]);
+
+	useEffect(() => {
+		(async () => {
+			try {
+				const marketAndInstalledApps = await Promise.all([Apps.getAppsFromMarketplace(), Apps.getApps()]);
+				const appsData = marketAndInstalledApps[0].map((app) => {
+					const installedApp = marketAndInstalledApps[1].find(({ id }) => id === app.id);
+					if (!installedApp) {
+						return {
+							...app,
+							status: undefined,
+							marketplaceVersion: app.version,
+						};
+					}
+
+					return {
+						...app,
+						installed: true,
+						status: installedApp.status,
+						version: installedApp.version,
+						marketplaceVersion: app.version,
+					};
+				});
+
+				setData(appsData.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1)));
+
+				Apps.getWsListener().registerListener(AppEvents.APP_ADDED, handleAppAddedOrUpdated);
+				Apps.getWsListener().registerListener(AppEvents.APP_UPDATED, handleAppAddedOrUpdated);
+				Apps.getWsListener().registerListener(AppEvents.APP_REMOVED, handleAppRemoved);
+				Apps.getWsListener().registerListener(AppEvents.APP_STATUS_CHANGE, handleAppStatusChange);
+			} catch (e) {
+				handleAPIError(e);
+			}
+		})();
+
+		return () => {
+			Apps.getWsListener().unregisterListener(AppEvents.APP_ADDED, handleAppAddedOrUpdated);
+			Apps.getWsListener().unregisterListener(AppEvents.APP_UPDATED, handleAppAddedOrUpdated);
+			Apps.getWsListener().unregisterListener(AppEvents.APP_REMOVED, handleAppRemoved);
+			Apps.getWsListener().unregisterListener(AppEvents.APP_STATUS_CHANGE, handleAppStatusChange);
+		};
+	}, []);
+
+	const filteredValues = useMemo(() => {
+		if (data.length) {
+			let filtered = debouncedSort[1] === 'asc' ? data : data.reverse();
+
+			filtered = debouncedText ? filtered.filter((app) => app.name.toLowerCase().indexOf(debouncedText.toLowerCase()) > -1) : filtered;
+
+			const filteredLength = filtered.length;
+
+			const sliceStart = current > filteredLength ? 0 : current;
+
+			filtered = filtered.slice(sliceStart, current + itemsPerPage);
+
+			return [filtered, filteredLength];
+		}
+		return [null, 0];
+	}, [debouncedText, debouncedSort[1], stringifiedData, current, itemsPerPage]);
+
+	return [...filteredValues];
+}
diff --git a/client/admin/apps/hooks/useMenuOptions.js b/client/admin/apps/hooks/useMenuOptions.js
new file mode 100644
index 000000000000..2ef6efb332ae
--- /dev/null
+++ b/client/admin/apps/hooks/useMenuOptions.js
@@ -0,0 +1,151 @@
+import React, { useMemo, useCallback } from 'react';
+import { Box, Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { Apps } from '../../../../app/apps/client/orchestrator';
+import { Modal } from '../../../components/basic/Modal';
+import { appEnabledStatuses, warnStatusChange, handleAPIError } from '../helpers';
+import { IframeModal } from '../IframeModal';
+import { CloudLoginModal } from '../CloudLoginModal';
+
+const WarningModal = ({ text, confirmText, close, cancel, cancelText, confirm, ...props }) => {
+	const t = useTranslation();
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='danger' name='modal-warning' size={20}/>
+			<Modal.Title>{t('Are_you_sure')}</Modal.Title>
+			<Modal.Close onClick={close}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			{text}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button ghost onClick={cancel || close}>{cancelText || t('Cancel')}</Button>
+				<Button primary danger onClick={confirm}>{confirmText}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export const useMenuOptions = ({ app, setModal, isLoggedIn }) => {
+	const t = useTranslation();
+
+	const canAppBeSubscribed = app.purchaseType === 'subscription';
+	const isSubscribed = app.subscriptionInfo && ['active', 'trialing'].includes(app.subscriptionInfo.status);
+	const isAppEnabled = appEnabledStatuses.includes(app.status);
+
+	const closeModal = useCallback(() => setModal(null), []);
+
+	const handleEnable = useCallback(async () => {
+		try {
+			const effectiveStatus = await Apps.enableApp(app.id);
+			warnStatusChange(app.name, effectiveStatus);
+		} catch (error) {
+			handleAPIError(error);
+		}
+	}, [app.id]);
+
+	const handleViewLogs = useCallback(() => {}, []);
+
+	const handleSubscription = useCallback(async () => {
+		if (!isLoggedIn) {
+			setModal(<CloudLoginModal cancel={closeModal} />);
+			return;
+		}
+
+		let data;
+		try {
+			data = await Apps.buildExternalUrl(app.id, app.purchaseType, true);
+		} catch (error) {
+			handleAPIError(error);
+			return;
+		}
+
+		const confirm = async () => {
+			try {
+				await Apps.syncApp(app.id);
+			} catch (error) {
+				handleAPIError(error);
+			}
+		};
+
+		setModal(<IframeModal url={data.url} confirm={confirm} cancel={closeModal}/>);
+	}, [app.id, app.purchaseType]);
+
+	const handleDisable = useCallback(() => {
+		const confirm = async () => {
+			closeModal();
+			try {
+				const effectiveStatus = await Apps.disableApp(app.id);
+				warnStatusChange(app.name, effectiveStatus);
+			} catch (error) {
+				handleAPIError(error);
+			}
+		};
+		setModal(<WarningModal
+			close={closeModal}
+			confirm={confirm}
+			text={t('Apps_Marketplace_Deactivate_App_Prompt')}
+			confirmText={t('Yes')}
+		/>);
+	}, [app.id, app.name]);
+
+	const handleUninstall = useCallback(() => {
+		const uninstall = async () => {
+			closeModal();
+			try {
+				await Apps.uninstallApp(app.id);
+			} catch (error) {
+				handleAPIError(error);
+			}
+		};
+
+		if (isSubscribed) {
+			const confirm = async () => {
+				await handleSubscription();
+			};
+
+			setModal(<WarningModal
+				close={closeModal}
+				cancel={uninstall}
+				confirm={confirm}
+				text={t('Apps_Marketplace_Uninstall_Subscribed_App_Prompt')}
+				confirmText={t('Apps_Marketplace_Modify_App_Subscription')}
+				cancelText={t('Apps_Marketplace_Uninstall_Subscribed_App_Anyway')}
+			/>);
+		}
+
+		setModal(<WarningModal
+			close={closeModal}
+			confirm={uninstall}
+			text={t('Apps_Marketplace_Uninstall_App_Prompt')}
+			confirmText={t('Yes')}
+		/>);
+	}, [app.id, isSubscribed]);
+
+	const menuOptions = useMemo(() => ({
+		...canAppBeSubscribed && { subscribe: {
+			label: <><Icon name='card' size='x16' mie='x8'/>{t('Subscription')}</>,
+			action: handleSubscription,
+		} },
+		viewLogs: {
+			label: <><Icon name='list-alt' size='x16' mie='x8'/>{t('View_Logs')}</>,
+			action: handleViewLogs,
+		},
+		...isAppEnabled && { disable: {
+			label: <Box color='warning'><Icon mie='x4' name='ban' size='x16'/>{t('Disable')}</Box>,
+			action: handleDisable,
+		} },
+		...!isAppEnabled && { enable: {
+			label: <><Icon mie='x4' name='check' size='x16'/>{t('Enable')}</>,
+			action: handleEnable,
+		} },
+		uninstall: {
+			label: <Box color='danger'><Icon mie='x4' name='trash' size='x16'/>{t('Uninstall')}</Box>,
+			action: handleUninstall,
+		},
+	}), [canAppBeSubscribed, isAppEnabled, handleEnable]);
+
+	return menuOptions;
+};
diff --git a/client/admin/routes.js b/client/admin/routes.js
index a2228c36cfee..8cead2de4822 100644
--- a/client/admin/routes.js
+++ b/client/admin/routes.js
@@ -37,7 +37,7 @@ registerAdminRoute('/custom-sounds/:context?/:id?', {
 	lazyRouteComponent: () => import('./customSounds/AdminSoundsRoute'),
 });
 
-registerAdminRoute('/appsNew/:context?/:id?', {
+registerAdminRoute('/appsNew/:context?/:id?/:version?', {
 	name: 'admin-apps',
 	lazyRouteComponent: () => import('./apps/AppsRoute'),
 });
diff --git a/client/hooks/useResizeInlineBreakpoint.js b/client/hooks/useResizeInlineBreakpoint.js
new file mode 100644
index 000000000000..b54431a4388e
--- /dev/null
+++ b/client/hooks/useResizeInlineBreakpoint.js
@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+
+export const useResizeInlineBreakpoint = (sizes = [], debounceDelay = 0) => {
+	const { ref, borderBoxSize } = useResizeObserver({ debounceDelay });
+	const inlineSize = borderBoxSize ? borderBoxSize.inlineSize : 0;
+	sizes = useMemo(() => sizes.map((current) => (inlineSize ? inlineSize > current : true)), [inlineSize]);
+	return [ref, ...sizes];
+};