Improve presentation of DAG Docs

airflow/www/static/css/main.css

@@ -102,13 +102,6 @@ div.container {
   background-color: #c0defb;
 }
 
-div.rich_doc {
-  padding: 5px 10px;
-  border: 1px solid #ddd;
-  background: #fff;
-  border-radius: 4px;
-}
-
 span.status_square {
   width: 10px;
   height: 10px;
@@ -317,8 +310,12 @@ label[for="timezone-other"],
   display: block;
 }
 
-.dag-doc {
-  margin-bottom: 15px;
+.accordion-toggle {
+  display: block;
+}
+
+.accordion-toggle.collapsed > .toggle-direction {
+  transform: rotate(180deg);
 }
 
 .dag-import-error {

airflow/www/templates/airflow/dag.html

@@ -18,6 +18,7 @@
 #}
 
 {% extends base_template %}
+{% from 'appbuilder/dag_docs.html' import dag_docs %}
 
 {% block page_title %}{{ dag.dag_id }} - Airflow{% endblock %}
 
@@ -113,6 +114,7 @@ <h4 class="pull-right" style="user-select: none;-moz-user-select: auto;">
       </div>
     </div>
   </div>
+  {{ dag_docs(doc_md) }}
   <!-- Modal -->
   <div class="modal fade" id="taskInstanceModal" tabindex="-1" role="dialog" aria-labelledby="taskInstanceModalLabel" aria-hidden="true">
     <div class="modal-dialog">

airflow/www/templates/airflow/graph.html

@@ -36,9 +36,6 @@
 
 {% block content %}
   {{ super() }}
-  {% if doc_md %}
-    {{ doc_md }}
-  {% endif %}
   <div class="row dag-view-tools">
     <div class="col-md-10">
       <form method="get" class="form-inline">

airflow/www/templates/airflow/tree.html

@@ -34,9 +34,6 @@
 
 {% block content %}
   {{ super() }}
-  {% if doc_md %}
-    {{ doc_md }}
-  {% endif %}
   <div class="row dag-view-tools">
     <div class="col-md-12">
       <form method="get" class="form-inline">

airflow/www/templates/appbuilder/dag_docs.html

@@ -0,0 +1,41 @@
+{#
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+#}
+
+{% macro dag_docs(doc_md) %}
+  {% if doc_md %}
+    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="margin-top: 16px;">
+      <div class="panel panel-default">
+        <div class="panel-heading" role="tab" id="headingOne">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="accordion-toggle">
+              <span class="material-icons" aria-hidden="true">info_outline</span>
+              DAG Docs
+              <span class="material-icons pull-right toggle-direction" aria-hidden="true">expand_less</span>
+            </a>
+          </h4>
+        </div>
+        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+          <div class="panel-body">
+            {{ doc_md }}
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+{% endmacro %}

airflow/www/utils.py

@@ -326,7 +326,7 @@ def wrapped_markdown(s, css_class=None):
     if s is None:
         return None
 
-    return Markup(f'<div class="rich_doc {css_class}" >' + markdown.markdown(s) + "</div>")
+    return Markup(f'<div class="{css_class}" >' + markdown.markdown(s) + "</div>")
 
 
 # pylint: disable=no-member

airflow/www/views.py

@@ -1983,7 +1983,7 @@ def recurse_nodes(task, visited):
 
         form = DateTimeWithNumRunsForm(data={'base_date': max_date, 'num_runs': num_runs})
 
-        doc_md = wwwutils.wrapped_markdown(getattr(dag, 'doc_md', None), css_class='dag-doc')
+        doc_md = wwwutils.wrapped_markdown(getattr(dag, 'doc_md', None))
 
         task_log_reader = TaskLogReader()
         if task_log_reader.supports_external_link:
@@ -2069,7 +2069,7 @@ class GraphForm(DateTimeWithNumRunsWithDagRunsForm):
         if not tasks:
             flash("No tasks found", "error")
         session.commit()
-        doc_md = wwwutils.wrapped_markdown(getattr(dag, 'doc_md', None), css_class='dag-doc')
+        doc_md = wwwutils.wrapped_markdown(getattr(dag, 'doc_md', None))
 
         task_log_reader = TaskLogReader()
         if task_log_reader.supports_external_link:

tests/www/test_utils.py

@@ -218,12 +218,12 @@ def test_markdown_none(self):
 class TestWrappedMarkdown(unittest.TestCase):
     def test_wrapped_markdown_with_docstring_curly_braces(self):
         rendered = wrapped_markdown("{braces}", css_class="a_class")
-        self.assertEqual('<div class="rich_doc a_class" ><p>{braces}</p></div>', rendered)
+        self.assertEqual('<div class="a_class" ><p>{braces}</p></div>', rendered)
 
     def test_wrapped_markdown_with_some_markdown(self):
         rendered = wrapped_markdown("*italic*\n**bold**\n", css_class="a_class")
         self.assertEqual(
-            '''<div class="rich_doc a_class" ><p><em>italic</em>
+            '''<div class="a_class" ><p><em>italic</em>
 <strong>bold</strong></p></div>''',
             rendered,
         )