Move WordPress & Gutenberg PR Preview to Playground website

packages/playground/website/src/components/error-report-modal/index.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useState } from 'react';
-import Modal from '../modal';
+import React, { useEffect, useState } from 'react';
 import { logger } from '@php-wasm/logger';
-import { Button, TextareaControl, TextControl } from '@wordpress/components';
+import { TextareaControl, TextControl, Modal } from '@wordpress/components';
 
-import css from './style.module.css';
+import css from '../modal/style.module.css';
 
 import { Blueprint } from '@wp-playground/blueprints';
 import { useDispatch } from 'react-redux';
@@ -13,6 +12,7 @@ import {
 	useAppSelector,
 } from '../../lib/state/redux/store';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import ModalButtons from '../modal/modal-buttons';
 
 export function ErrorReportModal(props: { blueprint: Blueprint }) {
 	const activeModal = useAppSelector(
@@ -157,49 +157,36 @@ export function ErrorReportModal(props: { blueprint: Blueprint }) {
 	}
 
 	return (
-		<Modal isOpen={true} onRequestClose={onClose}>
-			<header
-				className={css.errorReportModalHeader}
-				aria-label="Error reporting form header"
-			>
-				<h2>{getTitle()}</h2>
-				<p>{getContent()}</p>
-			</header>
+		<Modal title={getTitle()} onRequestClose={onClose} className={css.modalSmall}>
+			<p>{getContent()}</p>
 			{showForm() && (
 				<>
-					<main>
-						<TextareaControl
-							label="How can we recreate this error?"
-							help="Describe what caused the error and how can we recreate it."
-							value={text}
-							onChange={setText}
-							className={css.errorReportModalTextarea}
-							required={true}
-						/>
-						<TextareaControl
-							label="Logs"
-							value={logs}
-							onChange={setLogs}
-							className={css.errorReportModalTextarea}
-						/>
-
-						<TextControl
-							label="Url"
-							value={url}
-							onChange={setUrl}
-						/>
-					</main>
-					<footer className={css.errorReportModalFooter}>
-						<Button
-							variant="primary"
-							onClick={onSubmit}
-							isBusy={loading}
-							disabled={loading || !text}
-						>
-							Report error
-						</Button>
-						<Button onClick={onClose}>Cancel</Button>
-					</footer>
+					<TextareaControl
+						label="How can we recreate this error?"
+						help="Describe what caused the error and how can we recreate it."
+						value={text}
+						onChange={setText}
+						required={true}
+					/>
+					<TextareaControl
+						label="Logs"
+						value={logs}
+						onChange={setLogs}
+					/>
+
+					<TextControl
+						label="Url"
+						value={url}
+						onChange={setUrl}
+					/>
+
+					<ModalButtons
+						areBusy={loading}
+						areDisabled={loading || !text}
+						onCancel={onClose}
+						onSubmit={onSubmit}
+						submitText={'Report error'}
+					/>
 				</>
 			)}
 		</Modal>

packages/playground/website/src/components/import-form/index.tsx

@@ -4,8 +4,8 @@ import { PlaygroundClient, importWordPressFiles } from '@wp-playground/client';
 
 import css from './style.module.css';
 import forms from '../../forms.module.css';
-import Button from '../button';
 import { logger } from '@php-wasm/logger';
+import ModalButtons from '../modal/modal-buttons';
 
 interface ImportFormProps {
 	playground: PlaygroundClient;
@@ -18,7 +18,6 @@ export default function ImportForm({
 	onImported,
 	onClose,
 }: ImportFormProps) {
-	const form = useRef<any>();
 	const fileInputRef = useRef<any>();
 	const [file, setFile] = useState<File | null>(null);
 	const [error, setError] = useState<string>('');
@@ -46,10 +45,7 @@ export default function ImportForm({
 	}
 
 	return (
-		<form id="import-playground-form" ref={form} onSubmit={handleSubmit}>
-			<h2 tabIndex={0} style={{ marginTop: 0, textAlign: 'center' }}>
-				Import Playground
-			</h2>
+		<>
 			<p className={css.modalText}>
 				You may replace the current WordPress Playground site with a
 				previously exported one.
@@ -64,17 +60,13 @@ export default function ImportForm({
 					accept="application/zip"
 				/>
 			</div>
-			<div className={forms.submitRow}>
-				<Button
-					id="import-submit--btn"
-					className={forms.btn}
-					disabled={!file}
-					variant="primary"
-					size="large"
-				>
-					Import
-				</Button>
-			</div>
-		</form>
+
+			<ModalButtons
+				areDisabled={!file}
+				onCancel={onClose}
+				onSubmit={handleSubmit}
+				submitText={'Import'}
+			/>
+		</>
 	);
 }

packages/playground/website/src/components/import-form/modal.tsx

@@ -1,6 +1,6 @@
 import { usePlaygroundClient } from '../../lib/use-playground-client';
 import ImportForm from './index';
-import Modal from '../modal';
+import { Modal } from '@wordpress/components';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
@@ -23,18 +23,18 @@ export const ImportFormModal = () => {
 
 	return (
 		<Modal
-			isOpen={!!playground}
-			contentLabel='This is a dialog window which overlays the main content of the
+				title={'Import Playground'}
+				contentLabel='This is a dialog window which overlays the main content of the
 				page. The modal begins with a heading 2 called "Import
 				Playground". Pressing the Close Import Window will close
 				the modal and bring you back to where you were on the page.'
-			onRequestClose={closeModal}
-		>
-			<ImportForm
-				playground={playground!}
-				onClose={closeModal}
-				onImported={handleImported}
-			/>
+				onRequestClose={closeModal}
+			>
+				<ImportForm
+					playground={playground!}
+					onClose={closeModal}
+					onImported={handleImported}
+				/>
 		</Modal>
 	);
 };

packages/playground/website/src/components/layout/index.tsx

@@ -33,6 +33,7 @@ import {
 	setSiteManagerOpen,
 } from '../../lib/state/redux/slice-ui';
 import { ImportFormModal } from '../import-form/modal';
+import { PreviewPRModal } from '../../github/preview-pr/modal';
 
 acquireOAuthTokenIfNeeded();
 
@@ -42,7 +43,9 @@ export const modalSlugs = {
 	START_ERROR: 'start-error',
 	IMPORT_FORM: 'import-form',
 	GITHUB_IMPORT: 'github-import',
-	GITHUB_EXPORT: 'github-export'
+	GITHUB_EXPORT: 'github-export',
+	PREVIEW_PR_WP: 'preview-pr-wordpress',
+	PREVIEW_PR_GUTENBERG: 'preview-pr-gutenberg',
 }
 
 const displayMode = getDisplayModeFromQuery();
@@ -178,6 +181,10 @@ function Modals(blueprint: Blueprint) {
 		return <StartErrorModal />;
 	} else if (currentModal === modalSlugs.IMPORT_FORM) {
 		return <ImportFormModal />;
+	} else if (currentModal === modalSlugs.PREVIEW_PR_WP) {
+		return <PreviewPRModal target={'wordpress'} />;
+	} else if (currentModal === modalSlugs.PREVIEW_PR_GUTENBERG) {
+		return <PreviewPRModal target={'gutenberg'} />;
 	} else if (currentModal === modalSlugs.GITHUB_IMPORT) {
 		return <GithubImportModal
 			onImported={({

packages/playground/website/src/components/log-modal/index.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
-import Modal from '../modal';
 import { logEventType, logger } from '@php-wasm/logger';
 
 import classNames from 'classnames';
 import css from './style.module.css';
 
-import { TextControl } from '@wordpress/components';
+import { Modal, TextControl } from '@wordpress/components';
 import {
 	PlaygroundDispatch,
 	PlaygroundReduxState,
@@ -23,16 +22,11 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {
 		dispatch(setActiveModal(null));
 	}
 
-	const styles = {
-		content: { width: 800 },
-	};
-
 	return (
-		<Modal isOpen={true} onRequestClose={onClose} styles={styles}>
-			<header aria-label="Error logs list header">
-				<h2>{props.title || 'Error Logs'}</h2>
+		<Modal title={props.title || 'Error Logs'} onRequestClose={onClose}>
+			<div>
 				{props.description}
-			</header>
+			</div>
 			<SiteLogs key={activeModal} className={css.logsInsideModal} />
 		</Modal>
 	);
@@ -91,7 +85,7 @@ export function SiteLogs({ className }: { className?: string }) {
 						No matching logs found.
 					</div>
 				) : (
-					<div className={css.logEmptyPlaceholder}>
+					<div>
 						Error logs for Playground, WordPress, and PHP will show
 						up here when something goes wrong.
 						<br />

packages/playground/website/src/components/log-modal/style.module.css

@@ -25,16 +25,6 @@
 	flex-grow: 1;
 }
 
-.log__list {
-	padding-bottom: 20px;
-	flex-grow: 1;
-	max-height: 100%;
-}
-
-.log__empty_placeholder {
-	padding-bottom: 20px;
-}
-
 .log__entry {
 	font-family: monospace;
 	word-wrap: break-word;

packages/playground/website/src/components/modal/modal-buttons.tsx

@@ -0,0 +1,34 @@
+import { Button, Flex } from '@wordpress/components';
+import React from 'react';
+
+interface ModalButtonsProps {
+	submitText?: string;
+	areDisabled?: boolean;
+	areBusy?: boolean;
+	onCancel?: () => void;
+	onSubmit?: (e: any) => void;
+}
+export default function ModalButtons({ submitText = 'Submit', areDisabled = false, areBusy, onCancel, onSubmit }: ModalButtonsProps) {
+	return (
+		<Flex
+			justify={'end'}
+		>
+			<Button
+				isBusy={areBusy}
+				disabled={areDisabled}
+				variant="link"
+				onClick={onCancel}
+			>
+				Cancel
+			</Button>
+			<Button
+				isBusy={areBusy}
+				disabled={areDisabled}
+				variant="primary"
+				onClick={onSubmit}
+			>
+				{submitText}
+			</Button>
+		</Flex>
+	)
+}