diff --git a/projects/packages/search/changelog/rsm-2400-feature-selector-hide-off-on-wpcom b/projects/packages/search/changelog/rsm-2400-feature-selector-hide-off-on-wpcom new file mode 100644 index 00000000000..da8a2f0e1fc --- /dev/null +++ b/projects/packages/search/changelog/rsm-2400-feature-selector-hide-off-on-wpcom @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Search dashboard: hide the Off row of the new feature-selector on WordPress.com, matching the legacy module control's behaviour. diff --git a/projects/packages/search/src/dashboard/components/feature-selector/index.jsx b/projects/packages/search/src/dashboard/components/feature-selector/index.jsx index 3d00991ef96..fddaef0fbd3 100644 --- a/projects/packages/search/src/dashboard/components/feature-selector/index.jsx +++ b/projects/packages/search/src/dashboard/components/feature-selector/index.jsx @@ -2,7 +2,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { Button, Stack } from '@wordpress/ui'; import { STORE_ID } from 'store'; -import { EXPERIENCE_ORDER } from './constants'; +import { EXPERIENCE, EXPERIENCE_ORDER } from './constants'; import ExperienceOption from './experience-option'; import './style.scss'; @@ -18,15 +18,26 @@ import './style.scss'; * @return {import('react').Element} - The selector. */ export default function FeatureSelector() { - const isDirty = useSelect( select => select( STORE_ID ).isDirty(), [] ); - const isUpdating = useSelect( select => select( STORE_ID ).isUpdatingJetpackSettings(), [] ); - const pendingExperience = useSelect( select => select( STORE_ID ).getPendingExperience(), [] ); - const supportsOnlyClassicSearch = useSelect( - select => select( STORE_ID ).supportsOnlyClassicSearch(), + // On WordPress.com Simple sites (where `IS_WPCOM` is defined), search + // activation is managed from the .com side, so we hide the Off row here to + // mirror the legacy ``'s `! isWpcom` gate around the + // "Enable Jetpack Search" toggle. + const { isDirty, isUpdating, pendingExperience, supportsOnlyClassicSearch, isWpcom } = useSelect( + select => ( { + isDirty: select( STORE_ID ).isDirty(), + isUpdating: select( STORE_ID ).isUpdatingJetpackSettings(), + pendingExperience: select( STORE_ID ).getPendingExperience(), + supportsOnlyClassicSearch: select( STORE_ID ).supportsOnlyClassicSearch(), + isWpcom: select( STORE_ID ).isWpcom(), + } ), [] ); const { saveExperience } = useDispatch( STORE_ID ); + const visibleExperiences = isWpcom + ? EXPERIENCE_ORDER.filter( experience => experience !== EXPERIENCE.OFF ) + : EXPERIENCE_ORDER; + const isExperienceDisabled = experience => supportsOnlyClassicSearch && ( experience === 'embedded' || experience === 'overlay' ); @@ -51,7 +62,7 @@ export default function FeatureSelector() { aria-labelledby="jp-search-feature-selector-heading" > - { EXPERIENCE_ORDER.map( experience => ( + { visibleExperiences.map( experience => ( ', () => { expect( screen.getByRole( 'radio', { name: /theme search/i } ) ).toBeEnabled(); expect( screen.getByRole( 'radio', { name: /off/i } ) ).toBeEnabled(); } ); + + test( 'hides the Off row on WordPress.com (parity with legacy ModuleControl)', () => { + const registry = createRegistry(); + const store = createReduxStore( STORE_ID, { + ...storeConfig, + initialState: { + ...( storeConfig.initialState || {} ), + jetpackSettings: baseSettings, + siteData: { isWpcom: true }, + }, + } ); + registry.register( store ); + render( + + + + ); + const radios = screen.getAllByRole( 'radio' ); + expect( radios ).toHaveLength( 3 ); + expect( screen.getByRole( 'radio', { name: /embedded search/i } ) ).toBeInTheDocument(); + expect( screen.getByRole( 'radio', { name: /overlay search/i } ) ).toBeInTheDocument(); + expect( screen.getByRole( 'radio', { name: /theme search/i } ) ).toBeInTheDocument(); + expect( screen.queryByRole( 'radio', { name: /off/i } ) ).not.toBeInTheDocument(); + } ); } );