-
-
Notifications
You must be signed in to change notification settings - Fork 267
Thing and Item Details: Use core's file-format service to display code in YAML and DSL #3180
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
#3680 Bundle Size — 12.28MiB (+0.08%).331d94e(current) vs bdfb271 main#3678(baseline) Warning Bundle contains 2 duplicate packages – View duplicate packages Bundle metrics
Bundle size by type
Bundle analysis report Branch jimtng:thing-details-code Project dashboard Generated by RelativeCI Documentation Report issue |
|
I like it. You finally decided to strip YAML first lines Would it be possible to have a horizontal scrollbar to be able to see the full DSL? |
|
There are vertical and horizontal scrollbars, just that they're not visible by default until you tried to scroll. That's the default behaviour (from the OS maybe?) |
|
The YAML headers are stripped (version, things: and thinguid) and the rest are unindented. As a result of this, if someone were to copy paste from here, they'd have to re-add the indentation. There's also the "Copy File Definition" button on the main "Thing" tab that was added before, which will give them the full yaml. Maybe we can move that button into the bottom toolbar |
Yes, exact. So that's fine for me. |
|
Did you already handle errors and warnings when editing? |
Come to think of it, if we moved the "copy file" button into the "Code" section, that would be a bit confusing, especially since the yaml code is not exactly the same as the yaml file. So let's leave the copy file button where it is now. |
Edited code gets parsed whenever you switch away from Code tab or when switching yaml <=> dsl. If the editor isn't dirty (modified), parsing is skipped. One thing I'm thinking about: It would be easier for the ui code to get the errors in json too so the actual error message can be displayed, not just the generic http error name (eg. "Bad Request") |
I can do it but look at this answer when I proposed it: |
|
I don't know if you saw my comment (elsewhere) to rename the tab to make it clear it is generated code and not original code. what is your opinion about that? |
|
Maybe hold off on the json error code. I just had a bit of experiment. Whilst I could display the errors in the body, it's a lot to display. Too long for a small dialog box. The editor's built in yaml support can point out obvious syntax errors so hopefully that helps. When I tried dsl, I got this: and tbh I'm not sure it's very helpful. Let's go ahead without this enhancement for now.
I saw your post about that. I think let's just stay with "CODE". "GEN CODE" will raise more questions, and "GENERATED CODE" is too long and will also make people wonder. |
|
For YAML, I implemented some checks (errors and warnings) that would be helpful if displayed. |
|
I saw the yaml one. Whilst it seems helpful, I'm not sure where to display it. It's too big / too much text for the dialog. There may be a way to make codemirror editor to handle it / show it. See https://github.com/openhab/openhab-webui/blob/efe3fefd4f82402b055c86a33cc379075d0efdf2/bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue#L294C21-L306 We'll need the line numbers in a similar manner instead of/in addition to just a message. Yaml isn't the main issue, because as you see we already have a built in (generic) yaml syntax checker on the editor. The DSL one is the problem. An easy solution is to make DSL read-only. Right now you could edit the DSL just like you could edit the YAML. |
|
Refactored the code editor into a component so it can be used in both Thing Details page and Item Details page |
What is interesting is the additionnel checks I implemented like valid item type value, valid item dimension value, ... |
|
I've decided to display the full YAML, including I managed to make it so the first 3 lines are un-editable when it's YAML |
|
Updated the screenshots. YAML syntax is shown exactly as provided, including I hope we can finalise this before the 17th. I won't have a lot of time to work on this after that time until end of June. @lolodomo are the Items (DSL and YAML) ready? I'm trying to combine all the available core PRs to create a complete version, but I can't see a YAML Item converter. Also I mustn't have combined them properly because the combined version returned Bad requests for Things too. |
I am sorry but we are waiting for @openhab/core-maintainers to merge stuff. |
Are they currently separated so that they can be merged independently? If so, perhaps leave them as is. I just need to figure out how to merge them all on my local git so I can build a single complete version. I think I only attempted to merge 3 PRs last time. I'll try all the 4 you mentioned here. |
|
I tried to combine those 4 PRs but I failed :( |
|
I created PR openhab/openhab-core#4793 that contains everything, you can play with it. Ir replaces two PRs and is based on the PR that adds YAML for items. |
Thank you! I will test this now. |
|
@lolodomo could you test this when you have a moment please? Due to the new vue3, make sure to do npm install first. |
|
@openhab/webui-maintainers please remove "awaiting other PR" tag. |
|
@jsjames I've done some more fixes here related to codemirror |
Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
…e in YAML and DSL Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
65825b0 to
b8b8a91
Compare
Signed-off-by: Jimmy Tanagra <[email protected]>
|
Rebased to main |
|
item unit update isn't working |
Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
|
item unit changes in the code are now synced too. |
Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
|
@florian-h05 could you please trigger a copilot review? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This pull request refactors the code editor infrastructure by introducing a new unified code-editor.vue component that replaces the previous inline YAML editing approach. The changes include updates to CSS class names from vue-codemirror to v-codemirror, implementation of a new code editor component with support for multiple formats (YAML, DSL, JSON), and refactored hint utilities for better code completion support in items and things YAML editing.
Key changes:
- Introduced a new
code-editor.vuecomponent that provides a unified editing experience with format switching capabilities (YAML/DSL) - Updated CSS class names from
vue-codemirrortov-codemirroracross all editor instances for consistency - Refactored item and thing editing pages to use the new code editor component with improved dirty state tracking
Reviewed Changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| code-editor.vue | New component providing unified code editing with YAML/DSL format switching and error handling |
| item-edit.vue | Updated to use new code-editor component with enhanced metadata handling |
| thing-details.vue | Refactored to use new code-editor component, removed old YAML conversion methods |
| item-mixin.js | Added deleteMetadata method and renamed saveMetaData to saveMetadata for consistency |
| hint-items.js | Refactored to support new CodeMirror 6 API with improved metadata and dimension hints |
| hint-things.js | Completely refactored for CodeMirror 6 with improved channel type hints |
| hint-rules.js | Extracted common parameter value hinting logic into reusable hintParameterValues function |
| hint-components.js | Updated to use new hintParameterValues helper function |
| hint-utils.js | Added hintParameterValues function and groupsOnly option to hintItems for better filtering |
| script-editor.vue | Enabled item and thing hints by uncommenting imports and adding DSL mode support |
| item-metadata-edit.vue | Updated to use renamed mixin methods and improved CSS positioning |
| item-details.vue | Added "View" link for non-editable items alongside existing "Edit" link |
| transformation-edit.vue | Updated CSS class name from rule-script-editor to transformation-editor |
| rule-edit.vue | Simplified CSS with unified height calculation using --f7-toolbar-height |
| script-edit.vue | Simplified CSS positioning and height calculation |
| scene-edit.vue | Removed obsolete rule-code-editor CSS rules |
| persistence-edit.vue | Updated CSS class name and added position: absolute |
| page editors (tabs, plan, map, layout, home, chart) | Unified CSS class names and height calculations |
| items-add-from-textual-definition.vue | Updated CSS class name and added position: absolute |
| widget-edit.vue | Updated CSS class name from vue-codemirror to v-codemirror |
| semantic-tags-edit.vue | Removed obsolete semantic-tag-code-editor CSS rules |
| blocks-edit.vue | Updated CSS class names from vue-codemirror to v-codemirror |
| widget-code-popup.vue | Updated CSS with simplified positioning |
| sitemap-code.vue | Updated CSS class name and added position: absolute |
| yaml-utils.js | Removed isChannelsSection function (moved to hint-things.js) |
| useUIOptionsStore.ts | Added codeEditorType state for persisting user's preferred code format |
| api.js | Added generic request method for custom API calls |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
bundles/org.openhab.ui/web/src/components/config/editor/hint-items.js
Outdated
Show resolved
Hide resolved
bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
Outdated
Show resolved
Hide resolved
bundles/org.openhab.ui/web/src/components/config/controls/code-editor.vue
Outdated
Show resolved
Hide resolved
…-editor.vue Signed-off-by: Jimmy Tanagra <[email protected]> Co-authored-by: Copilot <[email protected]> Signed-off-by: jimtng <[email protected]>
…tems.js Signed-off-by: Jimmy Tanagra <[email protected]> Co-authored-by: Copilot <[email protected]> Signed-off-by: jimtng <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]> Co-authored-by: Copilot <[email protected]> Signed-off-by: jimtng <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
Copilot reviewed 32 out of 32 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .code-editor | ||
| position absolute | ||
| top calc(var(--f7-navbar-height) + var(--f7-toolbar-height)) | ||
| bottom calc(var(--f7-navbar-height)) |
Copilot
AI
Nov 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Incorrect CSS variable used for bottom positioning. The .code-editor has a bottom toolbar (line 19), so the bottom offset should use --f7-toolbar-height instead of --f7-navbar-height. Change to bottom calc(var(--f7-toolbar-height)).
| bottom calc(var(--f7-navbar-height)) | |
| bottom calc(var(--f7-toolbar-height)) |
| height calc(100% - 2 * var(--f7-navbar-height)) | ||
| width 100% | ||
| .persistence-code-editor.v-codemirror | ||
| position absolute |
Copilot
AI
Nov 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Incomplete CSS rule. The .persistence-code-editor.v-codemirror class has been changed to position absolute but is missing the height calculation that was removed. Based on the pattern in other files (e.g., transformation-edit.vue line 132), this should include height calc(100% - var(--f7-navbar-height) - var(--f7-toolbar-height)) or a similar calculation to properly size the editor.
| position absolute | |
| position absolute | |
| height calc(100% - var(--f7-navbar-height) - var(--f7-toolbar-height)) |
| height calc(100% - 2*var(--f7-navbar-height)) | ||
| width 100% | ||
| .page-code-editor.v-codemirror | ||
| position absolute |
Copilot
AI
Nov 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Incomplete CSS rule. The .page-code-editor.v-codemirror class has been changed to position absolute but is missing the height calculation that was removed. Based on the pattern in other page editor files (e.g., plan-edit.vue, map-edit.vue), this should include a height calculation to properly size the editor.
| position absolute | |
| position absolute | |
| height calc(100% - 48px) |
| .yaml-message | ||
| display block | ||
| .metadata-code-editor.v-codemirror | ||
| position absolute |
Copilot
AI
Nov 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Incomplete CSS rule. The .metadata-code-editor.v-codemirror class has been changed to position absolute but is missing the height calculation that was removed. This should include a height calculation to properly size the editor.
| position absolute | |
| position absolute | |
| height 100% |
| * Parse code back into an object | ||
| * | ||
| * Called from the parent component to update the object from code. | ||
| * The resulting object is emitted in an {update} event. |
Copilot
AI
Nov 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The documentation comment is incomplete. It mentions that the resulting object is emitted in an {update} event, but the actual event emitted is parsed (line 224). The comment should be updated to match the implementation.
| * The resulting object is emitted in an {update} event. | |
| * The resulting object is emitted in a {parsed} event. |
| * Called from the parent component to update the object from code. | ||
| * The resulting object is emitted in an {update} event. | ||
| * | ||
| * @param {function} onSuccessCallback - Optional. A callback function to call when the code has been parsed |
Copilot
AI
Nov 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing documentation for the onFailureCallback parameter. The JSDoc comment should include this parameter since it's used in the function signature.
| * @param {function} onSuccessCallback - Optional. A callback function to call when the code has been parsed | |
| * @param {function} onSuccessCallback - Optional. A callback function to call when the code has been parsed | |
| * @param {function} onFailureCallback - Optional. A callback function to call when parsing fails or no object is found |
| {{ theme.md ? '' : $t('page.navbar.edit') }} | ||
| </f7-link> | ||
| <f7-link v-else icon-md="f7:ellipsis_circle_fill" href="edit"> | ||
| {{ theme.md ? '' : 'View' }} |
Copilot
AI
Nov 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The "View" text should be internationalized using $t() like the "Edit" text on line 12. This ensures consistency in internationalization and allows the text to be translated.
| {{ theme.md ? '' : 'View' }} | |
| {{ theme.md ? '' : $t('page.navbar.view') }} |
|
I'm currently away for a few weeks and have patchy/no access to my dev machine |
Depends on:
Partially resolve openhab/openhab-core#4585
Parse error details shown in a movable popup

YAML Hints adjusted to the new YAML syntax

I added this one hint for the channel type:
