[VC Flow] Support knowledge-base route on VC profile

[bobbykolev]

Relates but does not depend on: alkem-io/server#4848

The VC engine will provide resource links in its answers. When the VC type is KNOWLEDGE_BASE, the link will be of type: ${vcProfileUrl}/${KNOWLEDGE_BASE_PATH}.

This is a basic implementation to support the opening of the KnowledgeBase dialog based on this URL. Additionally, we set and removed the knowledge path on open/close to better support sharing.

Although not robust, this implementation should work fine for this temporary implementation.

Summary by CodeRabbit

• New Features

  • Added Knowledge Base navigation functionality to Virtual Contributor profile
  • Enhanced routing for Virtual Contributor settings and profile pages

• Improvements

  • Streamlined routing structure
  • Improved error route handling
  • Updated navigation logic for Knowledge Base interactions

• Technical Updates

  • Simplified route configurations
  • Updated component navigation methods

[coderabbitai]

Walkthrough

The pull request introduces changes to the routing and navigation structure for Virtual Contributor (VC) profiles, focusing on enhancing the Knowledge Base feature. The modifications simplify the routing in multiple components, specifically in VCRoute and VCSettingsRoute, and add new functionality to VCProfileContentView for managing Knowledge Base navigation. The changes aim to provide a more streamlined user experience when accessing and interacting with a Virtual Contributor's Knowledge Base.

Changes

File	Change Summary
src/domain/community/virtualContributor/VCRoute.tsx	- Simplified route structure - Added new knowledge-base route - Updated error handling for unmatched routes
src/domain/community/virtualContributor/vcProfilePage/VCProfileContentView.tsx	- Added new utility functions for Knowledge Base path management - Implemented useEffect to track Knowledge Base path - Updated navigation and state management logic
src/domain/community/virtualContributorAdmin/VCSettingsRoute.tsx	- Removed parent <Route> element - Flattened route structure

Sequence Diagram

sequenceDiagram
    participant User
    participant VCProfilePage
    participant KnowledgeBaseDialog
    participant Router

    User->>Router: Navigate to VC profile
    Router->>VCProfilePage: Render page
    User->>VCProfilePage: Click Knowledge Base
    VCProfilePage->>Router: Update path with knowledge-base
    Router->>VCProfilePage: Trigger Knowledge Base dialog
    KnowledgeBaseDialog->>VCProfilePage: Open Knowledge Base
    User->>KnowledgeBaseDialog: Close dialog
    KnowledgeBaseDialog->>Router: Remove knowledge-base from path
    Router->>VCProfilePage: Return to original view

Loading

Possibly related issues

• [ACC][VC Flow] URL for the Knowledge Base #7479: Directly addresses the requirement for a direct link to a VC's Knowledge Base, aligning with the PR's routing and navigation improvements

Possibly related PRs

• Fix can't add callout to VC KnowledgeBase. #7437: Relates to Knowledge Base dialog component enhancements
• Optimize the Contributor Account Tab and VC flow  #7444: Optimizes Virtual Contributor flow interactions
• [VC Flow] Choose community step #7457: Improves VC creation and navigation processes

Suggested reviewers

• reactoholic
• ccanos

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/domain/community/virtualContributor/vcProfilePage/VCProfileContentView.tsx (2)

21-22: Consider moving KNOWLEDGE_BASE_PATH to a constants file.

Since this path might be used across different components, it would be better to move it to a shared constants file.

---

60-83: Consider extracting path manipulation utilities.

These utility functions could be moved to a separate file for better code organization and reusability. Also, consider making the path manipulation more robust by:

1. Using URL manipulation utilities instead of string operations
2. Handling edge cases (e.g., trailing slashes)

-  const isKnowledgeBasePath = (pathname: string) => {
-    const pathParts = pathname.split('/');
-    return pathParts[pathParts.length - 1] === KNOWLEDGE_BASE_PATH;
-  };
+  const isKnowledgeBasePath = (pathname: string) => {
+    const url = new URL(pathname, window.location.origin);
+    return url.pathname.endsWith(`/${KNOWLEDGE_BASE_PATH}`);
+  };

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5c15085 and 6579873.

📒 Files selected for processing (3)

• src/domain/community/virtualContributor/VCRoute.tsx (1 hunks)
• src/domain/community/virtualContributor/vcProfilePage/VCProfileContentView.tsx (5 hunks)
• src/domain/community/virtualContributorAdmin/VCSettingsRoute.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

src/domain/community/virtualContributorAdmin/VCSettingsRoute.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Use the following code guide documentation in the codebase: 'docs/code-guidelines.md'.
Ensure sufficient error handling and logging is present, but note:

• We have a global error handler in place. So local try/catch blocks are not required unless they provide value beyond what the global error handler already covers.
• Avoid flagging the absence of local error handling in cases where the global error handler suffices.
• Avoid flagging the absence of logging in cases where the global logger is already in place (graphql usage).

Inform about the recommendation of not using non-null assertion,
except on GraphQL queries where the variable is asserted non-null and followed by a
skip: with the same variable.
Examples:

• Not Required: there's a skip
  {
  variables: { templateId: templateId! },
  skip: !templateId,
  }

Check for common security vulnerabilities such as:

• SQL Injection
• XSS (Cross-Site Scripting)
• CSRF (Cross-Site Request Forgery)
• Insecure dependencies
• Sensitive data exposure

src/domain/community/virtualContributor/VCRoute.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Use the following code guide documentation in the codebase: 'docs/code-guidelines.md'.
Ensure sufficient error handling and logging is present, but note:

• We have a global error handler in place. So local try/catch blocks are not required unless they provide value beyond what the global error handler already covers.
• Avoid flagging the absence of local error handling in cases where the global error handler suffices.
• Avoid flagging the absence of logging in cases where the global logger is already in place (graphql usage).

Inform about the recommendation of not using non-null assertion,
except on GraphQL queries where the variable is asserted non-null and followed by a
skip: with the same variable.
Examples:

• Not Required: there's a skip
  {
  variables: { templateId: templateId! },
  skip: !templateId,
  }

Check for common security vulnerabilities such as:

• SQL Injection
• XSS (Cross-Site Scripting)
• CSRF (Cross-Site Request Forgery)
• Insecure dependencies
• Sensitive data exposure

src/domain/community/virtualContributor/vcProfilePage/VCProfileContentView.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Use the following code guide documentation in the codebase: 'docs/code-guidelines.md'.
Ensure sufficient error handling and logging is present, but note:

• We have a global error handler in place. So local try/catch blocks are not required unless they provide value beyond what the global error handler already covers.
• Avoid flagging the absence of local error handling in cases where the global error handler suffices.
• Avoid flagging the absence of logging in cases where the global logger is already in place (graphql usage).

Inform about the recommendation of not using non-null assertion,
except on GraphQL queries where the variable is asserted non-null and followed by a
skip: with the same variable.
Examples:

• Not Required: there's a skip
  {
  variables: { templateId: templateId! },
  skip: !templateId,
  }

Check for common security vulnerabilities such as:

• SQL Injection
• XSS (Cross-Site Scripting)
• CSRF (Cross-Site Request Forgery)
• Insecure dependencies
• Sensitive data exposure

🔇 Additional comments (3)

src/domain/community/virtualContributorAdmin/VCSettingsRoute.tsx (1)

9-13: LGTM! Route structure is well organized.

The route configuration is clean and properly handles all necessary paths including the error case.

src/domain/community/virtualContributor/VCRoute.tsx (1)

10-14: LGTM! Knowledge base route implementation is solid.

The route structure properly handles the new knowledge-base path while maintaining consistent layout and error handling.

src/domain/community/virtualContributor/vcProfilePage/VCProfileContentView.tsx (1)

90-93: LGTM! Clean dialog state management.

The dialog state is properly managed with URL synchronization.