UI plugins custom features

[wolflu05]

This PR enhances the UI mixin (which currently only can provide panels) with the capability to also integrate in lots of different other parts of the UI via a generic system. E.g. table actions, row actions, custom navigation entries, ... Currently only custom template editors and previews can be provided.

I'm currently working on this label template drag and drop editor plugin: https://github.com/wolflu05/inventree-template-editor-plugin and have released the first version now. Feel free to test it.

TODO

• refactor user interface related API and serializer code into separate files
• basic plugin ui feature implementation
• integrate template editors into plugin system
• integrate template previews into plugin system
• provide exportable types
• add code editor sample to ui sample plugin to use in tests
• refactor ref out of the getFeature functions as parameter and instead provided them if necessary via the renderContext, and also have the ability to specify the return type to make the system more generic for other usecases (e.g. only return a list of navigation entries, ...)
• allow to specify the function name via the source file string divided by a colon
• bump API version
• add tests
• documentation

[netlify]

✅ Deploy Preview for inventree-web-pui-preview ready!

Name	Link
🔨 Latest commit	ebe2f11
🔍 Latest deploy log	https://app.netlify.com/sites/inventree-web-pui-preview/deploys/66f511fc8cf46f0008de95cd
😎 Deploy Preview	https://deploy-preview-8137--inventree-web-pui-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 86 (no change from production) Best Practices: 92 (no change from production) SEO: 70 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 92.77108% with 18 lines in your changes missing coverage. Please review.

Project coverage is 84.44%. Comparing base (b1c1981) to head (ebe2f11).
Report is 318 commits behind head on master.

Files with missing lines	Patch %	Lines
...rontend/src/components/plugins/PluginUIFeature.tsx	83.33%	5 Missing and 2 partials ⚠️
src/frontend/src/hooks/UsePluginUIFeature.tsx	82.60%	4 Missing ⚠️
src/frontend/src/tables/settings/TemplateTable.tsx	78.94%	2 Missing and 2 partials ⚠️
src/backend/InvenTree/plugin/base/ui/api.py	95.23%	2 Missing ⚠️
src/backend/InvenTree/plugin/base/ui/mixins.py	88.88%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8137      +/-   ##
==========================================
+ Coverage   84.12%   84.44%   +0.31%     
==========================================
  Files        1154     1160       +6     
  Lines       51831    52087     +256     
  Branches     1851     1869      +18     
==========================================
+ Hits        43605    43984     +379     
+ Misses       8015     7885     -130     
- Partials      211      218       +7     

Flag	Coverage Δ
backend	85.81% <97.95%> (+0.02%)	⬆️
pui	69.48% <85.29%> (+2.24%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[matmair]

Very interesting, I like the approach @wolflu05!

[wolflu05]

This is ready for review now.

[matmair]

LGTM; There seems to be no coverage on usePluginUIFeature, getPluginTemplateEditor, getPluginTemplatePreview and most changes on TemplateTable.tsx reported on codecov - is that an issue with reporting or are these changes not tested?

[wolflu05]

There seems to be no coverage on usePluginUIFeature, getPluginTemplateEditor, getPluginTemplatePreview and most changes on TemplateTable.tsx reported on codecov - is that an issue with reporting or are these changes not tested?

@matmair I was wondering about that too, but all of that code should normally be covered by my added playwright test. That's why I actually made the effort to activate the sample plugin and ensure the sample template editor is shown when doing template editing. And also make sure that passing the code back and forth between the editors works. But I have no idea why codecov does not display that. Maybe you can help me here?

[matmair]

I see the test but Istanbul is not reporting any coverage - maybe the code sections are not reached because of incremental rendering/loading?

[wolflu05]

Yeah, the template editors are not rendered on the initial component render, as first the data from the server has to be loaded, but that shouldn't cause any problems, as that's how we do it everywhere? But what's interesting though is if you look at the history of the codecov comment, the previous comment actually hasn't contained the missing tsx files, only the python file.

[wolflu05]

@matmair Maybe that's the same problem like mxschmitt/playwright-test-coverage#22, but unfortunately there is no response on that issue . I guess you have used that template to build the coverage system?
Maybe we need to try the official coverage solution: https://playwright.dev/docs/api/class-coverage Seems like that's not a real solution, just some confusing snippet.

[wolflu05]

The code that is marked as uncovered is definitely being run:

Code marked as not covered:

I have added a throw new Error(...) here:

And in the output when running the tests, you can see that this error is raised.
(I have run the tests via: npx playwright test --headed --project chromium -g "PUI - Report Editing")

So this is definitely a problem with the coverage reporting.

[matmair]

This is indeed very curious; do you think it is realistic that we could fix it ourselves or do we have to just ignore it for now?
I would really like to enforce code coverage rules but that will be hard with this not working

[wolflu05]

Not sure, I have no idea what's going on there, I even cannot get coverage to work locally.

[wolflu05]

@matmair can we merge this pr now, as the lines are actually be covered by the tests? Then you also have something to test coverage with your new approach.

[matmair]

I would prefer if we figure this out before, coverage of PUI, in general, is very slacking. We can go ahead and merge but than I would expect an issue to keep track of this.

[wolflu05]

As said before, I have absolutely no clue on this, why it's not counted. I have never done frontend coverage in any other project, so I'm no help here. @SchrodingersGat do you have any idea here?

[wolflu05]

@SchrodingersGat would you mind taking a review at this, so we can merge this? You can activate the sample ui plugin or install the inventree-template-editor-plugin for testing.

[wolflu05]

@SchrodingersGat @matmair the coverage issue has been resolved. It was caused by await page.context().close(); as the last line of the playwright test. I have no idea why this was added. I have just extended the test and didn't keep care what this is doing. I have removed it now, and coverage seems to be reported fine now. So there is nothing in the way anymore.

[SchrodingersGat]

@wolflu05 thanks for your work here, it is looking very promising! Hopefully we can have some fully integrated plugins working soon to test it out with