From e9be0d3577c7563fa2b3211761feac8f0bd030c1 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 25 Feb 2026 17:45:01 -0300 Subject: [PATCH 1/5] Migrate search upsell page header to unified AdminHeader via title prop. Co-Authored-By: Claude Opus 4.6 --- .../components/pages/dashboard-page.scss | 2 +- .../components/pages/upsell-page/index.jsx | 61 ++++++++++++------- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss b/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss index 01db1edf0491..01148717cf2b 100644 --- a/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss +++ b/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss @@ -21,7 +21,7 @@ body { sans-serif; } -#wpcontent { +#wpcontent:not:has(.uses-new-admin-ui) { padding-left: 0 !important; } diff --git a/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx b/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx index 0f6bc9f7cf55..7d0568239878 100644 --- a/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx +++ b/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx @@ -27,7 +27,6 @@ import Price from 'components/price'; import SearchPromotionBlock from 'components/search-promotion'; import useProductCheckoutWorkflow from 'hooks/use-product-checkout-workflow'; import { STORE_ID } from 'store'; -import Header from './header'; import './styles.scss'; @@ -44,11 +43,14 @@ export default function UpsellPage( { isLoading = false } ) { // Introduce the gate for new pricing with URL parameter `new_pricing_202208=1` const APINonce = useSelect( select => select( STORE_ID ).getAPINonce(), [] ); const isNewPricing = useSelect( select => select( STORE_ID ).isNewPricing202208(), [] ); + const isWpcom = useSelect( select => select( STORE_ID ).isWpcom(), [] ); + const activateLicenseUrl = useSelect( + select => `${ select( STORE_ID ).getSiteAdminUrl() }admin.php?page=my-jetpack#/add-license` + ); useSelect( select => select( STORE_ID ).getSearchPricing(), [] ); const domain = useSelect( select => select( STORE_ID ).getCalypsoSlug(), [] ); const blogID = useSelect( select => select( STORE_ID ).getBlogId(), [] ); const adminUrl = useSelect( select => select( STORE_ID ).getSiteAdminUrl(), [] ); - const isWpcom = useSelect( select => select( STORE_ID ).isWpcom(), [] ); const { fetchSearchPlanInfo } = useDispatch( STORE_ID ); const checkSiteHasSearchProduct = useCallback( () => { @@ -90,29 +92,46 @@ export default function UpsellPage( { isLoading = false } ) { [ isLoading, hasCheckoutStartedPaid, hasCheckoutStartedFree ] ); + const licenseAction = ! isWpcom + ? createInterpolateElement( + __( + 'Already have an existing plan or license key? Click here to get started', + 'jetpack-search-pkg' + ), + { + a: , + } + ) + : null; + return ( <> { isPageLoading && } { ! isPageLoading && ( -
- } - moduleNameHref={ JETPACK_SEARCH__LINK } - useInternalLinks={ shouldUseInternalLinks() } - > - - { isNewPricing ? ( - - ) : ( - - ) } - - -
+ //
+ + + { isNewPricing ? ( + + ) : ( + + ) } + + + //
) } ); From ee871d6321a3d4dafd4c46639cf07b52b0ff57d8 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 25 Feb 2026 17:46:37 -0300 Subject: [PATCH 2/5] Add changelog entry for search package. Co-Authored-By: Claude Opus 4.6 --- .../search/changelog/update-normalize-search-admin-header | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/search/changelog/update-normalize-search-admin-header diff --git a/projects/packages/search/changelog/update-normalize-search-admin-header b/projects/packages/search/changelog/update-normalize-search-admin-header new file mode 100644 index 000000000000..fe84d4cdfc84 --- /dev/null +++ b/projects/packages/search/changelog/update-normalize-search-admin-header @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Migrate upsell page header to use unified AdminHeader component. From 802dfd5771b5f4b07549e41e0159ee32f01b3684 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 25 Feb 2026 19:02:00 -0300 Subject: [PATCH 3/5] Migrate search dashboard page header to AdminPage with unified AdminHeader. Co-Authored-By: Claude Opus 4.6 --- .../components/pages/dashboard-page.jsx | 140 +++++++++--------- .../components/pages/dashboard-page.scss | 7 - 2 files changed, 66 insertions(+), 81 deletions(-) diff --git a/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx b/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx index bf0e663b8e41..667605630af7 100644 --- a/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx +++ b/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx @@ -1,6 +1,6 @@ import { + AdminPage, JetpackFooter, - JetpackSearchLogo, Button, Container, Col, @@ -115,60 +115,73 @@ export default function DashboardPage( { isLoading = false } ) { { isPageLoading && } { ! isPageLoading && (
-
- { hasConnectionError && ( - - - - - - ) } - - { isNewPricing && supportsInstantSearch && ( - - ) } - { ! isNewPricing && supportsInstantSearch && ( - - ) } -
- + { __( 'Upgrade Jetpack Search', 'jetpack-search-pkg' ) } + + ) + } + className="uses-new-admin-ui" + showFooter={ false } + > + { hasConnectionError && ( + + + + + + ) } + -
-
- + { isNewPricing && supportsInstantSearch && ( + + ) } + { ! isNewPricing && supportsInstantSearch && ( + + ) } +
+ +
+
+ +
) } @@ -252,24 +265,3 @@ const Footer = () => { ); }; - -const Header = ( { isUpgradable, sendPaidPlanToCart } ) => { - const buttonLinkArgs = { - children: __( 'Upgrade Jetpack Search', 'jetpack-search-pkg' ), - variant: 'link', - onClick: sendPaidPlanToCart, - }; - - return ( -
-
-
-
- - { isUpgradable &&
-
-
-
- ); -}; diff --git a/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss b/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss index 01148717cf2b..40c129525ed7 100644 --- a/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss +++ b/projects/packages/search/src/dashboard/components/pages/dashboard-page.scss @@ -79,18 +79,11 @@ body { background-color: variables.$white; } - .jp-search-dashboard-header, .jp-search-dashboard-footer { padding: 2.5em 0; background-color: variables.$white; } - - .jp-search-dashboard-header__logo-container { - display: flex; - align-items: center; - justify-content: space-between; - } } .usage-meter-group { From e2c86eec6577e9c6687ac9e4a9e0ad2aa2c36112 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 25 Feb 2026 19:44:54 -0300 Subject: [PATCH 4/5] Delete unused search upsell header component and styles. Co-Authored-By: Claude Opus 4.6 --- .../components/pages/upsell-page/header.jsx | 37 ------------------- .../components/pages/upsell-page/index.jsx | 2 - .../components/pages/upsell-page/styles.scss | 25 ------------- 3 files changed, 64 deletions(-) delete mode 100644 projects/packages/search/src/dashboard/components/pages/upsell-page/header.jsx diff --git a/projects/packages/search/src/dashboard/components/pages/upsell-page/header.jsx b/projects/packages/search/src/dashboard/components/pages/upsell-page/header.jsx deleted file mode 100644 index 320d5422dc57..000000000000 --- a/projects/packages/search/src/dashboard/components/pages/upsell-page/header.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import { JetpackSearchLogo } from '@automattic/jetpack-components'; -import { useSelect } from '@wordpress/data'; -import { createInterpolateElement } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { STORE_ID } from 'store'; -import './styles.scss'; - -const Header = () => { - const activateLicenseUrl = useSelect( - select => `${ select( STORE_ID ).getSiteAdminUrl() }admin.php?page=my-jetpack#/add-license` - ); - - const isWpcom = useSelect( select => select( STORE_ID ).isWpcom(), [] ); - - return ( -
- - - - { ! isWpcom && ( -

- { createInterpolateElement( - __( - 'Already have an existing plan or license key? Click here to get started', - 'jetpack-search-pkg' - ), - { - a: , - } - ) } -

- ) } -
- ); -}; - -export default Header; diff --git a/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx b/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx index 7d0568239878..1946c883446b 100644 --- a/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx +++ b/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx @@ -108,7 +108,6 @@ export default function UpsellPage( { isLoading = false } ) { <> { isPageLoading && } { ! isPageLoading && ( - //
- //
) } ); diff --git a/projects/packages/search/src/dashboard/components/pages/upsell-page/styles.scss b/projects/packages/search/src/dashboard/components/pages/upsell-page/styles.scss index f0c3f3098a45..64374892b69b 100644 --- a/projects/packages/search/src/dashboard/components/pages/upsell-page/styles.scss +++ b/projects/packages/search/src/dashboard/components/pages/upsell-page/styles.scss @@ -1,30 +1,5 @@ @use "scss/variables"; -.jp-search-dashboard-upsell-page { - line-height: 1.5; - width: 100%; - - h1 { - line-height: 1.2; - } - - // Targets AdminPage component, which uses obfuscated CSS names. - > div { - margin-left: 0; - } - - &__header { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - gap: calc(var(--horizontal-spacing) * 3); - } - - &__logo { - flex-shrink: 0; - } -} - .price-tip { display: flex; height: 20px; From 3c390445ddfdf9d647a94b305af63d17c509ba74 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Thu, 26 Feb 2026 00:48:34 -0300 Subject: [PATCH 5/5] update logo locator for e2e --- .../plugins/search/tests/e2e/specs/search-dashboard.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/plugins/search/tests/e2e/specs/search-dashboard.test.ts b/projects/plugins/search/tests/e2e/specs/search-dashboard.test.ts index 65ff8c6af916..8b017d000132 100644 --- a/projects/plugins/search/tests/e2e/specs/search-dashboard.test.ts +++ b/projects/plugins/search/tests/e2e/specs/search-dashboard.test.ts @@ -60,8 +60,8 @@ test.describe( 'Search Dashboard', () => { await expect( instantSearchToggle, 'Instant search toggle should be visible' ).toBeVisible(); await expect( - page.getByRole( 'img', { name: 'Jetpack Search Logo' } ), - 'Header logo should be visible' + page.getByRole( 'img', { name: 'Jetpack Logo' } ), + 'Jetpack header logo should be visible' ).toBeVisible(); await expect(