Reader Spaces: stepped create wizard + Feeds/Topics reorganization (#112470)

* Reader Spaces: make create a stepped wizard and reorganize the modal

Turn space creation into a guided multi-step wizard (Identity → Layout →
Feeds → Topics) with Back/Next/Create navigation and a step indicator, so
the options behind the former tabs aren't missed. Editing keeps the tabbed
layout. Reorganize the shared modal into Identity, Layout, Feeds, and Topics
(tags + languages) sections, add per-section descriptions, and rename the
user-facing "Sources" wording to "Feeds" across the modal and the feed empty
state.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Reader Spaces: address review feedback

* Reader Spaces: clarify topics tab test props type

* Reader Spaces: wait for create wizard final step

* Reader Spaces: update sidebar create flow test

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: gabrielcaires

client/reader/sidebar/spaces/test/index.test.tsx

@@ -84,6 +84,14 @@ function render( ui: React.ReactElement, initialState?: object ) {
 	} );
 }
 
+async function reachCreateStep( user: ReturnType< typeof userEvent.setup > ) {
+	await user.type( screen.getByLabelText( 'Name' ), 'Reading' );
+	await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+	await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+	await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+	await screen.findByRole( 'button', { name: 'Create' } );
+}
+
 describe( 'ReaderSidebarSpaces', () => {
 	beforeEach( () => {
 		jest.mocked( page ).mockClear();
@@ -247,7 +255,7 @@ describe( 'ReaderSidebarSpaces', () => {
 		render( <ReaderSidebarSpaces path={ OPEN_PATH } /> );
 
 		await user.click( screen.getByRole( 'button', { name: 'Create a space' } ) );
-		await user.type( screen.getByLabelText( 'Name' ), 'Reading' );
+		await reachCreateStep( user );
 		await user.click( screen.getByRole( 'button', { name: 'Create' } ) );
 
 		// The redirect happens in the create mutation's onSuccess, after the POST

client/reader/spaces/AGENTS.md

@@ -29,15 +29,16 @@ only, and wired to the real `wpcom/v2` backend.
 
 ## Editing a space (RSM-4117)
 
-`customize-modal/` is the **single upsert editor** for a space: a `TabPanel` with
-**Identity** (name, tags, accent color, icon), **Layout** (the feed-layout
-presets), **Sources** (the subscription add/remove list — migrated here from the
-old standalone `sources-modal/`, which no longer exists), and **Delete** (edit
-mode only, destructive _Delete space_ action that confirms via
-`confirm-delete.tsx`). The **Customize** header button opens edit mode on
-Identity. `create-modal/index.tsx` is a thin wrapper around the same upsert modal
-in create mode; after create, the sidebar navigates to the new space route
-without an action hash.
+`customize-modal/` is the **single upsert editor** for a space. Edit mode uses a
+`TabPanel` with **Identity** (name, accent color, icon), **Layout** (the
+feed-layout presets), **Feeds** (the subscription add/remove list — internally
+still keyed as `sources` because the API/client model maps wire `follows` to
+`sources`), **Topics** (tags and languages), and **Delete** (edit mode only,
+destructive _Delete space_ action that confirms via `confirm-delete.tsx`). The
+**Customize** header button opens edit mode on Identity. `create-modal/index.tsx`
+is a thin wrapper around the same upsert modal in create mode, rendered as a
+step-by-step wizard over Identity → Layout → Feeds → Topics; after create, the
+sidebar navigates to the new space route without an action hash.
 
 - **Save/Create batches the editable fields.** "Save changes" and "Create" send
   the same draft model: `name`, `tags`, `feeds`, and
@@ -105,8 +106,8 @@ without an action hash.
 
 - Create and edit share the upsert implementation in `customize-modal/index.tsx`;
   `create-modal/index.tsx` only adapts the existing public `CreateSpaceModal`
-  export to create mode. Keep Identity/Layout/Sources behavior in the shared
-  upsert modal so create and edit do not drift.
+  export to create mode. Keep the Identity/Layout/Feeds/Topics draft behavior in
+  the shared upsert modal so create and edit do not drift.
 - Validation: name required, <= `MAX_SPACE_NAME_LENGTH`, and case-insensitive
   duplicate against the existing names (edit passes the list with the current
   space removed). The error message is rendered manually

client/reader/spaces/create-modal/test/index.test.tsx

@@ -107,6 +107,23 @@ function setup( {
 	return { queryClient, onClose, onCreated, user };
 }
 
+type User = ReturnType< typeof userEvent.setup >;
+
+// Walk from the opening Identity step to the Feeds step. The name is required to
+// leave the first step, so it is entered here.
+async function reachFeedsStep( user: User, name = 'Reading' ) {
+	await user.type( screen.getByLabelText( 'Name' ), name );
+	await user.click( screen.getByRole( 'button', { name: 'Next' } ) ); // Identity → Layout
+	await user.click( screen.getByRole( 'button', { name: 'Next' } ) ); // Layout → Feeds
+}
+
+// Walk all the way to the final Topics step, where Create lives.
+async function reachTopicsStep( user: User, name = 'Reading' ) {
+	await reachFeedsStep( user, name );
+	await user.click( screen.getByRole( 'button', { name: 'Next' } ) ); // Feeds → Topics
+	await screen.findByRole( 'button', { name: 'Create' } );
+}
+
 describe( 'CreateSpaceModal', () => {
 	beforeEach( () => {
 		mockSubscriptions = [];
@@ -121,46 +138,65 @@ describe( 'CreateSpaceModal', () => {
 		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'keeps Create disabled until a valid name is entered', async () => {
+	it( 'keeps Next disabled until a valid name is entered', async () => {
 		const { user } = setup();
 
-		expect( screen.getByRole( 'button', { name: 'Create' } ) ).toBeDisabled();
+		expect( screen.getByRole( 'button', { name: 'Next' } ) ).toBeDisabled();
 
 		await user.type( screen.getByLabelText( 'Name' ), 'Reading' );
 
-		expect( screen.getByRole( 'button', { name: 'Create' } ) ).toBeEnabled();
+		expect( screen.getByRole( 'button', { name: 'Next' } ) ).toBeEnabled();
 	} );
 
-	it( 'uses the shared tabbed upsert modal while creating', async () => {
+	it( 'steps through the identity, layout, feeds and topics sections', async () => {
 		mockSubscriptions = [ mockSubscription ];
 		const { user } = setup();
 
 		const dialog = screen.getByRole( 'dialog', { name: 'Create a new space' } );
 
-		expect( within( dialog ).getByRole( 'tab', { name: 'Identity' } ) ).toBeVisible();
-		expect( within( dialog ).getByRole( 'tab', { name: 'Layout' } ) ).toBeVisible();
-		expect( within( dialog ).getByRole( 'tab', { name: 'Sources' } ) ).toBeVisible();
-		expect( within( dialog ).queryByRole( 'tab', { name: 'Delete' } ) ).not.toBeInTheDocument();
+		// The wizard replaces the tab strip with one step at a time.
+		expect( within( dialog ).queryByRole( 'tab' ) ).not.toBeInTheDocument();
+		expect( within( dialog ).getByLabelText( 'Name' ) ).toBeVisible();
+		expect( within( dialog ).getByLabelText( 'Step 1 of 4' ) ).toBeInTheDocument();
 
-		await user.click( within( dialog ).getByRole( 'tab', { name: 'Layout' } ) );
+		await user.type( within( dialog ).getByLabelText( 'Name' ), 'Reading' );
+		await user.click( within( dialog ).getByRole( 'button', { name: 'Next' } ) );
+
+		// Layout step.
 		expect( within( dialog ).getByRole( 'radio', { name: /Classic/ } ) ).toBeChecked();
+		await user.click( within( dialog ).getByRole( 'button', { name: 'Next' } ) );
 
-		await user.click( within( dialog ).getByRole( 'tab', { name: 'Sources' } ) );
+		// Feeds step: only the subscription picker.
 		expect(
-			within( dialog ).getByText( 'Choose which of your subscriptions appear in this space.' )
+			within( dialog ).getByText(
+				'Pick the subscriptions whose posts make up this space’s main feed.'
+			)
 		).toBeVisible();
+		expect( within( dialog ).getByRole( 'button', { name: 'All subscriptions' } ) ).toBeVisible();
 		expect( within( dialog ).getByRole( 'listitem', { name: 'Example Blog' } ) ).toBeVisible();
+		expect( within( dialog ).queryByRole( 'combobox', { name: 'Tags' } ) ).not.toBeInTheDocument();
+		await user.click( within( dialog ).getByRole( 'button', { name: 'Next' } ) );
+
+		// Topics step is last, so it carries the Create button.
+		expect( within( dialog ).getByRole( 'combobox', { name: 'Tags' } ) ).toBeVisible();
+		expect( within( dialog ).getByRole( 'combobox', { name: 'Languages' } ) ).toBeVisible();
+		expect( await within( dialog ).findByRole( 'button', { name: 'Create' } ) ).toBeVisible();
+
+		// Back returns to the previous step.
+		await user.click( within( dialog ).getByRole( 'button', { name: 'Back' } ) );
+		expect( within( dialog ).getByRole( 'button', { name: 'All subscriptions' } ) ).toBeVisible();
 	} );
 
-	it( 'shows a required error once the name is cleared', async () => {
+	it( 'cannot advance past the identity step without a name', async () => {
 		const { user } = setup();
 
-		const input = screen.getByLabelText( 'Name' );
-		await user.type( input, 'Reading' );
-		await user.clear( input );
+		expect( screen.getByRole( 'button', { name: 'Next' } ) ).toBeDisabled();
+
+		await user.type( screen.getByLabelText( 'Name' ), 'Reading' );
+		await user.clear( screen.getByLabelText( 'Name' ) );
 
 		expect( await screen.findByText( 'Name is required' ) ).toBeVisible();
-		expect( screen.getByRole( 'button', { name: 'Create' } ) ).toBeDisabled();
+		expect( screen.getByRole( 'button', { name: 'Next' } ) ).toBeDisabled();
 	} );
 
 	it( 'rejects a name longer than the maximum length', async () => {
@@ -169,7 +205,7 @@ describe( 'CreateSpaceModal', () => {
 		await user.type( screen.getByLabelText( 'Name' ), 'a'.repeat( 51 ) );
 
 		expect( await screen.findByText( /50 characters or fewer/ ) ).toBeVisible();
-		expect( screen.getByRole( 'button', { name: 'Create' } ) ).toBeDisabled();
+		expect( screen.getByRole( 'button', { name: 'Next' } ) ).toBeDisabled();
 	} );
 
 	it( 'rejects a duplicate name regardless of case', async () => {
@@ -178,7 +214,7 @@ describe( 'CreateSpaceModal', () => {
 		await user.type( screen.getByLabelText( 'Name' ), 'work' );
 
 		expect( await screen.findByText( 'A space with this name already exists' ) ).toBeVisible();
-		expect( screen.getByRole( 'button', { name: 'Create' } ) ).toBeDisabled();
+		expect( screen.getByRole( 'button', { name: 'Next' } ) ).toBeDisabled();
 	} );
 
 	it( 'creates a space with identity and layout settings, updates the caches, and closes', async () => {
@@ -187,17 +223,25 @@ describe( 'CreateSpaceModal', () => {
 		const onBody = jest.fn();
 		mockCreateEndpoint( 'Reading', onBody );
 
+		// Identity step.
 		await user.type( screen.getByLabelText( 'Name' ), 'Reading' );
 		await user.click(
 			within( screen.getByRole( 'radiogroup', { name: 'Accent color' } ) ).getByRole( 'radio', {
 				name: 'Green',
 			} )
 		);
 		await user.click( screen.getByRole( 'radio', { name: 'Star' } ) );
-		await user.click( screen.getByRole( 'tab', { name: 'Layout' } ) );
+		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+
+		// Layout step.
 		await user.click( screen.getByRole( 'radio', { name: /Classic/ } ) );
-		await user.click( screen.getByRole( 'tab', { name: 'Sources' } ) );
+		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+
+		// Feeds step.
 		await user.click( screen.getByRole( 'button', { name: 'Add Example Blog' } ) );
+		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+
+		// Topics step (last) carries the Create button.
 		await user.click( screen.getByRole( 'button', { name: 'Create' } ) );
 
 		await waitFor( () => expect( onClose ).toHaveBeenCalled() );
@@ -243,10 +287,11 @@ describe( 'CreateSpaceModal', () => {
 		const onBody = jest.fn();
 		mockCreateEndpoint( 'Leitura', onBody );
 
+		// The languages field lives on the final Topics step.
+		await reachTopicsStep( user, 'Leitura' );
 		const dialog = screen.getByRole( 'dialog', { name: 'Create a new space' } );
 		expect( within( dialog ).getByText( 'Português' ) ).toBeVisible();
 
-		await user.type( screen.getByLabelText( 'Name' ), 'Leitura' );
 		await user.click( screen.getByRole( 'button', { name: 'Create' } ) );
 
 		await waitFor( () => expect( onClose ).toHaveBeenCalled() );
@@ -255,12 +300,31 @@ describe( 'CreateSpaceModal', () => {
 		);
 	} );
 
+	it( 'sends topics entered in the wizard when creating', async () => {
+		const { user, onClose } = setup();
+		const onBody = jest.fn();
+		mockCreateEndpoint( 'Reading', onBody );
+
+		await reachTopicsStep( user );
+		await user.type( screen.getByRole( 'combobox', { name: 'Tags' } ), 'design[Enter]' );
+		await user.type( screen.getByRole( 'combobox', { name: 'Languages' } ), 'English[Enter]' );
+		await user.click( screen.getByRole( 'button', { name: 'Create' } ) );
+
+		await waitFor( () => expect( onClose ).toHaveBeenCalled() );
+		expect( onBody ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				tags: [ 'design' ],
+				languages: [ 'en' ],
+			} )
+		);
+	} );
+
 	it( 'sends no languages when the account has no locale', async () => {
 		const { user, onClose } = setup();
 		const onBody = jest.fn();
 		mockCreateEndpoint( 'Reading', onBody );
 
-		await user.type( screen.getByLabelText( 'Name' ), 'Reading' );
+		await reachTopicsStep( user );
 		await user.click( screen.getByRole( 'button', { name: 'Create' } ) );
 
 		await waitFor( () => expect( onClose ).toHaveBeenCalled() );
@@ -271,7 +335,7 @@ describe( 'CreateSpaceModal', () => {
 		const { user, onCreated } = setup();
 		mockCreateEndpoint( 'Reading' );
 
-		await user.type( screen.getByLabelText( 'Name' ), 'Reading' );
+		await reachTopicsStep( user );
 		await user.click( screen.getByRole( 'button', { name: 'Create' } ) );
 
 		await waitFor( () =>

client/reader/spaces/customize-modal/identity-tab.tsx

@@ -1,24 +1,14 @@
-import { FormTokenField, TextControl, __experimentalVStack as VStack } from '@wordpress/components';
+import { TextControl, __experimentalVStack as VStack } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
 import { SpaceColorPicker } from 'calypso/reader/spaces/color-picker';
 import { SpaceIconPicker } from 'calypso/reader/spaces/icon-picker';
-import {
-	SPACE_LANGUAGE_SUGGESTIONS,
-	getLanguageCodeByName,
-	getLanguageName,
-	resolveLanguageTokens,
-} from 'calypso/reader/spaces/languages';
 import type { SpaceColor, SpaceIcon, SpaceTextColor } from '@automattic/api-core';
 
 interface Props {
 	name: string;
 	onNameChange: ( name: string ) => void;
 	nameError: string | null;
-	tags: string[];
-	onTagsChange: ( tags: string[] ) => void;
-	languages: string[];
-	onLanguagesChange: ( languages: string[] ) => void;
 	color: SpaceTextColor;
 	onColorChange: ( color: SpaceTextColor ) => void;
 	iconColor: SpaceColor;
@@ -31,10 +21,6 @@ export function IdentityTab( {
 	name,
 	onNameChange,
 	nameError,
-	tags,
-	onTagsChange,
-	languages,
-	onLanguagesChange,
 	color,
 	onColorChange,
 	iconColor,
@@ -64,36 +50,6 @@ export function IdentityTab( {
 						{ nameError }
 					</p>
 				) : null }
-				<FormTokenField
-					__next40pxDefaultSize
-					label={ translate( 'Tags' ) }
-					value={ tags }
-					placeholder={ translate( 'Add tags' ) }
-					onChange={ ( tokens ) =>
-						onTagsChange(
-							tokens.map( ( token ) => ( typeof token === 'string' ? token : token.value ) )
-						)
-					}
-					help={ translate( 'Type and press Enter to add; click x to remove.' ) }
-				/>
-				<FormTokenField
-					__next40pxDefaultSize
-					__experimentalExpandOnFocus
-					// Restrict tokens to known languages so only valid base codes are
-					// stored; free-typed text that doesn't resolve to a language is rejected.
-					__experimentalValidateInput={ ( input: string ) =>
-						getLanguageCodeByName( input ) !== undefined
-					}
-					label={ translate( 'Languages' ) }
-					// The field works in display names; the parent state is base codes.
-					value={ languages.map( getLanguageName ) }
-					suggestions={ SPACE_LANGUAGE_SUGGESTIONS }
-					placeholder={ translate( 'Add languages' ) }
-					onChange={ ( tokens ) => onLanguagesChange( resolveLanguageTokens( tokens, languages ) ) }
-					help={ translate(
-						'Filters Discover results to these languages. Starts from your account language; add more as needed.'
-					) }
-				/>
 			</VStack>
 
 			<VStack spacing={ 2 }>