From fb188c4c58566c686013b1535e078526b40663a6 Mon Sep 17 00:00:00 2001
From: Benjamin Balder Bach <benjamin@readthedocs.org>
Date: Thu, 12 Jan 2023 22:58:45 +0100
Subject: [PATCH] UI updates to Connected Accounts (#9891)

Add reference to our documentation from Connected Accounts and add a text about how to fully disconnect an account.
---
 .../static-src/projects/css/admin.less        | 11 +++++
 .../projects/static/projects/css/admin.css    |  3 ++
 .../templates/socialaccount/connections.html  | 47 ++++++++++++++++---
 3 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/readthedocs/projects/static-src/projects/css/admin.less b/readthedocs/projects/static-src/projects/css/admin.less
index 94cdd56b340..bdbe0d0747d 100644
--- a/readthedocs/projects/static-src/projects/css/admin.less
+++ b/readthedocs/projects/static-src/projects/css/admin.less
@@ -38,3 +38,14 @@
         content: "\f063";
     }
 }
+
+.connected-services {
+    ul.socialaccount_providers {
+        li {
+            button.socialaccount-provider {
+                float: none;
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/readthedocs/projects/static/projects/css/admin.css b/readthedocs/projects/static/projects/css/admin.css
index bf33d1ffdf9..ecae5385c61 100644
--- a/readthedocs/projects/static/projects/css/admin.css
+++ b/readthedocs/projects/static/projects/css/admin.css
@@ -29,3 +29,6 @@
 #content .module-list.automation-rules .automation-rule button.automation-rule-down:before {
   content: "\f063";
 }
+.connected-services ul.socialaccount_providers li button.socialaccount-provider {
+  float: none;
+}
diff --git a/readthedocs/templates/socialaccount/connections.html b/readthedocs/templates/socialaccount/connections.html
index 987174f83f0..a51994eeb6d 100644
--- a/readthedocs/templates/socialaccount/connections.html
+++ b/readthedocs/templates/socialaccount/connections.html
@@ -1,9 +1,14 @@
 {% extends "profiles/base_profile_edit.html" %}
 
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{% trans "Connected Services" %}{% endblock %}
 
+{% block extra_links %}
+  {{ block.super }}
+  <link rel="stylesheet" type="text/css" href="{% static "projects/css/admin.css" %}" />
+{% endblock %}
+
 {% block edit_content_header %} {% trans "Connected Services" %} {% endblock %}
 
 {% block profile-admin-social-accounts %}active{% endblock %}
@@ -12,6 +17,25 @@
 
   <div class="module connected-services">
     <div class="module-wrapper">
+
+      <p class="help_text">
+        {% blocktrans trimmed %}
+          On this page,
+          you can manage the integration with your Git provider(s) that enables automatic import and configuration of your repositories.
+          <a href="https://docs.readthedocs.io/en/stable/connected-accounts.html" target="_blank">Read our documentation page about connecting Git providers.</a>
+        {% endblocktrans %}
+      </p>
+
+      <ul class="socialaccount_providers">
+        {% include "socialaccount/snippets/provider_list.html" with process="connect" next="" %}
+      </ul>
+
+    </div>
+  </div>
+  <div class="module connected-services">
+    <div class="module-wrapper">
+      <h3>{% trans "Active connections" %}</h3>
+
       <p>
         {% blocktrans trimmed %}
           The following services are currently connected to your account:
@@ -74,13 +98,22 @@
         {% endif %}
 
       </div>
-    </div>
-  </div>
 
-  <ul class="socialaccount_providers">
-    {% include "socialaccount/snippets/provider_list.html" with process="connect" next="" %}
-  </ul>
+      {% if form.accounts %}
+        <p class="help_text">
+          {% blocktrans trimmed %}
+            Note: If you press the <strong>Disconnect</strong> button to disconnect a service,
+            you should also visit your Git Provider in order to
+            delete the OAuth connection of Read the Docs.
+            On GitHub, this is located in <code>Settings > Applications > Authorized OAuth Apps</code>.
+          {% endblocktrans %}
+        </p>
+      {% endif %}
+
+    {% include "socialaccount/snippets/login_extra.html" %}
 
-  {% include "socialaccount/snippets/login_extra.html" %}
+    </div>
+
+  </div>
 
 {% endblock %}