Add checkValidation and isValid methods to window.podsDFV

[Shelob9]

Description

Add checkValidation and isValid methods to window.podsDFV

What we need:

• The two new methods
• A way to get the validation messages in podsDFV
  • Moving validation state out of useValidation hook's local state, and into a store will with action and selector can solve for this.

  • pods/ui/js/dfv/src/hooks/useValidation.js

    Lines 4 to 5 in 6f79abd

    	const [ validationRules, setValidationRules ] = useState( defaultRules );
    	const [ validationMessages, setValidationMessages ] = useState( [] );

• A way to trigger validation of Pods fields without submitting form.
  • Once in store, add a needsRevalidate bool in store. Make it a dependency of this effect.

  • pods/ui/js/dfv/src/hooks/useValidation.js

    Lines 7 to 25 in 6f79abd

    	useEffect( () => {
    	const newMessages = [];
    	validationRules.forEach( ( rule ) => {
    	if ( ! rule.condition() ) {
    	return;
    	}
    	try {
    	rule.rule( value );
    	} catch ( error ) {
    	if ( typeof error === 'string' ) {
    	newMessages.push( error );
    	}
    	}
    	} );
    	setValidationMessages( newMessages );
    	}, [ value ] );

• prevent save when fields are invalid.

Related GitHub issue(s)

Fixes #6898

Testing

• Make pod have invalid state
• run widow.PodsDFV.formIsValid() in console, expect false
• run window.PodsDFV.getValidationMessages() in console, expect to see messages
• Make pod have valid state
• run widow.PodsDFV.formIsValid() in console, expect true
• run window.PodsDFV.getValidationMessages() in console, expect not to see messages

Changelog text for these changes

• Added: New getValidationMessages method to window.podsDFV
• Added: New formIsValid method to window.podsDFV
• Fixed: Notice component, with two messages, used the same key, generating React warning.

PR checklist

• I have tested my own code to confirm it works as I intended.
• My code follows the WordPress Coding Standards.
• My code follows the WordPress Inline Documentation Standards.
• My code includes automated tests for PHP and/or JS (if applicable).

[what-the-diff]

PR Summary

• Updated Dependency Version
  The version of a dependency crucial for the functioning of our application has been updated. This improves the reliability and performance of our application's UI.

• Added 'storeKey'
  A key named storeKey has been added to several components and objects in our application. This enables better data tracking and state management, leading to a more effective and reliable application.

• Dynamic 'key' Prop in 'Notice' Component
  The key prop in our Notice component now changes based on the message it houses. This provides unique identifiers to each unique message and improves handling and tracking performance.

• Improved Email Validation
  Our email validation function now checks if an entered value exists before applying the validation test, reducing unnecessary computation and potential error occurrences.

• Validation Message Control
  The components are now equipped to update validation messages and validation needs state more effectively with the use of an enhanced useValidation hook.

• Form Validation Functions
  We have introduced new functions to check and retrieve validation messages for a form. This aids in user-feedback and form submission flow, improving user experience.

• Validation State Management
  Our state management has been expanded to include validation message states and state change functionalities, ensuring smoother and more reliable validation experiences.

• Enhanced Test Cases
  Updated and newly added test cases help in verifying the functionality and reliability of new actions related to the validation system. This ensures the robust stability of our updates.

[sc0ttkclark]

Looks great so far

[Shelob9]

This PR is completed for #6898

Note: Does not prevent save when fields are invalid.

[Shelob9]

New TODO list:

• Initialize state in pod editor f651e06
• Only show validation messages on submit

[Shelob9]

@sc0ttkclark I am looking at how to show validation messages when saving and also how to block saving. Here are some notes for me and/ or you.

• core/block/editor data module as lockPostSaving and unlockPostSaving https://developer.wordpress.org/block-editor/reference-guides/data/data-core-editor/#lockpostsaving
• In the classic editor, not sure how to block saving beside disable button with the JavaScript.
• I have already added isValidating and way to dispatch validation.

  • pods/ui/js/dfv/src/hooks/useValidation.js

    Lines 22 to 26 in fd5e633

    	const needsValidation = useSelect( ( select ) => {
    	return select( storeKey ).getNeedsValidating();
    	}, [] );
    	const toggleNeedsValidating = useDispatch( storeKey ).toggleNeedsValidating();

  • pods/ui/js/dfv/src/store/actions.js

    Lines 337 to 351 in fd5e633

    	//Set the validation messages
    	export const setValidationMessages = ( fieldName, validationMessages ) => {
    	return {
    	type: CURRENT_POD_ACTIONS.SET_VALIDATION_MESSAGES,
    	validationMessages,
    	fieldName,
    	};
    	};
    	//Toggle if needs validation of the pod
    	export const toggleNeedsValidating = () => {
    	return {
    	type: CURRENT_POD_ACTIONS.TOGGLE_NEEDS_VALIDATING,
    	};
    	};

[Shelob9]

Something like this in PodsDFVApp could tell us if the post is being saved or not. This works.

       //Track when post is being saved so we can trigger validation
	const [isPostSaving,setIsPostSaving] = useState(false);
	//subscribe to "core/core-editor" to track when post is being saved
	useEffect( () => {
		const editor = select( 'core/editor' );
    	        const unsubscribe = subscribe( () => {
			setIsPostSaving(editor.isSavingPost());
		} );
		//Clean up when component unmounts
		return unsubscribe;

	}, [select,subscribe,setIsPostSaving] );

I tried to do this in ConnectedFieldWrapper using the withSelect and could not get editor to be defined:

const editor = storeSelect( 'core/editor' );
const isEditorSaving = editor.isSavingPost();
const isEditorSavingLocked = editor.isSavingLocked();

[sc0ttkclark]

@Shelob9 Here's what I ended up having to do to workaround the bug with locking post saving (both when post has not yet been published and on subsequent saves which have slightly different timing):

WordPress/gutenberg#49811 (comment)

The base branch was changed.