From b27f8fcf88b56dc3a9f29cbaaca69fa1dd716d07 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: May 31 2016 06:30:40 +0000
Subject: Update parts of the repo settings to new UI


This updates a few leftover elements that were missed
when implementing the new UI.

The pages that let you add groups and users to a repo
are now styled up with fedora-bootstrap, and use the
same user search UI as adding a user to a ticket.

The buttons to accept changes to Hooks settings are now
styled up in the same style as all the other buttons.

Fixes #908

---

diff --git a/pagure/templates/add_group_project.html b/pagure/templates/add_group_project.html
index dbafcee..c42bbba 100644
--- a/pagure/templates/add_group_project.html
+++ b/pagure/templates/add_group_project.html
@@ -2,48 +2,69 @@
 {% from "_formhelper.html" import render_field_in_row %}
 
 {% set tag = "groups" %}
-{% block title %}Add user - {{ repo.name }}{% endblock %}
+
+{% block header %}
+<link href="{{ url_for('static', filename='selectize.bootstrap3.css') }}"
+  rel="stylesheet" />
+{% endblock %}
+
+{% block title %}Add group - {{ repo.name }}{% endblock %}
 
 
 {% block repo %}
 
-<h2>Add group</h2>
+<div class="row col-sm-6 col-sm-offset-3">
+  <div class="card">
+    <div class="card-header">
+      <strong>Add group to the {{repo.name}} project</strong>
+    </div>
+    <div class="card-block">
+      <form action="{{ url_for('.add_group_project',
+                       username=username, repo=repo.name) }}" method="post">
 
-<section class="new_group">
-    <form action="{{ url_for('.add_group_project',
-                     username=username, repo=repo.name) }}" method="post">
+      <fieldset class="form-group">
+        <label for="group"><strong>Username</strong></label>
+        <input class="form-control" name="group" id="group"
+          placeholder="Start typing to search groups"
+          value="" />
+      </fieldset>
 
-    <table>
-      {{ render_field_in_row(form.group) }}
-    </table>
-    <p class="buttons indent">
-      <input type="submit" class="submit positive button" value="Add">
-      <input type="button" value="Cancel" class="button" onclick="history.back();">
-      {{ form.csrf_token }}
-    </p>
-  </form>
-</section>
+      <p class="buttons indent">
+        <input type="button" value="Cancel" class="btn btn-secondary" onclick="history.back();">
+        <input type="submit" class="btn btn-primary" value="Add">
+        {{ form.csrf_token }}
+      </p>
+    </form>
+    </div>
+  </div>
+</div>
 
 {% endblock %}
 
 {% block jscripts %}
 {{ super() }}
+<script type="text/javascript"
+        src="{{ url_for('static', filename='selectize.min.js') }}"></script>
 <script type="text/javascript">
-  $(function() {
-    $('#group').autocomplete({
-      source: function( request, response ) {
+$( document ).ready(function() {
+  $('#group').selectize({
+      valueField: 'group',
+      labelField: 'group',
+      searchField: 'group',
+      maxItems: 1,
+      create: false,
+      load: function(query, callback) {
+        if (!query.length) return callback();
         $.getJSON(
           "{{ url_for('api_ns.api_groups') }}", {
-            pattern: request.term
+            pattern: query.term
           },
           function( data ) {
-            response( data.groups );
+            callback( data.groups.map(function(x) { return { group: x }; }) );
           }
         );
-      },
-      minLength: 2,
-      delay: 200,
-    });
+      }
   });
+});
 </script>
 {% endblock %}
diff --git a/pagure/templates/add_user.html b/pagure/templates/add_user.html
index b521235..da2bb4e 100644
--- a/pagure/templates/add_user.html
+++ b/pagure/templates/add_user.html
@@ -2,47 +2,67 @@
 {% from "_formhelper.html" import render_field_in_row %}
 
 {% set tag = "home" %}
+
+{% block header %}
+<link href="{{ url_for('static', filename='selectize.bootstrap3.css') }}"
+  rel="stylesheet" />
+{% endblock %}
+
 {% block title %}Add user - {{ repo.name }}{% endblock %}
 
 {% block repo %}
+<div class="row col-sm-6 col-sm-offset-3">
+  <div class="card">
+    <div class="card-header">
+      <strong>Add user to the {{repo.name}} project</strong>
+    </div>
+    <div class="card-block">
+      <form action="{{ url_for('.add_user',
+                       username=username, repo=repo.name) }}" method="post">
 
-<h2>Add user</h2>
-
-<section class="new_user">
-    <form action="{{ url_for('.add_user',
-                     username=username, repo=repo.name) }}" method="post">
+      <fieldset class="form-group">
+        <label for="user"><strong>Username</strong></label>
+        <input class="form-control" name="user" id="user"
+          placeholder="Start typing to search users"
+          value="" />
+      </fieldset>
 
-    <table>
-      {{ render_field_in_row(form.user) }}
-    </table>
-    <p class="buttons indent">
-      <input type="submit" class="submit positive button" value="Add">
-      <input type="button" value="Cancel" class="button" onclick="history.back();">
-      {{ form.csrf_token }}
-    </p>
-  </form>
-</section>
+      <p class="buttons indent">
+        <input type="button" value="Cancel" class="btn btn-secondary" onclick="history.back();">
+        <input type="submit" class="btn btn-primary" value="Add">
+        {{ form.csrf_token }}
+      </p>
+    </form>
+    </div>
+  </div>
+</div>
 
 {% endblock %}
 
 {% block jscripts %}
 {{ super() }}
+<script type="text/javascript"
+        src="{{ url_for('static', filename='selectize.min.js') }}"></script>
 <script type="text/javascript">
-  $(function() {
-    $('#user').autocomplete({
-      source: function( request, response ) {
+$( document ).ready(function() {
+  $('#user').selectize({
+      valueField: 'user',
+      labelField: 'user',
+      searchField: 'user',
+      maxItems: 1,
+      create: false,
+      load: function(query, callback) {
+        if (!query.length) return callback();
         $.getJSON(
           "{{ url_for('api_ns.api_users') }}", {
-            pattern: request.term
+            pattern: query.term
           },
           function( data ) {
-            response( data.users );
+            callback( data.users.map(function(x) { return { user: x }; }) );
           }
         );
-      },
-      minLength: 2,
-      delay: 200,
-    });
+      }
   });
+});
 </script>
 {% endblock %}
diff --git a/pagure/templates/plugin.html b/pagure/templates/plugin.html
index 0017478..0d6d3ff 100644
--- a/pagure/templates/plugin.html
+++ b/pagure/templates/plugin.html
@@ -23,8 +23,8 @@
     {% endfor %}
   </table>
   <p class="buttons indent">
-      <input type="submit" class="submit positive button" value="Update">
-      <input type="button" value="Cancel" class="button" onclick="history.back();">
+      <input type="button" value="Cancel" class="btn btn-secondary" onclick="history.back();">
+      <input type="submit" class="btn btn-primary" value="Update">
       {{ form.csrf_token }}
     </p>
   </form>
diff --git a/tests/test_pagure_flask_ui_repo.py b/tests/test_pagure_flask_ui_repo.py
index 683137e..b974ac9 100644
--- a/tests/test_pagure_flask_ui_repo.py
+++ b/tests/test_pagure_flask_ui_repo.py
@@ -98,7 +98,7 @@ class PagureFlaskRepotests(tests.Modeltests):
         with tests.user_set(pagure.APP, user):
             output = self.app.get('/test/adduser')
             self.assertEqual(output.status_code, 200)
-            self.assertIn('<h2>Add user</h2>', output.data)
+            self.assertIn('<strong>Add user to the', output.data)
 
             csrf_token = output.data.split(
                 'name="csrf_token" type="hidden" value="')[1].split('">')[0]
@@ -109,12 +109,12 @@ class PagureFlaskRepotests(tests.Modeltests):
 
             output = self.app.post('/test/adduser', data=data)
             self.assertEqual(output.status_code, 200)
-            self.assertTrue('<h2>Add user</h2>' in output.data)
+            self.assertTrue('<strong>Add user to the' in output.data)
 
             data['csrf_token'] = csrf_token
             output = self.app.post('/test/adduser', data=data)
             self.assertEqual(output.status_code, 200)
-            self.assertIn('<h2>Add user</h2>', output.data)
+            self.assertIn('<strong>Add user to the', output.data)
             self.assertIn(
                 '</button>\n                      No user &#34;ralph&#34; '
                 'found', output.data)
@@ -181,7 +181,7 @@ class PagureFlaskRepotests(tests.Modeltests):
         with tests.user_set(pagure.APP, user):
             output = self.app.get('/test/addgroup')
             self.assertEqual(output.status_code, 200)
-            self.assertTrue('<h2>Add group</h2>' in output.data)
+            self.assertTrue('<strong>Add group to the' in output.data)
 
             csrf_token = output.data.split(
                 'name="csrf_token" type="hidden" value="')[1].split('">')[0]
@@ -192,12 +192,12 @@ class PagureFlaskRepotests(tests.Modeltests):
 
             output = self.app.post('/test/addgroup', data=data)
             self.assertEqual(output.status_code, 200)
-            self.assertTrue('<h2>Add group</h2>' in output.data)
+            self.assertTrue('<strong>Add group to the' in output.data)
 
             data['csrf_token'] = csrf_token
             output = self.app.post('/test/addgroup', data=data)
             self.assertEqual(output.status_code, 200)
-            self.assertTrue('<h2>Add group</h2>' in output.data)
+            self.assertTrue('<strong>Add group to the' in output.data)
             self.assertIn(
                 '</button>\n                      No group ralph found.',
                 output.data)