Move custom status component into separate class, add drag handle

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

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => 'b3ad43d2379bdf79244b');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'a0162d0b6134374f1c60');

modules/custom-status/lib/components/draggable-custom-status.js

@@ -0,0 +1,38 @@
+import { dragHandle, Icon } from '@wordpress/icons';
+import clsx from 'clsx';
+
+export default function DraggableCustomStatus( { customStatus, index, provided, snapshot } ) {
+	const className = clsx(
+		{
+			dragging: snapshot.isDragging,
+		},
+		'custom-status-item'
+	);
+
+	return (
+		<>
+			<div
+				className={ className }
+				ref={ provided.innerRef }
+				{ ...provided.draggableProps }
+				{ ...provided.dragHandleProps }
+				style={ getItemStyle( index, snapshot.isDragging, provided.draggableProps.style ) }
+			>
+				<div className="name">{ customStatus.name }</div>
+
+				<div className="drag-handle">
+					<Icon icon={ dragHandle } size={ 24 } />
+				</div>
+			</div>
+		</>
+	);
+}
+
+const getItemStyle = ( index, isDragging, draggableStyle ) => {
+	const defaultBackgroundColor = index % 2 ? 'white' : '#f6f7f7';
+
+	return {
+		background: isDragging ? 'lightgreen' : defaultBackgroundColor,
+		...draggableStyle,
+	};
+};

modules/custom-status/lib/configure.scss

@@ -11,11 +11,35 @@
 		resize: vertical;
 		overflow: auto;
 	}
+}
 
-	.status-item {
-		user-select: none;
-		padding: 16px;
-		margin: 0 0 8px 0;
-		border: 1px solid #c3c4c7;
+.custom-status-item {
+	display: flex;
+	cursor: move;
+	padding: 16px 4px 16px 16px;
+	margin: 0 0 8px 0;
+	border: 1px solid #c3c4c7;
+	user-select: none;
+	align-items: center;
+
+	.name {
+		flex-grow: 1;
+	}
+
+	.drag-handle {
+		visibility: hidden;
+		fill: #777;
+	}
+
+	&.dragging {
+		.drag-handle {
+			visibility: visible;
+		}
+	}
+
+	&:hover {
+		.drag-handle {
+			visibility: visible;
+		}
 	}
 }

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

@@ -2,9 +2,10 @@ import './configure.scss';
 
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import domReady from '@wordpress/dom-ready';
-import { createRoot, useState, useRef, useLayoutEffect } from '@wordpress/element';
+import { createRoot, useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+import DraggableCustomStatus from './components/draggable-custom-status';
 import WorkflowArrow, { useRefDimensions } from './components/workflow-arrow';
 
 function WorkflowManager() {
@@ -47,19 +48,12 @@ function WorkflowManager() {
 							{ items.map( ( item, index ) => (
 								<Draggable key={ item.term_id } draggableId={ `${ item.term_id }` } index={ index }>
 									{ ( provided, snapshot ) => (
-										<div
-											className="status-item"
-											ref={ provided.innerRef }
-											{ ...provided.draggableProps }
-											{ ...provided.dragHandleProps }
-											style={ getItemStyle(
-												index,
-												snapshot.isDragging,
-												provided.draggableProps.style
-											) }
-										>
-											{ item.name }
-										</div>
+										<DraggableCustomStatus
+											customStatus={ item }
+											index={ index }
+											provided={ provided }
+											snapshot={ snapshot }
+										/>
 									) }
 								</Draggable>
 							) ) }
@@ -73,8 +67,12 @@ function WorkflowManager() {
 }
 
 domReady( () => {
-	const root = createRoot( document.getElementById( 'workflow-manager-root' ) );
-	root.render( <WorkflowManager /> );
+	const workflowManagerRoot = document.getElementById( 'workflow-manager-root' );
+
+	if ( workflowManagerRoot ) {
+		const root = createRoot( workflowManagerRoot );
+		root.render( <WorkflowManager /> );
+	}
 } );
 
 const reorder = ( list, startIndex, endIndex ) => {
@@ -85,15 +83,6 @@ const reorder = ( list, startIndex, endIndex ) => {
 	return result;
 };
 
-const getItemStyle = ( index, isDragging, draggableStyle ) => {
-	const defaultBackgroundColor = index % 2 ? 'white' : '#f6f7f7';
-
-	return {
-		background: isDragging ? 'lightgreen' : defaultBackgroundColor,
-		...draggableStyle,
-	};
-};
-
 const getListStyle = isDraggingOver => ( {
 	background: isDraggingOver ? 'lightblue' : 'white',
 } );