fix: query header switches behaving incorrectly

[gwdawson]

a while ago we found a bug where the the header switches were behaving incorrectly when you have more than one visual query. this was fixed in the grafana core and bigquery builders but never fixed here in plugin-ui.

Before the fix:
https://github.com/grafana/plugin-ui/assets/34524710/359b0720-fa2f-42b3-80e3-7ab2c1254585

After the fix:
https://github.com/grafana/plugin-ui/assets/34524710/a76834d0-6aa9-4671-ac1f-da4f038f4b78

[gabor]

LGTM 👍

[cletter7]

Just curious, the PR title says "add", while in the changes I see only removal. Could you explain please @gwdawson ?

[gwdawson]

Just curious, the PR title says "add", while in the changes I see only removal. Could you explain please @gwdawson ?

@cletter7 yeah the title is outdated i need to update this.

initially this pr changed the id to look something like this id={'sql-filter-${uuidv4()}'} making them unique.
however this created some bad side effects and we found that by removing the id entirely give us a better result.

[cletter7]

Got it. Just thinking if it is possible that some tests on the consumer side are relying on those ids.

initially this pr changed the id to look something like this id={'sql-filter-${uuidv4()}'} making them unique.
however this created some bad side effects and we found that by removing the id entirely give us a better result.

Might be because you generate a new id on every re-render. Potentially you could generate those ids on initial render only and store them in a local state.