Skip to content

Conversation

@jimtng
Copy link
Contributor

@jimtng jimtng commented May 3, 2025

Depends on:

Partially resolve openhab/openhab-core#4585

  • Add segmented buttons to select between YAML and DSL
  • Add "Revert" button
  • Add "Copy" to clipboard button
  • Add a movable Parser Error popup to display the errors returned from the parser API call
  • Adjust the Item and Thing editor's hints to the new syntax
  • Fix some issues with editor's hint/completions
  • Add channel type hint
  • Add support for viewing/editing/adding item metadata in the code editor + completions for known namespaces
    • including changing the item's unit
  • Fix / catch Thing firmware previously unhandled error when loading
image image

Parse error details shown in a movable popup
image

image

YAML Hints adjusted to the new YAML syntax
image

image image

I added this one hint for the channel type:
image

image

@jimtng jimtng requested review from florian-h05 and ghys as code owners May 3, 2025 13:16
@relativeci
Copy link

relativeci bot commented May 3, 2025

#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  Change 5 changes Regression 1 regression
                 Current
#3680
     Baseline
#3678
Regression  Initial JS 1.51MiB(+0.01%) 1.51MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 6.7% 6.65%
Change  Chunks 615(+0.49%) 612
Change  Assets 696(+0.58%) 692
Change  Modules 2409(+0.17%) 2405
No change  Duplicate Modules 0 0
No change  Duplicate Code 0% 0%
No change  Packages 126 126
No change  Duplicate Packages 1 1
Bundle size by type  Change 2 changes Regression 1 regression Improvement 1 improvement
                 Current
#3680
     Baseline
#3678
Regression  JS 10.61MiB (+0.1%) 10.6MiB
Improvement  CSS 842.54KiB (-0.12%) 843.54KiB
No change  Fonts 526.1KiB 526.1KiB
No change  Media 295.6KiB 295.6KiB
No change  IMG 45.73KiB 45.73KiB
No change  Other 847B 847B

Bundle analysis reportBranch jimtng:thing-details-codeProject dashboard


Generated by RelativeCIDocumentationReport issue

@jimtng jimtng force-pushed the thing-details-code branch from e45644a to bc07f37 Compare May 3, 2025 13:24
@lolodomo
Copy link
Contributor

lolodomo commented May 3, 2025

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?

@jimtng
Copy link
Contributor Author

jimtng commented May 3, 2025

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?)

@jimtng
Copy link
Contributor Author

jimtng commented May 3, 2025

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

@lolodomo
Copy link
Contributor

lolodomo commented May 3, 2025

There's also the "Copy File Definition" button on the main "Thing" tab that was added before, which will give them the full yaml.

Yes, exact. So that's fine for me.

@lolodomo
Copy link
Contributor

lolodomo commented May 3, 2025

Did you already handle errors and warnings when editing?
Edited code is parsed only when saving the thing ?

@jimtng
Copy link
Contributor Author

jimtng commented May 3, 2025

Maybe we can move that button into the bottom toolbar

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.

@jimtng
Copy link
Contributor Author

jimtng commented May 3, 2025

Did you already handle errors and warnings when editing?
Edited code is parsed only when saving the thing ?

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:
Right now you're passing on the warnings back in the json (when parsing). I haven't taken that into account yet.
Also you're returning some (all?) errors as HTTP error and when that happens the errors are in plain text not json I think.

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")

@lolodomo
Copy link
Contributor

lolodomo commented May 3, 2025

Also you're returning some (all?) errors as HTTP error and when that happens the errors are in plain text not json I think.

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:
openhab/openhab-core#4779 (comment)

@lolodomo
Copy link
Contributor

lolodomo commented May 3, 2025

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?

@jimtng
Copy link
Contributor Author

jimtng commented May 3, 2025

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:

Error parsing DSL [1,90]: no viable alternative at input '192'
[1,94]: no viable alternative at input '168'
[1,98]: no viable alternative at input '1'
[1,100]: no viable alternative at input '107'
[3,21]: no viable alternative at input 'Stop'
[4,29]: no viable alternative at input 'Duration'
[9,37]: no viable alternative at input 'Media'
[10,35]: no viable alternative at input 'Track'
[14,21]: no viable alternative at input 'Mute'
[15,35]: no viable alternative at input 'URL'
[19,39]: no viable alternative at input 'Episode'
[20,25]: no viable alternative at input 'Idling'
[21,29]: no viable alternative at input 'Subtitle'
[22,25]: no viable alternative at input 'Volume'
[24,29]: missing EOF at 'Location'
[33,44]: mismatched character '<EOF>' expecting '"'

and tbh I'm not sure it's very helpful.

Let's go ahead without this enhancement for now.

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?

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.

@lolodomo
Copy link
Contributor

lolodomo commented May 3, 2025

For YAML, I implemented some checks (errors and warnings) that would be helpful if displayed.

@jimtng
Copy link
Contributor Author

jimtng commented May 3, 2025

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.

@jimtng jimtng force-pushed the thing-details-code branch from 14d7cdd to d6e0946 Compare May 4, 2025 04:53
@jimtng jimtng marked this pull request as draft May 4, 2025 07:36
@jimtng jimtng force-pushed the thing-details-code branch from d6e0946 to d7b60ff Compare May 5, 2025 03:14
@jimtng jimtng changed the title Thing Details: Use core's file-format service to display code in YAML and DSL Thing and Item Details: Use core's file-format service to display code in YAML and DSL May 5, 2025
@jimtng
Copy link
Contributor Author

jimtng commented May 5, 2025

Refactored the code editor into a component so it can be used in both Thing Details page and Item Details page

@jimtng jimtng force-pushed the thing-details-code branch from d7b60ff to d0f45d0 Compare May 5, 2025 03:18
@lolodomo
Copy link
Contributor

lolodomo commented May 5, 2025

Yaml isn't the main issue, because as you see we already have a built in (generic) yaml syntax checker on the editor.

What is interesting is the additionnel checks I implemented like valid item type value, valid item dimension value, ...

@jimtng
Copy link
Contributor Author

jimtng commented May 6, 2025

I've decided to display the full YAML, including version:, things: (or items:), and the uid. It should avoid confusion and it gives a similar result/structure as "Copy to clipboard".

I managed to make it so the first 3 lines are un-editable when it's YAML

@jimtng
Copy link
Contributor Author

jimtng commented May 7, 2025

Updated the screenshots. YAML syntax is shown exactly as provided, including version:, things:, thinguid:. They are no longer stripped as they were done initially.

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.

@lolodomo
Copy link
Contributor

lolodomo commented May 7, 2025

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.

I am sorry but we are waiting for @openhab/core-maintainers to merge stuff.
My availability will also be largely reduced at the end of this week!
To help you, I propose to group several PRs so that you can have one big PR that offers everything including the conversion API for things and items. So I will change PR openhab/openhab-core#4779 to cover things and items but it will make it now dependent on openhab/openhab-core#4776 which itself depends on openhab/openhab-core#4753. And I will also include openhab/openhab-core#4630 in it. Regarding the last one, I made progress this morning, metadata are now properly parsed for DSL items, remains an adjustment for channel links.

@jimtng
Copy link
Contributor Author

jimtng commented May 7, 2025

I propose to group several PRs so that you can have one big PR that offers everything including the conversion API for things and items. So I will change PR openhab/openhab-core#4779 to cover things and items but it will make it now dependent on openhab/openhab-core#4776 which itself depends on openhab/openhab-core#4753. And I will also include openhab/openhab-core#4630 in it. Regarding the last one, I made progress this morning, metadata are now properly parsed for DSL items, remains an adjustment for channel links.

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.

@jimtng
Copy link
Contributor Author

jimtng commented May 7, 2025

I tried to combine those 4 PRs but I failed :(

@lolodomo
Copy link
Contributor

lolodomo commented May 7, 2025

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.
The PR is not 100% finished, especially the DSL part for items.

@jimtng
Copy link
Contributor Author

jimtng commented May 7, 2025

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. The PR is not 100% finished, especially the DSL part for items.

Thank you! I will test this now.

@jimtng
Copy link
Contributor Author

jimtng commented Oct 30, 2025

@lolodomo could you test this when you have a moment please?

Due to the new vue3, make sure to do npm install first.

@jimtng
Copy link
Contributor Author

jimtng commented Oct 30, 2025

@openhab/webui-maintainers please remove "awaiting other PR" tag.

@florian-h05 florian-h05 removed the awaiting other PR Depends on another PR label Oct 30, 2025
@jimtng
Copy link
Contributor Author

jimtng commented Oct 30, 2025

@jsjames I've done some more fixes here related to codemirror

@jimtng jimtng force-pushed the thing-details-code branch from 65825b0 to b8b8a91 Compare November 1, 2025 08:05
@jimtng
Copy link
Contributor Author

jimtng commented Nov 1, 2025

Rebased to main
add support for adding/editing/removing metadata in the code editor + custom completions for well known namespaces

@jimtng
Copy link
Contributor Author

jimtng commented Nov 1, 2025

item unit update isn't working

Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
@jimtng
Copy link
Contributor Author

jimtng commented Nov 1, 2025

item unit changes in the code are now synced too.

Signed-off-by: Jimmy Tanagra <[email protected]>
Signed-off-by: Jimmy Tanagra <[email protected]>
@jimtng
Copy link
Contributor Author

jimtng commented Nov 1, 2025

@florian-h05 could you please trigger a copilot review?

@florian-h05 florian-h05 requested a review from Copilot November 10, 2025 10:43
Copy link

Copilot AI left a 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.vue component that provides a unified editing experience with format switching capabilities (YAML/DSL)
  • Updated CSS class names from vue-codemirror to v-codemirror across 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.

jimtng and others added 3 commits November 10, 2025 23:01
…-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]>
@jimtng jimtng requested a review from Copilot November 10, 2025 13:08
Copy link

Copilot AI left a 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))
Copy link

Copilot AI Nov 10, 2025

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)).

Suggested change
bottom calc(var(--f7-navbar-height))
bottom calc(var(--f7-toolbar-height))

Copilot uses AI. Check for mistakes.
height calc(100% - 2 * var(--f7-navbar-height))
width 100%
.persistence-code-editor.v-codemirror
position absolute
Copy link

Copilot AI Nov 10, 2025

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.

Suggested change
position absolute
position absolute
height calc(100% - var(--f7-navbar-height) - var(--f7-toolbar-height))

Copilot uses AI. Check for mistakes.
height calc(100% - 2*var(--f7-navbar-height))
width 100%
.page-code-editor.v-codemirror
position absolute
Copy link

Copilot AI Nov 10, 2025

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.

Suggested change
position absolute
position absolute
height calc(100% - 48px)

Copilot uses AI. Check for mistakes.
.yaml-message
display block
.metadata-code-editor.v-codemirror
position absolute
Copy link

Copilot AI Nov 10, 2025

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.

Suggested change
position absolute
position absolute
height 100%

Copilot uses AI. Check for mistakes.
* 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.
Copy link

Copilot AI Nov 10, 2025

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.

Suggested change
* The resulting object is emitted in an {update} event.
* The resulting object is emitted in a {parsed} event.

Copilot uses AI. Check for mistakes.
* 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
Copy link

Copilot AI Nov 10, 2025

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.

Suggested change
* @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

Copilot uses AI. Check for mistakes.
{{ theme.md ? '' : $t('page.navbar.edit') }}
</f7-link>
<f7-link v-else icon-md="f7:ellipsis_circle_fill" href="edit">
{{ theme.md ? '' : 'View' }}
Copy link

Copilot AI Nov 10, 2025

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.

Suggested change
{{ theme.md ? '' : 'View' }}
{{ theme.md ? '' : $t('page.navbar.view') }}

Copilot uses AI. Check for mistakes.
@jimtng
Copy link
Contributor Author

jimtng commented Nov 10, 2025

I'm currently away for a few weeks and have patchy/no access to my dev machine

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request main ui Main UI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Thing/Item: move into core the conversions to/from YAML code done by MainUI

3 participants