Skip to content

feat: redirect to previous page after editing entities#2118

Merged
DonKoko merged 2 commits intomainfrom
refactor-behaviour-after-saving-updated-asset
Oct 15, 2025
Merged

feat: redirect to previous page after editing entities#2118
DonKoko merged 2 commits intomainfrom
refactor-behaviour-after-saving-updated-asset

Conversation

@DonKoko
Copy link
Copy Markdown
Contributor

@DonKoko DonKoko commented Oct 15, 2025

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

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
@DonKoko DonKoko requested a review from Copilot October 15, 2025 13:55
@vercel
Copy link
Copy Markdown

vercel bot commented Oct 15, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Preview Comments Updated (UTC)
shelf-docs Ignored Ignored Preview Oct 15, 2025 2:06pm

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread app/utils/http.server.ts Outdated
Comment thread app/utils/http.server.test.ts Outdated
Comment thread app/utils/http.server.ts
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.
@DonKoko DonKoko merged commit d57141d into main Oct 15, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants