feat: Implement simplistic collapsable textarea for "extra"

airflow/providers/http/hooks/http.py

@@ -25,6 +25,8 @@
 import tenacity
 from aiohttp import ClientResponseError
 from asgiref.sync import sync_to_async
+from flask_appbuilder.fieldwidgets import BS3TextAreaFieldWidget
+from markupsafe import Markup
 from requests.auth import HTTPBasicAuth
 from requests_toolbelt.adapters.socket_options import TCPKeepAliveAdapter
 
@@ -125,14 +127,9 @@ def get_connection_form_widgets(cls) -> dict[str, Any]:
                 widget=Select2Widget(),
             ),
             "auth_kwargs": TextAreaField(lazy_gettext("Auth kwargs"), widget=BS3TextAreaFieldWidget()),
-            "extra_headers": TextAreaField(lazy_gettext("Extra Headers"), widget=BS3TextAreaFieldWidget()),
+            "extra_headers": TextAreaField(lazy_gettext("Extra Headers"), widget=BS3TextAreaFieldWidget())
         }
 
-    @classmethod
-    def get_ui_field_behaviour(cls) -> dict[str, Any]:
-        """Return custom field behaviour."""
-        return {"hidden_fields": ["extra"], "relabeling": {}}
-
     # headers may be passed through directly or in the "extra" field in the connection
     # definition
     def get_conn(self, headers: dict[Any, Any] | None = None) -> requests.Session:

airflow/www/forms.py

@@ -32,6 +32,7 @@
 from flask_appbuilder.forms import DynamicForm
 from flask_babel import lazy_gettext
 from flask_wtf import FlaskForm
+from markupsafe import Markup
 from wtforms import widgets
 from wtforms.fields import Field, IntegerField, PasswordField, SelectField, StringField, TextAreaField
 from wtforms.validators import InputRequired, Optional
@@ -194,6 +195,29 @@ def populate_obj(self, item):
                 field.populate_obj(item, name)
 
 
+class BS3AccordionTextAreaFieldWidget(BS3TextAreaFieldWidget):
+
+    @staticmethod
+    def _make_collapsable_panel(field: Field, content: Markup) -> str:
+        collapsable_id: str = f"collapsable_{field.id}"
+        return f"""
+        <div class="panel panel-default form-panel">
+            <div class="panel-heading">
+                <h4 class="panel-title">
+                    <a class="accordion-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="{collapsable_id}" href="#{collapsable_id}">Show</a>
+                </h4>
+            </div>
+            <div class="panel-collapse collapse" id="{collapsable_id}" aria-expanded="false">
+                {content.__html__()}
+            </div>
+        </div>
+        """
+
+    def __call__(self, field, **kwargs):
+        text_area = super(BS3TextAreaFieldWidget, self).__call__(field, **kwargs)
+        return self._make_collapsable_panel(field=field, content=text_area)
+
+
 @cache
 def create_connection_form_class() -> type[DynamicForm]:
     """Create a form class for editing and adding Connection.
@@ -240,7 +264,7 @@ def process(self, formdata=None, obj=None, **kwargs):
         login = StringField(lazy_gettext("Login"), widget=BS3TextFieldWidget())
         password = PasswordField(lazy_gettext("Password"), widget=BS3PasswordFieldWidget())
         port = IntegerField(lazy_gettext("Port"), validators=[Optional()], widget=BS3TextFieldWidget())
-        extra = TextAreaField(lazy_gettext("Extra"), widget=BS3TextAreaFieldWidget())
+        extra = TextAreaField(lazy_gettext("Extra"), widget=BS3AccordionTextAreaFieldWidget())
 
     for key, value in providers_manager.connection_form_widgets.items():
         setattr(ConnectionForm, key, value.field)

airflow/www/static/js/connection_form.js

@@ -83,7 +83,7 @@ function restoreFieldBehaviours() {
     }
   );
 
-  Array.from(document.querySelectorAll(".form-control")).forEach((elem) => {
+  Array.from(document.querySelectorAll(".form-control, .form-panel")).forEach((elem) => {
     // eslint-disable-next-line no-param-reassign
     elem.placeholder = "";
     elem.parentElement.parentElement.classList.remove("hide");
@@ -101,7 +101,7 @@ function applyFieldBehaviours(connection) {
     if (Array.isArray(connection.hidden_fields)) {
       connection.hidden_fields.forEach((field) => {
         document
-          .getElementById(field)
+          .querySelector(`label[for='${field}']`)
           .parentElement.parentElement.classList.add("hide");
       });
     }