feat: Add GitHub Pages demo with mock data#4
Draft
talissoncosta wants to merge 13 commits intofeat/issue-9-ux-improvementsfrom
Draft
feat: Add GitHub Pages demo with mock data#4talissoncosta wants to merge 13 commits intofeat/issue-9-ux-improvementsfrom
talissoncosta wants to merge 13 commits intofeat/issue-9-ux-improvementsfrom
Conversation
talissoncosta
force-pushed
the
feat/github-pages-demo
branch
from
4ac04c7 to
d901671
Compare
Contributor
Demo PreviewPreview URL: https://Flagsmith.github.io/flagsmith-backstage-plugin/pr-4/ This preview will be automatically cleaned up when the PR is closed. |
talissoncosta
force-pushed
the
feat/github-pages-demo
branch
from
f655eff to
dc30dd9
Compare
talissoncosta
changed the base branch from
feat/6424-add-tests
to
feat/6422-ui-improvements
talissoncosta
force-pushed
the
feat/github-pages-demo
branch
from
8e5cf23 to
0d70a91
Compare
talissoncosta
changed the base branch from
main
to
feat/issue-9-ux-improvements
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
talissoncosta
force-pushed
the
feat/github-pages-demo
branch
from
0d70a91 to
e600bd1
Compare
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
This PR adds a GitHub Pages deployment for showcasing the Flagsmith Backstage plugin with mock data.
Features
Demo URL
After merging:
https://flagsmith.github.io/flagsmith-backstage-plugin/Files Added
vite.config.demo.ts- Vite build configurationdemo/directory with App, DemoBanner, main entry point.github/workflows/deploy-demo.yml- Deployment workflow.eslintignore- Exclude demo from lintingScripts Added
yarn build:demo- Build static demoyarn preview:demo- Preview demo locallyTest Plan
yarn lintpassesyarn buildpassesyarn build:demoproduces static files indist-demo/Screenshots
Demo can be previewed locally with
yarn build:demo && yarn preview:demo🤖 Generated with Claude Code