Show the external services each provider reaches in the registry (#72940)

registry/.eleventy.js

@@ -131,6 +131,11 @@ module.exports = function(eleventyConfig) {
     return collectExternalServices(provider);
   });
 
+  // Connection types that declare at least one external service, unchanged.
+  eleventyConfig.addFilter("getExternalServiceConnections", (conns) =>
+    (conns || []).filter((conn) => conn.external_services && conn.external_services.length > 0),
+  );
+
   // Groups a provider's uri_schemes by the Airflow feature that routes them to
   // the provider. Listing only registered schemes per feature avoids a matrix
   // whose empty cells read as "unsupported" when the feature just doesn't apply

registry/src/css/main.css

@@ -3945,13 +3945,15 @@ main {
   background: rgb(from var(--color-purple-500) r g b / 0.1);
 }
 
-/* Connection Builder Card */
-.provider-detail-page .connections-card {
+/* Connections and External Services cards share padding and heading style. */
+.provider-detail-page .connections-card,
+.provider-detail-page .external-services-card {
   padding: var(--space-5);
   margin-bottom: var(--space-6);
 }
 
-.provider-detail-page .connections-card > h3 {
+.provider-detail-page .connections-card > h3,
+.provider-detail-page .external-services-card > h3 {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
@@ -3961,12 +3963,19 @@ main {
   gap: var(--space-2);
 }
 
-.provider-detail-page .connections-card > h3 svg {
+.provider-detail-page .connections-card > h3 svg,
+.provider-detail-page .external-services-card > h3 svg {
   width: 1rem;
   height: 1rem;
   color: var(--color-green-400);
 }
 
+.provider-detail-page .external-services-card > p {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-3);
+}
+
 .provider-detail-page .connections-card .no-connections {
   font-size: var(--text-sm);
   color: var(--text-secondary);
@@ -4004,14 +4013,13 @@ main {
   border-color: var(--color-green-400);
 }
 
-/* Per-connection external services matrix */
-.provider-detail-page .connections-card .conn-external-services-table {
+/* External services table (one row per connection type). */
+.provider-detail-page .external-services-card .external-services-table {
   width: 100%;
-  margin-top: var(--space-4);
   border-collapse: collapse;
 }
 
-.provider-detail-page .connections-card .conn-external-services-header th {
+.provider-detail-page .external-services-card .external-services-header th {
   padding: var(--space-2) var(--space-3);
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
@@ -4020,20 +4028,25 @@ main {
   background: var(--bg-tertiary);
 }
 
-.provider-detail-page .connections-card .conn-external-services-row {
+.provider-detail-page .external-services-card .external-services-row {
   border-top: 1px solid var(--border-primary);
 }
 
-.provider-detail-page .connections-card .conn-external-services-row td {
+.provider-detail-page .external-services-card .external-services-row td {
   padding: var(--space-2) var(--space-3);
   vertical-align: top;
 }
 
-.provider-detail-page .connections-card .conn-external-services-row td:first-child {
+.provider-detail-page .external-services-card .external-services-name {
   white-space: nowrap;
 }
 
-.provider-detail-page .connections-card .conn-external-services-list {
+.provider-detail-page .external-services-card .external-services-name code {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+.provider-detail-page .external-services-card .external-services-list {
   color: var(--text-secondary);
   font-size: var(--text-sm);
 }

registry/src/provider-version.njk

@@ -37,6 +37,8 @@ eleventyComputed:
   {% set sourceUrl = pv.provider.source_url %}
 {% endif %}
 
+{% set externalServiceConns = conns | getExternalServiceConnections %}
+
 {% set totalModules = 0 %}
 {% for t in types %}{% set totalModules = totalModules + (moduleCounts[t.id] or 0) %}{% endfor %}
 
@@ -257,30 +259,6 @@ eleventyComputed:
         </button>
         {% endfor %}
       </div>
-      {% set hasExternalServices = false %}
-      {% for conn in conns %}
-        {% if conn.external_services and conn.external_services.length > 0 %}{% set hasExternalServices = true %}{% endif %}
-      {% endfor %}
-      {% if hasExternalServices %}
-      <table class="conn-external-services-table">
-        <thead>
-          <tr class="conn-external-services-header">
-            <th>Connection type</th>
-            <th>External services (examples)</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for conn in conns %}
-          {% if conn.external_services and conn.external_services.length > 0 %}
-          <tr class="conn-external-services-row">
-            <td><code>{{ conn.conn_type or conn.connection_type }}</code></td>
-            <td class="conn-external-services-list">{{ conn.external_services | join(", ") }}</td>
-          </tr>
-          {% endif %}
-          {% endfor %}
-        </tbody>
-      </table>
-      {% endif %}
       <div class="conn-builder-panel" id="conn-builder-panel" hidden>
         <div class="conn-builder-header">
           <span class="conn-builder-title" id="conn-builder-title"></span>
@@ -308,6 +286,34 @@ eleventyComputed:
     {% endif %}
   </section>
 
+  {% if externalServiceConns.length > 0 %}
+  <section class="external-services-card card">
+    <h3>
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+      </svg>
+      External Services
+    </h3>
+    <p>Services each connection type can reach, as declared by the provider. Examples only, not a complete list.</p>
+    <table class="external-services-table">
+      <thead>
+        <tr class="external-services-header">
+          <th>Connection type</th>
+          <th>External services (examples)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for conn in externalServiceConns %}
+        <tr class="external-services-row">
+          <td class="external-services-name"><code>{{ conn.conn_type or conn.connection_type }}</code></td>
+          <td class="external-services-list">{{ conn.external_services | join(", ") }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </section>
+  {% endif %}
+
   {# URI schemes grouped by the Airflow feature that routes them to the provider #}
   {% set schemeGroups = uriSchemes | uriSchemeGroups %}
   {% if schemeGroups.length > 0 %}