Support new React Interface

[SchrodingersGat]

This PR is a major update to the plugin, to support the modern react interface.

TODO

• Update backend code to support new "UI panels" ecosystem
• Setup react / vite project
• Run CI for frontend code
• Fix path of static javascript file (currently hard-coded)
• Update to pyproject.toml setup script
• Automatically build frontend code on plugin install
• Ensure static files are copied across correctly
• Add custom "admin" UI elements - [PUI] Plugin settings UI InvenTree#8228
• Provide method for deleting existing diagram
• Provide method for uploading a new diagram
• Provide method for uploading an initial diagram file
• Choose better icon for plugin panel

[matmair]

very intresting @SchrodingersGat !

[SchrodingersGat]

@matmair @wolflu05 question for you guys. I have had to "hack" something into setup.py to allow me to copy across the compiled "static" files:

# Copy the compiled frontend files into the 'static' directory
# Required for MANIFEST.in to work correctly
here = pathlib.Path(__file__).parent.absolute()

# Copy the compiled frontend files into the 'static' directory
src_dir = here.joinpath('frontend/dist/static').resolve()
dst_dir = here.joinpath('inventree_wireviz/static').resolve()

if src_dir.exists():
    print("Copying frontend files from", src_dir, "to", dst_dir)
    shutil.copytree(src_dir, dst_dir, dirs_exist_ok=True)

The reason for this is that the MANIFEST.in file does not allow you to specify a separae "target" directory. That is, the directory of the copied files within the package matches the directory where they are located in the project.

Here is the contents of MANIFIEST.in:

recursive-include inventree_wireviz/templates *.js *.html
recursive-include inventree_wireviz/static *.js *.css

So, to appear at ./static/ I have to copy them across in setup.py (after building with npm run build as a separate step).

This works, but is a bit of a kludge and I'd like to avoid this step if possible. It also makes documenting the process (for other plugin developers) a bit tricker. Any ideas on how this might be improved?

[wolflu05]

You can specify the bundle out dir in vite with the rollup options, so that the bundle is directly saved in the static folder.

An other option would be to define a manually cp step in the package.json in the build script. (Something like:

  "scripts": {
    "build": "vite build && cp dist/ static/"

Of course you need the correct paths here)

[SchrodingersGat]

@wolflu05 thanks, that helped. The workflow is much cleaner now :)