Files

feat: Add Markdown View Plugin with React and Chakra UI

- Implemented main application structure with App and View components.
- Integrated React Markdown for rendering Markdown content.
- Added API function to fetch Markdown content from the backend.
- Created a custom Chakra UI theme to align with Airflow's design.
- Configured Vite for building the application with appropriate asset paths.
- Included a sample Markdown file for initial content display.
- Set up TypeScript configuration for better development experience.

2025-05-10 06:50:25 +00:00

2.9 KiB

Raw Blame History

Building the Plugin

You can build the plugin into a wheel file using any PEP-517 compatible build frontend. The build process will automatically:

Install UI dependencies using pnpm
Build the React frontend
Package everything into a wheel file

This is handled by a custom Hatch build hook (hatch_build.py).

Example build commands

# Using uv (recommended)
uv build

# Or using pip
pip wheel .

# Or using hatch directly
hatch build

The build process will fail if pnpm is not installed or if the UI build fails.

Quick Test Checklist

After building, you can quickly verify that the UI static files are included in the wheel:

# one-liner smoke test
rm -rf ui/dist && uv build
unzip -l dist/airflow_markdown_view_plugin-*.whl | grep 'ui/dist/index.*.js'

If the grep shows your JS bundles, you’re golden. If not, the hook didn’t run—fix it before shipping.

Markdown View Airflow Plugin

This plugin allows users to render Markdown content from a view.md file directly within the Airflow UI.

Features

Displays content from a markdown_view_plugin/view.md file.
Uses FastAPI for the backend and React/Vite for the frontend.
Integrates with Airflow's UI theme, including light/dark mode support.
Provides a theme toggle button within the plugin's view.

Setup

Place the Plugin: Put the entire markdown_view_plugin directory into your Airflow plugins folder.
Install UI Dependencies: Navigate to the markdown_view_plugin/ui directory and run:
```
pnpm install
```
Build the UI: After installing dependencies, build the React frontend:
```
pnpm run build
```
This will create a dist folder inside markdown_view_plugin/ui.
Restart Airflow Webserver: After adding the plugin and building the UI, restart your Airflow webserver and scheduler.
Access the Plugin: In the Airflow UI, navigate to the "Plugins" menu. You should find a link to the "Markdown View" (the exact name and category might depend on future menu link configuration in markdown_view_plugin.py). Clicking this link will take you to the plugin's page.

Customization

To change the displayed content, edit the markdown_view_plugin/view.md file.
The UI can be further customized by modifying the React components in markdown_view_plugin/ui/src/.
The backend logic is in markdown_view_plugin/markdown_view_plugin.py.

Development

Backend: The FastAPI application is defined in markdown_view_plugin.py.
Frontend: The React/Vite application is in the markdown_view_plugin/ui/ directory.
- To run the frontend in development mode (with hot reloading), navigate to markdown_view_plugin/ui and run pnpm run dev.
- Ensure your vite.config.ts has the correct base path and any necessary proxy configurations if you are developing against a running Airflow instance.

2.9 KiB Raw Blame History Unescape Escape