Merge pull request #4020 from 10up/chore/issue-3982

Keep alignment of custom search results action icons
10up · Dec 4, 2024 · ab1d053 · ab1d053
2 parents fff8953 + b906156
commit ab1d053
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 285 deletions.
diff --git a/.github/workflows/cypress-tests.yml b/.github/workflows/cypress-tests.yml
@@ -42,7 +42,6 @@ jobs:
         key: npm-${{ env.NODE_VERSION }}-${{ hashFiles('**/package-lock.json') }}
         restore-keys: |
           npm-${{ env.NODE_VERSION }}-
-
     - name: Prepare composer cache
       uses: actions/cache@v4
       with:
@@ -131,7 +130,6 @@ jobs:
         key: npm-${{ env.NODE_VERSION }}-${{ hashFiles('**/package-lock.json') }}
         restore-keys: |
           npm-${{ env.NODE_VERSION }}-
-
     - name: Prepare composer cache
       uses: actions/cache@v4
       with:

diff --git a/assets/css/ordering.css b/assets/css/ordering.css
@@ -57,6 +57,10 @@
 			color: #0073aa;
 		}
 
+		& .removed .title {
+			color: #999;
+		}
+
 		& .pointer-actions {
 			float: right;
 
@@ -65,7 +69,7 @@
 			}
 
 			& .delete-pointer {
-				margin-left: 10px;
+				margin-right: 10px;
 			}
 		}
 

diff --git a/assets/js/instant-results/components/common/result.js b/assets/js/instant-results/components/common/result.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies.
  */
-import { React, WPElement } from '@wordpress/element';
+import { Component, FunctionComponent, WPElement } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
 /**
@@ -80,7 +80,7 @@ const Result = ({ averageRating = 0, date, excerpt, priceHtml, thumbnail, title,
  * @filter ep.InstantResults.Result
  * @since 4.4.0
  *
- * @param {React.Component|React.FunctionComponent} Result Result component.
- * @returns {React.Component|React.FunctionComponent} Result component.
+ * @param {Component|FunctionComponent} Result Result component.
+ * @returns {Component|FunctionComponent} Result component.
  */
 export default applyFilters('ep.InstantResults.Result', Result);
diff --git a/assets/js/ordering/pointers.js b/assets/js/ordering/pointers.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies.
  */
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 
 /**
  * WordPress dependencies.
@@ -63,6 +63,7 @@ export class Pointers extends Component {
 			defaultResults: {},
 			searchText: '',
 			searchResults: {},
+			removedPointers: [],
 		};
 	}
 
@@ -101,9 +102,11 @@ export class Pointers extends Component {
 
 	removePointer = (pointer) => {
 		let { pointers } = this.state;
+		const { removedPointers } = this.state;
 
 		delete pointers[pointers.indexOf(pointer)];
 		pointers = pointers.filter((item) => item !== null);
+		removedPointers.push(pointer.ID);
 
 		this.setState({ pointers });
 	};
@@ -116,7 +119,7 @@ export class Pointers extends Component {
 		pointers = pointers.sort((a, b) => {
 			return a.order > b.order ? 1 : -1;
 		});
-		const pointersIds = pointers.map((pointer) => pointer.ID);
+		const pointersIds = pluck(pointers, 'ID');
 
 		// Remove all custom pointers from the default results
 		merged = merged.filter((item) => pointersIds.indexOf(item.ID) === -1);
@@ -183,6 +186,7 @@ export class Pointers extends Component {
 		pointers.push({
 			ID: id,
 			order: position,
+			type: 'custom-result',
 		});
 
 		this.setState({ pointers });
@@ -220,17 +224,12 @@ export class Pointers extends Component {
 		const pointers = [];
 
 		items.forEach((item, index) => {
-			if (item.order) {
-				// Reordering an existing pointer
-				pointers.push({
-					ID: item.ID,
-					order: index + 1,
-				});
-			} else if (item.ID === result.draggableId) {
-				// Adding a default post to the pointers array
+			// Reordering an existing pointer or adding a default post to the pointers array
+			if (item.order || item.ID === result.draggableId) {
 				pointers.push({
 					ID: item.ID,
 					order: index + 1,
+					type: item?.type || 'reordered',
 				});
 			}
 		});
@@ -293,6 +292,7 @@ export class Pointers extends Component {
 			defaultResults,
 			title,
 			pointers,
+			removedPointers,
 			searchText,
 			searchResults: searchResultsFromState,
 		} = this.state;
@@ -352,6 +352,8 @@ export class Pointers extends Component {
 											? index + 1
 											: index;
 
+									const isRemoved = removedPointers.includes(item.ID);
+
 									let { title } = item;
 									if (undefined === title) {
 										title =
@@ -361,10 +363,9 @@ export class Pointers extends Component {
 									}
 
 									// Determine if this result is part of default search results or not
-									const isDefaultResult =
-										undefined !== defaultResultsById[item.ID];
+									const itemType = item?.type || 'reordered';
 									const tooltipText =
-										isDefaultResult === true
+										itemType === 'reordered'
 											? __('Return to original position', 'elasticpress')
 											: __(
 													'Remove custom result from results list',
@@ -401,34 +402,25 @@ export class Pointers extends Component {
 
 											<Draggable
 												key={item.ID}
-												draggableId={item.ID}
+												draggableId={String(item.ID)}
 												index={draggableIndex}
 											>
 												{(provided2) => (
 													<div
-														className={`pointer ${draggableIndex}`}
+														className={`pointer ${draggableIndex} ${
+															isRemoved ? 'removed' : ''
+														}`}
 														ref={provided2.innerRef}
 														{...provided2.draggableProps}
 													>
-														{item.order && isDefaultResult === true && (
+														{item.order && itemType === 'reordered' && (
 															<span className="pointer-type">RD</span>
 														)}
-														{item.order &&
-															isDefaultResult === false && (
-																<span className="pointer-type">
-																	CR
-																</span>
-															)}
+														{item.order && itemType !== 'reordered' && (
+															<span className="pointer-type">CR</span>
+														)}
 														<strong className="title">{title}</strong>
 														<div className="pointer-actions">
-															<span
-																className="dashicons dashicons-menu handle"
-																{...provided2.dragHandleProps}
-																title={__(
-																	'Drag post up or down to reposition',
-																	'elasticpress',
-																)}
-															/>
 															{item.order && (
 																<span
 																	role="button"
@@ -449,6 +441,14 @@ export class Pointers extends Component {
 																	</span>
 																</span>
 															)}
+															<span
+																className="dashicons dashicons-menu handle"
+																{...provided2.dragHandleProps}
+																title={__(
+																	'Drag post up or down to reposition',
+																	'elasticpress',
+																)}
+															/>
 														</div>
 													</div>
 												)}

diff --git a/includes/classes/Feature/SearchOrdering/SearchOrdering.php b/includes/classes/Feature/SearchOrdering/SearchOrdering.php
@@ -492,6 +492,7 @@ public function save_post( $post_id, $post ) {
 				$final_order_data[] = [
 					'ID'    => intval( $order_data['ID'] ),
 					'order' => intval( $order_data['order'] ),
+					'type'  => ! empty( $order_data['type'] ) ? sanitize_text_field( $order_data['type'] ) : 'reordered',
 				];
 			} else {
 				$previous_post_ids[ intval( $order_data['ID'] ) ] = true;