feat(ui): UI/UX improvements and component refactoring #5

talissoncosta · 2025-12-19T16:29:37Z

Summary

UI/UX improvements and architectural refactoring for the Flagsmith Backstage Plugin.

Closes Issue #6422 | Reference: #5641

Changes

UI/UX Improvements

Flagsmith branding: Teal primary, purple secondary colors
Visual status indicators: Enabled/disabled dots across all components
Search functionality: Debounced search with clear button
Deep links: Direct links to Flagsmith dashboard for flags and projects
Jira-style tables: Per-environment status in expandable rows
Lazy loading: Feature details load on accordion expand

Component Refactoring

Split large components into smaller, focused modules:

Component	Before	After
`FlagsTab`	636 lines	5 files
`FlagsmithOverviewCard`	269 lines	4 files
`FlagsmithUsageCard`	202 lines	3 files

Testability Improvements

Custom Hooks:

useFlagsmithProject - Fetches project, environments, features
useFlagsmithUsage - Fetches usage data with totals

Utility Functions:

getFeatureEnvStatus - Get feature status per environment
buildEnvStatusTooltip - Build tooltip for environment statuses
calculateFeatureStats - Calculate enabled/disabled counts
paginate - Generic pagination helper

New File Structure

src/
├── components/
│   ├── FlagsTab/
│   │   ├── index.tsx
│   │   ├── ExpandableRow.tsx
│   │   ├── EnvironmentTable.tsx
│   │   ├── FeatureDetailsGrid.tsx
│   │   └── SegmentOverridesSection.tsx
│   ├── FlagsmithOverviewCard/
│   │   ├── index.tsx
│   │   ├── FlagStatsRow.tsx
│   │   ├── FeatureFlagRow.tsx
│   │   └── MiniPagination.tsx
│   ├── FlagsmithUsageCard/
│   │   ├── index.tsx
│   │   ├── UsageChart.tsx
│   │   └── UsageTooltip.tsx
│   └── shared/
├── hooks/
│   ├── useFlagsmithProject.ts
│   └── useFlagsmithUsage.ts
├── utils/
│   └── flagHelpers.ts
└── theme/
    └── flagsmithTheme.ts

Test Plan

yarn lint passes
yarn build passes
Dev preview works with mock data (yarn start)
Search filters flags correctly
Accordion expansion loads details lazily
Deep links open Flagsmith dashboard
Unit tests for hooks and utilities (follow-up)

Screenshots

Run yarn start to preview with mock data

🤖 Generated with Claude Code

- Remove backend plugin (src/service/) in favor of Backstage proxy - Update FlagsmithClient to use proxy endpoint (/proxy/flagsmith) - Add lazy loading for feature details (versions, states) on accordion expand - Reduce initial API calls from 35 to 1 for improved performance - Update README with proxy configuration instructions - Remove backend dependencies from package.json Closes Flagsmith/flagsmith#6420 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add husky and lint-staged for pre-commit linting - Configure lint-staged to run ESLint on staged .ts/.tsx files - Add GitHub Actions CI workflow for lint and build checks - Fix lint errors (radix, nested ternary, icon imports, etc.) - Add tsconfig.json for TypeScript configuration - Remove unused FlagsmithAdminService.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Update tsconfig.json with proper exclusions and type definitions - Change build:all script to check if declaration files were generated - This approach safely handles node_modules TypeScript errors while still failing if our source code has actual type errors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Replace complex shell script with simpler fallback: - Run tsc (may show errors from node_modules) - Fall back to checking if declaration files were generated - This handles the react-markdown type errors gracefully 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Runs lint, TypeScript check, and build in parallel for faster CI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add MSW mock handlers for Flagsmith API responses - Create mock entity with Flagsmith annotations - Update dev/index.tsx with entity provider and mock setup - Add app-config.yaml for dev server configuration - Add public/mockServiceWorker.js for MSW browser support - Add .devcontainer for GitHub Codespaces preview - Add react-dom and react-router-dom dev dependencies Preview the plugin: - Run `yarn start` locally - Or use GitHub Codespaces from the PR 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add undefined checks alongside null checks to prevent "Cannot read properties of undefined (reading 'toString')" error when feature_state_value properties are undefined. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

This method was a leftover from the old backend plugin architecture. With the proxy approach, we just use getProjectFeatures directly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

…-use Detected with knip - these packages were not imported anywhere in the codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Add trailing newline to package.json - Add /dist-demo to .gitignore 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Implements #6421 - adds `/alpha` export path that uses Backstage's new declarative frontend system while maintaining backward compatibility with the existing legacy export. Changes: - Add `@backstage/frontend-plugin-api` dependency - Create `src/alpha.ts` with new frontend system plugin using: - EntityContentBlueprint for FlagsTab - EntityCardBlueprint for FlagsmithOverviewCard and FlagsmithUsageCard - Add exports and typesVersions configuration to package.json Usage: - Legacy: `import { flagsmithPlugin } from '@internal/plugin-flagsmith'` - Alpha: `import flagsmithPlugin from '@internal/plugin-flagsmith/alpha'` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Remove plugin.ts, routes.ts, and plugin.test.ts that were part of the legacy Backstage frontend system using createPlugin API. BREAKING CHANGE: Legacy plugin export removed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Consolidate alpha.ts into index.ts as the main plugin export. The plugin now uses createFrontendPlugin with EntityContentBlueprint and EntityCardBlueprint from the new Backstage frontend system. Exports: - default: flagsmithPlugin (new frontend system) - flagsmithPlugin: named export for compatibility - FlagsTab, FlagsmithOverviewCard, FlagsmithUsageCard: components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Remove the separate /alpha export since the new frontend system is now the default export at the package root. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Remove registerPlugin call since the new frontend system plugin is not compatible with the legacy dev-utils registerPlugin API. Components are rendered directly via addPage instead. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Keep only the default plugin export. The new frontend system handles component registration via blueprints automatically. Dev server now imports components directly from their files. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add centralized theme configuration with: - Brand colors (primary teal, secondary purple) - Status colors (enabled green, disabled gray, warning orange) - Dashboard URL builder functions for deep linking 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add reusable components: - FlagStatusIndicator: colored dot for enabled/disabled states - SearchInput: debounced search input with clear button - FlagsmithLink: external link to Flagsmith dashboard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add TypeScript interfaces to support lazy loading of feature details: - FlagsmithFeatureStateValue: string/integer/boolean values - FlagsmithFeatureSegment: segment ID and priority - FlagsmithFeatureState: environment state with values and segments 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Refactor FlagsTab with improved UX: - Simplified main table with Flag Name, Type, and Created columns - Jira-style per-environment table in expanded row (inspired by #5641) - Lazy loading for detailed feature states on accordion expand - "Show additional details" collapsible for segment overrides - Search functionality with debounced filtering - Deep links to Flagsmith dashboard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Improve OverviewCard with: - Summary stats header (enabled/disabled counts) - Deep link to Flagsmith dashboard - Better visual hierarchy with Flagsmith theme colors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Update usage chart with Flagsmith teal color for better brand consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add comprehensive mock data to support the new UI: - Per-environment feature states with values - Segment override data with priorities - Feature versions with publish info - Multi-environment status for each feature 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Remove the summary stats (X Enabled, Y Disabled) from the header as they were based on default_enabled which doesn't reflect actual per-environment status. A flag could be enabled in Production but disabled in Development, making this count confusing. Following LaunchDarkly plugin pattern of showing only project name and total flag count. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Extract FlagsTab.tsx (636 lines) into modular components: - index.tsx: Main component with data fetching and table layout - ExpandableRow.tsx: Row expansion with lazy loading - EnvironmentTable.tsx: Per-environment status display - FeatureDetailsGrid.tsx: Version, targeting, and details cards - SegmentOverridesSection.tsx: Collapsible segment overrides This improves maintainability and prepares for test coverage. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add reusable hooks for data fetching: - useFlagsmithProject: Fetches project, environments, and features - useFlagsmithUsage: Fetches usage data with total calculation Add utility functions in src/utils/flagHelpers.ts: - getFeatureEnvStatus: Get feature status per environment - buildEnvStatusTooltip: Build tooltip for environment statuses - calculateFeatureStats: Calculate enabled/disabled counts - paginate: Generic pagination helper These abstractions prepare for comprehensive test coverage. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Extract FlagsmithOverviewCard.tsx (269 lines) into modular components: - index.tsx: Main component using custom hook - FlagStatsRow.tsx: Enabled/disabled stats display - FeatureFlagRow.tsx: Individual feature row with environment dots - MiniPagination.tsx: Reusable pagination component Uses useFlagsmithProject hook and utility functions for cleaner code. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Extract FlagsmithUsageCard.tsx (202 lines) into modular components: - index.tsx: Main component using custom hook - UsageChart.tsx: Bar chart with recharts - UsageTooltip.tsx: Custom tooltip for chart data points Uses useFlagsmithUsage hook for cleaner separation of concerns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Replace inline data fetching with useFlagsmithProject hook - Add client to hook return for lazy loading in ExpandableRow - Simplifies FlagsTab from 175 to 138 lines - All three main components now use their respective hooks 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add shared components with accessibility improvements: **New shared components:** - LoadingState: Consistent loading spinner with message and ARIA support - MiniPagination: Moved from OverviewCard to shared (reusable) **Accessibility improvements:** - Add aria-label and aria-expanded to ExpandableRow toggle button - Add role="searchbox" and aria-label to SearchInput - Add aria-label to clear search button - Add aria-label to FlagsmithLink (both icon and text variants) - Add aria-hidden to decorative icons - Add role="navigation" to MiniPagination - Add role="status" to LoadingState **Refactored to use shared components:** - FlagsTab, FlagsmithOverviewCard, FlagsmithUsageCard now use LoadingState - FlagsmithOverviewCard now imports MiniPagination from shared 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Zaimwa9

Nice, a couple of comments. Must fix is the memory leak

src/components/shared/SearchInput.tsx

src/components/FlagsTab/EnvironmentTable.tsx

src/hooks/useFlagsmithProject.ts

src/components/FlagsTab/SegmentOverridesSection.tsx

Zaimwa9 · 2026-01-05T12:13:46Z

Question: what is the 2 enabled / 3 disabled supposed to be reflect ? Disabled => disabled in all environments ?

Zaimwa9 · 2026-01-05T12:15:30Z

I know that it's fake data but still wondering too:
I don't think segment and identity overrides belong there as same this is per environment. I would as new columns in the table maybe? or am I missing something?

Zaimwa9 · 2026-01-05T12:17:32Z

Same here, I believe it should be grouped by environment?

…ents

Simplify SearchInput to a controlled component since filtering is done in-memory and doesn't need debouncing. This also fixes the memory leak issue from the timeout not being cleaned up on unmount. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add || [] fallback for environments and features to handle cases where the API might return null or undefined. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Move initial_value property to the FlagsmithFeature type definition instead of using inline type casting in EnvironmentTable. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Extract segment overrides filter to a variable to avoid running the same filter operation twice in the render. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

talissoncosta · 2026-01-07T00:51:42Z

Thanks for raising the UI issues @Zaimwa9. I've simplified it.

Zaimwa9

Approving, leaving the data shown and what to be displayed to your incoming sync

talissoncosta and others added 25 commits December 17, 2025 08:25

Add dist-types to gitignore

b430daa

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Split CI into 3 parallel jobs: lint, typecheck, build

a4bdcb5

Runs lint, TypeScript check, and build in parallel for faster CI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Remove unused dependencies: @backstage/theme, @material-ui/lab, react…

17d538c

…-use Detected with knip - these packages were not imported anywhere in the codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

chore: add missing EOF newline and ignore dist-demo

83e9c32

- Add trailing newline to package.json - Add /dist-demo to .gitignore 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

chore: remove alpha export path from package.json

796e205

Remove the separate /alpha export since the new frontend system is now the default export at the package root. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

feat(UsageCard): apply Flagsmith brand colors to chart

355b327

Update usage chart with Flagsmith teal color for better brand consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

talissoncosta changed the base branch from main to feat/6421-alpha-export December 23, 2025 01:52

talissoncosta force-pushed the feat/6422-ui-improvements branch from eda8b84 to 14787ef Compare December 23, 2025 01:55

talissoncosta and others added 3 commits December 22, 2025 23:21

talissoncosta changed the title ~~feat(ui): UI/UX improvements for Flagsmith Backstage Plugin~~ feat(ui): UI/UX improvements and component refactoring Dec 23, 2025

talissoncosta and others added 2 commits December 22, 2025 23:52

talissoncosta mentioned this pull request Dec 23, 2025

Spike: Backstage plugin component design Flagsmith/flagsmith#6360

Open

Zaimwa9 requested changes Jan 5, 2026

View reviewed changes

Base automatically changed from feat/6421-alpha-export to main January 5, 2026 15:20

talissoncosta and others added 5 commits January 5, 2026 12:23

Merge remote-tracking branch 'origin/main' into feat/6422-ui-improvem…

e48f6bc

…ents

refactor(SegmentOverridesSection): avoid filtering twice

ba6fcba

Extract segment overrides filter to a variable to avoid running the same filter operation twice in the render. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

talissoncosta requested a review from Zaimwa9 January 7, 2026 00:55

Zaimwa9 approved these changes Jan 7, 2026

View reviewed changes

talissoncosta merged commit 9568e53 into main Jan 7, 2026
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): UI/UX improvements and component refactoring #5

feat(ui): UI/UX improvements and component refactoring #5

Uh oh!

talissoncosta commented Dec 19, 2025 •

edited

Loading

Uh oh!

Zaimwa9 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Zaimwa9 commented Jan 5, 2026

Uh oh!

Zaimwa9 commented Jan 5, 2026

Uh oh!

Zaimwa9 commented Jan 5, 2026

Uh oh!

talissoncosta commented Jan 7, 2026 •

edited

Loading

Uh oh!

Zaimwa9 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(ui): UI/UX improvements and component refactoring #5

feat(ui): UI/UX improvements and component refactoring #5

Uh oh!

Conversation

talissoncosta commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

UI/UX Improvements

Component Refactoring

Testability Improvements

New File Structure

Test Plan

Screenshots

Uh oh!

Zaimwa9 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Zaimwa9 commented Jan 5, 2026

Uh oh!

Zaimwa9 commented Jan 5, 2026

Uh oh!

Zaimwa9 commented Jan 5, 2026

Uh oh!

talissoncosta commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Zaimwa9 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

talissoncosta commented Dec 19, 2025 •

edited

Loading

talissoncosta commented Jan 7, 2026 •

edited

Loading