Move package edit action close to the target

Following the conventions used for editing the details of a kiwi image, we're
moving the "Edit Package" button close to the edited details.

src/api/app/assets/stylesheets/webui/application.scss

@@ -66,6 +66,7 @@
 @import 'notification_toolbar';
 @import 'sidebar-collapsible';
 @import 'user_profile_redesign/user_profile';
+@import 'in_place_editing';
 
 html {
     overflow-y: scroll !important;

src/api/app/assets/stylesheets/webui/in_place_editing.css

@@ -0,0 +1,3 @@
+.in-place-editing .hidden {
+    display: none;
+}

src/api/app/views/webui/package/_basic_info.html.haml

@@ -1,4 +1,7 @@
-.basic-info.in-place-editing.mb-3
+.editing-form.hidden
+  = render partial: 'webui/package/edit', locals: { package: package, project: package.project }
+
+.basic-info.mb-3
   %h3#package-title
     = package.title.presence || package.name
   - if package.url.present?
@@ -8,3 +11,20 @@
       %i No description set
     - else
       = render partial: 'webui/shared/collapsible_text', locals: { text: package.description }
+
+  - if policy(package).update?
+    = link_to('javascript:void(0);', id: 'toggle-in-place-editing', class: 'nav-link', title: 'Edit') do
+      %i.fas.fa-edit
+      %span.nav-item-name Edit
+
+:javascript
+  $('#toggle-in-place-editing').on('click', function () {
+    $('.in-place-editing .basic-info').toggle();
+    $('.in-place-editing .editing-form').toggle();
+    return false;
+  });
+  $('#cancel-in-place-editing').on('click', function () {
+    $('.in-place-editing .basic-info').toggle();
+    $('.in-place-editing .editing-form').toggle();
+    return false;
+  });

src/api/app/views/webui/package/_edit.html.haml

@@ -13,5 +13,5 @@
     = form.label(:description, 'Description:')
     = form.text_area(:description, rows: 8, class: 'form-control')
   .form-group.text-right
-    = link_to 'Cancel', package_show_path(project, package), class: 'cancel btn btn-outline-danger px-4', remote: true
+    = button_tag('Cancel', id: 'cancel-in-place-editing', class: 'cancel btn btn-outline-danger px-4')
     = submit_tag('Update', class: 'btn btn-primary px-4')

src/api/app/views/webui/package/_show_actions.html.haml

@@ -9,7 +9,6 @@
       = render partial: 'webui/package/show_actions/submit_package', locals: { package: package, project: project,
                                                                                              revision: revision }
     - if User.possibly_nobody.can_modify?(package)
-      = render partial: 'webui/package/actions/edit_package', locals: { project: project, package: package }
       = render partial: 'webui/package/show_actions/delete_package'
 
       - if package.kiwi_image? && policy(package).update?

src/api/app/views/webui/package/show.html.haml

@@ -21,7 +21,8 @@
   .card-body
     .row
       .col-md-8
-        = render partial: 'basic_info', locals: { package: @package }
+        .in-place-editing
+          = render partial: 'basic_info', locals: { package: @package, project: @project }
       .col-md-4
         = render partial: 'side_links', locals: { devel_package: @package.develpackage,
                                                   failures: @failures,

src/api/app/views/webui/package/update.js.haml

@@ -9,7 +9,8 @@ resetFormValidation();
       opacity: 0.25
     }, 400, function() {
       scrollToInPlace();
-      $('.in-place-editing').html("#{escape_javascript(render(partial: 'webui/package/basic_info', locals: { package: @package }))}");
+      $('.in-place-editing').html("#{escape_javascript(render(partial: 'webui/package/basic_info',
+                                                              locals: { package: @package, project: @project }))}");
       setCollapsible();
       $('.in-place-editing').animate({ opacity: 1 }, 400, function() {
         $('#flash').html("#{escape_javascript(render(layout: false, partial: 'layouts/webui/flash', object: flash))}");