Make it possible to generate a Documentation PDF/HTML for a select group of DMN files on KIE Sandbox

[tiagobento]

Continuing with the DMN Editor modernization effort, the Documentation tab needs to be rewritten in React. Part of this task is to also remove the old code of the GWT-based Boxed Expression Editor, as the Documentation tab is the last place depending on it.

### Tasks
- [ ] ~https://github.com/kiegroup/kie-issues/issues/372~
- [ ] ~Find a library that handles PDF templating~
- [ ] ~The new Documentation tab must produce a PDF with the exact same content as the current one.~
- [ ] ~The old GWT-based Boxed Expression Editor code must be deleted. `stunner-editors/kie-wb-common-dmn/*`~

---

NEW DESCRIPTION

This issue was repurposed from simply rewriting the exsiting DMN Editor's Documentation tab in React to a new feature that will allow users to select which DMN files on their project should go on the generated PDF/HTML Documentation.

### Acceptance criteria
- [ ] A new button, similar to "Deploy", should be added on the Editor's page on KIE Sandbox.
- [ ] Users, somehow, will be able to select which DMN files are going to be on the new generated PDF/HTML Documentation. Having the currently open file and its included models pre-selected is a good start.
- [ ] It should be possible to simply see it directly in the browser, or download it in PDF/HTML formats. Using a Modal might not be a bad idea.

[yesamer]

The current Documentation relies on an old version (3.0.1) of mustache.js

Basically, the DMN Diagram and this HTML template are passed to the mustache.js engine, which will generate the HTML code based on the template and filled with the DMN Data.

We can rely on the same library and the same template for the react component too.
PROS:

• Basically using the same approach used in the same editor
• Reuse of the same template
• Using an HTML template simplify its management. In detail, will be easier to maintain and it will be very easy to customize, eg. If a customer asks to customize it, we can simply refer to a different template
• The library has an MIT license.

CONS:

• mustache.js looks like a not very active project.
• In our context, with very big DMN assets, the HTML generation is slow. Don't know if that depends on our logic or on the engine

As an alternative, we can evaluate different libraries, even on different approaches (eg. PDF templating)

[yesamer]

A key point of the component is the included screenshots of the Canvas and the BEE in the HTML report.

Stunner - Lienzo offers natively this capability. We need to find an efficient way to create a PNG snapshot of those components in React.

Canvas snapshot management:: The canvas screenshot can be created in the GWT layer only, at this time. This is simply because the new DMN Documentation is totally decoupled from the Canvas: it can't generate the graph from DMN Diagram.

BEE snapshot management:: In this case, we can rely on the new BEE react component. That could be used in two ways:

• Create an "in memory" PNG screenshot of the rendered BEE.
• Just putting the rendered BEE HTML in the HTML Template.

At this moment, I don't have an idea if and how the two above solutions are achievable.

[yesamer]

Libraries

• mustache.js
• pdfme
• pdf-lib

[tiagobento]

@yesamer I'm +1 for rewriting everything in React. As for rendering the Boxed Expressions directly, I think we should use a different approach. We need to render them in a hidden div, take a screenshot of said div, and use it as an image on the template of the Documentation PDF. WDYT?

[yesamer]

Integration with the current Documentation Tab and new BEE has some issue https://issues.redhat.com/browse/KOGITO-9115

[manstis]

Good bye old friend (code...) 👋 🥲

[jomarko]

@yesamer are blocked on this? Asking because of #388 that should be taken into account during #171 I think,

[tiagobento]

#388 has interesting points that we may take into consideration. We maybe can deprecate the "Documentation" tab of the Editor and come up with a whole new way of generating a document based on the entirety of the DMN models inside a scope (Project, repo, etc).

[tiagobento]

Alright, so I'm going to repurpose this issue. Having a "documentation tab" baked inside the DMN Editor is not enough for big projects with multiple files. Instead, we should start with a project-scoped DMN documentation, where users can generate the documentation of a specific set of files, thus avoiding duplications when it comes to files that are included in multiple models.

Example:

graph TD;
    MyDataTypes-->Decision_1;
    MyCommonBKMs-->Decision_1;
    MyDataTypes-->Decision_2
    MyCommonBKMs-->Decision_2;

Loading

If we were to generate documentation for Decision_1 and Decision_2 separately, both would have duplicate information about MyDataTypes and MyCommonBKMs, which would make it not optimal for complex proejcts with many decision models.

I think we could add a new capability to KIE Sandbox, which would then expand to a "DMN CLI" or something like that, where users could select a portion of DMNs they want to include in the documentation. The same could be expanded to the KIE DMN VS Code Extended in the future, as VS Code would have similar needs to a potential DMN CLI itself.

The new DMN Editor will therefore most likely not have a "Documentation" tab.

cc @porcelli

[jomarko]

Thank you all for discussing the possible solutions, however we are probably blocked from using the mentioned libraries in old fashion, we probably can not just include existing minified js and css files #1711.