[airflow] branch main updated: Use material icons for dag import error banner (#30771)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 5e59f41202 Use material icons for dag import error banner (#30771)
5e59f41202 is described below

commit 5e59f412020f0e97f0186d9e81f601afa96f02b9
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Thu Apr 20 18:41:45 2023 -0400

    Use material icons for dag import error banner (#30771)
    
    * Use material icons for dag import error banner
    
    * fix message caret direction
---
 airflow/www/static/css/flash.css            | 14 ++------------
 airflow/www/templates/appbuilder/flash.html | 12 ++++++------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/airflow/www/static/css/flash.css b/airflow/www/static/css/flash.css
index 21146948b3..9a2c21654d 100644
--- a/airflow/www/static/css/flash.css
+++ b/airflow/www/static/css/flash.css
@@ -18,17 +18,11 @@
  */
 
 .panel-heading #alerts-accordion-toggle::after {
-  /* symbol for "opening" panels */
-  font-family: FontAwesome; /* stylelint-disable-line 
font-family-no-missing-generic-family-keyword */
-  content: "\f077";
   float: right;
   color: grey;
 }
 
 .panel-heading #alerts-accordion-toggle.collapsed::after {
-  /* symbol for "closing" panels */
-  font-family: FontAwesome; /* stylelint-disable-line 
font-family-no-missing-generic-family-keyword */
-  content: "\f078";
   float: right;
   color: grey;
 }
@@ -51,9 +45,6 @@
 }
 
 .dag-import-error::after {
-  /* symbol for "opening" panels */
-  font-family: FontAwesome; /* stylelint-disable-line 
font-family-no-missing-generic-family-keyword */
-  content: "\f078";
   float: right;
   color: #e43921;
   position: absolute;
@@ -61,7 +52,6 @@
   right: 0;
 }
 
-.dag-import-error.expanded-error::after {
-  /* symbol for "closing" panels */
-  content: "\f077";
+.expanded-error .toggle-direction {
+  transform: rotate(180deg);
 }
diff --git a/airflow/www/templates/appbuilder/flash.html 
b/airflow/www/templates/appbuilder/flash.html
index fa1da7796b..41e4b675c1 100644
--- a/airflow/www/templates/appbuilder/flash.html
+++ b/airflow/www/templates/appbuilder/flash.html
@@ -41,21 +41,21 @@
   {% endif %}
 
   {% if dag_import_errors %}
-    <div class="panel-group" id="accordion">
+    <div class="panel-group" id="accordion" role="tablist" 
aria-multiselectable="true" style="margin-top: 16px;">
       <div class="panel panel-default">
-        <div class="panel-heading" id="errorHeading">
+        <div class="panel-heading" role="tab" id="errorHeading">
           <h4 class="panel-title">
-            <a id="alerts-accordion-toggle" data-toggle="collapse" 
data-parent="#accordion" href="#alerts" aria-expanded="false" class="collapsed">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" 
href="#errorCollapse" aria-expanded="true" aria-controls="errorCollapse" 
class="accordion-toggle collapsed">
               <span class="text-danger"><span class="material-icons" 
aria-hidden="true">error</span> DAG Import Errors ({{ dag_import_errors|length 
}})</span>
+              <span class="material-icons pull-right toggle-direction" 
aria-hidden="true">expand_less</span>
             </a>
           </h4>
         </div>
-
-        <div id="alerts" class="panel-collapse collapse">
+        <div id="errorCollapse" class="panel-collapse collapse" 
role="tabpanel" aria-labelledby="errorHeading">
           <div class="panel-body">
             {% for category, m in dag_import_errors %}
               <div class="alert alert-error">
-                <div class="dag-import-error" 
onclick="toggleErrorMessage.call(this)">{{ m }}</div>
+                <div class="dag-import-error" 
onclick="toggleErrorMessage.call(this)"><span class="material-icons pull-right 
toggle-direction" aria-hidden="true">expand_more</span>{{ m }}</div>
               </div>
             {% endfor %}
           </div>