fix(native-filters): align refresh icon with default value field

[EnxDev]

SUMMARY

The SyncOutlined refresh icon in the filter config form's "Default Value" row was vertically misaligned when a validation error message appeared below the field. The DefaultValueContainer used align-items: center, which centered the icon relative to the combined height of the field + error message, pushing it below the field line.

Changed align-items from center to flex-start so the icon stays anchored at field level, and added margin-top to vertically center it with the 32px input.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

• Before

• After

• Before

• After

TESTING INSTRUCTIONS

1. Go to a dashboard → Edit → Filters
2. Select or create a filter with a dataset
3. Check "Filter has default value"
4. Leave the default value empty so the validation error "Value is required" appears
5. Verify the sync (refresh) icon stays aligned with the select field, not centered with field + error

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Code Review Agent Run #2a4c32

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: f70ccaa..f70ccaa

  • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[codeant-ai-for-open-source]

Sequence Diagram

The PR changes the DefaultValueContainer layout and adds top margin to the sync icon so that the refresh icon remains visually aligned with the input field even when a validation error message appears. The diagram shows the render path (layout anchoring) and the user-triggered refresh flow.

sequenceDiagram
    participant User
    participant FiltersConfigForm
    participant DefaultValueContainer
    participant DataService

    User->>FiltersConfigForm: Open Filters → shows "Default Value" row
    FiltersConfigForm->>DefaultValueContainer: Render with align-items:flex-start + icon margin-top
    DefaultValueContainer-->>FiltersConfigForm: Icon anchored at input level (error flows below)
    User->>FiltersConfigForm: Click sync (refresh) icon
    FiltersConfigForm->>DataService: refreshHandler(true) → fetch default values
    DataService-->>FiltersConfigForm: Return default values
    FiltersConfigForm-->>User: Update Default Value field (icon stays aligned)

Loading

---

Generated by CodeAnt AI

[bito-code-review]

Code Review Agent Run #4f81d4

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: 7c3510e..7c3510e

  • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by