Merge branch 'creator-pairing-groups-refactor' into 'master'

Creator pairing groups refactor

See merge request gitlab-org/gitlab!27089

app/assets/javascripts/groups/components/group_folder.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <ul class="content-list group-list-tree">
+  <ul class="groups-list group-list-tree">
     <group-item
       v-for="(group, index) in groups"
       :key="index"

app/assets/javascripts/groups/constants.js

@@ -8,7 +8,7 @@ export const ACTIVE_TAB_ARCHIVED = 'archived';
 
 export const GROUPS_LIST_HOLDER_CLASS = '.js-groups-list-holder';
 export const GROUPS_FILTER_FORM_CLASS = '.js-group-filter-form';
-export const CONTENT_LIST_CLASS = '.content-list';
+export const CONTENT_LIST_CLASS = '.groups-list';
 
 export const COMMON_STR = {
   FAILURE: __('An error occurred. Please try again.'),

app/assets/stylesheets/pages/groups.scss

@@ -8,6 +8,32 @@
   }
 }
 
+.groups-list {
+  @include basic-list;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+
+  .group-row-contents .controls > .btn:last-child {
+    margin: 0;
+  }
+
+  li {
+    .title {
+      font-weight: 600;
+    }
+
+    a {
+      color: $gray-900;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
 .group-root-path {
   max-width: 40vw;
   overflow: hidden;
@@ -15,11 +41,6 @@
   word-wrap: nowrap;
 }
 
-.content-list .group-name {
-  font-weight: $gl-font-weight-bold;
-  color: $pages-group-name-color;
-}
-
 .group-row {
   @include basic-list-stats;
 
@@ -322,10 +343,6 @@ table.pipeline-project-metrics tr td {
     }
   }
 
-  .content-list li:last-child {
-    padding-bottom: 0;
-  }
-
   .group-list-tree {
     margin-bottom: 0;
     margin-left: 30px;

app/views/groups/_subgroups_and_projects.html.haml

@@ -2,7 +2,7 @@
   .empty-state.hidden
     = render "shared/groups/empty_state"
 
-  %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
+  %section{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
     .js-groups-list-holder
       .loading-container.text-center.prepend-top-20
         .spinner.spinner-md

spec/features/dashboard/groups_list_spec.rb

@@ -77,7 +77,7 @@ describe 'Dashboard Groups page', :js do
       expect(page).to have_content(group.name)
       expect(page).to have_content(nested_group.parent.name)
       expect(page).not_to have_content(another_group.name)
-      expect(page.all('.js-groups-list-holder .content-list li').length).to eq 2
+      expect(page.all('.js-groups-list-holder .groups-list li').length).to eq 2
     end
   end
 

spec/features/explore/groups_list_spec.rb

@@ -47,26 +47,26 @@ describe 'Explore Groups page', :js do
     expect(page).to have_content(group.full_name)
     expect(page).to have_content(public_group.full_name)
     expect(page).not_to have_content(private_group.full_name)
-    expect(page.all('.js-groups-list-holder .content-list li').length).to eq 2
+    expect(page.all('.js-groups-list-holder .groups-list li').length).to eq 2
   end
 
   it 'shows non-archived projects count' do
     # Initially project is not archived
-    expect(find('.js-groups-list-holder .content-list li:first-child .stats .number-projects')).to have_text("1")
+    expect(find('.js-groups-list-holder .groups-list li:first-child .stats .number-projects')).to have_text("1")
 
     # Archive project
     ::Projects::UpdateService.new(empty_project, user, archived: true).execute
     visit explore_groups_path
 
     # Check project count
-    expect(find('.js-groups-list-holder .content-list li:first-child .stats .number-projects')).to have_text("0")
+    expect(find('.js-groups-list-holder .groups-list li:first-child .stats .number-projects')).to have_text("0")
 
     # Unarchive project
     ::Projects::UpdateService.new(empty_project, user, archived: false).execute
     visit explore_groups_path
 
     # Check project count
-    expect(find('.js-groups-list-holder .content-list li:first-child .stats .number-projects')).to have_text("1")
+    expect(find('.js-groups-list-holder .groups-list li:first-child .stats .number-projects')).to have_text("1")
   end
 
   describe 'landing component' do