From de283649c8e8722aea20407682f2c5fa5169704a Mon Sep 17 00:00:00 2001
From: Gabor Szabo <gabor@szabgab.com>
Date: Sun, 13 Feb 2022 17:10:01 +0200
Subject: [PATCH] feat: add feedback button that leads to the repository of the
 course (#2034)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <git@daniel-kantor.com>
---
 apps/lluis/NavBar/NavBarButton.svelte                     | 4 +++-
 apps/web/cypress/integration/chips.feature                | 1 +
 apps/web/cypress/integration/common/button_new_tab.js     | 8 ++++++++
 apps/web/cypress/integration/coursePage.feature           | 1 +
 apps/web/cypress/integration/feedbackButton.feature       | 5 +++++
 apps/web/src/components/NavBar.svelte                     | 4 ++++
 apps/web/src/courses/test/courseData.json                 | 2 +-
 apps/web/src/routes/course/[courseName]/index.svelte      | 7 ++++---
 .../routes/course/[courseName]/skill/[id]/index.svelte    | 5 ++++-
 courses/test/course.yaml                                  | 2 +-
 10 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/cypress/integration/common/button_new_tab.js
 create mode 100644 apps/web/cypress/integration/feedbackButton.feature

diff --git a/apps/lluis/NavBar/NavBarButton.svelte b/apps/lluis/NavBar/NavBarButton.svelte
index 308785f0a919..9c4e3253c3f0 100644
--- a/apps/lluis/NavBar/NavBarButton.svelte
+++ b/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);
diff --git a/apps/web/cypress/integration/chips.feature b/apps/web/cypress/integration/chips.feature
index 08b644096d71..1c7ec86f0896 100644
--- a/apps/web/cypress/integration/chips.feature
+++ b/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"
diff --git a/apps/web/cypress/integration/common/button_new_tab.js b/apps/web/cypress/integration/common/button_new_tab.js
new file mode 100644
index 000000000000..92d3640ffdf2
--- /dev/null
+++ b/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")
+})
diff --git a/apps/web/cypress/integration/coursePage.feature b/apps/web/cypress/integration/coursePage.feature
index 9277f6a347a3..541f2127d41b 100644
--- a/apps/web/cypress/integration/coursePage.feature
+++ b/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"
diff --git a/apps/web/cypress/integration/feedbackButton.feature b/apps/web/cypress/integration/feedbackButton.feature
new file mode 100644
index 000000000000..b8a82884f40f
--- /dev/null
+++ b/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
diff --git a/apps/web/src/components/NavBar.svelte b/apps/web/src/components/NavBar.svelte
index 423c0adfe1de..f562ca2958dd 100644
--- a/apps/web/src/components/NavBar.svelte
+++ b/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>
diff --git a/apps/web/src/courses/test/courseData.json b/apps/web/src/courses/test/courseData.json
index 79bc0e8adc77..0073f1735e73 100644
--- a/apps/web/src/courses/test/courseData.json
+++ b/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",
diff --git a/apps/web/src/routes/course/[courseName]/index.svelte b/apps/web/src/routes/course/[courseName]/index.svelte
index 9cf7f6cb3859..0522cbcae5e8 100644
--- a/apps/web/src/routes/course/[courseName]/index.svelte
+++ b/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">
diff --git a/apps/web/src/routes/course/[courseName]/skill/[id]/index.svelte b/apps/web/src/routes/course/[courseName]/skill/[id]/index.svelte
index 3eff201736d6..162e96b37bc5 100644
--- a/apps/web/src/routes/course/[courseName]/skill/[id]/index.svelte
+++ b/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}
diff --git a/courses/test/course.yaml b/courses/test/course.yaml
index b5204c3e98e8..c1301e40fb88 100644
--- a/courses/test/course.yaml
+++ b/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:
     - "á"