AIP-68 | Develop new UI plugins

[bbovenzi]

In an Airflow plugin appbuilder_views will be deprecated. They need to be replaced with react_views.

Fields to include when registering ui_views

{
  name: string, // plugin name
  type: 'react' | 'iframe', // is the plugin a react component or an iframe?
  title: string, // display name to show on buttons
  icon: string, // (optional) path to an icon file to display next to the title
  url_route: string, // (optional) what to display in the url route, defaults to the plugin name
  iframe_link: string // url of the page to load in an iframe
  src: string, // path to the react component as a built javascript bundle file
  location: string[] // where in the UI the component can live:
    // "nav" add as a top-level nav button
    // "dag" add as a tab in the DAG details view
    // "dag_run" add as a tab in the DAG details view but only for dag runs
    // "task" add as a tab in the DAG details view but only for that task instance
    // "dashboard" add a panel on the dashboard homepage
    // "wildcard" add to the BaseLayout component so that it can appear on any/all pages
  conditions: {key: value } // (optional) object of key/value pairs to match against the host page to determine if the plugin should mount (ex: only render for a certain operator or asset type)
  props: string[ ] // (optional) keys of properties to pass to the react component or iframe 
}

The plugins manager then needs to add the icon and component static files to be hosted by FastAPI. We can dynamically lazy load the components with lazy(() => import(/* @vite-ignore */ plugin.src) FastAPI will need a GET /plugins component to send all react-views data to the UI.

Other issues:

• Rename appbuilder_menu_items to menu_items and send the array to the UI to render in the main nav page #42706
• Add support for plugins that are simply urls to render inside of an iframe, saving developers the hassle of building a custom react component just to render a 3rd part website anyway #42708
• Add a CLI command to build all the boilerplate code for a react component project so plugin developers don't need to worry about project setup
• Develop an API for what props a react plugin component can expect from the UI depending on its location.

Other questions:

• Should we still have a webserver run when the FAB provider exists in order to host legacy plugins and render them as iframes?
• What props should we specify to pass to either react components or to iframe plugins?

[bbovenzi]

POC of a react plugin on the Nav level:

I also used https://bolt.new/ as an AI to generate frontend code. I wonder if we can suggest similar tools to help developers who might not know frontend technologies well.