Fix issue where on page refresh when on function edit/new sub pages you would be redirected back to dashboard

app.py

@@ -95,16 +95,6 @@ def map_isolator_response_to_flask_response(response):
 def home():
     return render_template("home.html", name='Try me', script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT)
 
-@ app.route("/client/<int:user_id>/<function>", methods=["GET"])
-@login_required
-def client(user_id, function):
-    http_function = db.get_http_function(user_id, function)
-    if not http_function:
-        return jsonify({'error': 'Function not found'}), 404
-    
-    http_function = create_http_function_view_model(http_function)
-    return render_template("dashboard/http_functions/client.html", **http_function)
-
 @ app.route("/dashboard", methods=["GET"])
 @login_required
 def dashboard():
@@ -125,8 +115,11 @@ def dashboard_http_functions():
 @login_required
 def get_http_function_add_form():
     user_id = current_user.id
+    if htmx:
+        return render_block(app.jinja_env, 'dashboard/http_functions/new.html', 'page', user_id=user_id, name=DEFAULT_FUNCTION_NAME, script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
     return render_template("dashboard/http_functions/new.html", user_id=user_id, name=DEFAULT_FUNCTION_NAME, script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
 
+
 @ app.route("/dashboard/http_functions/create", methods=["POST"])
 @login_required
 def create_http_function():
@@ -148,20 +141,23 @@ def create_http_function():
         print(e)
         return { "status": "error", "message": str(e) }
 
-@ app.route("/dashboard/http_functions/edit_form", methods=["GET"])
+@ app.route("/dashboard/http_functions/<int:function_id>/edit_form", methods=["GET"])
 @login_required
-def get_http_function_edit_form():
+def get_http_function_edit_form(function_id):
     user_id = current_user.id
-    name = request.args.get('name')
+    http_function = db.get_http_function_by_id(user_id, function_id)
-    http_function = db.get_http_function(user_id, name)
     if not http_function:
         return jsonify({'error': 'Function not found'}), 404
+    name = http_function['name']
     script = http_function['script_content']
     environment_info =  json.dumps(http_function['environment_info'], indent=2)
     is_public = http_function['is_public']
     log_request = http_function['log_request']
     log_response = http_function['log_response']
-    return render_template("dashboard/http_functions/edit.html", user_id=user_id, name=name, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response)
+
+    if htmx:
+        return render_block(app.jinja_env, 'dashboard/http_functions/edit.html', 'page', user_id=user_id, function_id=function_id, name=name, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response)
+    return render_template("dashboard/http_functions/edit.html", user_id=user_id, name=name, function_id=function_id, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response)
 
 @ app.route("/dashboard/http_functions/edit", methods=["POST"])
 @login_required
@@ -197,19 +193,31 @@ def delete_http_function():
     except Exception as e:
         return jsonify({"status": 'error', "message": str(e)}), 500
 
-@ app.route("/dashboard/http_functions/logs", methods=["GET"])
+@ app.route("/dashboard/http_functions/<int:function_id>/logs", methods=["GET"])
 @login_required
-def get_http_function_logs():
+def get_http_function_logs(function_id):
     user_id = current_user.id
-    name = request.args.get('name')
+    http_function = db.get_http_function_by_id(user_id, function_id)
-    http_function = db.get_http_function(user_id, name)
+    if not http_function:
+        return jsonify({'error': 'Function not found'}), 404
+    name = http_function['name']
+    http_function_invocations = db.get_http_function_invocations(function_id)
+    if htmx:
+        return render_block(app.jinja_env, 'dashboard/http_functions/logs.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function_invocations=http_function_invocations)
+    return render_template("dashboard/http_functions/logs.html", user_id=user_id, name=name, function_id=function_id, http_function_invocations=http_function_invocations)
+
+@ app.route("/http_functions/<int:function_id>/client", methods=["GET"])
+@login_required
+def client(function_id):
+    user_id = current_user.id
+    http_function = db.get_http_function_by_id(user_id, function_id)
     if not http_function:
         return jsonify({'error': 'Function not found'}), 404
     
-    http_function_id = http_function['id']
+    http_function = create_http_function_view_model(http_function)
-    http_function_invocations = db.get_http_function_invocations(http_function_id)
+    if htmx:
-    return render_template("dashboard/http_functions/logs.html", user_id=user_id, name=name, http_function_invocations=http_function_invocations)
+        return render_block(app.jinja_env, 'dashboard/http_functions/client.html', 'page', function_id=function_id, **http_function)
-    
+    return render_template("dashboard/http_functions/client.html", function_id=function_id, **http_function)
 
 @ app.route("/dashboard/timer_functions", methods=["GET"])
 @login_required

db.py

@@ -57,6 +57,11 @@ class DataBase():
             'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response FROM http_functions WHERE user_id=%s AND NAME=%s', [user_id, name], one=True)
         return http_function
     
+    def get_http_function_by_id(self, user_id, http_function_id):
+        http_function = self.execute(
+            'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response FROM http_functions WHERE user_id=%s AND id=%s', [user_id, http_function_id], one=True)
+        return http_function
+    
     def create_new_http_function(self, user_id, name, script_content, environment_info, is_public, log_request, log_response):
         self.execute(
             'INSERT INTO http_functions (user_id, NAME, script_content, environment_info, is_public, log_request, log_response) VALUES (%s, %s, %s, %s, %s, %s, %s)',

templates/dashboard.html

@@ -89,7 +89,9 @@
             </a>
         </header>
         <main class="flex flex-1 flex-col gap-4 p-4  md:p-6" data-id="50" id="container">
+            {% block page %}
             {{ render_partial('dashboard/http_functions/overview.html', http_functions=http_functions) }}
+            {% endblock %}
         </main>
     </div>
 </div>

templates/dashboard/http_functions/client.html

@@ -1,8 +1,9 @@
-{% extends 'base.html' %}
+{% extends 'dashboard.html' %}
 
-{% block content %}
+{% block page %}
 
-{{ render_partial('dashboard/http_functions/header.html', title='Try', user_id=user_id, name=name,
+{{ render_partial('dashboard/http_functions/header.html', title='Try', user_id=user_id, function_id=function_id,
+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">

templates/dashboard/http_functions/edit.html

@@ -1,5 +1,13 @@
-{{ render_partial('dashboard/http_functions/header.html', title='Update', user_id=user_id, name=name,
+{% extends 'dashboard.html' %}
-refresh_url=url_for('get_http_function_edit_form', name=name), show_logs=True, show_client=True) }}
 
-{{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info,
+{% block page %}
-is_public=is_public, log_request=log_request, log_response=log_response, is_edit=True) }}
+
+{{ render_partial('dashboard/http_functions/header.html', title='Update', user_id=user_id, function_id=function_id,
+name=name,
+refresh_url=url_for('get_http_function_edit_form', function_id=function_id), show_logs=True, show_client=True) }}
+
+{{ render_partial('function_editor.html', function_id=function_id, name=name, script=script,
+environment_info=environment_info,
+is_public=is_public, log_request=log_request, log_response=log_response, is_edit=True) }}
+
+{% endblock %}

templates/dashboard/http_functions/header.html

@@ -8,7 +8,7 @@
 
             {% if show_refresh|default(true, false) %}
             <div class="ml-2 cursor-pointer text-gray-500" hx-get="{{ refresh_url }}" hx-target="#container"
-                hx-swap="innerHTML">
+                hx-swap="innerHTML" hx-push-url="true">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" class="w-6 h-6" data-darkreader-inline-stroke=""
                     style="--darkreader-inline-stroke: currentColor;">
@@ -20,8 +20,9 @@
             {% endif %}
 
             {% if show_logs|default(false, true) %}
-            <div class="ml-2 cursor-pointer text-gray-500" hx-get="{{ url_for('get_http_function_logs', name=name) }}"
+            <div class="ml-2 cursor-pointer text-gray-500"
-                hx-target="#container" hx-swap="innerHTML">
+                hx-get="{{ url_for('get_http_function_logs', function_id=function_id) }}" hx-target="#container"
+                hx-swap="innerHTML" hx-push-url="true">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" data-slot="icon" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -31,9 +32,8 @@
             {% endif %}
 
             {% if show_client|default(false, true) %}
-            <div class="ml-2 cursor-pointer text-gray-500"
+            <div class="ml-2 cursor-pointer text-gray-500" hx-get="{{ url_for('client', function_id=function_id) }}"
-                hx-get="{{ url_for('client', user_id=user_id, function=name) }}" hx-target="#container"
+                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-                hx-swap="innerHTML">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -44,8 +44,8 @@
 
             {% if show_edit_form|default(false, true) %}
             <div class="ml-2 cursor-pointer text-gray-500"
-                hx-get="{{ url_for('get_http_function_edit_form', name=name) }}" hx-target="#container"
+                hx-get="{{ url_for('get_http_function_edit_form', function_id=function_id) }}" hx-target="#container"
-                hx-swap="innerHTML">
+                hx-swap="innerHTML" hx-push-url="true">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" data-slot="icon" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -57,7 +57,8 @@
         </div>
         <button
             class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded flex mr-2 items-center ml-auto"
-            hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML">
+            hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML"
+            hx-push-url="true">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-5 h-5 mr-2" data-darkreader-inline-stroke=""
                 style="--darkreader-inline-stroke: currentColor;">

templates/dashboard/http_functions/logs.html

@@ -1,5 +1,10 @@
-{{ render_partial('dashboard/http_functions/header.html', title='Logs', user_id=user_id, name=name,
+{% extends 'dashboard.html' %}
-refresh_url=url_for('get_http_function_logs', name=name), show_edit_form=True, show_client=True) }}
+
+{% block page %}
+
+{{ render_partial('dashboard/http_functions/header.html', title='Logs', user_id=user_id, function_id=function_id,
+name=name,
+refresh_url=url_for('get_http_function_logs', function_id=function_id), show_edit_form=True, show_client=True) }}
 
 <div class="block md:grid md:grid-cols-4 md:gap-4 p-4">
     <!-- Headers -->
@@ -39,4 +44,6 @@ refresh_url=url_for('get_http_function_logs', name=name), show_edit_form=True, s
         {% endfor %}
     </div>
     {% endfor %}
-</div>
+</div>
+
+{% endblock %}

templates/dashboard/http_functions/new.html

@@ -1,8 +1,13 @@
+{% extends 'dashboard.html' %}
+
+{% block page %}
+
 {{ render_partial('dashboard/http_functions/header.html', title='New HTTP function', user_id=user_id, show_name=False,
 show_refresh=False, show_logs=False,
 show_client=False, show_link=False)
 }}
 
-
 {{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info,
-is_public=is_public, log_request=log_request, log_response=log_response, is_add=True) }}
+is_public=is_public, log_request=log_request, log_response=log_response, is_add=True) }}
+
+{% endblock %}

templates/dashboard/http_functions/overview.html

@@ -2,7 +2,8 @@
     <h1 class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">HTTP functions</h1>
     <button
         class="bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded flex mr-2 items-center ml-auto"
-        hx-get="{{ url_for('get_http_function_add_form') }}" hx-target="#container" hx-swap="innerHTML">
+        hx-get="{{ url_for('get_http_function_add_form') }}" hx-target="#container" hx-swap="innerHTML"
+        hx-push-url="true">
         <span class="sr-only" data-id="4">Bold</span>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-5 h-5" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
@@ -66,19 +67,19 @@
                         <div class="flex gap-1">
                             <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('get_http_function_logs', name=function.name) }}"
+                                hx-get="{{ url_for('get_http_function_logs', function_id=function.id) }}"
                                 hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                 Logs
                             </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('get_http_function_edit_form', name=function.name) }}"
+                                hx-get="{{ url_for('get_http_function_edit_form', function_id=function.id) }}"
                                 hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                 Edit
                             </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=function.name) }}"
+                                hx-get="{{ url_for('client', user_id=function.user_id, function_id=function.id) }}"
                                 hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                 Try
                             </button>

templates/function_editor.html

@@ -277,7 +277,7 @@
         <button
             class="bg-transparent hover:bg-red-500 text-red-700 font-semibold hover:text-white py-2 px-4 border border-red-500 hover:border-transparent rounded flex mr-2 items-center"
             hx-delete="{{ url_for('delete_http_function', name=name) }}" hx-target="#container" hx-swap="innerHTML"
-            hx-confirm="Are you sure you want to delete {{ name }}?">
+            hx-confirm="Are you sure you want to delete {{ name }}?" hx-push-url="true">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-4 h-4 mr-2">
                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -306,10 +306,9 @@
                     .then(response => response.json())
                     .then(json => {
                         if (name != updated_name) {
-                            htmx.ajax('GET', "{{ url_for('get_http_function_edit_form') }}", {
+                            htmx.ajax('GET', "{{ url_for('get_http_function_edit_form', function_id=function_id) }}", {
                                 target: '#container',
-                                swap: 'innerHTML',
+                                swap: 'innerHTML'
-                                values: { name: updated_name }
                             });
                         }
                         else {