App Plugins: support react pages and tabs

[ryantxu]

fixes #16433

This issue has grown as I keep poking on it. I'm not sure if I should split it up or just keep it together. Let me know what makes sense.

This PR includes:

• AppRootPage: a single component that gets all request to /a/{plugin-id/*
• PluginConfigTab: a way for apps (and eventually datasources, maybe panels) to add a tab on the existing plugin page
• Migrates the angular PluginEditCtrl to react PluginPage. edit has always felt funny for everything except apps, since it just shows the readme. I took "edit" out of the URL
• Loads the existing app ConfigCtrl within the react tabs -- seems to work!
• migrated angular DashImportListCtrl to react DashboardImporter. Only used for apps right now
• improved the PluginMeta to support the properties used by these pages. specifically dependencies and secureJsonData

I think it is close to ready to go, but would love someone else with apps to test it :)

Screenshots:

The app is configured with:

export const plugin = new AppPlugin()
  .setRootPage(ExampleRootPage)
  .addConfigTab({
    title: 'Tab 1',
    icon: 'fa fa-info',
    body: ExampleTab1,
    id: 'tab1',
  })
  .addConfigTab({
    title: 'Tab 2',
    icon: 'fa fa-user',
    body: ExampleTab2,
    id: 'tab2',
  });

TODO:

• Open popup after clicking 'Update Available!' blocker
• Maybe someone with more react skilz should thunkify PluginDashboards.tsx and/or merge it with DataSourceDashboards.tsx
• Once OK, remove
  • plugin_edit_ctrl.ts
  • plugin_edit.ts
  • import_list

[ryantxu]

Consider: #16528 (comment) when looking at the constructor

[ryantxu]

@torkelo -- this is my one real blocker, everything else just needs testing from someone else running apps :)

Any ideas? is there a way to make a new $scope? or to show-modal with a react component? update_instructions would be pretty easy to convert

[ryantxu]

It would be great to get help testing this from someone running a bunch of plugins and apps. This keeps still has both versions running so it is easy to compare:

New: React:
http://localhost:3333/plugins/example-app/

Old: Angular:
http://localhost:3333/plugins/example-app/edit

[ryantxu]

I think this is ready to go -- maybe someone with more react skilz should thunkify PluginDashboards.tsx and/or merge it with DataSourceDashboards.tsx, but I think that could happen later.

The part I think needs testing is the config page of existing apps. It works fine for everything I have tried, but if apps got sneaky with the ConfigCtrl it may not work now.

We should keep the concept of AppRootPage and ConfgTabs alpha for now, so I don't think this has anything we need to report externally yet.

[torkelo]

Looks good, great work! tested with Wordping & percona app & example app

[ryantxu]

@daniellee @briangann -- this PR changed the container for app ConfigCtrl elements to react. Before 6.2, it would be good to check any apps you have on your systems to make sure they still work as expected :)

[tharinduc]

Hi @ryantxu ,

How can I use this fix of plugins with tabs as navigation in my AngularJs plugins? I recently joined a new company and they have a requirement like this but they have all their plugins built using AngularJs.

[torkelo]

we only support react plugins for this