Search dashboard: add scaffolding for Record Meter (#22497)

Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>

projects/packages/search/changelog/add-record-meter-scaffolding

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Search Dashboard: add scaffolding for new record meter

projects/packages/search/composer.json

@@ -72,7 +72,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-search/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-master": "0.6.x-dev"
+			"dev-master": "0.7.x-dev"
 		},
 		"version-constants": {
 			"JETPACK_SEARCH_PKG__VERSION": "search.php"

projects/packages/search/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jetpack-search",
-	"version": "0.6.1-alpha",
+	"version": "0.7.0-alpha",
 	"description": "Package for Jetpack Search products",
 	"main": "main.js",
 	"directories": {

projects/packages/search/search.php

@@ -7,7 +7,7 @@
 
 namespace Automattic\Jetpack\Search;
 
-define( 'JETPACK_SEARCH_PKG__VERSION', '0.6.1-alpha' );
+define( 'JETPACK_SEARCH_PKG__VERSION', '0.7.0-alpha' );
 define( 'JETPACK_SEARCH_PKG__DIR', __DIR__ . '/' );
 define( 'JETPACK_SEARCH_PKG__SLUG', 'search' );
 

projects/packages/search/src/dashboard/class-initial-state.php

@@ -23,7 +23,7 @@ class Initial_State {
 	protected $connection_manager;
 
 	/**
-	 * Search Moduel Control
+	 * Search Module Control
 	 *
 	 * @var Module_Control
 	 */
@@ -81,6 +81,8 @@ public function get_initial_state() {
 				'search'                 => $this->module_control->is_active(),
 				'instant_search_enabled' => $this->module_control->is_instant_search_enabled(),
 			),
+			// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			'features'        => array_map( 'sanitize_text_field', explode( ',', $_GET['features'] ) ),
 		);
 	}
 

projects/packages/search/src/dashboard/components/dashboard/index.jsx

@@ -19,6 +19,7 @@ import ModuleControl from 'components/module-control';
 import MockedSearch from 'components/mocked-search';
 import { STORE_ID } from 'store';
 import NoticesList from 'components/global-notices';
+import RecordMeter from 'components/record-meter';
 
 import 'scss/rna-styles.scss';
 import './style.scss';
@@ -169,6 +170,10 @@ export default function SearchDashboard() {
 		);
 	};
 
+	const isRecordMeterEnabled = useSelect( select =>
+		select( STORE_ID ).isFeatureEnabled( 'record-meter' )
+	);
+
 	return (
 		<div className="jp-search-dashboard-page">
 			{ isLoading && (
@@ -179,6 +184,7 @@ export default function SearchDashboard() {
 					{ renderHeader() }
 					{ renderMockedSearchInterface() }
 					{ renderModuleControl() }
+					{ isRecordMeterEnabled && <RecordMeter /> }
 					{ renderFooter() }
 				</Fragment>
 			) }

projects/packages/search/src/dashboard/components/record-meter/index.jsx

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Generate Record Meter showing how many records the user has indexed
+ *
+ * @returns {React.Component} RecordMeter React component
+ */
+export default function RecordMeter() {
+	return (
+		<div className="jp-search-record-meter jp-search-dashboard-wrap">
+			<div className="jp-search-dashboard-row">
+				<div className="jp-search-record-meter__title lg-col-span-8 md-col-span-6 sm-col-span-4">
+					<h2>{ __( 'Your search records', 'jetpack-search-pkg' ) }</h2>
+				</div>
+				<div className="lg-col-span-2 md-col-span-1 sm-col-span-0"></div>
+			</div>
+		</div>
+	);
+}

projects/packages/search/src/dashboard/store/reducer/feature.js

@@ -0,0 +1,5 @@
+const features = ( state = [] ) => {
+	return state;
+};
+
+export default features;

projects/packages/search/src/dashboard/store/reducer/index.js

@@ -10,13 +10,15 @@ import siteData from './site-data';
 import userData from './user-data';
 import jetpackSettings from './jetpack-settings';
 import sitePlan from './site-plan';
+import features from './feature';
 import notices from 'components/global-notices/store/reducer';
 
 const reducer = combineReducers( {
 	siteData,
 	jetpackSettings,
 	sitePlan,
 	userData,
+	features,
 	notices,
 } );
 

projects/packages/search/src/dashboard/store/selectors/feature.js

@@ -0,0 +1,7 @@
+const featureSelectors = {
+	isFeatureEnabled: ( state, feature ) => {
+		return Array.isArray( state.features ) && state.features.includes( feature );
+	},
+};
+
+export default featureSelectors;

projects/packages/search/src/dashboard/store/selectors/index.js

@@ -6,13 +6,15 @@ import jetpackSettingSelectors from './jetpack-settings';
 import sitePlanSelectors from './site-plan';
 import userDataSelectors from './user-data';
 import noticeSelectors from 'components/global-notices/store/selectors';
+import featureSelectors from './feature';
 
 const selectors = {
 	...siteDataSelectors,
 	...jetpackSettingSelectors,
 	...sitePlanSelectors,
 	...userDataSelectors,
 	...noticeSelectors,
+	...featureSelectors,
 };
 
 export default selectors;

projects/plugins/jetpack/changelog/add-record-meter-scaffolding

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated package dependencies.

projects/plugins/jetpack/composer.json

@@ -37,7 +37,7 @@
 		"automattic/jetpack-plugins-installer": "0.1.x-dev",
 		"automattic/jetpack-redirect": "1.7.x-dev",
 		"automattic/jetpack-roles": "1.4.x-dev",
-		"automattic/jetpack-search": "0.6.x-dev",
+		"automattic/jetpack-search": "0.7.x-dev",
 		"automattic/jetpack-status": "1.10.x-dev",
 		"automattic/jetpack-sync": "1.29.x-dev",
 		"automattic/jetpack-terms-of-service": "1.9.x-dev",