Merge branch 'bvl-group-trees' into 'master'

Show collapsible tree on the project show page

Closes #30343

See merge request gitlab-org/gitlab-ce!14055

2 files changed, 194 insertions, 10 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index badc7b0eba3..d43f998cb82 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -281,6 +281,57 @@ ul.indent-list {
 
 
 // Specific styles for tree list
+@keyframes spin-avatar {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.groups-list-tree-container {
+  .has-no-search-results {
+    text-align: center;
+    padding: $gl-padding;
+    font-style: italic;
+    color: $well-light-text-color;
+  }
+
+  > .group-list-tree > .group-row.has-children:first-child {
+    border-top: none;
+  }
+}
+
+.group-list-tree .avatar-container.content-loading {
+  position: relative;
+
+  > a,
+  > a .avatar {
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  > a {
+    padding: 2px;
+  }
+
+  > a .avatar {
+    border: 2px solid $white-normal;
+
+    &.identicon {
+      line-height: 30px;
+    }
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+    border: 2px outset $kdb-border;
+    border-radius: 50%;
+    animation: spin-avatar 3s infinite linear;
+  }
+}
+
 .group-list-tree {
   .folder-toggle-wrap {
     float: left;
@@ -293,7 +344,7 @@ ul.indent-list {
   }
 
   .folder-caret,
-  .folder-icon {
+  .item-type-icon {
     display: inline-block;
   }
 
@@ -301,11 +352,11 @@ ul.indent-list {
     width: 15px;
   }
 
-  .folder-icon {
+  .item-type-icon {
     width: 20px;
   }
 
-  > .group-row:not(.has-subgroups) {
+  > .group-row:not(.has-children) {
     .folder-caret .fa {
       opacity: 0;
     }
@@ -351,12 +402,23 @@ ul.indent-list {
         top: 30px;
         bottom: 0;
       }
+
+      &.being-removed {
+        opacity: 0.5;
+      }
     }
   }
 
   .group-row {
     padding: 0;
-    border: none;
+
+    &.has-children {
+      border-top: none;
+    }
+
+    &:first-child {
+      border-top: 1px solid $white-normal;
+    }
 
     &:last-of-type {
       .group-row-contents:not(:hover) {
@@ -379,6 +441,25 @@ ul.indent-list {
     .avatar-container > a {
       width: 100%;
     }
+
+    &.has-more-items {
+      display: block;
+      padding: 20px 10px;
+    }
+  }
+}
+
+ul.group-list-tree {
+  li.group-row {
+    &.has-description {
+      .title {
+        line-height: inherit;
+      }
+    }
+
+    .title {
+      line-height: $list-text-height;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 6f6c6839975..9b7dda9b648 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -26,14 +26,117 @@
   }
 }
 
-.groups-header {
-  @media (min-width: $screen-sm-min) {
-    .nav-links {
-      width: 35%;
+.group-nav-container .nav-controls {
+  display: flex;
+  align-items: flex-start;
+  padding: $gl-padding-top 0;
+  border-bottom: 1px solid $border-color;
+
+  .group-filter-form {
+    flex: 1;
+  }
+
+  .dropdown-menu-align-right {
+    margin-top: 0;
+  }
+
+  .new-project-subgroup {
+    .dropdown-primary {
+      min-width: 115px;
+    }
+
+    .dropdown-toggle {
+      .dropdown-btn-icon {
+        pointer-events: none;
+        color: inherit;
+        margin-left: 0;
+      }
     }
 
-    .nav-controls {
-      width: 65%;
+    .dropdown-menu {
+      min-width: 280px;
+      margin-top: 2px;
+    }
+
+    li:not(.divider) {
+      padding: 0;
+
+      &.droplab-item-selected {
+        .icon-container {
+          .list-item-checkmark {
+            visibility: visible;
+          }
+        }
+      }
+
+      .menu-item {
+        padding: 8px 4px;
+
+        &:hover {
+          background-color: $gray-darker;
+          color: $theme-gray-900;
+        }
+      }
+
+      .icon-container {
+        float: left;
+        padding-left: 6px;
+
+        .list-item-checkmark {
+          visibility: hidden;
+        }
+      }
+
+      .description {
+        font-size: 14px;
+
+        strong {
+          display: block;
+          font-weight: $gl-font-weight-bold;
+        }
+      }
+    }
+  }
+
+  @media (max-width: $screen-sm-max) {
+    &,
+    .dropdown,
+    .dropdown .dropdown-toggle,
+    .btn-new {
+      display: block;
+    }
+
+    .group-filter-form,
+    .dropdown {
+      margin-bottom: 10px;
+      margin-right: 0;
+    }
+
+    .group-filter-form,
+    .dropdown .dropdown-toggle,
+    .btn-new {
+      width: 100%;
+    }
+
+    .dropdown .dropdown-toggle .fa-chevron-down {
+      position: absolute;
+      top: 11px;
+      right: 8px;
+    }
+
+    .new-project-subgroup {
+      display: flex;
+      align-items: flex-start;
+
+      .dropdown-primary {
+        flex: 1;
+      }
+
+      .dropdown-menu {
+        width: 100%;
+        max-width: inherit;
+        min-width: inherit;
+      }
     }
   }
 }