Skip to content

Commit

Permalink
Add site manager view and sidebar (#1661)
Browse files Browse the repository at this point in the history 
**Warning** This PR contains a lot of TODOs because I didn't want it to
get too large. We can decide if it's worth shipping as is or if we need
to implement some of these missing features first.

## Motivation for the change, related issues

Implements #1656

Browser storage in Playground supports having multiple sites by
switching by adding a `site-slug` query string.
This is a powerful feature that's hard to discover.

As a first step in the [Web app redesign
project,](#1655)
this PR implements switching sites in browser storage.

Other site management features like adding and deleting sites will be
added in future PRs.

![Screenshot 2024-08-01 at 12 20
55](https://github.com/user-attachments/assets/b820a040-d9a8-4eb9-aaa0-7d480385e979)
![Screenshot 2024-08-01 at 12 21
08](https://github.com/user-attachments/assets/3ace3f63-7edf-4ab5-b332-78be3ef692a9)

## Implementation details

The goal of this PR is to set the groundwork for the [Web app
redesign](#1655)
project by allowing users to switch between views.

The feature is only available while using browser storage.

The current view is now called `site-view` and the new management view
is called `site-manager`.

In this iteration, switching is done by redirecting to a URL with a
`site-manager=true` query string.
A future iteration will remove the need for reloads.

When in the site manager a list of sites is loaded from OPFS, clicking
on a site (or preview) will redirect to that site.
This is a temporary implementation that will be removed[ once we add
site
storage.](#1659)

## Testing Instructions (or ideally a Blueprint)

- Checkout this branch
- [Open Playground with browser
storage](http://127.0.0.1:5400/website-server/?storage=browser)
- Confirm that a new site manager icon is available in the upper left
corner
- Click it and confirm that the site manager loads
- [Open Playground with browser storage and a custom
slug](http://127.0.0.1:5400/website-server/?storage=browser&site-slug=test)
- Click on the site manager icon and confirm that the site manager loads
- Confirm that both sites are visible

---------

Co-authored-by: Brandon Payton <[email protected]>
  • Loading branch information
@bgrgicak @brandonpayton
bgrgicak and brandonpayton authored Aug 8, 2024
1 parent 4fa5db7 commit 0f11a6f
Show file tree
Hide file tree
Showing 19 changed files with 1,168 additions and 441 deletions.
36 changes: 17 additions & 19 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,64 @@ All notable changes to this project are documented in this file by a CI job
that runs on every NPM release. The file follows the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
format.

## [v0.9.28] (2024-08-05)
## [v0.9.28] (2024-08-05)

### Blueprints

- Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))
- Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))

### Documentation

- Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
- Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))
- Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
- Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))

### Website

- Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
- UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))
- Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
- UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))

#### Blueprints

- Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))
- Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))

### Internal

- Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))
- Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))

### Various

- Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
- Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
- Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))
- Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
- Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
- Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))

### Contributors

The following contributors merged PRs in this release:

@adamziel @bgrgicak @brandonpayton @PiotrPress


## [v0.9.27] (2024-07-29)
## [v0.9.27] (2024-07-29)

### Enhancements

- Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))
- Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))

### Devrel

- Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))
- Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))

### PHP WebAssembly

- Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
- Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
- Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))
- Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
- Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
- Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))

### Contributors

The following contributors merged PRs in this release:

@adamziel @bgrgicak @brandonpayton


## [v0.9.26] (2024-07-22)

### Blueprints
Expand Down
36 changes: 17 additions & 19 deletions packages/docs/site/docs/17-changelog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,66 +9,64 @@ All notable changes to this project are documented in this file by a CI job
that runs on every NPM release. The file follows the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
format.

## [v0.9.28] (2024-08-05)
## [v0.9.28] (2024-08-05)

### Blueprints

- Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))
- Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))

### Documentation

- Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
- Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))
- Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
- Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))

### Website

- Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
- UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))
- Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
- UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))

#### Blueprints

- Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))
- Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))

### Internal

- Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))
- Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))

### Various

- Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
- Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
- Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))
- Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
- Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
- Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))

### Contributors

The following contributors merged PRs in this release:

@adamziel @bgrgicak @brandonpayton @PiotrPress


## [v0.9.27] (2024-07-29)
## [v0.9.27] (2024-07-29)

### Enhancements

- Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))
- Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))

### Devrel

- Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))
- Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))

### PHP WebAssembly

- Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
- Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
- Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))
- Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
- Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
- Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))

### Contributors

The following contributors merged PRs in this release:

@adamziel @bgrgicak @brandonpayton


## [v0.9.26] (2024-07-22)

### Blueprints
Expand Down
21 changes: 21 additions & 0 deletions packages/playground/website/public/site-manager-background.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 39 additions & 12 deletions packages/playground/website/src/components/browser-chrome/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ import css from './style.module.css';
import AddressBar from '../address-bar';
import { close } from '@wordpress/icons';
import classNames from 'classnames';
import { OpenSiteManagerButton } from '../open-site-manager-button';

interface BrowserChromeProps {
children?: React.ReactNode;
toolbarButtons?: Array<React.ReactElement | false | null>;
url?: string;
showAddressBar?: boolean;
onUrlChange?: (url: string) => void;
hideToolbar?: boolean;
className?: string;
}

export default function BrowserChrome({
Expand All @@ -18,6 +21,8 @@ export default function BrowserChrome({
onUrlChange,
showAddressBar = true,
toolbarButtons,
hideToolbar,
className,
}: BrowserChromeProps) {
const addressBarClass = classNames(css.addressBarSlot, {
[css.isHidden]: !showAddressBar,
Expand All @@ -43,20 +48,42 @@ export default function BrowserChrome({
[css.isHidden]: noticeHidden,
});

/**
* Temporary feature flag to enable the site manager
* while using browser storage.
*
* TODO: Remove this once the site manager supports all storage options.
*/
const query = new URLSearchParams(window.location.search);
const showSiteManager = query.get('storage') === 'browser';

return (
<div className={wrapperClass} data-cy="simulated-browser">
<div className={css.window}>
<header className={css.toolbar} aria-label="Playground toolbar">
<div
className={`${wrapperClass} ${className}`}
data-cy="simulated-browser"
>
<div className={`${css.window} browser-chrome-window`}>
<header
className={`${css.toolbar} ${
showSiteManager ? css.hasSiteManager : ''
} ${hideToolbar ? css.toolbarHidden : ''}`}
aria-label="Playground toolbar"
>
<div className={css.windowControls}>
<div
className={`${css.windowControl} ${css.isNeutral}`}
></div>
<div
className={`${css.windowControl} ${css.isNeutral}`}
></div>
<div
className={`${css.windowControl} ${css.isNeutral}`}
></div>
{showSiteManager && <OpenSiteManagerButton />}
{!showSiteManager && (
<>
<div
className={`${css.windowControl} ${css.isNeutral}`}
></div>
<div
className={`${css.windowControl} ${css.isNeutral}`}
></div>
<div
className={`${css.windowControl} ${css.isNeutral}`}
></div>
</>
)}
</div>

<div className={addressBarClass}>
Expand Down
Loading

0 comments on commit 0f11a6f

Please sign in to comment.