A11y/fix your profile layout (#1684)

* feat(profile-item): add `profile-item` component to display user profile information

* feat(user-profile): update view to use new component

* feat(profile-item): add new css class and use it; regen index.css

* fix(profile-item): remove unused class

* fix(user-profile): update test following new markup

* chore: formatting

* a11y(profile-item): fix issue where `div`s were being created inside of `span`s

* fix(cypress): skip video recording and screenshots for now since they go nowhere anyway

* style(profile-item): align change bottom bottom right; make change font size text-small

* style(profile-item): update styles to match designs

* fix(test): update dom selector

.github/workflows/test-admin-deploy.yaml

@@ -175,6 +175,7 @@ jobs:
           CYPRESS_BASE_URL: ${{needs.deploy-test-admin.outputs.LAMBDA_URL}}
         with:
           record: false
+          config: "video=false,screenshotOnRunFailure=false"
           build: npx cypress info
           working-directory: tests_cypress
           spec: |

app/assets/stylesheets/tailwind/style.css

@@ -357,4 +357,7 @@ label {
   }
 }
 
+.overflow-anywhere {
+  overflow-wrap: anywhere;
+}
 /*! purgecss end ignore */

app/templates/components/profile-item.html

@@ -0,0 +1,15 @@
+{% from "components/table.html" import edit_field, text_field %}
+
+{% macro profile_item(label, value, action=None) %}
+  <div class="flex flex-wrap md:flex-no-wrap items-end border-b-1 border-gray-400 py-5">
+    <div class="w-full sm:w-3/4" tabindex="0">
+      <div class="text-gray-600">{{ text_field(label) }}</div>
+      <div class="font-bold inline-block mt-2 break-words mr-5 overflow-anywhere">{{ value }}</div>
+    </div>
+    <div class="w-full sm:w-1/4 sm:text-right">
+      {% if action %}
+        <span class="mt-2">{{ edit_field(_('Change'), url_for(action), for="{} {}".format(_('your'), label.lower())) }}</span>
+      {% endif %}
+    </div>
+  </div>
+{% endmacro %}

app/templates/views/user-profile.html

@@ -1,6 +1,7 @@
 {% extends  "admin_template.html" %}
 {% from "components/table.html" import list_table, row, field %}
 {% from "components/table.html" import mapping_table, row, text_field, optional_text_field, edit_field, field, boolean_field with context %}
+{% from "components/profile-item.html" import profile_item %}
 
 {% block per_page_title %}
   {{ _('Your profile') }}
@@ -12,6 +13,18 @@
 
   <h1 class="heading-large">{{ _('Your profile') }}</h1>
 
+
+  {{ profile_item(_('Name'), text_field(current_user.name), '.user_profile_name') }}  
+  {{ profile_item(_('Email address'), text_field(current_user.email_address), '.user_profile_email' if can_see_edit else None) }}
+  {{ profile_item(_('Mobile number'), optional_text_field(current_user.mobile_number), '.user_profile_mobile_number') }}
+  {{ profile_item(_('Password'), text_field(_('Last changed ') + " " + current_user.password_changed_at|format_delta ), '.user_profile_password') }}
+  {{ profile_item(_('Security keys'), text_field(num_keys), '.user_profile_security_keys') }}
+
+  {% if current_user.platform_admin or session.get('disable_platform_admin_view') %}
+    {{ profile_item(_('Use platform admin view'), text_field(_('Yes') if not session.get('disable_platform_admin_view') else _('No')), '.user_profile_disable_platform_admin_view') }} 
+  {% endif %}
+
+  <!--
   <div class="body-copy-table">
     {% set caption = _('Your profile') %}
     {% set heading_1 = _('Label') %}
@@ -79,6 +92,5 @@ <h1 class="heading-large">{{ _('Your profile') }}</h1>
 
 
     
-  </div>
-
+  </div> -->
 {% endblock %}

app/translations/csv/fr.csv

@@ -1761,11 +1761,12 @@
 "Maximum 612 characters. Some messages may be too long due to custom content.","612 caractères au maximum. Certains messages peuvent être trop longs en raison de leur contenu personnalisé."
 "Too many characters","Limite de caractère atteinte"
 "New features","Nouvelles fonctionnalités"
+"Your","Votre"
 "You are browsing templates. Create and copy template or add new folder.","Vous explorez les gabarits. Créer et copier un gabarit ou créer un nouveau dossier."
 "Move templates to a new or existing folder","Déplacer les gabarits dans un dossier"
 "You are selecting templates. Move templates into a new or existing folder.","Vous sélectionnez les gabarits. Déplacer les gabarits dans un dossier."
 "Row number","Numéro de ligne"
 "Type","Type"
 "Sent by email","Envoyé par courriel"
 "Sent Time","Heure d’envoi"
-"Job","Tâche"
+"Job","Tâche"

tests/app/main/views/test_user_profile.py

@@ -25,8 +25,8 @@ def test_overview_page_shows_disable_for_platform_admin(client_request, platform
     client_request.login(platform_admin_user)
     page = client_request.get(("main.user_profile"))
     assert page.select_one("h1").text.strip() == "Your profile"
-    disable_platform_admin_row = page.select("tr")[-1]
-    assert " ".join(disable_platform_admin_row.text.split()) == "Use platform admin view Yes Change"
+    disable_platform_admin_row = page.find_all("div", class_="sm:w-3/4")[-1]
+    assert " ".join(disable_platform_admin_row.text.split()) == "Use platform admin view Yes"
 
 
 def test_should_show_name_page(client_request, mock_get_security_keys):