feat(front): add link to translation

Co-authored-by: Fael Bassetti <fael.bassetti@pix.fr> Co-authored-by: Laura Bergoens <laura.bergoens@pix.fr>
1024pix · Jan 16, 2025 · 8389e0d · 8389e0d
1 parent cc85acb
commit 8389e0d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/pix-editor/app/components/challenges-production/localized-challenges-production.gjs b/pix-editor/app/components/challenges-production/localized-challenges-production.gjs
@@ -20,7 +20,6 @@ const NOT_TRANSLATED_STATUS = 'NOT_TRANSLATED';
 // todo list
 /*
 menu actions
-lien vers phrase
  */
 export default class LocalizedChallengesProduction extends Component {
   @service router;
@@ -48,6 +47,7 @@ export default class LocalizedChallengesProduction extends Component {
         instruction: localizedChallengeForLocale?.instruction ?? challenge.instruction,
         primaryUpdatedAt: challenge.updatedAt,
         primaryAuthor: challenge.author,
+        translationsUrl: isPrimaryInLocale ? null : `/api/challenges/${challenge.id}/translations/${this.args.locale}`,
         primaryStatusColor: this.getPrimaryStatusColor(challenge.status),
         primaryStatusText: this.getPrimaryStatusText(challenge.status),
         localizedStatusColor: this.getLocalizedStatusColor(localizedStatus),
@@ -173,6 +173,18 @@ export default class LocalizedChallengesProduction extends Component {
                 </PixTag>
               </:cell>
             </PixTableColumn>
+            <PixTableColumn @context={{context}}>
+              <:cell>
+                {{#if localizedChallengeData.translationsUrl}}
+                  <a class="ui button item" href={{localizedChallengeData.translationsUrl}} target="_blank" rel="noopener noreferrer" aria-label={{concat "traduction de l'épreuve de version " localizedChallengeData.version}}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                      <path d="M15.7046 0H5.35587C4.63273 0 6.50052 2.45604 6.50052 2.45604H15.7008C16.9204 2.45604 17.9096 3.4452 17.9115 4.6648V14.2398C17.9115 15.4594 16.9223 16.4486 15.7008 16.4486H13.7356C13.5558 16.4486 13.4078 16.5947 13.4078 16.7764V18.5768C13.4078 18.7585 13.5539 18.9046 13.7356 18.9046H15.7008C18.2768 18.9046 20.3656 16.8157 20.3656 14.2398V4.6648C20.3656 2.08885 18.2768 0 15.7008 0H15.7046Z" fill="black"/>
+                      <path d="M10.0773 23.7251L5.02476 19.8471C4.37843 19.3525 4 18.5844 4 17.7714V1.31155C4 0.226846 5.24582 -0.387633 6.10759 0.273681L11.1602 4.15164C11.8065 4.6481 12.1849 5.41432 12.1849 6.22926V22.6891C12.1849 23.7738 10.9391 24.3882 10.0773 23.7269V23.7251Z" fill="#03EAB3"/>
+                    </svg>
+                  </a>
+                {{/if}}
+              </:cell>
+            </PixTableColumn>
           </:columns>
         </PixTable>
         <div class="challenges-production-table__display-actions">

diff --git a/...sts/integration/components/challenges-production/localized-challenges-production-test.gjs b/...sts/integration/components/challenges-production/localized-challenges-production-test.gjs
@@ -180,13 +180,16 @@ module('Integration | Component | challenges-production | localized-challenges-p
     test('should display all expected info for a given challenge', async function(assert) {
       // then
       const validatedChallenges = screen.queryAllByRole('row');
+      const translationLink = screen.getByLabelText('traduction de l\'épreuve de version Proto');
       const prototype = validatedChallenges[1];
+
       assert.dom(prototype).includesText('Proto');
       assert.dom(prototype).includesText('Een super maxi lange instructie');
       assert.dom(prototype).includesText('25/12/2019');
       assert.dom(prototype).includesText('ELLE');
       assert.dom(prototype).includesText('validé');
       assert.dom(prototype).includesText('En prod');
+      assert.ok(translationLink.href.endsWith('/api/challenges/challengeProtoValide/translations/nl'));
     });
 
     test('should display appropriate translation statuses for each challenge', async function(assert) {