Rewrite SMS ratio form to cope with 3 providers

This replaces the slider with an integer input for each provider.
Unfortunately showing a variable number of inputs isn't easy to
achieve in WTForms [^1], but we think this is the least worst way
to do it vs e.g. not using WTForms at all.

[^1]: https://github.com/wtforms/wtforms/issues/736

app/assets/stylesheets/views/history.scss

@@ -29,67 +29,4 @@ $item-top-padding: govuk-spacing(3);
     display: block;
     color: $secondary-text-colour;
   }
-
-  &-percentage {
-
-    $axis-thickness: 2px;
-    border-bottom: $axis-thickness solid $black;
-    position: relative;
-    margin-bottom: 35px;
-    height: 35px;
-
-    &:before,
-    &:after {
-      content: "";
-      position: absolute;
-      bottom: -6px;
-      left: 0;
-      height: 10px;
-      width: $axis-thickness;
-      background: $black;
-    }
-
-    &:after {
-      left: auto;
-      right: 0;
-    }
-
-    &-without-border {
-      position: relative;
-      padding-top: 35px;
-    }
-
-    &-marker {
-      $size: 20px;
-      $border-thickness: 7px;
-      $text-width: 100px;
-      display: block;
-      width: $size;
-      height: $size;
-      position: absolute;
-      top: 35px - ($size / 2) - ($border-thickness - ($axis-thickness / 2));
-      margin-left: 0 - ($size / 2) - $border-thickness;
-      background: $black;
-      border-radius: $size;
-      border: $border-thickness solid $white;
-    }
-
-    &-left-label,
-    &-right-label {
-      width: 100%;
-      position: absolute;
-      top: 0;
-    }
-
-    &-left-label {
-      left: 0;
-    }
-
-    &-right-label {
-      right: 0;
-      text-align: right;
-    }
-
-  }
-
 }

app/main/forms.py

@@ -1740,29 +1740,26 @@ class EstimateUsageForm(StripWhitespaceForm):
         return super().validate(*args, **kwargs)
 
 
-class AdminProviderRatioForm(StripWhitespaceForm):
+class AdminProviderRatioForm(Form):
+    def __init__(self, providers):
+        # hack: https://github.com/wtforms/wtforms/issues/736
+        self._unbound_fields = [
+            (
+                provider['identifier'],
+                GovukIntegerField(
+                    provider['display_name'],
+                    validators=[validators.NumberRange(
+                        min=0, max=100, message="Must be between 0 and 100"
+                    )]
+                )
+            ) for provider in providers
+        ]
 
-    ratio = GovukRadiosField(choices=[
-            (str(value), '{}% / {}%'.format(value, 100 - value))
-            for value in range(100, -10, -10)
-        ],
-        param_extensions={
-            "classes": "govuk-radios--inline",
-            "fieldset": {
-                "legend": {
-                    "classes": "govuk-visually-hidden"
-                }
-            }
+        super().__init__(data={
+            provider['identifier']: provider['priority']
+            for provider in providers
         })
 
-    @property
-    def percentage_left(self):
-        return int(self.ratio.data)
-
-    @property
-    def percentage_right(self):
-        return 100 - self.percentage_left
-
 
 class ServiceContactDetailsForm(StripWhitespaceForm):
     contact_details_type = RadioField(

app/main/views/providers.py

@@ -54,23 +54,21 @@ def edit_sms_provider_ratio():
         and provider['active']
     ], key=itemgetter('identifier'))
 
-    form = AdminProviderRatioForm(ratio=providers[0]['priority'])
+    form = AdminProviderRatioForm(providers)
 
     if len(providers) < 2:
         abort(400)
 
-    first_provider, second_provider = providers[0:2]
-
     if form.validate_on_submit():
-        provider_client.update_provider(first_provider['id'], form.percentage_left)
-        provider_client.update_provider(second_provider['id'], form.percentage_right)
+        for provider in providers:
+            field = getattr(form, provider['identifier'])
+            provider_client.update_provider(provider['id'], field.data)
         return redirect(url_for('.view_providers'))
 
     return render_template(
         'views/providers/edit-sms-provider-ratio.html',
         form=form,
-        first_provider=providers[0]['display_name'],
-        second_provider=providers[1]['display_name'],
+        providers=providers
     )
 
 

app/templates/views/providers/edit-sms-provider-ratio.html

@@ -4,44 +4,22 @@
 {% from "components/form.html" import form_wrapper %}
 
 {% block per_page_title %}
-  Text message providers
+  Edit SMS provider priorities
 {% endblock %}
 
 {% block platform_admin_content %}
 
-  {{ page_header('Text message providers') }}
+  {{ page_header('Edit SMS provider priorities') }}
 
+  <p class="govuk-body">
+    If you change one priority you will need to change the others so they add up to 100%.
+  </p>
 
-  <h2 class="heading-small top-gutter">
-    Now
-  </h2>
-  <div class="bottom-gutter">
-    <div class="history-list-item">
-      <div class="govuk-grid-row">
-        <div class="govuk-grid-column-one-third">&nbsp;</div>
-        <div class="govuk-grid-column-two-thirds">
-          <div class="history-list-percentage-without-border">
-            <div class="history-list-percentage-left-label">
-              {{ first_provider }}
-            </div>
-            <div class="history-list-percentage-right-label">
-              {{ second_provider }}
-            </div>
-            {% call form_wrapper() %}
-              <div class="radio-slider" data-module="radio-slider">
-                {{ form.ratio }}
-                <div class="radio-slider-left-value">
-                  —
-                </div>
-                <div class="radio-slider-right-value">
-                  —
-                </div>
-              </div>
-              {{ page_footer('Update', centered_button=True) }}
-            {% endcall %}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  {% call form_wrapper() %}
+    {% for field in form %}
+      {{ field }}
+    {% endfor %}
+
+    {{ page_footer('Save') }}
+  {% endcall %}
 {% endblock %}