feat(release): add NPM publishing workflow #7
Conversation
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
- 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]>
Add a test job that runs yarn test --coverage --ci on every PR and push to main. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add shared mock data (projects, environments, features, usage data) and test utilities (renderWithBackstage, createMockFetchApi) for use across all tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add tests for getFeatureEnvStatus, buildEnvStatusTooltip, calculateFeatureStats, and paginate functions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add tests for buildFlagUrl and buildProjectUrl URL builder functions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add tests for all API client methods with mocked fetch responses and error handling. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add tests for useFlagsmithProject and useFlagsmithUsage hooks including loading states, success flows, and error handling. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add tests for shared UI components including ARIA accessibility, user interactions, and prop variations. - LoadingState: spinner, message, ARIA attributes - MiniPagination: navigation, disabled states, ARIA - FlagStatusIndicator: enabled/disabled states - FlagsmithLink: link rendering, iconOnly mode - SearchInput: input, clear button, debounce 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add integration tests for main components with mocked API responses, testing loading states, data display, error handling, and user interactions. - FlagsTab: search filtering, feature display, error states - FlagsmithOverviewCard: stats display, pagination - FlagsmithUsageCard: chart rendering, usage data 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Change button to link role for MUI IconButton with component="a" - Use more specific text matchers to avoid multiple element matches - Remove style assertions (CSS-in-JS unreliable in JSDOM) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add static demo deployment for showcasing the plugin: - Vite config for standalone demo build - Demo app with MSW mock handlers - Demo banner indicating mock data usage - GitHub Actions workflow for auto-deploy to Pages - Build script: yarn build:demo Demo URL: https://flagsmith.github.io/flagsmith-backstage-plugin/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add interactive demo configuration:
- Initial setup screen with mock/live mode selection
- Live mode: connect to real Flagsmith with API key
- Mock mode: use MSW for sample data
- Configuration persisted in localStorage
- Reconfigure button in demo banner
Add PR preview deployments:
- Each PR deploys to /pr-{number}/ on GitHub Pages
- Bot comments on PR with preview URL
- Automatic cleanup when PR is closed/merged
- Dynamic base path via VITE_BASE_PATH env variable
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Check if gh-pages branch exists before checkout - Create orphan gh-pages branch if it doesn't exist - Update cleanup job to handle missing branch gracefully 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Sort mock URL patterns by length to match more specific patterns first - Fix dashboard link test to use 'link' role instead of 'button' - Remove unused mockEntity import 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
The FlagsmithClient appends /flagsmith to the base URL from discovery API. MSW handlers expect patterns like */proxy/flagsmith/..., so the discovery API must return /api/proxy (not /api) for mock mode to work correctly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
FlagsmithClient appends /flagsmith to all URLs (designed for Backstage proxy routing). In live mode, we hit the Flagsmith API directly, so strip /flagsmith from the path to get correct API URLs. Before: https://api.flagsmith.com/api/v1/flagsmith/projects/123/ After: https://api.flagsmith.com/api/v1/projects/123/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Convert all inline styles to Material-UI makeStyles for consistency: - FlagsTab: add errorHint, header classes - ExpandableRow: add collapseCell, loadingContainer classes - EnvironmentTable: add envName class - FeatureDetailsGrid: add tagsContainer, serverKeyChip classes - SegmentOverridesSection: add statusLabel class - FlagStatusIndicator: add size variant classes (dotSmall/dotMedium) - LoadingState: add container, message classes - FlagsmithUsageCard: add errorHint class - UsageTooltip: add container, title, content classes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Replace inline styles with makeStyles in demo App LoadingScreen for consistency with the rest of the codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Remove required validation for projectId and orgId fields - Auto-fetch first available org/project when not provided - Update helper text to clarify optional fields - Clarify API Key is Master API Key from Organisation Settings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add console logs for MSW service worker initialization to help debug mock mode issues. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add mockServiceWorker.js generated by MSW for intercepting API requests in mock mode demo. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Add a theme toggle button in the toolbar that allows users to switch between light and dark modes. Theme state is managed in the App component and passed to all child components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Replace hardcoded dark background with color="default" on AppBar - Add conditional text color for title based on theme mode - Make Tabs background adapt to light/dark mode 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add key prop to ThemeProvider to force remount on theme change - Apply background.default to main content area for proper theming - Use explicit background/text colors on AppBar for consistent styling - Adjust Tabs background opacity for better visual balance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
The artifact was being lost when switching branches because git checkout replaces the working directory. Move artifact to /tmp before checkout. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Update package.json with NPM metadata (@flagsmith/backstage-plugin) - Add release workflow with PR previews (@next tag), GitHub Release trigger, and manual dispatch - Add NPM version badge to README - Extract PR comment script to scripts/comment-pr-preview.js Closes #6423 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Contributor
Demo PreviewPreview URL: https://Flagsmith.github.io/flagsmith-backstage-plugin/pr-7/ This preview will be automatically cleaned up when the PR is closed. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
package.jsonwith NPM metadata (@flagsmith/backstage-plugin)@nexttag with version like0.1.0-pr.5.abc1234scripts/comment-pr-preview.jsfor maintainabilityManual Setup Required (After Merge)
@flagsmithNPM organization existsNPM_TOKENsecret to GitHub repository settingsTest plan
Closes #6423
🤖 Generated with Claude Code