Task List Phase 2

config/dependency-injection/services.php

@@ -68,6 +68,7 @@
 	'wordpress',
 	'values/oauth',
 	'values/robots',
+	'task-list/application/tasks/child-tasks',
 ];
 
 $yoast_seo_excluded = \implode( ',', \array_merge( $yoast_seo_excluded_directories, $yoast_seo_excluded_files ) );

packages/dashboard-frontend/package.json

@@ -68,6 +68,7 @@
     "@reduxjs/toolkit": "^1.8.3",
     "@wordpress/i18n": "^5.8.2",
     "classnames": "^2.5.1",
+    "dompurify": "^2.4.7",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {

packages/dashboard-frontend/src/icons/ellipse-with-inner-dot.js

@@ -0,0 +1,11 @@
+const EllipseWithInnerDot = ( props ) => (
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+		<rect
+			x="3" y="3" width="18" height="18" rx="9" stroke="currentColor"
+			strokeWidth="2"
+		/>
+		<circle cx="12" cy="12" r="2" fill="currentColor" />
+	</svg>
+);
+
+export default EllipseWithInnerDot;

packages/dashboard-frontend/src/icons/index.js

@@ -1,3 +1,2 @@
-export { default as HowIcon } from "./HowIcon";
-export { default as YoastIcon } from "./YoastIcon";
-export { default as Ellipse } from "./Ellipse";
+export { default as EllipseWithInnerDot } from "./ellipse-with-inner-dot";
+export { TaskStatusIcon } from "./task-status-icon";

packages/dashboard-frontend/src/icons/task-status-icon.js

@@ -0,0 +1,21 @@
+import { CheckCircleIcon } from "@heroicons/react/outline";
+import { EllipseWithInnerDot } from ".";
+import { __ } from "@wordpress/i18n";
+
+/**
+ * The TaskStatusIcon component to display the status of a task. It indicates whether the task is completed or loading.
+ * It adds appropriate ARIA labels for accessibility.
+ *
+ * @param {boolean} isCompleted Whether the task is completed.
+ * @param {boolean} isLoading Whether the task is loading.
+ * @returns {JSX.Element} The TaskStatusIcon component.
+ */
+export const TaskStatusIcon = ( { isCompleted, isLoading } ) => {
+	if ( isLoading ) {
+		return <EllipseWithInnerDot className="yst-w-6 yst-text-slate-200 yst-shrink-0" role="img" aria-label={ __( "Task loading", "wordpress-seo" ) } />;
+	}
+	if ( isCompleted ) {
+		return  <CheckCircleIcon className="yst-w-6 yst-text-green-500 yst-shrink-0 yst-self-start" role="img" aria-hidden="false" aria-label={ __( "Task completed", "wordpress-seo" ) } />;
+	}
+	return <EllipseWithInnerDot className="yst-w-6 yst-text-primary-500 yst-shrink-0" role="img" aria-label={ __( "Task not completed", "wordpress-seo" ) } />;
+};

packages/dashboard-frontend/src/index.js

@@ -115,5 +115,8 @@ export { TaskModal } from "./task-list/components/task-modal";
 export { TaskRow } from "./task-list/components/task-row";
 export { TasksProgressBar } from "./task-list/components/tasks-progressbar";
 export { GetTasksErrorRow } from "./task-list/components/get-tasks-error-row";
+export { TaskListTable } from "./task-list/components/task-list-table";
+export { ChildTasks } from "./task-list/components/child-tasks";
+export { TaskListProvider, useTaskListContext } from "./task-list/task-list-context";
 export * from "./store";
 

packages/dashboard-frontend/src/store/task-list.js

@@ -1,9 +1,10 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { get, keys } from "lodash";
+import { createSlice, createSelector } from "@reduxjs/toolkit";
+import { get, keys, sortBy, values, size } from "lodash";
 import { ASYNC_ACTION_NAMES, ASYNC_ACTION_STATUS } from "../constants";
 
 export const TASK_LIST_NAME = "taskList";
 const COMPLETE_TASK = "completeTask";
+const FETCH_TASK = "fetchTasks";
 
 /**
  * @typedef {Object} CallToAction
@@ -12,18 +13,28 @@ const COMPLETE_TASK = "completeTask";
  * @property {string} [href]
  */
 
+/**
+ * @typedef {Object} Analyzer
+ * @property {string} title The title for the analyzer.
+ * @property {string} type The variant of the analyzer.
+ * @property {string} result The result of the analyzer.
+ * @property {string} resultLabel The label for the result of the analyzer.
+ * @property {string} resultDescription The description of the analyzer.
+ */
+
 /**
  * @typedef {Object} Task
  * @property {string} id
  * @property {boolean} isCompleted
  * @property {string} title
  * @property {number} duration
  * @property {string} priority
- * @property {string} why
- * @property {string} how
+ * @property {string[]} about
  * @property {string} status
  * @property {Object|null} error
  * @property {CallToAction} callToAction
+ * @property {boolean} isParentTask
+ * @property {Analyzer} analyzer
  */
 
 /**
@@ -38,6 +49,8 @@ const COMPLETE_TASK = "completeTask";
  * @property {Object.<string, Task>} tasks
  * @property {Endpoints} endpoints
  * @property {string} nonce
+ * @property {string} status
+ * @property {string|null} error
  */
 
 /** @type {TaskListState} */
@@ -49,8 +62,38 @@ const initialState = {
 		getTasks: "",
 	},
 	nonce: "",
+	status: ASYNC_ACTION_STATUS.idle,
+	error: null,
+	currentOpenTaskId: null,
 };
 
+/**
+ * Sort tasks whenever they change.
+ * Sorting order:
+ * 1. Incomplete tasks first.
+ * 2. Higher priority tasks first (high, medium, low).
+  * 3. If tasks have the same completion status and priority, sort by duration (shorter duration first).
+ * 4. If tasks have the same completion status, priority, and duration, sort alphabetically by title.
+ *
+ * @param {Object.<string, Task>} tasks The tasks to sort.
+ *
+ * @returns {Object.<string, Task>} The sorted tasks.
+ */
+function sortTasks( tasks ) {
+	const priorityOrder = { high: 1, medium: 2, low: 3 };
+	const sortedTasksArray = sortBy( values( tasks ), [
+		( task ) => task.isCompleted,
+		( task ) => priorityOrder[ task.priority ],
+		( task ) => task.duration,
+		( task ) => task.title.toLowerCase(),
+	] );
+	// Return an object with the same structure, but sorted.
+	return sortedTasksArray.reduce( ( acc, task ) => {
+		acc[ task.id ] = task;
+		return acc;
+	}, {} );
+}
+
 /**
  * Completes a task by its ID.
  *
@@ -76,18 +119,45 @@ function* completeTask( id, endpoint, nonce ) {
 	}
 }
 
+/**
+ * Fetches tasks from the given endpoint.
+ *
+ * @param {string} endpoint The get tasks endpoint.
+ * @param {string} nonce The WP nonce.
+ * @returns {Object} Success or error action object.
+ */
+function* fetchTasks( endpoint, nonce ) {
+	yield{ type: `${ FETCH_TASK }/${ ASYNC_ACTION_NAMES.request }` };
+	try {
+		const response = yield{
+			type: FETCH_TASK,
+			payload: { nonce, endpoint },
+		};
+		if ( response.success !== true ) {
+			throw new Error( response.error );
+		}
+		return { type: `${ FETCH_TASK }/${ ASYNC_ACTION_NAMES.success }`, payload: { tasks: response.tasks } };
+	} catch ( error ) {
+		return { type: `${ FETCH_TASK }/${ ASYNC_ACTION_NAMES.error }`, payload: { error } };
+	}
+}
+
 const slice = createSlice( {
 	name: TASK_LIST_NAME,
 	initialState,
 	reducers: {
 		setTasks( state, { payload } ) {
+			const tasks = {};
 			keys( payload ).forEach( ( id ) => {
-				payload[ id ].status = ASYNC_ACTION_STATUS.idle;
-				payload[ id ].error = null;
-				// eslint-disable-next-line no-inline-comments
-				payload[ id ].badge = null; // Remove this when we want to re-instate badges.
+				tasks[ id ] = {
+					...payload[ id ],
+					status: ASYNC_ACTION_STATUS.idle,
+					error: null,
+					badge: null,
+					// Remove this when we want to re-instate badges.
+				};
 			} );
-			state.tasks = payload;
+			state.tasks = tasks;
 		},
 		setTaskCompleted( state, { payload } ) {
 			if ( state.tasks[ payload ] ) {
@@ -100,6 +170,9 @@ const slice = createSlice( {
 				state.tasks[ payload ].status = ASYNC_ACTION_STATUS.idle;
 			}
 		},
+		setCurrentOpenTaskId( state, { payload } ) {
+			state.currentOpenTaskId = payload;
+		},
 	},
 	extraReducers: ( builder ) => {
 		builder.addCase( `${ COMPLETE_TASK }/${ ASYNC_ACTION_NAMES.request }`, ( state, { payload: { id } } ) => {
@@ -114,6 +187,19 @@ const slice = createSlice( {
 			state.tasks[ id ].status = ASYNC_ACTION_STATUS.error;
 			state.tasks[ id ].error = error.message;
 		} );
+		builder.addCase( `${ FETCH_TASK }/${ ASYNC_ACTION_NAMES.success }`, ( state, { payload: { tasks } } ) => {
+			slice.caseReducers.setTasks( state, { payload: sortTasks( tasks ) } );
+			state.status = ASYNC_ACTION_STATUS.idle;
+			state.error = null;
+		} );
+		builder.addCase( `${ FETCH_TASK }/${ ASYNC_ACTION_NAMES.request }`, ( state ) => {
+			state.status = ASYNC_ACTION_STATUS.loading;
+			state.error = null;
+		} );
+		builder.addCase( `${ FETCH_TASK }/${ ASYNC_ACTION_NAMES.error }`, ( state, { payload: { error } } ) => {
+			state.status = ASYNC_ACTION_STATUS.error;
+			state.error = error.message;
+		} );
 	},
 } );
 
@@ -130,11 +216,49 @@ export const taskListSelectors = {
 	selectTasksEndpoints: ( state ) => get( state, [ TASK_LIST_NAME, "endpoints" ], {} ),
 	selectNonce: ( state ) => get( state, [ TASK_LIST_NAME, "nonce" ], "" ),
 	selectIsTaskCompleted: ( state, id ) => get( state, [ TASK_LIST_NAME, "tasks", id, "isCompleted" ], null ),
+	selectTasksStatus: ( state ) => get( state, [ TASK_LIST_NAME, "status" ], ASYNC_ACTION_STATUS.idle ),
+	selectTasksError: ( state ) => get( state, [ TASK_LIST_NAME, "error" ], null ),
+	selectSortedTasks: createSelector(
+		( state ) => get( state, [ TASK_LIST_NAME, "tasks" ], {} ),
+		( tasks ) => sortTasks( tasks )
+	),
+	selectTotalTasksCount: ( state, includeChildTasks = false ) => {
+		const tasks = get( state, [ TASK_LIST_NAME, "tasks" ], {} );
+		if ( includeChildTasks ) {
+			return size( tasks );
+		}
+		return size(
+			values( tasks ).filter( task => ! task.parentTaskId )
+		);
+	},
+	selectCompletedTasksCount: ( state, includeChildTasks = false ) => {
+		const tasks = get( state, [ TASK_LIST_NAME, "tasks" ], {} );
+		if ( includeChildTasks ) {
+			return size(
+				values( tasks ).filter( task => task.isCompleted )
+			);
+		}
+		return size(
+			values( tasks ).filter( task => task.isCompleted && ! task.parentTaskId )
+		);
+	},
+	selectCurrentOpenTask: ( state ) => {
+		const currentTaskId = get( state, [ TASK_LIST_NAME, "currentOpenTaskId" ], null );
+		const tasks = get( state, [ TASK_LIST_NAME, "tasks" ], {} );
+		if ( currentTaskId && tasks[ currentTaskId ] ) {
+			return tasks[ currentTaskId ];
+		}
+		return null;
+	},
+	selectTaskTitle: ( state, id ) => {
+		return get( state, [ TASK_LIST_NAME, "tasks", id, "title" ], null );
+	},
 };
 
 export const taskListActions = {
 	...slice.actions,
 	completeTask,
+	fetchTasks,
 };
 
 export const taskListControls = {
@@ -154,6 +278,20 @@ export const taskListControls = {
 			return error;
 		}
 	},
+	[ FETCH_TASK ]: async( { payload } ) => {
+		try {
+			const response = await fetch( payload.endpoint, {
+				method: "GET",
+				headers: {
+					"Content-Type": "application/json",
+					"X-WP-Nonce": payload.nonce,
+				},
+			} );
+			return await response.json();
+		} catch ( error ) {
+			return error;
+		}
+	},
 };
 
 export const taskListReducer = slice.reducer;

packages/dashboard-frontend/src/task-list/components/call-to-action-button.js

@@ -30,20 +30,10 @@ const getButtonProps = ( type, handleOnClick, href, taskId, disabled, isLoading
 	};
 
 	if ( [ "link", "add" ].includes( type ) && href ) {
-		// Check if href is pointing to the same page (current URL without hash).
-		const currentUrl = window.location.href.split( "#" )[ 0 ];
-		const targetUrl = href.split( "#" )[ 0 ];
-
-		if ( currentUrl === targetUrl ) {
-			// Same page, use onClick to reload with new URL.
-			// This is to ensure that pointing to a different hash on the same page triggers a new page load which is needed for tracking.
-			buttonProps.onClick = () => {
-				window.location.href = href;
-			};
-		} else {
-			// Different page, use href for navigation.
-			buttonProps.href = href;
-		}
+		// Different page, use href for navigation.
+		buttonProps.href = href;
+		buttonProps.target = "_blank";
+		buttonProps.rel = "noopener noreferrer";
 	} else {
 		buttonProps.onClick = handleOnClick;
 	}
@@ -71,6 +61,10 @@ export const CallToActionButton = ( { type, label, href, onClick, taskId, disabl
 		}
 	}, [ onClick, taskId ] );
 
+	if ( ! type ) {
+		return null;
+	}
+
 	const buttonProps = getButtonProps( type, handleOnClick, href, taskId, disabled, isLoading );
 
 	if ( type === "add" ) {