Regression: Subscription menu not appearing for non installed but sub…

…scribed apps (#25627) * fix: 🐛 Fix subscribe menu option not appearing Fixed a problem on which the AppMenu component did not appear for apps that had an active subscription but weren't installed, now the rendering of the component is also based on the isSubscribed flag, and the appearance of the uninstall and enable/disable options are based on the app.installed flag. * fix: 🐛 Fix AppMenu overflow error on Marketplace/AppRow Fixed a visual error on which the AppMenu component would overflow the right side of its container and have part of itself hidden. * fix: 🐛 FIx isSubscribed wrongful typing Fixed an oversight where I've typed isSubscribed as string instead of boolean
RocketChat · May 25, 2022 · ca4c020 · ca4c020
1 parent 574e82d
commit ca4c020
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 33 deletions.
diff --git a/apps/meteor/client/views/admin/apps/AppDetailsHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsHeader.tsx
@@ -11,7 +11,7 @@ import { App } from './types';
 
 const AppDetailsHeader = ({ app }: { app: App }): ReactElement => {
 	const t = useTranslation();
-	const { iconFileData, name, author, version, iconFileContent, installed, modifiedAt, bundledIn, description } = app;
+	const { iconFileData, name, author, version, iconFileContent, installed, isSubscribed, modifiedAt, bundledIn, description } = app;
 	const lastUpdated = modifiedAt && formatDistanceStrict(new Date(modifiedAt), new Date(), { addSuffix: false });
 
 	return (
@@ -29,7 +29,7 @@ const AppDetailsHeader = ({ app }: { app: App }): ReactElement => {
 					<Box display='flex' flexDirection='row' alignItems='center'>
 						<AppStatus app={app} installed={installed} isAppDetailsPage={true} mie='x8' />
 					</Box>
-					{installed && <AppMenu app={app} />}
+					{(installed || isSubscribed) && <AppMenu app={app} />}
 				</Box>
 				<Box display='flex' flexDirection='row' color='hint' alignItems='center'>
 					<Box fontScale='p2m' mie='x16'>

diff --git a/apps/meteor/client/views/admin/apps/AppMenu.js b/apps/meteor/client/views/admin/apps/AppMenu.js
@@ -124,39 +124,43 @@ function AppMenu({ app, ...props }) {
 					action: handleSubscription,
 				},
 			}),
-			...(isAppEnabled && {
-				disable: {
+			...(app.installed &&
+				isAppEnabled && {
+					disable: {
+						label: (
+							<Box color='warning'>
+								<Icon name='ban' size='x16' marginInlineEnd='x4' />
+								{t('Disable')}
+							</Box>
+						),
+						action: handleDisable,
+					},
+				}),
+			...(app.installed &&
+				!isAppEnabled && {
+					enable: {
+						label: (
+							<Box>
+								<Icon name='check' size='x16' marginInlineEnd='x4' />
+								{t('Enable')}
+							</Box>
+						),
+						action: handleEnable,
+					},
+				}),
+			...(app.installed && {
+				uninstall: {
 					label: (
-						<Box color='warning'>
-							<Icon name='ban' size='x16' marginInlineEnd='x4' />
-							{t('Disable')}
+						<Box color='danger'>
+							<Icon name='trash' size='x16' marginInlineEnd='x4' />
+							{t('Uninstall')}
 						</Box>
 					),
-					action: handleDisable,
+					action: handleUninstall,
 				},
 			}),
-			...(!isAppEnabled && {
-				enable: {
-					label: (
-						<Box>
-							<Icon name='check' size='x16' marginInlineEnd='x4' />
-							{t('Enable')}
-						</Box>
-					),
-					action: handleEnable,
-				},
-			}),
-			uninstall: {
-				label: (
-					<Box color='danger'>
-						<Icon name='trash' size='x16' marginInlineEnd='x4' />
-						{t('Uninstall')}
-					</Box>
-				),
-				action: handleUninstall,
-			},
 		}),
-		[canAppBeSubscribed, t, handleSubscription, isAppEnabled, handleDisable, handleEnable, handleUninstall],
+		[canAppBeSubscribed, t, handleSubscription, app.installed, isAppEnabled, handleDisable, handleEnable, handleUninstall],
 	);
 
 	return <Menu options={menuOptions} placement='bottom-start' {...props} />;

diff --git a/apps/meteor/client/views/admin/apps/AppRow.tsx b/apps/meteor/client/views/admin/apps/AppRow.tsx
@@ -94,8 +94,8 @@ const AppRow: FC<AppRowProps> = ({ medium, ...props }) => {
 			)}
 			<Table.Cell withTruncatedText>
 				<Box display='flex' flexDirection='row' alignItems='center' marginInline='neg-x8' onClick={preventClickPropagation}>
-					<AppStatus app={props} showStatus={isStatusVisible} isAppDetailsPage={false} marginInline='x8' />
-					{installed && <AppMenu app={props} invisible={!isStatusVisible} marginInline='x8' />}
+					<AppStatus app={props} showStatus={isStatusVisible} isAppDetailsPage={false} mis='x4' />
+					{installed && <AppMenu app={props} invisible={!isStatusVisible} mis='x4' />}
 				</Box>
 			</Table.Cell>
 		</Table.Row>

diff --git a/apps/meteor/client/views/admin/apps/MarketplaceRow.tsx b/apps/meteor/client/views/admin/apps/MarketplaceRow.tsx
@@ -27,6 +27,7 @@ const MarketplaceRow: FC<MarketplaceRowProps> = ({ medium, large, ...props }) =>
 		marketplaceVersion,
 		iconFileContent,
 		installed,
+		isSubscribed,
 	} = props;
 	const t = useTranslation();
 
@@ -103,8 +104,8 @@ const MarketplaceRow: FC<MarketplaceRowProps> = ({ medium, large, ...props }) =>
 			)}
 			<Table.Cell withTruncatedText>
 				<Box display='flex' flexDirection='row' alignItems='center' marginInline='neg-x8' onClick={preventClickPropagation}>
-					<AppStatus app={props} showStatus={isStatusVisible} isAppDetailsPage={false} marginInline='x8' />
-					{installed && <AppMenu app={props} invisible={!isStatusVisible} marginInline='x8' />}
+					<AppStatus app={props} showStatus={isStatusVisible} isAppDetailsPage={false} mis='x4' />
+					{(installed || isSubscribed) && <AppMenu app={props} invisible={!isStatusVisible} mis='x4' />}
 				</Box>
 			</Table.Cell>
 		</Table.Row>

diff --git a/packages/core-typings/src/Apps.ts b/packages/core-typings/src/Apps.ts
@@ -49,6 +49,7 @@ export type App = {
 	iconFileContent: string;
 	installed?: boolean;
 	isEnterpriseOnly?: boolean;
+	isSubscribed: boolean;
 	bundledIn: {
 		bundleId: string;
 		bundleName: string;