Moving js to a separate file, refactoring templates to use a common l…

…ayout
release-engineering · Nov 2, 2023 · f9a56bd · f9a56bd
1 parent ba4f669
commit f9a56bd
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 68 deletions.
diff --git a/waiverdb/api_v1.py b/waiverdb/api_v1.py
@@ -392,6 +392,14 @@ def get(self):
         ), mimetype='text/html')
 
 
+class WaiversJSResource(Resource):
+    """
+    Provides a JS for a new waiver form
+    """
+    def get(self):
+        return Response(render_template('new_waiver.js'), mimetype='application/javascript')
+
+
 class WaiversCreateResource(WaiversResource):
     """
     Deprecated, kept as a redirect for a backward compatibility
@@ -725,6 +733,7 @@ def get(self):
 # set up the Api resource routing here
 api.add_resource(WaiversResource, '/waivers/')
 api.add_resource(WaiversNewResource, '/waivers/new')
+api.add_resource(WaiversJSResource, '/waivers/new/new_waiver.js')
 api.add_resource(WaiversCreateResource, '/waivers/create')
 api.add_resource(WaiverResource, '/waivers/<int:waiver_id>')
 api.add_resource(FilteredWaiversResource, '/waivers/+filtered')

diff --git a/waiverdb/templates/layout.html b/waiverdb/templates/layout.html
@@ -17,52 +17,14 @@
         <!-- Bootstrap -->
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
-        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" crossorigin="anonymous"></script>
-        <script>
-const WAIVERS_URL = "{{ url_for('api_v1.waivers_resource') }}";
-
-$(document).ready(function () {
-    $("form").on("submit", function(ev) {
-        ev.preventDefault();
-        let testcaseName = $("#testcase").val();
-        $.ajax({
-            url: WAIVERS_URL,
-            method: "POST",
-            contentType: "application/json",
-            data: JSON.stringify({
-                subject_type: $("#subject_type").val(),
-                subject_identifier: $("#subject_identifier").val(),
-                testcase: testcaseName,
-                product_version: $("#product_version").val(),
-                comment: $("#comment").val(),
-                scenario: $("#scenario").val()
-            }),
-            success: function (data, status, jqXHR) {
-                $("#result-text-error").addClass("d-none");
-                $("#result-text-success").removeClass("d-none");
-                $("#result-link").attr("href", `${WAIVERS_URL}${data.id}`);
-                $("#waiver-result").removeClass("alert-danger d-none").addClass("alert-success");
-            },
-            error: function (jqXHR, textStatus) {
-                $("#result-text-success").addClass("d-none");
-                $("#result-text-error").removeClass("d-none");
-                let addition = "";
-                if(jqXHR.status === 401) {
-                    addition = `<a href="/api/v1.0/permissions?testcase=${testcaseName}&html=1" target="_blank">See who has permissions to waive ${testcaseName}</a>`;
-                }
-                $("#error-desc").html(`Creation failed, status: ${jqXHR.status} ${jqXHR.statusText} ${addition}`);
-                $("#waiver-result").removeClass("alert-success d-none").addClass("alert-danger");
-            }
-        });
-    });
-});
-        </script>
+        {% block scripts %}
+        {% endblock %}
     </head>
 
     <body>
         <div class="container">
             <h1>
-                <img src="{{ url_for('favicon') }}" style="height: 64px" alt="Waiver DB" />
+                <img src="{{ url_for('favicon') }}" style="height: 64px" alt="" />
                 {{ self.title() }}
             </h1>
             {% for message in get_flashed_messages() %}

diff --git a/waiverdb/templates/new_waiver.html b/waiverdb/templates/new_waiver.html
@@ -4,6 +4,11 @@
     WaiverDB: Create a Waiver
 {% endblock %}
 
+{% block scripts %}
+        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" crossorigin="anonymous"></script>
+        <script src="{{ url_for('api_v1.waivers_js_resource') }}"></script>
+{% endblock %}
+
 {% block body %}
     {% if warning %}
     <div class="alert alert-danger" role="alert" id="other-error">{{ warning | safe }}</div>

diff --git a/waiverdb/templates/permissions.html b/waiverdb/templates/permissions.html
@@ -1,30 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="Web view on review-rot output.">
+{% extends "layout.html" %}
 
-        <link rel="icon" href="{{ url_for('favicon') }}" />
+{% block title %}
+    WaiverDB: Permissions
+{% endblock %}
 
-        <title>
-        {% block title %}
-        WaiverDB Permissions
-        {% endblock %}
-        </title>
+{% block scripts %}
+{% endblock %}
 
-        <!-- Bootstrap -->
-        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-              integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
-    </head>
-
-    <body>
-        <div class="container">
-            <h1>
-                <img src="{{ url_for('favicon') }}" style="height: 64px" alt="Waiver DB" />
-                {{ self.title() }}
-            </h1>
+{% block body %}
             <table class="table table-striped">
                 <thead>
                     <tr>
@@ -57,6 +40,4 @@ <h1>
                     {%- endfor %}
                 </tbody>
             </table>
-        </div>
-    </body>
-</html>
+{% endblock %}