Overview

In #3459235: Implement front-end (React) routing library, we introduced React router … but we didn't make the server side play nice with client-side-only URLs.

Consequence: navigating to a client-side-routed URL such as /xb/node/1/component/dynamic-image-udf7d fails miserably:

Proposed resolution

Make those URLs work:

  • ✅ the server side should just ignore the client-side-only parts of the URL
  • ✅ the client side should fetch the necessary data and then load the requested part of the UI

User interface changes

CommentFileSizeAuthor
#11 after.gif145.77 KBwim leers
#10 before.gif231.07 KBwim leers
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

larowlan created an issue. See original summary.

larowlan’s picture

Issue summary: View changes
wim leers’s picture

wim leers’s picture

Assigned: Unassigned » wim leers

But … wouldn't non-hash-based routing (like we currently have) be nicer? 🤔

It's just this silly redirect, this should be fixable.

    if (!empty($react_route)) {
      // Temporary measure so refreshing a page with a component selected does
      // not result in a 404.
      // @todo Investigate how https://www.drupal.org/project/decoupled_pages solved this same problem.
      return new RedirectResponse(Url::fromRoute('experience_builder.experience_builder')->toString());
    }

Plus, https://www.drupal.org/project/decoupled_pages already solved this.

wim leers’s picture

Title: Try to use react router's hash router instead of doing redirects in Drupal » Follow-up for #3459235: make server not redirect when requesting a client-side-only route
Assigned: wim leers » jessebaker
Status: Active » Needs work
Issue tags: +DX (Developer Experience)
Parent issue: » #3450592: [META] Front-end Kanban issue tracker
Related issues: +#3461431: Improve client side error handling

Quoting a chat between Jesse and I:

Wim: Q: how do I let the React routing stuff know what the actual URL is? So it can do its routing?
Jesse: It should just pick it up - so hopefully the URL is still fully formed, but just Drupal takes /xb/* and always sends it to /xb/

Based on that … just removing the redirect that the server does should be sufficient? 😅

I can load e.g.

</code> just fine, but then the client runs into an error and causes a full page reload, and I'm hitting this unhandled edge case:
<code>
const NameTag: React.FC<NameTagProps> = (props) => {
  const { elementId, selected } = props;
  const model = useAppSelector(selectModel);
  const component = model[elementId];
  if (!component) {
    console.error(elementId);
    return;
  }

… and that would be much simpler to solve once #3461431: Improve client side error handling is fixed I think? 😅

wim leers’s picture

@larowlan

We're definitely in the 'can't use the full URL' boat here.

Why? 🤔

If this is the answer:

At present we're not even using React router, because /xb/some/thing is redirected to /xb via Drupal so there's no 'hotlinking' or anything that was the original intention of the issue.

… then I get it. But AFAICT it really is trivial to fix that. And yes, the scope I defined in #6 is what should have been a follow-up issue before #3459235: Implement front-end (React) routing library landed 😕


Anyway … here's hoping @jessebaker can adjust the UI to respect the URL — making Drupal respect it was easy 😊

larowlan’s picture

If we can make this work, sounds great!

jessebaker made their first commit to this issue’s fork.

wim leers’s picture

Priority: Normal » Major
Issue summary: View changes
Issue tags: +Needs screenshots, +Usability
StatusFileSize
new231.07 KB

🚀

Given we have @larowlan's +1, revamping the issue summary!

wim leers’s picture

Issue tags: -Needs screenshots +Needs tests
StatusFileSize
new145.77 KB

Woah, looks like @jessebaker already fixed it! 😄

Now this just needs tests!

wim leers’s picture

Status: Needs work » Needs review
Issue tags: -Needs tests

✅ Tests. Updated xb-general.cy.js passes.

(In doing so, I discovered the existing test coverage was rather broken 😅)

wim leers’s picture

Issue summary: View changes
wim leers’s picture

Cypress tests are currently too brittle, probably due to the variability of the GitLab CI runners that drupal.org operates 😬

  1. First CI run: a11y.cy.js failed: https://git.drupalcode.org/project/experience_builder/-/jobs/2391963
  2. Second CI run: undo-redo.cy.js failed: https://git.drupalcode.org/project/experience_builder/-/jobs/2392056
  3. Third CI run: xb-general.cy.js failed: https://git.drupalcode.org/project/experience_builder/-/jobs/2392110
  4. Fourth CI run: success at least: https://git.drupalcode.org/project/experience_builder/-/jobs/2392137
wim leers’s picture

wim leers’s picture

Assigned: jessebaker » Unassigned
Status: Needs review » Reviewed & tested by the community

Thanks for the review, @jessebaker! Merged in upstream commits and awaiting final CI run prior to merging…

  • Wim Leers committed 0c1a9790 on 0.x
    Issue #3465105 by Wim Leers, jessebaker, larowlan: Follow-up for #...
wim leers’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.