feat: New Private apps limitations (#33316)

* feat: New empty state for upgrading private Apps

* chore: Change Marketplace info modal text (#33239)

* feat: New tooltips and color behavior for private apps bar (#33243)

* feat: New tooltips and behavior for private apps bar

* Create brown-pants-press.md

* feat: new modal on Private Apps install (#33275)

* feat: new modal on Private Apps install

* add more variations

* Create eleven-rockets-hug.md

* chore: change grandfathered modal text (#33291)

* chore: Use apps provider to check maxPrivateApps

* fix: adds minor fixes to UI and changes requested on review

* Update changeset

* Replace negative boolean

* Refactor `AppsUsageCard`

* Add unit test for `AppsUsageCard`

* Add unit test for `PrivateEmptyState`

* Add unit test for `EnabledAppsCount`

* Move tooltip logic away from `useAppsCountQuery`

---------

Co-authored-by: Lucas Pelegrino <lucas.pelegrino@icloud.com>
Co-authored-by: Tasso <tasso.evangelista@rocket.chat>

apps/meteor/client/views/marketplace/components/EnabledAppsCount.tsx

@@ -31,6 +31,20 @@ const EnabledAppsCount = ({
 
 	const percentage = limit === 0 ? 100 : Math.round((enabled * 100) / limit);
 
+	const variant = useMemo(() => {
+		if (enabled + 1 === limit) {
+			return 'warning';
+		}
+
+		if (limit === 0 || enabled >= limit) {
+			return 'danger';
+		}
+
+		return 'success';
+	}, [enabled, limit]);
+
+	const percentage = limit === 0 ? 100 : Math.round((enabled * 100) / limit);
+
 	return (
 		<GenericResourceUsage
 			title={context === 'private' ? t('Private_Apps_Count_Enabled', { count: enabled }) : t('Apps_Count_Enabled', { count: enabled })}

apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { GenericResourceUsageSkeleton } from '../../../components/GenericResourceUsage';
 import { PageHeader } from '../../../components/Page';
+import UpgradeButton from '../../admin/subscription/components/UpgradeButton';
 import UnlimitedAppsUpsellModal from '../UnlimitedAppsUpsellModal';
 import { useAppsCountQuery } from '../hooks/useAppsCountQuery';
 import { usePrivateAppsEnabled } from '../hooks/usePrivateAppsEnabled';
@@ -19,7 +20,7 @@ const MarketplaceHeader = ({ title, unsupportedVersion }: { title: string; unsup
 	const context = (useRouteParameter('context') || 'explore') as 'private' | 'explore' | 'installed' | 'premium' | 'requested';
 	const route = useRoute('marketplace');
 	const setModal = useSetModal();
-	const result = useAppsCountQuery(context);
+	const { isLoading, isError, isSuccess, data } = useAppsCountQuery(context);
 
 	const privateAppsEnabled = usePrivateAppsEnabled();
 
@@ -37,7 +38,16 @@ const MarketplaceHeader = ({ title, unsupportedVersion }: { title: string; unsup
 		route.push({ context, page: 'install' });
 	};
 
-	if (result.isError) {
+	const handleClickPrivate = () => {
+		if (!privateAppsEnabled) {
+			setModal(<PrivateAppInstallModal onClose={() => setModal(null)} onProceed={handleProceed} />);
+			return;
+		}
+
+		route.push({ context, page: 'install' });
+	};
+
+	if (isError) {
 		return null;
 	}