ENG-564 (3/4): Wire up SaaS dataset validation and protected field decorations#7685
Merged
Conversation
Swap the Monaco YAML editor for an interactive React Flow graph where each collection and field is a node. Clicking a node opens a drawer to edit its metadata. - Add DatasetNodeEditor with D3 hierarchy layout (LR tree) - Add custom node components (root, collection, field) matching the taxonomy tree visual style with hover context - Add DatasetTreeHoverContext for parent/child/inactive highlighting - Add custom bezier edges that change color on hover - Add DatasetNodeDetailPanel drawer for editing metadata - Enable "Edit dataset" button for SaaS connectors - Remove test results/logs sections for full-canvas layout
…diting to dataset node editor - Add drill-down: overview shows root→collections, clicking a collection shows its fields - Add breadcrumb navigation bar with back button when drilled into a collection - Add/delete collections (via "+" on root node) and fields (via "+" on field nodes for nesting) - Add AddNodeModal with uniqueness validation for naming new nodes - Add DatasetEditorActionsContext to provide CRUD callbacks to node components - Expand detail panel with collapsible fides_meta sections for both collections and fields - Add delete button with confirmation dialog in detail panel - Fix node overlap by constraining container width and increasing layout spacing
The node-based dataset editor should only be used for SaaS connections. DB connectors retain the original Monaco YAML editor with reachability checks.
…down mode - Add-field modal now includes description, data categories, and full fides_meta fields (matching the edit panel) so metadata can be set at creation time. - Remove "+" button from dataset root node (overview mode). - Show "+" on collection node only when it is the drill-down root.
DRY up duplicated code between AddNodeModal and DatasetNodeDetailPanel: - FieldMetadataFormItems component for the 8 fides_meta form fields - buildFieldMeta helper for converting form values to fides_meta - DATA_TYPE_OPTIONS and REDACT_OPTIONS constants
Use useTaxonomies() to populate the data categories Select with suggestions from the existing taxonomy, while still allowing free-form tags input. Extracted as shared DataCategoryTagSelect component.
Only re-fit the viewport when the graph structure changes (node count or focused collection), not when field metadata is edited.
When a collection or field is added, the new node gets a 1.5s yellow highlight animation that fades out, making it easy to spot in the graph.
All 6 base types support the [] array suffix per parse_data_type_string in the backend. Add all 12 variants to the dropdown.
- Replace centered Modal with right-side Drawer matching the edit panel style, with a "Create" button in the drawer header. - Include array data type variants (e.g. string[], object[]) in the data type dropdown.
Adds a toggleable YAML code editor at the bottom of the node graph with two-way sync: graph changes update the YAML and YAML edits update the graph (debounced 500ms with error display).
- Hoist layout options to module constant to prevent useMemo busting - Stabilize onMouseEnter with functional state update (removes dep) - Precompute ancestor/descendant sets per hover instead of per-node - Export ProtectedFieldsInfo from useDatasetGraph, remove duplicate - Remove unused DatasetNodeData type export - Remove no-op onMount from Monaco editor - Add aria-label to add field/nested field buttons - Show add buttons on focus-within (keyboard accessibility)
- Derive selectedNodeData from rawNodes via useMemo instead of storing a stale snapshot in state. Now always reflects the latest dataset. - Debounce detail panel onValuesChange (300ms) to avoid triggering full dataset/graph recomputes on every keystroke. - Guard against null/non-array fields and collections from incomplete YAML edits (e.g. bare "-" list items, partial typing).
…e editor forms These advanced fields are better edited directly in YAML.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Add backend validation for SaaS dataset editing that restores protected fields instead of rejecting edits. This allows the UI to freely edit datasets while the backend ensures structural integrity. Changes: - SaaS validation step restores immutable top-level fields (fides_key, name, description, organization_fides_key) with warnings - Collections cannot be added/removed; violations are auto-corrected - Protected fields (referenced by SaaS config) are restored if deleted - New GET endpoint for protected fields metadata - DatasetFieldWarning schema and warnings[] on BulkPutDataset response - get_saas_config_referenced_field_paths utility for full dot-path refs - Comprehensive unit tests for restore/warning behavior
8 tasks
Contributor
Greptile SummaryThis PR wires up the frontend to the backend's SaaS dataset validation by adding a Key changes:
Confidence Score: 3/5
Important Files Changed
Last reviewed commit: "Wire up protected fi..." |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
…lution, skip warnings for CtlDataset path
Linker44
force-pushed
the
ENG-564-node-editor-validations
branch
from
8b7cef8 to
3f6cb27
Compare
…r' into ENG-564-node-editor-validations
Linker44
force-pushed
the
ENG-564-node-based-dataset-editor
branch
from
8ae534e to
c64b4b0
Compare
Resolved conflict: removed duplicate YAML toggle + standalone Editor block that was superseded by the Splitter-based layout on the base branch.
Use var(--fidesui-bg-corinth) canvas background and CSS variable for dot color to match the taxonomy interactive tree appearance.
Surface the backend's per-field warning messages (collection, field name, action) in the toast notification instead of only showing aggregate counts.
…/fides into ENG-564-node-editor-validations
…on instead of message.
lucanovera
approved these changes
Apr 28, 2026
Contributor
lucanovera
left a comment
lucanovera
left a comment
There was a problem hiding this comment.
Nice work! I've just updated two little things:
- Updated the span badges to use proper Tag components with a warning color from our palette
- The warning errors in the message were hard to read and disappear quickly so I change that to use a Notification component instead.
The palette.module.scss file was removed in the ENG-3479 migration. Update the import to use the TypeScript palette module instead.
The inferred type from Parameters<...>[0][number] resolves to unknown in newer Monaco types. Use an explicit inline type instead.
|
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
3 participants
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.
Ticket ENG-564
Description Of Changes
Wire up the frontend to the backend's SaaS dataset validation. Protected fields and immutable metadata are visually decorated in both the node graph and the YAML editor panel. Saves use the connection-aware PATCH endpoint that enforces structural validation server-side (restoring protected fields/collections if modified). Backend warnings are surfaced to the user after save.
Code Changes
datastore-connection.slice.ts- AddpatchConnectionDatasetsmutation (PATCH) andgetDatasetProtectedFieldsquery endpointsDatasetEditorSection.tsx- Fetch protected fields and pass to node editor, use PATCH for SaaS saves, show backend restoration warningsDatasetNodeEditor.tsx- Compute protected YAML line ranges fromprotectedFieldsdata, apply Monaco decorations (greyed out immutable/protected lines)BulkPutDataset.ts- Addwarningsfield andDatasetFieldWarningtypetypes/api/index.ts- ExportDatasetFieldWarningHow Validation Works
Steps to Confirm
Pre-Merge Checklist
CHANGELOG.mdupdated