Design/admin panel (#2044)

* add translation keys + format * add translation keys + format * fix test on service table * caught some missing _s and fix tests * remove whitespace * fix tests * fix url test from admin to dashboard * some manual html formatting and removing some tailwind that I did not use * add active menu items on admin * missed a merge flag * bad merge on email preview * logo preview iframe styles were not loaded * merge branding preview markup * fix bug with tbody borders on firefox * format * zebra striping in service table * format * compile css --------- Co-authored-by: Philippe Caron <vscode@localhost>
cds-snc · Feb 27, 2025 · 2737a18 · 2737a18
1 parent 6b37474
commit 2737a18
Show file tree

Hide file tree

Showing 15 changed files with 105 additions and 85 deletions.
diff --git a/app/assets/javascripts/previewPane.js b/app/assets/javascripts/previewPane.js
@@ -23,7 +23,7 @@
     `<iframe src="/_${previewType}?${buildQueryString([
       "branding_style",
       branding_style,
-    ])}" class="branding-preview border-4 border-gray-200" width="600px" height="345px"></iframe>`,
+    ])}" class="branding-preview" width="600px" height="345px"></iframe>`,
   );
 
   function buildQueryString() {

diff --git a/app/assets/stylesheets/index.css b/app/assets/stylesheets/index.css
diff --git a/app/assets/stylesheets/tailwind/components/preview-pane.css b/app/assets/stylesheets/tailwind/components/preview-pane.css
@@ -1,8 +1,6 @@
 @layer components {
   .branding-preview {
-    min-height: 200px;
-    border-width: 1px;
-    @apply w-full mb-12 box-border border-solid border-gray-grey2;
+    @apply box-border border mb-gutterHalf border-gray-300;
   }
 
   #logo-img {

diff --git a/app/assets/stylesheets/tailwind/components/table.css b/app/assets/stylesheets/tailwind/components/table.css
@@ -8,7 +8,7 @@
   table th,
   table td {
     padding: 0.632em 1.05em 0.4743em 0;
-    @apply leading-tight text-smaller text-left border-solid border-0 border-b-1 border-gray-300;
+    @apply leading-tight text-smaller text-left border-solid border-0 border-b-1 border-gray-300 align-baseline;
   }
   thead th {
     @apply font-bold;
@@ -54,7 +54,7 @@
   }
 
   .table-row-group {
-    @apply border-0 border-t-1 border-b-1 border-solid border-gray-300;
+    @apply bg-white odd:bg-gray-100 border-0 border-b-1 border-solid border-gray-300;
   }
 
   .dashboard-table .heading-medium {
@@ -95,10 +95,6 @@
   .settings-table .table-heading {
     @apply mb-8;
   }
-
-  .table-field {
-    @apply align-top;
-  }
   .table-field-index {
     width: 15px;
     @apply relative text-smaller leading-tight font-bold;
@@ -134,7 +130,7 @@
   }
   .table-field-headings th,
   .table-field-headings-visible th {
-    @apply text-smaller leading-tight font-bold;
+    @apply text-smaller leading-tight font-bold align-baseline;
   }
   .dashboard-table .table-field-heading-first,
   .dashboard-table .table-field-headings-first,

diff --git a/app/assets/stylesheets/tailwind/style.css b/app/assets/stylesheets/tailwind/style.css
@@ -40,6 +40,7 @@
 @import "./components/task-list.css";
 @import "./components/back-link.css";
 @import "./components/preview-fullpage-border.css";
+@import "./components/preview-pane.css";
 @import "./components/remaining-messages.css";
 @import "./components/empty-list.css";
 @import "./components/autocomplete.css";

diff --git a/app/navigation.py b/app/navigation.py
@@ -247,6 +247,23 @@ class HeaderNavigation(Navigation):
             "view_jobs",
             "view_job",
         },
+        "platform_admin": {
+            "live_services",
+            "trial_services",
+            "organisations",
+            "live_api_keys",
+            "email_branding",
+            "template_categories",
+            "template_category",
+            "find_services_by_name",
+            "find_users_by_email",
+            "find_ids",
+            "platform_admin_list_complaints",
+            "platform_admin_reports",
+            "inbound_sms_admin",
+            "view_providers",
+            "clear_cache",
+        },
     }
 
     exclude = {

diff --git a/app/templates/components/empty-list.html b/app/templates/components/empty-list.html
@@ -1,11 +1,15 @@
-{% macro empty_list(heading, message, img="emptyFlower", link=None, linkText="", attributes="") %}
-  <div class="flex items-center border-dashed border-1 border-gray-400 p-8 sm:bg-{{img}} sm:bg-right bg-empty-state" data-testid='empty-list'>
-    <div class="w-full sm:w-2/3" tabindex="0">
-      <div class="text-title text-gray-700 mb-6">{{ heading }}</div>
+{% macro empty_list(heading, message=None, img="emptyFlower", link=None, linkText="", attributes="") %}
+<div class="flex items-center border-dashed border-1 border-gray-400 p-8 sm:bg-{{img}} sm:bg-right bg-empty-state min-h-emptyState" data-testid='empty-list'>
+  <div class="w-full sm:w-2/3 space-y-gutterHalf" tabindex="0">
+    <div class="text-title text-gray-700">{{ heading }}</div>
+    {% if message %}
       <p class="mb-0 text-base text-gray-800">{{ message }}</p>
-      {% if link %}
-        <a class="inline-block mt-6 text-base font-bold" {% if attributes %} {{ attributes }} {% endif %} href="{{ link }}">{{ linkText }}</a>
-      {% endif %}
+    {% endif %}
+    {% if link %}
+      <a class="inline-block text-base font-bold" {% if attributes %} {{ attributes }} {% endif %} href="{{ link }}">
+        {{ linkText }}
+      </a>
+    {% endif %}
     </div>
   </div>
 {% endmacro %}
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
@@ -1,4 +1,5 @@
 {% from "components/big-number.html" import big_number %}
+{% from "components/empty-list.html" import empty_list %}
 
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False, font_size="table-font-xsmall", testid=None) -%}
   <section class="scrollable-table" tabindex="0">
@@ -43,8 +44,8 @@
     {% endfor %}
     {% if not items %}
       {% call row() %}
-        <td class="table-empty-message p-6" colspan="10">
-          {{ empty_message }}
+        <td class="table-empty-message h-10" colspan="10">
+          {{ empty_list(heading=empty_message) }}
         </td>
       {% endcall %}
     {% endif %}
@@ -87,8 +88,8 @@
     </td>
 {%- endmacro %}
 
-{% macro row_heading(cell_width=None) -%}
-  <th class="table-field {{ cell_width if cell_width}}" scope="row">
+{% macro row_heading(cell_width=None, rowspan="1") -%}
+<th class="table-field {{ cell_width if cell_width}}" scope="row" rowspan="{{ rowspan }}">
     {{ caller() }}
   </th>
 {%- endmacro %}

diff --git a/app/templates/partials/nav/gc_header_nav.html b/app/templates/partials/nav/gc_header_nav.html
@@ -104,7 +104,7 @@
               {{ nav_menu_item(url=url_for('main.contact', service_id=current_service.id),localised_txt=_('Contact us'), is_active=header_navigation.is_selected('contact')) }}
             {% endif %}
           {% else %} {# current_user.platform_admin #}
-            {% if not platform_admin_view_ind %}
+
               {% if current_user.has_permissions() %}
                 {{ nav_menu_item(url=url_for('main.live_services', service_id=current_service.id), localised_txt=_('Admin panel'), css_classes='pl-0') }}
                 {{ nav_menu_item(url=url_for('main.service_dashboard', service_id=current_service.id),localised_txt=_('Dashboard'), is_active=header_navigation.is_selected('dashboard')) }}
@@ -114,9 +114,10 @@
                 {{ nav_menu_item(url=url_for('main.service_settings', service_id=current_service.id),localised_txt=_('Settings'), is_active=header_navigation.is_selected('settings')) }}
               {% else %} {# not current_user.has_permissions, i.e. services not in context #}
                 {{ nav_menu_item(url=url_for('main.choose_account'),localised_txt=_('Your services'),css_classes='pl-0',id_key='choose_account', is_active=header_navigation.is_selected('choose_account')) }}
-                {{ nav_menu_item(url=url_for('main.live_services', service_id=current_service.id),localised_txt=_('Admin panel')) }}
+                {{ nav_menu_item(url=url_for('main.live_services', service_id=current_service.id),localised_txt=_('Admin panel'),id_key='platform_admin',
+                is_active=header_navigation.is_selected('platform_admin')) }}
               {% endif %}
-            {% endif %}
+
           {% endif %}
         {% endif %}
           <a

diff --git a/app/templates/views/organisations/organisation/settings/preview-email-branding.html b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
@@ -10,7 +10,7 @@ <h1 class="heading-large">{{ _("Preview email branding") }}</h1>
   <div class="grid-row contain-floats">
     <div class="w-full float-left py-0 px-0 px-gutterHalf box-border">
       <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}"
-              class="branding-preview"></iframe>
+              class="branding-preview" width="600" height="345"></iframe>
       {% call form_wrapper(action=action) %}
         <div class="form-group contain-floats box-border mb-gutterHalf md:mb-gutter">
           {{ form.hidden_tag() }}

diff --git a/app/templates/views/organisations/organisation/users/index.html b/app/templates/views/organisations/organisation/users/index.html
@@ -21,12 +21,12 @@ <h1 class="heading-medium">
     </div>
   {% endif %}
 
-  <div class="user-list">
+  <ul class="user-list">
     {% for user in users %}
-      <div class="user-list-item">
-        <h3>
+      <li class="user-list-item border-b-1 border-gray-300 flex flex-col gap-2 items-baseline justify-between">
+        <h3 class="flex flex-col gap-2 text-balance">
           {%- if user.name -%}
-            <span class="heading-small">{{ user.name }}</span>&ensp;
+            <span class="heading-small m-0">{{ user.name }}</span>
           {%- endif -%}
           <span class="hint">
             {%- if user.status == 'pending' -%}
@@ -40,18 +40,18 @@ <h3>
             {% endif %}
           </span>
         </h3>
-        <ul class="tick-cross-list grid-row contain-floats relative">
-          <li class="tick-cross-list-edit-link">
+        <ul class="tick-cross-list">
+          <li class="tick-cross-list-edit-link text-nowrap">
             {% if user.status == 'pending' %}
               <a href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">
                 {{ _("Cancel invitation")}}
               </a>
             {% endif %}
           </li>
         </ul>
-      </div>
+      </li>
     {% endfor %}
-  </div>
+    </ul>
 
   <div class="js-stick-at-bottom-when-scrolling">
     <a href="{{ url_for('.invite_org_user', org_id=current_org.id) }}" class="button button-secondary">

diff --git a/app/templates/views/platform-admin/services.html b/app/templates/views/platform-admin/services.html
@@ -4,13 +4,16 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/big-number.html" import big_number, big_number_with_status %}
 {% from "components/message-count-label.html" import message_count_label %}
-{% from "components/table.html" import mapping_table, field, stats_fields, row_group, row, right_aligned_field_heading, hidden_field_heading, text_field %}
+{% from "components/table.html" import mapping_table, field, row_heading, row_group, row, right_aligned_field_heading,
+hidden_field_heading, text_field %}
 {% from "components/form.html" import form_wrapper %}
 
 {% macro stats_fields(channel, data) -%}
 
   {% call field(border=False) %}
-      <span class="heading-medium" style="margin: 0px;">{{ _(channel.title()) }}</span>
+    <span class="text-small font-bold">
+      {{ _(channel.title()) }}
+    </span>
   {% endcall %}
 
   {% call field(align='right', border=False) %}
@@ -46,30 +49,25 @@
       {% call row_group() %}
 
         {% call row() %}
-          {% call field(border=False) %}
-            <a href="{{ url_for('main.service_dashboard', service_id=service['id']) }}" class="browse-list-link">{{ service['name']|truncate(35) }}</a>
+          {% call row_heading(rowspan="2") %}
+          <a href="{{ url_for('main.service_dashboard', service_id=service['id']) }}" class="browse-list-link block mb-2">{{
+            service['name']|truncate(35) }}</a>
+          {% if not service['active'] %}
+          <span class="text-small">{{ _("archived") }}</span>
+          {% elif service['research_mode'] %}
+          <span class="text-small">{{ _("research mode") }}</span>
+          {% elif not service['restricted'] %}
+          <span class="text-small text-red-700">{{ _("Live") }}</span>
+          {% else %}
+          <span></span>
+          {% endif %}
           {% endcall %}
 
           {{ stats_fields('email', service['stats']) }}
         {% endcall %}
 
         {% call row() %}
-          {% if not service['active'] %}
-            {% call field(status='default', border=False) %}
-              <span class="heading-medium" style="margin: 0px;">{{ _("archived") }}</span>
-            {% endcall %}
-          {% elif service['research_mode'] %}
-            {% call field(border=False) %}
-              <span class="research-mode" style="margin: 0px;">{{ _("research mode") }}</span>
-            {% endcall %}
-          {% elif not service['restricted'] %}
-            {% call field(status='error', border=False) %}
-              <span class="heading-medium" style="margin: 0px;">{{ _("Live") }}</span>
-            {% endcall %}
-          {% else %}
-            {% call field(border=False) %}
-            {% endcall %}
-          {% endif %}
+
 
           {{ stats_fields('sms', service['stats']) }}
         {% endcall %}

diff --git a/app/templates/views/service-settings/preview-email-branding.html b/app/templates/views/service-settings/preview-email-branding.html
@@ -9,7 +9,7 @@
   <h1 class="heading-large">Preview email branding</h1>
   <div class="grid-row contain-floats">
     <div class="w-full float-left py-0 px-0 px-gutterHalf box-border">
-      <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
+      <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview" width="600" height="345"></iframe>
       {% call form_wrapper(action=action) %}
         <div class="form-group contain-floats box-border mb-gutterHalf md:mb-gutter">
           {{ form.hidden_tag() }}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -104,12 +104,15 @@ module.exports = {
       transparent: "transparent",
       current: "currentColor",
       red: {
-        DEFAULT: "#b10e1e",
-        hover: "#990c1a",
-        border: "#6a0812",
-        mellow: "#df3034",
-        light: "#fef6f6",
-        300: "#D74D42",
+        DEFAULT: "#9F331A",
+        hover: "#471A0A",
+        border: "#9F331A",
+        mellow: "#D74224",
+        100: "#FFC6C3",
+        300: "#FB6252",
+        500: "#D74224",
+        700: "#9F331A",
+        900: "#471A0A",
       },
       white: "#FFF",
       blue: {
@@ -250,6 +253,7 @@ module.exports = {
       minHeight: {
         12: "1.875rem",
         target: "45px",
+        emptyState: "190px",
       },
       minWidth: {
         target: "45px",

diff --git a/tests/app/main/views/test_platform_admin.py b/tests/app/main/views/test_platform_admin.py
@@ -93,9 +93,9 @@ def test_should_show_research_and_restricted_mode(
     assert response.status_code == 200
     mock_get_detailed_services.assert_called_once_with({"detailed": True, "include_from_test_key": True, "only_active": False})
     page = BeautifulSoup(response.data.decode("utf-8"), "html.parser")
-    # get first column in second row, which contains flags as text.
+    # get first column in first row, which contains service name and flags as a span in a single th.
     table_body = page.find_all("table")[0].find_all("tbody")[0]
-    service_mode = table_body.find_all("tbody")[0].find_all("tr")[1].find_all("td")[0].text.strip()
+    service_mode = table_body.find_all("tbody")[0].find_all("tr")[0].find_all("th")[0].find_all("span")[0].text.strip()
     assert service_mode == displayed
 
 
@@ -503,9 +503,9 @@ def test_should_show_archived_services_last(
     table_body = page.find_all("table")[0].find_all("tbody")[0]
     services = [service.tr for service in table_body.find_all("tbody")]
     assert len(services) == 3
-    assert services[0].td.text.strip() == "A"
-    assert services[1].td.text.strip() == "B"
-    assert services[2].td.text.strip() == "C"
+    assert services[0].th.a.text.strip() == "A"
+    assert services[1].th.a.text.strip() == "B"
+    assert services[2].th.a.text.strip() == "C"
 
 
 @pytest.mark.parametrize("research_mode", (True, False))
@@ -524,8 +524,8 @@ def test_shows_archived_label_instead_of_live_or_research_mode_label(
     page = BeautifulSoup(response.data.decode("utf-8"), "html.parser")
 
     table_body = page.find_all("table")[0].find_all("tbody")[0]
-    service_mode = table_body.find_all("tbody")[0].find_all("tr")[1].td.text.strip()
-    # get second column, which contains flags as text.
+    # get first column as table header, which contains flags as span.
+    service_mode = table_body.find_all("tbody")[0].find_all("tr")[0].th.span.text.strip()
     assert service_mode == "archived"
 
 
@@ -602,9 +602,9 @@ def test_should_order_services_by_usage_with_inactive_last(
     table_body = page.find_all("table")[0].find_all("tbody")[0]
     services = [service.tr for service in table_body.find_all("tbody")]
     assert len(services) == 3
-    assert services[0].td.text.strip() == "My Service 2"
-    assert services[1].td.text.strip() == "My Service 1"
-    assert services[2].td.text.strip() == "My Service 3"
+    assert services[0].th.a.text.strip() == "My Service 2"
+    assert services[1].th.a.text.strip() == "My Service 1"
+    assert services[2].th.a.text.strip() == "My Service 3"
 
 
 def test_sum_service_usage_is_sum_of_all_activity(fake_uuid):