feat: redirect to previous page after editing entities#2118
Merged
Conversation
Implement smart UX improvement that redirects users back to the previous page after editing, with special handling for new tabs. Behavior: - Normal navigation: Redirect back to previous page (list, search, etc.) - New tab (cmd+click/ctrl+click): Stay on edit page for continued work Implementation: - Add getRefererPath() helper to extract pathname from Referer header - Add 8 comprehensive unit tests for getRefererPath() - Create RefererRedirectInput component that: - Detects new tab opens via window.history.length - Clears redirect value when opened in new tab - Passes referer for normal navigation - Update route actions to check redirectTo: - If present: redirect to previous page via safeRedirect - If empty: stay on current page (return json) - Add redirectTo field to form schemas - Update loaders to pass referer to components Technical details: - Server-side referer extraction follows Remix conventions - Client-side new tab detection via window.history.length === 1 - Safe redirects prevent open redirect vulnerabilities - DRY implementation with reusable component - Preserves asset "Add another" button behavior - Fully typed with TypeScript Benefits: - Improved navigation flow for normal edits - Respects user intent when opening in new tab - Handles all edge cases gracefully - Reduces unnecessary navigation clicks Files modified: - app/utils/http.server.ts - app/utils/http.server.test.ts - app/components/forms/referer-redirect-input.tsx (new) - app/routes/_layout+/assets.$assetId_.edit.tsx - app/routes/_layout+/kits.$kitId_.edit.tsx - app/routes/_layout+/locations.$locationId_.edit.tsx - app/components/assets/form.tsx - app/components/kits/form.tsx - app/components/location/form.tsx
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR enhances post-edit navigation by redirecting users back to their previous page after saving, while keeping users on the edit page when opened in a new tab.
- Add getRefererPath helper and unit tests
- Introduce RefererRedirectInput to inject safe redirect target and detect new-tab scenarios
- Integrate redirectTo through forms, loaders, and actions using safeRedirect
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| app/utils/http.server.ts | Adds getRefererPath to extract referrer path for redirect targets. |
| app/utils/http.server.test.ts | Adds comprehensive tests for getRefererPath behavior. |
| app/routes/layout+/locations.$locationId.edit.tsx | Wires referer through loader and form; adds safe redirect on action. |
| app/routes/layout+/kits.$kitId.edit.tsx | Wires referer through loader and form; adds safe redirect on action. |
| app/routes/layout+/assets.$assetId.edit.tsx | Wires referer through loader and form; adds safe redirect on action; handles addAnother. |
| app/components/location/form.tsx | Adds redirectTo schema field and RefererRedirectInput. |
| app/components/kits/form.tsx | Adds redirectTo schema field and RefererRedirectInput. |
| app/components/assets/form.tsx | Adds redirectTo schema field and RefererRedirectInput; removes unused Link import. |
| app/components/forms/referer-redirect-input.tsx | New component to pass referer and clear it for new-tab flows. |
Update getRefererPath() to return pathname + search instead of just pathname, ensuring users return to their filtered/searched view. Changes: - Update getRefererPath() to include url.search in return value - Update test to assert full path with query params - Update JSDoc to clarify function returns 'pathname + search' - Update RefererRedirectInput component docs with query param example This fixes the UX issue where users would lose their search/filter context when redirecting back from edit pages.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implement smart UX improvement that redirects users back to the previous page after editing, with special handling for new tabs.
Behavior:
Implementation:
Technical details: