Implement /credentials/shop/webhook_responses in flask view

static/js/src/advantage/credentials/api/keys.js

@@ -25,22 +25,6 @@ export async function rotateKey(activationKey) {
   return data;
 }
 
-export async function activateKey(activationKey) {
-  let response = await fetch("/credentials/keys/activate", {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      activationKey: activationKey,
-      productID: "cube-admintasks",
-    }),
-  });
-  const data = await response.json();
-  return data;
-}
-
 export async function getKeyProducts() {
   let response = await fetch("/credentials/keys/products", {
     method: "GET",

static/js/src/advantage/credentials/app.tsx

@@ -8,7 +8,6 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import CredManage from "./components/CredManage";
 import CredKeyShop from "./components/CredKeyShop";
 import CredExamShop from "./components/CredExamShop/CredExamShop";
-import CredWebhookResponses from "./components/CredWebhookResponses";
 
 const oneHour = 1000 * 60 * 60;
 const queryClient = new QueryClient({
@@ -42,10 +41,6 @@ function App() {
             <Route path="/" element={<CredExamShop />} />
             <Route path="/keys" element={<CredKeyShop />} />
             <Route path="/manage" element={<CredManage />} />
-            <Route
-              path="/webhook_responses"
-              element={<CredWebhookResponses />}
-            />
           </Routes>
         </Router>
         <ReactQueryDevtools initialIsOpen={false} />

templates/credentials/shop/webhook_responses.html

@@ -0,0 +1,79 @@
+{% extends "credentials/base_cred.html" %}
+
+{% block title %}Canonical Certification{% endblock %}
+
+{% block meta_description %}The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
+Ubuntu Desktop, and Ubuntu Server topics.{% endblock meta_description %}
+
+{% block content %}
+<section class="u-fixed-width">
+  <table class="p-table--mobile-card" aria-label="Table of Webhook Responses">
+    <thead>
+      <tr>
+        <th>Created At</th>
+        <th>ID</th>
+        <th>Sent At</th>
+        <th>Ability Screen ID</th>
+        <th>Response Status</th>
+        <th>Transition</th>
+      </tr>
+    </thead>    
+
+    <tbody>
+      {% for data in webhook_responses["webhook_responses"] %}
+      <tr>
+        <th>{{ data.webhook.created_at }}</th>
+        <td>{{ data.id }}</td>
+        <td>{{ data.sent_at }}</td>
+        <td>{{ data.webhook.ability_screen_id }}</td>
+        <td>{{ data.response_status }}</td>
+        <td>{{ data.webhook.on_transition_to }}</td>
+      </tr>
+      {% endfor %}      
+    </tbody>
+  </table>
+
+  <nav class="p-pagination" aria-label="Pagination">
+    <ol class="p-pagination__items">
+      <li class="p-pagination__item">
+        <a 
+          class="p-pagination__link--previous 
+            {% if webhook_responses['meta']['prev_page'] == None %}
+              is-disabled
+            {% endif %}"
+          href="
+            {% if webhook_responses['meta']['prev_page'] %}
+              /credentials/shop/webhook_responses?page={{ webhook_responses['meta']['prev_page'] }}
+            {% else %}
+              #
+            {% endif %}
+          "
+          title="Previous page"
+        >
+          <i class="p-icon--chevron-down"></i>
+          <span>Previous page</span>
+        </a>
+      </li>
+      <li class="p-pagination__item">
+        <a
+          class="p-pagination__link--next
+            {% if webhook_responses['meta']['next_page'] == None %}
+              is-disabled
+            {% endif %}"
+          href="
+          {% if webhook_responses['meta']['next_page'] %}
+            /credentials/shop/webhook_responses?page={{ webhook_responses['meta']['next_page'] }}
+          {% else %}
+            #
+          {% endif %}
+          "
+          title="Next page"
+        >
+          <span>Next page</span>
+          <i class="p-icon--chevron-down"></i>
+        </a>
+      </li>
+    </ol>
+  </nav>
+</section>
+{% endblock %}

webapp/app.py

@@ -75,13 +75,13 @@
     cred_self_study,
     cred_shop,
     cred_shop_thank_you,
+    cred_shop_webhook_responses,
     cred_sign_up,
     cred_submit_form,
     cred_syllabus_data,
     cred_your_exams,
     get_activation_keys,
     get_cue_products,
-    get_filtered_webhook_responses,
     get_issued_badges,
     get_my_issued_badges,
     get_webhook_response,
@@ -886,6 +886,10 @@ def takeovers_index():
 app.add_url_rule(
     "/credentials/shop/order-thank-you", view_func=cred_shop_thank_you
 )
+app.add_url_rule(
+    "/credentials/shop/webhook_responses",
+    view_func=cred_shop_webhook_responses,
+)
 app.add_url_rule(
     "/credentials/redeem", view_func=cred_redeem_code, methods=["GET", "POST"]
 )
@@ -914,11 +918,6 @@ def takeovers_index():
     view_func=cred_beta_activation,
     methods=["GET", "POST"],
 )
-app.add_url_rule(
-    "/credentials/get_filtered_webhook_responses",
-    view_func=get_filtered_webhook_responses,
-    methods=["GET"],
-)
 app.add_url_rule(
     "/credentials/get_webhook_response",
     view_func=get_webhook_response,