How to change the Panel Editor UI elements grouping using Grafana 7.0+ (UI Grouping)

Hey Everyone,

I would like to have nice new GUI as previously I had for panel plugin which is shown below:

Now I want to have the same grouping of UI elements for the panel editor but I have the following output.

Need some suggestion on how to achieve such a UI grouping with the newest version using the builder. I know that grafana 7.0 onwards have introduced the builder to use, but I have not seen any sample code which demonstrates how to develop panel plugins.

Environment :

  • Grafana version: 7.1.1
  • OS Grafana is installed on: Windows 10
  • User OS & Browser: Windows 10 Chrome
  • Grafana plugins: custom panel plugin using highcharts
  • Others:

Any help would be appreciated from the grafana team :slight_smile: