Expand collapse extendable task list (https://github.com/woocommerce/woocommerce-admin/pull/6910)

* Partial change with new task-list

* Made use of the new CollapsibleList for the extended list

* Add test for expansion item

* Add changelog

* Add tracks for expand and collapse

* Update translation to plural/singular option

plugins/woocommerce-admin/client/task-list/index.js

@@ -21,7 +21,7 @@ import './style.scss';
 import CartModal from '../dashboard/components/cart-modal';
 import { getAllTasks } from './tasks';
 import { getCountryCode } from '../dashboard/utils';
-import TaskList from './list';
+import TaskList from './task-list';
 import { DisplayOption } from '../header/activity-panel/display-options';
 import { TaskStep } from './task-step';
 

plugins/woocommerce-admin/client/task-list/task-list.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
 import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -9,6 +9,7 @@ import {
 	EllipsisMenu,
 	Badge,
 	__experimentalList as List,
+	__experimentalCollapsibleList as CollapsibleList,
 } from '@woocommerce/components';
 import { updateQueryString } from '@woocommerce/navigation';
 import { OPTIONS_STORE_NAME, ONBOARDING_STORE_NAME } from '@woocommerce/data';
@@ -246,6 +247,31 @@ export const TaskList = ( {
 		return <div className="woocommerce-task-dashboard__container"></div>;
 	}
 
+	const expandLabel = sprintf(
+		/* translators: %i = number of hidden tasks */
+		_n(
+			'Show %i more task.',
+			'Show %i more tasks.',
+			listTasks.length - 2,
+			'woocommerce-admin'
+		),
+		listTasks.length - 2
+	);
+	const collapseLabel = __( 'Show less', 'woocommerce-admin' );
+	const ListComp = name === 'task_list' ? List : CollapsibleList;
+
+	const listProps =
+		name === 'task_list'
+			? {}
+			: {
+					collapseLabel,
+					expandLabel,
+					show: 2,
+					onCollapse: () =>
+						recordEvent( 'extended_tasklist_collapse' ),
+					onExpand: () => recordEvent( 'extended_tasklist_expand' ),
+			  };
+
 	return (
 		<>
 			<div className="woocommerce-task-dashboard__container">
@@ -261,7 +287,7 @@ export const TaskList = ( {
 						{ renderMenu() }
 					</CardHeader>
 					<CardBody>
-						<List animation="slide-right">
+						<ListComp animation="slide-right" { ...listProps }>
 							{ listTasks.map( ( task ) => (
 								<TaskItem
 									key={ task.key }
@@ -274,7 +300,7 @@ export const TaskList = ( {
 									time={ task.time }
 								/>
 							) ) }
-						</List>
+						</ListComp>
 					</CardBody>
 				</Card>
 			</div>

plugins/woocommerce-admin/client/task-list/test/index.js

@@ -18,7 +18,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import TaskDashboard from '../';
-import { TaskList } from '../list';
+import { TaskList } from '../task-list';
 import { getAllTasks } from '../tasks';
 import { DisplayOption } from '../../header/activity-panel/display-options';
 
@@ -206,6 +206,28 @@ describe( 'TaskDashboard and TaskList', () => {
 		expect( queryByText( EXTENDED_TASK_LIST_HEADING ) ).not.toBeNull();
 	} );
 
+	it( 'renders only the extended task list with expansion', () => {
+		useSelect.mockImplementation( () => ( {
+			dismissedTasks: [],
+			isSetupTaskListHidden: true,
+			profileItems: {},
+		} ) );
+		apiFetch.mockResolvedValue( {} );
+		getAllTasks.mockReturnValue( {
+			setup: [],
+			extension: [ ...tasks.setup, ...tasks.extension ],
+		} );
+		const { queryByText } = render( <TaskDashboard query={ {} } /> );
+
+		expect( queryByText( TASK_LIST_HEADING ) ).toBeNull();
+
+		expect( queryByText( EXTENDED_TASK_LIST_HEADING ) ).not.toBeNull();
+		const taskLength = tasks.setup.length + tasks.extension.length;
+		expect(
+			queryByText( `Show ${ taskLength - 2 } more tasks.` )
+		).toBeInTheDocument();
+	} );
+
 	it( 'sets homescreen layout default when dismissed', () => {
 		const { getByRole } = render(
 			<TaskList

plugins/woocommerce-admin/readme.txt

@@ -89,7 +89,8 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Dev: Fixed storybook build script #6875
 - Dev: Removed allowed keys list for adding woocommerce_meta data. #6889 🎉 @xristos3490
 - Dev: Delete all products when running product import tests, unskip previously skipped test. #6905
-- Feature: Add recommended payment methods in payment settings. #6760
+- Enhancement: Add recommended payment methods in payment settings. #6760
+- Enhancement: Add expand/collapse to extendable task list. #6910
 - Fix: Disable the continue btn on OBW when requested are being made #6838
 - Fix: Event tracking for merchant email notes #6616
 - Fix: Use the store timezone to make time data requests #6632