Add collapsible import errors (#16072)

* Make DAG Import errors collapsable

Show only the first line of a DAG Import Error that will expand when clicked on

* make each error its own alert box

airflow/www/static/css/flash.css

@@ -36,3 +36,15 @@
 #errorHeading {
   background-color: #d6d8d9; /* same color as Bootstrap's Dark Alert */
 }
+
+.dag-import-error {
+  white-space: pre;
+  height: 14px;
+  line-height: 14px; /* show only one line of 14px text */
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.expanded-error {
+  height: 100%;
+}

airflow/www/static/css/main.css

@@ -329,10 +329,6 @@ label[for="timezone-other"],
   transform: rotate(180deg);
 }
 
-.dag-import-error {
-  white-space: pre;
-}
-
 /* stylelint-disable declaration-block-single-line-max-declarations */
 .hll { background-color: #ffc; }
 .c { color: #408080; font-style: italic; } /* Comment */

airflow/www/templates/appbuilder/flash.html

@@ -65,11 +65,21 @@ <h4 class="panel-title">
         <div id="alerts" class="panel-collapse collapse">
           <div class="panel-body">
             {% for category, m in dag_import_errors %}
-              <div class="alert alert-error dag-import-error">{{ m }}</div>
+              <div class="alert alert-error">
+                <div class="dag-import-error" onclick="toggleErrorMessage.call(this)">{{ m }}</div>
+              </div>
             {% endfor %}
           </div>
         </div>
       </div>
     </div>
   {% endif %}
 {% endwith %}
+
+{% block tail %}
+  <script>
+    function toggleErrorMessage() {
+      $(this).toggleClass('expanded-error');
+    }
+  </script>
+{% endblock %}