UX improvement for enabling payment provider plugins (#6364)

Make flow of enabling new payment plugin smoother by redirecting back to
payment settings, and highlighting the newly enabled provider.

src/pretix/control/templates/pretixcontrol/event/payment.html

@@ -12,7 +12,7 @@
                 <table class="table table-payment-providers">
                     <tbody>
                     {% for provider in providers %}
-                        <tr>
+                        <tr{% if provider.highlight %} class="success-left"{% endif %}>
                             <td>
                                 <strong>{{ provider.verbose_name }}</strong>
                             </td>
@@ -56,7 +56,7 @@
                             <td colspan="4">
                                 <br>
                                 {% url "control:event.settings.plugins" event=request.event.slug organizer=request.organizer.slug as plugin_settings_url %}
-                                <a href="{{ plugin_settings_url }}#tab-0-1-open" class="btn btn-default">
+                                <a href="{{ plugin_settings_url }}?go=payment#tab-0-1-open" class="btn btn-default">
                                     <i class="fa fa-plus"></i> {% trans "Enable additional payment plugins" %}
                                 </a>
                             </td>

src/pretix/control/templates/pretixcontrol/event/plugins.html

@@ -28,6 +28,7 @@
     </div>
     <form action="" method="post" class="form-horizontal form-plugins">
         {% csrf_token %}
+        <input type="hidden" name="go" value="{{ request.GET.go }}">
         <div id="plugin_search_results" class="panel panel-default collapse">
             <div class="panel-heading">
                 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

src/pretix/control/views/event.py

@@ -41,7 +41,7 @@ from collections import OrderedDict, defaultdict
 from decimal import Decimal
 from io import BytesIO
 from itertools import groupby
-from urllib.parse import urlsplit
+from urllib.parse import quote, urlsplit
 from zoneinfo import ZoneInfo
 
 import bleach
@@ -82,7 +82,7 @@ from pretix.base.models import Event, LogEntry, Order, TaxRule, Voucher
 from pretix.base.models.event import EventMetaValue
 from pretix.base.services import tickets
 from pretix.base.services.invoices import build_preview_invoice_pdf
-from pretix.base.signals import register_ticket_outputs
+from pretix.base.signals import get_defining_app, register_ticket_outputs
 from pretix.base.templatetags.rich_text import markdown_compile_email
 from pretix.control.forms.event import (
     CancelSettingsForm, CommentForm, ConfirmTextFormset, EventDeleteForm,
@@ -441,6 +441,7 @@ class EventPlugins(EventSettingsViewMixin, EventPermissionRequiredMixin, Templat
         plugins_available = {
             p.module: p for p in self.available_plugins(self.object)
         }
+        plugin_enabled = None
 
         with transaction.atomic():
             save_organizer = False
@@ -490,6 +491,7 @@ class EventPlugins(EventSettingsViewMixin, EventPermissionRequiredMixin, Templat
                                 format_html(_('The plugin {} is now active.'),
                                             format_html("<strong>{}</strong>", pluginmeta.name)),
                             ]
+                        plugin_enabled = module
                         messages.success(self.request, mark_safe("".join(info)))
                     else:
                         self.request.event.log_action('pretix.event.plugins.disabled', user=self.request.user,
@@ -499,13 +501,19 @@ class EventPlugins(EventSettingsViewMixin, EventPermissionRequiredMixin, Templat
             self.object.save()
             if save_organizer:
                 self.object.organizer.save()
-        return redirect(self.get_success_url())
+        return redirect(self.get_success_url(plugin_enabled))
 
-    def get_success_url(self) -> str:
-        return reverse('control:event.settings.plugins', kwargs={
-            'organizer': self.request.organizer.slug,
-            'event': self.request.event.slug,
-        })
+    def get_success_url(self, plugin_enabled) -> str:
+        if plugin_enabled and self.request.POST.get('go') == 'payment':
+            return reverse('control:event.settings.payment', kwargs={
+                'organizer': self.request.organizer.slug,
+                'event': self.request.event.slug,
+            }) + '?highlight=' + quote(plugin_enabled) + '#'
+        else:
+            return reverse('control:event.settings.plugins', kwargs={
+                'organizer': self.request.organizer.slug,
+                'event': self.request.event.slug,
+            })
 
 
 class PaymentProviderSettings(EventSettingsViewMixin, EventPermissionRequiredMixin, TemplateView, SingleObjectMixin):
@@ -671,6 +679,8 @@ class PaymentSettings(WritePermissionMixin, EventSettingsViewMixin, EventSetting
             p.sales_channels = [sales_channels[channel] for channel in p.settings.get('_restrict_to_sales_channels', as_type=list, default=['web'])]
             if p.is_meta:
                 p.show_enabled = p.settings._enabled in (True, 'True')
+            if self.request.GET.get('highlight') and getattr(get_defining_app(p), 'name', None) == self.request.GET.get('highlight'):
+                p.highlight = True
         return context
 
 

src/pretix/static/pretixcontrol/scss/main.scss

@@ -646,7 +646,10 @@ ul.pagination {
 .table-payment-providers > tbody > tr > td {
     vertical-align: middle;
 }
-
+.success-left {
+  border-left: 3px solid $brand-success;
+  background: var(--pretix-brand-success-lighten-50);
+}
 
 details {
     list-style: none;