Add DIY widget

[rafaellehmkuhl]

This allows the users to create their own widget, with custom HTML+JS+CSS code.

The widget has access to the data-lake and actions APIs (as shown in the video), so one can create rich widgets that interact with the entire Cockpit ecosystem.

I'm using the Monaco editor here (the one VSCode is based on), and the editor window can be dragged to facilitate editing.

In the video I show a simple widget that consists on the memory used by Cockpit (consumed from the data-lake) that changes its color based on a threshold.

diywidget.mp4

[ArturoManzoli]

Still reviewing the code, but for now, you can adjust some interface details:

• Drag icon should be on the top-left corner, 8px from top, 8px from left edge. Not aligned the dialog title, otherwise it seems to be connected to the title, not to the window itself; (you could use negative margins here: e.g.: -mt-[5px])

• The dialog title should be centered;

• Dialog actions should all be in white text. Some dimmed white could be applied.

• The footer is too tall, take 5px and 8px out as shown on the image;

[rafaellehmkuhl]

Still reviewing the code, but for now, you can adjust some interface details:

• Drag icon should be on the top-left corner, 8px from top, 8px from left edge. Not aligned the dialog title, otherwise it seems to be connected to the title, not to the window itself; (you could use negative margins here: e.g.: -mt-[5px])
• The dialog title should be centered;
• Dialog actions should all be in white text. Some dimmed white could be applied.
• The footer is too tall, take 5px and 8px out as shown on the image;

Nice catches, thanks!

[ArturoManzoli]

Some suggestions that could be implemented on this first version:

• Add a hotkey to apply the changes (intuitively I was pressing ctrl+s to save and render like in VSCode 👀). Suggestion is ctrl+enter that is standard to form sending.
• Swap the second frame (css) with the third (JS script) so it will be in the same order VueJS use on their files.

Some suggestions to be implemented in further versions of the DIY widget:

• Expansible frames, so the user will have more space to the one he is working on at the moment, such as the JS script frame;
• Question mark icon on the top-right that has some quick reference, both to the monaco-editor and to the dynamics of data sharing through data lake variables.

[ArturoManzoli]

You could switch the two last to match Vue pattern:

<div ref="htmlEditorContainer" class="editor-container" />
<div ref="jsEditorContainer" class="editor-container" />
<div ref="cssEditorContainer" class="editor-container" />

[ArturoManzoli]

It's not wrong, but would be nice to have standardized function names such as: 'handleCloseDialog' and 'handleOpenDialog'

[rafaellehmkuhl]

Changed to "handleDialogOpening" and "handleDialogClosing", as they refer to the events, not states.

[ArturoManzoli]

Nice, it works well. Just need to adjust some small interface stuff mentioned above.
Also would be nice to have a small guide on how to work with the data lake variables.

[ArturoManzoli]

As mentioned on the functionality review, a ctrl+enter shortcut for this apply function would be very handy.

[rafaellehmkuhl]

Some suggestions that could be implemented on this first version:

• Add a hotkey to apply the changes (intuitively I was pressing ctrl+s to save and render like in VSCode 👀). Suggestion is ctrl+enter that is standard to form sending.
• Swap the second frame (css) with the third (JS script) so it will be in the same order VueJS use on their files.

Some suggestions to be implemented in further versions of the DIY widget:

• Expansible frames, so the user will have more space to the one he is working on at the moment, such as the JS script frame;
• Question mark icon on the top-right that has some quick reference, both to the monaco-editor and to the dynamics of data sharing through data lake variables.

Cool! Will try to do most of those in this PR already!