Marketplace: Add search header #62080

Rolilink · 2022-03-19T00:20:07Z

Changes proposed in this Pull Request

Adds a header to the marketplace.
Moves the search component from the navigation bar to the header.
Adds a list of recommended searches.

Screenshots

Mobile	Tablet	Desktop

Testing instructions

Navigate into http://calypso.localhost:3000/plugins.
It should render the heading, the search bar and recommended searches.
Write seo on the search bar it should show seo related plugins.
Click the portfolio recommended search, it should show portfolio related plugins.
Navigate into http://calypso.localhost:3000/plugins/:siteSlug.
It should render the heading, the search bar and recommended searches.
Write seo on the search bar it should show seo related plugins.
Click the portfolio recommended search, it should show portfolio related plugins.

Related to #61863

github-actions · 2022-03-19T00:20:21Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-03-19T00:20:43Z

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

Sections (~217 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
plugins       +917 B  (+0.1%)     +217 B  (+0.1%)

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.

cpapazoglou · 2022-03-22T07:45:16Z

client/my-sites/plugins/plugins-browser/index.jsx

+const SearchHeader = ( props ) => {
+	const { doSearch, search, siteSlug, title, searchBoxRef } = props;
+
+	return (
+		<div className="plugins-browser__searchbox-container">
+			<div className="plugins-browser__searchbox-header">{ title }</div>
+			<div className="plugins-browser__searchbox" ref={ searchBoxRef }>
+				<SearchBox doSearch={ doSearch } search={ search } />
+			</div>
+			<PopularSearches
+				siteSlug={ siteSlug }
+				searchTerms={ [ 'shipping', 'seo', 'portfolio', 'chat', 'mailchimp' ] }
+			/>
+		</div>
+	);
+};
+
+const PopularSearches = ( props ) => {
+	const { searchTerms, siteSlug } = props;
+	const translate = useTranslate();
+
+	return (
+		<div className="plugins-browser__recommended-searches">
+			<div className="plugins-browser__recommended-searches-title">
+				{ translate( 'Most popular searches' ) }
+			</div>
+
+			<div className="plugins-browser__recommended-searches-list">
+				{ searchTerms.map( ( searchTerm ) => (
+					<a
+						href={ `/plugins/${ siteSlug || '' }?s=${ searchTerm }` }
+						className="plugins-browser__recommended-searches-list-item"
+					>
+						{ searchTerm }
+					</a>
+				) ) }
+			</div>
+		</div>
+	);
+};
+


Can we move new components under plugins for the SearchHeader? This file has already become too big and hard to handle.

Bundling their respective CSS and removing it from client/my-sites/plugins/plugins-browser/style.scss too.

sure, was thinking on doing that before pushing the PR to review

cpapazoglou · 2022-03-22T08:19:09Z

client/components/fixed-navigation-header/index.tsx

+				<ActionsContainer ref={ actionsRef }>{ actions }</ActionsContainer>
+				{ children }


What's the rationale behind this change? This component was created to have two sections:

left - Breadcrumb

right - ActionsContainer (as arbitrary children)

Do we really need a third section? Does unwrapping the children create any regressions?

@cpapazoglou I did this to be able to accommodate the sticky behavior of the SearchBox component, right now the FixedNavigationHeader behavior is to render the breadcrumbs and conditionally rendering the action section which is the one where the children's are rendered an example of this behavior can be seen on the woocommerce-installation flow.

To be able to stick the search bar without removing the actions at the right I added this changes, but I wonder if there is a better approach which doesn't impact the FixedNavigationHeader.

Also I tested the flow where we use the FixedNavigationHeader and no regressions or weird behavior where caused.

lsl

LGTM

lsl · 2022-03-24T01:34:24Z

client/my-sites/plugins/search-box-header/index.jsx

+		</div>
+	);
+};
+


Thank you for breaking things down like this. Everything being simple top level components is a nice way to make things re-usable in future.

cpapazoglou

Thanks for addressing all feedback and also splitting this which makes it far easier to review and merge! LGTM!

a8ci18n · 2022-03-24T16:16:43Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7205638

Thank you @Rolilink for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2022-04-15T23:28:45Z

Translation for this Pull Request has now been finished.

adds header and search bar

d72b7a2

allilevine assigned Rolilink Mar 21, 2022

Rolilink added 3 commits March 21, 2022 17:13

add popular searches

1953e37

lint

0e50d4b

fixes z-index style

ea528c6

cpapazoglou reviewed Mar 22, 2022

View reviewed changes

Rolilink mentioned this pull request Mar 22, 2022

Marketplace: Add search header #61863

Closed

3 tasks

obenland linked an issue Mar 22, 2022 that may be closed by this pull request

Marketplace: Add search header #61863

Closed

3 tasks

extracting components and mobile styles

4cbbeaa

Rolilink force-pushed the add/search-header-to-marketplace branch from 8b17774 to 4cbbeaa Compare March 23, 2022 20:52

Rolilink added 2 commits March 23, 2022 16:03

improving variable naming and adding documentation

316203b

fixing e2e tests

0325a0b

Rolilink force-pushed the add/search-header-to-marketplace branch from f8af9a9 to 0325a0b Compare March 23, 2022 21:19

Merge branch 'trunk' into add/search-header-to-marketplace

b9a6cc0

Rolilink marked this pull request as ready for review March 23, 2022 21:24

Rolilink requested a review from cpapazoglou March 23, 2022 21:41

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

Rolilink requested review from a team and vinimotaa March 23, 2022 21:41

lsl approved these changes Mar 24, 2022

View reviewed changes

cpapazoglou approved these changes Mar 24, 2022

View reviewed changes

Rolilink merged commit 65cda31 into trunk Mar 24, 2022

Rolilink deleted the add/search-header-to-marketplace branch March 24, 2022 15: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 Mar 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Marketplace: Add search header #62080

Marketplace: Add search header #62080

Rolilink commented Mar 19, 2022 •

edited

github-actions bot commented Mar 19, 2022 •

edited by matticbot

matticbot commented Mar 19, 2022 •

edited

cpapazoglou Mar 22, 2022

cpapazoglou Mar 22, 2022

Rolilink Mar 22, 2022

cpapazoglou Mar 22, 2022

Rolilink Mar 22, 2022

Rolilink Mar 22, 2022

lsl left a comment

lsl Mar 24, 2022

cpapazoglou left a comment

a8ci18n commented Mar 24, 2022

a8ci18n commented Apr 15, 2022

		<ActionsContainer ref={ actionsRef }>{ actions }</ActionsContainer>
		{ children }

Marketplace: Add search header #62080

Marketplace: Add search header #62080

Conversation

Rolilink commented Mar 19, 2022 • edited

Changes proposed in this Pull Request

Screenshots

Testing instructions

github-actions bot commented Mar 19, 2022 • edited by matticbot

matticbot commented Mar 19, 2022 • edited

cpapazoglou Mar 22, 2022

Choose a reason for hiding this comment

cpapazoglou Mar 22, 2022

Choose a reason for hiding this comment

Rolilink Mar 22, 2022

Choose a reason for hiding this comment

cpapazoglou Mar 22, 2022

Choose a reason for hiding this comment

Rolilink Mar 22, 2022

Choose a reason for hiding this comment

Rolilink Mar 22, 2022

Choose a reason for hiding this comment

lsl left a comment

Choose a reason for hiding this comment

lsl Mar 24, 2022

Choose a reason for hiding this comment

cpapazoglou left a comment

Choose a reason for hiding this comment

a8ci18n commented Mar 24, 2022

a8ci18n commented Apr 15, 2022

Rolilink commented Mar 19, 2022 •

edited

github-actions bot commented Mar 19, 2022 •

edited by matticbot

matticbot commented Mar 19, 2022 •

edited