feat(ui): UX improvements for feature flags (#9) #12

talissoncosta · 2026-01-26T20:18:11Z

Summary

This PR implements comprehensive UX improvements for the feature flags plugin based on issue #9:

Table View

Remove Type column (redundant information)
Add Tags column with overflow handling (+N indicator for >3 tags)
Add environment status columns with Switch icons (up to 6 environments)
Add pagination (50 items/page default, configurable 10/25/50/100)
Make entire table row clickable to expand/collapse accordion

Accordion View

Add usage analytics line chart per environment (last 30 days)
- Color-coded by environment type (dev=green, staging=orange, prod=red)
- Hidden when no analytics data available
Add Server-side Only and Archived badges
Add Version info section with live status and date
Add Details card with flag type (standard/multivariate) and value type
Add Ownership card (creator, assigned users, groups)
Limit environment table to 10 environments with overflow indicator

Environment View

Add Segments and Overrides section per environment
Add scheduled changes indicator with date (using Schedule icon)
Add Version column based on use_v2_feature_versioning attribute
Replace text toggles with Material-UI Switch components

Code Quality

Extract shared components (EmptyState, ErrorState, LoadingState)
Extract constants, utilities, and date formatters
Fix performance bug in useFlagsmithUsage (memoize FlagsmithClient)
Improve type safety (Pick)
Add unit tests for hooks and utilities
Export components for legacy frontend system (FlagsTab, FlagsmithOverviewCard, FlagsmithUsageCard)

Not Implemented (Blocked)

Pending Change Requests - Requires backend API endpoint that doesn't exist yet

Test plan

Run yarn build:all - passes
Run yarn test - passes (37 tests)
Verify table pagination works correctly
Verify environment columns show up to 6 envs with Switch icons
Verify error states display correctly with hints
Verify legacy imports work: import { FlagsTab } from '@flagsmith/backstage-plugin'

Closes #9

- Add use_v2_feature_versioning to FlagsmithEnvironment interface - Add group_owners and created_by fields to FlagsmithFeature interface - Add environmentId parameter to getUsageData() method - Add getUsageDataByEnvironments() for parallel fetching per environment Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Replace Type column with Tags column header - Add dynamic environment status columns (max 6 environments) - Add TablePagination with 50 items/page default - Update colSpan calculation for empty state - Pass orgId prop to ExpandableRow component Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Make entire table row clickable to expand/collapse accordion - Add Tags column with chips (max 3 displayed, +N overflow indicator) - Add environment status Switch icons in row (up to 6 environments) - Add stopPropagation to prevent link/button clicks from toggling row - Add onClick prop to FlagsmithLink component for event handling - Add clickableRow and switchOn styles for better UX Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Replace text toggles with Material-UI Switch components - Add Overrides column showing segment and identity counts - Add Value column for CONFIG type flags - Limit displayed environments to 10 with overflow indicator - Add styled switch with Flagsmith brand colors Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add Server-side Only badge with VpnKey icon - Add Archived badge with Archive icon - Add Ownership card showing creator, assigned users, and groups - Add value type detection (Boolean/Number/String) for CONFIG flags - Reorganize cards layout for better information hierarchy Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Create FeatureAnalyticsSection component with recharts LineChart - Display usage data per environment with color-coded lines - Development/Dev: green (#4caf50) - Staging/Stage: orange (#ff9800) - Production/Prod: red (#f44336) - Show last 30 days of flag evaluation data - Auto-hide section when no usage data available - Add orgId prop to ExpandableRow for analytics fetching Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add multivariate_options field to FlagsmithFeature interface - Detect and display Multivariate flag type in details card - Improve value type detection for multivariate options - Rename Config to Remote Config for clarity Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add conditional Version column based on use_v2_feature_versioning - Display v1/v2 indicator per environment - Only show column when at least one environment uses v2 versioning Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add scheduledVersion to FlagsmithFeatureDetails interface - Detect scheduled changes using live_from field (future date, not yet live) - Display warning-styled card with Schedule icon in feature details - Add tests for scheduled version detection - Add mock data with scheduled change for demo Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add 55 mock features to demonstrate pagination functionality - Add per-environment usage data with distinct values (0-500 range) - Add use_v2_feature_versioning to environments for version column - Add initial_value to CONFIG features for value type detection - Add multivariate_options to demonstrate multivariate flag type - Add created_by and group_owners for ownership display - Include special "zebra_stripe_mode" feature on page 2 for search testing - Mock data now covers: tags, badges, analytics, versioning, and ownership Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add useMemo to memoize FlagsmithClient in useFlagsmithUsage hook - Extract constants (pagination, chart config, environment colors) - Add shared styles for switches and chips - Add date formatting utilities - Add flag type helper functions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- useFlagsmithProject: test error handling and data fetching - useFlagsmithUsage: test error handling and totalFlags calculation - flagTypeHelpers: test flag type detection and text utilities Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add reusable ErrorState component with optional hint prop - Replace inline error handling in FlagsTab, FlagsmithOverviewCard, FlagsmithUsageCard - Improve getUsageDataByEnvironments type using Pick<FlagsmithEnvironment> Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Export FlagsTab, FlagsmithOverviewCard, and FlagsmithUsageCard for use with Backstage's legacy frontend system. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Zaimwa9

A couple of comments but looks good overall to me

Zaimwa9 · 2026-01-29T10:40:06Z

src/components/FlagsTab/FeatureAnalyticsSection.tsx

+    };
+
+    fetchUsageData();
+  }, [client, orgId, projectId, environments]);


Can we memoize environments maybe to avoid re-rendering by references comparisons ?

src/api/FlagsmithClient.ts

src/theme/sharedStyles.ts

src/utils/flagTypeHelpers.ts

src/components/FlagsTab/index.tsx

Zaimwa9 · 2026-01-29T11:15:26Z

src/components/FlagsmithUsageCard/index.tsx

-            </Typography>
-          )}
-        </Box>
+        <ErrorState


Seeing it from this part but the font colors need to be changed in the tooltip

Zaimwa9 · 2026-01-29T11:18:05Z

src/components/FlagsTab/ExpandableRow.tsx

+    return (
+      <>
+        <TableRow hover className={classes.clickableRow} onClick={handleToggle}>
+          <TableCell padding="checkbox">


NIT: little inconsistency with the padding and the background color:

- Memoize environments in FeatureAnalyticsSection to prevent unnecessary re-renders - Fix scheduled version selection to pick the earliest (next coming) version when multiple are scheduled - Remove unused useCommonStyles hook from sharedStyles.ts - Move CONFIG/FLAG literals to FEATURE_TYPES constants - Add comment explaining spread operator necessity for PAGINATION_OPTIONS - Fix tooltip font colors in FlagsmithLink component - Fix padding and background color inconsistency in ExpandableRow Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- Create generic ChartTooltip component with render prop pattern - Remove UsageTooltip.tsx wrapper (logic moved inline to UsageChart) - Add AnalyticsTooltip inline in FeatureAnalyticsSection - Use theme colors (theme.palette.grey[800], theme.palette.common.white) - Single source of truth for tooltip styling across all charts - Fix memoization dependency in FeatureAnalyticsSection Benefits: - Fewer component files (eliminated thin wrapper) - Co-located tooltip logic with chart components - Consistent theme-aware styling - Easier to customize per chart Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- Remove useMemo wrapper for environments prop - Use environments directly as useEffect dependency - Let parent component handle memoization if needed - Simpler and more straightforward code Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

talissoncosta and others added 10 commits January 26, 2026 17:05

feat(ui): add version column to environment table

ecb363a

- Add conditional Version column based on use_v2_feature_versioning - Display v1/v2 indicator per environment - Only show column when at least one environment uses v2 versioning Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

talissoncosta force-pushed the feat/issue-9-ux-improvements branch from ef89ce4 to 2015923 Compare January 27, 2026 11:49

talissoncosta mentioned this pull request Jan 27, 2026

refactor(ui): remove misleading aggregated segment/override data #8

Closed

3 tasks

talissoncosta force-pushed the feat/issue-9-ux-improvements branch from 33b1367 to 2015923 Compare January 27, 2026 16:52

talissoncosta and others added 4 commits January 27, 2026 13:55

feat(ui): add EmptyState shared component

4266f4c

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

talissoncosta requested a review from Zaimwa9 January 27, 2026 17:17

fix: export components for legacy frontend system

00a3152

Export FlagsTab, FlagsmithOverviewCard, and FlagsmithUsageCard for use with Backstage's legacy frontend system. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

talissoncosta mentioned this pull request Jan 28, 2026

feat(release): add NPM publishing workflow #7

Open

3 tasks

Zaimwa9 requested changes Jan 29, 2026

View reviewed changes

talissoncosta and others added 3 commits January 29, 2026 10:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): UX improvements for feature flags (#9) #12

feat(ui): UX improvements for feature flags (#9) #12

talissoncosta commented Jan 26, 2026 •

edited

Loading

Uh oh!

Zaimwa9 left a comment

Uh oh!

Zaimwa9 Jan 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Zaimwa9 Jan 29, 2026

Uh oh!

Zaimwa9 Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(ui): UX improvements for feature flags (#9) #12

Are you sure you want to change the base?

feat(ui): UX improvements for feature flags (#9) #12

Conversation

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

Uh oh!

Summary

Table View

Accordion View

Environment View

Code Quality

Not Implemented (Blocked)

Test plan

Uh oh!

Zaimwa9 left a comment

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Zaimwa9 Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

talissoncosta commented Jan 26, 2026 •

edited

Loading