Feat/update layout redirects #22319

kyrylo-polozenko-newfold · 2025-05-28T14:04:46Z

Context

This PR introduces the initial structure for the Redirections feature in the application. The goal is to establish a foundation for managing and displaying redirections within the admin interface.

Summary

This PR can be summarized in the following changelog entry:

Adds the basic structure and UI for the Redirections page in the WordPress SEO plugin.
Some components were also moved to the shared layer and reused on the settings and redirects pages

UI changes

This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

React frontend structure

vraja-pro · 2025-05-29T13:08:54Z

packages/js/src/components/SchemaTab.js

@@ -245,9 +245,6 @@ Content.propTypes = {
 	articleTypeOptions: schemaTypeOptionsPropType.isRequired,
 	showArticleTypeInput: PropTypes.bool.isRequired,
 	additionalHelpTextLink: PropTypes.string.isRequired,
-	helpTextLink: PropTypes.string.isRequired,
-	helpTextTitle: PropTypes.string.isRequired,
-	helpTextDescription: PropTypes.string.isRequired,


Out of scope

vraja-pro · 2025-05-29T13:09:12Z

packages/js/src/components/modals/WincherUpgradeCallout.js

@@ -227,7 +227,7 @@ WincherUpgradeCalloutDescription.propTypes = {
 *
 * @returns {wp.Element | null} The Wincher upgrade callout.
 */
-const WincherUpgradeCallout = ( { onClose, isTitleShortened, trackingInfo } ) => {
+const WincherUpgradeCallout = ( { onClose = () => {}, isTitleShortened = false, trackingInfo = {} } ) => {


Out of scope

vraja-pro · 2025-05-29T13:09:47Z

...es/js/src/first-time-configuration/tailwind-components/steps/social-profiles/social-input.js

@@ -15,7 +15,7 @@ import TextInput from "../../base/text-input";
 *
 * @returns {WPElement} A wrapped TextInput for the social inputs.
 */
-export default function SocialInput( { id, onChange, socialMedium, isDisabled, ...restProps } ) {
+export default function SocialInput( { id = "", onChange = () => {}, socialMedium = "", isDisabled = false, ...restProps } ) {


Out of scope, should be in a separate PR.

packages/js/src/general/components/alerts-list.js

packages/js/src/general/components/sidebar-layout.js

packages/js/src/redirects/components/filter-controls.js

packages/js/src/redirects/app.js

packages/js/src/shared-admin/components/search/search.js

enricobattocchi · 2025-05-29T14:29:05Z

Hey @kyrylo-polozenko-newfold, my teammate @vraja-pro left a first round of comments above
One thing that's not clear to us is that in some files you have added the default values for params for unrelated components, I suppose it was because eslint was complaining? If so, you should probably try to fix any error/warning in the components you are introducing to avoid conflicts - we are in the process to fix the other warnings so there could be some overlap...

kyrylo-polozenko-newfold · 2025-05-30T09:06:19Z

Hey @enricobattocchi
yes you are right I made these changes because I had warnings on eslint, I did a rollback

packages/js/src/redirects/components/filter-controls.js

vraja-pro · 2025-06-03T06:46:54Z

packages/js/src/redirects/components/filter-controls.js

+				<Button
+					type="button"
+					variant="secondary"
+					className="yst-min-h-[40px]"


Why min height and why hard coded 40px?

vraja-pro · 2025-06-03T06:47:48Z

packages/js/src/redirects/components/filter-controls.js

+				<Button
+					type="button"
+					variant="secondary"
+					className="yst-min-h-[40px]"


Same as above for class and type

vraja-pro · 2025-06-03T06:58:30Z

packages/js/src/redirects/components/menu.js

+				<hr className="yst-absolute yst-inset-x-0 yst-top-1/2 yst-bg-slate-200" />
+				<button
+					type="button"
+					className="yst-relative yst-flex yst-items-center yst-gap-1.5 yst-px-2.5 yst-py-1 yst-mx-auto yst-text-xs yst-font-medium yst-text-slate-700 yst-bg-slate-50 yst-rounded-full yst-border yst-border-slate-300 hover:yst-bg-white hover:yst-text-slate-800 focus:yst-outline-none focus:yst-ring-2 focus:yst-ring-primary-500 focus:yst-ring-offset-2"


This is a very long line 😅 maybe we can either move it to the style sheet or even better, use existing component in the ui library like the Sidebar navigation.

vraja-pro · 2025-06-03T07:10:04Z

packages/js/src/redirects/components/route-error-fallback.js

+ * @param {string} className The class name.
+ * @returns {JSX.Element} The element.
+ */
+export const RouteErrorFallback = ( { className } ) => {


Please add default if it's not required.

export const RouteErrorFallback = ( { className = "" } ) => {

packages/js/src/redirects/components/route-error-fallback.js

vraja-pro · 2025-06-03T08:40:08Z

packages/js/src/redirects/components/route-error-fallback.js

+import { useSelectRedirects } from "../hooks";
+
+/**
+ * @param {string} className The class name.


Document optional argument and it's default value.

Suggested change

* @param {string} className The class name.

* @param {string} [className=""] The class name.

vraja-pro · 2025-06-03T08:50:56Z

packages/js/src/redirects/routes/redirect-method.js

+				description={ __( "Redirect Method desc", "wordpress-seo" ) }
+			>
+				<div id="yoast-configuration" className="yst-p-8 yst-max-w-[715px]">
+					Redirect method


Missing translation.

Suggested change

Redirect method

__( "Redirect method", "wordpress-seo" )

vraja-pro · 2025-06-03T08:53:21Z

packages/js/src/redirects/routes/regex-redirects.js

+				description={ __( "Regex Redirects desc", "wordpress-seo" ) }
+			>
+				<div id="yoast-configuration" className="yst-p-8 yst-max-w-[715px]">
+					Regex redirects


Missing translation

vraja-pro · 2025-06-03T08:56:46Z

packages/js/src/shared-admin/components/search/search.js

+	return <>
+		<Button
+			id={ buttonId }
+			type="button"


type button is the default

vraja-pro · 2025-06-03T08:59:32Z

packages/js/src/shared-admin/components/search/search.js

+			id={ buttonId }
+			type="button"
+			variant="secondary"
+			className="yst-w-full yst-flex yst-items-center yst-justify-start yst-font-normal yst-text-sm yst-leading-6 yst-text-slate-500 yst-rounded-md yst-border-slate-300 yst-shadow-sm yst-py-1.5 yst-pl-2 yst-pr-3"


I believe some of the classes here are already part of the secondary variant and the button component.

vraja-pro · 2025-06-09T06:15:33Z

packages/js/src/redirects/components/filter-controls.js

+		<div className="yst-grid yst-grid-cols-3 yst-gap-8 yst-mt-4 yst-items-end">
+			<div className="yst-flex yst-items-end yst-gap-2 yst-w-full">
+				<Select
+					id="bulk-actions"


Suggested change

id="bulk-actions"

id="yst-bulk-actions"

vraja-pro · 2025-06-09T06:16:10Z

packages/js/src/redirects/components/filter-controls.js

+
+			<div className="yst-flex yst-items-end yst-gap-2 yst-w-full">
+				<Select
+					id="filter-redirect-type"


Suggested change

id="filter-redirect-type"

id="yst-filter-redirect-type"

vraja-pro · 2025-06-09T06:16:39Z

packages/js/src/redirects/components/filter-controls.js

+					{ ...ariaSvgProps }
+				/>
+				<TextField
+					id="search-redirects"


Suggested change

id="search-redirects"

id="yst-search-redirects"

vraja-pro · 2025-06-09T06:21:33Z

packages/js/src/redirects/routes/redirects.js

+								as={ TextField }
+								type="text"
+								name="newURL"
+								id="input-new_url"


Suggested change

id="input-new_url"

id="yst-input-new_url"

vraja-pro · 2025-06-09T06:21:44Z

packages/js/src/redirects/routes/redirects.js

+								as={ TextField }
+								type="text"
+								name="oldURL"
+								id="input-old_url"


Suggested change

id="input-old_url"

id="yst-input-old_url"

vraja-pro · 2025-06-09T06:21:53Z

packages/js/src/redirects/routes/redirects.js

+								as={ SelectField }
+								type="select"
+								name="redirectType"
+								id="input-redirect_type"


Suggested change

id="input-redirect_type"

id="yst-input-redirect_type"

vraja-pro · 2025-06-09T06:23:45Z

packages/js/src/shared-admin/components/form/form-layout.js

+					<div className="yst-bg-slate-50 yst-border-slate-200 yst-border-t yst-rounded-b-lg">
+						<div className="yst-flex yst-align-middle yst-space-x-3 rtl:yst-space-x-reverse yst-p-8">
+							<Button
+								id="button-submit-settings"


Suggested change

id="button-submit-settings"

id="yst-button-submit-settings"

vraja-pro · 2025-06-09T06:24:03Z

packages/js/src/shared-admin/components/form/form-layout.js

+								{ __( "Save changes", "wordpress-seo" ) }
+							</Button>
+							<Button
+								id="button-undo-settings"


Suggested change

id="button-undo-settings"

id="yst-button-undo-settings"

vraja-pro · 2025-06-09T06:27:03Z

packages/js/src/shared-admin/components/search/search.js

+export const Search = ( {
+	buttonId = "button-search",
+	modalId = "modal-search",
+	userLocale,


If it's not required, we need defaults

Suggested change

userLocale,

userLocale = "en-US",

vraja-pro · 2025-06-09T06:27:22Z

packages/js/src/shared-admin/components/search/search.js

+ *
+ * @param {string} [buttonId="button-search"] Optional ID for the search button element.
+ * @param {string} [modalId="modal-search"] Optional ID for the modal dialog element.
+ * @param {string} [userLocale] User's locale used for locale-aware sorting and filtering.


Suggested change

* @param {string} [userLocale] User's locale used for locale-aware sorting and filtering.

* @param {string} [userLocale="en-US"] User's locale used for locale-aware sorting and filtering.

vraja-pro · 2025-06-09T06:37:34Z

packages/js/src/shared-admin/components/search/search.js

+ * @param {string} [buttonId="button-search"] Optional ID for the search button element.
+ * @param {string} [modalId="modal-search"] Optional ID for the modal dialog element.
+ * @param {string} [userLocale] User's locale used for locale-aware sorting and filtering.
+ * @param {Object[]} queryableSearchIndex Array of searchable items.


After adding the typedef above, use it here.

Suggested change

* @param {Object[]} queryableSearchIndex Array of searchable items.

* @param {QueryableSearchIndexItem[]} queryableSearchIndex Array of searchable items.

vraja-pro · 2025-06-09T06:38:08Z

packages/js/src/shared-admin/components/search/search.js

+ */
+
+export const Search = ( {
+	buttonId = "button-search",


Suggested change

buttonId = "button-search",

buttonId = "yst-button-search",

vraja-pro · 2025-06-09T06:41:50Z

packages/js/src/shared-admin/components/search/search.js

+ * @param {string} queryableSearchIndex[].fieldId Unique identifier for the item.
+ * @param {string} queryableSearchIndex[].label Label displayed in the search results.
+ * @param {string} queryableSearchIndex[].route Route to navigate to when the item is selected.
+ * @param {string[]} queryableSearchIndex[].keywords Keywords used for matching search queries.


Suggested change

* @param {string[]} queryableSearchIndex[].keywords Keywords used for matching search queries.

packages/js/src/shared-admin/components/search/search.js

vraja-pro · 2025-06-09T06:44:31Z

packages/js/src/shared-admin/components/search/search.js

+ * @param {string} [modalId="modal-search"] Optional ID for the modal dialog element.
+ * @param {string} [userLocale] User's locale used for locale-aware sorting and filtering.
+ * @param {Object[]} queryableSearchIndex Array of searchable items.
+ * @param {string} queryableSearchIndex[].fieldId Unique identifier for the item.


Suggested change

* @param {string} queryableSearchIndex[].fieldId Unique identifier for the item.

vraja-pro · 2025-06-09T06:44:45Z

packages/js/src/shared-admin/components/search/search.js

+ * @param {Object[]} queryableSearchIndex Array of searchable items.
+ * @param {string} queryableSearchIndex[].fieldId Unique identifier for the item.
+ * @param {string} queryableSearchIndex[].label Label displayed in the search results.
+ * @param {string} queryableSearchIndex[].route Route to navigate to when the item is selected.


Suggested change

* @param {string} queryableSearchIndex[].route Route to navigate to when the item is selected.

vraja-pro · 2025-06-09T06:44:55Z

packages/js/src/shared-admin/components/search/search.js

+ * @param {string} [userLocale] User's locale used for locale-aware sorting and filtering.
+ * @param {Object[]} queryableSearchIndex Array of searchable items.
+ * @param {string} queryableSearchIndex[].fieldId Unique identifier for the item.
+ * @param {string} queryableSearchIndex[].label Label displayed in the search results.


Suggested change

* @param {string} queryableSearchIndex[].label Label displayed in the search results.

vraja-pro · 2025-06-09T06:47:52Z

packages/js/src/shared-admin/components/search/search.js

+							{ map( results, ( groupedItems, index ) => (
+								<div key={ groupedItems?.[ 0 ]?.route || `group-${ index }` } role="presentation">
+									<Title
+										id={ `group-${ index }-title` } as="h4" size="5"


Suggested change

id={ `group-${ index }-title` } as="h4" size="5"

id={ `yst-group-${ index }-title` } as="h4" size="5"

vraja-pro · 2025-06-10T12:22:49Z

packages/js/src/redirects/components/menu.js

+							strokeLinejoin="round"
+							d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+						/>
+					</svg>


You can use <SwitchHorizontalIcon /> from heroicons.

vraja-pro · 2025-06-10T12:23:07Z

packages/js/src/redirects/components/menu.js

@@ -0,0 +1,94 @@
+import { ChildrenLimiter, SidebarNavigation, useSvgAria } from "@yoast/ui-library";
+import { useSelectRedirects } from "../hooks";
+import { CodeIcon, CogIcon, DownloadIcon } from "@heroicons/react/outline";


Suggested change

import { CodeIcon, CogIcon, DownloadIcon } from "@heroicons/react/outline";

import { CodeIcon, CogIcon, DownloadIcon, SwitchHorizontalIcon } from "@heroicons/react/outline";

kyrylo-polozenko-newfold added UI change PRs that result in a change in the UI changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog labels May 28, 2025

enricobattocchi added this to the feature/redirection20 milestone May 29, 2025

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/general/components/alerts-list.js Outdated Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/general/components/sidebar-layout.js Outdated Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/redirects/components/filter-controls.js Outdated Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/redirects/components/filter-controls.js Outdated Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/redirects/app.js Outdated Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/shared-admin/components/search/search.js Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/shared-admin/components/search/search.js Outdated Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/shared-admin/components/search/search.js Outdated Show resolved Hide resolved

vraja-pro reviewed May 29, 2025

View reviewed changes

packages/js/src/shared-admin/components/search/search.js Outdated Show resolved Hide resolved

kyrylo-polozenko-newfold requested a review from vraja-pro May 30, 2025 09:10

vraja-pro reviewed Jun 3, 2025

View reviewed changes

packages/js/src/redirects/components/filter-controls.js Outdated Show resolved Hide resolved

vraja-pro reviewed Jun 3, 2025

View reviewed changes

vraja-pro self-assigned this Jun 3, 2025

vraja-pro reviewed Jun 3, 2025

View reviewed changes

packages/js/src/redirects/components/route-error-fallback.js Show resolved Hide resolved

vraja-pro reviewed Jun 3, 2025

View reviewed changes

vraja-pro reviewed Jun 9, 2025

View reviewed changes

packages/js/src/shared-admin/components/search/search.js Show resolved Hide resolved

vraja-pro reviewed Jun 9, 2025

View reviewed changes

vraja-pro assigned kyrylo-polozenko-newfold and unassigned vraja-pro Jun 9, 2025

fix: resolve comments

1bb1dd9

kyrylo-polozenko-newfold requested a review from vraja-pro June 10, 2025 09:50

vraja-pro assigned vraja-pro and unassigned kyrylo-polozenko-newfold Jun 10, 2025

vraja-pro reviewed Jun 10, 2025

View reviewed changes

vraja-pro assigned kyrylo-polozenko-newfold and unassigned vraja-pro Jun 10, 2025

fix: add SwitchHorizontalIcon to menu

8b7f26a

kyrylo-polozenko-newfold requested a review from vraja-pro June 10, 2025 13:44

	* @param {string} className The class name.
	* @param {string} [className=""] The class name.

	* @param {string} [userLocale] User's locale used for locale-aware sorting and filtering.
	* @param {string} [userLocale="en-US"] User's locale used for locale-aware sorting and filtering.

	* @param {Object[]} queryableSearchIndex Array of searchable items.
	* @param {QueryableSearchIndexItem[]} queryableSearchIndex Array of searchable items.

	id={ `group-${ index }-title` } as="h4" size="5"
	id={ `yst-group-${ index }-title` } as="h4" size="5"

	import { CodeIcon, CogIcon, DownloadIcon } from "@heroicons/react/outline";
	import { CodeIcon, CogIcon, DownloadIcon, SwitchHorizontalIcon } from "@heroicons/react/outline";

Feat/update layout redirects #22319

Are you sure you want to change the base?

Feat/update layout redirects #22319

Uh oh!

Conversation

kyrylo-polozenko-newfold commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Summary

UI changes

Impact check

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

enricobattocchi commented May 29, 2025

Uh oh!

kyrylo-polozenko-newfold commented May 30, 2025

Uh oh!

Uh oh!

vraja-pro Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vraja-pro Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vraja-pro Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

kyrylo-polozenko-newfold commented May 28, 2025 •

edited

Loading

vraja-pro Jun 3, 2025 •

edited

Loading

vraja-pro Jun 3, 2025 •

edited

Loading

vraja-pro Jun 3, 2025 •

edited

Loading