Add missing UserProfile headers

app/components/user-profile-bio-details.gjs

@@ -5,18 +5,23 @@ import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
 <template>
   <div class="user-profile-bio-details" data-test-user-profile-bio-details ...attributes>
-    <div class="actions">
-      {{#if @isManageable}}
-        <button
-          aria-label={{t "general.manage"}}
-          type="button"
-          class="manage"
-          {{on "click" (fn @setIsManaging true)}}
-          data-test-manage
-        >
-          <FaIcon @icon={{faPenToSquare}} />
-        </button>
-      {{/if}}
+    <div class="user-profile-bio-header">
+      <h2 class="title" data-test-title>
+        {{t "general.profile"}}
+      </h2>
+      <div class="actions">
+        {{#if @isManageable}}
+          <button
+            aria-label={{t "general.manage"}}
+            type="button"
+            class="manage"
+            {{on "click" (fn @setIsManaging true)}}
+            data-test-manage
+          >
+            <FaIcon @icon={{faPenToSquare}} />
+          </button>
+        {{/if}}
+      </div>
     </div>
 
     {{#unless @userAuthentication.username}}

app/components/user-profile-bio-manager.gjs

@@ -303,8 +303,13 @@ export default class UserProfileBioManagerComponent extends Component {
   });
   <template>
     <div class="user-profile-bio-manager" data-test-user-profile-bio-manager ...attributes>
-      <div class="actions">
-        <BigSaveCancelButtons @save={{this.save}} @cancel={{this.cancel}} />
+      <div class="user-profile-bio-header">
+        <h2 class="title" data-test-title>
+          {{t "general.profile"}}
+        </h2>
+        <div class="actions">
+          <BigSaveCancelButtons @save={{this.save}} @cancel={{this.cancel}} />
+        </div>
       </div>
 
       {{#unless @userAuthentication.username}}

app/components/user-profile-roles.gjs

@@ -108,21 +108,27 @@ export default class UserProfileRolesComponent extends Component {
       data-test-user-profile-roles
       ...attributes
     >
-      <div class="actions">
-        {{#if @isManaging}}
-          <BigSaveCancelButtons @save={{this.save}} @cancel={{this.cancel}} />
-        {{else if @isManageable}}
-          <button
-            aria-label={{t "general.manage"}}
-            type="button"
-            class="manage"
-            data-test-manage
-            {{on "click" (fn @setIsManaging true)}}
-          >
-            <FaIcon @icon={{faPenToSquare}} />
-          </button>
-        {{/if}}
+      <div class="user-profile-roles-header">
+        <h2 class="title" data-test-title>
+          {{t "general.roles"}}
+        </h2>
+        <div class="actions">
+          {{#if @isManaging}}
+            <BigSaveCancelButtons @save={{this.save}} @cancel={{this.cancel}} />
+          {{else if @isManageable}}
+            <button
+              aria-label={{t "general.manage"}}
+              type="button"
+              class="manage"
+              data-test-manage
+              {{on "click" (fn @setIsManaging true)}}
+            >
+              <FaIcon @icon={{faPenToSquare}} />
+            </button>
+          {{/if}}
+        </div>
       </div>
+
       <div class="form">
         <div class="item" data-test-student>
           <label>

app/styles/components/user-profile-bio.scss

@@ -1,15 +1,24 @@
 @use "../mixins" as m;
 
 .user-profile-bio {
-  label {
-    @include m.ilios-label;
+  .user-profile-bio-header {
+    @include m.detail-container-header;
+
+    h2 {
+      @include m.ilios-heading-h3;
+    }
+
+    .actions {
+      @include m.detail-container-actions;
+    }
   }
 
-  .actions {
-    @include m.detail-container-actions;
+  label {
+    @include m.ilios-label;
   }
 
   .error {
+    padding-top: 1em;
     text-align: center;
   }
 
@@ -29,7 +38,10 @@
       }
 
       &.synced-from-directory input {
-        background-color: light-dark(var(--transparent-green), var(--transparent-green));
+        background-color: light-dark(
+          var(--transparent-green),
+          var(--transparent-green)
+        );
         transition: background-color 500ms ease;
       }
     }

app/styles/components/user-profile-roles.scss

@@ -1,6 +1,18 @@
 @use "../mixins" as m;
 
 .user-profile-roles {
+  .user-profile-roles-header {
+    @include m.detail-container-header;
+
+    h2 {
+      @include m.ilios-heading-h3;
+    }
+
+    .actions {
+      @include m.detail-container-actions;
+    }
+  }
+
   label {
     @include m.ilios-label;
   }
@@ -9,15 +21,7 @@
     border-top: 0.5px solid light-dark(var(--black), var(--grey));
   }
 
-  .actions {
-    @include m.detail-container-actions;
-  }
-
   .form {
-    grid-template-columns: 1fr;
-
-    .item {
-      min-height: auto;
-    }
+    padding: 1em 0 0;
   }
 }

tests/integration/components/user-profile-bio-details-test.gjs

@@ -56,6 +56,7 @@ module('Integration | Component | user profile bio details', function (hooks) {
       </template>,
     );
 
+    assert.strictEqual(component.title, 'Profile');
     assert.strictEqual(
       component.school,
       `Primary School: ${schoolModel.title}`,
@@ -137,6 +138,7 @@ module('Integration | Component | user profile bio details', function (hooks) {
       </template>,
     );
 
+    assert.strictEqual(component.title, 'Profile');
     assert.strictEqual(
       component.school,
       `Primary School: ${schoolModel.title}`,

tests/integration/components/user-profile-bio-manager-test.gjs

@@ -57,6 +57,7 @@ module('Integration | Component | user profile bio manager', function (hooks) {
       </template>,
     );
 
+    assert.strictEqual(component.title, 'Profile');
     assert.strictEqual(
       component.school,
       `Primary School: ${schoolModel.title}`,
@@ -110,6 +111,7 @@ module('Integration | Component | user profile bio manager', function (hooks) {
       </template>,
     );
 
+    assert.strictEqual(component.title, 'Profile');
     assert.strictEqual(
       component.school,
       `Primary School: ${schoolModel.title}`,

tests/integration/components/user-profile-roles-test.gjs

@@ -28,6 +28,7 @@ module('Integration | Component | user profile roles', function (hooks) {
     this.set('user', userModel);
     await render(<template><UserProfileRoles @user={{this.user}} /></template>);
 
+    assert.strictEqual(component.title, 'Roles');
     assert.strictEqual(component.student.value, 'Yes');
     assert.strictEqual(component.formerStudent.value, 'No');
     assert.strictEqual(component.enabled.value, 'Yes');

tests/pages/components/user-profile-bio-details.js

@@ -4,6 +4,7 @@ const definition = {
   scope: '[data-test-user-profile-bio-details]',
   manage: clickable('[data-test-manage]'),
   school: text('[data-test-school]'),
+  title: text('[data-test-title]'),
   firstName: {
     scope: '[data-test-firstname]',
     label: text('label'),

tests/pages/components/user-profile-bio-manager.js

@@ -17,6 +17,7 @@ const definition = {
   syncWithDirectory: {
     scope: '[data-test-directory-sync]',
   },
+  title: text('[data-test-title]'),
   school: text('[data-test-school]'),
   firstName: {
     scope: '[data-test-firstname]',

tests/pages/components/user-profile-roles.js

@@ -8,6 +8,7 @@ const definition = {
   manage: {
     scope: '[data-test-manage]',
   },
+  title: text('[data-test-title]'),
   student: {
     scope: '[data-test-student]',
     label: text('label'),

translations/en-us.yaml

@@ -540,6 +540,7 @@ general:
   primaryCohort: Primary Cohort
   primarySchool: Primary School
   printSummary: Print Summary
+  profile: Profile
   program: Program
   programAndCohort: Program / Cohort
   programCohorts: Program Cohorts
@@ -587,6 +588,7 @@ general:
   resultsCount: "{count, plural, =1 {1 result} other {# results}}"
   resultsSummary: Results Summary
   returnToPreviousPage: Return to Previous Page
+  roles: Roles
   root: Root
   run: Run
   runReport: Run Report

translations/es.yaml

@@ -540,6 +540,7 @@ general:
   primaryCohort: Clase de la Graduación Principal
   primarySchool: Escuela Primaria
   printSummary: Sumario Printado
+  profile: Perfil
   program: Programa
   programAndCohort: Programa / Clase de La Graduación
   programCohorts: Clases de La Graduación
@@ -587,6 +588,7 @@ general:
   resultsCount: "{count, plural, =1 {1 resultado} other {# resultados}}"
   resultsSummary: Resumen de Resultados
   returnToPreviousPage: Volver a la Página Anterior
+  roles: Roles
   root: Root
   run: Ejecutar
   runReport: Ejecutar Informe

translations/fr.yaml

@@ -540,6 +540,7 @@ general:
   primaryCohort: Cohorte Première
   primarySchool: École Première
   printSummary: Empreinte Résumé
+  profile: Profil
   program: Diplôme
   programAndCohort: Diplôme et Cohortes
   programCohorts: Cohortes
@@ -587,6 +588,7 @@ general:
   resultsCount: "{count, plural, =1 {1 résultat} other {# résultats}}"
   resultsSummary: Résumé des résultats
   returnToPreviousPage: Retour à la page précédente
+  roles: Rôles
   root: Root
   run: Exécuter
   runReport: exécuter le rapport