Add error handling

Author: JanJakes

packages/playground/website/src/components/site-manager/site-database-panel/adminer-button.tsx

@@ -1,6 +1,7 @@
 import { Button, Icon, Flex, FlexItem } from '@wordpress/components';
 import { external } from '@wordpress/icons';
 import { useState } from 'react';
+import css from './style.module.css';
 import {
 	type PlaygroundClient,
 	type StepDefinition,
@@ -68,6 +69,7 @@ export function AdminerButton({
 	playground: PlaygroundClient | undefined;
 }) {
 	const [state, setState] = useState<'idle' | 'loading' | 'ready'>('idle');
+	const [error, setError] = useState<string | null>(null);
 
 	const handleOpenAdminer = async () => {
 		if (!playground) {
@@ -84,8 +86,10 @@ export function AdminerButton({
 				await installAdminer(playground);
 				setState('ready');
 			} catch (error) {
-				console.error('Failed to install Adminer:', error);
 				setState('idle');
+				setError(
+					error instanceof Error ? error.message : 'Unknown error'
+				);
 				return;
 			}
 		}
@@ -102,20 +106,27 @@ export function AdminerButton({
 
 	const isLoading = state === 'loading';
 	return (
-		<Button
-			variant="primary"
-			disabled={!playground || isLoading}
-			isBusy={isLoading}
-			onClick={handleOpenAdminer}
-		>
-			<Flex justify="space-between" gap={2} expanded={true}>
-				<FlexItem>
-					{isLoading ? 'Opening Adminer…' : 'Open in Adminer'}
-				</FlexItem>
-				<FlexItem>
-					<Icon icon={external} size={16} />
-				</FlexItem>
-			</Flex>
-		</Button>
+		<Flex direction="column" gap={0} expanded={false}>
+			<Button
+				variant="primary"
+				disabled={!playground || isLoading}
+				isBusy={isLoading}
+				onClick={handleOpenAdminer}
+			>
+				<Flex justify="space-between" gap={2} expanded={true}>
+					<FlexItem>
+						{isLoading ? 'Opening Adminer…' : 'Open in Adminer'}
+					</FlexItem>
+					<FlexItem>
+						<Icon icon={external} size={16} />
+					</FlexItem>
+				</Flex>
+			</Button>
+			{error && (
+				<div className={css.error}>
+					Failed to install Adminer. Please try again. Error: {error}
+				</div>
+			)}
+		</Flex>
 	);
 }

packages/playground/website/src/components/site-manager/site-database-panel/phpmyadmin-button.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Button, Icon, Flex, FlexItem } from '@wordpress/components';
 import { external } from '@wordpress/icons';
+import css from './style.module.css';
 import {
 	type PlaygroundClient,
 	type StepDefinition,
@@ -60,6 +61,7 @@ export function PhpMyAdminButton({
 	playground: PlaygroundClient | undefined;
 }) {
 	const [state, setState] = useState<'idle' | 'loading' | 'ready'>('idle');
+	const [error, setError] = useState<string | null>(null);
 
 	const handleOpenPhpMyAdmin = async () => {
 		if (!playground) {
@@ -76,8 +78,10 @@ export function PhpMyAdminButton({
 				await installPhpMyAdmin(playground);
 				setState('ready');
 			} catch (error) {
-				console.error('Failed to install phpMyAdmin:', error);
 				setState('idle');
+				setError(
+					error instanceof Error ? error.message : 'Unknown error'
+				);
 				return;
 			}
 		}
@@ -94,20 +98,30 @@ export function PhpMyAdminButton({
 
 	const isLoading = state === 'loading';
 	return (
-		<Button
-			variant="primary"
-			disabled={!playground || isLoading}
-			isBusy={isLoading}
-			onClick={handleOpenPhpMyAdmin}
-		>
-			<Flex justify="space-between" gap={2} expanded={true}>
-				<FlexItem>
-					{isLoading ? 'Opening phpMyAdmin…' : 'Open in phpMyAdmin'}
-				</FlexItem>
-				<FlexItem>
-					<Icon icon={external} size={16} />
-				</FlexItem>
-			</Flex>
-		</Button>
+		<Flex direction="column" gap={0} expanded={false}>
+			<Button
+				variant="primary"
+				disabled={!playground || isLoading}
+				isBusy={isLoading}
+				onClick={handleOpenPhpMyAdmin}
+			>
+				<Flex justify="space-between" gap={2} expanded={true}>
+					<FlexItem>
+						{isLoading
+							? 'Opening phpMyAdmin…'
+							: 'Open in phpMyAdmin'}
+					</FlexItem>
+					<FlexItem>
+						<Icon icon={external} size={16} />
+					</FlexItem>
+				</Flex>
+			</Button>
+			{error && (
+				<div className={css.error}>
+					Failed to install phpMyAdmin. Please try again. Error:{' '}
+					{error}
+				</div>
+			)}
+		</Flex>
 	);
 }

packages/playground/website/src/components/site-manager/site-database-panel/style.module.css

@@ -24,3 +24,9 @@
 	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
 		monospace;
 }
+
+.error {
+	color: #cc1818;
+	font-size: 13px;
+	margin-top: 8px;
+}