Update UI and add additional info to Learner Reports pages

kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js

@@ -141,6 +141,11 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       'Exercises are marked as completed when the learner has answered the required number of questions correctly in that specific exercise.',
   },
+  lessonsCompletedLabel: {
+    message: 'Lessons completed',
+    context:
+      'Lessons are marked as completed when the learner has answered the required number of questions correctly in that specific lesson.',
+  },
   filterLessonAll: {
     message: 'All',
     context:

kolibri/plugins/coach/assets/src/views/reports/ReportsHeader.vue

@@ -9,9 +9,10 @@
       />
     </p>
     <h1>{{ reportTitle }}</h1>
-    <p v-show="!$isPrint">
-      {{ $tr('description') }}
-    </p>
+    <slot name="header"></slot>
+    <div v-if="!$slots.header && !$isPrint">
+      <p>{{ $tr('description') }}</p>
+    </div>
     <HeaderTabs :style="{ marginTop: '28px' }">
       <KTabsList
         ref="tabsList"

kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue

@@ -2,10 +2,20 @@
 
   <CoachAppBarPage>
     <KPageContainer>
-      <ReportsLearnerHeader
-        :enablePrint="true"
-        :activeTabId="ReportsLearnersTabs.ACTIVITY"
-      />
+      <ReportsLearnerHeader />
+    </KPageContainer>
+
+    <KPageContainer>
+      <HeaderTabs :enablePrint="true">
+        <KTabsList
+          ref="tabList"
+          :tabsId="REPORTS_LEARNERS_TABS_ID"
+          :ariaLabel="$tr('reportLearners')"
+          :activeTabId="ReportsLearnersTabs.ACTIVITY"
+          :tabs="tabs"
+          @click="() => saveTabsClick(REPORTS_LEARNERS_TABS_ID)"
+        />
+      </HeaderTabs>
       <KTabsPanel
         :tabsId="REPORTS_LEARNERS_TABS_ID"
         :activeTabId="ReportsLearnersTabs.ACTIVITY"
@@ -27,6 +37,7 @@
   import CoachAppBarPage from '../CoachAppBarPage';
   import ActivityList from '../common/notifications/ActivityList';
   import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
+  import { useCoachTabs } from '../../composables/useCoachTabs';
   import ReportsLearnerHeader from './ReportsLearnerHeader';
 
   export default {
@@ -37,12 +48,53 @@
       ReportsLearnerHeader,
     },
     mixins: [commonCoach],
+    setup() {
+      const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
+      return {
+        saveTabsClick,
+        wereTabsClickedRecently,
+      };
+    },
     data() {
       return {
         REPORTS_LEARNERS_TABS_ID,
         ReportsLearnersTabs,
       };
     },
+    computed: {
+      tabs() {
+        return [
+          {
+            id: ReportsLearnersTabs.REPORTS,
+            label: this.coachString('reportsLabel'),
+            to: this.classRoute('ReportsLearnerReportPage', {}),
+          },
+          {
+            id: ReportsLearnersTabs.ACTIVITY,
+            label: this.coachString('activityLabel'),
+            to: this.classRoute('ReportsLearnerActivityPage', {}),
+          },
+        ];
+      },
+    },
+    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_LEARNERS_TABS_ID)) {
+        this.$nextTick(() => {
+          this.$refs.tabList.focusActiveTab();
+        });
+      }
+    },
+    $trs: {
+      reportLearners: {
+        message: 'Report learners',
+        context: 'Labels the Reports > Learners tab for screen reader users',
+      },
+    },
   };
 
 </script>