Repo View: Improve view with folders (#5215)

* Repo View: Improve view with folders 

I made some improvements to the folder view:
- Boxed display of path
- Separate links for folders within path
- Remove leading/trailing `/` in folder display
- Better alignment of `..` parent folder 
- Fix incorrect HTML since `%26lt;tr%26gt;` was before `%26lt;thead%26gt;`

Ref https://github.com/abapGit/abapGit/pull/5159#issuecomment-976124592

* Update CSS

Co-authored-by: Lars Hvam <larshp@hotmail.com>
Co-authored-by: Christian Günter <christianguenter@googlemail.com>

src/ui/zabapgit_css_common.w3mi.data.css

@@ -225,6 +225,7 @@ div.repo {
 span.branch,
 span.user-box,
 span.package-box,
+span.path-box,
 span.transport-box {
   padding: 2px 4px;
   border: 1px solid;

src/ui/zabapgit_css_theme_dark.w3mi.data.css

@@ -57,6 +57,7 @@ span.package-box {
   background-color: #705a6d;
   border-color: #987095;
 }
+span.path-box,
 span.transport-box {
   background-color: #456d5d;
   border-color: #60a087;

src/ui/zabapgit_css_theme_default.w3mi.data.css

@@ -71,6 +71,7 @@ span.package-box {
   border-color: #d3ccd2;
   background-color: #ebe3ea;
 }
+span.path-box,
 span.transport-box {
   border-color: #a7e3cf;
   background-color: #dbf3eb;

src/ui/zcl_abapgit_gui_chunk_lib.clas.abap

@@ -164,6 +164,14 @@ CLASS zcl_abapgit_gui_chunk_lib DEFINITION
         iv_sci_result TYPE zif_abapgit_definitions=>ty_sci_result.
 
 
+    CLASS-METHODS render_path
+      IMPORTING
+        !iv_path        TYPE string
+        !iv_interactive TYPE abap_bool DEFAULT abap_true
+      RETURNING
+        VALUE(ri_html)  TYPE REF TO zif_abapgit_html
+      RAISING
+        zcx_abapgit_exception .
   PROTECTED SECTION.
 
     CLASS-METHODS render_repo_top_commit_hash
@@ -739,6 +747,50 @@ CLASS zcl_abapgit_gui_chunk_lib IMPLEMENTATION.
   ENDMETHOD.
 
 
+  METHOD render_path.
+
+    DATA:
+      lv_path    TYPE string,
+      lv_jump    TYPE string,
+      lv_folder  TYPE string,
+      lt_folders TYPE STANDARD TABLE OF string WITH DEFAULT KEY.
+
+    CREATE OBJECT ri_html TYPE zcl_abapgit_html.
+
+    IF iv_path IS INITIAL.
+      RETURN.
+    ENDIF.
+
+    lv_jump = |{ zcl_abapgit_gui_page_repo_view=>c_actions-change_dir }?PATH=|.
+
+    ri_html->add( |<span class="path-box">| ).
+
+    IF iv_interactive = abap_true.
+      SPLIT iv_path AT '/' INTO TABLE lt_folders.
+
+      LOOP AT lt_folders INTO lv_folder.
+        IF lv_folder IS INITIAL.
+          " root
+          lv_path = '/'.
+        ELSEIF sy-tabix < lines( lt_folders ).
+          lv_path = lv_path && lv_folder && '/'.
+          ri_html->add_a( iv_act = lv_jump && lv_path
+                          iv_txt = lv_folder ).
+        ELSE.
+          " no link for current folder
+          ri_html->add( | <strong>{ lv_folder }</strong> | ).
+        ENDIF.
+        ri_html->add( '/' ).
+      ENDLOOP.
+    ELSE.
+      ri_html->add( iv_path ).
+    ENDIF.
+
+    ri_html->add( '</span>' ).
+
+  ENDMETHOD.
+
+
   METHOD render_repo_palette.
 
     DATA lt_repo_obj_list TYPE zif_abapgit_repo_srv=>ty_repo_list.

src/ui/zcl_abapgit_gui_page_repo_view.clas.abap

@@ -350,6 +350,18 @@ CLASS zcl_abapgit_gui_page_repo_view IMPLEMENTATION.
     REPLACE FIRST OCCURRENCE OF mv_cur_dir IN lv_path WITH ''.
     lv_encode = zcl_abapgit_html_action_utils=>dir_encode( lv_path ).
 
+    " remove leading and trailing / for display
+    IF lv_path <> '/'.
+      IF lv_path(1) = '/'.
+        lv_path = lv_path+1.
+      ENDIF.
+      IF substring( val = reverse( lv_path )
+                    len = 1 ) = '/'.
+        lv_path = substring( val = lv_path
+                             len = strlen( lv_path ) - 1 ).
+      ENDIF.
+    ENDIF.
+
     rv_html = li_html->a(
       iv_txt = lv_path
       iv_act = |{ c_actions-change_dir }?{ lv_encode }| ).
@@ -812,12 +824,12 @@ CLASS zcl_abapgit_gui_page_repo_view IMPLEMENTATION.
           " Repo content table
           ri_html->add( '<table class="repo_tab">' ).
 
+          ri_html->add( render_order_by( ) ).
+
           IF zcl_abapgit_path=>is_root( mv_cur_dir ) = abap_false.
             ri_html->add( render_parent_dir( ) ).
           ENDIF.
 
-          ri_html->add( render_order_by( ) ).
-
           LOOP AT lt_repo_items ASSIGNING <ls_item>.
             IF mv_max_lines > 0 AND sy-tabix > mv_max_lines.
               lv_max = abap_true.
@@ -891,7 +903,9 @@ CLASS zcl_abapgit_gui_page_repo_view IMPLEMENTATION.
     ri_html->add( '<table class="w100"><tr>' ).
 
     IF mv_show_folders = abap_true.
-      ri_html->add( |<td class="current_dir">{ mv_cur_dir }</td>| ).
+      ri_html->add( '<td class="current_dir">' ).
+      ri_html->add( zcl_abapgit_gui_chunk_lib=>render_path( mv_cur_dir ) ).
+      ri_html->add( '</td>' ).
     ENDIF.
 
     ri_html->add( '<td class="right">' ).
@@ -1147,7 +1161,7 @@ CLASS zcl_abapgit_gui_page_repo_view IMPLEMENTATION.
 
     ri_html->add( '<tr class="folder">' ).
     ri_html->add( |<td class="icon">{ ri_html->icon( 'folder' ) }</td>| ).
-    ri_html->add( |<td class="object" colspan="4">{ build_dir_jump_link( '..' ) }</td>| ).
+    ri_html->add( |<td class="dir" colspan="4">{ build_dir_jump_link( '..' ) }</td>| ).
     IF mo_repo->has_remote_source( ) = abap_true.
       ri_html->add( |<td colspan="1"></td>| ). " Dummy for online
     ENDIF.