31853 Remove duplication for sharing projects with groups in project settings

app/assets/stylesheets/pages/members.scss

@@ -3,6 +3,40 @@
   border-bottom: 1px solid $border-color;
 }
 
+.project-member-tabs {
+  background: $gray-light;
+  border: 1px solid $border-color;
+
+  li {
+    width: 50%;
+
+    &.active {
+      background: $white-light;
+    }
+    &:first-child {
+      border-right: 1px solid $border-color;
+    }
+
+    a {
+      width: 100%;
+      text-align: center;
+    }
+  }
+}
+
+.users-project-form {
+  .btn-create {
+    margin-right: 10px;
+  }
+}
+
+.project-member-tab-content {
+  padding: $gl-padding;
+  border: 1px solid $border-color;
+  border-top: 0;
+  margin-bottom: $gl-padding;
+}
+
 .member {
   .list-item-name {
     @media (min-width: $screen-sm-min) {

app/views/projects/project_members/_index.html.haml

 .row.prepend-top-default
   .col-lg-3.settings-sidebar
     %h4.prepend-top-0
-      Members
+      Project members
     - if can?(current_user, :admin_project_member, @project)
       %p
-        Add a new member to
+        You can add a new member to
         %strong= @project.name
+        or share it with another group.
     - else
       %p
         Members can be added by project
@@ -13,9 +14,20 @@
         or
         %i Owners
   .col-lg-9
-    .light.prepend-top-default
+    .light
       - if can?(current_user, :admin_project_member, @project)
-        = render "projects/project_members/new_project_member"
+        %ul.nav-links.project-member-tabs{ role: 'tablist' }
+          %li.active{ role: 'presentation' }
+            %a{ href: '#add-member-pane', data: { toggle: 'tab' }, role: 'tab' } Add member
+          - if @project.allowed_to_share_with_group?
+            %li{ role: 'presentation' }
+              %a{ href: '#share-with-group-pane', data: { toggle: 'tab' }, role: 'tab' } Share with group
+
+        .tab-content.project-member-tab-content
+          .tab-pane.active{ id: 'add-member-pane', role: 'tabpanel' }
+            = render 'projects/project_members/new_project_member', tab_title: 'Add member'
+          .tab-pane{ id: 'share-with-group-pane', role: 'tabpanel' }
+            = render 'projects/project_members/new_shared_group', tab_title: 'Share with group'
 
         = render 'shared/members/requests', membership_source: @project, requesters: @requesters
         .clearfix

app/views/projects/project_members/_new_project_member.html.haml

-= form_for @project_member, as: :project_member, url: namespace_project_project_members_path(@project.namespace, @project), html: { class: 'users-project-form' } do |f|
+.row
+  .col-sm-12
+    = form_for @project_member, as: :project_member, url: namespace_project_project_members_path(@project.namespace, @project), html: { class: 'users-project-form' } do |f|
       .form-group
+        = label_tag :user_ids, "Select members to invite", class: "label-light"
         = users_select_tag(:user_ids, multiple: true, class: "input-clamp", scope: :all, email_user: true, placeholder: "Search for members to update or invite")
-    .help-block.append-bottom-10
-      Search for members by name, username, or email, or invite new ones using their email address.
       .form-group
+        = label_tag :access_level, "Choose a role permission", class: "label-light"
         = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select"
         .help-block.append-bottom-10
           = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
           about role permissions
       .form-group
         .clearable-input
+          = label_tag :expires_at, 'Access expiration date', class: 'label-light'
           = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
           %i.clear-icon.js-clear-input
-    .help-block.append-bottom-10
-      On this date, the member(s) will automatically lose access to this project.
       = f.submit "Add to project", class: "btn btn-create"
       = link_to "Import", import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-default", title: "Import members from another project"

app/views/projects/group_links/_index.html.haml → app/views/projects/project_members/_new_shared_group.html.haml

-- page_title "Groups"
-.row.prepend-top-default
-  .col-lg-3.settings-sidebar
-    %h4.prepend-top-0
-      Share project with other groups
-    %p
-      Projects can be stored in only one group at once. However you can share a project with other groups here.
-  .col-lg-9
+.row
+  .col-sm-12
     = form_tag namespace_project_group_links_path(@project.namespace, @project), class: 'js-requires-input', method: :post do
       .form-group
         = label_tag :link_group_id, "Select a group to share with", class: "label-light"
-        = groups_select_tag(:link_group_id, data: { skip_groups: @skip_groups }, required: true)
+        = groups_select_tag(:link_group_id, data: { skip_groups: @skip_groups }, class: "input-clamp", required: true)
       .form-group
         = label_tag :link_group_access, "Max access level", class: "label-light"
         .select-wrapper
           = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control"
           = icon('caret-down')
+        .help-block.append-bottom-10
+          = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
+          about role permissions
       .form-group
         = label_tag :expires_at, 'Access expiration date', class: 'label-light'
         .clearable-input
-          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date-groups', placeholder: 'Select access expiration date', id: 'expires_at_groups'
+          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date-groups', placeholder: 'Expiration date', id: 'expires_at_groups'
           %i.clear-icon.js-clear-input
-        .help-block
-          On this date, all members in the group will automatically lose access to this project.
       = submit_tag "Share", class: "btn btn-create"
\ No newline at end of file
-  .col-lg-9.col-lg-offset-3
-    %hr
-  .col-lg-9.col-lg-offset-3.append-bottom-default.enabled-groups
-    %h5.prepend-top-0
-      Groups you share with (#{@group_links.size})
-    - if @group_links.present?
-      %ul.well-list
-        - @group_links.each do |group_link|
-          - group = group_link.group
-          %li
-            .pull-left.append-right-10.hidden-xs
-              = icon("folder-open-o", class: "settings-list-icon")
-            .pull-left
-              = link_to group do
-                = group.full_name
-              %br
-              up to #{group_link.human_access}
-              - if group_link.expires?
-                ·
-                %span{ class: ('text-warning' if group_link.expires_soon?) }
-                  expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
-            .pull-right
-              = link_to namespace_project_group_link_path(@project.namespace, @project, group_link), method: :delete, class: "btn btn-transparent" do
-                %span.sr-only disable sharing
-                = icon("trash")
-    - else
-      .settings-message.text-center
-        There are no groups with access to your project, add one in the form above

app/views/projects/settings/members/show.html.haml

@@ -2,6 +2,3 @@
 = render "projects/settings/head"
 
 = render "projects/project_members/index"
-- if can?(current_user, :admin_project, @project)
-  - if @project.allowed_to_share_with_group?
-    = render "projects/group_links/index"

changelogs/unreleased/ce-31853-projects-shared-groups.yml

+---
+title: Remove duplication for sharing projects with groups in project settings
+merge_request:
+author: