fix GoogleSheetsSettings form fields state management

Author: shekharnwagh

src/data-sources/google-sheets/GoogleSheetsSettings.tsx

@@ -19,8 +19,9 @@ import {
 } from '@/data-sources/types';
 import { useForm, ValidationRules } from '@/hooks/useForm';
 import { GoogleSheetsIcon, GoogleSheetsIconWithText } from '@/settings/icons/GoogleSheetsIcon';
-import { StringIdName } from '@/types/common';
+import { NumberIdName } from '@/types/common';
 import { SelectOption } from '@/types/input';
+import { isPositiveIntegerString } from '@/utils/string';
 
 const SERVICE_CONFIG_VERSION = 1;
 
@@ -94,7 +95,7 @@ export const GoogleSheetsSettings = ( {
 	};
 
 	const onCredentialsChange = ( nextValue: string ) => {
-		handleOnChange( 'credentials', nextValue );
+		handleOnChange( 'credentials', JSON.parse( nextValue ) );
 	};
 
 	const onSelectChange = (
@@ -103,15 +104,16 @@ export const GoogleSheetsSettings = ( {
 	) => {
 		if ( extra?.event ) {
 			const { id } = extra.event.target;
-			let newValue: StringIdName | null = null;
+			let newValue: NumberIdName | null = null;
 			if ( id === 'spreadsheet' ) {
 				const selectedSpreadsheet = spreadsheets?.find(
 					spreadsheet => spreadsheet.value === value
 				);
 				newValue = { id: value, name: selectedSpreadsheet?.label ?? '' };
-			} else if ( id === 'sheet' ) {
+			} else if ( id === 'sheet' && isPositiveIntegerString( value ) ) {
+				const parsedValue = parseInt( value, 10 );
 				const selectedSheet = sheets?.find( sheet => sheet.value === value );
-				newValue = { id: value, name: selectedSheet?.label ?? '' };
+				newValue = { id: parsedValue, name: selectedSheet?.label ?? '' };
 			}
 			handleOnChange( id, newValue );
 		}
@@ -221,7 +223,7 @@ export const GoogleSheetsSettings = ( {
 			>
 				<TextareaControl
 					label={ __( 'Credentials', 'remote-data-blocks' ) }
-					value={ state.credentials ? JSON.stringify( state.credentials ) : '' }
+					value={ state.credentials ? JSON.stringify( state.credentials, null, 2 ) : '' }
 					onChange={ onCredentialsChange }
 					help={ credentialsHelpText }
 					rows={ 10 }

src/utils/string.ts

@@ -52,3 +52,13 @@ export function safeParseJSON< T = unknown >( value: unknown ): T | null {
 
 	return null;
 }
+
+/**
+ * Checks if a string is a positive integer value.
+ *
+ * @param value string to check
+ * @returns true if the string is a positive integer value, false otherwise
+ */
+export function isPositiveIntegerString( value: string ): boolean {
+	return /^\d+$/.test( value ) && parseInt( value, 10 ) > 0;
+}