Replace JS package toggle w/ pure CSS solution

.rat-excludes

@@ -64,8 +64,6 @@ underscore.js
 jquery.dataTables.min.js
 jqClock.min.js
 dagre-d3.min.js
-bootstrap-toggle.min.js
-bootstrap-toggle.min.css
 d3.v3.min.js
 ace.js
 node_modules/*

airflow/www/package.json

@@ -60,7 +60,6 @@
   },
   "dependencies": {
     "bootstrap-3-typeahead": "^4.0.2",
-    "bootstrap-toggle": "^2.2.2",
     "d3": "^3.4.4",
     "d3-tip": "^0.9.1",
     "dagre-d3": "^0.6.4",

airflow/www/static/css/switch.css

@@ -0,0 +1,84 @@
+/**
+ * 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.
+ */
+
+.switch-label {
+  display: inline-block;
+  margin: 0;
+  cursor: pointer;
+}
+
+.switch-input {
+  /* Visusally hidden input but still accessible */
+  position: absolute;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  border: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+.switch {
+  box-sizing: content-box;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  width: 2.5rem;
+  padding: 2px;
+  background-color: #c4c2c1;
+  cursor: pointer;
+}
+
+.switch::before {
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  content: '';
+  background-color: #edecec;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.25s;
+  transition-property: transform, background-color;
+}
+
+.switch-input:checked + .switch {
+  background-color: #005c66;
+}
+
+.switch-input:checked + .switch::before {
+  background-color: #fffefd;
+  transform: translateX(1rem);
+}
+
+.switch-input:focus + .switch {
+  box-shadow: 0 0 0 3px rgba(0, 92, 102, 0.4);
+}
+
+.switch-input:focus + .switch::before {
+  background-color: #fff;
+}
+
+.switch-input:not(:checked) + .switch:hover {
+  background-color: #9e9e9c;
+}
+
+.switch-input:not(:checked) + .switch:hover::before {
+  background-color: #f5f5f5;
+}

airflow/www/templates/airflow/dag.html

@@ -23,7 +23,7 @@
 
 {% block head_css %}
   {{ super() }}
-  <link href="{{ url_for_asset('bootstrap-toggle.min.css') }}" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/switch.css') }}">
 {% endblock %}
 
 {% block content %}
@@ -32,7 +32,10 @@ <h3 class="pull-left">
       {% if dag.parent_dag is defined and dag.parent_dag %}
         <span class="text-muted">SUBDAG:</span> {{ dag.dag_id }}
       {% else %}
-        <input id="pause_resume" dag_id="{{ dag.dag_id }}" type="checkbox" {{ "checked" if not dag.is_paused else "" }} data-toggle="toggle" data-size="mini" method="post">
+        <label class="switch-label js-tooltip" title="Pause/Unpause DAG">
+          <input class="switch-input" id="pause_resume" dag_id="{{ dag.dag_id }}" type="checkbox" {{ "checked" if not dag.is_paused else "" }} method="post">
+          <span class="switch" aria-hidden="true"></span>
+        </label>
         <span class="text-muted">DAG:</span> {{ dag.dag_id }}
         <small class="text-muted">{{ dag.description[0:150] + '…' if dag.description and dag.description|length > 150 else dag.description|default('', true) }}</small>
       {% endif %}
@@ -346,7 +349,6 @@ <h4 class="modal-title" id="dagModalLabel">
 {% endblock %}
 {% block tail %}
   {{ super() }}
-  <script src="{{ url_for_asset('bootstrap-toggle.min.js') }}"></script>
   <script>
     function updateQueryStringParameter(uri, key, value) {
       var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
@@ -598,5 +600,6 @@ <h4 class="modal-title" id="dagModalLabel">
         $buttons.addClass('btn-danger');
       });
     });
+    $('.js-tooltip').tooltip();
   </script>
 {% endblock %}

airflow/www/templates/airflow/dags.html

@@ -29,8 +29,8 @@
 
 {% block head_css %}
   {{ super() }}
-  <link href="{{ url_for_asset('dataTables.bootstrap.min.css') }}" rel="stylesheet" type="text/css">
-  <link href="{{ url_for_asset('bootstrap-toggle.min.css') }}" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('dataTables.bootstrap.min.css') }}">
+  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('switch.css') }}">
 {% endblock %}
 
 {% block content %}
@@ -102,7 +102,10 @@ <h2>DAGs</h2>
 
             <!-- Column 2: Turn dag on/off -->
             <td>
-              <input id="toggle-{{ dag.dag_id }}" dag_id="{{ dag.dag_id }}" type="checkbox" {{ "checked" if not dag.is_paused else "" }} data-toggle="toggle" data-size="mini" method="post">
+              <label class="switch-label js-tooltip" title="Pause/Unpause DAG">
+                <input class="switch-input" id="toggle-{{ dag.dag_id }}" dag_id="{{ dag.dag_id }}" type="checkbox" {{ "checked" if not dag.is_paused else "" }} method="post">
+                <span class="switch" aria-hidden="true"></span>
+              </label>
             </td>
 
             <!-- Column 3: Name -->
@@ -245,7 +248,6 @@ <h2>DAGs</h2>
   <script src="{{ url_for_asset('d3.min.js') }}"></script>
   <script src="{{ url_for_asset('jquery.dataTables.min.js') }}"></script>
   <script src="{{ url_for_asset('dataTables.bootstrap.min.js') }}"></script>
-  <script src="{{ url_for_asset('bootstrap-toggle.min.js') }}"></script>
   <script>
 
     const DAGS_INDEX = "{{ url_for('Airflow.index') }}";
@@ -593,5 +595,6 @@ <h2>DAGs</h2>
         hideSvgTooltip();
       });
     });
+    $('.js-tooltip').tooltip();
   </script>
 {% endblock %}

airflow/www/webpack.config.js

@@ -40,6 +40,7 @@ const config = {
     'task-instances': `${STATIC_DIR}/js/task-instances.js`,
     ganttChartD3v2: `${STATIC_DIR}/js/gantt-chart-d3v2.js`,
     main: `${STATIC_DIR}/css/main.css`,
+    switch: `${STATIC_DIR}/css/switch.css`,
     airflowDefaultTheme: `${STATIC_DIR}/css/bootstrap-theme.css`,
     moment: 'moment-timezone',
   },
@@ -145,9 +146,6 @@ const config = {
         }, {
           from: 'node_modules/bootstrap-3-typeahead/*min.*',
           flatten: true
-        }, {
-          from: 'node_modules/bootstrap-toggle/**/*bootstrap-toggle.min.*',
-          flatten: true,
         }, {
           from: 'node_modules/datatables.net/**/**.min.*',
           flatten: true

airflow/www/yarn.lock

@@ -1161,11 +1161,6 @@ bootstrap-3-typeahead@^4.0.2:
   resolved "https://registry.yarnpkg.com/bootstrap-3-typeahead/-/bootstrap-3-typeahead-4.0.2.tgz#cb1c969044856862096fc8c71cc21b3acbb50412"
   integrity sha1-yxyWkESFaGIJb8jHHMIbOsu1BBI=
 
-bootstrap-toggle@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/bootstrap-toggle/-/bootstrap-toggle-2.2.2.tgz#2b88534fc1b998674f877f98ba0d8b5b743e96fe"
-  integrity sha1-K4hTT8G5mGdPh3+Yug2LW3Q+lv4=
-
 bootstrap@^3.3:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"

setup.cfg

@@ -26,7 +26,6 @@ license_files =
    LICENSE
    NOTICE
 # Start of licenses generated automatically
-   licenses/LICENSE-bootstrap-toggle.txt
    licenses/LICENSE-bootstrap.txt
    licenses/LICENSE-bootstrap3-typeahead.txt
    licenses/LICENSE-d3-tip.txt