feat(native filters): add filter type icons in config modal

[rusackas]

SUMMARY

I tried this forever ago, but we're in a better place to do this now. This will give me fewer headaches when managing filters, I think.

Adds visual icons to distinguish between filters and dividers in the filter configuration modal's left panel:

• Filters display a filter icon (funnel)
• Dividers display a layout icon (horizontal lines)

This makes it easier to identify what type of item each entry is at a glance.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After:

TESTING INSTRUCTIONS

1. Open a dashboard with native filters
2. Click the gear icon to open filter settings
3. Add a filter and a divider
4. Observe the different icons next to each item in the left panel

ADDITIONAL INFORMATION

• Changes UI
• Has associated issue:
• Required feature flags:
• 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

🤖 Generated with Claude Code

[codeant-ai-for-open-source]

CodeAnt AI is reviewing your PR.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[bito-code-review]

Code Review Agent Run #0bf8ca

Actionable Suggestions - 0

Additional Suggestions - 1

• superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx - 1

  • Inconsistent constant usage · Line 88-88
    Use the defined constant NATIVE_FILTER_DIVIDER_PREFIX instead of hardcoding 'NATIVE_FILTER_DIVIDER' for consistency with other files in the same module.
    Code suggestion

     suggestion
    + import { NATIVE_FILTER_DIVIDER_PREFIX } from './utils';
    
       const isFilterDivider = (id: string) => id.startsWith(NATIVE_FILTER_DIVIDER_PREFIX);

Review Details

• Files reviewed - 1 · Commit Range: 06c32a0..06c32a0

  • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.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]

Nitpicks 🔍

🔒 No security issues identified

⚡ Recommended areas for review Accessibility The new decorative/semantic icons (filter and divider) are rendered without ARIA attributes or labels. Screen readers may not know whether these icons convey meaningful information. Decide whether the icons are purely decorative (use aria-hidden="true") or convey semantics (add aria-label/role="img") and apply consistently. Icon semantics & keyboard interaction The icons are added next to clickable rows — ensure they don't intercept keyboard focus or clicks unexpectedly. If an icon should be clickable / interactive, it needs keyboard handlers and accessible names; if decorative, mark it aria-hidden. Also check visual focus order after icons are added.

[codeant-ai-for-open-source]

CodeAnt AI finished reviewing your PR.

[Copilot]

Pull request overview

This PR adds visual icons to distinguish between filters and dividers in the native filters configuration modal's left panel. The enhancement improves usability by making it easier to identify item types at a glance without reading the full label.

• Adds filter icon (funnel) for regular filter entries
• Adds divider icon (horizontal lines) for divider entries
• Uses conditional rendering based on the filter ID prefix pattern

[justinpark]

LGTM