Assembler: Add interaction in the Pages screen #83501

taipeicoder · 2023-10-26T03:44:21Z

Related to https://github.com/Automattic/dotcom-forge/issues/2225

Proposed Changes

This PR introduces the sidebar interaction for the Pages screen.
See the design spec: Tv3pYqA3EcRfiXC31IxrXE-fi-2390%3A25283

Screen.Capture.on.2023-10-26.at.11-47-28.mp4

Tasks for later: API integration to retrieve the list of pages.

Testing Instructions

Head to the Assembler with the flag &flags=pattern-assembler/add-pages.
Go through the Patterns, and Styles screen until you arrive at the Pages screen.
Ensure that the sidebar interaction works as shown above.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

github-actions · 2023-10-26T03:44:35Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-85737

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-85737&env=jetpack

matticbot · 2023-10-26T03:45:21Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~407 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
import-flow      +1610 B  (+0.0%)     +407 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

miksansegundo · 2023-10-26T05:04:28Z

I think the feature flag is not working for me because I don't see the screen when testing on Calypso live: https://container-hopeful-nash.calypso.live/setup/site-setup/patternAssembler?siteSlug=test19519.wordpress.com&siteId=225125315&flags=pattern-assember%2Fadd-pages

Can you enable the flag in Calypso?

wp-calypso/config/wpcalypso.json

Line 112 in 68e925b

"pattern-assembler/add-pages": false,

taipeicoder · 2023-10-26T05:06:38Z

I think the feature flag is not working for me because I don't see the screen when testing on Calypso live: https://container-hopeful-nash.calypso.live/setup/site-setup/patternAssembler?siteSlug=test19519.wordpress.com&siteId=225125315&flags=pattern-assember%2Fadd-pages

Can you enable the flag in Calypso?

wp-calypso/config/wpcalypso.json

Line 112 in 68e925b

"pattern-assembler/add-pages": false,

Oops, I had a typo in the description it should be
https://container-hopeful-nash.calypso.live/setup/site-setup/patternAssembler?siteSlug=test19519.wordpress.com&siteId=225125315&flags=pattern-assembler%2Fadd-pages

instead of
https://container-hopeful-nash.calypso.live/setup/site-setup/patternAssembler?siteSlug=test19519.wordpress.com&siteId=225125315&flags=pattern-assember%2Fadd-pages!

There was a l missing.

miksansegundo

The code and functionality are looking good to me 👍

The selected pages are persisted in the URL.

Screen.Recording.2566-10-26.at.12.08.39.mov

Not related to this PR, I'm wondering if we should do something different for existing sites because when they come from the Theme showcase their site can already have these pages. Are we going to replace them or create new ones? cc: @fushar

taipeicoder · 2023-10-26T06:02:06Z

Not related to this PR, I'm wondering if we should do something different for existing sites because when they come from the Theme showcase their site can already have these pages. Are we going to replace them or create new ones? cc: @fushar

Great question! I just assumed that we would add those pages and draft existing ones 🤔
Worth discussing with the team @Automattic/lego @autumnfjeld @lucasmendes-design

fushar · 2023-10-26T07:14:07Z

Not related to this PR, I'm wondering if we should do something different for existing sites because when they come from the Theme showcase their site can already have these pages. Are we going to replace them or create new ones? cc: @fushar

Good question. I'd just add the pages without worrying about the existing ones. There could be duplicates as a result -- but I think it's clear from the flow, and it's up to the users to choose which pages to keep or trash. 😄

miksansegundo · 2023-10-26T13:29:09Z

.../landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/page-list.tsx

+				{ /* eslint-disable wpcalypso/jsx-gridicon-size */ }
+				<Gridicon icon="checkmark" size={ 10 } />
+			</FlexItem>
+			<FlexItem className="page-list-item__label">{ label }</FlexItem>


Just realized that we have to translate the label.

Forgot to mention that this is only "placeholder" UI 😅
We'll have a better handling of data once we integrate the UI with the API!

I see, cool, we can use the pattern or category name because they should be already translated.

Add interaction in the Pages screen

b58954d

taipeicoder self-assigned this Oct 26, 2023

Typecheck

6c46ff7

taipeicoder marked this pull request as ready for review October 26, 2023 04:00

taipeicoder requested a review from a team October 26, 2023 04:00

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 26, 2023

Add usePages hook

a7c8c9d

miksansegundo approved these changes Oct 26, 2023

View reviewed changes

taipeicoder merged commit 755b993 into trunk Oct 26, 2023
5 checks passed

taipeicoder deleted the add/pattern-assembler-screen-pages-selection-ui branch October 26, 2023 05:57

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 26, 2023

miksansegundo reviewed Oct 26, 2023

View reviewed changes

miksansegundo mentioned this pull request Oct 26, 2023

Assembler: Pages - Improve tab navigation on Homepage and overall accessibility with a screen reader #83541

Merged

7 tasks

taipeicoder mentioned this pull request Oct 27, 2023

Assembler Add Pages: Implement the screen #83450

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Assembler: Add interaction in the Pages screen #83501

Assembler: Add interaction in the Pages screen #83501

taipeicoder commented Oct 26, 2023 •

edited

Loading

github-actions bot commented Oct 26, 2023 •

edited by matticbot

Loading

matticbot commented Oct 26, 2023 •

edited

Loading

miksansegundo commented Oct 26, 2023

taipeicoder commented Oct 26, 2023 •

edited

Loading

miksansegundo left a comment

taipeicoder commented Oct 26, 2023

fushar commented Oct 26, 2023

miksansegundo Oct 26, 2023

taipeicoder Oct 27, 2023

miksansegundo Oct 27, 2023

Assembler: Add interaction in the Pages screen #83501

Assembler: Add interaction in the Pages screen #83501

Conversation

taipeicoder commented Oct 26, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 26, 2023 • edited by matticbot Loading

matticbot commented Oct 26, 2023 • edited Loading

miksansegundo commented Oct 26, 2023

taipeicoder commented Oct 26, 2023 • edited Loading

miksansegundo left a comment

Choose a reason for hiding this comment

taipeicoder commented Oct 26, 2023

fushar commented Oct 26, 2023

miksansegundo Oct 26, 2023

Choose a reason for hiding this comment

taipeicoder Oct 27, 2023

Choose a reason for hiding this comment

miksansegundo Oct 27, 2023

Choose a reason for hiding this comment

taipeicoder commented Oct 26, 2023 •

edited

Loading

github-actions bot commented Oct 26, 2023 •

edited by matticbot

Loading

matticbot commented Oct 26, 2023 •

edited

Loading

taipeicoder commented Oct 26, 2023 •

edited

Loading