feat: add feedback button that leads to the repository of the course (#…

…2034)

* feat: add feedback button that leads to the repository of the current course

* fix(lluis): make <NavBarButton /> consistent in height

* refactor(web): use <a /> tag for feedback button

* test(web): add cypress tests for feedback button

Co-authored-by: Dániel Kántor <[email protected]>

apps/lluis/NavBar/NavBarButton.svelte

@@ -4,16 +4,18 @@
 
   const dispatch = createEventDispatcher()
   export let href: string | null = null
+  export let target: "_blank" | undefined = undefined
 </script>
 
 <div>
-  <LinkOrButton href={href} on:click="{() => dispatch('click')}">
+  <LinkOrButton href={href} on:click="{() => dispatch('click')}" target={target}>
     <slot />
   </LinkOrButton>
 </div>
 
 <style type="text/scss">
   div :global(*) {
+    height: 36px;
     display: block;
     padding: 6px;
     color: var(--navbar-text-color);

apps/web/cypress/integration/chips.feature

@@ -12,6 +12,7 @@ Feature: Chips challenge
     And I see a panel with only a Skip and a Cancel button
     And I see the correct chips
     And chips challenge looks correct
+    And I see a "Feedback" link in the navbar
 
   Scenario: Using the mini-dictionary
     Given I open "/course/test/skill/chips-test-0?testChallenge=c3f7fcb9c86c"

apps/web/cypress/integration/common/button_new_tab.js

@@ -0,0 +1,8 @@
+import { Then } from "cypress-cucumber-preprocessor/steps"
+
+Then("the \"Feedback\" button opens the course repository page in a new tab", () => {
+    const feedbackButton = cy.contains("Feedback")
+    feedbackButton.should("have.attr", "target", "_blank")
+    feedbackButton.should("have.attr", "href", "https://github.com/LibreLingo/LibreLingo/")
+    feedbackButton.should("be.visible")
+})

apps/web/cypress/integration/coursePage.feature

@@ -11,6 +11,7 @@ Feature: Course page
     And I see a skill that has no image set
     And I see 3 skills that have an image set
     And I see a "Log in" link in the navbar
+    And I see a "Feedback" link in the navbar
 
   Scenario: Opening course page with a stale skill
     Given I open "/course/test"

apps/web/cypress/integration/feedbackButton.feature

@@ -0,0 +1,5 @@
+Feature: Feedback button
+
+  Scenario: Clicking the feedback button leads to the GitHub repo
+    Given I open "/course/test"
+    Then the "Feedback" button opens the course repository page in a new tab

apps/web/src/components/NavBar.svelte

@@ -8,6 +8,7 @@
   import NavBarItem from "lluis/NavBar/NavBarItem.svelte"
   import NavBarButtonSet from "lluis/NavBar/NavBarButtonSet.svelte"
   export let hasAuth = false
+  export let repositoryURL = null
 
   type WindowWithLogout = Window & {
     _Logout: () => void
@@ -22,6 +23,9 @@
 
   <div slot="right">
     <NavBarButtonSet>
+      {#if repositoryURL}
+        <NavBarButton href={repositoryURL} target="_blank">Feedback</NavBarButton>
+      {/if}
       {#if hasAuth && settings.features.authEnabled}
         {#if $authStore.user}
           <NavBarItem>

apps/web/src/courses/test/courseData.json

@@ -19,7 +19,7 @@
     "¿",
     "¡"
   ],
-  "repositoryURL": "https://github.com/LibreLingo/LibreLingo/tree/main/courses/test",
+  "repositoryURL": "https://github.com/LibreLingo/LibreLingo/",
   "license": {
     "name": {
       "short": "CC BY-SA 4.0",

apps/web/src/routes/course/[courseName]/index.svelte

@@ -1,11 +1,11 @@
 <script lang="typescript" context="module">
   export async function preload(page) {
       const { courseName } = page.params
-      const { modules, languageName } = await import(
+      const { modules, languageName, repositoryURL } = await import(
           `../../../courses/${courseName}/courseData.json`
       )
 
-      return { courseName, modules, languageName }
+      return { courseName, modules, languageName, repositoryURL }
   }
 </script>
 
@@ -20,13 +20,14 @@
   export let courseName = null
   export let modules: ModulesType = null
   export let languageName = null
+  export let repositoryURL = null
 </script>
 
 <svelte:head>
   <title>LibreLingo - learn {languageName} for free</title>
 </svelte:head>
 
-<NavBar hasAuth />
+<NavBar hasAuth {repositoryURL} />
 
 {#each modules as { title, skills }}
   <section class="section">

apps/web/src/routes/course/[courseName]/skill/[id]/index.svelte

@@ -5,6 +5,7 @@
           languageName,
           languageCode,
           specialCharacters,
+          repositoryURL,
       } = await import(`../../../../../courses/${courseName}/courseData.json`)
       const skillData = await import(
           `../../../../../courses/${courseName}/challenges/${id}.json`
@@ -19,6 +20,7 @@
           languageName,
           languageCode,
           specialCharacters,
+          repositoryURL,
           id,
           skillId,
           challengesPerLevel,
@@ -36,6 +38,7 @@
   export let languageName: string
   export let languageCode: string
   export let specialCharacters: Array<string>
+  export let repositoryURL: string
   export let id: string
   export let courseURL: string
   export let skillId: string
@@ -51,7 +54,7 @@
   <title>LibreLingo - learn {id} in {languageName} for free</title>
 </svelte:head>
 
-<NavBar />
+<NavBar {repositoryURL} />
 
 <ChallengeScreen
   {expectedNumberOfChallenges}

courses/test/course.yaml

@@ -12,7 +12,7 @@ Course:
     Short name: CC BY-SA 4.0
     Link: https://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-  Repository: https://github.com/LibreLingo/LibreLingo/tree/main/courses/test
+  Repository: https://github.com/LibreLingo/LibreLingo/
 
   Special characters:
     - "á"