From 8e5e77cc52fe4200881d16c319d65b560439175a Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Sep 07 2018 02:27:11 +0000
Subject: fix styling of input-group-addons


WE previously used bootstrap input-group-addons to
style up a few elements, specifically the git and ssh urls
in the clone dropdown, and the listing of api keys in the
settings for a project and a user.

Since we were using pre-release versions of bootstrap 4 earlier,
bootstrap changed slightly how these are marked up in newer versions.

This commit changes them so they now are visually the same as
with older versions.

Fixes #3616

---

diff --git a/pagure/templates/repo_master.html b/pagure/templates/repo_master.html
index 3b5e7a9..7b1bb2a 100644
--- a/pagure/templates/repo_master.html
+++ b/pagure/templates/repo_master.html
@@ -11,7 +11,7 @@
   {% else %}
     <div class="form-group">
       <div class="input-group input-group-sm">
-        <div class="input-group-addon">SSH</div>
+        <div class="input-group-prepend"><span class="input-group-text">SSH</span></div>
         <input class="form-control bg-white" type="text" value="{{
           end_url_ssh | git_url_ssh }}{{ repo.fullname }}.git" readonly>
       </div>
@@ -176,7 +176,7 @@
 
               <div class="form-group">
                 <div class="input-group input-group-sm">
-                  <div class="input-group-addon">GIT</div>
+                  <div class="input-group-prepend"><span class="input-group-text">GIT</span></div>
                   <input class="form-control bg-white" type="text" value="{{
                     config.get('GIT_URL_GIT') }}{{ repo.fullname }}.git" readonly>
                 </div>
@@ -191,7 +191,7 @@
                 {% endif %}
                 <div class="form-group">
                   <div class="input-group input-group-sm">
-                    <div class="input-group-addon">GIT</div>
+                    <div class="input-group-prepend"><span class="input-group-text">GIT</span></div>
                     <input class="form-control bg-white" type="text" value="{{
                       config.get('GIT_URL_GIT') }}docs/{{ repo.fullname }}.git" readonly>
                   </div>
diff --git a/pagure/templates/settings.html b/pagure/templates/settings.html
index d57c0b4..dcbd9bd 100644
--- a/pagure/templates/settings.html
+++ b/pagure/templates/settings.html
@@ -178,7 +178,7 @@
                       </p>
                       <div class="form-group">
                         <div class="input-group">
-                          <div class="input-group-addon"><span class="fa fa-key"></span></div>
+                          <div class="input-group-prepend"><span class="input-group-text"><span class="fa fa-key"></span></span></div>
                           <input class="form-control" type="text" value="{{ repo.hook_token }}" readonly>
                         </div>
                       </div>
@@ -239,15 +239,19 @@
                     {% if token.user.username == g.fas_user.username %}
                         <div class="form-group">
                           <div class="input-group">
-                            <div class="input-group-addon">
-                              <span class="fa fa-key"></span>
-                              <strong> {{ token.description or '' }}</strong>
+                            <div class="input-group-prepend">
+                              <span class="input-group-text">
+                                <span class="fa fa-key"></span>
+                                <strong> {{ token.description or '' }}</strong>
+                              </span>
                             </div>
-                            <div class="input-group-addon">
-                              <a href="#"
-                                data-toggle="modal" data-target="#acls{{ token.id }}">
-                                {{token.acls_list_pretty|length}} ACLs
-                              </a>
+                            <div class="input-group-prepend">
+                              <span class="input-group-text">
+                                <a href="#"
+                                  data-toggle="modal" data-target="#acls{{ token.id }}">
+                                  {{token.acls_list_pretty|length}} ACLs
+                                </a>
+                              </span>
                               <div class="modal fade" id="acls{{ token.id }}" tabindex="-1"
                                     role="dialog" aria-labelledby="ACLs" aria-hidden="true">
                                 <div class="modal-dialog" role="document">
@@ -274,12 +278,16 @@
 
                             <input class="form-control bg-white" style="font-family:monospace" type="text" value="{{ token.id }}" readonly>
                             {% if token.expired %}
-                              <span class="input-group-addon text-danger">
-                                <small class="font-weight-bold">Expired on {{ token.expiration.date() }}</small>
+                              <span class="input-group-prepend">
+                                <span class="input-group-text text-danger">
+                                  <small class="font-weight-bold">Expired on {{ token.expiration.date() }}</small>
+                                </span>
                               </span>
                             {% else %}
-                              <span class="input-group-addon text-success">
-                                <small class="font-weight-bold">Active until {{ token.expiration.date() }}</small>
+                              <span class="input-group-prepend">
+                                <span class="input-group-text text-success">
+                                  <small class="font-weight-bold">Active until {{ token.expiration.date() }}</small>
+                                </span>
                               </span>
                             {% endif %}
                             {% if not token.expired %}
@@ -534,12 +542,12 @@
                     {% for deploykey in repo.deploykeys %}
                       <div class="form-group">
                         <div class="input-group">
-                          <div class="input-group-addon">
-                            <span class="fa fa-key"></span>
+                          <div class="input-group-prepend">
+                            <span class="input-group-text"><span class="fa fa-key"></span></span>
                           </div>
                           {% if deploykey.pushaccess %}
-                          <div class="input-group-addon">
-                              Push Access
+                          <div class="input-group-prepend">
+                            <span class="input-group-text">Push Access</span>
                           </div>
                           {% endif %}
                           <input class="form-control bg-white" style="font-family:monospace" readonly
diff --git a/pagure/templates/user_settings.html b/pagure/templates/user_settings.html
index 023ad3f..734bbf1 100644
--- a/pagure/templates/user_settings.html
+++ b/pagure/templates/user_settings.html
@@ -155,11 +155,14 @@
                     {% if not token.project %}
                         <div class="form-group">
                           <div class="input-group">
-                            <div class="input-group-addon font-weight-bold">
-                              <span class="fa fa-key fa-fw"></span> 
-                              {{ token.description or '' }}
+                            <div class="input-group-prepend font-weight-bold">
+                              <span class="input-group-text">
+                                <span class="fa fa-key fa-fw"></span>
+                                {{ token.description or '' }}
+                              </span>
                             </div>
-                            <div class="input-group-addon">
+                            <div class="input-group-prepend">
+                              <span class="input-group-text">
                               {% for acl in token.acls_list %}
                                 {% if acl == 'create_project' %} 
                                   <span title="This key has ACLs to create new projects"><i class="fa fa-fw fa-plus text-muted"></i></span>
@@ -169,15 +172,16 @@
                                 <span title="This key has ACLs to modify projects"><i class="fa fa-fw fa-pencil-square-o text-muted"></i></span>
                                 {% endif %}
                               {% endfor %}
+                              </span>
                             </div>
                             <input class="form-control bg-white" style="font-family:monospace" type="text" value="{{ token.id }}" readonly>
                             {% if token.expired %}
-                              <span class="input-group-addon text-danger">
-                                <small class="font-weight-bold">Expired on {{ token.expiration.date() }}</small>
+                              <span class="input-group-prepend">
+                                <small class="font-weight-bold text-danger input-group-text">Expired on {{ token.expiration.date() }}</small>
                               </span>
                             {% else %}
-                              <span class="input-group-addon text-success">
-                                <small class="font-weight-bold">Active until {{ token.expiration.date() }}</small>
+                              <span class="input-group-prepend">
+                                <small class="font-weight-bold text-success input-group-text">Active until {{ token.expiration.date() }}</small>
                               </span>
                             {% endif %}
                             {% if not token.expired %}
diff --git a/tests/test_pagure_flask_ui_repo.py b/tests/test_pagure_flask_ui_repo.py
index e241b63..022a651 100644
--- a/tests/test_pagure_flask_ui_repo.py
+++ b/tests/test_pagure_flask_ui_repo.py
@@ -5112,7 +5112,7 @@ index 0000000..fb7093d
             self.assertIn('<h5 class="pl-2 font-weight-bold text-muted">Project Settings</h5>', output_text)
             self.assertIn('<strong> Test token</strong>', output_text)
             self.assertIn(
-                '<span class="input-group-addon text-success">\n                                '
+                '<span class="input-group-text text-success">\n                                  '
                 '<small class="font-weight-bold">Active until',
                 output_text)