From 1378b5b2ffb5f3791a24d3f47de7498f0935c80e Mon Sep 17 00:00:00 2001
From: Oleksandr Perepadia <80095612+OPerepadia@users.noreply.github.com>
Date: Wed, 9 Apr 2025 15:56:23 +0300
Subject: [PATCH] UI - Add UI options tab and setting to disable opening diff
 in a new tab (#3071)

---
 .../settings/templates/settings.html          |  7 ++
 .../watchlist/templates/watch-overview.html   |  9 ++-
 changedetectionio/forms.py                    |  3 +
 changedetectionio/model/App.py                |  3 +
 changedetectionio/tests/test_ui.py            | 80 +++++++++++++++++++
 5 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 changedetectionio/tests/test_ui.py

diff --git a/changedetectionio/blueprint/settings/templates/settings.html b/changedetectionio/blueprint/settings/templates/settings.html
index 7556b4c7..c45b267e 100644
--- a/changedetectionio/blueprint/settings/templates/settings.html
+++ b/changedetectionio/blueprint/settings/templates/settings.html
@@ -22,6 +22,7 @@
             <li class="tab"><a href="#notifications">Notifications</a></li>
             <li class="tab"><a href="#fetching">Fetching</a></li>
             <li class="tab"><a href="#filters">Global Filters</a></li>
+            <li class="tab"><a href="#ui-options">UI Options</a></li>
             <li class="tab"><a href="#api">API</a></li>
             <li class="tab"><a href="#timedate">Time &amp Date</a></li>
             <li class="tab"><a href="#proxies">CAPTCHA &amp; Proxies</a></li>
@@ -240,6 +241,12 @@ nav
                     </p>
                 </div>
             </div>
+            <div class="tab-pane-inner" id="ui-options">
+                <div class="pure-control-group">
+                    {{ render_checkbox_field(form.application.form.ui.form.open_diff_in_new_tab, class="open_diff_in_new_tab") }}
+                    <span class="pure-form-message-inline">Enable this setting to open the diff page in a new tab. If disabled, the diff page will open in the current tab.</span>
+                </div>
+            </div>
             <div class="tab-pane-inner" id="proxies">
                 <div id="recommended-proxy">
                     <div>
diff --git a/changedetectionio/blueprint/watchlist/templates/watch-overview.html b/changedetectionio/blueprint/watchlist/templates/watch-overview.html
index fcad5582..e7896505 100644
--- a/changedetectionio/blueprint/watchlist/templates/watch-overview.html
+++ b/changedetectionio/blueprint/watchlist/templates/watch-overview.html
@@ -209,15 +209,18 @@
                     <a href="{{ url_for('ui.ui_edit.edit_page', uuid=watch.uuid, tag=active_tag_uuid)}}#general" class="pure-button pure-button-primary">Edit</a>
                     {% if watch.history_n >= 2 %}
 
+                        {% set open_diff_in_new_tab = datastore.data['settings']['application']['ui'].get('open_diff_in_new_tab') %}
+                        {% set target_attr = ' target="' ~ watch.uuid ~ '"' if open_diff_in_new_tab else '' %}
+
                         {%  if is_unviewed %}
-                           <a href="{{ url_for('ui.ui_views.diff_history_page', uuid=watch.uuid, from_version=watch.get_from_version_based_on_last_viewed) }}" target="{{watch.uuid}}" class="pure-button pure-button-primary diff-link">History</a>
+                           <a href="{{ url_for('ui.ui_views.diff_history_page', uuid=watch.uuid, from_version=watch.get_from_version_based_on_last_viewed) }}" {{target_attr}} class="pure-button pure-button-primary diff-link">History</a>
                         {% else %}
-                           <a href="{{ url_for('ui.ui_views.diff_history_page', uuid=watch.uuid)}}" target="{{watch.uuid}}" class="pure-button pure-button-primary diff-link">History</a>
+                           <a href="{{ url_for('ui.ui_views.diff_history_page', uuid=watch.uuid)}}" {{target_attr}} class="pure-button pure-button-primary diff-link">History</a>
                         {% endif %}
 
                     {% else %}
                         {% if watch.history_n == 1 or (watch.history_n ==0 and watch.error_text_ctime )%}
-                            <a href="{{ url_for('ui.ui_views.preview_page', uuid=watch.uuid)}}" target="{{watch.uuid}}" class="pure-button pure-button-primary">Preview</a>
+                            <a href="{{ url_for('ui.ui_views.preview_page', uuid=watch.uuid)}}" {{target_attr}} class="pure-button pure-button-primary">Preview</a>
                         {% endif %}
                     {% endif %}
                 </td>
diff --git a/changedetectionio/forms.py b/changedetectionio/forms.py
index 559516da..7561d540 100644
--- a/changedetectionio/forms.py
+++ b/changedetectionio/forms.py
@@ -721,6 +721,8 @@ class globalSettingsRequestForm(Form):
                     self.extra_proxies.errors.append('Both a name, and a Proxy URL is required.')
                     return False
 
+class globalSettingsApplicationUIForm(Form):
+    open_diff_in_new_tab = BooleanField('Open diff page in a new tab', default=True, validators=[validators.Optional()])
 
 # datastore.data['settings']['application']..
 class globalSettingsApplicationForm(commonSettingsForm):
@@ -752,6 +754,7 @@ class globalSettingsApplicationForm(commonSettingsForm):
                                                                   render_kw={"style": "width: 5em;"},
                                                                   validators=[validators.NumberRange(min=0,
                                                                                                      message="Should contain zero or more attempts")])
+    ui = FormField(globalSettingsApplicationUIForm)
 
 
 class globalSettingsForm(Form):
diff --git a/changedetectionio/model/App.py b/changedetectionio/model/App.py
index 6e564630..34809017 100644
--- a/changedetectionio/model/App.py
+++ b/changedetectionio/model/App.py
@@ -60,6 +60,9 @@ class model(dict):
                     'webdriver_delay': None , # Extra delay in seconds before extracting text
                     'tags': {}, #@todo use Tag.model initialisers
                     'timezone': None, # Default IANA timezone name
+                    'ui': {
+                        'open_diff_in_new_tab': True,
+                    },
                 }
             }
         }
diff --git a/changedetectionio/tests/test_ui.py b/changedetectionio/tests/test_ui.py
new file mode 100644
index 00000000..743b70b5
--- /dev/null
+++ b/changedetectionio/tests/test_ui.py
@@ -0,0 +1,80 @@
+#!/usr/bin/env python3
+
+from flask import url_for
+from .util import set_original_response, set_modified_response, live_server_setup, wait_for_all_checks
+
+def test_checkbox_open_diff_in_new_tab(client, live_server):
+    
+    set_original_response()
+    live_server_setup(live_server)
+
+    # Add our URL to the import page
+    res = client.post(
+        url_for("imports.import_page"),
+        data={"urls": url_for('test_endpoint', _external=True)},
+        follow_redirects=True
+    )
+
+    assert b"1 Imported" in res.data
+    wait_for_all_checks(client)
+
+    # Make a change
+    set_modified_response()
+
+    # Test case 1 - checkbox is enabled in settings
+    res = client.post(
+        url_for("settings.settings_page"),
+        data={"application-ui-open_diff_in_new_tab": "1"},
+        follow_redirects=True
+    )
+    assert b'Settings updated' in res.data
+
+    # Force recheck
+    res = client.get(url_for("ui.form_watch_checknow"), follow_redirects=True)
+    assert b'Queued 1 watch for rechecking.' in res.data
+
+    wait_for_all_checks(client)
+    
+    res = client.get(url_for("watchlist.index"))
+    lines = res.data.decode().split("\n")
+
+    # Find link to diff page
+    target_line = None
+    for line in lines:
+        if '/diff' in line:
+            target_line = line.strip()
+            break
+
+    assert target_line != None
+    assert 'target=' in target_line
+
+    # Test case 2 - checkbox is disabled in settings
+    res = client.post(
+        url_for("settings.settings_page"),
+        data={"application-ui-open_diff_in_new_tab": ""},
+        follow_redirects=True
+    )
+    assert b'Settings updated' in res.data
+
+    # Force recheck
+    res = client.get(url_for("ui.form_watch_checknow"), follow_redirects=True)
+    assert b'Queued 1 watch for rechecking.' in res.data
+
+    wait_for_all_checks(client)
+    
+    res = client.get(url_for("watchlist.index"))
+    lines = res.data.decode().split("\n")
+
+    # Find link to diff page
+    target_line = None
+    for line in lines:
+        if '/diff' in line:
+            target_line = line.strip()
+            break
+
+    assert target_line != None
+    assert 'target=' not in target_line
+
+    # Cleanup everything
+    res = client.get(url_for("ui.form_delete", uuid="all"), follow_redirects=True)
+    assert b'Deleted' in res.data