Add latest changes from gitlab-org/gitlab@13-4-stable-ee

11 files changed, 76 insertions, 113 deletions

diff --git a/app/views/groups/_group_admin_settings.html.haml b/app/views/groups/_group_admin_settings.html.haml
index 75a0706ee84..393ab8013e7 100644
--- a/app/views/groups/_group_admin_settings.html.haml
+++ b/app/views/groups/_group_admin_settings.html.haml
@@ -7,7 +7,7 @@
       = f.label :lfs_enabled, class: 'form-check-label' do
         %strong
           Allow projects within this group to use Git LFS
-          = link_to icon('question-circle'), help_page_path('topics/git/lfs/index')
+          = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
         %br/
         %span This setting can be overridden in each project.
 .form-group.row
@@ -31,7 +31,7 @@
       = f.label :require_two_factor_authentication, class: 'form-check-label' do
         %strong
           Require all users in this group to set up Two-factor authentication
-          = link_to icon('question-circle'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
+          = link_to sprite_icon('question-o'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
 .form-group.row
   .offset-sm-2.col-sm-10
     .form-check
diff --git a/app/views/groups/_import_group_pane.html.haml b/app/views/groups/_import_group_pane.html.haml
index adfac7d59a5..9ad8ebbb37d 100644
--- a/app/views/groups/_import_group_pane.html.haml
+++ b/app/views/groups/_import_group_pane.html.haml
@@ -41,7 +41,7 @@
       = s_('GroupsNew|To copy a GitLab group between installations, navigate to the group settings page for the original installation, generate an export file, and upload it here.')
   .row
     .form-group.col-sm-12
-      = f.label :file, s_('GroupsNew|GitLab group export'), class: 'label-bold'
+      = f.label :file, s_('GroupsNew|Import a GitLab group export file'), class: 'label-bold'
       %div
         = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
 
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index c8e58a50b18..ed7b201323a 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -3,6 +3,8 @@
 - show_invited_members = can_manage_members && @invited_members.exists?
 - show_access_requests = can_manage_members && @requesters.exists?
 - invited_active = params[:search_invited].present? || params[:invited_members_page].present?
+- vue_members_list_enabled = Feature.enabled?(:vue_group_members_list, @group)
+- data_attributes = { group_id: @group.id }
 
 - form_item_label_css_class = 'label-bold gl-mr-2 gl-mb-0 gl-py-2 align-self-md-center'
 
@@ -66,18 +68,24 @@
             = render 'groups/group_members/tab_pane/form_item' do
               = label_tag :sort_by, _('Sort by'), class: form_item_label_css_class
               = render 'shared/members/sort_dropdown'
-        %ul.content-list.members-list{ data: { qa_selector: 'members_list' } }
-          = render partial: 'shared/members/member', collection: @members, as: :member
-      = paginate @members, theme: 'gitlab', params: { invited_members_page: nil, search_invited: nil }
+        - if vue_members_list_enabled
+          .js-group-members-list{ data: { members: members_data_json(@group, @members), **data_attributes } }
+        - else
+          %ul.content-list.members-list{ data: { qa_selector: 'members_list' } }
+            = render partial: 'shared/members/member', collection: @members, as: :member
+        = paginate @members, theme: 'gitlab', params: { invited_members_page: nil, search_invited: nil }
     - if @group.shared_with_group_links.any?
       #tab-groups.tab-pane
         .card.card-without-border
           = render 'groups/group_members/tab_pane/header' do
             = render 'groups/group_members/tab_pane/title' do
               = html_escape(_('Groups with access to %{strong_start}%{group_name}%{strong_end}')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-          %ul.content-list.members-list{ data: { qa_selector: 'groups_list' } }
-            - @group.shared_with_group_links.each do |group_link|
-              = render 'shared/members/group', group_link: group_link, can_admin_member: can_manage_members, group_link_path: group_group_link_path(@group, group_link)
+          - if vue_members_list_enabled
+            .js-group-linked-list{ data: { members: linked_groups_data_json(@group.shared_with_group_links), **data_attributes } }
+          - else
+            %ul.content-list.members-list{ data: { qa_selector: 'groups_list' } }
+              - @group.shared_with_group_links.each do |group_link|
+                = render 'shared/members/group', group_link: group_link, can_admin_member: can_manage_members, group_link_path: group_group_link_path(@group, group_link)
     - if show_invited_members
       #tab-invited-members.tab-pane{ class: ('active' if invited_active) }
         .card.card-without-border
@@ -86,14 +94,20 @@
               = html_escape(_('Members invited to %{strong_start}%{group_name}%{strong_end}')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
             = form_tag group_group_members_path(@group), method: :get, class: 'user-search-form', data: { testid: 'user-search-form' } do
               = render 'shared/members/search_field', name: 'search_invited'
-          %ul.content-list.members-list
-            = render partial: 'shared/members/member', collection: @invited_members, as: :member
-        = paginate @invited_members, param_name: 'invited_members_page', theme: 'gitlab', params: { page: nil }
+          - if vue_members_list_enabled
+            .js-group-invited-members-list{ data: { members: members_data_json(@group, @invited_members), **data_attributes } }
+          - else
+            %ul.content-list.members-list
+              = render partial: 'shared/members/member', collection: @invited_members, as: :member
+          = paginate @invited_members, param_name: 'invited_members_page', theme: 'gitlab', params: { page: nil }
     - if show_access_requests
       #tab-access-requests.tab-pane
         .card.card-without-border
           = render 'groups/group_members/tab_pane/header' do
             = render 'groups/group_members/tab_pane/title' do
               = html_escape(_('Users requesting access to %{strong_start}%{group_name}%{strong_end}')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-          %ul.content-list.members-list
-            = render partial: 'shared/members/member', collection: @requesters, as: :member
+          - if vue_members_list_enabled
+            .js-group-access-requests-list{ data: { members: members_data_json(@group, @requesters), **data_attributes } }
+          - else
+            %ul.content-list.members-list
+              = render partial: 'shared/members/member', collection: @requesters, as: :member
diff --git a/app/views/groups/packages/_legacy_package_list.haml b/app/views/groups/packages/_legacy_package_list.haml
deleted file mode 100644
index 481a0dbb6e8..00000000000
--- a/app/views/groups/packages/_legacy_package_list.haml
+++ /dev/null
@@ -1,59 +0,0 @@
-- sort_value = @sort
-- sort_title = packages_sort_option_title(sort_value)
-
-- if @packages.any?
-  .d-flex.justify-content-end
-    .dropdown.inline.gl-mt-3.gl-mb-3.package-sort-dropdown
-      .btn-group{ role: 'group' }
-        .btn-group{ role: 'group' }
-          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static', 'qa-selector': 'sort-dropdown-button' }, class: 'btn btn-default' }
-            = sort_title
-            = icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-            %li
-              = sortable_item(sort_title_created_date,      package_sort_path(sort: sort_value_recently_created),  sort_title)
-              = sortable_item(sort_title_name,              package_sort_path(sort: sort_value_name_desc),         sort_title)
-              = sortable_item(sort_title_project_name,      package_sort_path(sort: sort_value_project_name_desc), sort_title)
-              = sortable_item(sort_title_version,           package_sort_path(sort: sort_value_version_desc),      sort_title)
-              = sortable_item(sort_title_type,              package_sort_path(sort: sort_value_type_desc),         sort_title)
-        = packages_sort_direction_button(sort_value)
-
-  .table-holder
-    .gl-responsive-table-row.table-row-header.bg-secondary-50.px-2.border-top{ role: 'row' }
-      .table-section.section-30{ role: 'rowheader' }
-        = _('Name')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Project')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Version')
-      .table-section.section-10{ role: 'rowheader' }
-        = _('Type')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Created')
-    - @packages.each do |package|
-      .gl-responsive-table-row{ data: { 'qa-selector': 'package-row' } }
-        .table-section.section-30
-          .table-mobile-header{ role: "rowheader" }= _("Name")
-          .table-mobile-content.flex-truncate-parent
-            = link_to package.name, project_package_path(package.project, package), class: 'flex-truncate-child'
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Project")
-          .table-mobile-content
-            = link_to_project(package.project)
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Version")
-          .table-mobile-content
-            = package.version
-        .table-section.section-10
-          .table-mobile-header{ role: "rowheader" }= _("Type")
-          .table-mobile-content
-            = package.package_type
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Created")
-          .table-mobile-content
-            = time_ago_with_tooltip(package.created_at)
-    = paginate @packages, theme: "gitlab"
-- else
-  .row.empty-state
-    .col-12
-      = render 'shared/packages/no_packages'
diff --git a/app/views/groups/packages/index.html.haml b/app/views/groups/packages/index.html.haml
index b07c08f50ca..7910217c939 100644
--- a/app/views/groups/packages/index.html.haml
+++ b/app/views/groups/packages/index.html.haml
@@ -1,4 +1,5 @@
-- page_title _("Packages")
+- page_title _("Package Registry")
+- @content_class = "limit-container-width" unless fluid_layout
 
 .row
   .col-12
diff --git a/app/views/groups/runners/_index.html.haml b/app/views/groups/runners/_index.html.haml
index 51375f50659..e885fcc08eb 100644
--- a/app/views/groups/runners/_index.html.haml
+++ b/app/views/groups/runners/_index.html.haml
@@ -73,7 +73,7 @@
                     {{name}}
 
           = button_tag class: 'clear-search hidden' do
-            = icon('times')
+            = sprite_icon('close', size: 16, css_class: 'clear-search-icon')
         .filter-dropdown-container
           = render 'admin/runners/sort_dropdown'
 
diff --git a/app/views/groups/runners/_runner.html.haml b/app/views/groups/runners/_runner.html.haml
index 07cbcd8401e..3fc50cc86d2 100644
--- a/app/views/groups/runners/_runner.html.haml
+++ b/app/views/groups/runners/_runner.html.haml
@@ -79,8 +79,8 @@
       - if runner.belongs_to_more_than_one_project?
         .btn-group
           .btn.btn-danger.has-tooltip{ 'aria-label' => 'Remove', 'data-container' => 'body', 'data-original-title' => _('Multi-project Runners cannot be removed'), 'data-placement' => 'top', disabled: 'disabled' }
-            = icon('remove')
+            = sprite_icon('close')
       - else
         .btn-group
           = link_to group_runner_path(@group, runner), method: :delete, class: 'btn btn-danger has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-            = icon('remove')
+            = sprite_icon('close')
diff --git a/app/views/groups/settings/ci_cd/_form.html.haml b/app/views/groups/settings/ci_cd/_form.html.haml
index 139c710fac0..8fad73f1249 100644
--- a/app/views/groups/settings/ci_cd/_form.html.haml
+++ b/app/views/groups/settings/ci_cd/_form.html.haml
@@ -8,6 +8,6 @@
           = f.number_field :max_artifacts_size, class: 'form-control'
           %p.form-text.text-muted
             = _("Set the maximum file size for each job's artifacts")
-            = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size-core-only'), target: '_blank'
+            = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank'
 
         = f.submit _('Save changes'), class: "btn btn-success"
diff --git a/app/views/groups/settings/ci_cd/show.html.haml b/app/views/groups/settings/ci_cd/show.html.haml
index 366d7dd5afe..5b5f357dbec 100644
--- a/app/views/groups/settings/ci_cd/show.html.haml
+++ b/app/views/groups/settings/ci_cd/show.html.haml
@@ -11,7 +11,7 @@
     .settings-header
       %h4
         = _("General pipelines")
-      %button.btn.js-settings-toggle{ type: 'button' }
+      %button.btn.gl-button.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
         = _("Customize your pipeline configuration.")
@@ -28,7 +28,7 @@
   .settings-header
     %h4
       = _('Runners')
-    %button.btn.btn-default.js-settings-toggle{ type: "button" }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: "button" }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("Runners are processes that pick up and execute jobs for GitLab. Here you can register and see your Runners for this project.")
@@ -40,7 +40,7 @@
   .settings-header
     %h4
       = _('Auto DevOps')
-    %button.btn.btn-default.js-settings-toggle{ type: "button" }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: "button" }
       = expanded ? _('Collapse') : _('Expand')
     %p
       - auto_devops_url = help_page_path('topics/autodevops/index')
diff --git a/app/views/groups/settings/integrations/index.html.haml b/app/views/groups/settings/integrations/index.html.haml
index 96bd6d69a96..f62eb17d236 100644
--- a/app/views/groups/settings/integrations/index.html.haml
+++ b/app/views/groups/settings/integrations/index.html.haml
@@ -5,5 +5,5 @@
 %h4= s_('GroupSettings|Apply integration settings to all Projects')
 %p
   = s_('GroupSettings|Integrations configured here will automatically apply to all projects in this group.')
-  = link_to _('Learn more'), '#'
+  = link_to _('Learn more'), integrations_help_page_path, target: '_blank', rel: 'noopener noreferrer'
 = render 'shared/integrations/index', integrations: @integrations
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 6ad864121d7..ec4ab603d22 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -2,48 +2,55 @@
 - page_title _("Groups")
 - @content_class = "limit-container-width" unless fluid_layout
 
+- if show_invite_banner?(@group)
+  = content_for :group_invite_members_banner do
+    .container-fluid.container-limited{ class: "gl-pb-2! gl-pt-6! #{@content_class}" }
+      .js-group-invite-members-banner{ data: { svg_path: image_path('illustrations/merge_requests.svg'),
+        is_dismissed_key: "invite_#{@group.id}_#{current_user.id}",
+        track_label: 'invite_members_banner',
+        invite_members_path: group_group_members_path(@group) } }
+
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
 = render partial: 'flash_messages'
 
-%div{ class: [("limit-container-width" unless fluid_layout)] }
-  = render_if_exists 'trials/banner', namespace: @group
+= render_if_exists 'trials/banner', namespace: @group
 
-  = render 'groups/home_panel'
+= render 'groups/home_panel'
 
-  = render_if_exists 'groups/self_or_ancestor_marked_for_deletion_notice', group: @group
+= render_if_exists 'groups/self_or_ancestor_marked_for_deletion_notice', group: @group
 
-  = render_if_exists 'groups/group_activity_analytics', group: @group
+= render_if_exists 'groups/group_activity_analytics', group: @group
 
-  .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
-    .top-area.group-nav-container.justify-content-between
-      .scrolling-tabs-container.inner-page-scroll-tabs
-        .fade-left= sprite_icon('chevron-lg-left', size: 12)
-        .fade-right= sprite_icon('chevron-lg-right', size: 12)
-        %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
-          %li.js-subgroups_and_projects-tab
-            = link_to group_path, data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab'} do
-              = _("Subgroups and projects")
-          %li.js-shared-tab
-            = link_to group_shared_path, data: { target: 'div#shared', action: 'shared', toggle: 'tab'} do
-              = _("Shared projects")
-          %li.js-archived-tab
-            = link_to group_archived_path, data: { target: 'div#archived', action: 'archived', toggle: 'tab'} do
-              = _("Archived projects")
+.groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
+  .top-area.group-nav-container.justify-content-between
+    .scrolling-tabs-container.inner-page-scroll-tabs
+      .fade-left= sprite_icon('chevron-lg-left', size: 12)
+      .fade-right= sprite_icon('chevron-lg-right', size: 12)
+      %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
+        %li.js-subgroups_and_projects-tab
+          = link_to group_path, data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab'} do
+            = _("Subgroups and projects")
+        %li.js-shared-tab
+          = link_to group_shared_path, data: { target: 'div#shared', action: 'shared', toggle: 'tab'} do
+            = _("Shared projects")
+        %li.js-archived-tab
+          = link_to group_archived_path, data: { target: 'div#archived', action: 'archived', toggle: 'tab'} do
+            = _("Archived projects")
 
-      .nav-controls.d-block.d-md-flex
-        .group-search
-          = render "shared/groups/search_form"
+    .nav-controls.d-block.d-md-flex
+      .group-search
+        = render "shared/groups/search_form"
 
-        = render "shared/groups/dropdown", options_hash: subgroups_sort_options_hash
+      = render "shared/groups/dropdown", options_hash: subgroups_sort_options_hash
 
-    .tab-content
-      #subgroups_and_projects.tab-pane
-        = render "subgroups_and_projects", group: @group
+  .tab-content
+    #subgroups_and_projects.tab-pane
+      = render "subgroups_and_projects", group: @group
 
-      #shared.tab-pane
-        = render "shared_projects", group: @group
+    #shared.tab-pane
+      = render "shared_projects", group: @group
 
-      #archived.tab-pane
-        = render "archived_projects", group: @group
+    #archived.tab-pane
+      = render "archived_projects", group: @group