[go: up one dir, main page]

Split up Repository File Tree Browser into smaller components

Problem

The File Tree Browser (FTB) components have been growing and we should start looking into how we can split them before they become harder to maintain. The main tree_list.vue component now starts its template at line 363, indicating it's getting bigger and would benefit from being split into smaller, more focused components.

Context: !210274 (comment 2853919984)

Current State

  • app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue is starting to grow with the template beginning at line 363
  • Several utility functions are embedded within components that could be extracted
  • Mixed responsibilities within single components

Proposed Refactoring

Extract Filter Bar Component

The filter functionality could be moved to a dedicated component to improve separation of concerns.

Extract Utility Functions

Several functions in tree_list.vue could be moved to utility modules:

  • isCurrentPath(path) - Compares a path with the current route path
  • getDirectoryContents(path) - Simple getter that returns cached directory contents
  • shouldRenderShowMore(itemPath, parentPath) - Determines if "show more" should be rendered based on pagination state
  • siblingInfo(item) - Calculates sibling information for accessibility attributes
  • filterInputTooltipTarget() - Returns the filter input element reference
  • processDirectories({ trees, path, level }) - Transforms tree data into list items
  • processFiles({ blobs, path, level }) - Transforms blob data into list items
  • processSubmodules({ submodules, path, level }) - Transforms submodule data into list items

Extract Popover Component

In file_tree_browser_toggle.vue, the popover functionality could be moved to a dedicated component for better reusability.

Benefits

  • Improved maintainability: Smaller, focused components are easier to understand and modify
  • Better developer experience: Future work on FTB features will be easier with a cleaner codebase
  • Enhanced reusability: Extracted utilities and components can be reused across the codebase

Acceptance Criteria

  • Extract filter bar into a separate component
  • Move utility functions to appropriate utility modules
  • Extract popover functionality from file_tree_browser_toggle.vue
  • Ensure all existing functionality remains intact
  • Update tests to cover the new component structure

Priority

This refactoring should be completed before the FTB rollout to ensure we maintain a good developer experience as the feature continues to evolve.

Related to !210274 (merged)

Edited by 🤖 GitLab Bot 🤖