diff --git a/apps/studio/src/components/form-path-input.tsx b/apps/studio/src/components/form-path-input.tsx new file mode 100644 index 0000000000..144e17b10c --- /dev/null +++ b/apps/studio/src/components/form-path-input.tsx @@ -0,0 +1,61 @@ +import { useI18n } from '@wordpress/react-i18n'; +import FolderIcon from 'src/components/folder-icon'; +import { cx } from 'src/lib/cx'; +import { SiteFormError } from './site-form-error'; + +export interface FormPathInputComponentProps { + value: string; + onClick: () => void; + error?: string; + tipMessage?: string; + id?: string; +} + +export function FormPathInputComponent( { + value, + onClick, + error, + tipMessage, + id = 'site-path', +}: FormPathInputComponentProps ) { + const { __ } = useI18n(); + const errorId = `${ id }-error`; + + return ( +
+ + + +
+ ); +} diff --git a/apps/studio/src/components/site-form-error.tsx b/apps/studio/src/components/site-form-error.tsx new file mode 100644 index 0000000000..21a06ef5b8 --- /dev/null +++ b/apps/studio/src/components/site-form-error.tsx @@ -0,0 +1,43 @@ +import { Icon } from '@wordpress/components'; +import { cautionFilled, tip } from '@wordpress/icons'; +import { cx } from 'src/lib/cx'; + +export interface SiteFormErrorProps { + error?: string; + tipMessage?: string; + className?: string; + id?: string; +} + +export const SiteFormError = ( { + error, + tipMessage = '', + className = '', + id = 'site-path-error', +}: SiteFormErrorProps ) => { + return ( + ( error || tipMessage ) && ( + + ) + ); +}; diff --git a/apps/studio/src/ipc-handlers.ts b/apps/studio/src/ipc-handlers.ts index 17f3cfc9c9..4e2bf03323 100644 --- a/apps/studio/src/ipc-handlers.ts +++ b/apps/studio/src/ipc-handlers.ts @@ -95,7 +95,7 @@ import { supportedEditorConfig, SupportedEditor } from 'src/modules/user-setting import { getUserEditor, getUserTerminal } from 'src/modules/user-settings/lib/ipc-handlers'; import { winFindEditorPath } from 'src/modules/user-settings/lib/win-editor-path'; import { SiteServer, stopAllServers as triggerStopAllServers } from 'src/site-server'; -import { DEFAULT_SITE_PATH, getSiteThumbnailPath } from 'src/storage/paths'; +import { getSiteThumbnailPath, resolveDefaultSiteDirectory } from 'src/storage/paths'; import { loadUserData, lockAppdata, @@ -149,6 +149,8 @@ export { saveUserLocale, saveUserTerminal, showUserSettings, + getDefaultSiteDirectory, + saveDefaultSiteDirectory, } from 'src/modules/user-settings/lib/ipc-handlers'; export async function getAgentInstructionsStatus( @@ -629,16 +631,25 @@ export interface FolderDialogResponse { isNameTooLong?: boolean; } +async function getDefaultSiteDirectory(): Promise< string > { + const userData = await loadUserData(); + return resolveDefaultSiteDirectory( userData.defaultSiteDirectory ); +} + export async function showSaveAsDialog( event: IpcMainInvokeEvent, options: SaveDialogOptions ) { const parentWindow = BrowserWindow.fromWebContents( event.sender ); if ( ! parentWindow ) { throw new Error( `No window found for sender of showSaveAsDialog message: ${ event.frameId }` ); } - const defaultPath = - options.defaultPath === nodePath.basename( options.defaultPath ?? '' ) - ? nodePath.join( DEFAULT_SITE_PATH, options.defaultPath ) - : options.defaultPath; + let defaultPath = options.defaultPath; + if ( + typeof options.defaultPath === 'string' && + options.defaultPath === nodePath.basename( options.defaultPath ) + ) { + const defaultSiteDirectory = await getDefaultSiteDirectory(); + defaultPath = nodePath.join( defaultSiteDirectory, options.defaultPath ); + } const { canceled, filePath } = await dialog.showSaveDialog( parentWindow, { defaultPath, ...options, @@ -672,9 +683,11 @@ export async function showOpenFolderDialog( }; } + const defaultPath = + defaultDialogPath !== '' ? defaultDialogPath : await getDefaultSiteDirectory(); const { canceled, filePaths } = await dialog.showOpenDialog( parentWindow, { title, - defaultPath: defaultDialogPath !== '' ? defaultDialogPath : DEFAULT_SITE_PATH, + defaultPath, properties: [ 'openDirectory', 'createDirectory', // allow user to create new directories; macOS only @@ -718,7 +731,8 @@ export async function copySite( } const sourceSite = sourceServer.details; - const finalSitePath = nodePath.join( DEFAULT_SITE_PATH, sanitizeFolderName( siteName ) ); + const defaultSiteDirectory = await getDefaultSiteDirectory(); + const finalSitePath = nodePath.join( defaultSiteDirectory, sanitizeFolderName( siteName ) ); console.log( `Copying site '${ sourceSite.name }' to '${ siteName }'` ); @@ -891,7 +905,8 @@ export async function generateProposedSitePath( _event: IpcMainInvokeEvent, siteName: string ): Promise< FolderDialogResponse > { - const path = nodePath.join( DEFAULT_SITE_PATH, sanitizeFolderName( siteName ) ); + const defaultSiteDirectory = await getDefaultSiteDirectory(); + const path = nodePath.join( defaultSiteDirectory, sanitizeFolderName( siteName ) ); try { return { @@ -926,9 +941,10 @@ export async function generateSiteNameFromList( _event: IpcMainInvokeEvent, usedSites: SiteDetails[] ): Promise< string > { + const defaultSiteDirectory = await getDefaultSiteDirectory(); return generateSiteName( usedSites.map( ( s ) => s.name ), - DEFAULT_SITE_PATH + defaultSiteDirectory ); } @@ -937,10 +953,11 @@ export async function generateNumberedNameFromList( baseName: string, usedSites: SiteDetails[] ): Promise< string > { + const defaultSiteDirectory = await getDefaultSiteDirectory(); return generateNumberedName( baseName, usedSites.map( ( s ) => s.name ), - DEFAULT_SITE_PATH + defaultSiteDirectory ); } diff --git a/apps/studio/src/modules/add-site/components/create-site-form.tsx b/apps/studio/src/modules/add-site/components/create-site-form.tsx index 14eb78b332..4826ea71e7 100644 --- a/apps/studio/src/modules/add-site/components/create-site-form.tsx +++ b/apps/studio/src/modules/add-site/components/create-site-form.tsx @@ -12,13 +12,14 @@ import { SupportedPHPVersion, SupportedPHPVersions } from '@studio/common/types/ import { Icon, SelectControl, Notice } from '@wordpress/components'; import { createInterpolateElement } from '@wordpress/element'; import { __, sprintf, _n } from '@wordpress/i18n'; -import { tip, cautionFilled, chevronRight, chevronDown, chevronLeft } from '@wordpress/icons'; +import { cautionFilled, chevronRight, chevronDown, chevronLeft } from '@wordpress/icons'; import { useI18n } from '@wordpress/react-i18n'; import { FormEvent, useState, useEffect, useCallback, useMemo, useRef, RefObject } from 'react'; import Button from 'src/components/button'; -import FolderIcon from 'src/components/folder-icon'; +import { FormPathInputComponent } from 'src/components/form-path-input'; import { LearnMoreLink, LearnHowLink } from 'src/components/learn-more'; import PasswordControl from 'src/components/password-control'; +import { SiteFormError } from 'src/components/site-form-error'; import TextControlComponent from 'src/components/text-control'; import { WPVersionSelector } from 'src/components/wp-version-selector'; import { cx } from 'src/lib/cx'; @@ -58,107 +59,6 @@ interface CreateSiteFormProps { formRef?: RefObject< HTMLFormElement >; } -interface FormPathInputComponentProps { - value: string; - onClick: () => void; - error?: string; - doesPathContainWordPress: boolean; - id?: string; -} - -interface SiteFormErrorProps { - error?: string; - tipMessage?: string; - className?: string; -} - -const SiteFormError = ( { error, tipMessage = '', className = '' }: SiteFormErrorProps ) => { - return ( - ( error || tipMessage ) && ( - - ) - ); -}; - -function FormPathInputComponent( { - value, - onClick, - error, - doesPathContainWordPress, - id, -}: FormPathInputComponentProps ) { - const { __ } = useI18n(); - return ( -
- - - -
- ); -} - export const CreateSiteForm = ( { defaultValues = {}, onSelectPath, @@ -519,7 +419,11 @@ export const CreateSiteForm = ( { ) } void } ) => { const { __ } = useI18n(); @@ -44,6 +46,9 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => { const [ dirtyEditor, setDirtyEditor ] = useState< SupportedEditor | null >(); const [ dirtyTerminal, setDirtyTerminal ] = useState< SupportedTerminal >(); const [ dirtyIsCliInstalled, setDirtyIsCliInstalled ] = useState< boolean >(); + const [ dirtyDefaultSiteDirectory, setDirtyDefaultSiteDirectory ] = useState< string >(); + const [ defaultSiteDirectory, setDefaultSiteDirectory ] = useState< string >(); + const [ isLoadingDefaultSiteDirectory, setIsLoadingDefaultSiteDirectory ] = useState( true ); const wasSavedRef = useRef( false ); const dirtyColorSchemeRef = useRef( dirtyColorScheme ); @@ -88,6 +93,9 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => { if ( dirtyIsCliInstalled !== undefined ) { await saveCliIsInstalled( dirtyIsCliInstalled ); } + if ( dirtyDefaultSiteDirectory ) { + await getIpcApi().saveDefaultSiteDirectory( dirtyDefaultSiteDirectory ); + } onClose(); }; @@ -96,6 +104,7 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => { const editorSelection = dirtyEditor ?? editor ?? 'vscode'; const terminalSelection = dirtyTerminal ?? terminal ?? 'terminal'; const isCliInstalledSelection = dirtyIsCliInstalled ?? isCliInstalled ?? false; + const defaultSiteDirectorySelection = dirtyDefaultSiteDirectory ?? defaultSiteDirectory ?? ''; const hasChanges = [ [ dirtyColorScheme, colorScheme ], @@ -103,8 +112,39 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => { [ dirtyEditor, editor ], [ dirtyTerminal, terminal ], [ dirtyIsCliInstalled, isCliInstalled ], + [ dirtyDefaultSiteDirectory, defaultSiteDirectory ], ].some( ( [ a, b ] ) => a !== undefined && a !== b ); + useEffect( () => { + let isMounted = true; + void ( async () => { + try { + const directory = await getIpcApi().getDefaultSiteDirectory(); + if ( ! isMounted ) { + return; + } + setDefaultSiteDirectory( directory ); + } finally { + if ( isMounted ) { + setIsLoadingDefaultSiteDirectory( false ); + } + } + } )(); + return () => { + isMounted = false; + }; + }, [] ); + + const handleChangeDefaultDirectory = async () => { + const response = await getIpcApi().showOpenFolderDialog( + __( 'Select default site directory' ), + defaultSiteDirectorySelection + ); + if ( response?.path ) { + setDirtyDefaultSiteDirectory( response.path ); + } + }; + return ( <> @@ -120,6 +160,14 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => { { ! isWindowsStore() && ( ) } + + +