From a915466f30d7b66d7f13bbaa9df5d199facfdaf8 Mon Sep 17 00:00:00 2001
From: Vicente Canales <vicente@canales.io>
Date: Fri, 4 Sep 2020 13:15:23 -0400
Subject: [PATCH] Mirror WordPress plugin install text for blocks

---
 .../downloadable-block-info/index.js          | 32 +++++++++-----
 .../downloadable-block-info/test/index.js     | 44 +++++++++++++++++++
 2 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 packages/block-directory/src/components/downloadable-block-info/test/index.js

diff --git a/packages/block-directory/src/components/downloadable-block-info/index.js b/packages/block-directory/src/components/downloadable-block-info/index.js
index fb932e77ba0c18..aabfcfc050b243 100644
--- a/packages/block-directory/src/components/downloadable-block-info/index.js
+++ b/packages/block-directory/src/components/downloadable-block-info/index.js
@@ -1,16 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Fragment } from '@wordpress/element';
 import { Icon, update, chartLine } from '@wordpress/icons';
 
 function DownloadableBlockInfo( {
-	description,
 	activeInstalls,
+	description,
 	humanizedUpdated,
 } ) {
+	let activeInstallsString;
+
+	if ( activeInstalls > 1000000 ) {
+		activeInstallsString = sprintf(
+			/* translators: %d: number of active installations. */
+			__( '%d+ Million active installations' ),
+			Math.floor( activeInstalls / 1000000 )
+		);
+	} else if ( 0 === activeInstalls ) {
+		activeInstallsString = __( 'Less than 10 active installations' );
+	} else {
+		activeInstallsString = sprintf(
+			/* translators: %d: number of active installations. */
+			__( '%d+ active installations' ),
+			activeInstalls
+		);
+	}
+
 	return (
 		<Fragment>
 			<p className="block-directory-downloadable-block-info__content">
@@ -21,15 +39,7 @@ function DownloadableBlockInfo( {
 					className="block-directory-downloadable-block-info__icon"
 					icon={ chartLine }
 				/>
-				{ sprintf(
-					/* translators: %s: number of active installations. */
-					_n(
-						'%d active installation',
-						'%d active installations',
-						activeInstalls
-					),
-					activeInstalls
-				) }
+				{ activeInstallsString }
 			</div>
 			<div className="block-directory-downloadable-block-info__meta">
 				<Icon
diff --git a/packages/block-directory/src/components/downloadable-block-info/test/index.js b/packages/block-directory/src/components/downloadable-block-info/test/index.js
new file mode 100644
index 00000000000000..e5972f1e619914
--- /dev/null
+++ b/packages/block-directory/src/components/downloadable-block-info/test/index.js
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import DownloadableBlockInfo from '../index';
+
+describe( 'DownloadableBlockInfo', () => {
+	const metaSelector = '.block-directory-downloadable-block-info__meta';
+	describe( 'Active Installs Count', () => {
+		it( 'should display the correct count for over a million installs', () => {
+			const wrapper = shallow(
+				<DownloadableBlockInfo activeInstalls={ 10000000 } />
+			);
+
+			const count = wrapper.find( metaSelector ).first().text();
+
+			expect( count ).toContain( '10+ Million' );
+		} );
+
+		it( 'should display the correct count for 0 installs', () => {
+			const wrapper = shallow(
+				<DownloadableBlockInfo activeInstalls={ 0 } />
+			);
+
+			const count = wrapper.find( metaSelector ).first().text();
+
+			expect( count ).toContain( 'Less than 10 active installations' );
+		} );
+
+		it( 'should display the correct count for 10+ and less than a Million installs', () => {
+			const wrapper = shallow(
+				<DownloadableBlockInfo activeInstalls={ 100 } />
+			);
+
+			const count = wrapper.find( metaSelector ).first().text();
+
+			expect( count ).toContain( '100+ active installations' );
+		} );
+	} );
+} );