Move WordPress & Gutenberg PR Preview to Playground website #1938

ajotka · 2024-10-24T11:20:38Z

Motivation for the change, related issues

I moved wordpress.html and gutenberg.html to Playground itself.
By the way, I also made a mini appearance refactor for the modal, based on Figma. And I used components from WordPress packages.

Implementation details

Add modals with input to fill PR number
Move & unify logic to fetch PR by number
Error handling
Appearance refactor for Modals
Implement new Modal to other components
Fetch PR number directly from query
New Dropdown Menu in main sidebar (thanks to this, we can import playground when we don't have any active one)

Testing Instructions (or ideally a Blueprint)

Any blueprint
Go to Playground settings
Click three dots next to ~~Homepage button~~ future Logo place
Select Preview a WordPress PR or Preview a Gutenberg PR

It is also possible to open modal via URL params:
/?modal=preview-pr-wordpress or /?modal=preview-pr-gutenberg

ajotka · 2024-10-24T11:23:59Z

@adamziel Tell me, due to moving this functionality to Playground, should we remove the wordpress.html and gutenberg.html files?

FYI, I'm setting this PR as Draft for now, because I'm waiting for the changes to be accepted with other modals. After implementing those changes, I'll add this refactor of all modals -> headers and action buttons.

adamziel · 2024-10-28T23:57:07Z

due to moving this functionality to Playground, should we remove the wordpress.html and gutenberg.html files?

Good question! There are existing links to those files out there so adding a redirect to custom-redirects-lib.php seems like the best option. Looping in @brandonpayton.

I'm waiting for the changes to be accepted with other modals

One of them is now merged 🎉 And the other one has a last bit of pending feedback. I'm happy to merge once it's addressed. Thank you so much for contributing!

brandonpayton · 2024-10-30T22:15:33Z

due to moving this functionality to Playground, should we remove the wordpress.html and gutenberg.html files?

Good question! There are existing links to those files out there so adding a redirect to custom-redirects-lib.php seems like the best option. Looping in @brandonpayton.

Hi @ajotka! We could add a redirect for wordpress.html and gutenberg.html if the open Preview PR modals were reflected in the Playground app URL. For example, the GitHub Export modal is auto-opened based on the URL:

https://playground.wordpress.net/?state=github-export

If the PR Preview modals were controlled in a similar way, we could add redirects to open them.

Here is the code that controls the GitHub Export modal visibility:

wordpress-playground/packages/playground/website/src/github/github-export-form/modal.tsx

Lines 7 to 32 in 65c4a92

    
           const query = new URLSearchParams(window.location.search); 
        
           export const isGitHubExportModalOpen = signal( 
        
           	query.get('state') === 'github-export' 
        
           ); 
        
           interface GithubExportModalProps { 
        
           	allowZipExport: GitHubExportFormProps['allowZipExport']; 
        
           	onExported?: GitHubExportFormProps['onExported']; 
        
           	initialFilesBeforeChanges?: GitHubExportFormProps['initialFilesBeforeChanges']; 
        
           	initialValues?: GitHubExportFormProps['initialValues']; 
        
           } 
        
           export function closeModal() { 
        
           	isGitHubExportModalOpen.value = false; 
        
           	// Remove ?state=github-export from the URL. 
        
           	const url = new URL(window.location.href); 
        
           	url.searchParams.delete('state'); 
        
           	window.history.replaceState({}, '', url.href); 
        
           } 
        
           export function openModal() { 
        
           	isGitHubExportModalOpen.value = true; 
        
           	// Add a ?state=github-export to the URL so that the user can refresh the page 
        
           	// and still see the modal. 
        
           	const url = new URL(window.location.href); 
        
           	url.searchParams.set('state', 'github-export'); 
        
           	window.history.replaceState({}, '', url.href); 
        
           }

I'm not sure it's great for each modal to control its own visibility, but it should work OK for now.

brandonpayton · 2024-10-30T22:21:51Z

If the PR Preview modals were controlled in a similar way, we could add redirects to open them.

Ah, I see how we are controlling other modal visibility via redux state. I think we'll need to have a way to link to certain modals or initialize that redux state if we want to redirect the old .html files to the PR Preview modals.

brandonpayton · 2024-10-30T22:29:44Z

Oh, good! I see how #1908 should make all modals addressable via query param:
https://github.com/WordPress/wordpress-playground/pull/1908/files#diff-7b2f9269a39b35f1cb76b6085ebbe1aea324dc8a5043cc349559ddb0827beb38R31

At least it looks that way. I haven't tested it.

If modals are indeed addressable via query param after #1908, we should have no problem adding redirects after this PR is merged. I added #1969 to track this.

# Conflicts: # packages/playground/website/src/components/layout/index.tsx

ajotka · 2024-10-31T15:08:54Z

Refactor is ready 🎉 @adamziel
-> Now, all modals are from @wordpress/components package.
-> I introduced ModalButtons for Cancel and Submit buttons at the bottom of modal.
-> I made two styles of modals; One, the default, 600px width. Second, modalSmall, 350px; (to prvent resizing when error or other new note will apperar.
-> New DropdownMenu, next to the future Logo (thanks to this, we can import playground when we don't have any active one).

@brandonpayton URL params for PR modals:
/?modal=preview-pr-wordpress
/?modal=preview-pr-gutenberg

Note: It would be good to merge #1908 to trunk first, because I used logic from there.

brandonpayton · 2024-10-31T18:50:36Z

I merged the latest from trunk into this PR, so changes from #1908 are here now.

Planning to review shortly.

brandonpayton · 2024-10-31T18:56:22Z

-> New DropdownMenu, next to the future Logo (thanks to this, we can import playground when we don't have any active one).

This is nice. It makes more sense IMO.

brandonpayton

Hi @ajotka, I reviewed this and left some comments. Overall, it looks like a nice change, but I think some reorganization would be helpful before we merge.

brandonpayton · 2024-10-31T19:44:13Z

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

+						onChange={setUrl}
+					/>
+
+					<ModalButtons


It would be nice to keep more vertical spacing between the bottom buttons and the content. The alignment change seems fine and aligns with other modals in the Playground web app redesign Figma.

Before this PR:

After this PR:

brandonpayton · 2024-10-31T19:58:14Z

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';


The way the modal modules are laid out is a bit different than usual module layout.

Here, we are importing '../import-form/modal' which internally imports import-form/index. This surprised me because index typically represents the main/root export of a component.

Can we reorganize these modal modules and imports so that /index is the main representation of a component to other modules?

For import-form, it might look something like:

import-form-modal/index exports ImportFormModal as the default export

The modal imported like import ImportFormModal from '../import-form-modal';

The current organization works, but it's a bit backwards in the way it uses /index. I think we can make it more typical so it gives tomorrow's developers (and ourselves) nothing additional to think about when reading this code.

brandonpayton · 2024-10-31T20:11:14Z

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

+export default function ModalButtons({ submitText = 'Submit', areDisabled = false, areBusy, onCancel, onSubmit }: ModalButtonsProps) {
+	return (
+		<Flex
+			justify={'end'}


It's not a big deal, but if we're using a string, we can say just justify="end", without the curly braces.

brandonpayton · 2024-10-31T20:16:06Z

packages/playground/website/src/github/github-export-form/modal.tsx

 import GitHubExportForm, { GitHubExportFormProps } from './form';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
 import { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { useEffect } from 'react';
+import css from '../../components/modal/style.module.css';


If we are still using these styles everywhere, maybe we should restore the components/modal/index module, apply the styles in that one place, and then go back to importing Modal from components/modal rather than directly from @wordpress/components.

Seeing this needed for all the modals suggests that maybe we ultimately do have a Playground Modal. And if there are any places where that is too much, it would be OK for those to use @wordpress/components directly.

Does that sound reasonable?

brandonpayton · 2024-10-31T20:18:19Z

packages/playground/website/src/github/github-export-form/form.tsx

@@ -430,10 +430,10 @@ export default function GitHubExportForm({
 	if (pushResult) {
 		return (
 			<form id="export-playground-form" onSubmit={handleSubmit}>
-				<h2 tabIndex={0} style={{ marginTop: 0, textAlign: 'center' }}>
+				<h3>


Why did these change from <h2> to <h3>? It doesn't look like there are any other <h2>'s in the modal. The modal title appears to be an <h1>.

brandonpayton · 2024-10-31T20:22:57Z

packages/playground/website/src/components/site-manager/sidebar/index.tsx

@@ -10,9 +10,9 @@ import {
 	Icon,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	Flex,
+	Flex, DropdownMenu,


Nit: These should be on separate lines because the rest are line-separated.

brandonpayton · 2024-10-31T20:23:56Z

packages/playground/website/src/components/site-manager/sidebar/index.tsx

-				{/* Remove Playground logo because branding isn't finalized. */}
-				{/* <Logo className={css.sidebarLogoButton} /> */}
-			</div>
+			{/* Padding 3px is because of focus on dropdown button */}


Thank you for this "why" comment.

ajotka added 13 commits October 16, 2024 12:26

Import Github modal without reloading

50878bf

Export Github without reloading

a62d862

keep slug opens modal functionality

b2a9515

lint

ab78d44

Merge branch 'trunk' into 1902

2bceaf1

Merge remote-tracking branch 'origin/trunk' into 1902

ccdb830

Merge remote-tracking branch 'origin/trunk' into 1902

192b7f8

remove signal from github modals

60ffe8a

WIP: modal UI refactor

92ab9f1

WIP: fetch logic for PRs

e22cc20

split modal to wordpress & gutenberg

239809d

lint

b784d98

Merge remote-tracking branch 'origin/trunk' into pr-preview

310e483

ajotka marked this pull request as draft October 24, 2024 11:20

ajotka added 2 commits October 24, 2024 13:30

fix error handling

747ba06

revert changes in import modal for now

0fd6775

ajotka added 3 commits October 30, 2024 08:38

Merge remote-tracking branch 'origin/trunk' into 1902

b6a140d

fixes after CR

71cc2e3

If only the 'modal' parameter changes in url, don't reload the page

b5f3355

brandonpayton mentioned this pull request Oct 30, 2024

Remove wordpress.html and gutenberg.html and add redirects to PR preview modals once those are added #1969

Open

ajotka added 5 commits October 31, 2024 09:24

Merge remote-tracking branch 'origin/trunk' into 1902

419deb7

Brandon suggestion

02932bb

Merge remote-tracking branch 'origin/trunk' into pr-preview

3a94478

# Conflicts: # packages/playground/website/src/components/layout/index.tsx

Merge remote-tracking branch 'origin/trunk' into pr-preview

20e3a5b

Merge branch '1902' into pr-preview

c143d8d

ajotka added 4 commits October 31, 2024 15:02

move all modals to wordpress/components

23d9327

lint

3bbd338

read core-pr from url and put to modal

f4acb75

New dropdown menu

c3ee188

ajotka marked this pull request as ready for review October 31, 2024 15:01

ajotka requested a review from a team as a code owner October 31, 2024 15:01

ajotka and others added 2 commits October 31, 2024 16:09

Merge branch 'trunk' into pr-preview

a33d69d

Merge branch 'trunk' into pr-preview

cece255

brandonpayton reviewed Oct 31, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move WordPress & Gutenberg PR Preview to Playground website #1938

Move WordPress & Gutenberg PR Preview to Playground website #1938

ajotka commented Oct 24, 2024 •

edited

Loading

ajotka commented Oct 24, 2024

adamziel commented Oct 28, 2024

brandonpayton commented Oct 30, 2024

brandonpayton commented Oct 30, 2024

brandonpayton commented Oct 30, 2024

ajotka commented Oct 31, 2024 •

edited

Loading

brandonpayton commented Oct 31, 2024

brandonpayton commented Oct 31, 2024

brandonpayton left a comment

brandonpayton Oct 31, 2024

brandonpayton Oct 31, 2024

brandonpayton Oct 31, 2024

brandonpayton Oct 31, 2024

brandonpayton Oct 31, 2024

brandonpayton Oct 31, 2024

brandonpayton Oct 31, 2024

Move WordPress & Gutenberg PR Preview to Playground website #1938

Are you sure you want to change the base?

Move WordPress & Gutenberg PR Preview to Playground website #1938

Conversation

ajotka commented Oct 24, 2024 • edited Loading

Motivation for the change, related issues

Implementation details

Testing Instructions (or ideally a Blueprint)

ajotka commented Oct 24, 2024

adamziel commented Oct 28, 2024

brandonpayton commented Oct 30, 2024

brandonpayton commented Oct 30, 2024

brandonpayton commented Oct 30, 2024

ajotka commented Oct 31, 2024 • edited Loading

brandonpayton commented Oct 31, 2024

brandonpayton commented Oct 31, 2024

brandonpayton left a comment

Choose a reason for hiding this comment

brandonpayton Oct 31, 2024

Choose a reason for hiding this comment

brandonpayton Oct 31, 2024

Choose a reason for hiding this comment

brandonpayton Oct 31, 2024

Choose a reason for hiding this comment

brandonpayton Oct 31, 2024

Choose a reason for hiding this comment

brandonpayton Oct 31, 2024

Choose a reason for hiding this comment

brandonpayton Oct 31, 2024

Choose a reason for hiding this comment

brandonpayton Oct 31, 2024

Choose a reason for hiding this comment

ajotka commented Oct 24, 2024 •

edited

Loading

ajotka commented Oct 31, 2024 •

edited

Loading