Dropdown: Stop Dropdown accepting a function as children

[ashharrison90]

What is this feature?

• PanelChrome: Implement hover header #61774 added a new prop to Dropdown, onVisibleChange
• this makes the function-as-a-child pattern redundant, as you can instead use the onVisibleChange prop. think using the new prop is clearer/probably more performant. 👏
• removes being able to use a function as a child from Dropdown
  • technically this is a breaking change, buuuuuuut...
  • looking at https://ops.grafana-ops.net/d/bML5aAb7k/plugins-imports?orgId=1&var-packageName=@grafana%2Fui there are currently no plugins using Dropdown
  • there could be private plugins using it, buuuuuuut...
  • i think the number of people using the function-as-a-child pattern will be vanishingly small and we should just get rid of it now before anyone realises 🤫
• changes the only place that utilised this (QuickAdd) to use onVisibleChange instead

Why do we need this feature?

• keep our components tidy

Who is this feature for?

• me

Which issue(s) does this PR fix?:

Fixes #

Special notes for your reviewer:

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.
• There are no known compatibility issues with older supported versions of Grafana, or plugins.
• It passes the Hosted Grafana feature readiness review for observability, scalability, performance, and security.

Release notice breaking change

We've removed the ability for functions to be passed as children to the Dropdown component. Previously, this was used to access the isOpen state of the dropdown. This can be now be achieved with the onVisibleChange prop.

Before:

return (
  <Dropdown overlay={MenuActions} placement="bottom-end">
    {(isOpen) =>
      <ToolbarButton iconOnly icon="plus" isOpen={isOpen} aria-label="New" />
    }
  </Dropdown>
);

After:

const [isOpen, setIsOpen] = useState(false);

...

return (
  <Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={setIsOpen}>
    <ToolbarButton iconOnly icon="plus" isOpen={isOpen} aria-label="New" />
  </Dropdown>
);

[github-advanced-security]

You have successfully added a new CodeQL configuration .github/workflows/pr-codeql-analysis-javascript.yml:analyze. As part of the setup process, we have scanned this repository and found 27 existing alerts. Please check the repository Security tab to see all alerts.

[joshhunt]

I think we should have a clear deprecation process and follow it even when we don't think it matters. Ignoring the process seems to go against all our goals for helping users upgrade with confidence, and creating a UI library that developers can rely on.

I don't think the cost of keeping this, deprecated, in the Dropdown component is that high.

[ashharrison90]

@joshhunt i mean i agree in principle, i just don't think anyone is using this at all 😅

so put this in the v10 milestone, add a breaking change label+notice and do it that way then? 🤔