UI changes for updating the block template logging threshold

plugins/woocommerce-beta-tester/src/tools/commands/index.js

@@ -3,6 +3,10 @@
  */
 import { TriggerCronJob, TRIGGER_CRON_ACTION_NAME } from './trigger-cron';
 import { DisableEmail } from './disable-email';
+import {
+	UpdateBlockTemplateLoggingThreshold,
+	UPDATE_BLOCK_TEMPLATE_LOGGING_THRESHOLD_ACTION_NAME,
+} from './update-block-template-logging-threshold';
 import {
 	TriggerUpdateCallbacks,
 	TRIGGER_UPDATE_CALLBACKS_ACTION_NAME,
@@ -69,4 +73,9 @@ export default [
 		description: 'Resets Customize Your Store changes.',
 		action: 'resetCustomizeYourStore',
 	},
+	{
+		command: 'Update block template logging threshold',
+		description: <UpdateBlockTemplateLoggingThreshold />,
+		action: UPDATE_BLOCK_TEMPLATE_LOGGING_THRESHOLD_ACTION_NAME,
+	},
 ];

plugins/woocommerce-beta-tester/src/tools/commands/update-block-template-logging-threshold.tsx

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+
+import { SelectControl } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore no types
+// eslint-disable-next-line @woocommerce/dependency-group
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore no types
+// eslint-disable-next-line @woocommerce/dependency-group
+import { STORE_KEY } from '../data/constants';
+
+export const UPDATE_BLOCK_TEMPLATE_LOGGING_THRESHOLD_ACTION_NAME =
+	'updateBlockTemplateLoggingThreshold';
+
+interface LoggingLevel {
+	label: string;
+	value: string;
+}
+
+export const UpdateBlockTemplateLoggingThreshold = () => {
+	const { loggingLevels, threshold, isLoading } = useSelect(
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore no types
+		( select ) => {
+			const { getLoggingLevels, getBlockTemplateLoggingThreshold } =
+				select( STORE_KEY );
+
+			const retrievedLoggingLevels = getLoggingLevels();
+			const retrievedThreshold = getBlockTemplateLoggingThreshold();
+
+			return {
+				loggingLevels: retrievedLoggingLevels,
+				threshold: retrievedThreshold,
+				isLoading: ! retrievedLoggingLevels || ! retrievedThreshold,
+			};
+		}
+	);
+
+	const [ newThreshold, setNewThreshold ] = useState( threshold );
+
+	const { updateCommandParams } = useDispatch( STORE_KEY );
+
+	function onThresholdChange( selectedThreshold: string ) {
+		setNewThreshold( selectedThreshold );
+		updateCommandParams(
+			UPDATE_BLOCK_TEMPLATE_LOGGING_THRESHOLD_ACTION_NAME,
+			{
+				threshold: selectedThreshold,
+			}
+		);
+	}
+
+	function getOptions() {
+		return loggingLevels.map( ( loggingLevel: LoggingLevel ) => {
+			return {
+				label: loggingLevel.label,
+				value: loggingLevel.value,
+			};
+		} );
+	}
+
+	useEffect( () => {
+		setNewThreshold( threshold );
+	}, [ threshold ] );
+
+	return (
+		<div>
+			{ isLoading ? (
+				<p>Loading...</p>
+			) : (
+				<SelectControl
+					label="Threshold"
+					onChange={ onThresholdChange }
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore labelPosition prop exists
+					labelPosition="side"
+					options={ getOptions() }
+					value={ newThreshold }
+				/>
+			) }
+		</div>
+	);
+};

plugins/woocommerce-beta-tester/src/tools/data/action-types.js

@@ -8,6 +8,11 @@ const TYPES = {
 	SET_CRON_JOBS: 'SET_CRON_JOBS',
 	IS_EMAIL_DISABLED: 'IS_EMAIL_DISABLED',
 	SET_DB_UPDATE_VERSIONS: 'SET_DB_UPDATE_VERSIONS',
+	SET_LOGGING_LEVELS: 'SET_LOGGING_LEVELS',
+	SET_BLOCK_TEMPLATE_LOGGING_THRESHOLD:
+		'SET_BLOCK_TEMPLATE_LOGGING_THRESHOLD',
+	UPDATE_BLOCK_TEMPLATE_LOGGING_THRESHOLD:
+		'UPDATE_BLOCK_TEMPLATE_LOGGING_THRESHOLD',
 };
 
 export default TYPES;

plugins/woocommerce-beta-tester/src/tools/data/actions.js

@@ -229,3 +229,31 @@ export function* resetCustomizeYourStore() {
 		} );
 	} );
 }
+
+export function setLoggingLevels( loggingLevels ) {
+	return {
+		type: TYPES.SET_LOGGING_LEVELS,
+		loggingLevels,
+	};
+}
+
+export function setBlockTemplateLoggingThreshold(
+	blockTemplateLoggingThreshold
+) {
+	return {
+		type: TYPES.SET_BLOCK_TEMPLATE_LOGGING_THRESHOLD,
+		blockTemplateLoggingThreshold,
+	};
+}
+
+export function* updateBlockTemplateLoggingThreshold( params ) {
+	yield runCommand( 'Update block template logging threshold', function* () {
+		yield apiFetch( {
+			path:
+				API_NAMESPACE +
+				'/tools/update-block-template-logging-threshold/v1',
+			method: 'POST',
+			data: params,
+		} );
+	} );
+}

plugins/woocommerce-beta-tester/src/tools/data/reducer.js

@@ -12,6 +12,8 @@ const DEFAULT_STATE = {
 	params: [],
 	status: '',
 	dbUpdateVersions: [],
+	loggingLevels: null,
+	blockTemplateLoggingThreshold: null,
 };
 
 const reducer = ( state = DEFAULT_STATE, action ) => {
@@ -80,6 +82,17 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 				...state,
 				dbUpdateVersions: action.versions,
 			};
+		case TYPES.SET_LOGGING_LEVELS:
+			return {
+				...state,
+				loggingLevels: action.loggingLevels,
+			};
+		case TYPES.SET_BLOCK_TEMPLATE_LOGGING_THRESHOLD:
+			return {
+				...state,
+				blockTemplateLoggingThreshold:
+					action.blockTemplateLoggingThreshold,
+			};
 		default:
 			return state;
 	}

plugins/woocommerce-beta-tester/src/tools/data/resolvers.js

@@ -8,9 +8,11 @@ import { apiFetch } from '@wordpress/data-controls';
  */
 import { API_NAMESPACE } from './constants';
 import {
+	setBlockTemplateLoggingThreshold,
 	setCronJobs,
 	setDBUpdateVersions,
 	setIsEmailDisabled,
+	setLoggingLevels,
 } from './actions';
 
 export function* getCronJobs() {
@@ -55,3 +57,31 @@ export function* getIsEmailDisabled() {
 		throw new Error( error );
 	}
 }
+
+export function* getLoggingLevels() {
+	const path = `${ API_NAMESPACE }/tools/get-logging-levels/v1`;
+
+	try {
+		const response = yield apiFetch( {
+			path,
+			method: 'GET',
+		} );
+		yield setLoggingLevels( response );
+	} catch ( error ) {
+		throw new Error( error );
+	}
+}
+
+export function* getBlockTemplateLoggingThreshold() {
+	const path = `${ API_NAMESPACE }/tools/get-block-template-logging-threshold/v1`;
+
+	try {
+		const response = yield apiFetch( {
+			path,
+			method: 'GET',
+		} );
+		yield setBlockTemplateLoggingThreshold( response );
+	} catch ( error ) {
+		throw new Error( error );
+	}
+}

plugins/woocommerce-beta-tester/src/tools/data/selectors.js

@@ -25,3 +25,11 @@ export function getIsEmailDisabled( state ) {
 export function getDBUpdateVersions( state ) {
 	return state.dbUpdateVersions;
 }
+
+export function getLoggingLevels( state ) {
+	return state.loggingLevels;
+}
+
+export function getBlockTemplateLoggingThreshold( state ) {
+	return state.blockTemplateLoggingThreshold;
+}