15 files changed, 81 insertions, 44 deletions
diff --git a/app/views/groups/_group_admin_settings.html.haml b/app/views/groups/_group_admin_settings.html.haml
index 0c3eff85f16..ea191449fe3 100644
--- a/app/views/groups/_group_admin_settings.html.haml
+++ b/app/views/groups/_group_admin_settings.html.haml
@@ -30,8 +30,8 @@
       = f.check_box :require_two_factor_authentication, class: 'form-check-input'
       = f.label :require_two_factor_authentication, class: 'form-check-label' do
         %strong
-          = _("Require all users in this group to setup Two-factor authentication")
-          = link_to sprite_icon('question-o'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
+          = _("Require all users in this group to set up two-factor authentication")
+          = link_to sprite_icon('question-o'), help_page_path('security/two_factor_authentication', anchor: 'enforce-2fa-for-all-users-in-a-group')
 .form-group.row
   .offset-sm-2.col-sm-10
     .form-check
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index b7c2b4d86b2..0352f366f5d 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -13,18 +13,18 @@
             = @group.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
               = visibility_level_icon(@group.visibility_level, options: {class: 'icon'})
-        .home-panel-metadata.d-flex.align-items-center.text-secondary
+        .home-panel-metadata.text-secondary
           %span
             = _("Group ID: %{group_id}") % { group_id: @group.id }
           - if current_user
-            %span.access-request-links.gl-ml-3
+            %span.gl-ml-3
               = render 'shared/members/access_request_links', source: @group
 
     .home-panel-buttons.col-md-12.col-lg-6
       - if current_user
         .gl-display-flex.gl-flex-wrap.gl-lg-justify-content-end.gl-mx-n2{ data: { testid: 'group-buttons' } }
           - if current_user.admin?
-            = link_to [:admin, @group], class: 'btn btn-default gl-button btn-icon gl-mt-3 gl-mr-2', title: s_('View group in admin area'),
+            = link_to [:admin, @group], class: 'btn btn-default gl-button btn-icon gl-mt-3 gl-mr-2', title: _('View group in admin area'),
               data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
               = sprite_icon('admin')
           - if @notification_setting
diff --git a/app/views/groups/_new_group_fields.html.haml b/app/views/groups/_new_group_fields.html.haml
index 49c8c2700ce..8ee7c91a938 100644
--- a/app/views/groups/_new_group_fields.html.haml
+++ b/app/views/groups/_new_group_fields.html.haml
@@ -13,7 +13,10 @@
 - if Gitlab.config.mattermost.enabled
   .row
     = render 'create_chat_team', f: f
-.row
+
+= render 'personalize', f: f
+
+.row.js-invite-members-section
   .col-sm-4
     = render_if_exists 'shared/groups/invite_members'
 
diff --git a/app/views/groups/_personalize.html.haml b/app/views/groups/_personalize.html.haml
new file mode 100644
index 00000000000..5ecb0017cd8
--- /dev/null
+++ b/app/views/groups/_personalize.html.haml
@@ -0,0 +1,27 @@
+.row
+  .form-group.col-sm-12.gl-mb-0
+    %label.label-bold
+      = _('Now, personalize your GitLab experience')
+    %p
+      = _("We'll use this to help surface the right features and information to you.")
+
+.row
+  .form-group.col-sm-4
+    = label :user, :role, _('Role')
+    = select :user, :role, ::User.roles.keys.map { |role| [role.titleize, role] }, { selected: @current_user.role }, class: 'form-control'
+
+.row
+  .form-group.col-sm-4
+    = f.label :setup_for_company, _('Who will be using this group?')
+    .gl-display-flex.gl-flex-direction-column.gl-lg-flex-direction-row
+      .gl-flex-grow-1.gl-display-flex.gl-align-items-center
+        = f.radio_button :setup_for_company, true, checked: true
+        = f.label :setup_for_company, _('My company or team'), class: 'gl-font-weight-normal gl-mb-0 gl-ml-2', value: 'true'
+      .gl-flex-grow-1.gl-display-flex.gl-align-items-center
+        = f.radio_button :setup_for_company, false
+        = f.label :setup_for_company, _('Just me'), class: 'gl-font-weight-normal gl-mb-0 gl-ml-2', value: 'false'
+
+.row
+  .form-group.col-sm-4
+    = f.label :jobs_to_be_done, _("What will you use this group for?")
+    = f.select :jobs_to_be_done, ::NamespaceSetting.jobs_to_be_dones.keys.map { |job_to_be_done| [localized_jobs_to_be_done_choices[job_to_be_done], job_to_be_done] }, { include_blank: true }, class: 'form-control'
diff --git a/app/views/groups/dependency_proxies/_url.html.haml b/app/views/groups/dependency_proxies/_url.html.haml
index a8034c50ed8..9a76da63a72 100644
--- a/app/views/groups/dependency_proxies/_url.html.haml
+++ b/app/views/groups/dependency_proxies/_url.html.haml
@@ -1,4 +1,4 @@
-- proxy_url = group_dependency_proxy_image_prefix(@group)
+- proxy_url = @group.dependency_proxy_image_prefix
 
 %h5.prepend-top-20= _('Dependency proxy image prefix')
 
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index fdd6962eb21..1f746484b7d 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -5,29 +5,34 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@group.name} issues")
 
-.top-area
-  = render 'shared/issuable/nav', type: :issues
-  .nav-controls
-    = render 'shared/issuable/feed_buttons'
+- if Feature.enabled?(:vue_issues_list, @group, default_enabled: :yaml)
+  .js-issues-list{ data: group_issues_list_data(@group, current_user, @issues) }
+  - if @can_bulk_update
+    = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
+- else
+  .top-area
+    = render 'shared/issuable/nav', type: :issues
+    .nav-controls
+      = render 'shared/issuable/feed_buttons'
 
-    - if @can_bulk_update
-      = render_if_exists 'shared/issuable/bulk_update_button', type: :issues
+      - if @can_bulk_update
+        = render_if_exists 'shared/issuable/bulk_update_button', type: :issues
 
-    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
+      = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
 
-= render 'shared/issuable/search_bar', type: :issues
+  = render 'shared/issuable/search_bar', type: :issues
 
-- if @can_bulk_update
-  = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
+  - if @can_bulk_update
+    = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
 
-- if Feature.enabled?(:vue_issuables_list, @group) && @issues.to_a.any?
-  - if use_startup_call?
-    - add_page_startup_api_call(api_v4_groups_issues_path(id: @group.id, params: startup_call_params))
-  .js-issuables-list{ data: { endpoint: expose_url(api_v4_groups_issues_path(id: @group.id)),
-    'can-bulk-edit': @can_bulk_update.to_json,
-    'empty-state-meta': { svg_path: image_path('illustrations/issues.svg') },
-    'sort-key': @sort,
-    type: 'issues',
-    'scoped-labels-available': scoped_labels_available?(@group).to_json } }
-- else
-  = render 'shared/issues', project_select_button: true
+  - if Feature.enabled?(:vue_issuables_list, @group) && @issues.to_a.any?
+    - if use_startup_call?
+      - add_page_startup_api_call(api_v4_groups_issues_path(id: @group.id, params: startup_call_params))
+    .js-issuables-list{ data: { endpoint: expose_url(api_v4_groups_issues_path(id: @group.id)),
+      'can-bulk-edit': @can_bulk_update.to_json,
+      'empty-state-meta': { svg_path: image_path('illustrations/issues.svg') },
+      'sort-key': @sort,
+      type: 'issues',
+      'scoped-labels-available': scoped_labels_available?(@group).to_json } }
+  - else
+    = render 'shared/issues', project_select_button: true
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index 11927142ea6..0f11ca5fb8f 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -15,7 +15,7 @@
 
     #import-group-pane.tab-pane
       - if import_sources_enabled?
-        - if Feature.enabled?(:bulk_import)
+        - if Feature.enabled?(:bulk_import, default_enabled: :yaml)
           = render 'import_group_from_another_instance_panel'
           .gl-mt-7.gl-border-b-solid.gl-border-gray-100.gl-border-1
         = render 'import_group_from_file_panel'
diff --git a/app/views/groups/runners/_runner.html.haml b/app/views/groups/runners/_runner.html.haml
index 13da2292985..66ffef98553 100644
--- a/app/views/groups/runners/_runner.html.haml
+++ b/app/views/groups/runners/_runner.html.haml
@@ -1,6 +1,3 @@
--# Note: This file should stay aligned with:
--# `app/views/admin/runners/_runner.html.haml`
-
 .gl-responsive-table-row{ id: dom_id(runner) }
   .table-section.section-10.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Type')
diff --git a/app/views/groups/runners/index.html.haml b/app/views/groups/runners/index.html.haml
index 4e7bc99b1f0..f904b34d29e 100644
--- a/app/views/groups/runners/index.html.haml
+++ b/app/views/groups/runners/index.html.haml
@@ -3,4 +3,4 @@
 %h2.page-title
   = s_('Runners|Group Runners')
 
-#js-group-runners{ data: { registration_token: @group.runners_token, group_id: @group.id } }
+#js-group-runners{ data: group_runners_data_attributes(@group).merge( { group_runners_limited_count: @group_runners_limited_count } ) }
diff --git a/app/views/groups/settings/_membership.html.haml b/app/views/groups/settings/_membership.html.haml
new file mode 100644
index 00000000000..b05a294e864
--- /dev/null
+++ b/app/views/groups/settings/_membership.html.haml
@@ -0,0 +1,6 @@
+%h5= _('Membership')
+
+.form-group
+  = render 'shared/allow_request_access', form: f
+
+= render_if_exists 'groups/member_lock_setting', f: f, group: @group
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
index 683e70248b6..8f428909e60 100644
--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -4,9 +4,6 @@
 
   %fieldset
     %h5= _('Permissions')
-    .form-group
-      = render 'shared/allow_request_access', form: f
-
     - if @group.root?
       .form-group.gl-mb-3
         = f.gitlab_ui_checkbox_component :prevent_sharing_groups_outside_hierarchy,
@@ -43,5 +40,5 @@
     = render_if_exists 'groups/settings/prevent_forking', f: f, group: @group
     = render 'groups/settings/two_factor_auth', f: f, group: @group
     = render_if_exists 'groups/personal_access_token_expiration_policy', f: f, group: @group
-    = render_if_exists 'groups/member_lock_setting', f: f, group: @group
+    = render 'groups/settings/membership', f: f, group: @group
   = f.submit _('Save changes'), class: 'btn gl-button btn-confirm gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
diff --git a/app/views/groups/settings/_two_factor_auth.html.haml b/app/views/groups/settings/_two_factor_auth.html.haml
index 9e5eeee2e2a..8204cafcb44 100644
--- a/app/views/groups/settings/_two_factor_auth.html.haml
+++ b/app/views/groups/settings/_two_factor_auth.html.haml
@@ -1,5 +1,5 @@
 - return unless group.parent_allows_two_factor_authentication?
-- docs_link_url = help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
+- docs_link_url = help_page_path('security/two_factor_authentication', anchor: 'enforce-2fa-for-all-users-in-a-group')
 - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: docs_link_url }
 
 %h5= _('Two-factor authentication')
diff --git a/app/views/groups/settings/ci_cd/show.html.haml b/app/views/groups/settings/ci_cd/show.html.haml
index 018dd4c424d..331cb31c626 100644
--- a/app/views/groups/settings/ci_cd/show.html.haml
+++ b/app/views/groups/settings/ci_cd/show.html.haml
@@ -9,7 +9,7 @@
 - if can?(current_user, :update_max_artifacts_size, @group)
   %section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if general_expanded) }
     .settings-header
-      %h4
+      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
         = _("General pipelines")
       %button.btn.gl-button.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
@@ -26,7 +26,7 @@
 
 %section.settings#runners-settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Runners')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: "button" }
       = expanded ? _('Collapse') : _('Expand')
@@ -38,7 +38,7 @@
 
 %section.settings#auto-devops-settings.no-animate{ class: ('expanded' if expanded) }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Auto DevOps')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: "button" }
       = expanded ? _('Collapse') : _('Expand')
diff --git a/app/views/groups/settings/repository/_initial_branch_name.html.haml b/app/views/groups/settings/repository/_initial_branch_name.html.haml
index 5299c38576d..15a3bacf12d 100644
--- a/app/views/groups/settings/repository/_initial_branch_name.html.haml
+++ b/app/views/groups/settings/repository/_initial_branch_name.html.haml
@@ -1,6 +1,6 @@
 %section.settings.as-default-branch-name.no-animate#js-default-branch-name{ class: ('expanded' if expanded_by_default?) }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Default initial branch name')
     %button.gl-button.js-settings-toggle{ type: 'button' }
       = expanded_by_default? ? _('Collapse') : _('Expand')
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 76850f0a884..2e74d983397 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -12,9 +12,11 @@
   = 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) } }
+        invite_members_path: group_group_members_path(@group),
+        callouts_path: group_callouts_path,
+        callouts_feature_id: UserCalloutsHelper::INVITE_MEMBERS_BANNER,
+        group_id: @group.id } }
   = render 'groups/invite_members_modal', group: @group
 
 = content_for :meta_tags do