From a243852a2e17157145225c4ab5b156f03663c715 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Sat, 9 Dec 2023 16:58:30 +0530
Subject: [PATCH 1/6] Use KDS tabs in Coach Reports Lesson tab

---
 .../assets/src/constants/tabsConstants.js     |  5 ++
 .../src/views/reports/ReportsLessonBase.vue   | 72 ++++++++++++++++---
 .../reports/ReportsLessonLearnerListPage.vue  | 11 ++-
 .../views/reports/ReportsLessonReportPage.vue | 12 +++-
 4 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/constants/tabsConstants.js b/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
index 97cd630210..0400f2266d 100644
--- a/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
+++ b/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
@@ -31,3 +31,8 @@ export const QuizzesTabs = {
   REPORT: 'tabReport',
   DIFFICULT_QUESTIONS: 'tabDifficultQuestions',
 };
+export const REPORTS_LESSON_TABS_ID = 'coachReportsLesson';
+export const ReportsLessonTabs = {
+  REPORTS: 'tabReports',
+  LEARNERS: 'tabLearners',
+};
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
index 39517b9110..098a5fb592 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
@@ -40,17 +40,13 @@
         <KPageContainer :topMargin="$isPrint ? 0 : 24">
           <ReportsControls @export="exportCSV" />
           <HeaderTabs :enablePrint="true">
-            <HeaderTab
-              :text="coachString('reportLabel')"
-              :to="group ?
-                classRoute('ReportsGroupReportLessonPage') :
-                classRoute('ReportsLessonReportPage')"
-            />
-            <HeaderTab
-              :text="coreString('learnersLabel')"
-              :to="group ?
-                classRoute('ReportsGroupReportLessonLearnerListPage') :
-                classRoute('ReportsLessonLearnerListPage')"
+            <KTabsList
+              ref="tabList"
+              :tabsId="REPORTS_LESSON_TABS_ID"
+              :ariaLabel="$tr('coachReportsLesson')"
+              :activeTabId="activeTabId"
+              :tabs="tabs"
+              @click="() => saveTabsClick(REPORTS_LESSON_TABS_ID)"
             />
           </HeaderTabs>
           <ReportsLessonResourcesList
@@ -79,6 +75,8 @@
   import CSVExporter from '../../csv/exporter';
   import * as csvFields from '../../csv/fields';
   import LessonOptionsDropdownMenu from '../plan/LessonSummaryPage/LessonOptionsDropdownMenu';
+  import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../constants/tabsConstants';
+  import { useCoachTabs } from '../../composables/useCoachTabs';
   import ReportsControls from './ReportsControls';
   import ReportsLessonLearnersList from './ReportsLessonLearnersList';
   import ReportsLessonResourcesList from './ReportsLessonResourcesList';
@@ -93,6 +91,13 @@
       ReportsLessonResourcesList,
     },
     mixins: [commonCoach, commonCoreStrings],
+    setup() {
+      const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
+      return {
+        saveTabsClick,
+        wereTabsClickedRecently,
+      };
+    },
     props: {
       showResources: {
         type: Boolean,
@@ -102,6 +107,15 @@
         type: Boolean,
         default: false,
       },
+      activeTabId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        REPORTS_LESSON_TABS_ID,
+      };
     },
     computed: {
       lesson() {
@@ -151,6 +165,36 @@
           return tableRow;
         });
       },
+      tabs() {
+        return [
+          {
+            id: ReportsLessonTabs.REPORTS,
+            label: this.coachString('reportsLabel'),
+            to: this.group
+              ? this.classRoute('ReportsGroupReportLessonPage')
+              : this.classRoute('ReportsLessonReportPage'),
+          },
+          {
+            id: ReportsLessonTabs.LEARNERS,
+            label: this.coachString('learnersLabel'),
+            to: this.group
+              ? this.classRoute('ReportsGroupReportLessonLearnerListPage')
+              : this.classRoute('ReportsLessonLearnerListPage'),
+          },
+        ];
+      },
+    },
+    mounted() {
+      // focus the active tab but only when it's likely
+      // that this header was re-mounted as a result
+      // of navigation after clicking a tab (focus shouldn't
+      // be manipulated programatically in other cases, e.g.
+      // when visiting the page for the first time)
+      if (this.wereTabsClickedRecently(this.REPORTS_LESSON_TABS_ID)) {
+        this.$nextTick(() => {
+          this.$refs.tabList.focusActiveTab();
+        });
+      }
     },
     methods: {
       handleSelectOption(action) {
@@ -227,6 +271,12 @@
         }
       },
     },
+    $trs: {
+      coachReportsLesson: {
+        message: 'Report lesson',
+        context: 'Labels the Reports > Lesson tab for screen reader users',
+      },
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerListPage.vue
index b88cde7ba1..f3a29f3010 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerListPage.vue
@@ -1,12 +1,15 @@
 <template>
 
-  <ReportsLessonBase :showLearners="true" />
+  <ReportsLessonBase :showLearners="true" :activeTabId="ReportsLessonTabs.LEARNERS">
+    <KTabPanel :tabsId="REPORTS_LESSON_TABS_ID" :activeTabId="ReportsLessonTabs.LEARNERS" />
+  </ReportsLessonBase>
 
 </template>
 
 
 <script>
 
+  import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../constants/tabsConstants';
   import ReportsLessonBase from './ReportsLessonBase';
 
   export default {
@@ -14,6 +17,12 @@
     components: {
       ReportsLessonBase,
     },
+    data() {
+      return {
+        REPORTS_LESSON_TABS_ID,
+        ReportsLessonTabs,
+      };
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue
index 932daa6118..3bbe469949 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue
@@ -1,12 +1,14 @@
 <template>
 
-  <ReportsLessonBase :showResources="true" />
+  <ReportsLessonBase :showResources="true" :activeTabId="ReportsLessonTabs.REPORTS">
+    <KTabPanel :tabsId="REPORTS_LESSON_TABS_ID" :activeTabId="ReportsLessonTabs.REPORTS" />
+  </ReportsLessonBase>
 
 </template>
 
 
 <script>
-
+  import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../constants/tabsConstants';
   import ReportsLessonBase from './ReportsLessonBase';
 
   export default {
@@ -14,6 +16,12 @@
     components: {
       ReportsLessonBase,
     },
+    data() {
+      return {
+        REPORTS_LESSON_TABS_ID,
+        ReportsLessonTabs,
+      };
+    },
   };
 
 </script>

From 8db5b150a209615e1fcdb59e15064110d7756328 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Sat, 9 Dec 2023 17:08:52 +0530
Subject: [PATCH 2/6] Fix typos and improve naming conventions

---
 .../assets/src/constants/tabsConstants.js      |  4 ++--
 .../reports/ReportsLearnerActivityPage.vue     | 12 ++++++------
 .../src/views/reports/ReportsLearnerHeader.vue | 18 +++++++++---------
 .../views/reports/ReportsLearnerReportPage.vue | 12 ++++++------
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/constants/tabsConstants.js b/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
index 0400f2266d..2b473c7f30 100644
--- a/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
+++ b/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
@@ -20,8 +20,8 @@ export const ReportsGroupTabs = {
   ACTIVITY: 'tabActivity',
 };
 
-export const LEARNERS_TABS_ID = 'reportLearners';
-export const LearnersTabs = {
+export const REPORTS_LEARNERS_TABS_ID = 'coachReportsLearners';
+export const ReportsLearnersTabs = {
   REPORTS: 'tabReports',
   ACTIVITY: 'tabActivity',
 };
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue
index 6fd5734df9..ed5442ccfb 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue
@@ -8,10 +8,10 @@
 
     <KPageContainer>
 
-      <ReportsLearnerHeader :enablePrint="true" :activeTabId="LearnersTabs.ACTIVITY" />
+      <ReportsLearnerHeader :enablePrint="true" :activeTabId="ReportsLearnersTabs.ACTIVITY" />
       <KTabsPanel
-        :tabsId="LEARNERS_TABS_ID"
-        :activeTabId="LearnersTabs.ACTIVITY"
+        :tabsId="REPORTS_LEARNERS_TABS_ID"
+        :activeTabId="ReportsLearnersTabs.ACTIVITY"
       >
         <ActivityList
           embeddedPageName="ReportsLearnerActivityPage"
@@ -29,7 +29,7 @@
   import commonCoach from '../common';
   import CoachAppBarPage from '../CoachAppBarPage';
   import ActivityList from '../common/notifications/ActivityList';
-  import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
+  import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
   import ReportsLearnerHeader from './ReportsLearnerHeader';
 
   export default {
@@ -42,8 +42,8 @@
     mixins: [commonCoach],
     data() {
       return {
-        LEARNERS_TABS_ID,
-        LearnersTabs,
+        REPORTS_LEARNERS_TABS_ID,
+        ReportsLearnersTabs,
       };
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerHeader.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerHeader.vue
index 14799c4698..dd5f205e19 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerHeader.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerHeader.vue
@@ -55,11 +55,11 @@
     <HeaderTabs :enablePrint="enablePrint">
       <KTabsList
         ref="tabList"
-        :tabsId="LEARNERS_TABS_ID"
+        :tabsId="REPORTS_LEARNERS_TABS_ID"
         :ariaLabel="$tr('reportLearners')"
         :activeTabId="activeTabId"
         :tabs="tabs"
-        @click="() => saveTabsClick(LEARNERS_TABS_ID)"
+        @click="() => saveTabsClick(REPORTS_LEARNERS_TABS_ID)"
       />
     </HeaderTabs>
   </div>
@@ -71,7 +71,7 @@
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
-  import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
+  import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
   import { useCoachTabs } from '../../composables/useCoachTabs';
 
   export default {
@@ -97,7 +97,7 @@
     },
     data() {
       return {
-        LEARNERS_TABS_ID,
+        REPORTS_LEARNERS_TABS_ID,
       };
     },
     computed: {
@@ -136,12 +136,12 @@
       tabs() {
         return [
           {
-            id: LearnersTabs.REPORTS,
+            id: ReportsLearnersTabs.REPORTS,
             label: this.coachString('reportsLabel'),
             to: this.classRoute('ReportsLearnerReportPage', {}),
           },
           {
-            id: LearnersTabs.ACTIVITY,
+            id: ReportsLearnersTabs.ACTIVITY,
             label: this.coachString('activityLabel'),
             to: this.classRoute('ReportsLearnerActivityPage', {}),
           },
@@ -153,8 +153,8 @@
       // that this header was re-mounted as a result
       // of navigation after clicking a tab (focus shouldn't
       // be manipulated programatically in other cases, e.g.
-      // when visiting the Plan page for the first time)
-      if (this.wereTabsClickedRecently(this.LEARNERS_TABS_ID)) {
+      // when visiting the page for the first time)
+      if (this.wereTabsClickedRecently(this.REPORTS_LEARNERS_TABS_ID)) {
         this.$nextTick(() => {
           this.$refs.tabList.focusActiveTab();
         });
@@ -168,7 +168,7 @@
       },
       reportLearners: {
         message: 'Report learners',
-        context: 'Labels the Reports > Learners tab for screen reander users',
+        context: 'Labels the Reports > Learners tab for screen reader users',
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportPage.vue
index ca4ed1d329..6f4f2a9259 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportPage.vue
@@ -8,10 +8,10 @@
 
     <KPageContainer>
 
-      <ReportsLearnerHeader :activeTabId="LearnersTabs.REPORTS" />
+      <ReportsLearnerHeader :activeTabId="ReportsLearnersTabs.REPORTS" />
       <KTabsPanel
-        :tabsId="LEARNERS_TABS_ID"
-        :activeTabId="LearnersTabs.REPORTS"
+        :tabsId="REPORTS_LEARNERS_TABS_ID"
+        :activeTabId="ReportsLearnersTabs.REPORTS"
       >
         <ReportsControls :disableExport="true" />
 
@@ -102,7 +102,7 @@
   import commonCoach from '../common';
   import CoachAppBarPage from '../CoachAppBarPage';
   import { PageNames } from '../../constants';
-  import { LEARNERS_TABS_ID, LearnersTabs } from '../../constants/tabsConstants';
+  import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
   import ReportsLearnerHeader from './ReportsLearnerHeader';
   import ReportsControls from './ReportsControls';
 
@@ -116,8 +116,8 @@
     mixins: [commonCoach, commonCoreStrings],
     data() {
       return {
-        LEARNERS_TABS_ID,
-        LearnersTabs,
+        REPORTS_LEARNERS_TABS_ID,
+        ReportsLearnersTabs,
       };
     },
     computed: {

From e727dd035822d769d85083010482591d64381dbe Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Sat, 9 Dec 2023 17:15:30 +0530
Subject: [PATCH 3/6] Fix lint

---
 .../coach/assets/src/views/reports/ReportsLessonReportPage.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue
index 3bbe469949..741f7fca32 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonReportPage.vue
@@ -8,6 +8,7 @@
 
 
 <script>
+
   import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../constants/tabsConstants';
   import ReportsLessonBase from './ReportsLessonBase';
 

From 11114d414a8fac15bc47a4e1720c0ba41a933d02 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Thu, 21 Dec 2023 17:13:54 +0530
Subject: [PATCH 4/6] Transfer string from component to commonCoach

---
 .../assets/src/views/common/commonCoachStrings.js     |  4 ++++
 .../assets/src/views/reports/ReportsLessonBase.vue    | 11 ++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
index 14a870d1e7..0677c01ce2 100644
--- a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
+++ b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
@@ -603,6 +603,10 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       'Indicates to the coach how many questions the learner answered correctly compared to the previous attempt',
   },
+  coachReportsLesson: {
+    message: 'Report lesson',
+    context: 'Labels the Reports > Lesson tab for screen reader users',
+  },
 });
 
 // Strings for the Missing Content modals, tooltips, alerts, etc.
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
index 098a5fb592..f63b442fdf 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
@@ -43,7 +43,7 @@
             <KTabsList
               ref="tabList"
               :tabsId="REPORTS_LESSON_TABS_ID"
-              :ariaLabel="$tr('coachReportsLesson')"
+              :ariaLabel="coachReportsLesson$()"
               :activeTabId="activeTabId"
               :tabs="tabs"
               @click="() => saveTabsClick(REPORTS_LESSON_TABS_ID)"
@@ -71,6 +71,7 @@
   import sortBy from 'lodash/sortBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
+  import { coachStrings } from '../common/commonCoachStrings';
   import CoachAppBarPage from '../CoachAppBarPage';
   import CSVExporter from '../../csv/exporter';
   import * as csvFields from '../../csv/fields';
@@ -92,10 +93,12 @@
     },
     mixins: [commonCoach, commonCoreStrings],
     setup() {
+      const {coachReportsLesson$} = coachStrings();
       const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
       return {
         saveTabsClick,
         wereTabsClickedRecently,
+        coachReportsLesson$,
       };
     },
     props: {
@@ -271,12 +274,6 @@
         }
       },
     },
-    $trs: {
-      coachReportsLesson: {
-        message: 'Report lesson',
-        context: 'Labels the Reports > Lesson tab for screen reader users',
-      },
-    },
   };
 
 </script>

From 331b1bd022b875658f11b4f9b828c98ebe89f679 Mon Sep 17 00:00:00 2001
From: Mudit Choudhary <cmudit60@gmail.com>
Date: Thu, 21 Dec 2023 17:36:04 +0530
Subject: [PATCH 5/6] fix lint

---
 .../coach/assets/src/views/reports/ReportsLessonBase.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
index f63b442fdf..638557aa28 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
@@ -93,7 +93,7 @@
     },
     mixins: [commonCoach, commonCoreStrings],
     setup() {
-      const {coachReportsLesson$} = coachStrings();
+      const { coachReportsLesson$ } = coachStrings();
       const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
       return {
         saveTabsClick,

From b6f95cca3e4d927d5a9442addad12191fd48fc00 Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Thu, 15 Feb 2024 13:40:25 +0100
Subject: [PATCH 6/6] Fix strings destructuring

---
 .../coach/assets/src/views/reports/ReportsLessonBase.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
index 638557aa28..5647212dd6 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue
@@ -93,7 +93,7 @@
     },
     mixins: [commonCoach, commonCoreStrings],
     setup() {
-      const { coachReportsLesson$ } = coachStrings();
+      const { coachReportsLesson$ } = coachStrings;
       const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
       return {
         saveTabsClick,