Show connect buttons for installed apps only (#3394)

* Show connect buttons for installed apps only

Instead of hardcode the button/form for each of the services, we share
the ``provider_list.html`` file used in the "Connected Services" tab
from "Account Settings".

This template shows only buttons for the Services installed in the
database.

* Fix lint

* Add missing CSS class used at .com

* Use proper GitLab icon from FontAwesome

* Force tuple but without breaking prospector

* Do not loose the next attribute

* Fix styling

Author: humitos

media/css/core.css

@@ -690,19 +690,16 @@ div.project-import-remote button.remote-sync:before {
     content: "\f021";
 }
 
-div.project-import-remote form.import-connect-github button:before,
 a.socialaccount-provider.github:before {
     font-family: FontAwesome;
     content: "\f09b";
 }
 
-div.project-import-remote form.import-connect-gitlab button:before,
 a.socialaccount-provider.gitlab:before {
     font-family: FontAwesome;
-    content: "\f1d3";
+    content: "\f296";
 }
 
-div.project-import-remote form.import-connect-bitbucket button:before,
 a.socialaccount-provider.bitbucket:before,
 a.socialaccount-provider.bitbucket_oauth2:before {
     font-family: FontAwesome;

readthedocs/core/static/core/font/Inconsolata-Bold.ttf

@@ -60,15 +60,25 @@ div.project-import-remote {
         }
     }
 
-    form.import-connect {
+    ul.socialaccount_providers {
         overflow: auto;
-        display: inline;
-
-        button {
-            display: inline;
-            margin-bottom: .5em;
-            font-size: 1em;
-            font-weight: normal;
+        display: block;
+        list-style: none;
+
+        li {
+            margin-top: 0.5em;
+            display: block;
+            overflow: auto;
+            text-align: center;
+
+            a.socialaccount-provider {
+                float: none;
+                display: inline-block;
+                margin-bottom: 0.5em;
+                margin-top: 0.5em;
+                font-size: 1em;
+                font-weight: normal;
+            }
         }
     }
 }

readthedocs/core/static/core/font/Inconsolata-Regular.ttf

@@ -49,13 +49,22 @@ div.project-import-remote li.remote-repo ul.remote-repo-menu {
   top: 10px;
   right: 10px;
 }
-div.project-import-remote form.import-connect {
+div.project-import-remote ul.socialaccount_providers {
   overflow: auto;
-  display: inline;
+  display: block;
+  list-style: none;
+}
+div.project-import-remote ul.socialaccount_providers li {
+  margin-top: 0.5em;
+  display: block;
+  overflow: auto;
+  text-align: center;
 }
-div.project-import-remote form.import-connect button {
-  display: inline;
-  margin-bottom: .5em;
+div.project-import-remote ul.socialaccount_providers li a.socialaccount-provider {
+  float: none;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
   font-size: 1em;
   font-weight: normal;
 }

readthedocs/projects/static-src/projects/css/import.less

@@ -43,7 +43,7 @@ def get_version_compare_data(project, base_version=None):
     }
     if highest_version_obj:
         ret_val['url'] = highest_version_obj.get_absolute_url()
-        ret_val['slug'] = highest_version_obj.slug,
+        ret_val['slug'] = (highest_version_obj.slug,)
     if base_version and base_version.slug != LATEST:
         try:
             base_version_comparable = parse_version_failsafe(

readthedocs/projects/static/projects/css/import.css

@@ -93,41 +93,12 @@ <h1>{% trans "Import a Repository" %}</h1>
                       {% endblocktrans %}
                     </p>
 
-                    <div class="project-import-providers">
-                      <form
-                          method="get"
-                          action="{% provider_login_url "github" %}"
-                          class="import-connect import-connect-github">
-                        <button>
-                          {% trans "Connect to GitHub" %}
-                        </button>
-                        <input type="hidden" name="process" value="connect">
-                        <input type="hidden" name="next" value="/dashboard/import/">
-                      </form>
-
-                      <form
-                          method="get"
-                          action="{% provider_login_url "gitlab" %}"
-                          class="import-connect import-connect-gitlab">
-                        <button>
-                          {% trans "Connect to GitLab" %}
-                        </button>
-                        <input type="hidden" name="process" value="connect">
-                        <input type="hidden" name="next" value="/dashboard/import/">
-                      </form>
 
-                      <form
-                          method="get"
-                          action="{% provider_login_url "bitbucket_oauth2" %}"
-                          class="import-connect import-connect-bitbucket">
-                        <button>
-                          {% trans "Connect to Bitbucket" %}
-                        </button>
-                        <input type="hidden" name="process" value="connect">
-                        <input type="hidden" name="next" value="/dashboard/import/">
-                      </form>
+                    <div class="project-import-providers">
+                      <ul class="socialaccount_providers">
+                        {% include "socialaccount/snippets/provider_list.html" with process="connect" next="/dashboard/import/" %}
+                      </ul>
                     </div>
-
                   {% endif %}
                 </li>
               </ul>

readthedocs/restapi/views/footer_views.py

@@ -73,7 +73,7 @@
   </div>
 
   <ul class="socialaccount_providers">
-    {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
+    {% include "socialaccount/snippets/provider_list.html" with process="connect" next="" %}
   </ul>
 
   {% include "socialaccount/snippets/login_extra.html" %}

readthedocs/templates/projects/project_import.html

@@ -8,8 +8,8 @@
     {% for brand in provider.get_brands %}
       <li>
         <a title="{{ brand.name }}"
-           class="socialaccount-provider {{ provider.id }} {{ brand.id }}"
-           href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
+           class="socialaccount-provider {{ provider.id }} {{ brand.id }} button"
+           href="{% provider_login_url provider.id openid=brand.openid_url process=process next=next %}"
            >
            {% blocktrans with brand_name=brand.name %}
              Connect to {{ brand_name }}
@@ -22,7 +22,7 @@
     <li>
       <a title="{{ provider.name }}"
          class="socialaccount-provider {{ provider.id }} button"
-         href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}"
+         href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params next=next %}"
          >
          {% blocktrans with provider_name=provider.name %}
            Connect to {{ provider_name }}