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(