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.
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 01db1edf0491..40c129525ed7 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;
}
@@ -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 {
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 0f6bc9f7cf55..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
@@ -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,44 @@ 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 ? (
+
+ ) : (
+
+ ) }
+
+
) }
>
);
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;
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(