Replace DefaultDirectoryPicker with FormPathInputComponent in PreferencesTab

Author: mikaoelitiana

apps/studio/src/modules/user-settings/components/preferences-tab.tsx

@@ -2,6 +2,7 @@ import { SupportedLocale } from '@studio/common/lib/locale';
 import { useI18n } from '@wordpress/react-i18n';
 import { useEffect, useState } from 'react';
 import Button from 'src/components/button';
+import { FormPathInputComponent } from 'src/components/form-path-input';
 import { useFeatureFlags } from 'src/hooks/use-feature-flags';
 import { isWindowsStore } from 'src/lib/app-globals';
 import { getIpcApi } from 'src/lib/get-ipc-api';
@@ -22,7 +23,7 @@ import {
 	useGetStudioCliIsInstalledQuery,
 	useSaveStudioCliIsInstalledMutation,
 } from 'src/stores/installed-apps-api';
-import { DefaultDirectoryPicker } from './default-directory-picker';
+import { SettingsFormField } from './settings-form-field';
 
 export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => {
 	const { __ } = useI18n();
@@ -45,7 +46,6 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => {
 	const [ storedDefaultSiteDirectory, setStoredDefaultSiteDirectory ] = useState< string >();
 	const [ defaultSiteDirectory, setDefaultSiteDirectory ] = useState< string >();
 	const [ isLoadingDefaultSiteDirectory, setIsLoadingDefaultSiteDirectory ] = useState( true );
-	const [ isSelectingDefaultDirectory, setIsSelectingDefaultDirectory ] = useState( false );
 
 	const savePreferences = async () => {
 		if ( dirtyLocale ) {
@@ -105,17 +105,12 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => {
 	}, [] );
 
 	const handleChangeDefaultDirectory = async () => {
-		setIsSelectingDefaultDirectory( true );
-		try {
-			const response = await getIpcApi().showOpenFolderDialog(
-				__( 'Select default site directory' ),
-				defaultSiteDirectory ?? ''
-			);
-			if ( response?.path ) {
-				setDefaultSiteDirectory( response.path );
-			}
-		} finally {
-			setIsSelectingDefaultDirectory( false );
+		const response = await getIpcApi().showOpenFolderDialog(
+			__( 'Select default site directory' ),
+			defaultSiteDirectory ?? ''
+		);
+		if ( response?.path ) {
+			setDefaultSiteDirectory( response.path );
 		}
 	};
 
@@ -134,12 +129,13 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => {
 					{ enableAgentSuite && <McpSettings /> }
 				</>
 			) }
-			<DefaultDirectoryPicker
-				directory={ defaultSiteDirectory }
-				isLoading={ isLoadingDefaultSiteDirectory }
-				isSelecting={ isSelectingDefaultDirectory }
-				onPick={ handleChangeDefaultDirectory }
-			/>
+			<SettingsFormField label={ __( 'Default site directory' ) }>
+				<FormPathInputComponent
+					value={ isLoadingDefaultSiteDirectory ? __( 'Loading...' ) : defaultSiteDirectory ?? '' }
+					onClick={ handleChangeDefaultDirectory }
+					doesPathContainWordPress={ false }
+				/>
+			</SettingsFormField>
 			<div className="mt-auto pt-2 flex justify-end gap-3">
 				<Button
 					variant="tertiary"