Working through the Platform Admin section

2026-08-18 21:49:37 -04:00 · 2023-08-17 15:13:26 -04:00
parent 031a643b26
commit a574fc7b3a
37 changed files with 83 additions and 74 deletions
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -47,6 +47,12 @@ p,
   font-size: size("body", 6);
 }

+ul {
+   padding: 0; 
+   margin: 0;
+   list-style: none; 
+}
+
 .large-number {
   font-size: size("body", 16);
 }
@@ -355,3 +361,19 @@ td.table-empty-message {
      }
   }
 }
+
+// Etc
+
+.email-brand, .browse-list {
+   padding: 0; 
+   margin: 0; 
+   list-style: none; 
+   margin-bottom: units(2);
+   li {
+      padding: 8px 0; 
+   }
+}
+
+details form {
+   box-sizing:border-box;
+}
--- a/app/assets/sass/uswds/_uswds-theme.scss
+++ b/app/assets/sass/uswds/_uswds-theme.scss
@@ -7,7 +7,7 @@ in the form $setting: value,
 ----------------------------------------
 */

-@use "uswds-core" with (
+@use "uswds-global" with (
   $theme-font-type-sans: "public-sans",
   $theme-show-notifications: false
 );
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -313,7 +313,7 @@ class GovukSearchField(SearchField):
    # this bypasses that by making self.widget a method with the same interface as widget.__call__
    def widget(self, field, param_extensions=None, **kwargs):

-        params = {"classes": "govuk-!-width-full"}  # email addresses don't need to be spellchecked
+        params = {"classes": ""}  # email addresses don't need to be spellchecked
        merge_jsonlike(params, param_extensions)

        return govuk_text_input_field_widget(self, field, type="search", param_extensions=params, **kwargs)
--- a/app/templates/components/list-entry.html
+++ b/app/templates/components/list-entry.html
@@ -48,7 +48,7 @@
              "html": '<span class="usa-sr-only">' + item_name + ' number </span>' + loop.index|string + '.',
              "classes": label_classes
            },
-            "classes": "govuk-input--numbered govuk-!-width-full",
+            "classes": "govuk-input--numbered ",
            "value": field.data[loop.index0],
            "autocomplete": autocomplete
          }) }}
--- a/app/templates/components/us_components/details/template.njk
+++ b/app/templates/components/us_components/details/template.njk
@@ -1,4 +1,4 @@
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}
--- a/app/templates/components/us_components/input/template.njk
+++ b/app/templates/components/us_components/input/template.njk
@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="{%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
  {{ govukLabel({
    html: params.label.html,
    text: params.label.text,
--- a/app/templates/views/api/callbacks/delivery-status-callback.html
+++ b/app/templates/views/api/callbacks/delivery-status-callback.html
@@ -26,12 +26,12 @@

      {% call form_wrapper() %}
        {{ form.url(param_extensions={
-          "classes": "govuk-!-width-full",
+          "classes": "",
          "hint": {"text": "Must start with https://"}
        }) }}

        {{ form.bearer_token(param_extensions={
-          "classes": "govuk-!-width-full",
+          "classes": "",
          "hint": {"text": "At least 10 characters"},
          "autocomplete": "new-password"
        }) }}
--- a/app/templates/views/api/callbacks/received-text-messages-callback.html
+++ b/app/templates/views/api/callbacks/received-text-messages-callback.html
@@ -23,12 +23,12 @@

      {% call form_wrapper() %}
      {{ form.url(param_extensions={
-        "classes": "govuk-!-width-full",
+        "classes": "",
        "hint": {"text": "Must start with https://"}
      }) }}

      {{ form.bearer_token(param_extensions={
-        "classes": "govuk-!-width-full",
+        "classes": "",
        "hint": {"text": "At least 10 characters"},
        "autocomplete": "new-password"
      }) }}
--- a/app/templates/views/edit-email-template.html
+++ b/app/templates/views/edit-email-template.html
@@ -23,7 +23,7 @@
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-five-sixths">
          {{ form.name(param_extensions={
-            "classes": "govuk-!-width-full",
+            "classes": "",
            "hint": {"text": "Your recipients will not see this"}
          }) }}
          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -35,7 +35,7 @@
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-two-thirds">
          {{ form.name(param_extensions={
-            "classes": "govuk-!-width-full",
+            "classes": "",
            "hint": {"text": "Your recipients will not see this"}
          }) }}
          {{ textbox(
--- a/app/templates/views/email-branding/select-branding.html
+++ b/app/templates/views/email-branding/select-branding.html
@@ -12,17 +12,17 @@
 {% block platform_admin_content %}

  <h1 class="font-body-2xl">{{ page_title }}</h1>
-  {{ live_search(target_selector='.email-brand', show=True, form=search_form, autofocus=True) }}
+  {{ live_search(target_selector='.message-name', show=True, form=search_form, autofocus=True) }}
  <nav>
-    {% for brand in email_brandings %}
-      <div class="email-brand">
-        <div class="message-name">
+      <ul class="email-brand">
+        {% for brand in email_brandings %}
+        <li class="message-name">
          <a class="usa-link" href="{{ url_for('.update_email_branding', branding_id=brand.id) }}">
            {{ brand.name or 'Unnamed' }}
          </a>
-        </div>
-      </div>
-    {% endfor %}
+        </li>
+        {% endfor %}
+      </ul>
  </nav>
  <div class="js-stick-at-bottom-when-scrolling">
    {{ govukButton({
--- a/app/templates/views/find-services/find-services-by-name.html
+++ b/app/templates/views/find-services/find-services-by-name.html
@@ -16,20 +16,16 @@

  {% call form_wrapper(
      action=url_for('.find_services_by_name'),
-      class='govuk-grid-row'
+      class='usa-search margin-bottom-4'
  ) %}
-    <div class="govuk-grid-column-three-quarters">
      {{ form.search(param_extensions={
        "label": {"text": "Find services by name, partial name, or service ID"}
      }) }}
-    </div>
-    <div class="govuk-grid-column-one-quarter">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      {{ govukButton({
        "text": "Search",
-        "classes": "search-form__button"
+        "classes": "usa-button search-form__button"
      }) }}
-    </div>
  {% endcall %}

  {% call form_wrapper(id='search-form' ) %}
@@ -43,7 +39,6 @@
      <li class="browse-list-item">
        <a href="{{url_for('.service_dashboard', service_id=service.id)}}" class="usa-link">{{ service.name }}</a>
      </li>
-      <hr>
    {% endfor %}
    </ul>
  </nav>
--- a/app/templates/views/find-users/find-users-by-email.html
+++ b/app/templates/views/find-users/find-users-by-email.html
@@ -16,20 +16,16 @@

  {% call form_wrapper(
      action=url_for('.find_users_by_email'),
-      class='govuk-grid-row'
+      class='usa-search margin-bottom-4'
  ) %}
-    <div class="govuk-grid-column-three-quarters">
      {{ form.search(param_extensions={
            "label": {"text": "Find users by email, or by partial email"}
      }) }}
-    </div>
-    <div class="govuk-grid-column-one-quarter">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      {{ govukButton({
        "text": "Search",
        "classes": "search-form__button"
      }) }}
-    </div>
  {% endcall %}

  {% call form_wrapper(id='search-form' ) %}
@@ -42,9 +38,9 @@
    {% for user in users_found %}
      <li class="browse-list-item">
        <a href="{{url_for('.user_information', user_id=user.id)}}" class="usa-link browse-list-link">{{ user.email_address }}</a>
-        <p class="browse-list-hint">{{ user.name }}</p>
+        <span>  -  </span>
+        <span class="browse-list-hint">{{ user.name }}</span>
      </li>
-      <hr>
    {% endfor %}
    </ul>
  </nav>
--- a/app/templates/views/inbound-sms-admin.html
+++ b/app/templates/views/inbound-sms-admin.html
@@ -24,11 +24,7 @@ Inbound SMS
    Inbound SMS
  </h1>

-  <table class="inbound">
-          <col style="width:8%">
-          <col style="width:20%">
-          <col style="width:17%">
-          <col style="width:30%">
+  <table class="usa-table usa-table--borderless inbound">
          <thread>
              <tr>
                <th>{{table_headings.field_headings[0]}}</th>
--- a/app/templates/views/invite-user.html
+++ b/app/templates/views/invite-user.html
@@ -25,7 +25,7 @@
    {% else %}
      {{ form.email_address(
        param_extensions={
-          "classes": "govuk-!-width-full"
+          "classes": ""
        },
        error_message_with_html=True
      ) }}
--- a/app/templates/views/manage-users/edit-user-email.html
+++ b/app/templates/views/manage-users/edit-user-email.html
@@ -19,7 +19,7 @@

  <p id="user_name">This will change the email address for {{ user.name }}.</p>
  {% call form_wrapper() %}
-    {{ form.email_address(param_extensions={"classes": "govuk-!-width-full"}, error_message_with_html=True) }}
+    {{ form.email_address(param_extensions={"classes": ""}, error_message_with_html=True) }}
    {{ page_footer('Save') }}
  {% endcall %}

--- a/app/templates/views/organizations/organization/settings/edit-organization-billing-details.html
+++ b/app/templates/views/organizations/organization/settings/edit-organization-billing-details.html
@@ -18,11 +18,11 @@
    {{ page_header('Edit organization billing details') }}

    {% call form_wrapper() %}
-      {{ form.billing_contact_names(param_extensions={"classes": "govuk-!-width-full"}) }}
-      {{ form.billing_contact_email_addresses(param_extensions={"classes": "govuk-!-width-full"}) }}
+      {{ form.billing_contact_names(param_extensions={"classes": ""}) }}
+      {{ form.billing_contact_email_addresses(param_extensions={"classes": ""}) }}
    <div class="extra-tracking">
-        {{ form.billing_reference(param_extensions={"classes": "govuk-!-width-full"}) }}
-        {{ form.purchase_order_number(param_extensions={"classes": "govuk-!-width-full"}) }}
+        {{ form.billing_reference(param_extensions={"classes": ""}) }}
+        {{ form.purchase_order_number(param_extensions={"classes": ""}) }}
    </div>
      {{ textbox(
        form.notes,
--- a/app/templates/views/organizations/organization/users/invite-org-user.html
+++ b/app/templates/views/organizations/organization/users/invite-org-user.html
@@ -19,7 +19,7 @@
  {% call form_wrapper() %}
    {{ form.email_address(
      param_extensions={
-        "classes": "govuk-!-width-full"
+        "classes": ""
      },
      error_message_with_html=True
    ) }}
--- a/app/templates/views/platform-admin/index.html
+++ b/app/templates/views/platform-admin/index.html
@@ -20,7 +20,7 @@
      {{ form.start_date(param_extensions={"hint": {"text":"Enter start date in format YYYY-MM-DD"}}) }}
      {{ form.end_date(param_extensions={"hint": {"text":"Enter end date in format YYYY-MM-DD"}}) }}
      </br>
-      {{ govukButton({ "text": "Filter" }) }}
+      {{ govukButton({ "text": "Filter", "classes": "margin-y-2" }) }}
    {% endcall %}
  {% endset %}

--- a/app/templates/views/platform-admin/services.html
+++ b/app/templates/views/platform-admin/services.html
@@ -67,7 +67,7 @@
      {{ form.start_date(param_extensions={"hint": {"text": "Enter start date in format YYYY-MM-DD"}}) }}
      {{ form.end_date(param_extensions={"hint": {"text": "Enter end date in format YYYY-MM-DD"}}) }}
      {{ form.include_from_test_key }}
-      {{ govukButton({ "text": "Filter" }) }}
+      {{ govukButton({ "text": "Filter", "classes": "margin-y-2" }) }}
    {% endcall %}
  {% endset %}

--- a/app/templates/views/send-test.html
+++ b/app/templates/views/send-test.html
@@ -25,7 +25,7 @@
  ) %}
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-full {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
-        {{ form.placeholder_value(param_extensions={"classes": "govuk-!-width-full"}) }}
+        {{ form.placeholder_value(param_extensions={"classes": ""}) }}
      </div>
      {% if skip_link or link_to_upload %}
        <div class="govuk-grid-column-full">
--- a/app/templates/views/service-settings/edit-service-billing-details.html
+++ b/app/templates/views/service-settings/edit-service-billing-details.html
@@ -20,11 +20,11 @@
  {{ page_header('Change billing details') }}

  {% call form_wrapper() %}
-    {{ form.billing_contact_names(param_extensions={"classes": "govuk-!-width-full"}) }}
-    {{ form.billing_contact_email_addresses(param_extensions={"classes": "govuk-!-width-full"}) }}
+    {{ form.billing_contact_names(param_extensions={"classes": ""}) }}
+    {{ form.billing_contact_email_addresses(param_extensions={"classes": ""}) }}
  <div class="extra-tracking">
-      {{ form.billing_reference(param_extensions={"classes": "govuk-!-width-full"}) }}
-      {{ form.purchase_order_number(param_extensions={"classes": "govuk-!-width-full"}) }}
+      {{ form.billing_reference(param_extensions={"classes": ""}) }}
+      {{ form.purchase_order_number(param_extensions={"classes": ""}) }}
  </div>
    {{ textbox(
      form.notes,
--- a/app/templates/views/service-settings/email-reply-to/_verify-updates.html
+++ b/app/templates/views/service-settings/email-reply-to/_verify-updates.html
@@ -49,7 +49,7 @@
      {{ form.email_address(
          param_extensions={
            "hint": {"text": "This should be a shared inbox managed by your team, not your own email address"},
-            "classes": "govuk-!-width-full"
+            "classes": ""
          },
          error_message_with_html=True
      ) }}
--- a/app/templates/views/service-settings/email-reply-to/add.html
+++ b/app/templates/views/service-settings/email-reply-to/add.html
@@ -20,7 +20,7 @@
    {{ form.email_address(
        param_extensions={
          "hint": {"text": "This should be a shared inbox managed by your team, not your own email address"},
-          "classes": "govuk-!-width-full"
+          "classes": ""
        },
        error_message_with_html=True
    ) }}
--- a/app/templates/views/service-settings/email-reply-to/edit.html
+++ b/app/templates/views/service-settings/email-reply-to/edit.html
@@ -19,7 +19,7 @@
    {{ form.email_address(
        param_extensions={
          "hint": {"text": "This should be a shared inbox managed by your team, not your own email address"},
-          "classes": "govuk-!-width-full"
+          "classes": ""
        },
        error_message_with_html=True
    ) }}
--- a/app/templates/views/service-settings/send-files-by-email.html
+++ b/app/templates/views/service-settings/send-files-by-email.html
@@ -36,7 +36,7 @@

            {{ radio(option, data_target=data_target) }}
            <div class="panel panel-border-narrow js-hidden" id={{data_target}}>
-              {{ form|attr(option.data)(param_extensions={"classes": "govuk-!-width-full", "label": {"text": " "}}) }}
+              {{ form|attr(option.data)(param_extensions={"classes": "", "label": {"text": " "}}) }}
            </div>
          {% endfor %}
        {% endcall %}
--- a/app/templates/views/support/form.html
+++ b/app/templates/views/support/form.html
@@ -29,8 +29,8 @@
        {% call form_wrapper() %}
            {{ textbox(form.feedback, width='1-1', hint='', rows=10, autosize=True) }}
            {% if not current_user.is_authenticated %}
-              {{ form.name(param_extensions={"classes": "govuk-!-width-full"}) }}
-              {{ form.email_address(param_extensions={"classes": "govuk-!-width-full"}) }}
+              {{ form.name(param_extensions={"classes": ""}) }}
+              {{ form.email_address(param_extensions={"classes": ""}) }}
            {% else %}
              <p>We’ll reply to {{ current_user.email_address }}</p>
            {% endif %}
--- a/app/templates/views/templates/_move_to.html
+++ b/app/templates/views/templates/_move_to.html
@@ -15,14 +15,14 @@
    </div>
    <div id="move_to_new_folder_form" class="sticky-template-form" role="region" aria-label="Enter name of the new folder to move selected items to">
      <div class="js-will-stick-at-bottom-when-scrolling">
-        {{ templates_and_folders_form.move_to_new_folder_name(param_extensions={"classes": "govuk-!-width-full"}) }}
+        {{ templates_and_folders_form.move_to_new_folder_name(param_extensions={"classes": ""}) }}
        {{ page_footer('Add to new folder', button_name='operation', button_value='move-to-new-folder') }}
      </div>
    </div>
  {% endif %}
  <div id="add_new_folder_form" class="sticky-template-form" role="region" aria-label="Enter name of the new folder">
    <div class="js-will-stick-at-bottom-when-scrolling">
-      {{ templates_and_folders_form.add_new_folder_name(param_extensions={"classes": "govuk-!-width-full"}) }}
+      {{ templates_and_folders_form.add_new_folder_name(param_extensions={"classes": ""}) }}
      {{ page_footer('Add new folder', button_name='operation', button_value='add-new-folder') }}
    </div>
  </div>
--- a/app/templates/views/templates/manage-template-folder.html
+++ b/app/templates/views/templates/manage-template-folder.html
@@ -23,7 +23,7 @@

  {% call form_wrapper(action=url_for('main.manage_template_folder', service_id=current_service.id, template_folder_id=template_folder_id)) %}
    {{ form.name(param_extensions={
-            "classes": "govuk-!-width-full"
+            "classes": ""
    }) }}
    {% if current_user.has_permissions("manage_service") and form.users_with_permission.all_service_users %}
      {{ form.users_with_permission }}