Merge branch '20137-starrers' into 'master'

Add possibilty to view starrers ("stargazers") of a repository & any user's starred repositories

Closes #20137

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

4 files changed, 111 insertions, 37 deletions

diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 1d8b388e935..4ac4efec45d 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -143,7 +143,7 @@ export default class UserTabs {
       this.loadOverviewTab();
     }
 
-    const loadableActions = ['groups', 'contributed', 'projects', 'snippets'];
+    const loadableActions = ['groups', 'contributed', 'projects', 'starred', 'snippets'];
     if (loadableActions.indexOf(action) > -1) {
       this.loadTab(action, endpoint);
     }
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index 70f89152f70..97afeecd8ac 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -18,7 +18,7 @@ export default class Star {
           const isStarred = $starSpan.hasClass('starred');
           $this
             .parent()
-            .find('.star-count')
+            .find('.count')
             .text(data.star_count);
 
           if (isStarred) {
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 68af01f9ccc..d54d264bc5d 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -9,10 +9,6 @@
   }
 }
 
-.member-sort-dropdown {
-  margin-left: $gl-padding-8;
-}
-
 .member {
   &.is-overridden {
     .btn-ldap-override {
@@ -62,36 +58,9 @@
   }
 }
 
-.member-search-form {
-  position: relative;
-
-  @include media-breakpoint-up(sm) {
-    float: right;
-  }
-
-  .dropdown {
-    width: 100%;
-    margin-top: 5px;
-
-    .dropdown-menu-toggle {
-      vertical-align: middle;
-      width: 100%;
-    }
-
-    @include media-breakpoint-up(sm) {
-      margin-top: 0;
-      width: 155px;
-    }
-  }
-
-  .form-control {
-    width: 100%;
-    padding-right: 35px;
-
-    @include media-breakpoint-up(sm) {
-      width: 250px;
-    }
-  }
+.member-access-text {
+  margin-left: auto;
+  line-height: 43px;
 }
 
 .member-search-btn {
@@ -177,7 +146,7 @@
     padding-bottom: 1px;
   }
 
-  .flex-project-members-form {
+  .flex-users-form {
     flex-wrap: nowrap;
     white-space: nowrap;
     margin-left: auto;
diff --git a/app/assets/stylesheets/pages/users.scss b/app/assets/stylesheets/pages/users.scss
new file mode 100644
index 00000000000..3b018c1e087
--- /dev/null
+++ b/app/assets/stylesheets/pages/users.scss
@@ -0,0 +1,105 @@
+.user-sort-dropdown {
+  margin-left: $gl-padding-8;
+}
+
+.user-search-form {
+  position: relative;
+
+  @include media-breakpoint-up(sm) {
+    float: right;
+  }
+
+  .dropdown {
+    width: 100%;
+    margin-top: 5px;
+
+    .dropdown-menu-toggle {
+      vertical-align: middle;
+      width: 100%;
+    }
+
+    @include media-breakpoint-up(sm) {
+      margin-top: 0;
+      width: 155px;
+    }
+  }
+
+  .form-control {
+    width: 100%;
+    padding-right: 35px;
+
+    @include media-breakpoint-up(sm) {
+      width: 250px;
+    }
+  }
+}
+
+.user-search-btn {
+  position: absolute;
+  right: 4px;
+  top: 0;
+  height: 35px;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: $gray-darkest;
+  background: transparent;
+  border: 0;
+  outline: 0;
+}
+
+.flex-users-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  @include media-breakpoint-down(sm) {
+    display: block;
+
+    .flex-project-title {
+      vertical-align: top;
+      display: inline-block;
+      max-width: 90%;
+    }
+  }
+
+  .flex-project-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .badge.badge-pill {
+    height: 17px;
+    line-height: 16px;
+    margin-right: 5px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .flex-users-form {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    margin-left: auto;
+  }
+}
+
+.content-list.members-list li {
+  display: flex;
+  justify-content: space-between;
+
+  .list-item-name {
+    float: none;
+    display: flex;
+    flex: 1;
+  }
+}
+
+.card-body .user-info {
+  float: left;
+
+  .user {
+    color: $gl-text-color;
+    font-weight: $gl-font-weight-bold;
+  }
+}