From 13d43800c6ac49f9230fdef6899e20571375b42e Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Wed, 8 Feb 2023 17:19:35 +0100
Subject: [PATCH 1/2] Temporarily pin KDS to fork branch for testing

---
 kolibri/core/package.json                     | 2 +-
 packages/kolibri-core-for-export/package.json | 2 +-
 yarn.lock                                     | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 44730bfb3ab..58a23c08dd0 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8",
+    "kolibri-design-system": "https://github.com/MisRob/kolibri-design-system#837fcabe7ced8dda7d44a2bb7adf28c067b2d736",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 79b18debf63..58fdc8dc34b 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -23,7 +23,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8",
+    "kolibri-design-system": "https://github.com/MisRob/kolibri-design-system#837fcabe7ced8dda7d44a2bb7adf28c067b2d736",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/yarn.lock b/yarn.lock
index b0f975c9f18..343a4bbb55c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7393,9 +7393,9 @@ kolibri-constants@0.1.42:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8":
+"kolibri-design-system@https://github.com/MisRob/kolibri-design-system#837fcabe7ced8dda7d44a2bb7adf28c067b2d736":
   version "1.3.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8"
+  resolved "https://github.com/MisRob/kolibri-design-system#837fcabe7ced8dda7d44a2bb7adf28c067b2d736"
   dependencies:
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "^3.0.21"

From 666063eb4d36b60a4c53ce99caeaab0d523ffe2d Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Thu, 9 Feb 2023 15:04:24 +0100
Subject: [PATCH 2/2] Use KDS tabs in coach reports

---
 .../views/reports/ReportsGroupListPage.vue    |  98 ++++----
 .../src/views/reports/ReportsHeader.vue       |  62 +++--
 .../views/reports/ReportsLearnerListPage.vue  |  90 +++----
 .../views/reports/ReportsLessonListPage.vue   | 126 +++++-----
 .../src/views/reports/ReportsQuizListPage.vue | 220 +++++++++---------
 5 files changed, 326 insertions(+), 270 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsGroupListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsGroupListPage.vue
index b81e2874f2d..7b91c0e969c 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsGroupListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsGroupListPage.vue
@@ -7,52 +7,60 @@
   >
 
     <KPageContainer>
-      <ReportsHeader :title="$isPrint ? $tr('printLabel', { className }) : null" />
-      <ReportsControls @export="exportCSV" />
-      <CoreTable :emptyMessage="coachString('groupListEmptyState')">
-        <template #headers>
-          <th>{{ coachString('groupNameLabel') }}</th>
-          <th>{{ coreString('lessonsLabel') }}</th>
-          <th>{{ coreString('quizzesLabel') }}</th>
-          <th>{{ coreString('learnersLabel') }}</th>
-          <th>{{ coachString('avgScoreLabel') }}</th>
-          <th>{{ coachString('lastActivityLabel') }}</th>
-        </template>
-        <template #tbody>
-          <transition-group
-            tag="tbody"
-            name="list"
-          >
-            <tr
-              v-for="tableRow in table"
-              :key="tableRow.id"
+      <ReportsHeader
+        :title="$isPrint ? $tr('printLabel', { className }) : null"
+        activeTabId="tabGroups"
+      />
+      <KTabsPanel
+        tabsId="coachReports"
+        activeTabId="tabGroups"
+      >
+        <ReportsControls @export="exportCSV" />
+        <CoreTable :emptyMessage="coachString('groupListEmptyState')">
+          <template #headers>
+            <th>{{ coachString('groupNameLabel') }}</th>
+            <th>{{ coreString('lessonsLabel') }}</th>
+            <th>{{ coreString('quizzesLabel') }}</th>
+            <th>{{ coreString('learnersLabel') }}</th>
+            <th>{{ coachString('avgScoreLabel') }}</th>
+            <th>{{ coachString('lastActivityLabel') }}</th>
+          </template>
+          <template #tbody>
+            <transition-group
+              tag="tbody"
+              name="list"
             >
-              <td>
-                <KRouterLink
-                  :text="tableRow.name"
-                  :to="classRoute('ReportsGroupReportPage', { groupId: tableRow.id })"
-                  icon="group"
-                />
-              </td>
-              <td>
-                {{ $formatNumber(tableRow.numLessons) }}
-              </td>
-              <td>
-                {{ $formatNumber(tableRow.numQuizzes) }}
-              </td>
-              <td>
-                {{ $formatNumber(tableRow.numLearners) }}
-              </td>
-              <td>
-                <Score :value="tableRow.avgScore" />
-              </td>
-              <td>
-                <ElapsedTime :date="tableRow.lastActivity" />
-              </td>
-            </tr>
-          </transition-group>
-        </template>
-      </CoreTable>
+              <tr
+                v-for="tableRow in table"
+                :key="tableRow.id"
+              >
+                <td>
+                  <KRouterLink
+                    :text="tableRow.name"
+                    :to="classRoute('ReportsGroupReportPage', { groupId: tableRow.id })"
+                    icon="group"
+                  />
+                </td>
+                <td>
+                  {{ $formatNumber(tableRow.numLessons) }}
+                </td>
+                <td>
+                  {{ $formatNumber(tableRow.numQuizzes) }}
+                </td>
+                <td>
+                  {{ $formatNumber(tableRow.numLearners) }}
+                </td>
+                <td>
+                  <Score :value="tableRow.avgScore" />
+                </td>
+                <td>
+                  <ElapsedTime :date="tableRow.lastActivity" />
+                </td>
+              </tr>
+            </transition-group>
+          </template>
+        </CoreTable>
+      </KTabsPanel>
     </KPageContainer>
   </CoachAppBarPage>
 
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsHeader.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsHeader.vue
index a32bdf452b9..74d89808914 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsHeader.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsHeader.vue
@@ -12,25 +12,14 @@
     <p v-show="!$isPrint">
       {{ $tr('description') }}
     </p>
-    <HeaderTabs>
-
-      <HeaderTab
-        :text="coreString('lessonsLabel')"
-        :to="classRoute('ReportsLessonListPage')"
-      />
-      <HeaderTab
-        :text="coreString('quizzesLabel')"
-        :to="classRoute('ReportsQuizListPage')"
-      />
-      <HeaderTab
-        :text="coachString('groupsLabel')"
-        :to="classRoute('ReportsGroupListPage')"
-      />
-      <HeaderTab
-        :text="coreString('learnersLabel')"
-        :to="classRoute('ReportsLearnerListPage')"
-      />
-    </HeaderTabs>
+    <KTabsList
+      ref="tabsList"
+      tabsId="coachReports"
+      ariaLabel="Coach reports"
+      :activeTabId="activeTabId"
+      :tabs="tabs"
+      :style="{ marginBottom: '24px' }"
+    />
   </div>
 
 </template>
@@ -46,17 +35,52 @@
     name: 'ReportsHeader',
     mixins: [commonCoach, commonCoreStrings],
     props: {
+      activeTabId: {
+        type: String,
+        required: true,
+      },
       title: {
         type: String,
         default: null,
       },
     },
+    data() {
+      return {
+        tabs: [
+          {
+            id: 'tabLessons',
+            label: this.coreString('lessonsLabel'),
+            to: this.classRoute('ReportsLessonListPage'),
+          },
+          {
+            id: 'tabQuizzes',
+            label: this.coreString('quizzesLabel'),
+            to: this.classRoute('ReportsQuizListPage'),
+          },
+          {
+            id: 'tabGroups',
+            label: this.coachString('groupsLabel'),
+            to: this.classRoute('ReportsGroupListPage'),
+          },
+          {
+            id: 'tabLearners',
+            label: this.coreString('learnersLabel'),
+            to: this.classRoute('ReportsLearnerListPage'),
+          },
+        ],
+      };
+    },
     computed: {
       ...mapGetters(['classListPageEnabled']),
       reportTitle() {
         return this.title || this.coachString('reportsLabel');
       },
     },
+    mounted() {
+      this.$nextTick(() => {
+        this.$refs.tabsList.focusActiveTab();
+      });
+    },
     $trs: {
       description: {
         message: 'View reports for your learners and class materials',
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerListPage.vue
index fa29dd49841..89b88e496a8 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerListPage.vue
@@ -7,48 +7,56 @@
   >
 
     <KPageContainer>
-      <ReportsHeader :title="$isPrint ? $tr('printLabel', { className }) : null" />
-      <ReportsControls @export="exportCSV" />
-      <CoreTable :emptyMessage="coachString('learnerListEmptyState')">
-        <template #headers>
-          <th>{{ coachString('nameLabel') }}</th>
-          <th>{{ coachString('groupsLabel') }}</th>
-          <th>{{ coachString('avgScoreLabel') }}</th>
-          <th>{{ coachString('exercisesCompletedLabel') }}</th>
-          <th>{{ coachString('resourcesViewedLabel') }}</th>
-          <th>{{ coachString('lastActivityLabel') }}</th>
-        </template>
-        <template #tbody>
-          <transition-group
-            tag="tbody"
-            name="list"
-          >
-            <tr
-              v-for="tableRow in table"
-              :key="tableRow.id"
+      <ReportsHeader
+        :title="$isPrint ? $tr('printLabel', { className }) : null"
+        activeTabId="tabLearners"
+      />
+      <KTabsPanel
+        tabsId="coachReports"
+        activeTabId="tabLearners"
+      >
+        <ReportsControls @export="exportCSV" />
+        <CoreTable :emptyMessage="coachString('learnerListEmptyState')">
+          <template #headers>
+            <th>{{ coachString('nameLabel') }}</th>
+            <th>{{ coachString('groupsLabel') }}</th>
+            <th>{{ coachString('avgScoreLabel') }}</th>
+            <th>{{ coachString('exercisesCompletedLabel') }}</th>
+            <th>{{ coachString('resourcesViewedLabel') }}</th>
+            <th>{{ coachString('lastActivityLabel') }}</th>
+          </template>
+          <template #tbody>
+            <transition-group
+              tag="tbody"
+              name="list"
             >
-              <td>
-                <KRouterLink
-                  :text="tableRow.name"
-                  :to="classRoute('ReportsLearnerReportPage', { learnerId: tableRow.id })"
-                  icon="person"
-                />
-              </td>
-              <td>
-                <TruncatedItemList :items="tableRow.groups" />
-              </td>
-              <td>
-                <Score :value="tableRow.avgScore" />
-              </td>
-              <td>{{ $formatNumber(tableRow.exercises) }}</td>
-              <td>{{ $formatNumber(tableRow.resources) }}</td>
-              <td>
-                <ElapsedTime :date="tableRow.lastActivity" />
-              </td>
-            </tr>
-          </transition-group>
-        </template>
-      </CoreTable>
+              <tr
+                v-for="tableRow in table"
+                :key="tableRow.id"
+              >
+                <td>
+                  <KRouterLink
+                    :text="tableRow.name"
+                    :to="classRoute('ReportsLearnerReportPage', { learnerId: tableRow.id })"
+                    icon="person"
+                  />
+                </td>
+                <td>
+                  <TruncatedItemList :items="tableRow.groups" />
+                </td>
+                <td>
+                  <Score :value="tableRow.avgScore" />
+                </td>
+                <td>{{ $formatNumber(tableRow.exercises) }}</td>
+                <td>{{ $formatNumber(tableRow.resources) }}</td>
+                <td>
+                  <ElapsedTime :date="tableRow.lastActivity" />
+                </td>
+              </tr>
+            </transition-group>
+          </template>
+        </CoreTable>
+      </KTabsPanel>
     </KPageContainer>
   </CoachAppBarPage>
 
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue
index 01e89ab324f..e444fc84ea7 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue
@@ -7,66 +7,74 @@
   >
 
     <KPageContainer>
-      <ReportsHeader :title="$isPrint ? $tr('printLabel', { className }) : null" />
-      <ReportsControls @export="exportCSV">
-        <KSelect
-          v-model="filter"
-          :label="coachString('filterLessonStatus')"
-          :options="filterOptions"
-          :inline="true"
-        />
-
-      </ReportsControls>
-      <CoreTable :emptyMessage="emptyMessage">
-        <template #headers>
-          <th>{{ coachString('titleLabel') }}</th>
-          <th>{{ coreString('progressLabel') }}</th>
-          <th>{{ coachString('recipientsLabel') }}</th>
-          <th v-show="!$isPrint">
-            {{ coachString('lessonVisibleLabel') }}
-          </th>
-        </template>
-        <template #tbody>
-          <transition-group
-            tag="tbody"
-            name="list"
-          >
-            <tr
-              v-for="tableRow in table"
-              :key="tableRow.id"
+      <ReportsHeader
+        :title="$isPrint ? $tr('printLabel', { className }) : null"
+        activeTabId="tabLessons"
+      />
+      <KTabsPanel
+        tabsId="coachReports"
+        activeTabId="tabLessons"
+      >
+        <ReportsControls @export="exportCSV">
+          <KSelect
+            v-model="filter"
+            :label="coachString('filterLessonStatus')"
+            :options="filterOptions"
+            :inline="true"
+          />
+
+        </ReportsControls>
+        <CoreTable :emptyMessage="emptyMessage">
+          <template #headers>
+            <th>{{ coachString('titleLabel') }}</th>
+            <th>{{ coreString('progressLabel') }}</th>
+            <th>{{ coachString('recipientsLabel') }}</th>
+            <th v-show="!$isPrint">
+              {{ coachString('lessonVisibleLabel') }}
+            </th>
+          </template>
+          <template #tbody>
+            <transition-group
+              tag="tbody"
+              name="list"
             >
-              <td>
-                <KRouterLink
-                  :text="tableRow.title"
-                  :to="classRoute('ReportsLessonReportPage', { lessonId: tableRow.id })"
-                  icon="lesson"
-                />
-              </td>
-              <td>
-                <StatusSummary
-                  :tally="tableRow.tally"
-                  :verbose="true"
-                />
-              </td>
-              <td>
-                <Recipients
-                  :groupNames="getRecipientNamesForExam(tableRow)"
-                  :hasAssignments="tableRow.assignments.length > 0"
-                />
-              </td>
-              <td v-show="!$isPrint">
-                <KSwitch
-                  name="toggle-lesson-visibility"
-                  label=""
-                  :checked="tableRow.active"
-                  :value="tableRow.active"
-                  @change="handleToggleVisibility(tableRow)"
-                />
-              </td>
-            </tr>
-          </transition-group>
-        </template>
-      </CoreTable>
+              <tr
+                v-for="tableRow in table"
+                :key="tableRow.id"
+              >
+                <td>
+                  <KRouterLink
+                    :text="tableRow.title"
+                    :to="classRoute('ReportsLessonReportPage', { lessonId: tableRow.id })"
+                    icon="lesson"
+                  />
+                </td>
+                <td>
+                  <StatusSummary
+                    :tally="tableRow.tally"
+                    :verbose="true"
+                  />
+                </td>
+                <td>
+                  <Recipients
+                    :groupNames="getRecipientNamesForExam(tableRow)"
+                    :hasAssignments="tableRow.assignments.length > 0"
+                  />
+                </td>
+                <td v-show="!$isPrint">
+                  <KSwitch
+                    name="toggle-lesson-visibility"
+                    label=""
+                    :checked="tableRow.active"
+                    :value="tableRow.active"
+                    @change="handleToggleVisibility(tableRow)"
+                  />
+                </td>
+              </tr>
+            </transition-group>
+          </template>
+        </CoreTable>
+      </KTabsPanel>
     </KPageContainer>
   </CoachAppBarPage>
 
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue
index 12b646feeb4..42a082f0ad4 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue
@@ -7,116 +7,124 @@
   >
 
     <KPageContainer :class="{ 'print': $isPrint }">
-      <ReportsHeader :title="$isPrint ? $tr('printLabel', { className }) : null" />
-      <ReportsControls @export="exportCSV">
-        <KSelect
-          v-model="filter"
-          :label="coachString('filterQuizStatus')"
-          :options="filterOptions"
-          :inline="true"
-        />
+      <ReportsHeader
+        :title="$isPrint ? $tr('printLabel', { className }) : null"
+        activeTabId="tabQuizzes"
+      />
+      <KTabsPanel
+        tabsId="coachReports"
+        activeTabId="tabQuizzes"
+      >
+        <ReportsControls @export="exportCSV">
+          <KSelect
+            v-model="filter"
+            :label="coachString('filterQuizStatus')"
+            :options="filterOptions"
+            :inline="true"
+          />
 
-      </ReportsControls>
-      <CoreTable :emptyMessage="emptyMessage">
-        <template #headers>
-          <th>{{ coachString('titleLabel') }}</th>
-          <th style="position:relative;">
-            {{ coachString('avgScoreLabel') }}
-            <AverageScoreTooltip v-show="!$isPrint" />
-          </th>
-          <th>{{ coreString('progressLabel') }}</th>
-          <th>{{ coachString('recipientsLabel') }}</th>
-          <th
-            v-show="!$isPrint"
-            class="center-text"
-          >
-            {{ coachString('statusLabel') }}
-          </th>
-        </template>
-        <template #tbody>
-          <transition-group
-            tag="tbody"
-            name="list"
-          >
-            <tr
-              v-for="tableRow in table"
-              :key="tableRow.id"
+        </ReportsControls>
+        <CoreTable :emptyMessage="emptyMessage">
+          <template #headers>
+            <th>{{ coachString('titleLabel') }}</th>
+            <th style="position:relative;">
+              {{ coachString('avgScoreLabel') }}
+              <AverageScoreTooltip v-show="!$isPrint" />
+            </th>
+            <th>{{ coreString('progressLabel') }}</th>
+            <th>{{ coachString('recipientsLabel') }}</th>
+            <th
+              v-show="!$isPrint"
+              class="center-text"
+            >
+              {{ coachString('statusLabel') }}
+            </th>
+          </template>
+          <template #tbody>
+            <transition-group
+              tag="tbody"
+              name="list"
             >
-              <td>
-                <KRouterLink
-                  :text="tableRow.title"
-                  :to="classRoute('ReportsQuizLearnerListPage', { quizId: tableRow.id })"
-                  icon="quiz"
-                />
-              </td>
-              <td>
-                <Score :value="tableRow.avgScore" />
-              </td>
-              <td>
-                <StatusSummary
-                  :tally="tableRow.tally"
-                  :verbose="true"
-                  :includeNotStarted="true"
-                />
-              </td>
-              <td>
-                <Recipients
-                  :groupNames="getRecipientNamesForExam(tableRow)"
-                  :hasAssignments="tableRow.hasAssignments"
-                />
-              </td>
-              <td
-                v-show="!$isPrint"
-                class="button-col center-text core-table-button-col"
+              <tr
+                v-for="tableRow in table"
+                :key="tableRow.id"
               >
-                <!-- Open quiz button -->
-                <KButton
-                  v-if="!tableRow.active && !tableRow.archive"
-                  :text="coachString('openQuizLabel')"
-                  appearance="flat-button"
-                  class="table-left-aligned-button"
-                  @click="showOpenConfirmationModal = true; modalQuizId = tableRow.id"
-                />
-                <!-- Close quiz button -->
-                <KButton
-                  v-if="tableRow.active && !tableRow.archive"
-                  :text="coachString('closeQuizLabel')"
-                  appearance="flat-button"
-                  class="table-left-aligned-button"
-                  @click="showCloseConfirmationModal = true; modalQuizId = tableRow.id;"
-                />
-                <div
-                  v-if="tableRow.archive"
-                  class="quiz-closed-label"
+                <td>
+                  <KRouterLink
+                    :text="tableRow.title"
+                    :to="classRoute('ReportsQuizLearnerListPage', { quizId: tableRow.id })"
+                    icon="quiz"
+                  />
+                </td>
+                <td>
+                  <Score :value="tableRow.avgScore" />
+                </td>
+                <td>
+                  <StatusSummary
+                    :tally="tableRow.tally"
+                    :verbose="true"
+                    :includeNotStarted="true"
+                  />
+                </td>
+                <td>
+                  <Recipients
+                    :groupNames="getRecipientNamesForExam(tableRow)"
+                    :hasAssignments="tableRow.hasAssignments"
+                  />
+                </td>
+                <td
+                  v-show="!$isPrint"
+                  class="button-col center-text core-table-button-col"
                 >
-                  {{ coachString('quizClosedLabel') }}
-                </div>
-              </td>
-            </tr>
-          </transition-group>
-        </template>
-      </CoreTable>
-      <!-- Modals for Close & Open of quiz from right-most column -->
-      <KModal
-        v-if="showOpenConfirmationModal"
-        :title="coachString('openQuizLabel')"
-        :submitText="coreString('continueAction')"
-        :cancelText="coreString('cancelAction')"
-        @cancel="showOpenConfirmationModal = false"
-        @submit="handleOpenQuiz(modalQuizId)"
-      >
-        <div>{{ coachString('openQuizModalDetail') }}</div>
-      </KModal>
-      <KModal
-        v-if="showCloseConfirmationModal"
-        :title="coachString('closeQuizLabel')"
-        :submitText="coreString('continueAction')"
-        :cancelText="coreString('cancelAction')"
-        @cancel="showCloseConfirmationModal = false"
-        @submit="handleCloseQuiz(modalQuizId)"
-      >
-        <div>{{ coachString('closeQuizModalDetail') }}</div>
-      </KModal>
+                  <!-- Open quiz button -->
+                  <KButton
+                    v-if="!tableRow.active && !tableRow.archive"
+                    :text="coachString('openQuizLabel')"
+                    appearance="flat-button"
+                    class="table-left-aligned-button"
+                    @click="showOpenConfirmationModal = true; modalQuizId = tableRow.id"
+                  />
+                  <!-- Close quiz button -->
+                  <KButton
+                    v-if="tableRow.active && !tableRow.archive"
+                    :text="coachString('closeQuizLabel')"
+                    appearance="flat-button"
+                    class="table-left-aligned-button"
+                    @click="showCloseConfirmationModal = true; modalQuizId = tableRow.id;"
+                  />
+                  <div
+                    v-if="tableRow.archive"
+                    class="quiz-closed-label"
+                  >
+                    {{ coachString('quizClosedLabel') }}
+                  </div>
+                </td>
+              </tr>
+            </transition-group>
+          </template>
+        </CoreTable>
+        <!-- Modals for Close & Open of quiz from right-most column -->
+        <KModal
+          v-if="showOpenConfirmationModal"
+          :title="coachString('openQuizLabel')"
+          :submitText="coreString('continueAction')"
+          :cancelText="coreString('cancelAction')"
+          @cancel="showOpenConfirmationModal = false"
+          @submit="handleOpenQuiz(modalQuizId)"
+        >
+          <div>{{ coachString('openQuizModalDetail') }}</div>
+        </KModal>
+        <KModal
+          v-if="showCloseConfirmationModal"
+          :title="coachString('closeQuizLabel')"
+          :submitText="coreString('continueAction')"
+          :cancelText="coreString('cancelAction')"
+          @cancel="showCloseConfirmationModal = false"
+          @submit="handleCloseQuiz(modalQuizId)"
+        >
+          <div>{{ coachString('closeQuizModalDetail') }}</div>
+        </KModal>
+      </KTabsPanel>
     </KPageContainer>
   </CoachAppBarPage>