-
Notifications
You must be signed in to change notification settings - Fork 8
feat: enhance unclaimed nodes modal with GitHub repository info fetching #204
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🎨 Chromatic Visual Testing Results
Check the visual changes and approve or request changes as needed. |
1177152 to
9d9c358
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR enhances the admin unclaimed nodes modal by adding GitHub repository integration that automatically fetches and populates project metadata from pyproject.toml files. The key improvement is a streamlined user experience where administrators can enter a GitHub URL and click "Fetch Info" to auto-populate form fields, reducing manual data entry and potential errors.
Key Changes
- Implemented GitHub API integration to fetch
pyproject.tomlcontent and parse project metadata (name, description, author, license) - Repositioned repository URL field to the top of the form with accompanying fetch button for better UX
- Added comprehensive translation support across 8 languages (English, Spanish, French, Japanese, Korean, Chinese, Russian, Turkish, Arabic)
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| components/nodes/AdminCreateNodeFormModal.tsx | Added fetchGitHubRepoInfo function, fetch button with loading states, and form auto-population logic |
| locales/*/common.json | Added translations for new UI strings (Repository URL, Fetch Info, success/error messages, helper text) |
| src/stories/components/nodes/AdminCreateNodeFormModal.stories.tsx | Created new Storybook story with documentation and example scenarios |
| .storybook/preview.tsx | Cleaned up preview configuration by removing unused code and simplifying locale setup |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
locales/es/common.json
Outdated
| "Failed to delete node. {{message}}": "No se pudo eliminar el nodo. {{message}}", | ||
| "Failed to delete version": "Error al eliminar la versión", | ||
| "Failed to delete version: {{message}}": "无法删除版本:{{message}}", | ||
| "Failed to fetch repository information: {{error}}": "无法获取仓库信息:{{error}}", |
Copilot
AI
Oct 20, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The translation text is in Chinese instead of Spanish. It should be translated to Spanish.
| "Failed to fetch repository information: {{error}}": "无法获取仓库信息:{{error}}", | |
| "Failed to fetch repository information: {{error}}": "No se pudo obtener la información del repositorio: {{error}}", |
locales/es/common.json
Outdated
| "Path To License File": "Ruta al Archivo de Licencia", | ||
| "Pending": "Pendiente", | ||
| "Pending Security Review": "Revisión de Seguridad Pendiente", | ||
| "Please enter a repository URL first": "请先输入仓库 URL", |
Copilot
AI
Oct 20, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The translation text is in Chinese instead of Spanish. It should be translated to Spanish.
| "Please enter a repository URL first": "请先输入仓库 URL", | |
| "Please enter a repository URL first": "Por favor, ingrese primero una URL de repositorio.", |
locales/fr/common.json
Outdated
| "Failed to delete node": "Échec de la suppression du nœud", | ||
| "Failed to delete node. {{message}}": "Échec de la suppression du nœud. {{message}}", | ||
| "Failed to delete version": "Échec de la suppression de la version", | ||
| "Failed to delete version: {{message}}": "无法删除版本:{{message}}", |
Copilot
AI
Oct 20, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The translation text is in Chinese instead of French. This appears to be a pre-existing issue in line 154 but the same pattern affects the newly added line 155. The French translation should be used.
| "Failed to delete version: {{message}}": "无法删除版本:{{message}}", | |
| "Failed to delete version: {{message}}": "Échec de la suppression de la version : {{message}}", |
| type Story = StoryObj<typeof meta> | ||
|
|
||
| // Story wrapper component to handle modal state | ||
| function ModalWrapper(args: any) { |
Copilot
AI
Oct 20, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The parameter type 'any' bypasses TypeScript's type safety. Consider using a more specific type such as the component's props type or React.ComponentProps.
| function ModalWrapper(args: any) { | |
| function ModalWrapper(args: React.ComponentProps<typeof AdminCreateNodeFormModal>) { |
| const projectSection = | ||
| content.match(/\[project\]([\s\S]*?)(?=\n\[|\n$|$)/)?.[1] || '' |
Copilot
AI
Oct 20, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The regex pattern for parsing TOML is fragile and may not handle all valid TOML formats (e.g., inline tables, multi-line strings, escaped characters). Consider using a proper TOML parsing library to ensure robust parsing of pyproject.toml files.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
- Move repository URL field to top of the modal for better UX - Add "Fetch Info" button to automatically populate form fields from GitHub pyproject.toml - Implement GitHub API integration to extract name, description, author, and license - Add comprehensive error handling and user feedback with toast notifications - Create Storybook story for the enhanced modal component - Include helpful placeholder text and loading states for better user experience 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
…DisplayNames calls The about panel in Storybook was showing a blank screen due to the languageName function using Intl.DisplayNames at module load time. Replaced dynamic language name generation with static, hardcoded language names in the locale toolbar configuration to ensure reliable initialization. Also applied code formatting fixes across locale files and other source files. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Fix Spanish translations in locales/es/common.json (lines 155, 259) - Fix French translation in locales/fr/common.json (line 154) - Replace 'any' type with React.ComponentProps in AdminCreateNodeFormModal.stories.tsx - Add base64 validation before atob() in AdminCreateNodeFormModal.tsx - Replace regex TOML parsing with proper smol-toml library for robust parsing - Fix prefer-template ESLint warning 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
6271940 to
fe694aa
Compare
Summary
This PR enhances the admin unclaimed nodes modal by:
• Repository URL moved to top: Improved UX by placing the required repository URL field at the beginning of the form
• One-click info fetching: Added a "Fetch Info" button that automatically populates form fields from GitHub repository's
pyproject.toml• GitHub API integration: Fetches project metadata including name, description, author, and license information
• Enhanced user feedback: Comprehensive error handling with toast notifications for success/failure states
• Improved documentation: Added Storybook story with comprehensive documentation and examples
Features
pyproject.tomlparsingTest Plan
🤖 Generated with Claude Code