[graphiql] Grafana Embedded GraphiQL Editor CodeMirror info tooltips links navigate away from page

[retrodaredevil]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When embedding a GraphiQLInterface inside of a Grafana query editor, any link to a part of the documentation will instead take the user to http://localhost:3000/javascript:void%200, rather than actually executing whatever JavaScript is supposed to execute.

Screenshot to show what I mean by "info tooltip" - the div at the bottom of the inspect window pops up and I don't really have a way to debug it because when I stop hovering, it disappears.

Expected Behavior

The links in the tooltip should open up the documentation, rather than navigate away from the current page.

Steps To Reproduce

I don't exactly know how to ask others to reproduce this since I have such a unique setup. I mostly would just like pointers on how to debug this myself. If anyone is willing to debug this:

1. Clone https://github.com/wildmountainfarms/wild-graphql-datasource/tree/6f2557995f59e4cb64d65427247522d753528b3b
2. npm run dev
3. mage -v build:linux && npm run server
4. Open http://localhost:3000
5. Navigate to the Star Wars Film Info dashboard
6. Edit one of the panels
7. In the GraphiQL editor, hover over one of the fields in the query to make a tooltip pop up
8. Click either the name of the field or the type of the field
9. You are then navigated to http://localhost:3000/javascript:void%200

Environment

• GraphiQL Version: 3.1.0
• OS: Pop!_OS 22.04
• Browser: Firefox 123.0.1
• Bundler: webpack 5.86.0
• react Version: 18.2.0
• graphql Version: 16.8.1

Anything else?

This issue is a weird one to reproduce, but I would appreciate any guidance in to why this might be happening. Embedding GraphiQL into Grafana is likely something that hasn't been done before, and Grafana itself uses a fair bit of React code, so my guess is that something is conflicting with GraphiQL in a way no one expected.

I would appreciate any guidance to get this fixed, as if you navigate away, you lose whatever progress you have made while editing the dashboard.

[acao]

yeah that looks like something very Grafana specific! it looks like the browser native behavior where it shows the full url when hovering a link, but I'm guessing grafana adds that? have never seen this before or seen it reported in GraphiQL

it could also be that grafana has added something like DOMPurify to filter all URLs for all plugins, thus the unexpected serialization?

[retrodaredevil]

After some more debugging, I found the piece of code responsible for this and confirmed that this behavior happens for other "go nowhere a tags" in Grafana.

First the piece of code responsible for this bug:

graphiql/packages/codemirror-graphql/src/info.ts

Line 300 in 9ef55ab

node.href = 'javascript:void 0'; // eslint-disable-line no-script-url

I created a bug report as linked above and it turns out, if you were to put an element such as <a href="javascript:void 0">lol</a> anywhere on a Grafana page, it would navigate you away from the page.

Now, this is obviously a bug in Grafana, but it's worth mentioning that making href equal to javascript:void 0 is probably not the best solution. There's some discussion here: https://stackoverflow.com/a/1830934/5434860

This issue is probably able to be closed, but I would like to see if anyone had any thoughts on if using javascript: void 0 as an href is something GraphiQL should even be doing in the first place.

[retrodaredevil]

I tracked down this addition to 02a8ec9#diff-ed168189151bacb4f4f21b037ea4aeb8980fbc53a03aa6ba921f1e9f23fcdef0R167 or this:

graphiql/src/info.js

Line 167 in 02a8ec9

node.href = 'javascript:void 0'; // eslint-disable-line no-script-url

This was authored by @leebyron, so I was wondering if you had any insight on this?

[retrodaredevil]

I got #3567 created to fix this issue. It was a pretty simple fix that shouldn't cause any problems. I tested to confirm it works in Grafana, but other than that the testing I did was pretty limited.