Plugin Walkthrough

[RedEchidnaUK]

This PR adds walkthrough documentation for building an Inventree part plugin panel.

I've created it around a basic example that (hopefully) helps guide the reader on how to do some things,

• Setup a build environment using the Plugin Creator
• Test the build environment
• Create a basic panel
• Query Inventree via the frontend
• Query Inventree via the backend
• Pass data from the backend to the frontend
• Create panel admin settings
• Add custom styling

I would be highly surprised if this PR is 100% correct first time, so please do provide feedback on what you think works or doesn't work and I'll look at changing it. Lastly, I'm not a professional software developer, which means I might well be doing something that isn't best practice and although this is far from a Python/React tutorial it would be nice not to make obvious mistakes. Again, feel free to point out those mistakes.

[netlify[bot]]

✅ Deploy Preview for inventree-web-pui-preview canceled.

Name	Link
🔨 Latest commit	8a4f15e8a44233903a76a5beae038a19ffea6980
🔍 Latest deploy log	https://app.netlify.com/projects/inventree-web-pui-preview/deploys/68506683ba61e20008ec12bd

[matmair]

Thank you for submitting this @RedEchidnaUK ! I will try to give it a thorough review within the next 7 days

[RedEchidnaUK]

Thanks @matmair for the update. Appreciate you taking the time.

[SchrodingersGat]

@RedEchidnaUK this is looking good! Two small suggestions, both to improve discoverability of this walkthrough

1. Add the new page to the index in "mkdocs.yml"
2. Add a link and description to the walkthrough on the "plugins/index" page

[RedEchidnaUK]

Thanks @SchrodingersGat I’ll try and take a look at this later this week.

[RedEchidnaUK]

@SchrodingersGat Sorry, I just realised I updated his but forgot to say I had.

[SchrodingersGat]

@RedEchidnaUK thanks! Looks like the path is incorrect in the mkdocs file though

[RedEchidnaUK]

@SchrodingersGat Once again, sorry. How about now? :)

[SchrodingersGat]

@RedEchidnaUK great work, thanks for your contribution :)

[SchrodingersGat]

@RedEchidnaUK as some changes have been made both to the plugin creator tool, and to the distributed npm package, and how InvenTree expects the plugins to externalize some core packages, your walkthrough is now a bit "out of sync" with the current code.

We are pushing towards our stable 1.0.0 release in the next few weeks. If you have some time, it would be great if you could review the walkthrough, and see where it needs to be updated / adjusted to match latest code?

[RedEchidnaUK]

@SchrodingersGat If I get time, I’ll try and take a look for you this week.

[RedEchidnaUK]

@SchrodingersGat I've had a very quick look at this and currently I can't even get the latest plugin creator (1.8.1) to produce a panel plugin that works with Inventree (0.17.14, clean Docker build). It builds fine, but when copied over to the plugins directory, enabled, and then opened on a part, you get the error,

Error Loading Content

Error occurred while loading plugin content: /static/plugins/example/Panel.js:renderExamplePanel

Using the browser developer tools I'm seeing this error message

ERR: Failed to load plugin from http://inventree.localhost/static/plugins/example/Panel.js: TypeError: can't access property "i18n", window.LinguiCore is undefined

I'm happy to raise as a potential bug (I may be doing something wrong) over on the plugin creator if you think that's the best place to discuss it.

[SchrodingersGat]

(0.17.14, clean Docker build)

The plugin creator tool is targeted against the upcoming 1.0.0 release - and is not compatible with the UI in 0.17.14.

If you can test against the "latest" docker image please do that :)

Also, please refer to the latest docs which attempt to more thoroughly explain the plugin integration:

• https://docs.inventree.org/en/latest/plugins/frontend/
• https://docs.inventree.org/en/latest/plugins/creator/

[SchrodingersGat]

You could try removing the "lingui" external components from the generated vite.config.ts file and see if that compiles? If so, it might be a simple patch to allow this to be more backwards compatible

[RedEchidnaUK]

Ah, that makes perfect sense!

I've built a new instance using 'latest' and the example now works as expected. Just need to find the time to look at my code etc. and I should be able to update the walkthrough for you.

Thanks for the help/pointers

[RedEchidnaUK]

@SchrodingersGat I've almost got this updated for you, but I have one quick question.

In the walkthrough some settings are set via the admin interface. These settings are boolean options, but I noticed they get passed via the context as strings. Has it always been like that?

Obviously I can fix them on the React side, but I didn't do that before. Although maybe they didn't work before...

[SchrodingersGat]

In the walkthrough some settings are set via the admin interface. These settings are boolean options, but I noticed they get passed via the context as strings. Has it always been like that?

Which settings are you talking about in particular?

Note that the settings are all stored as string values, however they are automatically "cast" to the right type (in this case, boolean) when requested

[RedEchidnaUK]

I've done a bit more investigating and I think I have come across a bug.

If you create a part panel plugin that has some boolean admin settings, such as,

SETTINGS = {
    'ENABLE_INDICATORS': {
        'name': 'Indicators',
         'description': 'Show navigation indicators',
        'validator': bool,
        'default': True,
     },
     'ENABLE_LOOP': {
         'name': 'Loop',
         'description': 'Loop through images',
         'validator': bool,
         'default': True,
     }
}

and log the context to the console and you will see them correctly set with the type of boolean.

However, as soon as you change them via the admin interface they lose their type and become 'strings'. Here I have changed ENABLE_LOOP to false,

From this point on, they lose their original type and become strings permanently.

[SchrodingersGat]

@RedEchidnaUK nice catch, I've submitted a patch to fix this: https://github.com/inventree/InvenTree/pull/10133

[RedEchidnaUK]

Thanks for the confirmation @SchrodingersGat, nice to know I wasn’t imagining things on this occasion. Appreciate the quick fix.