refactor: create independant form path input component

Author: mikaoelitiana

apps/studio/src/components/form-path-input.tsx

@@ -0,0 +1,72 @@
+import { __ } from '@wordpress/i18n';
+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;
+	doesPathContainWordPress: boolean;
+	id?: string;
+}
+
+export function FormPathInputComponent( {
+	value,
+	onClick,
+	error,
+	doesPathContainWordPress,
+	id,
+}: FormPathInputComponentProps ) {
+	const { __ } = useI18n();
+	return (
+		<div className="flex flex-col gap-2">
+			<button
+				aria-invalid={ !! error }
+				/**
+				 * The below `aria-describedby` presumes the error message always
+				 * relates to the local path input, which is true currently as it is the
+				 * only data validation in place. If we ever introduce additional data
+				 * validation we need to expand the robustness of this
+				 * `aria-describedby` attribute so that it only targets relevant error
+				 * messages.
+				 */
+				aria-describedby={ error ? 'site-path-error' : undefined }
+				type="button"
+				aria-label={ `${ value }, ${ __( 'Select different local path' ) }` }
+				className={ cx(
+					'flex flex-row items-stretch rounded-sm border border-[#949494] focus:border-a8c-blue-50 focus:shadow-[0_0_0_0.5px_black] focus:shadow-a8c-blue-50 outline-none transition-shadow transition-linear duration-100 [&_.local-path-icon]:focus:border-l-a8c-blue-50 [&:disabled]:cursor-not-allowed',
+					error && 'border-red-500 [&_.local-path-icon]:border-l-red-500'
+				) }
+				data-testid="select-path-button"
+				onClick={ onClick }
+				id={ id }
+			>
+				<div
+					aria-hidden="true"
+					tabIndex={ -1 }
+					className="w-full text-left pl-3 py-3 min-h-10"
+					onChange={ () => {} }
+				>
+					{ value }
+				</div>
+				<div
+					aria-hidden="true"
+					className="local-path-icon flex items-center py-[9px] px-2.5 self-center"
+				>
+					<FolderIcon className="text-[#3C434A]" />
+				</div>
+			</button>
+			<SiteFormError
+				error={ error }
+				tipMessage={
+					doesPathContainWordPress
+						? __( 'The existing WordPress site at this path will be added.' )
+						: ''
+				}
+			/>
+			<input type="hidden" data-testid="local-path-input" value={ value } />
+		</div>
+	);
+}

apps/studio/src/components/site-form-error.tsx

@@ -0,0 +1,35 @@
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cautionFilled, tip } from '@wordpress/icons';
+import { cx } from 'src/lib/cx';
+
+export interface SiteFormErrorProps {
+	error?: string;
+	tipMessage?: string;
+	className?: string;
+}
+
+export const SiteFormError = ( { error, tipMessage = '', className = '' }: SiteFormErrorProps ) => {
+	return (
+		( error || tipMessage ) && (
+			<div
+				id={ error ? 'error-message' : 'tip-message' }
+				role="alert"
+				aria-atomic="true"
+				className={ cx(
+					'flex items-start gap-1 text-xs',
+					error ? 'text-red-500' : 'text-a8c-gray-50',
+					className
+				) }
+			>
+				<Icon
+					className={ cx( 'shrink-0 basis-4', error ? 'fill-red-500' : 'fill-a8c-gray-50' ) }
+					icon={ error ? cautionFilled : tip }
+					width={ 16 }
+					height={ 16 }
+				/>
+				<p>{ error ? error : __( tipMessage ) }</p>
+			</div>
+		)
+	);
+};

apps/studio/src/modules/add-site/components/create-site-form.tsx

@@ -16,9 +16,10 @@ import { tip, cautionFilled, chevronRight, chevronDown, chevronLeft } from '@wor
 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';

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

@@ -7,6 +7,7 @@ import { getIpcApi } from 'src/lib/get-ipc-api';
 import { ColorSchemePicker } from 'src/modules/user-settings/components/color-scheme-picker';
 import { McpSettings } from 'src/modules/mcp/components/mcp-settings';
 import { getIpcApi } from 'src/lib/get-ipc-api';
+import { McpSettings } from 'src/modules/mcp/components/mcp-settings';
 import { EditorPicker } from 'src/modules/user-settings/components/editor-picker';
 import { LanguagePicker } from 'src/modules/user-settings/components/language-picker';
 import { StudioCliToggle } from 'src/modules/user-settings/components/studio-cli-toggle';