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

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: ->

app/assets/javascripts/confirm_danger_modal.js.coffee

+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

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));
 

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;
-    }
   }
 }

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;
+  }
+}

app/assets/stylesheets/main/variables.scss

@@ -3,6 +3,7 @@
  */
 $style_color: #474D57;
 $hover: #FFECDB;
+$box_bg: #F9F9F9;
 
 /*
  * Link colors

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));
 

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

app/views/projects/edit.html.haml

@@ -86,27 +86,13 @@
 
 
 
-    .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
+    .danger-settings
       - if can? current_user, :archive_project, @project
-          .panel.panel-default.panel.panel-warning
-            .panel-heading
         - if @project.archived?
+          .panel.panel-success
+            .panel-heading
               Unarchive project
-              - else
-                Archive project
             .panel-body
-              - if @project.archived?
               %p
                 Unarchiving the project will mark its repository as active.
                 %br
@@ -115,8 +101,12 @@
                 %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"
+                  method: :post, class: "btn btn-success"
         - else
+          .panel.panel-warning
+            .panel-heading
+              Archive project
+            .panel-body
               %p
                 Archiving the project will mark its repository as read-only.
                 %br
@@ -165,7 +155,7 @@
                     %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"
+                = 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
 
@@ -173,12 +163,13 @@
         .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"
+              = 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
 
@@ -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

app/views/shared/_confirm_modal.html.haml

+#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"

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