Skip to content

Migrate search upsell page to unified AdminHeader #47332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CGastrell wants to merge 4 commits into
base: update/normalize-admin-page-headers
Choose a base branch
from
Open

Migrate search upsell page to unified AdminHeader #47332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9be0d3
Migrate search upsell page header to unified AdminHeader via title prop.
CGastrell Feb 25, 2026
ee871d6
Add changelog entry for search package.
CGastrell Feb 25, 2026
802dfd5
Migrate search dashboard page header to AdminPage with unified AdminH…
CGastrell Feb 25, 2026
e2c86ee
Delete unused search upsell header component and styles.
CGastrell Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/search/changelog/update-normalize-search-admin-header
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Migrate upsell page header to use unified AdminHeader component.
140 changes: 66 additions & 74 deletions projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
AdminPage,
JetpackFooter,
JetpackSearchLogo,
Button,
Container,
Col,
Expand Down Expand Up @@ -115,60 +115,73 @@ export default function DashboardPage( { isLoading = false } ) {
{ isPageLoading && <Loading /> }
{ ! isPageLoading && (
<div className="jp-search-dashboard-page">
<Header
isUpgradable={ ( isNewPricing && isFreePlan ) || ! supportsInstantSearch }
sendPaidPlanToCart={ sendPaidPlanToCart }
/>
{ hasConnectionError && (
<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
<Col lg={ 12 } md={ 12 } sm={ 12 }>
<ConnectionError />
</Col>
</Container>
) }
<MockedSearchInterface
supportsInstantSearch={ supportsInstantSearch }
supportsOnlyClassicSearch={ supportsOnlyClassicSearch }
/>
{ isNewPricing && supportsInstantSearch && (
<PlanInfo
hasIndex={ postCount !== 0 }
recordMeterInfo={ recordMeterInfo }
isFreePlan={ isFreePlan }
sendPaidPlanToCart={ sendPaidPlanToCart }
/>
) }
{ ! isNewPricing && supportsInstantSearch && (
<RecordMeter
postCount={ postCount }
postTypeBreakdown={ postTypeBreakdown }
tierMaximumRecords={ tierMaximumRecords }
lastIndexedDate={ lastIndexedDate }
postTypes={ postTypes }
/>
) }
<div className="jp-search-dashboard-bottom">
<ModuleControl
siteAdminUrl={ siteAdminUrl }
updateOptions={ updateOptions }
domain={ domain }
isDisabledFromOverLimit={ isOverLimit }
isInstantSearchPromotionActive={ isInstantSearchPromotionActive }
supportsOnlyClassicSearch={ supportsOnlyClassicSearch }
supportsSearch={ supportsSearch }
<AdminPage
title={ __( 'Search', 'jetpack-search-pkg' ) }
subTitle={ __(
'Help your visitors find exactly what they are looking for.',
'jetpack-search-pkg'
) }
actions={
( ( isNewPricing && isFreePlan ) || ! supportsInstantSearch ) && (
<Button variant="link" onClick={ sendPaidPlanToCart }>
{ __( 'Upgrade Jetpack Search', 'jetpack-search-pkg' ) }
</Button>
)
}
className="uses-new-admin-ui"
showFooter={ false }
>
{ hasConnectionError && (
<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
<Col lg={ 12 } md={ 12 } sm={ 12 }>
<ConnectionError />
</Col>
</Container>
) }
<MockedSearchInterface
supportsInstantSearch={ supportsInstantSearch }
isModuleEnabled={ isModuleEnabled }
isInstantSearchEnabled={ isInstantSearchEnabled }
isSavingEitherOption={ isSavingEitherOption }
isTogglingModule={ isTogglingModule }
isTogglingInstantSearch={ isTogglingInstantSearch }
supportsOnlyClassicSearch={ supportsOnlyClassicSearch }
/>
</div>
<Footer />
<NoticesList
notices={ notices }
handleLocalNoticeDismissClick={ handleLocalNoticeDismissClick }
/>
{ isNewPricing && supportsInstantSearch && (
<PlanInfo
hasIndex={ postCount !== 0 }
recordMeterInfo={ recordMeterInfo }
isFreePlan={ isFreePlan }
sendPaidPlanToCart={ sendPaidPlanToCart }
/>
) }
{ ! isNewPricing && supportsInstantSearch && (
<RecordMeter
postCount={ postCount }
postTypeBreakdown={ postTypeBreakdown }
tierMaximumRecords={ tierMaximumRecords }
lastIndexedDate={ lastIndexedDate }
postTypes={ postTypes }
/>
) }
<div className="jp-search-dashboard-bottom">
<ModuleControl
siteAdminUrl={ siteAdminUrl }
updateOptions={ updateOptions }
domain={ domain }
isDisabledFromOverLimit={ isOverLimit }
isInstantSearchPromotionActive={ isInstantSearchPromotionActive }
supportsOnlyClassicSearch={ supportsOnlyClassicSearch }
supportsSearch={ supportsSearch }
supportsInstantSearch={ supportsInstantSearch }
isModuleEnabled={ isModuleEnabled }
isInstantSearchEnabled={ isInstantSearchEnabled }
isSavingEitherOption={ isSavingEitherOption }
isTogglingModule={ isTogglingModule }
isTogglingInstantSearch={ isTogglingInstantSearch }
/>
</div>
<Footer />
<NoticesList
notices={ notices }
handleLocalNoticeDismissClick={ handleLocalNoticeDismissClick }
/>
</AdminPage>
</div>
) }
</>
Expand Down Expand Up @@ -252,24 +265,3 @@ const Footer = () => {
</div>
);
};

const Header = ( { isUpgradable, sendPaidPlanToCart } ) => {
const buttonLinkArgs = {
children: __( 'Upgrade Jetpack Search', 'jetpack-search-pkg' ),
variant: 'link',
onClick: sendPaidPlanToCart,
};

return (
<div className="jp-search-dashboard-header jp-search-dashboard-wrap">
<div className="jp-search-dashboard-row">
<div className="lg-col-span-12 md-col-span-8 sm-col-span-4">
<div className="jp-search-dashboard-header__logo-container">
<JetpackSearchLogo className="jp-search-dashboard-header__masthead" />
{ isUpgradable && <Button { ...buttonLinkArgs } /> }
</div>
</div>
</div>
</div>
);
};
9 changes: 1 addition & 8 deletions projects/packages/search/src/dashboard/components/pages/dashboard-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ body {
sans-serif;
}

#wpcontent {
#wpcontent:not:has(.uses-new-admin-ui) {
padding-left: 0 !important;
}

Expand Down Expand Up @@ -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 {
Expand Down
37 changes: 0 additions & 37 deletions projects/packages/search/src/dashboard/components/pages/upsell-page/header.jsx
View file
Open in desktop

This file was deleted.

59 changes: 38 additions & 21 deletions projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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( () => {
Expand Down Expand Up @@ -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? <a>Click here to get started</a>',
'jetpack-search-pkg'
),
{
a: <a href={ activateLicenseUrl } />,
}
)
: null;

return (
<>
{ isPageLoading && <Loading /> }
{ ! isPageLoading && (
<div className="jp-search-dashboard-upsell-page">
<AdminPage
moduleName={ __( 'Jetpack Search', 'jetpack-search-pkg' ) }
header={ <Header /> }
moduleNameHref={ JETPACK_SEARCH__LINK }
useInternalLinks={ shouldUseInternalLinks() }
>
<AdminSectionHero>
{ isNewPricing ? (
<NewPricingComponent
sendToCartPaid={ sendToCartPaid }
sendToCartFree={ sendToCartFree }
/>
) : (
<OldPricingComponent sendToCart={ sendToCartPaid } />
) }
</AdminSectionHero>
</AdminPage>
</div>
<AdminPage
moduleName={ __( 'Jetpack Search', 'jetpack-search-pkg' ) }
title={ __( 'Search', 'jetpack-search-pkg' ) }
subTitle={ __(
'Help you visitors find exactly what they are looking for.',
'jetpack-search-pkg'
) }
actions={ licenseAction }
moduleNameHref={ JETPACK_SEARCH__LINK }
useInternalLinks={ shouldUseInternalLinks() }
>
<AdminSectionHero>
{ isNewPricing ? (
<NewPricingComponent
sendToCartPaid={ sendToCartPaid }
sendToCartFree={ sendToCartFree }
/>
) : (
<OldPricingComponent sendToCart={ sendToCartPaid } />
) }
</AdminSectionHero>
</AdminPage>
) }
</>
);
Expand Down
25 changes: 0 additions & 25 deletions projects/packages/search/src/dashboard/components/pages/upsell-page/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Loading