From 3c9cf6fbceb369efcb6854731833558e8b487749 Mon Sep 17 00:00:00 2001
From: Daniel Reeves <31971762+dwreeves@users.noreply.github.com>
Date: Mon, 10 Jun 2024 07:08:46 -0400
Subject: [PATCH] Add deep linking of dbt docs (#1038)

Ties the URL in the browser to the URL of the dbt docs

Resolves #1029
---
 cosmos/plugin/__init__.py             | 20 ++++++++++++++++++++
 cosmos/plugin/templates/dbt_docs.html | 22 +++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/cosmos/plugin/__init__.py b/cosmos/plugin/__init__.py
index a40d07c7f..3701f1572 100644
--- a/cosmos/plugin/__init__.py
+++ b/cosmos/plugin/__init__.py
@@ -163,6 +163,26 @@ def open_file(path: str, conn_id: Optional[str] = None) -> str:
       )
     }
   }
+
+  // Prevent parent hash changes from sending a message back to the parent.
+  // This is necessary for making sure the browser back button works properly.
+  let hashChangeLock = true;
+
+  window.addEventListener('hashchange', function () {
+    if (!hashChangeLock) {
+      window.parent.postMessage(window.location.hash);
+    }
+    hashChangeLock = false;
+  });
+  window.addEventListener('message', function (event) {
+    let msgData = event.data;
+    if (typeof msgData === 'string' && msgData.startsWith('#!')) {
+      let updateUrl = new URL(window.location);
+      updateUrl.hash = msgData;
+      hashChangeLock = true;
+      history.replaceState(null, null, updateUrl);
+    }
+  });
 </script>
 """
 
diff --git a/cosmos/plugin/templates/dbt_docs.html b/cosmos/plugin/templates/dbt_docs.html
index 214d88e4a..fe3f794b6 100644
--- a/cosmos/plugin/templates/dbt_docs.html
+++ b/cosmos/plugin/templates/dbt_docs.html
@@ -1,4 +1,5 @@
 {% extends base_template %}
+{% block page_title %}dbt docs - {{ appbuilder.app_name }}{% endblock %}
 {% block content %}
     <script src="{{ url_for('.static', filename='iframeResizer.min.js') }}"></script>
     <iframe id="dbtIframe" src="{{ url_for('.dbt_docs_index') }}" style="min-width: 100%; border: 0;"></iframe>
@@ -10,6 +11,25 @@
                 minHeight: 500
             },
             '#dbtIframe'
-        )
+        );
+
+        window.addEventListener('message', function (event) {
+            let msgData = event.data;
+            if (msgData.startsWith('#!')) {
+                let updateUrl = new URL(window.location);
+                updateUrl.hash = msgData;
+                history.replaceState(null, null, updateUrl);
+            }
+        });
+
+        window.addEventListener('popstate', function () {
+            dbtIframe.contentWindow.postMessage(window.location.hash);
+        });
+
+        let dbtIframe = document.getElementById('dbtIframe');
+        let iframeUrl = new URL(dbtIframe.src);
+        iframeUrl.hash = window.location.hash;
+        dbtIframe.src = iframeUrl.href;
+
     </script>
 {% endblock %}