Repository: mdn/kuma

Issue:
"Report a content problem" gets wrong title
**Summary**
You end up on https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report&title=%2Fen-US

That prefills the title only to `/en-US`.


**Steps To Reproduce (STR)**

1. Go to https://developer.mozilla.org/en-US/docs/Web/JavaScript
2. Click "Report a content problem" in the "Feedback" menu


**Actual behavior**
GitHub issue form title is just `/en-US`


**Expected behavior**
`/en-US/docs/Web/JavaScript`


**Additional context**
Should it be more than just the document URI?



Discussion:
Perhaps @chrisdavidmills can weigh in what it should do/say?
I'd probably prefer the full URL, e.g. `https://developer.mozilla.org/en-US/docs/Web/JavaScript`, as that way it's quicker to paste it into a new tab and check out the page, when the poster inevitably doesn't tell you what page they've seen the problem on.
We think this is a regression and I've added a p2 label on this. 

@atopal let us know if you want to pull this into Juliette
@tobinmori sure, let's do that.
I poked around to see if it was an easy fix. Perhaps it was an accidental regression in the recent refactoring of the header for the benefit of responsive. But it's not. For the last 11 months (that's what `git blame` shows) the `<MainMenu>` component has been called with `document` instead of `documentData` so it's hard to believe it has ever worked. 

But fixing it isn't trivial because you don't have access to the current URL when server-side rendering SPAs. For that to work, we'd need to get that from Express or something otherwise the React components won't know. 

If it was client-side rendered you could just access the global `window.location.pathname` or `window.location.href` (which is what Chris prefers).

When we SSR render a page, we also include a `url` from Python that gets passed into the `<App>` but it's not available to the `<Header>` component unless we prop drill it. Also, that URL is only a relative URL. 

What we *could* do perhaps is:

1. Use the `url` from Python which is only the pathname as a first pass. We'd need to do the full prop drilling from `<App>` down to `<Header>` etc. 
2. Wherever we do things like `{{ render_react("SPA", request.LANGUAGE_CODE, request.get_full_path(), True)|safe }}` we also pass the `request.get_host()` or something and make this also prop-drill down all the way to the `<MainMenu>`.
3. We *could* do a string replace in the Python code that gets the renderd React component's HTML blob. This would also need to respect the fact that sometimes we don't do server-side rendering. 

Because the work is pretty hard and will need to touch many different moving parts I've changed the estimate up to **2**. 
Also, you *could* do something like this:

```javascript
const path = typeof window !== 'undefined' ? window.location.pathname : WHATEVER_WE_DID_BEFORE`
```
But if you do that, the React.hydrate will trigger a justified warning that the "server-side DOM" is different which is a warning because it can invalidate the hydration and trigger a full React DOM render. 
> 
> 
> Also, you _could_ do something like this:
> 
> ```js
> const path = typeof window !== 'undefined' ? window.location.pathname : WHATEVER_WE_DID_BEFORE`
> ```
> 
> But if you do that, the React.hydrate will trigger a justified warning that the "server-side DOM" is different which is a warning because it can invalidate the hydration and trigger a full React DOM render.

there's also a SSR compatible (meaning "without hydration warning", not that it magically works in SSR) version of that, which is to set the path after the initial client side render, i.e.

```js
const [path, setPath] = useState('whatever_should_be_initial');
useEffect(() => {
  setPath(window.location.pathname);
}, []);
```

Resolving patch:
diff --git a/kuma/wiki/templatetags/ssr.py b/kuma/wiki/templatetags/ssr.py
--- a/kuma/wiki/templatetags/ssr.py
+++ b/kuma/wiki/templatetags/ssr.py
@@ -41,7 +41,6 @@ def render_react(component_name, locale, url, document_data, ssr=True):
         "url": url,
         "documentData": document_data,
     }
-
     if ssr:
         return server_side_render(component_name, data)
     else:


Test patch:
diff --git a/kuma/javascript/src/header/__snapshots__/header.test.js.snap b/kuma/javascript/src/header/__snapshots__/header.test.js.snap
--- a/kuma/javascript/src/header/__snapshots__/header.test.js.snap
+++ b/kuma/javascript/src/header/__snapshots__/header.test.js.snap
@@ -329,7 +329,7 @@ exports[`Header snapshot 1`] = `
             role="menuitem"
           >
             <a
-              href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report&title=%2Fen-US"
+              href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report&title=http://localhost/[fake%20absolute%20url]"
               onClick={[Function]}
               onContextMenu={[Function]}
               rel="noopener noreferrer"