Update delay in posting UI to show WP Cron warning as alert (#196)

* Update delay in posting UI to show WP Cron warning as alert

* Add debounce to Rule values change

* Update settings-page-p2tg.spec.ts

.changeset/red-otters-fold.md

@@ -0,0 +1,5 @@
+---
+"wptelegram": patch
+---
+
+Updated delay UI to show WP Cron warning as alert

packages/js/shared-ui/package.json

@@ -15,7 +15,8 @@
 	},
 	"peerDependencies": {
 		"react": "^18.3.1",
-		"react-dom": "^18.3.1"
+		"react-dom": "^18.3.1",
+		"use-debounce": "^10.0.4"
 	},
 	"devDependencies": {
 		"@types/node": "^22.7.7",

packages/js/shared-ui/wptelegram/delay-in-posting.tsx

@@ -1,5 +1,8 @@
+import { useWatch } from '@wpsocio/form';
 import { __ } from '@wpsocio/i18n';
+import { Warning } from '@wpsocio/ui-components/icons/index.jsx';
 import { FormControl } from '@wpsocio/ui-components/ui/form.js';
+import { Alert } from '@wpsocio/ui-components/wrappers/alert.jsx';
 import { Input } from '@wpsocio/ui-components/wrappers/input.js';
 import { prefixName } from '@wpsocio/utilities/misc.js';
 import { FormField } from '../form/form-field.js';
@@ -15,6 +18,8 @@ export const DelayInPosting: React.FC<DelayInPostingProps> = ({
 	is_wp_cron_disabled,
 	prefix,
 }) => {
+	const delay = Number(useWatch({ name: prefixName('delay', prefix) }));
+
 	return (
 		<FormField
 			name={prefixName('delay', prefix)}
@@ -23,11 +28,16 @@ export const DelayInPosting: React.FC<DelayInPostingProps> = ({
 					label={getFieldLabel('delay')}
 					description={__('The delay starts after the post gets published.')}
 					afterMessage={
-						is_wp_cron_disabled && (
-							<p className="text-destructive">
+						is_wp_cron_disabled && delay ? (
+							<Alert
+								type="error"
+								title={__('Warning')}
+								className="max-w-max"
+								icon={<Warning size="16" />}
+							>
 								{__('WordPress cron should not be disabled!')}
-							</p>
-						)
+							</Alert>
+						) : null
 					}
 				>
 					<FormControl className="max-w-[100px]">

packages/js/shared-ui/wptelegram/rules/rule-set-values.tsx

@@ -7,6 +7,7 @@ import { ReactAsyncSelect } from '@wpsocio/ui-components/wrappers/react-select.j
 import type { OptionsType } from '@wpsocio/ui-components/wrappers/types.js';
 import { usePrevious } from '@wpsocio/utilities/hooks/usePrevious.js';
 import { useCallback, useEffect, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import { FormField } from '../../form/form-field.js';
 import type { Rule } from './types.js';
 import { useFetchRuleValues } from './use-fetch-rule-values.js';
@@ -83,7 +84,7 @@ export function RuleSetValues({
 		setDefaultValues(param);
 	}, []);
 
-	const loadValuesOptions = useCallback(
+	const loadValuesOptions = useDebouncedCallback(
 		(inputValue: string, callback: (result: OptionsType) => void) => {
 			fetchRuleValues({
 				param,
@@ -94,7 +95,7 @@ export function RuleSetValues({
 				},
 			});
 		},
-		[fetchRuleValues, param],
+		1000,
 	);
 
 	return (

test/e2e/specs/wptelegram/settings-page-p2tg.spec.ts

@@ -319,9 +319,10 @@ test.describe('Settings > P2TG', () => {
 
 		const combobox = page.getByRole('combobox', { name: 'Rule values' });
 
-		await combobox.fill('ABC');
-
-		await actions.waitForApiResponse(endpoint, { search: 'ABC' });
+		await Promise.all([
+			combobox.fill('ABC'),
+			actions.waitForApiResponse(endpoint, { search: 'ABC' }),
+		]);
 
 		const listbox = page.getByRole('listbox');
 
@@ -336,9 +337,10 @@ test.describe('Settings > P2TG', () => {
 		// Let us select an option
 		await options.filter({ hasText: 'ABC Cat → ABC Child cat' }).click();
 
-		await combobox.fill('ABC');
-
-		await actions.waitForApiResponse(endpoint, { search: 'ABC' });
+		await Promise.all([
+			combobox.fill('ABC'),
+			actions.waitForApiResponse(endpoint, { search: 'ABC' }),
+		]);
 
 		await options.waitFor();