Add semi-mocked workflow management page

dist/modules/custom-status/custom-status-block.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-compose', 'wp-data', 'wp-edit-post', 'wp-i18n', 'wp-plugins'), 'version' => 'ea64731158fa7ffea83e');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-compose', 'wp-data', 'wp-edit-post', 'wp-i18n', 'wp-plugins'), 'version' => '3d1784c9873e9e5f2739');

dist/modules/custom-status/custom-status-configure.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '2dec9e62a483d5e2cf81');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '287848d1493ebf33e6ae');

modules/custom-status/custom-status.php

@@ -277,6 +277,7 @@ public function action_admin_enqueue_scripts() {
 
 				wp_localize_script( 'vip-workflow-custom-status-configure', 'VW_CUSTOM_STATUS_CONFIGURE', [
 					'delete_status_string' => __( 'Are you sure you want to delete the post status? All posts with this status will be assigned to the default status.', 'vip-workflow' ),
+					'custom_statuses'      => array_values( $this->get_custom_statuses() ),
 				] );
 			}
 
@@ -1210,12 +1211,12 @@ public function print_configure_view() {
 				}
 
 				include_once __DIR__ . '/views/edit-status.php';
-			} elseif ( 'change-options' === $action ) {
+			} elseif ( 'manage-workflow' === $action ) {
+				include_once __DIR__ . '/views/manage-workflow.php';
+			} else {
 				$custom_status_list_table = new VW_Custom_Status_List_Table();
 				$custom_status_list_table->prepare_items();
 				include_once __DIR__ . '/views/configure.php';
-			} elseif ( 'manage-workflow' === $action ) {
-				echo '<p>Manage Workflow</p>';
 			}
 		}
 

modules/custom-status/lib/custom-status-configure.js

@@ -1,5 +1,190 @@
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import domReady from '@wordpress/dom-ready';
+import { createRoot, useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const WorkflowArrow = ( { start, end } ) => {
+	const canvasRef = useRef( null );
+	const width = 40;
+	const height = 350;
+
+	useEffect( () => {
+		const canvas = canvasRef.current;
+		const context = canvas?.getContext( '2d' );
+
+		if ( ! canvas || ! context ) {
+			return;
+		}
+
+		const ratio = window.devicePixelRatio;
+		canvas.width = width * ratio;
+		canvas.height = height * ratio;
+		canvas.style.width = `${ width }px`;
+		canvas.style.height = `${ height }px`;
+		context.scale( ratio, ratio );
+
+		context.fillStyle = 'rgba(0, 0, 0, 0)';
+		context.fillRect( 0, 0, canvas.width, canvas.height );
+
+		drawArrow( context, width, height );
+	}, [ width, height ] );
+
+	return (
+		<div
+			style={ {
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				width: 'fit-content',
+			} }
+		>
+			<h3>{ start }</h3>
+			<canvas ref={ canvasRef }></canvas>
+			<h3>{ end }</h3>
+		</div>
+	);
+};
+
+function drawArrow( context, width, height ) {
+	const x0 = width / 2;
+	const y0 = 20;
+	let x1 = width / 2;
+	let y1 = height - 20;
+
+	context.beginPath();
+	const arrowWidth = 3;
+	const headLength = 6;
+	const headAngle = Math.PI / 6;
+	const angle = Math.atan2( y1 - y0, x1 - x0 );
+
+	context.lineWidth = arrowWidth;
+
+	/* Adjust the point */
+	x1 -= arrowWidth * Math.cos( angle );
+	y1 -= arrowWidth * Math.sin( angle );
+
+	context.beginPath();
+	context.moveTo( x0, y0 );
+	context.lineTo( x1, y1 );
+	context.stroke();
+
+	context.beginPath();
+	context.lineTo( x1, y1 );
+	context.lineTo(
+		x1 - headLength * Math.cos( angle - headAngle ),
+		y1 - headLength * Math.sin( angle - headAngle )
+	);
+	context.lineTo(
+		x1 - headLength * Math.cos( angle + headAngle ),
+		y1 - headLength * Math.sin( angle + headAngle )
+	);
+	context.closePath();
+	context.stroke();
+	context.fill();
+}
+
+function WorkflowManager() {
+	const [ items, setItems ] = useState( VW_CUSTOM_STATUS_CONFIGURE.custom_statuses );
+	console.log( 'Custom statuses:', items );
+
+	const onDragEnd = result => {
+		// dropped outside the list
+		if ( ! result.destination ) {
+			return;
+		}
+
+		const reorderedItems = reorder( items, result.source.index, result.destination.index );
+		setItems( reorderedItems );
+	};
+
+	return (
+		<div
+			style={ {
+				display: 'flex',
+			} }
+		>
+			<WorkflowArrow start={ __( 'Create' ) } end={ __( 'Publish' ) } />
+
+			<DragDropContext onDragEnd={ onDragEnd }>
+				<Droppable droppableId="droppable">
+					{ ( provided, snapshot ) => (
+						<div
+							{ ...provided.droppableProps }
+							ref={ provided.innerRef }
+							style={ getListStyle( snapshot.isDraggingOver ) }
+						>
+							{ items.map( ( item, index ) => (
+								<Draggable key={ item.term_id } draggableId={ `${ item.term_id }` } index={ index }>
+									{ ( provided, snapshot ) => (
+										<div
+											ref={ provided.innerRef }
+											{ ...provided.draggableProps }
+											{ ...provided.dragHandleProps }
+											style={ getItemStyle(
+												index,
+												snapshot.isDragging,
+												provided.draggableProps.style
+											) }
+										>
+											{ item.name }
+										</div>
+									) }
+								</Draggable>
+							) ) }
+							{ provided.placeholder }
+						</div>
+					) }
+				</Droppable>
+			</DragDropContext>
+		</div>
+	);
+}
+
+domReady( () => {
+	const root = createRoot( document.getElementById( 'workflow-manager' ) );
+	root.render( <WorkflowManager /> );
+} );
+
+// a little function to help us with reordering the result
+const reorder = ( list, startIndex, endIndex ) => {
+	const result = Array.from( list );
+	const [ removed ] = result.splice( startIndex, 1 );
+	result.splice( endIndex, 0, removed );
+
+	return result;
+};
+
+const grid = 8;
+
+const getItemStyle = ( index, isDragging, draggableStyle ) => {
+	const defaultBackgroundColor = index % 2 ? 'white' : '#f6f7f7';
+
+	return {
+		// some basic styles to make the items look a bit nicer
+		userSelect: 'none',
+		padding: grid * 2,
+		margin: `0 0 ${ grid }px 0`,
+		// change background colour if dragging
+		background: isDragging ? 'lightgreen' : defaultBackgroundColor,
+		border: '1px solid #c3c4c7',
+
+		// styles we need to apply on draggables
+		...draggableStyle,
+	};
+};
+
+const getListStyle = isDraggingOver => ( {
+	background: isDraggingOver ? 'lightblue' : 'white',
+	padding: grid,
+	width: 250,
+	height: 'fit-content',
+	alignSelf: 'center',
+	border: '1px solid #c3c4c7',
+	boxShadow: '0 1px 1px rgba(0,0,0,.04)',
+} );
+
 ( function ( $ ) {
-	inlineEditCustomStatus = {
+	const inlineEditCustomStatus = {
 		init() {
 			const t = this;
 			const row = $( '#inline-edit' );

modules/custom-status/views/manage-workflow.php

@@ -0,0 +1,7 @@
+<?php
+
+defined( 'ABSPATH' ) || exit();
+
+?>
+
+<div id="workflow-manager"></div>