Navbar disappears when loading React Plugin (Airflow 3.1.x) #64149
Replies: 1 comment
-
|
This is a common issue when migrating plugins to Airflow 3's React-based plugin system. The navbar disappears because the plugin is rendering outside the Airflow layout context. Root causeIn Airflow 3, plugins need to integrate with the React shell rather than the old Flask blueprint pattern. If your plugin renders a full page (with its own FixMake sure your plugin:
// Plugin should export a component, not a full page
export default function MyPlugin() {
return (
<div>
{/* Your plugin content here - NO wrapping layout */}
<h1>My Plugin</h1>
</div>
);
}
from airflow.plugins_manager import AirflowPlugin
class MyPlugin(AirflowPlugin):
name = "my_plugin"
appbuilder_views = [{
"name": "My Plugin",
"category": "Plugins",
"view": my_view # This should return content, not a full page
}]
Could you share your plugin's registration code and the React component? That would help pinpoint the exact issue. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Description
I recently upgraded Apache Airflow from 2.10.5 to 3.1.7. After the upgrade. I migrated my plugin to use the new React Plugin system My plugin page is loading successfully, but I am facing an issue where the navigation bar (Home, DAGs, Browse, Admin) disappears after clicking on the plugin.
Expected Behavior
When opening the plugin page:
Actual Behavior
Screenshot
Question
Is there a recommended way to ensure the plugin renders inside the Airflow layout instead of replacing the entire page?
Any guidance or example structure would be really helpful.
Beta Was this translation helpful? Give feedback.
All reactions