Handle graceful degradation for unsupported branch name characters in repository views

Context

This is a follow-up to !214145 which fixes branch names with # characters breaking file preview on page reload. While that MR addresses the # character specifically, there are other special characters that GitLab allows in branch names (per branch naming documentation) that may cause similar issues.

Current Behavior

When a branch contains special characters that aren't properly URL-encoded in the frontend router, the file preview shows a blank page with no indication of what went wrong. Users have no way to understand why the page failed to load or how to recover.

Example: A branch named !@#$%/)( will break the file preview, displaying an empty page.

Desired Behavior

  1. Detect when a branch name contains special characters that can't be properly handled
  2. Display a user-friendly error message explaining what went wrong
  3. Provide a way for users to navigate back or try alternative actions
  4. Log the issue for debugging purposes

Acceptance Criteria

  • When navigating to a file on a branch with unsupported special characters, an error message is displayed instead of a blank page
  • Error message clearly indicates the issue is related to the branch name
  • Users can navigate back to the repository or branch list from the error state
  • Error handling works for both tree view (/-/tree/) and blob view (/-/blob/)
  • Tests cover error scenarios with various special character combinations

Implementation Notes

Recommended Approach:

  1. Enhance the encodeRepositoryPath() utility to handle all special characters that could break routing
  2. Add validation in the router to detect when a branch name can't be properly encoded
  3. Create an error component or error state to display when encoding fails
  4. Add comprehensive tests for edge cases

Characters to Consider:

  • Currently handled: # (via !214145)
  • Should handle: ?, &, and other URL-special characters
  • May need graceful degradation for: !, @, $, %, etc.

Related Files:

  • app/assets/javascripts/repository/utils/url_utility.js - Encoding logic
  • app/assets/javascripts/repository/router.js - Route definitions
  • app/assets/javascripts/repository/pages/blob.vue - Blob view
  • app/assets/javascripts/repository/pages/tree.vue - Tree view

Related Issues

Edited by 🤖 GitLab Bot 🤖