add left-pane file tree view and related templates #1704
Conversation
aayushkdev
force-pushed
the
1682-left-pane-file-tree
branch
from
0ffbe25 to
6172941
Compare
aayushkdev
requested review from
tdruez,
Copilot and
AyanSinhaMahapatra
and removed request for
Copilot
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
|
Hey @AyanSinhaMahapatra @tdruez can I have a review of this pr |
aayushkdev
force-pushed
the
1682-left-pane-file-tree
branch
from
03842ca to
7b8ba33
Compare
There was a problem hiding this comment.
@aayushkdev Off to a good start, see my various comments for improvements.
The naming convention needs consistency:
resource_tree, file_tree, file_tree_panel, file-tree, CodebaseResourceTree, codebase_tree, Resource Tree
Let's use CodebaseResourceTree and resource_tree everywhere rather than "file...".
You can start the implementation of the left and right panels rendering.
scanpipe/urls.py
Outdated
| path( | ||
| "project/<slug:slug>/codebase_tree/", | ||
| views.CodebaseResourceTreeView.as_view(), | ||
| name="file_tree", | ||
| ), |
There was a problem hiding this comment.
Move this just after the project/<slug:slug>/codebase/", entry.
There was a problem hiding this comment.
name="file_tree", is not consistent with codebase_tree and CodebaseResourceTreeView
scanpipe/views.py
Outdated
| subdirs = CodebaseResource.objects.filter( | ||
| project=project, | ||
| parent_path=OuterRef("path"), | ||
| ) | ||
|
|
||
| children = base_qs.annotate(has_children=Exists(subdirs)) |
There was a problem hiding this comment.
This should be refactored as a method of the QuerySet.
| {% else %} | ||
| <div class="is-flex is-align-items-center ml-5 is-clickable"> | ||
| <span class="icon is-small mr-1"> | ||
| <i class="fas fa-file"></i> |
There was a problem hiding this comment.
Let's use far to enforce the visual distinction between files and directories.
| <li class="mb-1"> | ||
| {% if node.is_dir %} | ||
| <div class="tree-node is-flex is-align-items-center has-text-weight-semibold is-clickable px-1" data-folder{% if node.has_children %} data-target="{{ node.path|slugify }}" data-url="{% url 'file_tree' slug=project.slug %}?path={{ node.path }}"{% endif %}> | ||
| <span class="icon is-small chevron mr-1" data-chevron{% if not node.has_children %} style="visibility: hidden;"{% endif %}> |
| .hidden { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
Remove and use is-hidden class instead.
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
aayushkdev
force-pushed
the
1682-left-pane-file-tree
branch
from
b1f8a7f to
3d1c4b7
Compare
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
fix #1682
tree.webm
Summary/Goals of this change
The goal of this PR is to introduce a collapsible file tree panel in the left pane of the project resource view. This view allows users to explore the project's CodebaseResource in a more user friendly way.
Clicking the chevron next to a folder toggles a dropdown view of its immediate children in the tree (left pane).
Clicking the folder name is intended to display the list of that folder’s children in the right pane. (Not yet implemented)
Clicking on a file is intended to show that individual file’s details or metadata in the right pane. (Not yet implemented)
Note: This pr depends on the
parent_pathfield introduced in #1687. To ensure tests pass and the functionality works, I’ve temporarily duplicated the necessary parts of that change here. These changes will be removed once that pr is merged.