From b7c9dcf7c993c6163c649bbd0e10cc6e5784d327 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Chibon <pingou@pingoured.fr>
Date: Wed, 19 Aug 2020 16:41:36 +0200
Subject: [PATCH] Rework the UI/UX around orphaning/adopting orphaned packages

Signed-off-by: Pierre-Yves Chibon <pingou@pingoured.fr>
---
 .../srcfpo/templates/repo_master_sidebar.html | 124 ++++++++++--------
 1 file changed, 69 insertions(+), 55 deletions(-)

diff --git a/pagure/themes/srcfpo/templates/repo_master_sidebar.html b/pagure/themes/srcfpo/templates/repo_master_sidebar.html
index 72429c0eb..adc1dbfe4 100644
--- a/pagure/themes/srcfpo/templates/repo_master_sidebar.html
+++ b/pagure/themes/srcfpo/templates/repo_master_sidebar.html
@@ -121,64 +121,36 @@
   <div class="col-xs-2 line-height-1"></div>
   <div id="orphan-section" class="pt-3">
       <div class="col-xs-2 line-height-1"></div>
-      <h6>Orphaned:</h6>
-      <form id="orphan_form">
-        {% if g.authenticated and repo.user.user == g.fas_user.username %}
-        <fieldset id="orphan_fieldset">
-        {% else %}
-        <fieldset id="orphan_fieldset" disabled>
-        {% endif %}
-          <div class="form-group">
-            <label for="reason_menu">Reason</label>
-            <select id="reason_menu" class="form-control">
-              {% for id, text in [('lack_of_time_option_button', 'Lack of time'),
-                                 ('do_not_use_it_option_button', 'Do not use it anymore'),
-                                 ('unmaintained_option_button', 'Unmaintained upstream'),
-                                 ('fails_to_build_option_button', 'Fails to build from source'),
-                                 ('not_fixed_option_button', 'Important bug not fixed'),
-                                 ('other_option_button', 'Other')] %}
-              {% if "{{ text }}" == repo.orphan_reason.reason %}
-              <option id="{{ id }}" selected>{{ text }}</option>
-              {% else %}
-              <option id="{{ id }}">{{ text }}</option>
-              {% endif %}
-              {% endfor %}
-            </select>
-          </div>
-          <label for="orphan_reason_info">Additional info</label>
-          {% if repo.orphan_reason %}
-          <input title="Additional info for orphaning reason"
-                  class="form-control" name="orphan_reason_info" id="orphan_reason_info" value="{{ repo.orphan_reason.reason_info }}"/>
-          {% else %}
-          <input title="Additional info for orphaning reason"
-                  class="form-control" name="orphan_reason_info" id="orphan_reason_info" value=""/>
-          {% endif %}
-        </fieldset>
+      {% if repo.user.user == "orphan" %}
+      <p>Orphaned for: {{ repo.orphan_reason.reason }}
+      {% if repo.orphan_reason.reason_info %}
+      -- {{ repo.orphan_reason.reason_info }}
+      {% endif %}
+      </p>
+
+      <a href="#" title="Adopt this orphaned package"
+         {% if g.authenticated %}
+         class="btn btn-sm btn-outline-primary"
+         {% else %}
+         class="btn btn-sm btn-outline-primary disabled"
+         {% endif %}
+         id="take_orphan_button">
+          <i id="take_orphan_icon" class="fa fa-fw fa-hand-paper-o"></i>
+          Take
+      </a>
+      {% else %}
+
+      {% if g.authenticated %}
         <div class="btn-group">
           <a href="#" title="Orphan this package"
-              {% if g.authenticated and repo.user.user == g.fas_user.username %}
               class="btn btn-sm btn-outline-primary"
-              {% else %}
-              class="btn btn-sm btn-outline-primary d-none"
-              {% endif %}
-              id="orphan_button">
-              <i id="orphan_icon" class="fa fa-fw fa-hand-paper-o"></i>
-              Orphan
-          </a>
-          <a href="#" title="Adopt this orphaned package"
-             {% if g.authenticated and repo.user.user == g.fas_user.username %}
-             class="btn btn-sm btn-outline-primary d-none"
-             {% elif g.authenticated %}
-             class="btn btn-sm btn-outline-primary"
-             {% else %}
-             class="btn btn-sm btn-outline-primary disabled"
-             {% endif %}
-             id="take_orphan_button">
-              <i id="take_orphan_icon" class="fa fa-fw fa-hand-paper-o"></i>
-              Take
+              data-toggle="modal" data-target="#modal_orphan">
+            <i id="orphan_icon-icon" class="fa fa-fw fa-hand-paper-o"></i>
+            Orphan
           </a>
         </div>
-      </form>
+      {% endif %}
+      {% endif %}
   </div>
 
   <div class="pt-3">
@@ -252,6 +224,46 @@
     </div>
   </div>
 
+  <div class="modal fade" id="modal_orphan" tabindex="-1"
+          role="dialog" aria-labelledby="Orphan this package" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Orphan package</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+            <span class="sr-only">Close</span>
+          </button>
+        </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="reason_menu">Reason</label>
+              <select id="reason_menu" class="form-control">
+              {% for id, text in [('lack_of_time_option_button', 'Lack of time'),
+                                 ('do_not_use_it_option_button', 'Do not use it anymore'),
+                                 ('unmaintained_option_button', 'Unmaintained upstream'),
+                                 ('fails_to_build_option_button', 'Fails to build from source'),
+                                 ('not_fixed_option_button', 'Important bug not fixed'),
+                                 ('other_option_button', 'Other')] %}
+
+                <option id="{{ id }}">{{ text }}</option>
+                {% endfor %}
+              </select>
+            </div>
+          <label for="orphan_reason_info">Additional info</label>
+          <input title="Additional info for orphaning reason"
+                  class="form-control" name="orphan_reason_info" id="orphan_reason_info" value=""/>
+        </fieldset>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-primary" type="submit" title="Orphan this package" id="orphan_button">
+               Update
+            </button>
+          </div>
+      </div>
+    </div>
+  </div>
+
   <script type="text/javascript" nonce="{{ g.nonce }}">
     window.addEventListener('load', function() {
       set_up_monitoring = function(status){
@@ -373,6 +385,7 @@
               </a>
             `);
             $("#orphan_fieldset").attr("disabled", false);
+            $('#orphan-section').html('');
             $("#orphan_button").attr("class", "btn btn-sm btn-outline-primary");
             $("#take_orphan_button").attr("class", "btn btn-sm btn-outline-primary d-none");
             $("#take_orphan_button").attr("disabled", false);
@@ -424,8 +437,9 @@
           },
           success: function(res) {
             $("#point_of_contact_div").html("Package is currently unmaintained");
-            $("#take_orphan_button").attr("class", "btn btn-sm btn-outline-primary");
-            $("#orphan_button").attr("class", "btn btn-sm btn-outline-primary d-none");
+            $('#modal_orphan').modal('hide');
+            $('#orphan-section').html('');
+            $("#orphan_fieldset").attr("disabled", false);
             $("#orphan_button").attr("disabled", false);
           },
           error: function(res) {
-- 
2.26.2