Org: Adds a preview field for short links

TYPE: Feature
LINK: OGC-3259

Author: Daverball

.pre-commit-config.yaml

@@ -42,7 +42,7 @@ repos:
     - id: eslint
       files: '^src/.*\.jsx?$'
       additional_dependencies:
-      - eslint-react
+      - eslint-plugin-react
   - repo: https://github.com/PyCQA/bandit
     rev: 1.9.4
     hooks:

src/onegov/form/assets/js/preview-widget.js

@@ -69,7 +69,7 @@ var PreviewWidgetHandler = function(el) {
             field.addEventListener('click', submit, false);
         },
         'type': function(field) {
-            field.addEventListener('keypress', debounce(function() {
+            field.addEventListener('keyup', debounce(function() {
                 submit();
             }, 250));
         },

src/onegov/org/forms/settings.py

@@ -535,6 +535,16 @@ class LinksSettingsForm(Form):
         render_kw={'rows': 10}
     )
 
+    preview = PreviewField(
+        label=_('Preview'),
+        fields=('short_links',),
+        events=('change', 'type'),
+        url=lambda meta: meta.request.link(
+            meta.request.app.org,
+            name='link-settings-preview'
+        )
+    )
+
     def validate_short_links(self, field: TextAreaField) -> None:
         if not field.data:
             return

src/onegov/org/theme/styles/org.scss

@@ -2422,11 +2422,13 @@ div#redactor-droparea {
     }
 }
 
-.form-preview-widget .holidays {
-    display: block;
-    font-size: .875rem;
-    list-style: none;
-    margin: 0 0 1rem;
+.form-preview-widget {
+    .holidays, .short-links {
+        display: block;
+        font-size: .875rem;
+        list-style: none;
+        margin: 0 0 1rem;
+    }
 }
 
 .danger-zone {

src/onegov/org/views/settings.py

@@ -6,11 +6,13 @@
 from dectate import Query
 from markupsafe import Markup
 from webob.exc import HTTPForbidden
+from onegov.api.models import ApiKey
 from onegov.core.elements import Link, Confirm, Intercooler, BackLink
 from onegov.core.security import Secret
 from onegov.core.templates import render_macro
 from onegov.form import Form
 from onegov.org import _
+from onegov.org.app import OrgApp
 from onegov.org.forms import AnalyticsSettingsForm
 from onegov.org.forms import FooterSettingsForm
 from onegov.org.forms import AppearanceSettingsForm
@@ -25,14 +27,13 @@
     GeverSettingsForm, OneGovApiSettingsForm, DataRetentionPolicyForm,
     VATSettingsForm, EventSettingsForm, KabaSettingsForm,
     ResourceSettingsForm)
-from onegov.org.management import LinkHealthCheck
 from onegov.org.layout import DefaultLayout
 from onegov.org.layout import SettingsLayout
+from onegov.org.management import LinkHealthCheck
 from onegov.org.management import LinkMigration
 from onegov.org.models import Organisation
 from onegov.org.models import SwissHolidays
-from onegov.api.models import ApiKey
-from onegov.org.app import OrgApp
+from onegov.org.path import ShortLink
 from uuid import uuid4
 
 
@@ -502,6 +503,44 @@ def preview_holiday_settings(
     )
 
 
+@OrgApp.form(model=Organisation, name='link-settings-preview',
+             permission=Secret, form=LinksSettingsForm)
+def preview_link_settings(
+    self: Organisation,
+    request: OrgRequest,
+    form: LinksSettingsForm,
+    layout: DefaultLayout | None = None
+) -> str:
+
+    layout = layout or DefaultLayout(self, request)
+    link_names = [
+        parts[0]
+        for line in (form.short_links.data or '').splitlines()
+        if len(parts := line.split(':', 1)) == 2
+    ]
+
+    if not link_names:
+        msg = request.translate(_('No short links defined'))
+        return f'<i class="short-links">{msg}</i>'
+
+    return Markup('<ul class="short-links">{}</ul>').format(
+        Markup('').join(
+            Markup(
+                '<li><a href="{0}" target="_blank">{0}</a></li>'
+            ).format(
+                request.class_link(
+                    ShortLink,
+                    {'name': name}
+                    # NOTE: Even though @ is reserved, it's safe to use
+                    #       in the position we're using it in, browsers
+                    #       will automatically convert them.
+                ).replace('/%40', '/@'),
+            )
+            for name in link_names
+        )
+    )
+
+
 @OrgApp.form(
     model=Organisation, name='migrate-links', template='form.pt',
     permission=Secret, form=LinkMigrationForm, setting=_('Link Migration'),

src/onegov/town6/theme/styles/org-settings.scss

@@ -47,11 +47,13 @@
     margin-left: -1em;
 }
 
-.form-preview-widget .holidays {
-    display: block;
-    font-size: .875rem;
-    list-style: none;
-    margin: 0 0 1rem;
+.form-preview-widget {
+    .holidays, .short-links {
+        display: block;
+        font-size: .875rem;
+        list-style: none;
+        margin: 0 0 1rem;
+    }
 }
 
 #header_links {