[airflow] 03/05: Only show Pause/Unpause tooltip on hover (#17957)

[ka...@apache.org]

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

kaxilnaik pushed a commit to branch v2-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git

commit a8bbb83a3d3aa05a4b68616035ea608249eaa502
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Wed Sep 1 14:14:41 2021 +0200

    Only show Pause/Unpause tooltip on hover (#17957)
    
    After clicking on the Pause/Unpause toggle, the element remained in focus and therefore the toggle wouldn't go away. After a change event we will also trigger a blur event to remove the focus so the tooltip will only appear on hover.
    
    Fixes: #16500
    (cherry picked from commit ee93935bab6e5841b48a07028ea701d9aebe0cea)
---
 airflow/www/static/js/dag.js  | 2 ++
 airflow/www/static/js/dags.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/airflow/www/static/js/dag.js b/airflow/www/static/js/dag.js
index 39ffedc..7f5b4ae 100644
--- a/airflow/www/static/js/dag.js
+++ b/airflow/www/static/js/dag.js
@@ -254,6 +254,8 @@ $('#pause_resume').on('change', function onChange() {
   const id = $input.data('dag-id');
   const isPaused = $input.is(':checked');
   const url = `${pausedUrl}?is_paused=${isPaused}&dag_id=${encodeURIComponent(id)}`;
+  // Remove focus on element so the tooltip will go away
+  $input.trigger('blur');
   $input.removeClass('switch-input--error');
   $.post(url).fail(() => {
     setTimeout(() => {
diff --git a/airflow/www/static/js/dags.js b/airflow/www/static/js/dags.js
index 7f27af8..01da376 100644
--- a/airflow/www/static/js/dags.js
+++ b/airflow/www/static/js/dags.js
@@ -92,6 +92,8 @@ $.each($('[id^=toggle]'), function toggleId() {
     const isPaused = $input.is(':checked');
     const url = `${pausedUrl}?is_paused=${isPaused}&dag_id=${encodeURIComponent(dagId)}`;
     $input.removeClass('switch-input--error');
+    // Remove focus on element so the tooltip will go away
+    $input.trigger('blur');
     $.post(url).fail(() => {
       setTimeout(() => {
         $input.prop('checked', !isPaused);