From df458c2738b9bf613ce5b557d7dbb1205d04660f Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 28 Mar 2024 20:49:49 +1100
Subject: [PATCH] Use mithril.js to make postman like client (Previously was
 static html with a sprinkling of js)

---
 templates/base.html                           |   4 +-
 .../dashboard/http_functions/client.html      | 243 +++++++++---------
 .../dashboard/http_functions/overview.html    |   4 +-
 3 files changed, 130 insertions(+), 121 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index 004a739..a842288 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -22,6 +22,8 @@
         integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+    <script src="https://unpkg.com/mithril/mithril.js"></script>
+
     <style>
         @import url("https://rsms.me/inter/inter.css");
 
@@ -75,7 +77,7 @@
 </head>
 
 <body class="gradient leading-relaxed tracking-wide flex flex-col">
-    <div class="container mx-auto p-4 min-h-screen h-full">
+    <div class="container mx-auto p-4 lg:p-1 min-h-screen h-full">
 
         {% block content %}
 
diff --git a/templates/dashboard/http_functions/client.html b/templates/dashboard/http_functions/client.html
index 372f419..bd92331 100644
--- a/templates/dashboard/http_functions/client.html
+++ b/templates/dashboard/http_functions/client.html
@@ -6,135 +6,142 @@
 name=name,
 show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show_logs=True) }}
 
-<div class="mx-auto w-full pt-4">
-    <form class="flex"><select
-            class="px-4 py-2 border rounded-md border-gray-300 hover:border-orange-500 focus:outline-none bg-gray-100"
-            name="method">
-            <option value="GET">GET</option>
-            <option value="POST">POST</option>
-            <option value="PUT">PUT</option>
-            <option value="PATCH">PATCH</option>
-            <option value="DELETE">DELETE</option>
-        </select>
-        <input
-            class="ml-3 w-full px-4 py-2 border rounded-md border-gray-300 hover:border-orange-500 focus:outline-orange-500"
-            name="url" value="{{ url_for('execute_http_function', user_id=user_id, function=name) }}">
-        <button class="ml-3 px-6 py-2 rounded-md font-semibold text-white bg-orange-500 hover:bg-orange-600"
-            type="button" id="send-request">Send
-        </button>
-    </form>
-    <div class="react-tabs" data-rttabs="true">
-        <ul class="flex mt-5 border border-gray-300 rounded-t-lg" role="tablist">
-            <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer"
-                role="tab" id="tab:r0:0" aria-selected="true" aria-disabled="false" aria-controls="panel:r0:0"
-                tabindex="0" data-rttab="true">
-                Query Params
-            </li>
-            <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer"
-                role="tab" id="tab:r0:1" aria-selected="false" aria-disabled="false" aria-controls="panel:r0:1"
-                data-rttab="true">
-                Headers
-            </li>
-            <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer border-b-2 text-orange-600"
-                role="tab" id="tab:r0:2" aria-selected="false" aria-disabled="false" aria-controls="panel:r0:2"
-                data-rttab="true">
-                Body
-            </li>
-        </ul>
-        <div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300 react-tabs__tab-panel--selected hidden"
-            role="tabpanel" id="panel:r0:0" aria-labelledby="tab:r0:0">
-            <div class="">
-                <div class="flex mb-3"><input
-                        class="px-4 py-1.5 w-full border border-gray-300 rounded-md  hover:border-orange-500 focus:outline-orange-500"
-                        placeholder="Key" name="keyItem" value="Content-Type"><input
-                        class="ml-3 px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
-                        placeholder="Value" name="valueItem" value="application/json"><button
-                        class="ml-4 px-4 rounded-md text-red-500 border border-red-300 hover:bg-red-100">Remove</button>
-                </div><button
-                    class="px-6 py-1 rounded-md text-orange-600 border border-orange-400 hover:bg-orange-100">Add</button>
-            </div>
-        </div>
-        <div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300 hidden"
-            role="tabpanel" id="panel:r0:1" aria-labelledby="tab:r0:1">
-            <div class="">
-                <div class="flex mb-3"><input
-                        class="px-4 py-1.5 w-full border border-gray-300 rounded-md  hover:border-orange-500 focus:outline-orange-500"
-                        placeholder="Key" name="keyItem"><input
-                        class="ml-3 px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
-                        placeholder="Value" name="valueItem"><button
-                        class="ml-4 px-4 rounded-md text-red-500 border border-red-300 hover:bg-red-100">Remove</button>
-                </div><button
-                    class="px-6 py-1 rounded-md text-orange-600 border border-orange-400 hover:bg-orange-100">Add</button>
-            </div>
-        </div>
-        <div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300" role="tabpanel"
-            id="panel:r0:2" aria-labelledby="tab:r0:2">
-            <div>
-                <textarea id="request-body" rows="4"
-                    class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    placeholder="Request body"></textarea>
-
-            </div>
-        </div>
-    </div>
-    <div class="my-4"><span class="text-2xl font-medium">Response</span>
-        <div class="react-tabs" data-rttabs="true">
-            <ul class="flex mt-5 border border-gray-300 rounded-t-lg" role="tablist">
-                <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer border-b-2 text-orange-600"
-                    role="tab" id="tab:r1:0" aria-selected="true" aria-disabled="false" aria-controls="panel:r1:0"
-                    tabindex="0" data-rttab="true">Response Body</li>
-                <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer"
-                    role="tab" id="tab:r1:1" aria-selected="false" aria-disabled="false" aria-controls="panel:r1:1"
-                    data-rttab="true">Response Header</li>
-            </ul>
-            <div class="px-4 py-4 rounded-b-lg border border-t-0 border-gray-300">
-                <div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="panel:r1:0"
-                    aria-labelledby="tab:r1:0">
-                    <code id="response-body"></code>
-                </div>
-                <div class="react-tabs__tab-panel hidden" role="tabpanel" id="panel:r1:1" aria-labelledby="tab:r1:1">
-                    <table class="text-left">
-                        <thead>
-                            <tr>
-                                <th class="w-36 pb-1.5">Key</th>
-                                <th class="w-60">Value</th>
-                            </tr>
-                        </thead>
-                        <tbody></tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
+<div class="mx-auto w-full pt-4" id="client-u{{ user_id }}-f{{ function_id }}">
 </div>
 
 <script>
-    (function () {
-        const send_request_btn = document.getElementById('send-request');
-        const response_body_el = document.getElementById('response-body');
-
-        send_request_btn.addEventListener('click', () => {
-            const url = document.querySelector('input[name="url"]').value;
-            const method = document.querySelector('select[name="method"]').value;
-            let body = document.getElementById('request-body').value;
-            // If get or head then dont add body
-            if (method === 'GET' || method === 'HEAD') {
-                body = null;
+    var RequestClient = {
+        // Initialize component state
+        init: function () {
+            this.method = 'GET';
+            this.url = "{{ url_for('execute_http_function', user_id=user_id, function=name) }}";
+            this.body = '{}';
+            this.response = '';
+            this.activeTab = 'query params';
+            this.headers = [{ key: 'Content-Type', value: 'application/json' }, { key: '', value: '' }];
+            this.queryParams = [{ key: '', value: '' }];
+        },
+        sendRequest: function () {
+            let url = this.url;
+            const query = this.queryParams.filter(p => p.key && p.value)
+                .map(p => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
+                .join('&');
+            if (query) {
+                url += '?' + query;
             }
 
+            const headers = this.headers.reduce((acc, { key, value }) => {
+                if (key && value) acc[key] = value;
+                return acc;
+            }, {});
+
             fetch(url, {
-                method,
-                body,
-                headers: {
-                }
+                method: this.method,
+                body: !['GET', 'HEAD'].includes(this.method) ? this.body : undefined,
+                headers
             })
                 .then(response => response.text())
                 .then(text => {
-                    response_body_el.innerText = text;
+                    this.response = text;
+                    m.redraw();
                 });
+        },
+        view: function () {
+            return m("div.mx-auto.w-full.pt-4", [
+                m("form.flex", [
+                    m("select.px-4.py-2.border.rounded-md.border-gray-300.hover:border-orange-500.focus:outline-none.bg-gray-100", {
+                        onchange: (e) => this.method = e.target.value,
+                        value: this.method
+                    }, ["GET", "POST", "PUT", "PATCH", "DELETE"].map(method =>
+                        m("option", { value: method }, method)
+                    )),
+                    m("input.ml-3.w-full.px-4.py-2.border.rounded-md.border-gray-300.hover:border-orange-500.focus:outline-orange-500", {
+                        onchange: (e) => this.url = e.target.value,
+                        value: this.url,
+                        placeholder: "URL"
+                    }),
+                    m("button.ml-3.px-6.py-2.rounded-md.font-semibold.text-white.bg-orange-500.hover:bg-orange-600", {
+                        type: "button",
+                        onclick: () => this.sendRequest()
+                    }, "Send")
+                ]),
+                // Tabs for query params, headers, and body
+                m("div", [
+                    // Tab headers
+                    m("ul.flex.mt-5.border.border-gray-300.rounded-t-lg", [
+                        ["Query Params", "Headers", "Body"].map((tab, index) => m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
+                            class: this.activeTab === tab.toLowerCase() ? "border-b-2 text-orange-600" : "",
+                            onclick: () => this.activeTab = tab.toLowerCase()
+                        }, tab))
+                    ]),
+                    // Tab content
+                    this.activeTab === 'query params' ? m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
+                        m("div", [
+                            m("div.flex-col.space-y-2.mb-3", this.queryParams.map(({ key, value }, index) => m('div.flex', [
+                                m("input.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
+                                    placeholder: "Key",
+                                    name: "keyItem",
+                                    value: key,
+                                    oninput: (e) => this.queryParams[index].key = e.target.value
+                                }),
+                                m("input.ml-3.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
+                                    placeholder: "Value",
+                                    name: "valueItem",
+                                    value: value,
+                                    oninput: (e) => this.queryParams[index].value = e.target.value
+                                }),
+                                m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
+                                    onclick: () => this.queryParams.splice(index, 1)
+                                }, "Remove")
+                            ]))),
+                            m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
+                                onclick: () => this.queryParams.push({ key: '', value: '' })
+                            }, "Add")
+                        ])
+                    ])
+                        : '',
+                    this.activeTab === 'headers' ? m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
+                        m("div", [
+                            m("div.flex-col.space-y-2.mb-3", this.headers.map(({ key, value }, index) => m('div.flex', [
+                                m("input.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
+                                    placeholder: "Key",
+                                    name: "keyItem",
+                                    value: key,
+                                    oninput: (e) => this.headers[index].key = e.target.value
+                                }),
+                                m("input.ml-3.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
+                                    placeholder: "Value",
+                                    name: "valueItem",
+                                    value: value,
+                                    oninput: (e) => this.headers[index].value = e.target.value
+                                }),
+                                m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
+                                    onclick: () => this.headers.splice(index, 1)
+                                }, "Remove")
+                            ]))),
+                            m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
+                                onclick: () => this.headers.push({ key: '', value: '' })
+                            }, "Add")
+                        ])
+                    ])
+                        : '',
+                    this.activeTab === 'body' ? m("textarea#request-body", {
+                        oninput: (e) => this.body = e.target.value,
+                        value: this.body,
+                        rows: 4,
+                        class: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300"
+                    }) : ''
+                ]),
+                m("div.my-4", [
+                    m("span.text-2xl.font-medium", "Response"),
+                    m("pre", this.response)
+                ])
+            ]);
+        }
+    };
 
-        })
-    })();
+    RequestClient.init();
+    m.mount(document.getElementById('client-u{{ user_id }}-f{{ function_id }}'), RequestClient);
 </script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/dashboard/http_functions/overview.html b/templates/dashboard/http_functions/overview.html
index 75e8e59..623b09a 100644
--- a/templates/dashboard/http_functions/overview.html
+++ b/templates/dashboard/http_functions/overview.html
@@ -79,8 +79,8 @@
                             </button>
                             <button
                                 class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
-                                hx-get="{{ url_for('client', user_id=function.user_id, function_id=function.id) }}"
-                                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                                hx-get="{{ url_for('client', function_id=function.id) }}" hx-target="#container"
+                                hx-swap="innerHTML" hx-push-url="true">
                                 Try
                             </button>
                         </div>
