Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Close Playground Manager by default #1831

Merged
merged 2 commits into from
Sep 30, 2024
Merged

Close Playground Manager by default #1831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d392ec
Leave Playground Manager closed by default
brandonpayton Sep 30, 2024
3aae7a1
Update Playwright tests for closed manager by default
brandonpayton Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/playground/website/playwright/e2e/website-ui.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ test('should reflect the URL update from the navigation bar in the WordPress sit
}) => {
await website.goto('./?url=/wp-admin');

await website.expandSiteView();
await website.ensureSiteViewIsExpanded();

await expect(website.page.locator('input[value="/wp-admin/"]')).toHaveValue(
'/wp-admin/'
Expand All @@ -24,6 +24,7 @@ test('should reflect the URL update from the navigation bar in the WordPress sit
test('should switch between sites', async ({ website }) => {
await website.goto('./');

await website.ensureSiteManagerIsOpen();
await website.openNewSiteModal();

const newSiteName = await website.page
Expand Down Expand Up @@ -111,13 +112,16 @@ test('should display networking as inactive by default', async ({
}) => {
await website.goto('./');

await website.ensureSiteManagerIsOpen();

await expect(await website.hasNetworkingEnabled()).toBeFalsy();
});

test('should display networking as active when networking is enabled', async ({
website,
}) => {
await website.goto('./?networking=yes');
await website.ensureSiteManagerIsOpen();
await expect(await website.hasNetworkingEnabled()).toBeTruthy();
});

Expand Down
18 changes: 16 additions & 2 deletions packages/playground/website/playwright/website-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,22 @@ export class WebsitePage {
return response;
}

async expandSiteView() {
async ensureSiteManagerIsOpen() {
const siteManagerHeading = this.page.getByText('Your Playgrounds');
if (!(await siteManagerHeading.isVisible({ timeout: 5000 }))) {
await this.page.getByLabel('Open Site Manager').click();
}
expect(await siteManagerHeading.isVisible()).toBeTruthy();
}

async ensureSiteViewIsExpanded() {
const openSiteButton = this.page.locator('div[title="Open site"]');
await openSiteButton.click();
if (await openSiteButton.isVisible({ timeout: 5000 })) {
await openSiteButton.click();
}

const siteManagerHeading = this.page.getByText('Your Playgrounds');
expect(await siteManagerHeading.isVisible()).toBeFalsy();
}

async openNewSiteModal() {
Expand Down Expand Up @@ -53,6 +66,7 @@ export class WebsitePage {
}

async openForkPlaygroundSettings() {
await this.ensureSiteManagerIsOpen();
const editSettingsButton = this.page.locator(
'button.components-button',
{
Expand Down
21 changes: 15 additions & 6 deletions packages/playground/website/src/lib/state/redux/slice-ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,28 @@ const isEmbeddedInAnIframe = window.self !== window.top;
// @TODO: Centralize these breakpoint sizes.
const isMobile = window.innerWidth < 875;

const shouldOpenSiteManagerByDefault = false;

const initialState: UIState = {
activeModal:
query.get('modal') === 'mount-markdown-directory'
? 'mount-markdown-directory'
: null,
offline: !navigator.onLine,
// Open site manager for direct playground.wordpress.net visitors,
// unless they specifically request seamless mode.
// Don't default to the site manager on mobile, as that would mean
// seeing something that's not Playground filling your entire screen –
// quite a confusing experience.
// NOTE: Please do not eliminate the cases in this siteManagerIsOpen expression,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great comment

// even if they seem redundant. We may experiment which toggling the manager
// to be open by default or closed by default, and we do not want to lose
// specific reasons for the manager to be closed.
siteManagerIsOpen:
query.get('mode') !== 'seamless' && !isEmbeddedInAnIframe && !isMobile,
shouldOpenSiteManagerByDefault &&
// The site manager should not be shown at all in seamless mode.
query.get('mode') !== 'seamless' &&
// We do not expect to render the Playground app UI in an iframe.
!isEmbeddedInAnIframe &&
// Don't default to the site manager on mobile, as that would mean
// seeing something that's not Playground filling your entire screen –
// quite a confusing experience.
!isMobile,
};

const uiSlice = createSlice({
Expand Down
Loading