feat: Code Templates + Refactor Dev Env

[johnnyhuy]

• Added unit tests for DefaultPermissionPolicy.
• Enhanced App component with CatalogTable integration and GitLab authentication provider.
• Implemented DefaultPermissionPolicy for permission handling.
• Integrated GitHub and GitLab authentication providers and scaffolder backend modules.
• Added comprehensive documentation for Backstage code templates, including examples and custom actions guide.
• Added various API definitions and templates for GitHub and GitLab.
• Added documentation for Account Management Component and Mobile Banking App.

---

Changes walkthrough 📝

	Relevant files
Tests	1 files module.test.ts Add unit tests for DefaultPermissionPolicy                              plugins/permission-backend-module-default/src/module.test.ts Added unit tests for DefaultPermissionPolicy. Created mock functions for policy queries and users. Implemented tests for various permission scenarios. +110/-0
Enhancement	4 files App.tsx Enhance App component with CatalogTable and GitLab auth    packages/app/src/App.tsx Integrated CatalogTable into CatalogIndexPage. Added GitLab authentication provider. Enhanced ScaffolderPage with group filtering. +37/-3    module.ts Implement DefaultPermissionPolicy for permission handling plugins/permission-backend-module-default/src/module.ts Implemented DefaultPermissionPolicy class. Defined permission handling logic for read and write groups. Registered DefaultPermissionPolicy in permission module. +61/-0    index.ts Integrate GitHub and GitLab auth providers and scaffolder modules packages/backend/src/index.ts Added GitHub and GitLab authentication providers. Integrated scaffolder backend modules for GitHub and GitLab. Replaced allow-all policy with DefaultPermissionPolicy. +5/-11    index.ts Export DefaultPermissionPolicy                                                      plugins/permission-backend-module-default/src/index.ts Exported DefaultPermissionPolicy as default. +8/-0
Configuration changes	1 files .eslintrc.js Add ESLint configuration for permission-backend-module-default plugins/permission-backend-module-default/.eslintrc.js Added ESLint configuration for the permission-backend-module-default plugin. +1/-0
Documentation	9 files code-templates.md Add documentation for Backstage code templates                      docs/code-templates.md Added comprehensive documentation for Backstage code templates. Included examples, template structure, and custom actions guide. +373/-0  .cursorrules Add cursor rules for Backstage web development                      .cursorrules Added cursor rules for Backstage web development. Included guidelines for code style, naming conventions, and performance optimization. +213/-0  core-banking-api.yaml Add core banking API definition                                                    examples/apis/core-banking-api.yaml Added API definition for core banking operations. Included endpoints for account details and transactions. +116/-0  template.yaml Add GitLab merge request template for documentation            examples/templates/gitlab-merge-request/template.yaml Added GitLab merge request template for documentation. Defined parameters, steps, and output for the template. +99/-0    template.yaml Add GitHub pull request template for documentation              examples/templates/github-pull-request/template.yaml Added GitHub pull request template for documentation. Defined parameters, steps, and output for the template. +99/-0    template.yaml Add GitLab blank repository template                                          examples/templates/gitlab-blank-repo/template.yaml Added GitLab blank repository template. Defined parameters, steps, and output for the template. +95/-0    template.yaml Add GitHub blank repository template                                          examples/templates/github-blank-repo/template.yaml Added GitHub blank repository template. Defined parameters, steps, and output for the template. +92/-0    index.md Add documentation for Account Management Component              examples/components/account-management-service/docs/index.md Added documentation for Account Management Component. Included key features and usage guidelines. +58/-0    contributing.md Add contributing guide for Mobile Banking App                        examples/components/mobile-banking-app/docs/contributing.md Added contributing guide for Mobile Banking App. Included steps for making changes and submitting pull requests. +61/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[echohello-codium-ai-pr-agent]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	4, because the PR includes a wide range of changes across multiple files and systems, involving both backend and frontend modifications, new features, refactoring, and documentation updates. The complexity and breadth of the changes require a thorough review to ensure functionality, security, and maintainability.
🧪 Relevant tests	Yes
⚡ Possible issues	Possible Bug: The tests in 'module.test.ts' might not cover all edge cases, especially with complex permission logic. Consider adding more comprehensive tests to cover all potential user group interactions and permission denials.
	Performance Concern: The addition of multiple authentication providers and permission checks could potentially impact the performance of the system. It's recommended to monitor the performance metrics closely after deployment.
🔒 Security concerns	No apparent security issues were introduced in the PR changes as per the provided code snippets. However, it's crucial to ensure that all new environment variables, especially those related to authentication (like API keys and tokens), are properly secured and not exposed in the codebase.

[echohello-codium-ai-pr-agent]

PR Code Suggestions ✨

Category	Suggestion	Score
Best practice	Add a section on security practices to enhance the safety and integrity of template usage Consider adding a section on security practices for template creation and usage. This could include guidelines on sanitizing user inputs, securing template storage, and handling sensitive data securely within templates. docs/code-templates.md [104] ## Key Sections +## Security Practices +- **Input Sanitization**: Ensure all user inputs are sanitized to prevent injection attacks. +- **Secure Storage**: Store templates in a secure location with restricted access. +- **Sensitive Data Handling**: Use encryption and environment variables to handle sensitive data within templates. + Suggestion importance[1-10]: 9 Why: Adding a section on security practices is crucial for ensuring the safety and integrity of template usage. This suggestion addresses a significant aspect that is currently missing in the documentation.	9
	Separate staging and production server URLs to enhance safety It's recommended to separate the staging server URL from the production server URL to avoid accidental pushes to the production environment. Consider using environment-specific configurations or variables. examples/apis/core-banking-api.yaml [21-24] - url: https://api.digitalbanking.com description: Production server -- url: https://api.digitalbanking.com/staging +- url: ${STAGING_API_URL} description: Staging server Suggestion importance[1-10]: 9 Why: This suggestion enhances safety by preventing accidental pushes to the production environment, which is a significant improvement in best practices for API configuration.	9
	Add error handling for asynchronous operations in test cases Consider adding error handling for the asynchronous operations in the test cases. This ensures that any exceptions thrown during the execution of policy.handle are properly caught and handled, making the tests more robust and reliable. plugins/permission-backend-module-default/src/module.test.ts [51] -const decision = await policy.handle(request, user); +let decision; +try { + decision = await policy.handle(request, user); +} catch (error) { + fail(`Error during policy handling: ${error}`); +} Suggestion importance[1-10]: 8 Why: Adding error handling for asynchronous operations in the test cases is a good practice that can make the tests more robust and reliable. This suggestion correctly identifies a potential improvement in the test cases.	8
	Use more descriptive variable names in lambda expressions Consider using a more descriptive variable name than ref in lambda expressions to enhance code readability and maintainability. plugins/permission-backend-module-default/src/module.ts [40] -user?.identity.ownershipEntityRefs.some(ref => writeGroups.includes(ref)) +user?.identity.ownershipEntityRefs.some(ownershipRef => writeGroups.includes(ownershipRef)) Suggestion importance[1-10]: 6 Why: Using more descriptive variable names can enhance code readability and maintainability. While this is a good practice, the impact of this change is relatively minor compared to other suggestions.	6
	Include a last updated timestamp to keep the documentation current and reliable To ensure the documentation remains relevant and up-to-date, consider adding a versioning note or a last updated timestamp at the beginning or end of the document. This helps users know if the content is current with the latest practices and software versions. docs/code-templates.md [1] # Code Templates +*Last updated: 2023-09-15* + Suggestion importance[1-10]: 6 Why: Adding a last updated timestamp is a good practice for maintaining the relevance and reliability of the documentation. However, it is a minor improvement compared to other suggestions.	6
Maintainability	Simplify permission checks by using an array of allowed actions Replace the repeated checks for request.permission.attributes.action with a single check combined with an array of allowed actions. This will simplify the condition and make the code easier to maintain and extend. plugins/permission-backend-module-default/src/module.ts [33-42] +const allowedActions = ['create', 'read', 'delete', 'update']; if ( - (request.permission.name === taskCancelPermission.name || - request.permission.name === actionExecutePermission.name || - request.permission.attributes.action === 'create' || - request.permission.attributes.action === 'read' || - request.permission.attributes.action === 'delete' || - request.permission.attributes.action === 'update') && + [taskCancelPermission.name, actionExecutePermission.name, ...allowedActions].includes(request.permission.attributes.action) && user?.identity.ownershipEntityRefs.some(ref => writeGroups.includes(ref)) ) { return { result: AuthorizeResult.ALLOW }; } Suggestion importance[1-10]: 9 Why: Simplifying the permission checks by using an array of allowed actions improves code readability and maintainability. This suggestion effectively addresses a key area for improvement in the code.	9
	Break down the 'Making Changes' section into sub-sections for better clarity and navigation To enhance clarity and accessibility, consider breaking down the 'Making Changes' section into sub-sections, each detailing a specific part of the process. examples/components/mobile-banking-app/docs/contributing.md [13-23] +### Branching 1. Create a new branch for your feature or bug fix: ``` git checkout -b feature/your-feature-name ``` - 2. Make your changes, following our [Coding Standards](development/coding_standards.md). - 3. Write or update tests for your changes. - 4. Run the test suite to ensure all tests pass: +### Making Changes +2. Make your changes, following our [Coding Standards](development/coding_standards.md). +### Testing +3. Write or update tests for your changes. +4. Run the test suite to ensure all tests pass: ``` npm run test ``` - 5. Commit your changes with a clear and descriptive commit message. +### Committing +5. Commit your changes with a clear and descriptive commit message. Suggestion importance[1-10]: 9 Why: Breaking down the 'Making Changes' section into sub-sections significantly improves readability and navigation, making it easier for contributors to follow the process.	9
	Reduce code duplication by refactoring repeated object creation in tests Refactor the repeated creation of request and user objects in each test case by moving them to the beforeEach block or a helper function. This will reduce code duplication and improve test maintainability. plugins/permission-backend-module-default/src/module.test.ts [46-49] -const request = createRequest('example.permission', { - action: 'read', +let request, user; +beforeEach(() => { + request = createRequest('example.permission', { action: 'read' }); + user = createUser('example-user', ['developers']); }); -const user = createUser('example-user', ['developers']); Suggestion importance[1-10]: 7 Why: Refactoring the repeated creation of request and user objects can reduce code duplication and improve maintainability. However, the suggestion does not account for the different actions and groups used in each test, which may limit its applicability.	7
Enhancement	Add a troubleshooting section to help users resolve common issues with templates It's beneficial to include a troubleshooting section that addresses common issues users might encounter while working with templates, such as template rendering errors or issues with parameter configurations. docs/code-templates.md [104] ## Key Sections +## Troubleshooting + +- **Template Rendering Errors**: Ensure all placeholders are correctly formatted and all required parameters are provided. +- **Parameter Configuration Issues**: Verify that the YAML definitions are correct and all required fields are included. + Suggestion importance[1-10]: 8 Why: A troubleshooting section would be very helpful for users to resolve common issues, improving the overall user experience and reducing potential frustration.	8
	Enhance error handling in the API by providing detailed error messages and schemas To improve the API's response handling, consider providing more detailed error messages and possibly a schema for error responses. This can help clients handle errors more effectively. examples/apis/core-banking-api.yaml [46-50] '400': - description: Bad request + description: Bad request - The request could not be understood by the server due to malformed syntax. + content: + application/json: + schema: + $ref: '#/components/schemas/Error' '404': - description: Account not found + description: Account not found - The account with the given ID does not exist. + content: + application/json: + schema: + $ref: '#/components/schemas/Error' '500': - description: Internal server error + description: Internal server error - The server encountered an unexpected condition. + content: + application/json: + schema: + $ref: '#/components/schemas/Error' Suggestion importance[1-10]: 8 Why: Providing detailed error messages and schemas improves the API's usability and helps clients handle errors more effectively, which is a valuable enhancement.	8
	Add a step to ensure necessary tools are installed before setting up the development environment Consider adding a section about setting up the necessary tools and dependencies before starting development. This can help contributors ensure they have the correct setup before they begin making changes. examples/components/mobile-banking-app/docs/contributing.md [7-9] 1. Fork the repository on GitHub. 2. Clone your forked repository to your local machine. -3. Set up the development environment as described in the [Getting Started](getting_started.md) guide. +3. Ensure you have the necessary tools installed (e.g., Node.js, npm). +4. Set up the development environment as described in the [Getting Started](getting_started.md) guide. Suggestion importance[1-10]: 8 Why: This suggestion is valuable as it ensures contributors have the necessary tools installed before setting up the development environment, which can prevent potential setup issues.	8
	Add a troubleshooting section to assist contributors with common issues Adding a troubleshooting section could be beneficial for addressing common issues that contributors might face during the setup or development process. examples/components/mobile-banking-app/docs/contributing.md [61] +## Troubleshooting +If you encounter issues during setup or development, refer to our [Troubleshooting Guide](troubleshooting.md) or seek help on our community forums. + Thank you for contributing to the Mobile Banking App! Suggestion importance[1-10]: 8 Why: A troubleshooting section is a valuable addition that can help contributors resolve common issues, improving their overall experience and reducing potential frustration.	8
	Enhance documentation clarity by adding visual aids that illustrate the template creation process To improve the clarity and usability of the documentation, consider adding visual aids such as diagrams or flowcharts that illustrate the template creation process and how the scaffolding works in Backstage. docs/code-templates.md [24] ## Getting Started + + +This diagram illustrates the steps involved in creating and using a template in Backstage. + Suggestion importance[1-10]: 7 Why: Visual aids can significantly enhance the clarity and usability of the documentation, making it easier for users to understand the template creation process. However, this is more of an enhancement than a critical addition.	7
	Provide a direct link to the GitHub repository in the 'Fork the repository' step It would be beneficial to provide a direct link to the GitHub repository in the 'Fork the repository' step to streamline the process for new contributors. examples/components/mobile-banking-app/docs/contributing.md [7] -1. Fork the repository on GitHub. +1. Fork the repository on [GitHub](https://github.com/your-repository-url). Suggestion importance[1-10]: 7 Why: Providing a direct link to the GitHub repository is a minor but useful enhancement that can streamline the process for new contributors.	7
Security	Add regex validation to the 'repoUrl' parameter to enhance security To ensure the security of the GitLab merge request process, validate the 'repoUrl' parameter to prevent injection attacks. Consider adding a regex pattern to validate the URL format. examples/templates/gitlab-merge-request/template.yaml [46-58] repoUrl: title: Repository Location type: string + pattern: '^[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*$' ui:field: RepoUrlPicker ui:options: requestUserCredentials: secretsKey: USER_OAUTH_TOKEN allowedHosts: - gitlab.com allowedOwners: - echohello allowedRepos: - example Suggestion importance[1-10]: 7 Why: Adding regex validation to the 'repoUrl' parameter enhances security by preventing potential injection attacks, which is an important security improvement.	7
	Use environment-specific tokens for better security and flexibility Consider using environment-specific tokens instead of a single global token to enhance security and flexibility. This can be managed through environment variables or a secure vault solution. examples/templates/github-pull-request/template.yaml [85] -token: ${{ secrets.USER_OAUTH_TOKEN }} +token: ${{ secrets.GITHUB_TOKEN }} Suggestion importance[1-10]: 6 Why: Using environment-specific tokens can enhance security and flexibility, but the improvement is relatively minor compared to other security measures.	6