Repository navigation
feat: Read-Only Field Display - #537
Merged
lornakelly merged 1 commit intoNov 13, 2026
Merged
lornakelly merged 1 commit into
lornakelly merged 1 commit into
Conversation
🦋 Changeset detectedLatest commit: c98728d The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for openworkflow-editor ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
lornakelly
force-pushed
the
254/styling-part-4
branch
from
November 12, 2026 13:46
47fecde to
bebd1b5
Compare
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Read-only rendering drops edited retry payloads, misrepresents valid null and empty-string values as missing, and loses map-key styling because of an invalid CSS selector.
3 open issues
What changed in this PR
Introduces centralized text-based read-only field rendering in the diagram editor, supporting the UX refinements in issue #254.
Changes:
- Displays eight field types as formatted text instead of disabled controls.
- Refines labels, drill counts, task-list hints, and top-level Source placement; removes the Properties heading.
- Updates styles, translations, tests, and release notes.
Package paths below are relative to packages/open-workflow-diagram-editor/; the changeset path is repository-relative.
| File | Description |
|---|---|
tests/side-panel/NodeDetailsView.test.tsx |
Tests text rendering, heading removal, and Source placement. |
tests/side-panel/forms/taskFormContext.test.ts |
Updates drill-count comments only. |
tests/side-panel/forms/TaskForm.oneOfLevels.test.tsx |
Expects read-only variant names as text. |
tests/side-panel/forms/TaskForm.objectLevels.test.tsx |
Supports text assertions in read-only mode. |
tests/side-panel/forms/TaskForm.fieldValidation.test.tsx |
Checks read-only text without controls or alerts. |
tests/side-panel/forms/TaskForm.drill.test.tsx |
Updates read-only counts and value assertions. |
tests/side-panel/forms/OrderedMapRow.test.tsx |
Checks read-only labels as text. |
tests/side-panel/forms/customFields/ThenField.test.tsx |
Removes the disabled-control assertion. |
tests/side-panel/forms/customFields/StructuredValueField.test.tsx |
Removes the disabled-textarea assertion and formats tests. |
tests/side-panel/forms/customFields/ReadOnlyValue.test.tsx |
Adds centralized rendering and formatting tests. |
tests/side-panel/forms/customFields/McpProtocolVersionField.test.tsx |
Removes the disabled-control assertion. |
tests/side-panel/EditFormFooter.forkTask.test.tsx |
Tests hiding the edit hint in read-only mode. |
src/side-panel/SidePanel.css |
Styles read-only values and adjusts map and Source presentation. |
src/side-panel/NodeDetailsView.tsx |
Removes Properties heading and delegates Source placement. |
src/side-panel/forms/VariantPicker.tsx |
Shows the selected variant as read-only text. |
src/side-panel/forms/taskFormContext.ts |
Updates the drill-count comment only. |
src/side-panel/forms/TaskForm.tsx |
Adds top-level footer rendering and empty-form fallback. |
src/side-panel/forms/FieldLabel.tsx |
Uses spans for read-only field labels. |
src/side-panel/forms/FieldControl.tsx |
Routes supported read-only fields to ReadOnlyValue. |
src/side-panel/forms/drill/useDrillNavigation.ts |
Updates the filtering comment only. |
src/side-panel/forms/drill/DrillRow.tsx |
Shows populated-field counts in read-only mode. |
src/side-panel/forms/customFields/ThenField.tsx |
Removes control-level read-only handling. |
src/side-panel/forms/customFields/TaskListDisplay.tsx |
Hides the edit hint in read-only mode. |
src/side-panel/forms/customFields/StructuredValueField.tsx |
Removes textarea read-only handling. |
src/side-panel/forms/customFields/StringControl.tsx |
Removes input read-only handling. |
src/side-panel/forms/customFields/ScrollableTextField.tsx |
Removes textarea read-only handling. |
src/side-panel/forms/customFields/ReadOnlyValue.tsx |
Adds shared scalar and structured-value text rendering. |
src/side-panel/forms/customFields/PatternTextControl.tsx |
Removes input read-only handling. |
src/side-panel/forms/customFields/NumberControl.tsx |
Removes input read-only handling. |
src/side-panel/forms/customFields/EnumControl.tsx |
Removes picker and payload read-only handling. |
src/side-panel/forms/customFields/ChildTaskListField.tsx |
Passes read-only mode to task-list display. |
src/side-panel/forms/customFields/BooleanControl.tsx |
Removes switch read-only handling. |
src/i18n/locales/en.ts |
Adds field-count labels and removes Properties text. |
.changeset/read-only-display.md |
Records the feature as a minor release. |
Review effort: Balanced
Signed-off-by: lornakelly <lornakelly88@gmail.com>
lornakelly
force-pushed
the
254/styling-part-4
branch
from
November 12, 2026 14:26
bebd1b5 to
c98728d
Compare
fantonangeli
approved these changes
Nov 13, 2026
kumaradityaraj
approved these changes
Nov 13, 2026
lornakelly
merged commit Nov 13, 2026
826e001
into
open-workflow-specification:feature/node-editing
10 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Contributes to #254
Summary
Implements a centralised read-only display system for form fields, replacing disabled controls with clean, accessible text representations. This improves the user experience when viewing task details in read-only mode.
Main Changes
ReadOnlyValuecomponent that renders 8 field types as text with smart formattingFieldControl.tsxto route to ReadOnlyValue when isReadOnly && isReadOnlyTextField(field)FieldLabel.tsxuses instead of in read-only mode since there's no control to associate with-
NodeDetailsView.tsxcleaner separation: read-only shows all node errors not in place errorsTaskForm.tsxupdated to work with new read-only displayVerify
Storybook > Examples