Merge branch 'improve-danger-zone' into 'master'

Improve danger zone

* show transfer/remove boxes by default
* ask person to type project name before transfer/remove

Fixes #1347

See merge request !1161

11 files changed, 156 insertions, 113 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index a1a4dc8e24f..ff0d0bb32b9 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -177,6 +177,13 @@ $ ->
     $(@).closest(".diff-file").find(".notes_holder").toggle()
     e.preventDefault()
 
+  $(document).on "click", '.js-confirm-danger', (e) ->
+    e.preventDefault()
+    btn = $(e.target)
+    text = btn.data("confirm-danger-message")
+    form = btn.closest("form")
+    new ConfirmDangerModal(form, text)
+
 (($) ->
   # Disable an element and add the 'disabled' Bootstrap class
   $.fn.extend disable: ->
diff --git a/app/assets/javascripts/confirm_danger_modal.js.coffee b/app/assets/javascripts/confirm_danger_modal.js.coffee
new file mode 100644
index 00000000000..1687b7d961c
--- /dev/null
+++ b/app/assets/javascripts/confirm_danger_modal.js.coffee
@@ -0,0 +1,20 @@
+class ConfirmDangerModal
+  constructor: (form, text) ->
+    @form = form
+    $('.js-confirm-text').text(text || '')
+    $('.js-confirm-danger-input').val('')
+    $('#modal-confirm-danger').modal('show')
+    project_path = $('.js-confirm-danger-match').text()
+    submit = $('.js-confirm-danger-submit')
+    submit.disable()
+
+    $('.js-confirm-danger-input').on 'input', ->
+      if rstrip($(@).val()) is project_path
+        submit.enable()
+      else
+        submit.disable()
+
+    $('.js-confirm-danger-submit').on 'click', =>
+      @form.submit()
+
+@ConfirmDangerModal = ConfirmDangerModal
diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss
index 0486955d6e1..709d26767af 100644
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -10,7 +10,7 @@
 .issue-box {
   color: #555;
   margin:20px 0;
-  background: #f9f9f9;
+  background: $box_bg;
   border-top-left-radius: 5px;
   @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
 
diff --git a/app/assets/stylesheets/gl_bootstrap.scss b/app/assets/stylesheets/gl_bootstrap.scss
index 45044c5acb6..9c5e76ab8e2 100644
--- a/app/assets/stylesheets/gl_bootstrap.scss
+++ b/app/assets/stylesheets/gl_bootstrap.scss
@@ -233,8 +233,8 @@ $list-group-active-bg: $bg_primary;
     }
 
     .form-actions {
-      margin-bottom: 0;
-      background: #FFF;
+      margin: -15px;
+      margin-top: 18px;
     }
   }
 
@@ -262,53 +262,33 @@ $list-group-active-bg: $bg_primary;
 }
 
 .panel-danger {
-  border-color: $border_danger;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_danger;
+    color: $border_danger;
     border-color: $border_danger;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }
 
 .panel-success {
-  border-color: $border_success;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_success;
+    color: $border_success;
     border-color: $border_success;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }
 
 .panel-primary {
-  border-color: $border_primary;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_primary;
+    color: $border_primary;
     border-color: $border_primary;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }
 
 .panel-warning {
-  border-color: $border_warning;
+  @include panel-colored;
   .panel-heading {
-    color: #ffffff;
-    background-color: $bg_warning;
+    color: $border_warning;
     border-color: $border_warning;
-    a {
-      color: #FFF;
-      text-decoration: underline;
-    }
   }
 }
diff --git a/app/assets/stylesheets/main/mixins.scss b/app/assets/stylesheets/main/mixins.scss
index 93faf5ced65..7f607fc4e8b 100644
--- a/app/assets/stylesheets/main/mixins.scss
+++ b/app/assets/stylesheets/main/mixins.scss
@@ -132,3 +132,14 @@
   white-space: nowrap;
   max-width: $max_width;
 }
+
+@mixin panel-colored {
+  border: none;
+  background: $box_bg;
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
+
+  .panel-heading {
+    font-weight: bold;
+    background-color: $box_bg;
+  }
+}
diff --git a/app/assets/stylesheets/main/variables.scss b/app/assets/stylesheets/main/variables.scss
index 72d84226fe7..c71984a5665 100644
--- a/app/assets/stylesheets/main/variables.scss
+++ b/app/assets/stylesheets/main/variables.scss
@@ -3,6 +3,7 @@
  */
 $style_color: #474D57;
 $hover: #FFECDB;
+$box_bg: #F9F9F9;
 
 /*
  * Link colors
diff --git a/app/assets/stylesheets/sections/merge_requests.scss b/app/assets/stylesheets/sections/merge_requests.scss
index 46e3884b302..c8d0cac2926 100644
--- a/app/assets/stylesheets/sections/merge_requests.scss
+++ b/app/assets/stylesheets/sections/merge_requests.scss
@@ -104,7 +104,7 @@
 }
 
 .mr-state-widget {
-  background: #f9f9f9;
+  background: $box_bg;
   margin-bottom: 20px;
   @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
 
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 2188b30a9af..883c1f63af6 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -56,6 +56,10 @@ module ProjectsHelper
     "You are going to remove #{project.name_with_namespace}.\n Removed project CANNOT be restored!\n Are you ABSOLUTELY sure?"
   end
 
+  def transfer_project_message(project)
+    "You are going to transfer #{project.name_with_namespace} to another owner. Are you ABSOLUTELY sure?"
+  end
+
   def project_nav_tabs
     @nav_tabs ||= get_project_nav_tabs(@project, current_user)
   end
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 5ee5641b069..f48f4bb2953 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -86,101 +86,92 @@
 
 
 
-    .danger-settings.js-toggle-container
-      .centered-light-block
-        %h3
-          %i.fa.fa-exclamation-triangle
-          Dangerous settings
-
-        %p Project settings below may result in data loss!
-        = link_to '#', class: 'btn js-toggle-button' do
-          Show them to me
-          %i.fa.fa-chevron-down
-
-      .js-toggle-content.hide
-        - if can? current_user, :archive_project, @project
-          .panel.panel-default.panel.panel-warning
+    .danger-settings
+      - if can? current_user, :archive_project, @project
+        - if @project.archived?
+          .panel.panel-success
             .panel-heading
-              - if @project.archived?
-                Unarchive project
-              - else
-                Archive project
+              Unarchive project
             .panel-body
-              - if @project.archived?
-                %p
-                  Unarchiving the project will mark its repository as active.
-                  %br
-                  The project can be committed to.
-                  %br
-                  %strong Once active this project shows up in the search and on the dashboard.
-                = link_to 'Unarchive', unarchive_project_path(@project),
-                    data: { confirm: "Are you sure that you want to unarchive this project?\nWhen this project is unarchived it is active and can be committed to again." },
-                    method: :post, class: "btn btn-remove"
-              - else
-                %p
-                  Archiving the project will mark its repository as read-only.
-                  %br
-                  It is hidden from the dashboard and doesn't show up in searches.
-                  %br
-                  %strong Archived projects cannot be committed to!
-                = link_to 'Archive', archive_project_path(@project),
-                    data: { confirm: "Are you sure that you want to archive this project?\nAn archived project cannot be committed to." },
-                    method: :post, class: "btn btn-warning"
+              %p
+                Unarchiving the project will mark its repository as active.
+                %br
+                The project can be committed to.
+                %br
+                %strong Once active this project shows up in the search and on the dashboard.
+              = link_to 'Unarchive', unarchive_project_path(@project),
+                  data: { confirm: "Are you sure that you want to unarchive this project?\nWhen this project is unarchived it is active and can be committed to again." },
+                  method: :post, class: "btn btn-success"
         - else
-          .nothing-here-block Only the project owner can archive a project
-
-        .panel.panel-default.panel.panel-warning
-          .panel-heading Rename repository
+          .panel.panel-warning
+            .panel-heading
+              Archive project
+            .panel-body
+              %p
+                Archiving the project will mark its repository as read-only.
+                %br
+                It is hidden from the dashboard and doesn't show up in searches.
+                %br
+                %strong Archived projects cannot be committed to!
+              = link_to 'Archive', archive_project_path(@project),
+                  data: { confirm: "Are you sure that you want to archive this project?\nAn archived project cannot be committed to." },
+                  method: :post, class: "btn btn-warning"
+      - else
+        .nothing-here-block Only the project owner can archive a project
+
+      .panel.panel-default.panel.panel-warning
+        .panel-heading Rename repository
+        .errors-holder
+        .panel-body
+          = form_for(@project, html: { class: 'form-horizontal' }) do |f|
+            .form-group
+              = f.label :path, class: 'control-label' do
+                %span Path
+              .col-sm-9
+                .form-group
+                  .input-group
+                    = f.text_field :path, class: 'form-control'
+                    %span.input-group-addon .git
+                %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.
+            .form-actions
+              = f.submit 'Rename', class: "btn btn-warning"
+
+      - if can?(current_user, :change_namespace, @project)
+        .panel.panel-default.panel.panel-danger
+          .panel-heading Transfer project
           .errors-holder
           .panel-body
-            = form_for(@project, html: { class: 'form-horizontal' }) do |f|
+            = form_for(@project, url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'transfer-project form-horizontal' }) do |f|
               .form-group
-                = f.label :path, class: 'control-label' do
-                  %span Path
-                .col-sm-9
+                = f.label :namespace_id, class: 'control-label' do
+                  %span Namespace
+                .col-sm-10
                   .form-group
-                    .input-group
-                      = f.text_field :path, class: 'form-control'
-                      %span.input-group-addon .git
+                    = f.select :namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace' }, { class: 'select2' }
                   %ul
-                    %li Be careful. Renaming a project's repository can have unintended side effects.
+                    %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.
               .form-actions
-                = f.submit 'Rename', class: "btn btn-warning"
-
-        - if can?(current_user, :change_namespace, @project)
-          .panel.panel-default.panel.panel-danger
-            .panel-heading Transfer project
-            .errors-holder
-            .panel-body
-              = form_for(@project, url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'transfer-project form-horizontal' }) do |f|
-                .form-group
-                  = f.label :namespace_id, class: 'control-label' do
-                    %span Namespace
-                  .col-sm-10
-                    .form-group
-                      = f.select :namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace' }, { 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.
-                .form-actions
-                  = f.submit 'Transfer', class: "btn btn-remove"
-        - else
-          .nothing-here-block Only the project owner can transfer a project
+                = f.submit 'Transfer', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => transfer_project_message(@project) }
+      - else
+        .nothing-here-block Only the project owner can transfer a project
 
-        - if can?(current_user, :remove_project, @project)
-          .panel.panel-default.panel.panel-danger
-            .panel-heading Remove project
-            .panel-body
+      - if can?(current_user, :remove_project, @project)
+        .panel.panel-default.panel.panel-danger
+          .panel-heading Remove project
+          .panel-body
+            = form_tag(project_path(@project), method: :delete, html: { class: 'form-horizontal'}) do
               %p
                 Removing the project will delete its repository and all related resources including issues, merge requests etc.
                 %br
                 %strong Removed projects cannot be restored!
 
-              = link_to 'Remove project', @project, data: { confirm: remove_project_message(@project) }, method: :delete, class: "btn btn-remove"
-        - else
-          .nothing-here-block Only project owner can remove a project
+              = link_to 'Remove project', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_project_message(@project) }
+      - else
+        .nothing-here-block Only project owner can remove a project
 
 .save-project-loader.hide
   .center
@@ -188,3 +179,6 @@
       %i.fa.fa-spinner.fa-spin
       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/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml
new file mode 100644
index 00000000000..30ba361c860
--- /dev/null
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -0,0 +1,22 @@
+#modal-confirm-danger.modal.hide{tabindex: -1}
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %h4 Confirmation required
+
+      .modal-body
+        %p.cred.lead.js-confirm-text
+
+        %p
+          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}
+          to proceed or close this modal to cancel
+
+        .form-group
+          = text_field_tag 'confirm_name_input', '', class: 'form-control js-confirm-danger-input'
+        .form-group
+          = submit_tag 'Confirm', class: "btn btn-danger js-confirm-danger-submit"
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index 524c4d5fa21..98ba5a47ee5 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -10,8 +10,12 @@ describe "Projects", feature: true  do
       visit edit_project_path(@project)
     end
 
-    it "should be correct path" do
-      expect { click_link "Remove project" }.to change {Project.count}.by(-1)
+    it "should be correct path", js: true do
+      expect {
+        click_link "Remove project"
+        fill_in 'confirm_name_input', with: @project.path
+        click_button 'Confirm'
+      }.to change {Project.count}.by(-1)
     end
   end
 end