Feature/get redirects#22356
Conversation
kyrylo-polozenko-newfold
added
UI change
kyrylo-polozenko-newfold
force-pushed
the
feature/redirection20
branch
from
cb6e195 to
9eca112
Compare
kyrylo-polozenko-newfold
force-pushed
the
feature/get-redirects
branch
from
10d5d79 to
59452b3
Compare
| margin-inline-start: 1.5rem; | ||
| } | ||
| .yst-text-field > div:first-child { | ||
| display: none !important; |
There was a problem hiding this comment.
Why not use hidden?
| display: none !important; | |
| @apply yst-hidden; |
There was a problem hiding this comment.
can't beat specificity, there is important on component
There was a problem hiding this comment.
Why do you want to hide the first child here?
There was a problem hiding this comment.
I moved it a little under another class, this is needed for search input since we don't have a label and it comes with margin-bottom by default, I decided to hide this block since it is not needed it gives extra height
There was a problem hiding this comment.
If you don't need the label then you can use TextInput component from the ui-library and add a class to it for the search icon yst-ps-9 and you are good to go.
|
|
||
| .yst-root { | ||
| .yst-notifications { | ||
| max-height: calc(100% - 4rem - 32px); /* Extra 32px for the height of the WP admin bar. */ |
There was a problem hiding this comment.
Please check if you can use tailwind css for that https://tailwindcss.com/docs/max-height#examples
There was a problem hiding this comment.
I checked the documentation of tailwind and asked chatgpt directly, it is not possible to implement
There was a problem hiding this comment.
I would like to have a patch to test it. Lets see if we can find a cleaner way to address that.
| <ApacheSettings isApache={ settings?.is_apache } /> | ||
| </div> | ||
| </FormLayout> | ||
| <Notifications /> |
There was a problem hiding this comment.
We don't need notifications in free right?
| @@ -21,18 +21,21 @@ import { | |||
| const createStore = ( { initialState } ) => { | |||
There was a problem hiding this comment.
Maybe the store can also be created on premium
There was a problem hiding this comment.
I already created store on premium, https://github.com/Yoast/wordpress-seo-premium/pull/4679/files#diff-8500a29d944f7204fb678eceb36f460e0028301d8bc404680c428f62f5ade7c3
but I need a store here for preferences
vraja-pro
left a comment
vraja-pro
left a comment
There was a problem hiding this comment.
Lets see if we can move more logic to premium and maybe add more slots or just pass more props.
thijsoo
left a comment
thijsoo
left a comment
There was a problem hiding this comment.
Some comments inline about needing a different approach on some spots and more code needs to be moved. Let me know if everything is clear :)
I will leave some more in depth comments in the premium PR as well.
| element={ | ||
| <SidebarLayout> | ||
| <RedirectMethod /> | ||
| <Redirects { ...redirectsProps } /> |
There was a problem hiding this comment.
We need to replace this with an construction where the free repo only contains a static upsell component with no logic. and the Premium repo overwrites this slot when its enabled with the actual component. This is also the case for the other components in this sidebar layout. Since they are not clickable they cannot be in the free repo.
| { isPremium && ( | ||
| <> | ||
| <Route | ||
| path={ ROUTES.regexRedirects } | ||
| element={ | ||
| <SidebarLayout> | ||
| <RegexRedirects { ...regexProps } /> | ||
| </SidebarLayout> | ||
| } | ||
| errorElement={ <RouteErrorFallback /> } | ||
| /> | ||
| <Route | ||
| path={ ROUTES.redirectMethod } | ||
| element={ | ||
| <SidebarLayout> | ||
| <RedirectMethod /> | ||
| </SidebarLayout> | ||
| } | ||
| errorElement={ <RouteErrorFallback /> } | ||
| /> | ||
| </> | ||
| ) } |
There was a problem hiding this comment.
This needs to be replaced by a that is filled from the premium repo.
| <FilterControls /> | ||
| </div> | ||
| </FormLayout> | ||
| <Formik |
There was a problem hiding this comment.
I would like us to move this entirely to the premium repo and only have a static representation fo this page in the free repo as the upsell.
| * @returns {JSX.Element} The rendered RegexRedirects route. | ||
| */ | ||
| export const RegexRedirects = () => { | ||
| export const RegexRedirects = ( { |
There was a problem hiding this comment.
This entire component needs to only live in the premium repo. This cannot be used in free so it cannot be here.
| * @param {string} parentPath The parent object path. | ||
| * @returns {Object} Flattened object. | ||
| */ | ||
| export const flattenObject = ( object, parentPath = "" ) => reduce( |
There was a problem hiding this comment.
I am not sure this is used anywhere in the free repo currently? If its only used in the premium implementation it should be moved.
| }; | ||
|
|
||
|
|
||
| SidebarLayout.propTypes = { |
| className="yst-flex yst-gap-1.5" | ||
| > | ||
| <LockClosedIcon className="yst-w-4 yst-h-4" /> | ||
| <span>Unlock with Premium</span> |
| { value: "307", label: __( "307 Temporary Redirect", "wordpress-seo" ) }, | ||
| { value: "410", label: __( "410 Content Deleted", "wordpress-seo" ) }, | ||
| { value: "451", label: __( "451 Unavailable For Legal Reasons", "wordpress-seo" ) }, | ||
| { value: 301, label: __( "301 Moved Permatently", "wordpress-seo" ) }, |
There was a problem hiding this comment.
I think this file is not needed anymore since all actual features will move to premium?
| @@ -0,0 +1,14 @@ | |||
| /** | |||
There was a problem hiding this comment.
This file can be removed/moved to premium since its not used in the free code.
| @@ -1,2 +1 @@ | |||
| export * from "./submit"; | |||
| export * from "./validation"; | |||
| export * from "./i18n"; | |||
There was a problem hiding this comment.
This file can be removed/moved to premium since its not used in the free code.
| @@ -61,6 +61,12 @@ body.seo_page_wpseo_redirects { | |||
| } | |||
|
|
|||
| .yst-root { | |||
There was a problem hiding this comment.
We also need to not name things new this is just the redirects. No need for new.
| * @returns {JSX.Element} The rendered Redirects route. | ||
| */ | ||
| export const Redirects = () => { | ||
| const redirectsManagedLink = useSelectRedirects( "selectLink", [], "https://yoast.com/yoast-seo-redirect-manager" ); |
There was a problem hiding this comment.
| const redirectsManagedLink = useSelectRedirects( "selectLink", [], "https://yoast.com/yoast-seo-redirect-manager" ); | |
| const redirectsManagedLink = useSelectRedirects( "selectLink", [], "https://yoa.st/redirects-learn-more" ); |
enricobattocchi
added
changelog: non-user-facing
5 participants
Context
This PR introduces full CRUD (Create, Read, Update, Delete) support for redirects, along with UI improvements and internal refactoring for better maintainability and performance.
Summary
changelog: enhancement
This PR can be summarized in the following changelog entry:
Adds functionality for creating, retrieving, updating, and deleting redirects.
Includes design and UI improvements to the redirects interface.
Relevant technical choices:
Implemented useRedirectFilters and useGetRedirects hooks to manage state and data fetching.
Refactored logic for sorting, filtering, and bulk actions (e.g., bulk delete).
Added loading indicators and success/error notifications.
Improved table and form UI for a better user experience.
UI changes
Documentation