Improve project settings page

Prioritize and simplify project settings content.

10 files changed, 253 insertions, 245 deletions

diff --git a/app/assets/javascripts/dirty_submit/dirty_submit_form.js b/app/assets/javascripts/dirty_submit/dirty_submit_form.js
index 00e41dd0301..765969daa32 100644
--- a/app/assets/javascripts/dirty_submit/dirty_submit_form.js
+++ b/app/assets/javascripts/dirty_submit/dirty_submit_form.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import $ from 'jquery';
 
 class DirtySubmitForm {
   constructor(form) {
@@ -26,6 +27,7 @@ class DirtySubmitForm {
     );
     this.form.addEventListener('input', throttledUpdateDirtyInput);
     this.form.addEventListener('change', throttledUpdateDirtyInput);
+    $(this.form).on('change.select2', throttledUpdateDirtyInput);
     this.form.addEventListener('submit', event => this.formSubmit(event));
   }
 
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index 278c35d3846..8eec5ea78cd 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -3,17 +3,24 @@ import initSettingsPanels from '~/settings_panels';
 import setupProjectEdit from '~/project_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
+import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import initAvatarPicker from '~/avatar_picker';
 import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectPermissionsSettings from '../shared/permissions';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initProjectLoadingSpinner();
-  setupProjectEdit();
-  // Initialize expandable settings panels
-  initSettingsPanels();
   initAvatarPicker();
-  initProjectPermissionsSettings();
   initConfirmDangerModal();
+  initSettingsPanels();
   mountBadgeSettings(PROJECT_BADGE);
+
+  initProjectLoadingSpinner();
+  initProjectPermissionsSettings();
+  setupProjectEdit();
+
+  dirtySubmitFactory(
+    document.querySelectorAll(
+      '.js-general-settings-form, .js-mr-settings-form, .js-add-approver-form',
+    ),
+  );
 });
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 1c23c14c2de..be544c0a814 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -157,6 +157,10 @@ label {
   padding-left: 10px;
   padding-right: 10px;
   appearance: none;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  /* stylelint-enable property-no-vendor-prefix */
 
   &::-ms-expand {
     display: none;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 7b0538dca20..0a9c56f5625 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -39,7 +39,7 @@
 
 .settings-header {
   position: relative;
-  padding: 20px 110px 10px 0;
+  padding: 20px 110px 0 0;
 
   h4 {
     margin-top: 0;
diff --git a/app/views/projects/_classification_policy_settings.html.haml b/app/views/projects/_classification_policy_settings.html.haml
index 57c7a718d53..5a766ab024f 100644
--- a/app/views/projects/_classification_policy_settings.html.haml
+++ b/app/views/projects/_classification_policy_settings.html.haml
@@ -1,8 +1,6 @@
 - if ::Gitlab::ExternalAuthorization.enabled?
-  .form-group
-    = f.label :external_authorization_classification_label, class: 'label-bold' do
-      = s_('ExternalAuthorizationService|Classification Label')
-      %span.light (optional)
+  .form-group.col-md-9
+    = f.label :external_authorization_classification_label, _('Classification Label (optional)'), class: 'label-bold'
     = f.text_field :external_authorization_classification_label, class: "form-control"
     %span.form-text.text-muted
       = external_classification_label_help_message
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 409b6dba9ca..1056977886a 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -1,42 +1,33 @@
 - return unless Gitlab::CurrentSettings.project_export_enabled?
 
 - project = local_assigns.fetch(:project)
-- expanded = Rails.env.test?
 
-%section.settings.no-animate#js-export-project{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      Export project
-    %button.btn.js-settings-toggle{ type: 'button' }
-      = expanded ? 'Collapse' : 'Expand'
-    %p
-      Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.
-  .settings-content
-    .bs-callout.bs-callout-info
-      %p.append-bottom-0
-        %p
-          The following items will be exported:
-        %ul
-          %li Project and wiki repositories
-          %li Project uploads
-          %li Project configuration, including services
-          %li Issues with comments, merge requests with diffs and comments, labels, milestones, snippets, and other project entities
-          %li LFS objects
-        %p
-          The following items will NOT be exported:
-        %ul
-          %li Job traces and artifacts
-          %li Container registry images
-          %li CI variables
-          %li Webhooks
-          %li Any encrypted tokens
-    %p
-      Once the exported file is ready, you will receive a notification email with a download link, or you can download it from this page.
-    - if project.export_status == :finished
-      = link_to 'Download export', download_export_project_path(project),
-              rel: 'nofollow', download: '', method: :get, class: "btn btn-default"
-      = link_to 'Generate new export', generate_new_export_project_path(project),
-              method: :post, class: "btn btn-default"
-    - else
-      = link_to 'Export project', export_project_path(project),
-              method: :post, class: "btn btn-default"
+.sub-section
+  %h4= _('Export project')
+  %p= _('Export this project with all its related data in order to move your project to a new GitLab instance. Once the export is finished, you can import the file from the "New Project" page.')
+
+  .bs-callout.bs-callout-info
+    %p.append-bottom-0
+      %p= _('The following items will be exported:')
+      %ul
+        %li= _('Project and wiki repositories')
+        %li= _('Project uploads')
+        %li= _('Project configuration, including services')
+        %li= _('Issues with comments, merge requests with diffs and comments, labels, milestones, snippets, and other project entities')
+        %li= _('LFS objects')
+      %p= _('The following items will NOT be exported:')
+      %ul
+        %li= _('Job traces and artifacts')
+        %li= _('Container registry images')
+        %li= _('CI variables')
+        %li= _('Webhooks')
+        %li= _('Any encrypted tokens')
+  %p= _('Once the exported file is ready, you will receive a notification email with a download link, or you can download it from this page.')
+  - if project.export_status == :finished
+    = link_to _('Download export'), download_export_project_path(project),
+            rel: 'nofollow', download: '', method: :get, class: "btn btn-default"
+    = link_to _('Generate new export'), generate_new_export_project_path(project),
+            method: :post, class: "btn btn-default"
+  - else
+    = link_to _('Export project'), export_project_path(project),
+            method: :post, class: "btn btn-default"
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index abf2fb7dc57..420dafb7b4d 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -3,210 +3,155 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = Rails.env.test?
 
-.project-edit-container
-  %section.settings.general-settings.no-animate#js-general-project-settings{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, tags, avatar')
-      %button.btn.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
-      %p= _('Update your project name, tags, description and avatar.')
-
-    .settings-content
-      .project-edit-errors
-      = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project" }, authenticity_token: true do |f|
-        %input{ name: 'update_section', type: 'hidden', value: 'js-general-project-settings' }
-        %fieldset
-          .row
-            .form-group.col-md-9
-              = f.label :name, class: 'label-bold', for: 'project_name_edit' do
-                Project name
-              = f.text_field :name, class: "form-control", id: "project_name_edit"
-
-            .form-group.col-md-3
-              = f.label :id, class: 'label-bold' do
-                Project ID
-              = f.text_field :id, class: 'form-control', readonly: true
-
-          .form-group
-            = f.label :description, class: 'label-bold' do
-              Project description
-              %span.light (optional)
-            = f.text_area :description, class: "form-control", rows: 3, maxlength: 250
-
-          = render 'projects/classification_policy_settings', f: f
-
-        = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :project
-
-        .form-group
-          = f.label :tag_list, "Topics", class: 'label-bold'
-          = f.text_field :tag_list, value: @project.tag_list.join(', '), maxlength: 2000, class: "form-control"
-          %p.form-text.text-muted Separate topics with commas.
-
-        .form-group.prepend-top-default.append-bottom-20
-          .avatar-container.s90
-            = project_icon(@project, alt: _('Project avatar'), class: 'avatar project-avatar s90')
-          = f.label :avatar, _('Project avatar'), class: 'label-bold d-block'
-          = render 'shared/choose_avatar_button', f: f
-          - if @project.avatar?
-            %hr
-            = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
-
-        = f.submit 'Save changes', class: "btn btn-success js-btn-success-general-project-settings"
-
-  %section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
-      %button.btn.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
-      %p= _('Choose visibility level, enable/disable project features (issues, repository, wiki, snippets) and set permissions.')
-
-    .settings-content
-      = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
-        %input{ name: 'update_section', type: 'hidden', value: 'js-shared-permissions' }
-        -# haml-lint:disable InlineJavaScript
-        %script.js-project-permissions-form-data{ type: "application/json" }= project_permissions_panel_data_json(@project)
-        .js-project-permissions-form
-        = f.submit 'Save changes', class: "btn btn-success"
-
-  = render_if_exists 'projects/issues_settings'
-
-  %section.qa-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Merge requests')
-      %button.btn.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
-      %p= _('Choose your merge method, set up a default merge request description template.')
-
-    .settings-content
-      = render_if_exists 'shared/promotions/promote_mr_features'
-
-      = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "merge-request-settings-form" }, authenticity_token: true do |f|
-        %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
-        = render 'projects/merge_request_settings', form: f
-        = f.submit 'Save changes', class: "btn btn-success qa-save-merge-request-changes"
-
-  = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
-
-
-  %section.settings.no-animate{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-        = s_('ProjectSettings|Badges')
-      %button.btn.js-settings-toggle{ type: 'button' }
-        = expanded ? 'Collapse' : 'Expand'
-      %p
-        = s_('ProjectSettings|Customize your project badges.')
-        = link_to s_('ProjectSettings|Learn more about badges.'), help_page_path('user/project/badges')
-    .settings-content
-      = render 'shared/badges/badge_settings'
-
-  = render_if_exists 'projects/service_desk_settings'
-  = render 'export', project: @project
-
-  %section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
-      %button.btn.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
-      %p= _('Housekeeping, export, path, transfer, remove, archive.')
-
-    .settings-content
+%section.settings.general-settings.no-animate.expanded#js-general-settings
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
+    %button.btn.js-settings-toggle{ type: 'button' }= _('Collapse')
+    %p= _('Update your project name, topics, description and avatar.')
+  .settings-content= render 'projects/settings/general'
+
+%section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
+    %button.btn.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %p= _('Choose visibility level, enable/disable project features (issues, repository, wiki, snippets) and set permissions.')
+
+  .settings-content
+    = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
+      %input{ name: 'update_section', type: 'hidden', value: 'js-shared-permissions' }
+      %template.js-project-permissions-form-data{ type: "application/json" }= project_permissions_panel_data_json(@project)
+      .js-project-permissions-form
+      = f.submit _('Save changes'), class: "btn btn-success"
+
+%section.qa-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Merge requests')
+    %button.btn.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %p= _('Choose your merge method, set up a default merge request description template.')
+
+  .settings-content
+    = render_if_exists 'shared/promotions/promote_mr_features'
+
+    = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
+      %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
+      = render 'projects/merge_request_settings', form: f
+      = f.submit _('Save changes'), class: "btn btn-success qa-save-merge-request-changes"
+
+= render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
+
+
+%section.settings.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
+      = s_('ProjectSettings|Badges')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = s_('ProjectSettings|Customize your project badges.')
+      = link_to s_('ProjectSettings|Learn more about badges.'), help_page_path('user/project/badges')
+  .settings-content
+    = render 'shared/badges/badge_settings'
+
+= render_if_exists 'projects/settings/default_issue_template'
+
+= render_if_exists 'projects/service_desk_settings'
+
+%section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
+    %button.btn.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
+    %p= _('Housekeeping, export, path, transfer, remove, archive.')
+
+  .settings-content
+    .sub-section
+      %h4= _('Housekeeping')
+      %p= _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
+      = link_to _('Run housekeeping'), housekeeping_project_path(@project),
+        method: :post, class: "btn btn-default"
+
+    = render 'export', project: @project
+
+    - if can? current_user, :archive_project, @project
       .sub-section
-        %h4 Housekeeping
-        %p
-          Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.
-        = link_to 'Run housekeeping', housekeeping_project_path(@project),
-            method: :post, class: "btn btn-default"
-      - if can? current_user, :archive_project, @project
-        .sub-section
-          %h4.warning-title
-            - if @project.archived?
-              Unarchive project
-            - else
-              Archive project
+        %h4.warning-title
           - if @project.archived?
-            %p
-              Unarchiving the project will restore people's ability to make changes to it.
-              The repository can be committed to, and issues, comments and other entities can be created.
-              %strong Once active this project shows up in the search and on the dashboard.
-            = link_to 'Unarchive project', unarchive_project_path(@project),
-                data: { confirm: "Are you sure that you want to unarchive this project?" },
-                method: :post, class: "btn btn-success"
+            = _('Unarchive project')
           - else
-            %p
-              Archiving the project will make it entirely read-only. It is hidden from the dashboard and doesn't show up in searches.
-              %strong The repository cannot be committed to, and no issues, comments or other entities can be created.
-            = link_to 'Archive project', archive_project_path(@project),
-                data: { confirm: "Are you sure that you want to archive this project?" },
-                method: :post, class: "btn btn-warning"
-      .sub-section.rename-repository
-        %h4.warning-title
-          Rename repository
-        = render 'projects/errors'
-        = form_for([@project.namespace.becomes(Namespace), @project]) do |f|
-          .form-group.project_name_holder
-            = f.label :name, class: 'label-bold' do
-              Project name
-            .form-group
-              = f.text_field :name, class: "form-control"
+            = _('Archive project')
+        - if @project.archived?
+          %p= _("Unarchiving the project will restore people's ability to make changes to it. The repository can be committed to, and issues, comments and other entities can be created. <strong>Once active this project shows up in the search and on the dashboard.</strong>").html_safe
+          = link_to _('Unarchive project'), unarchive_project_path(@project),
+              data: { confirm: _("Are you sure that you want to unarchive this project?") },
+              method: :post, class: "btn btn-success"
+        - else
+          %p= _("Archiving the project will make it entirely read-only. It is hidden from the dashboard and doesn't show up in searches. <strong>The repository cannot be committed to, and no issues, comments or other entities can be created.</strong>").html_safe
+          = link_to _('Archive project'), archive_project_path(@project),
+              data: { confirm: _("Are you sure that you want to archive this project?") },
+              method: :post, class: "btn btn-warning"
+    .sub-section.rename-repository
+      %h4.warning-title= _('Change path')
+      = render 'projects/errors'
+      = form_for([@project.namespace.becomes(Namespace), @project]) do |f|
+        .form-group
+          = f.label :path, _('Path'), class: 'label-bold'
+          .form-group
+            .input-group
+              .input-group-prepend
+                .input-group-text
+                  #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
+              = f.text_field :path, class: 'form-control qa-project-path-field h-auto'
+          %ul
+            %li= _("Be careful. Renaming a project's repository can have unintended side effects.")
+            %li= _('You will need to update your local repositories to point to the new location.')
+            - if @project.deployment_platform.present?
+              %li= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
+        = f.submit _('Change path'), class: "btn btn-warning"
+
+    - if can?(current_user, :change_namespace, @project)
+      .sub-section
+        %h4.danger-title= _('Transfer project')
+        = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'js-project-transfer-form' } ) do |f|
           .form-group
-            = f.label :path, class: 'label-bold' do
-              %span Path
+            = label_tag :new_namespace_id, nil, class: 'label-bold' do
+              %span= _('Select a new namespace')
             .form-group
-              .input-group
-                .input-group-prepend
-                  .input-group-text
-                    #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
-                = f.text_field :path, class: 'form-control'
+              = select_tag :new_namespace_id, namespaces_options(nil), include_blank: true, class: 'select2'
             %ul
-              %li Be careful. Renaming a project's repository can have unintended side effects.
-              %li You will need to update your local repositories to point to the new location.
-              - if @project.deployment_platform.present?
-                %li Your deployment services will be broken, you will need to manually fix the services after renaming.
-          = f.submit 'Rename project', class: "btn btn-warning"
-      - if can?(current_user, :change_namespace, @project)
-        .sub-section
-          %h4.danger-title
-            Transfer project
-          = form_for([@project.namespace.becomes(Namespace), @project], url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'js-project-transfer-form' } ) do |f|
-            .form-group
-              = label_tag :new_namespace_id, nil, class: 'label-bold' do
-                %span  Select a new namespace
-              .form-group
-                = select_tag :new_namespace_id, namespaces_options(nil), include_blank: true, class: 'select2'
-              %ul
-                %li Be careful. Changing the project's namespace can have unintended side effects.
-                %li You can only transfer the project to namespaces you manage.
-                %li You will need to update your local repositories to point to the new location.
-                %li Project visibility level will be changed to match namespace rules when transferring to a group.
-            = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => transfer_project_message(@project) }
-      - if @project.forked? && can?(current_user, :remove_fork_project, @project)
-        .sub-section
-          %h4.danger-title
-            Remove fork relationship
+              %li= _("Be careful. Changing the project's namespace can have unintended side effects.")
+              %li= _('You can only transfer the project to namespaces you manage.')
+              %li= _('You will need to update your local repositories to point to the new location.')
+              %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
+          = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => transfer_project_message(@project) }
+
+    - if @project.forked? && can?(current_user, :remove_fork_project, @project)
+      .sub-section
+        %h4.danger-title= _('Remove fork relationship')
+        %p
+          = _('This will remove the fork relationship to source project')
+          = succeed "." do
+            - if @project.fork_source
+              = link_to(fork_source_name(@project), project_path(@project.fork_source))
+            - else
+              = fork_source_name(@project)
+        = form_for([@project.namespace.becomes(Namespace), @project], url: remove_fork_project_path(@project), method: :delete, remote: true, html: { class: 'transfer-project' }) do |f|
           %p
-            This will remove the fork relationship to source project
-            = succeed "." do
-              - if @project.fork_source
-                = link_to(fork_source_name(@project), project_path(@project.fork_source))
-              - else
-                = fork_source_name(@project)
-          = form_for([@project.namespace.becomes(Namespace), @project], url: remove_fork_project_path(@project), method: :delete, remote: true, html: { class: 'transfer-project' }) do |f|
-            %p
-              %strong Once removed, the fork relationship cannot be restored and you will no longer be able to send merge requests to the source.
-            = button_to 'Remove fork relationship', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_fork_project_message(@project) }
-      - if can?(current_user, :remove_project, @project)
-        .sub-section
-          %h4.danger-title
-            Remove project
+            %strong= _('Once removed, the fork relationship cannot be restored and you will no longer be able to send merge requests to the source.')
+          = button_to _('Remove fork relationship'), '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_fork_project_message(@project) }
+
+    - if can?(current_user, :remove_project, @project)
+      .sub-section
+        %h4.danger-title= _('Remove project')
+        %p= _('Removing the project will delete its repository and all related resources including issues, merge requests etc.')
+        = form_tag(project_path(@project), method: :delete) do
           %p
-            Removing the project will delete its repository and all related resources including issues, merge requests etc.
-          = form_tag(project_path(@project), method: :delete) do
-            %p
-              %strong Removed projects cannot be restored!
-            = button_to 'Remove project', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_project_message(@project) }
+            %strong= _('Removed projects cannot be restored!')
+          = button_to _('Remove project'), '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_project_message(@project) }
 
 .save-project-loader.hide
   .center
     %h2
       %i.fa.fa-spinner.fa-spin
-      Saving project.
-    %p Please wait a moment, this page will automatically refresh when ready.
+      = _('Saving project.')
+    %p= _('Please wait a moment, this page will automatically refresh when ready.')
 
 = render 'shared/confirm_modal', phrase: @project.path
diff --git a/app/views/projects/settings/_default_issue_template.html.haml b/app/views/projects/settings/_default_issue_template.html.haml
new file mode 100644
index 00000000000..54347dfd3dd
--- /dev/null
+++ b/app/views/projects/settings/_default_issue_template.html.haml
@@ -0,0 +1,21 @@
+- if @project.feature_available?(:issuable_default_templates)
+  - expanded = Rails.env.test?
+  %section.settings.issues-feature.no-animate#js-issue-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:issues_access_level) == 0)] }
+    .settings-header
+      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Default issue template')
+      %button.btn.js-settings-toggle= expanded ? _('Collapse') : _('Expand')
+      %p= _('Set a default template for issue descriptions.')
+
+    .settings-content
+      = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "issue-settings-form" }, authenticity_token: true do |f|
+        %input{ type: 'hidden', name: 'update_section', value: 'js-issue-settings' }
+        .row
+          .form-group.col-md-9
+            = f.label :issues_template, class: 'label-bold' do
+              = _('Default description template for issues')
+              = link_to icon('question-circle'), help_page_path('user/project/description_templates', anchor: 'setting-a-default-template-for-issues-and-merge-requests'), target: '_blank'
+            = f.text_area :issues_template, class: "form-control", rows: 3
+            .text-secondary
+              - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/markdown') }
+              = _('Description parsed with %{link_start}GitLab Flavored Markdown%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+        = f.submit _('Save changes'), class: "btn btn-success"
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
new file mode 100644
index 00000000000..8327793b5a5
--- /dev/null
+++ b/app/views/projects/settings/_general.html.haml
@@ -0,0 +1,42 @@
+= form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project js-general-settings-form" }, authenticity_token: true do |f|
+  %input{ name: 'update_section', type: 'hidden', value: 'js-general-settings' }
+  = form_errors(@project)
+
+  %fieldset
+    .row
+      .form-group.col-md-5
+        = f.label :name, class: 'label-bold', for: 'project_name_edit' do
+          = _('Project name')
+        = f.text_field :name, class: "form-control", id: "project_name_edit"
+
+      .form-group.col-md-7
+        = f.label :id, class: 'label-bold' do
+          = _('Project ID')
+        = f.text_field :id, class: 'form-control w-auto', readonly: true
+
+    .row
+      .form-group.col-md-9
+        = f.label :tag_list, _('Topics'), class: 'label-bold'
+        = f.text_field :tag_list, value: @project.tag_list.join(', '), maxlength: 2000, class: "form-control"
+        %p.form-text.text-muted= _('Separate topics with commas.')
+
+    .row
+      .form-group.col-md-9
+        = f.label :description, _('Project description (optional)'), class: 'label-bold'
+        = f.text_area :description, class: 'form-control', rows: 3, maxlength: 250
+
+  .row= render_if_exists 'projects/classification_policy_settings', f: f
+
+  .row= render_if_exists 'shared/repository_size_limit_setting', form: f, type: :project
+
+  .form-group.prepend-top-default.append-bottom-20
+    .avatar-container.s90
+      = project_icon(@project, alt: _('Project avatar'), class: 'avatar project-avatar s90')
+    = f.label :avatar, _('Project avatar'), class: 'label-bold d-block'
+    = render 'shared/choose_avatar_button', f: f
+    - if @project.avatar?
+      %hr
+      = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
+
+
+  = f.submit _('Save changes'), class: "btn btn-success mt-4 qa-save-naming-topics-avatar-button"
diff --git a/app/views/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml
index 1dcf4369253..3967c8148d2 100644
--- a/app/views/shared/_confirm_modal.html.haml
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -2,8 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %h3.page-title
-          Confirmation required
+        %h3.page-title= _('Confirmation required')
         %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
           %span{ "aria-hidden": true } &times;
 
@@ -11,8 +10,7 @@
         %p.text-danger.js-confirm-text
 
         %p
-          This action can lead to data loss.
-          To prevent accidental actions we ask you to confirm your intention.
+          %span.js-warning-text= _('This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.')
           %br
           Please type
           %code.js-confirm-danger-match= phrase
@@ -21,4 +19,4 @@
         .form-group
           = text_field_tag 'confirm_name_input', '', class: 'form-control js-confirm-danger-input'
         .form-actions
-          = submit_tag 'Confirm', class: "btn btn-danger js-confirm-danger-submit"
+          = submit_tag _('Confirm'), class: "btn btn-danger js-confirm-danger-submit"