Added new buttons for forms to be inline and visual highlight

2026-02-06 03:13:42 -05:00 · 2025-10-30 14:14:17 -07:00
parent 949f09bb70
commit 6e20ebb7fa
4 changed files with 152 additions and 50 deletions
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -1171,3 +1171,22 @@ nav.nav {
    }
  }
 }
+
+.is-highlighted {
+  td {
+    background-color: color('blue-cool-5v');
+    animation: fadeHighlight 3s ease-out forwards;
+  }
+}
+
+@keyframes fadeHighlight {
+  0% {
+    background-color: color('blue-cool-10v');
+  }
+  50% {
+    background-color: color('blue-cool-5v');
+  }
+  100% {
+    background-color: transparent;
+  }
+}
--- a/app/main/views/organizations.py
+++ b/app/main/views/organizations.py
@@ -2,7 +2,15 @@ from collections import OrderedDict
 from datetime import datetime
 from functools import partial

-from flask import current_app, flash, redirect, render_template, request, url_for
+from flask import (
+    current_app,
+    flash,
+    redirect,
+    render_template,
+    request,
+    session,
+    url_for,
+)
 from flask_login import current_user

 from app import current_organization, org_invite_api_client, organizations_client
@@ -131,28 +139,41 @@ def organization_dashboard(org_id):
        )

        if request.method == "POST" and create_service_form.validate_on_submit():
+            service_name = create_service_form.name.data
            service_id, error = _create_service(
-                create_service_form.name.data,
+                service_name,
                create_service_form.organization_type.data,
-                email_safe(create_service_form.name.data),
+                email_safe(service_name),
                create_service_form,
            )
            if not error:
-                return redirect(url_for(".service_dashboard", service_id=service_id))
+                current_organization.associate_service(service_id)
+                current_app.logger.info(f"Service {service_id} created and associated with org {org_id}")
+                flash(f"Service '{service_name}' has been created", "default_with_tick")
+                session['new_service_id'] = service_id
+                return redirect(url_for(".organization_dashboard", org_id=org_id))
+            else:
+                current_app.logger.error(f"Error creating service: {error}")
+                flash("Error creating service", "error")

    if action == "invite-user" or request.form.get("form_name") == "invite_user":
        invite_user_form = InviteOrgUserForm(inviter_email_address=current_user.email_address)

        if request.method == "POST" and invite_user_form.validate_on_submit():
-            invited_org_user = InvitedOrgUser.create(
-                current_user.id, org_id, invite_user_form.email_address.data
-            )
-            flash(f"Invite sent to {invited_org_user.email_address}", "default_with_tick")
-            return redirect(url_for(".organization_dashboard", org_id=org_id))
+            try:
+                invited_org_user = InvitedOrgUser.create(
+                    current_user.id, org_id, invite_user_form.email_address.data
+                )
+                flash(f"Invite sent to {invited_org_user.email_address}", "default_with_tick")
+                return redirect(url_for(".organization_dashboard", org_id=org_id))
+            except Exception as e:
+                current_app.logger.error(f"Error inviting user: {e}")
+                flash("Error sending invitation", "error")

    message_allowance = get_organization_message_allowance(org_id)

    services_with_usage = get_services_dashboard_data(current_organization, year)
+    new_service_id = session.pop('new_service_id', None)

    return render_template(
        "views/organizations/organization/index.html",
@@ -166,6 +187,7 @@ def organization_dashboard(org_id):
        invite_user_form=invite_user_form,
        show_create_service=create_service_form is not None,
        show_invite_user=invite_user_form is not None,
+        new_service_id=new_service_id,
        **message_allowance,
    )

--- a/app/templates/components/banner.html
+++ b/app/templates/components/banner.html
@@ -3,31 +3,35 @@

 {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
  <div
-    class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'
+    class="usa-alert {% if type == 'dangerous' %}usa-alert--error{% else %}usa-alert--success{% endif %} banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}"
    {% if id %}
    id={{ id }}
    {% endif %}
  >
-    {% if subhead -%}
-      <h1 class="banner-title font-body-lg">{{ subhead }}</h1>
-    {%- endif -%}
-    {{ body }}
-    {% if context %}
-    <p class="usa-body">
-      {{ context }}
-    </p>
-    {% endif %}
-    {% if delete_button %}
-      {% call form_wrapper(action=action) %}
-        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-        {{ usaButton({
-          "text": "" if thing else delete_button,
-          "html": delete_button + "<span class=\"usa-sr-only\"> ‘" + thing + "’</span>" if thing else "",
-          "name": "delete",
-          "classes": "margin-top-2 usa-button--secondary",
-        }) }}
-      {% endcall %}
-    {% endif %}
+    <div class="usa-alert__body">
+      {% if subhead -%}
+        <h3 class="usa-alert__heading">{{ subhead }}</h3>
+      {%- endif -%}
+      <p class="usa-alert__text">
+        {{ body }}
+      </p>
+      {% if context %}
+      <p class="usa-alert__text">
+        {{ context }}
+      </p>
+      {% endif %}
+      {% if delete_button %}
+        {% call form_wrapper(action=action) %}
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+          {{ usaButton({
+            "text": "" if thing else delete_button,
+            "html": delete_button + "<span class=\"usa-sr-only\"> '" + thing + "'</span>" if thing else "",
+            "name": "delete",
+            "classes": "margin-top-2 usa-button--secondary",
+          }) }}
+        {% endcall %}
+      {% endif %}
+    </div>
  </div>
 {% endmacro %}

--- a/app/templates/views/organizations/organization/index.html
+++ b/app/templates/views/organizations/organization/index.html
@@ -68,7 +68,7 @@
  </div>

  {% if show_create_service and create_service_form %}
-    <div class="bg-base-lightest padding-3 radius-md margin-bottom-3 position-relative">
+    <div id="create-service-form" class="bg-base-lightest padding-3 radius-md margin-bottom-3 position-relative">
      <a href="{{ url_for('.organization_dashboard', org_id=current_org.id) }}" class="position-absolute top-1 right-1 text-base-dark text-no-underline hover:text-primary" aria-label="Close">
        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/static/images/sprite.svg#close"></use>
@@ -90,7 +90,7 @@
  {% endif %}

  {% if show_invite_user and invite_user_form %}
-    <div class="bg-base-lightest padding-3 radius-md margin-bottom-3 position-relative">
+    <div id="invite-user-form" class="bg-base-lightest padding-3 radius-md margin-bottom-3 position-relative">
      <a href="{{ url_for('.organization_dashboard', org_id=current_org.id) }}" class="position-absolute top-1 right-1 text-base-dark text-no-underline hover:text-primary" aria-label="Close">
        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="/static/images/sprite.svg#close"></use>
@@ -112,23 +112,31 @@
    </div>
  {% endif %}

-  <details class="usa-details">
-    <summary class="usa-details__summary font-heading-lg  ">What is a service?</summary>
-      <div class="usa-details__content">
-        <p class="usa-body">
-          When you join Notify, you're added to a service. This is your organization's workspace for sending text messages and emails. Within your service, you can:
-        </p>
-        <ol class="usa-list">
-          <li>Create and edit message templates</li>
-          <li>Send messages to recipients</li>
-          <li>View message status and history</li>
-          <li>Manage team members and permissions</li>
-          <li>Track usage and delivery statistics</li>
-          <li>If you work for multiple organizations, you may belong to multiple services and can switch between them.</li>
-        </ol>
-      </div>
-    </details>
-
+  <div class="usa-accordion margin-bottom-3">
+    <h3 class="usa-accordion__heading">
+      <button
+        type="button"
+        class="usa-accordion__button"
+        aria-expanded="false"
+        aria-controls="what-is-service-content"
+      >
+        What is a service?
+      </button>
+    </h3>
+    <div id="what-is-service-content" class="usa-accordion__content usa-prose" hidden>
+      <p>
+        When you join Notify, you're added to a service. This is your organization's workspace for sending text messages and emails. Within your service, you can:
+      </p>
+      <ol class="usa-list">
+        <li>Create and edit message templates</li>
+        <li>Send messages to recipients</li>
+        <li>View message status and history</li>
+        <li>Manage team members and permissions</li>
+        <li>Track usage and delivery statistics</li>
+        <li>If you work for multiple organizations, you may belong to multiple services and can switch between them.</li>
+      </ol>
+    </div>
+  </div>


  <div class="margin-bottom-5">
@@ -147,7 +155,8 @@
        <tbody>
          {% if services %}
            {% for service in services %}
-            <tr>
+            {% set is_new_service = new_service_id and service.id == new_service_id %}
+            <tr id="service-{{ service.id }}" {% if is_new_service %}class="is-highlighted"{% endif %}>
              <td><a href="{{ url_for('main.service_dashboard', service_id=service.id) }}" class="usa-link">{{ service.name }}</a></td>
              <td>
                {% if not service.active %}
@@ -174,3 +183,51 @@
  </div>

 {% endblock %}
+
+{% block extra_javascripts %}
+  <script nonce="{{ csp_nonce() }}">
+    (function() {
+      function scrollToElement(element, delay) {
+        setTimeout(function() {
+          element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          });
+        }, delay || 0);
+      }
+
+      function focusFirstInput(container, delay) {
+        setTimeout(function() {
+          var input = container.querySelector('input[type="text"], input[type="search"]');
+          if (input) input.focus();
+        }, delay || 0);
+      }
+
+      {% if new_service_id %}
+      var serviceRow = document.getElementById('service-{{ new_service_id }}');
+      if (serviceRow) {
+        scrollToElement(serviceRow, 300);
+
+        setTimeout(function() {
+          serviceRow.classList.remove('is-highlighted');
+          if (serviceRow.className === '') {
+            serviceRow.removeAttribute('class');
+          }
+        }, 3300);
+      }
+      {% endif %}
+
+      requestAnimationFrame(function() {
+        var form = document.getElementById('create-service-form') ||
+                   document.getElementById('invite-user-form');
+
+        if (form) {
+          scrollToElement(form, 50);
+          focusFirstInput(form, 150);
+        }
+      });
+    })();
+  </script>
+  {{ super() }}
+{% endblock %}