feat(orga): upgrade ux on schoolSessionManagment component

1024pix · Dec 20, 2024 · 3e54786 · 3e54786
1 parent 56a84a6
commit 3e54786
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 33 deletions.
diff --git a/orga/app/components/layout/school-session-management.gjs b/orga/app/components/layout/school-session-management.gjs
@@ -7,6 +7,8 @@ import Component from '@glimmer/component';
 import dayjs from 'dayjs';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import { t } from 'ember-intl';
+
+import CopyPasteButton from '../copy-paste-button';
 dayjs.extend(LocalizedFormat);
 
 export default class SchoolSessionManagement extends Component {
@@ -18,6 +20,9 @@ export default class SchoolSessionManagement extends Component {
   get canManageSession() {
     return this.currentUser.canAccessMissionsPage;
   }
+  get activateSessionButtonClass() {
+    return this.sessionIsActive ? 'secondary' : 'primary';
+  }
 
   get sessionIsActive() {
     return this.currentUser.organization.sessionExpirationDate > new Date();
@@ -40,6 +45,9 @@ export default class SchoolSessionManagement extends Component {
       ? this.intl.t('navigation.school-sessions.extend-button')
       : this.intl.t('navigation.school-sessions.activate-button');
   }
+  get organizationCode() {
+    return this.currentUser.organization.schoolCode ?? '';
+  }
 
   @action
   async activateSession() {
@@ -52,35 +60,47 @@ export default class SchoolSessionManagement extends Component {
   }
 
   <template>
-    {{#if this.canManageSession}}
-      <p class="school-session__status">
-        {{#if this.sessionIsActive}}
-          {{t "navigation.school-sessions.status.active-label" this.expirationDateParameter}}
-        {{else}}
-          {{t "navigation.school-sessions.status.inactive-label"}}
-        {{/if}}
+    <div class="school-code-container">
+      <h2>{{t "navigation.school-sessions.status.code-label"}}</h2>
+      <p>{{this.organizationCode}}
+        <CopyPasteButton
+          @clipBoardtext={{this.organizationCode}}
+          @successMessage="{{t 'pages.missions.list.banner.copypaste-container.button.success'}}"
+          @defaultMessage="{{t 'pages.missions.list.banner.copypaste-container.button.tooltip'}}"
+        />
       </p>
-      <PixTooltip @id="school-session-info-tooltip" @position="bottom" @isWide="true">
-        <:triggerElement>
-          <PixIcon
-            @name="help"
-            @plainIcon={{true}}
-            tabindex="0"
-            aria-label={{t "navigation.school-sessions.status.aria-label"}}
-            aria-describedby="school-session-info-tooltip"
-          />
-        </:triggerElement>
 
-        <:tooltip>
-          {{t "navigation.school-sessions.status.info-text" htmlSafe=true}}
-        </:tooltip>
-      </PixTooltip>
+    </div>
 
+    {{#if this.canManageSession}}
       <PixButton
         class="school-session__button"
-        @variant="secondary"
+        @variant={{this.activateSessionButtonClass}}
         @triggerAction={{this.activateSession}}
       >{{this.buttonLabel}}</PixButton>
+      <div class="school-session__status">
+
+        {{#if this.sessionIsActive}}
+          {{t "navigation.school-sessions.status.active-label" this.expirationDateParameter}}
+        {{else}}
+          {{t "navigation.school-sessions.status.inactive-label"}}
+        {{/if}}
+        <PixTooltip @id="school-session-info-tooltip" @position="bottom" @isWide="true">
+          <:triggerElement>
+            <PixIcon
+              @name="error"
+              @plainIcon={{true}}
+              tabindex="0"
+              aria-label={{t "navigation.school-sessions.status.aria-label"}}
+              aria-describedby="school-session-info-tooltip"
+            />
+          </:triggerElement>
+
+          <:tooltip>
+            {{t "navigation.school-sessions.status.info-text" htmlSafe=true}}
+          </:tooltip>
+        </PixTooltip>
+      </div>
     {{/if}}
   </template>
 }
diff --git a/orga/app/styles/components/layout/sidebar.scss b/orga/app/styles/components/layout/sidebar.scss
@@ -58,6 +58,64 @@
   }
 }
 
+.school-code-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-3x);
+  align-items: center;
+
+  h2 {
+    font-weight: var(--pix-font-bold);
+    font-size: 1.1rem;
+  }
+
+  p {
+    display: flex;
+    align-items: flex-start;
+    margin: 0 0 var(--pix-spacing-3x) var(--pix-spacing-3x);
+    line-height: 0.5;
+  }
+
+  .pix-icon-button {
+    width: 1.5rem;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    color: var(--pix-primary-10);
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .pix-icon-button:hover {
+    color: var(--pix-info-700);
+  }
+}
+
+.school-session {
+  &__status {
+    @extend %pix-body-s;
+
+    display: flex;
+    gap: var(--pix-spacing-1x);
+    align-items: center;
+    justify-content: center;
+
+    .pix-tooltip {
+      width: 1.5rem;
+      min-width: 1.5rem;
+      height: 1.5rem;
+      line-height: 0.8;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}
+
 @include device-is('mobile') {
   .sidebar {
     position: relative;

diff --git a/orga/tests/acceptance/campaign-list-test.js b/orga/tests/acceptance/campaign-list-test.js
@@ -49,8 +49,9 @@ module('Acceptance | Campaign List', function (hooks) {
       // when
       const screen = await visitScreen('/campagnes');
 
-      // then
-      assert.ok(screen.getByRole('heading', 'Créez votre première campagne'));
+      //then
+      assert.dom(screen.getByRole('heading', { level: 1 })).hasText(t('pages.campaigns-list.title'));
+      assert.ok(screen.getByRole('button', t('pages.campaigns-list.action.create')));
     });
 
     test('it should show the two tabs: my campaigns and all campaigns', async function (assert) {
@@ -65,7 +66,7 @@ module('Acceptance | Campaign List', function (hooks) {
       const screen = await visitScreen('/campagnes');
 
       // then
-      assert.ok(screen.getByRole('heading', t('pages.campaigns-list.title')));
+      assert.dom(screen.getByRole('heading', { level: 1 })).hasText(t('pages.campaigns-list.title'));
       assert.ok(screen.getByText(t('pages.campaigns-list.tabs.my-campaigns')));
       assert.ok(screen.getByText(t('pages.campaigns-list.tabs.all-campaigns')));
     });

diff --git a/orga/tests/integration/components/layout/school-session-management_test.gjs b/orga/tests/integration/components/layout/school-session-management_test.gjs
@@ -27,12 +27,14 @@ module('Integration | Components | Layout | SchoolSessionManagement', function (
       // when
       const screen = await render(<template><SchoolSessionManagement /></template>);
 
-      const tooltipText = t('navigation.school-sessions.status.info-text', { htmlSafe: true });
-      const tooltip = await screen.findByRole('tooltip', { hidden: true });
-
       // then
-      assert.ok(screen.getByLabelText(t('navigation.school-sessions.status.aria-label')));
-      assert.strictEqual(tooltip.innerHTML.trim(), tooltipText.toString());
+      const copyTooltipText = t('pages.missions.list.banner.copypaste-container.button.tooltip');
+      const infoTooltipText = t('navigation.school-sessions.status.info-text', { htmlSafe: true }).toString();
+
+      const tooltipElementList = await screen.findAllByRole('tooltip', { hidden: true });
+      const tooltipElementTextList = tooltipElementList.map((element) => element.innerHTML.trim());
+
+      assert.deepEqual(tooltipElementTextList, [copyTooltipText, infoTooltipText]);
     });
 
     module('session expiration date management', function (hooks) {

diff --git a/orga/translations/en.json b/orga/translations/en.json
@@ -376,6 +376,7 @@
         "title": "Session status",
         "active-label": "Active session until {sessionExpirationDate}",
         "aria-label": "How does the session work ?",
+        "code-label": "School code",
         "inactive-label": "Inactive session",
         "info-text": "Students can only access missions when the session is active.'<br>'At the end of the session, students who are in the middle of a mission will not be disconnected."
       }
@@ -940,7 +941,7 @@
               "hint": "You can save this bookmark on your computers."
             }
           },
-          "step3": "Step 3 : <b> Activate the Pix Junior session </b> using the button above. <b>You should do this before each session with your pupils</b>.",
+          "step3": "Step 3 : <b> Activate the Pix Junior session </b> using the button in the sidebar. <b>You should do this before each session with your pupils</b>.",
           "welcome": "Starting to use Pix Junior :"
         },
         "caption": "List of missions",

diff --git a/orga/translations/fr.json b/orga/translations/fr.json
@@ -382,6 +382,7 @@
         "title": "Statut de la session",
         "active-label": "Session active jusqu'à {sessionExpirationDate}",
         "aria-label": "Explication sur la session",
+        "code-label": "Code école",
         "inactive-label": "Session inactive",
         "info-text": "Les missions sont accessibles par les élèves uniquement lorsque la session est active.'<br>' À la fin de la session, les élèves en cours de mission ne seront pas déconnectés."
       }
@@ -946,7 +947,7 @@
               "hint": "Vous pouvez enregistrer ce favori sur les ordinateurs."
             }
           },
-          "step3": "Étape 3 : <b>Activez la session Pix Junior</b> via le bouton dans la barre de navigation. <b>Cette action est à réaliser avant chaque séance avec vos élèves</b>.",
+          "step3": "Étape 3 : <b>Activez la session Pix Junior</b> via le bouton dans la barre latérale. <b>Cette action est à réaliser avant chaque séance avec vos élèves</b>.",
           "welcome": "Pour commencer à utiliser Pix Junior :"
         },
         "caption": "Liste des missions",

diff --git a/orga/translations/nl.json b/orga/translations/nl.json
@@ -373,6 +373,7 @@
       "activate-button": "De sessie activeren",
       "extend-button": "De sessie verlengen",
       "status": {
+        "code-label": "Schoolcode",
         "active-label": "Sessie actief tot {sessionExpirationDate}",
         "aria-label": "Uitleg over de sessie",
         "inactive-label": "Sessie inactief",
@@ -936,7 +937,7 @@
             },
             "title": "Stap 2: Om leerlingen toegang te geven tot de Pix Junior-ruimte van je school, kun je :"
           },
-          "step3": "Stap 3: <b>Activeer de Pix Junior sessie</b> via de knop hierboven. <b>Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd</b>.",
+          "step3": "Stap 3: <b>Activeer de Pix Junior sessie</b> met de knop in de sidebar. <b>Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd</b>.",
           "welcome": "Hallo en welkom bij Pix Orga!"
         },
         "caption": "Lijst van opdrachten",