From 0ffd2b5169a88250c53c581aebb3e852eec20e82 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 16 Dec 2024 11:39:15 -0500
Subject: [PATCH 01/14] Add initial implementation of side panel recipients
 selector

---
 .../assignments/AssignmentDetailsModal.vue    |  15 ++
 .../IndividualLearnerSelectorTable.vue}       | 160 +++++++-----------
 .../IndividualLearnerSelector/index.vue       | 138 +++++++++++++++
 .../LearnersSelectorSidePanel.vue             | 139 +++++++++++++++
 .../SidePanelRecipientsSelector/index.vue     | 142 ++++++++++++++++
 .../src/views/common/commonCoachStrings.js    |  15 ++
 packages/kolibri/uiText/commonCoreStrings.js  |   4 +
 7 files changed, 512 insertions(+), 101 deletions(-)
 rename kolibri/plugins/coach/assets/src/views/common/assignments/{IndividualLearnerSelector.vue => IndividualLearnerSelector/IndividualLearnerSelectorTable.vue} (67%)
 create mode 100644 kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
 create mode 100644 kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
 create mode 100644 kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
index 9e363c29cd2..952e9745664 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
@@ -11,6 +11,10 @@
         {{ submitErrorMessage }}
       </UiAlert>
 
+      <!--
+        TODO: Refactor or rename this component, setting a title or a description
+        is not part of an "assignment" process (?)
+      -->
       <fieldset>
         <KGrid>
           <KGridItem
@@ -79,6 +83,7 @@
           {{ recipientsLabel$() }}
         </legend>
         <RecipientSelector
+          v-if="false"
           v-model="selectedCollectionIds"
           :groups="groups"
           :classId="classId"
@@ -86,6 +91,14 @@
           :initialAdHocLearners="adHocLearners"
           @updateLearners="learners => (adHocLearners = learners)"
         />
+        <SidePanelRecipientsSelector
+          v-model="selectedCollectionIds"
+          :groups="groups"
+          :classId="classId"
+          :disabled="disabled || formIsSubmitted"
+          :adHocLearners.sync="adHocLearners"
+          :selectedCollectionIds.sync="selectedCollectionIds"
+        />
       </fieldset>
     </form>
 
@@ -118,6 +131,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { coachStrings } from '../../common/commonCoachStrings';
   import RecipientSelector from './RecipientSelector';
+  import SidePanelRecipientsSelector from './SidePanelRecipientsSelector';
 
   export default {
     name: 'AssignmentDetailsModal',
@@ -125,6 +139,7 @@
       BottomAppBar,
       RecipientSelector,
       UiAlert,
+      SidePanelRecipientsSelector,
     },
     mixins: [commonCoreStrings],
     setup() {
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
similarity index 67%
rename from kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector.vue
rename to kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
index 56316240149..1090fde8aaf 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
@@ -1,87 +1,62 @@
 <template>
 
-  <div>
-    <!-- Main checkbox -->
-    <KCheckbox
-      key="adHocLearners"
-      :checked="isVisible"
-      :disabled="disabled"
-      @change="$emit('togglevisibility', $event)"
-    >
-      <KLabeledIcon
-        icon="people"
-        :label="$tr('individualLearnersLabel')"
-      />
-    </KCheckbox>
-
-    <!-- Paginated list of learners -->
-    <div v-if="isVisible">
-      <div class="table-title">
-        {{ $tr('selectedIndividualLearnersLabel') }}
-      </div>
-      <div class="table-description">
-        {{ $tr('onlyShowingEnrolledLabel') }}
-      </div>
-
-      <PaginatedListContainer
-        :items="allLearners"
-        :filterPlaceholder="$tr('searchPlaceholder')"
-        :itemsPerPage="itemsPerPage"
-        @pageChanged="currentPageLearners = $event.items"
+  <PaginatedListContainer
+    :items="allLearners"
+    :filterPlaceholder="$tr('searchPlaceholder')"
+    :itemsPerPage="itemsPerPage"
+    @pageChanged="currentPageLearners = $event.items"
+  >
+    <template #default="{ items }">
+      <CoreTable
+        :selectable="true"
+        :emptyMessage="emptyMessage"
       >
-        <template #default="{ items }">
-          <CoreTable
-            :selectable="true"
-            :emptyMessage="emptyMessage"
-          >
-            <template #headers>
-              <th class="table-checkbox-header">
+        <template #headers>
+          <th class="table-checkbox-header">
+            <KCheckbox
+              key="selectAllOnPage"
+              :label="$tr('selectAllLabel')"
+              :checked="selectAllCheckboxProps.checked"
+              :indeterminate="selectAllCheckboxProps.indeterminate"
+              :disabled="selectAllCheckboxProps.disabled"
+              @change="selectVisiblePage"
+            />
+          </th>
+          <th class="table-header">
+            {{ coreString('usernameLabel') }}
+          </th>
+          <th class="table-header">
+            {{ coachString('groupsLabel') }}
+          </th>
+        </template>
+
+        <template #tbody>
+          <tbody>
+            <tr
+              v-for="learner in items"
+              :key="learner.id"
+            >
+              <td>
                 <KCheckbox
-                  key="selectAllOnPage"
-                  :label="$tr('selectAllLabel')"
-                  :checked="selectAllCheckboxProps.checked"
-                  :indeterminate="selectAllCheckboxProps.indeterminate"
-                  :disabled="selectAllCheckboxProps.disabled"
-                  @change="selectVisiblePage"
+                  :key="`select-learner-${learner.id}`"
+                  :label="learner.name"
+                  :checked="learnerIsSelected(learner)"
+                  :disabled="learnerIsNotSelectable(learner)"
+                  @change="toggleLearner($event, learner)"
                 />
-              </th>
-              <th class="table-header">
-                {{ coreString('usernameLabel') }}
-              </th>
-              <th class="table-header">
-                {{ coachString('groupsLabel') }}
-              </th>
-            </template>
-
-            <template #tbody>
-              <tbody>
-                <tr
-                  v-for="learner in items"
-                  :key="learner.id"
-                >
-                  <td>
-                    <KCheckbox
-                      :key="`select-learner-${learner.id}`"
-                      :label="learner.name"
-                      :checked="learnerIsSelected(learner)"
-                      :disabled="learnerIsNotSelectable(learner)"
-                      @change="toggleLearner($event, learner)"
-                    />
-                  </td>
-                  <td class="table-data">
-                    {{ learner.username }}
-                  </td>
-                  <td class="table-data">
-                    {{ groupNamesForLearner(learner) }}
-                  </td>
-                </tr>
-              </tbody>
-            </template>
-          </CoreTable>
+              </td>
+              <td class="table-data">
+                {{ learner.username }}
+              </td>
+              <td class="table-data">
+                {{ groupNamesForLearner(learner) }}
+              </td>
+            </tr>
+          </tbody>
         </template>
-      </PaginatedListContainer>
-    </div>
-  </div>
+      </CoreTable>
+    </template>
+  </PaginatedListContainer>
 
 </template>
 
@@ -98,8 +73,8 @@
   import forEach from 'lodash/forEach';
   import countBy from 'lodash/countBy';
   import every from 'lodash/every';
-  import ClassSummaryResource from '../../../apiResources/classSummary';
-  import commonCoachStrings from '../../common';
+  import ClassSummaryResource from '../../../../apiResources/classSummary';
+  import commonCoachStrings from '../../../common';
 
   const DEFAULT_ITEMS_PER_PAGE = 30;
 
@@ -115,11 +90,6 @@
       };
     },
     props: {
-      // If true, the main checkbox is checked and the list of learners is shown
-      isVisible: {
-        type: Boolean,
-        required: true,
-      },
       // Used to disable learner rows if already assigned via learner group
       selectedGroupIds: {
         type: Array,
@@ -180,7 +150,10 @@
       learnerIdsFromSelectedGroups() {
         // If a learner is part of a Learner Group that has already been selected
         // in RecipientSelector, then disable their row
-        return flatMap(this.selectedGroupIds, groupId => this.currentGroupMap[groupId].member_ids);
+        return flatMap(
+          this.selectedGroupIds,
+          groupId => this.currentGroupMap[groupId]?.member_ids || [],
+        );
       },
       selectAllCheckboxProps() {
         const currentCount = this.currentPageLearners.length;
@@ -277,25 +250,10 @@
       },
     },
     $trs: {
-      selectedIndividualLearnersLabel: {
-        message: 'Select individual learners',
-        context:
-          'A bolded header for the table where a Coach will select individual learners who will have access to a quiz.',
-      },
-      onlyShowingEnrolledLabel: {
-        message: 'Only showing learners that are enrolled in this class',
-        context:
-          "Shows beneath 'Select individual learners' explaining that the table only includes enrolled learners.",
-      },
       selectAllLabel: {
         message: 'Select all on page',
         context: 'A checkbox label that will select all visible rows in the table',
       },
-      individualLearnersLabel: {
-        message: 'Individual learners',
-        context:
-          'A label for a checkbox that allows the Coach to assign the quiz to individual learners who may not be in a selected group.',
-      },
       searchPlaceholder: {
         message: 'Search for a user…',
         context: 'Indicates the search function which allows admins to import users.',
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
new file mode 100644
index 00000000000..5c05e2d36df
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
@@ -0,0 +1,138 @@
+<template>
+
+  <div>
+    <!-- Main checkbox -->
+    <KCheckbox
+      key="adHocLearners"
+      :checked="isVisible"
+      :disabled="disabled"
+      @change="$emit('togglevisibility', $event)"
+    >
+      <KLabeledIcon
+        icon="people"
+        :label="coachString('individualLearnersLabel')"
+      />
+    </KCheckbox>
+
+    <!-- Paginated list of learners -->
+    <div v-if="isVisible">
+      <div class="table-title">
+        {{ $tr('selectedIndividualLearnersLabel') }}
+      </div>
+      <div class="table-description">
+        {{ coachString('onlyShowingEnrolledLabel') }}
+      </div>
+
+      <IndividualLearnerSelectorTable
+        :selectedGroupIds="selectedGroupIds"
+        :selectedLearnerIds="selectedLearnerIds"
+        :targetClassId="targetClassId"
+        :disabled="disabled"
+        @update:selectedLearnerIds="$emit('update:selectedLearnerIds', $event)"
+      />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import commonCoachStrings from '../../../common';
+  import IndividualLearnerSelectorTable from './IndividualLearnerSelectorTable';
+
+  export default {
+    name: 'IndividualLearnerSelector',
+    components: { IndividualLearnerSelectorTable },
+    mixins: [commonCoreStrings, commonCoachStrings],
+    setup() {
+      const { noLearnersEnrolled$ } = enhancedQuizManagementStrings;
+
+      return {
+        noLearnersEnrolled$,
+      };
+    },
+    props: {
+      // If true, the main checkbox is checked and the list of learners is shown
+      isVisible: {
+        type: Boolean,
+        required: true,
+      },
+      // Used to disable learner rows if already assigned via learner group
+      selectedGroupIds: {
+        type: Array,
+        required: true,
+      },
+      // List of selected learner IDs (must be .sync'd with parent form)
+      selectedLearnerIds: {
+        type: Array,
+        required: true,
+      },
+      // Disables the entire form
+      disabled: {
+        type: Boolean,
+        required: true,
+        default: false,
+      },
+      // Only given when not used in current class context
+      targetClassId: {
+        type: String,
+        required: false,
+        default: null,
+      },
+    },
+    $trs: {
+      selectedIndividualLearnersLabel: {
+        message: 'Select individual learners',
+        context:
+          'A bolded header for the table where a Coach will select individual learners who will have access to a quiz.',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  fieldset {
+    padding: 0;
+    margin: 24px 0;
+    border: 0;
+  }
+
+  .table-title {
+    margin: 16px 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .table-header {
+    padding: 24px 0;
+  }
+
+  .table-checkbox-header {
+    padding: 8px;
+  }
+
+  .hidden-learners-tooltip {
+    padding: 0 8px;
+  }
+
+  .table-description {
+    margin-bottom: 8px;
+    font-size: 16px;
+  }
+
+  .table-data {
+    padding-top: 6px;
+    vertical-align: middle;
+  }
+
+  .filter-input {
+    margin-top: 16px;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
new file mode 100644
index 00000000000..8d439571b53
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -0,0 +1,139 @@
+<template>
+
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    closeButtonIconType="close"
+    @closePanel="$emit('close')"
+  >
+    <template #header>
+      <h1>
+        {{ $tr('selectGroupsAndIndividualLearnersTitle') }}
+      </h1>
+    </template>
+    <div style="padding-top: 30px">
+      <!-- TODO: remove this div once SidePanelModal is fixed-->
+      <section>
+        <h2>{{ coachString('groupsLabel') }}</h2>
+        <KCheckbox
+          v-for="group in groups"
+          :key="group.id"
+          :checked="groupIsSelected(group)"
+          :disabled="disabled"
+          @change="toggleGroup($event, group)"
+        >
+          <KLabeledIcon
+            :label="group.name"
+            icon="group"
+          />
+        </KCheckbox>
+        <KCheckbox
+          :label="$tr('allUngroupedLearnres')"
+          :checked="allUngroupedLearnresIsSelected"
+          :disabled="disabled"
+          @change="selectAllUngroupedLearners($event)"
+        />
+      </section>
+      <section>
+        <h2>{{ coachString('individualLearnersLabel') }}</h2>
+        <div>
+          {{ coachString('onlyShowingEnrolledLabel') }}
+        </div>
+        <IndividualLearnerSelectorTable
+          :selectedGroupIds="selectedGroupIds"
+          :selectedLearnerIds="adHocLearners"
+          :disabled="disabled"
+          :targetClassId="classId"
+          @update:selectedLearnerIds="updateAdHocLearners"
+        />
+      </section>
+    </div>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import { mapGetters } from 'vuex';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import { coachStringsMixin } from '../../../common/commonCoachStrings';
+  import IndividualLearnerSelectorTable from '../IndividualLearnerSelector/IndividualLearnerSelectorTable';
+
+  export default {
+    name: 'LearnersSelectorSidePanel',
+    components: {
+      SidePanelModal,
+      IndividualLearnerSelectorTable,
+    },
+    mixins: [coachStringsMixin],
+    props: {
+      groups: {
+        type: Array,
+        required: true,
+      },
+      adHocLearners: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      selectedGroupIds: {
+        type: Array,
+        required: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      classId: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapGetters('classSummary', ['learners']),
+      ungroupedLearnersIds() {
+        return this.learners.filter(learner => !learner.group_id).map(learner => learner.id);
+      },
+      allUngroupedLearnresIsSelected() {
+        return this.adHocLearners.length === this.ungroupedLearnersIds.length;
+      },
+    },
+    methods: {
+      groupIsSelected({ id }) {
+        return this.selectedGroupIds.includes(id);
+      },
+      toggleGroup(isChecked, { id }) {
+        if (isChecked) {
+          this.$emit('update:selectedGroupIds', [...this.selectedGroupIds, id]);
+        } else {
+          this.$emit(
+            'update:selectedGroupIds',
+            this.selectedGroupIds.filter(groupId => groupId !== id),
+          );
+        }
+      },
+      updateAdHocLearners(learnerIds) {
+        this.$emit('update:adHocLearners', learnerIds);
+      },
+      selectAllUngroupedLearners(isChecked) {
+        if (isChecked) {
+          this.updateAdHocLearners(this.ungroupedLearnersIds);
+        } else {
+          this.updateAdHocLearners([]);
+        }
+      },
+    },
+    $trs: {
+      allUngroupedLearnres: {
+        message: 'All Ungrouped Learners',
+        context: 'Option to select all learners that are not in a group',
+      },
+      selectGroupsAndIndividualLearnersTitle: {
+        message: 'Select groups and individual learners',
+        context: 'Title for the side panel to select groups and individual learners',
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
new file mode 100644
index 00000000000..9bea0c50c11
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
@@ -0,0 +1,142 @@
+<template>
+
+  <div>
+    <!-- Entire class -->
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="selectedRecipients"
+        :buttonValue="Recipients.ENTIRE_CLASS"
+        :disabled="disabled"
+      >
+        <KLabeledIcon
+          :label="coachString('entireClassLabel')"
+          icon="classes"
+        />
+      </KRadioButton>
+      <KRadioButton
+        v-model="selectedRecipients"
+        :buttonValue="Recipients.GROUP_OR_INDIVIDUAL"
+        :disabled="disabled"
+      >
+        <div class="flex-center">
+          <KLabeledIcon
+            :label="coachString('groupsAndLearnersLabel')"
+            icon="people"
+            style="width: auto"
+          />
+          <KButton
+            v-if="selectedRecipients === Recipients.GROUP_OR_INDIVIDUAL"
+            appearance="basic-link"
+            :text="coreString('selectAction')"
+            @click="isLearnersSelectorOpen = true"
+          />
+        </div>
+      </KRadioButton>
+    </KRadioButtonGroup>
+
+    <LearnersSelectorSidePanel
+      v-if="isLearnersSelectorOpen"
+      :groups="groups"
+      :adHocLearners="adHocLearners"
+      :selectedGroupIds.sync="selectedGroupIds"
+      :disabled="disabled"
+      :classId="classId"
+      @close="isLearnersSelectorOpen = false"
+      @update:adHocLearners="updateAdHocLearners"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import every from 'lodash/every';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { coachStringsMixin } from '../../../common/commonCoachStrings';
+  import LearnersSelectorSidePanel from './LearnersSelectorSidePanel';
+
+  const Recipients = {
+    ENTIRE_CLASS: 'entire_class',
+    GROUP_OR_INDIVIDUAL: 'group_or_individual',
+  };
+
+  export default {
+    name: 'SidePanelRecipientsSelector',
+    components: { LearnersSelectorSidePanel },
+    mixins: [coachStringsMixin, commonCoreStrings],
+    props: {
+      // Needs to equal [classId] if entire class is selected
+      // Otherwise, [groupId_1, groupId_2] for individual Learner Groups
+      selectedCollectionIds: {
+        type: Array,
+        required: true,
+      },
+      // Array of objects, each with (group) 'id' and 'name'
+      groups: {
+        type: Array,
+        required: true,
+        validator(value) {
+          return every(value, val => val.name && val.id);
+        },
+      },
+      // For the 'Entire Class' option
+      classId: {
+        type: String,
+        required: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      adHocLearners: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        Recipients,
+        selectedRecipients: null,
+        // Determines whether the group's checkbox is checked and affects which
+        // learners are selectable in IndividualLearnerSelector
+        selectedGroupIds: this.selectedCollectionIds.filter(id => id !== this.classId),
+        isLearnersSelectorOpen: false,
+      };
+    },
+    watch: {
+      selectedRecipients(newVal) {
+        if (newVal === Recipients.ENTIRE_CLASS) {
+          this.selectedGroupIds = [this.classId];
+          this.updateAdHocLearners([]);
+        } else {
+          this.selectedGroupIds = this.selectedCollectionIds.filter(id => id !== this.classId);
+        }
+      },
+      selectedGroupIds(newVal) {
+        this.$emit('update:selectedCollectionIds', newVal);
+      },
+    },
+    mounted() {
+      this.selectedRecipients = Recipients.ENTIRE_CLASS;
+    },
+    methods: {
+      updateAdHocLearners(newVal) {
+        this.$emit('update:adHocLearners', newVal);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .flex-center {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
index 2c602fff59e..978c5191eb9 100644
--- a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
+++ b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
@@ -200,6 +200,16 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       'A group is a collection of learners created by a coach inside a class to help with differentiated learning. Quizzes and lessons can be assigned to individual groups as well as to the whole class.',
   },
+  individualLearnersLabel: {
+    message: 'Individual learners',
+    context:
+      'A label for a checkbox that allows the Coach to assign the quiz to individual learners who may not be in a selected group.',
+  },
+  onlyShowingEnrolledLabel: {
+    message: 'Only showing learners that are enrolled in this class',
+    context:
+      "Shows beneath 'Select individual learners' explaining that the table only includes enrolled learners.",
+  },
   helpNeededLabel: {
     message: 'Help needed',
     context:
@@ -635,6 +645,11 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       "In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
   },
+  groupsAndLearnersLabel: {
+    message: 'Groups and individual learners',
+    context:
+      'Label for the radio button that allows the coach to select groups or individual learners to assign a quiz to.',
+  },
 });
 
 // Strings for the Missing Content modals, tooltips, alerts, etc.
diff --git a/packages/kolibri/uiText/commonCoreStrings.js b/packages/kolibri/uiText/commonCoreStrings.js
index d0d00c25e82..2b4e355a0c8 100644
--- a/packages/kolibri/uiText/commonCoreStrings.js
+++ b/packages/kolibri/uiText/commonCoreStrings.js
@@ -1550,6 +1550,10 @@ export const coreStrings = createTranslator('CommonCoreStrings', {
     message: 'Your library',
     context: '',
   },
+  selectAction: {
+    message: 'Select',
+    context: '',
+  },
 });
 
 /**

From 97530d8003b7c0c11e2b21706010e8fba0de272b Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 17 Dec 2024 09:28:15 -0500
Subject: [PATCH 02/14] Manage save button, show recipients list

---
 .../src/views/common/TruncatedItemList.vue    | 32 ++------
 .../LearnersSelectorSidePanel.vue             | 75 +++++++++++++++----
 .../SidePanelRecipientsSelector/index.vue     | 71 +++++++++++++++---
 .../src/views/common/commonCoachStrings.js    | 44 ++++++++++-
 packages/kolibri/uiText/commonCoreStrings.js  |  4 -
 5 files changed, 171 insertions(+), 55 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue b/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue
index ed4430ca9e4..f27604aa0ae 100644
--- a/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue
@@ -5,17 +5,8 @@
     v-else
     class="items-label"
   >
-    <span v-if="items.length === 1">
-      {{ items[0] }}
-    </span>
-    <span v-else-if="items.length === 2">
-      {{ $tr('twoItems', { item1: items[0], item2: items[1] }) }}
-    </span>
-    <span v-else-if="items.length === 3">
-      {{ $tr('threeItems', { item1: items[0], item2: items[1], item3: items[2] }) }}
-    </span>
-    <span v-else>
-      {{ $tr('manyItems', { item1: items[0], item2: items[1], count: items.length - 2 }) }}
+    <span>
+      {{ getTruncatedItemsString(items) }}
     </span>
   </div>
 
@@ -24,6 +15,8 @@
 
 <script>
 
+  import { getTruncatedItemsString } from './commonCoachStrings';
+
   export default {
     name: 'TruncatedItemList',
     props: {
@@ -32,21 +25,8 @@
         required: true,
       },
     },
-    $trs: {
-      twoItems: {
-        message: '{item1}, {item2}',
-        context:
-          "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
-      threeItems: {
-        message: '{item1}, {item2}, {item3}',
-        context:
-          "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
-      manyItems: {
-        message: '{item1}, {item2}, and {count, number, integer} others',
-        context: "'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
+    methods: {
+      getTruncatedItemsString,
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
index 8d439571b53..7e9c843f337 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -40,14 +40,23 @@
           {{ coachString('onlyShowingEnrolledLabel') }}
         </div>
         <IndividualLearnerSelectorTable
-          :selectedGroupIds="selectedGroupIds"
-          :selectedLearnerIds="adHocLearners"
+          :selectedGroupIds="workingSelectedGroupIds"
+          :selectedLearnerIds.sync="workingAdHocLearners"
           :disabled="disabled"
           :targetClassId="classId"
           @update:selectedLearnerIds="updateAdHocLearners"
         />
       </section>
     </div>
+    <template #bottomNavigation>
+      <div class="bottom-nav-container">
+        <KButton
+          primary
+          :text="coreString('saveAction')"
+          @click="save"
+        />
+      </div>
+    </template>
   </SidePanelModal>
 
 </template>
@@ -55,8 +64,10 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
+  import uniq from 'lodash/uniq';
+  import { mapGetters, mapState } from 'vuex';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { coachStringsMixin } from '../../../common/commonCoachStrings';
   import IndividualLearnerSelectorTable from '../IndividualLearnerSelector/IndividualLearnerSelectorTable';
 
@@ -66,7 +77,7 @@
       SidePanelModal,
       IndividualLearnerSelectorTable,
     },
-    mixins: [coachStringsMixin],
+    mixins: [coachStringsMixin, commonCoreStrings],
     props: {
       groups: {
         type: Array,
@@ -90,39 +101,63 @@
         required: true,
       },
     },
+    data() {
+      return {
+        workingAdHocLearners: this.adHocLearners,
+        workingSelectedGroupIds: this.selectedGroupIds,
+      };
+    },
     computed: {
       ...mapGetters('classSummary', ['learners']),
+      ...mapState('classSummary', ['groupMap']),
       ungroupedLearnersIds() {
-        return this.learners.filter(learner => !learner.group_id).map(learner => learner.id);
+        return this.learners
+          .filter(learner => {
+            return Object.values(this.groupMap).every(
+              group => !group.member_ids.includes(learner.id),
+            );
+          })
+          .map(learner => learner.id);
       },
       allUngroupedLearnresIsSelected() {
-        return this.adHocLearners.length === this.ungroupedLearnersIds.length;
+        return this.ungroupedLearnersIds.every(learnerId =>
+          this.workingAdHocLearners.includes(learnerId),
+        );
       },
     },
     methods: {
       groupIsSelected({ id }) {
-        return this.selectedGroupIds.includes(id);
+        return this.workingSelectedGroupIds.includes(id);
       },
       toggleGroup(isChecked, { id }) {
         if (isChecked) {
-          this.$emit('update:selectedGroupIds', [...this.selectedGroupIds, id]);
+          this.workingSelectedGroupIds = [...this.workingSelectedGroupIds, id];
         } else {
-          this.$emit(
-            'update:selectedGroupIds',
-            this.selectedGroupIds.filter(groupId => groupId !== id),
+          this.workingSelectedGroupIds = this.workingSelectedGroupIds.filter(
+            groupId => groupId !== id,
           );
         }
       },
       updateAdHocLearners(learnerIds) {
-        this.$emit('update:adHocLearners', learnerIds);
+        this.workingAdHocLearners = learnerIds;
       },
       selectAllUngroupedLearners(isChecked) {
         if (isChecked) {
-          this.updateAdHocLearners(this.ungroupedLearnersIds);
+          this.workingAdHocLearners = uniq([
+            ...this.workingAdHocLearners,
+            ...this.ungroupedLearnersIds,
+          ]);
         } else {
-          this.updateAdHocLearners([]);
+          this.workingAdHocLearners = this.workingAdHocLearners.filter(
+            learnerId => !this.ungroupedLearnersIds.includes(learnerId),
+          );
         }
       },
+      save() {
+        this.$emit('update:adHocLearners', this.workingAdHocLearners);
+        this.$emit('update:selectedGroupIds', this.workingSelectedGroupIds);
+        this.$emit('close');
+      },
     },
     $trs: {
       allUngroupedLearnres: {
@@ -137,3 +172,15 @@
   };
 
 </script>
+
+
+<style lang="scss" scoped>
+
+  .bottom-nav-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
index 9bea0c50c11..6cc63da5c38 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
@@ -5,7 +5,7 @@
     <KRadioButtonGroup>
       <KRadioButton
         v-model="selectedRecipients"
-        :buttonValue="Recipients.ENTIRE_CLASS"
+        :buttonValue="ClassRecipients.ENTIRE_CLASS"
         :disabled="disabled"
       >
         <KLabeledIcon
@@ -15,19 +15,29 @@
       </KRadioButton>
       <KRadioButton
         v-model="selectedRecipients"
-        :buttonValue="Recipients.GROUP_OR_INDIVIDUAL"
+        :buttonValue="ClassRecipients.GROUP_OR_INDIVIDUAL"
         :disabled="disabled"
       >
-        <div class="flex-center">
+        <div
+          :style="{
+            display: 'flex',
+            columnGap: '8px',
+            flexDirection: hasGroupOrIndividualRecipients ? 'column' : 'row',
+            alignItems: hasGroupOrIndividualRecipients ? 'flex-start' : 'center',
+          }"
+        >
           <KLabeledIcon
             :label="coachString('groupsAndLearnersLabel')"
             icon="people"
             style="width: auto"
           />
+          <span v-if="hasGroupOrIndividualRecipients">
+            {{ selectedMessage }}
+          </span>
           <KButton
-            v-if="selectedRecipients === Recipients.GROUP_OR_INDIVIDUAL"
+            v-if="selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL"
             appearance="basic-link"
-            :text="coreString('selectAction')"
+            :text="hasGroupOrIndividualRecipients ? $tr('changeAction') : $tr('selectAction')"
             @click="isLearnersSelectorOpen = true"
           />
         </div>
@@ -51,12 +61,13 @@
 
 <script>
 
+  import { mapGetters } from 'vuex';
   import every from 'lodash/every';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import { coachStringsMixin } from '../../../common/commonCoachStrings';
+  import { coachStringsMixin, getTruncatedItemsString } from '../../../common/commonCoachStrings';
   import LearnersSelectorSidePanel from './LearnersSelectorSidePanel';
 
-  const Recipients = {
+  const ClassRecipients = {
     ENTIRE_CLASS: 'entire_class',
     GROUP_OR_INDIVIDUAL: 'group_or_individual',
   };
@@ -97,7 +108,7 @@
     },
     data() {
       return {
-        Recipients,
+        ClassRecipients,
         selectedRecipients: null,
         // Determines whether the group's checkbox is checked and affects which
         // learners are selectable in IndividualLearnerSelector
@@ -105,9 +116,35 @@
         isLearnersSelectorOpen: false,
       };
     },
+    computed: {
+      ...mapGetters('classSummary', ['getRecipientNamesForExam']),
+      hasGroupOrIndividualRecipients() {
+        return (
+          this.selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL &&
+          (this.selectedGroupIds.length > 0 || this.adHocLearners.length > 0)
+        );
+      },
+      hasRecipients() {
+        if (this.selectedRecipients === ClassRecipients.ENTIRE_CLASS) {
+          return true;
+        }
+        return this.hasGroupOrIndividualRecipients;
+      },
+      selectedMessage() {
+        if (!this.hasGroupOrIndividualRecipients) {
+          return '';
+        }
+        const recipientsNames = this.getRecipientNamesForExam({
+          learner_ids: this.adHocLearners,
+          assignments: this.selectedGroupIds,
+        });
+        const truncatedItemsString = getTruncatedItemsString(recipientsNames);
+        return this.$tr('selectedLabel', { selected: truncatedItemsString });
+      },
+    },
     watch: {
       selectedRecipients(newVal) {
-        if (newVal === Recipients.ENTIRE_CLASS) {
+        if (newVal === ClassRecipients.ENTIRE_CLASS) {
           this.selectedGroupIds = [this.classId];
           this.updateAdHocLearners([]);
         } else {
@@ -119,13 +156,27 @@
       },
     },
     mounted() {
-      this.selectedRecipients = Recipients.ENTIRE_CLASS;
+      this.selectedRecipients = ClassRecipients.ENTIRE_CLASS;
     },
     methods: {
       updateAdHocLearners(newVal) {
         this.$emit('update:adHocLearners', newVal);
       },
     },
+    $trs: {
+      selectedLabel: {
+        message: 'Selected: {selected}',
+        context: 'Label to show selected items',
+      },
+      selectAction: {
+        message: 'Select',
+        context: 'Button to select groups and learners',
+      },
+      changeAction: {
+        message: 'Change',
+        context: 'Button to change selected groups and learners',
+      },
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
index 978c5191eb9..06fa823fab9 100644
--- a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
+++ b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
@@ -671,6 +671,24 @@ const MissingContentStrings = createTranslator('MissingContentStrings', {
   },
 });
 
+// Strings for showing lists of items that can be truncated
+const truncatedItemsStrings = createTranslator('TruncatedItemsStrings', {
+  twoItems: {
+    message: '{item1}, {item2}',
+    context:
+      "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
+  },
+  threeItems: {
+    message: '{item1}, {item2}, {item3}',
+    context:
+      "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
+  },
+  manyItems: {
+    message: '{item1}, {item2}, and {count, number, integer} others',
+    context: "'item' will be replaced by the name of the coach(es) in the list of classes.",
+  },
+});
+
 function coachString(key, args) {
   return coachStrings.$tr(key, args);
 }
@@ -684,4 +702,28 @@ const coachStringsMixin = {
   },
 };
 
-export { coachString, coachStrings, coachStringsMixin };
+function getTruncatedItemsString(items) {
+  if (items.length <= 1) {
+    return items[0] || '';
+  }
+  if (items.length === 2) {
+    return truncatedItemsStrings.$tr('twoItems', {
+      item1: items[0],
+      item2: items[1],
+    });
+  }
+  if (items.length === 3) {
+    return truncatedItemsStrings.$tr('threeItems', {
+      item1: items[0],
+      item2: items[1],
+      item3: items[2],
+    });
+  }
+  return truncatedItemsStrings.$tr('manyItems', {
+    item1: items[0],
+    item2: items[1],
+    count: items.length - 2,
+  });
+}
+
+export { coachString, coachStrings, coachStringsMixin, getTruncatedItemsString };
diff --git a/packages/kolibri/uiText/commonCoreStrings.js b/packages/kolibri/uiText/commonCoreStrings.js
index 2b4e355a0c8..d0d00c25e82 100644
--- a/packages/kolibri/uiText/commonCoreStrings.js
+++ b/packages/kolibri/uiText/commonCoreStrings.js
@@ -1550,10 +1550,6 @@ export const coreStrings = createTranslator('CommonCoreStrings', {
     message: 'Your library',
     context: '',
   },
-  selectAction: {
-    message: 'Select',
-    context: '',
-  },
 });
 
 /**

From 603351d28f307c35a96d90de8b0362b6328f33d6 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 17 Dec 2024 10:34:24 -0500
Subject: [PATCH 03/14] Manage errors and alerts

---
 .../assignments/AssignmentDetailsModal.vue    | 40 ++++++--
 .../LearnersSelectorSidePanel.vue             |  6 ++
 .../SidePanelRecipientsSelector/index.vue     | 99 ++++++++++++++-----
 .../views/quizzes/CreateExamPage/index.vue    |  5 +
 4 files changed, 120 insertions(+), 30 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
index 952e9745664..16488ccb993 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
@@ -82,22 +82,25 @@
         <legend>
           {{ recipientsLabel$() }}
         </legend>
-        <RecipientSelector
-          v-if="false"
+
+        <SidePanelRecipientsSelector
+          v-if="selectRecipientsWithSidePanel"
+          ref="recipientsSelector"
           v-model="selectedCollectionIds"
           :groups="groups"
           :classId="classId"
           :disabled="disabled || formIsSubmitted"
-          :initialAdHocLearners="adHocLearners"
-          @updateLearners="learners => (adHocLearners = learners)"
+          :adHocLearners.sync="adHocLearners"
+          :selectedCollectionIds.sync="selectedCollectionIds"
         />
-        <SidePanelRecipientsSelector
+        <RecipientSelector
+          v-else
           v-model="selectedCollectionIds"
           :groups="groups"
           :classId="classId"
           :disabled="disabled || formIsSubmitted"
-          :adHocLearners.sync="adHocLearners"
-          :selectedCollectionIds.sync="selectedCollectionIds"
+          :initialAdHocLearners="adHocLearners"
+          @updateLearners="learners => (adHocLearners = learners)"
         />
       </fieldset>
     </form>
@@ -198,6 +201,10 @@
         type: Boolean,
         default: false,
       },
+      selectRecipientsWithSidePanel: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -342,6 +349,25 @@
         this.showTitleError = false;
         this.showServerError = false;
       },
+      /**
+       * @public
+       */
+      validate() {
+        let error = '';
+        // Validate title
+        if (this.title === '') {
+          this.handleSubmitTitleFailure();
+          error = this.coreString('requiredFieldError');
+        }
+
+        // Validate recipients
+        const recipientsError = this.$refs.recipientsSelector?.validate();
+        if (!error && recipientsError) {
+          error = recipientsError;
+          this.$refs.recipientsSelector?.handleSubmitRecipientsFailure();
+        }
+        return error;
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
index 7e9c843f337..ae375aa5c03 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -5,6 +5,7 @@
     sidePanelWidth="700px"
     closeButtonIconType="close"
     @closePanel="$emit('close')"
+    @shouldFocusFirstEl="focusFirstEl"
   >
     <template #header>
       <h1>
@@ -126,6 +127,11 @@
       },
     },
     methods: {
+      focusFirstEl() {
+        this.$nextTick(() => {
+          this.$el.querySelector('input').focus();
+        });
+      },
       groupIsSelected({ id }) {
         return this.workingSelectedGroupIds.includes(id);
       },
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
index 6cc63da5c38..0ef61e34789 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
@@ -14,32 +14,43 @@
         />
       </KRadioButton>
       <KRadioButton
+        ref="groupOrIndividualRadioButton"
         v-model="selectedRecipients"
         :buttonValue="ClassRecipients.GROUP_OR_INDIVIDUAL"
         :disabled="disabled"
       >
-        <div
-          :style="{
-            display: 'flex',
-            columnGap: '8px',
-            flexDirection: hasGroupOrIndividualRecipients ? 'column' : 'row',
-            alignItems: hasGroupOrIndividualRecipients ? 'flex-start' : 'center',
-          }"
-        >
-          <KLabeledIcon
-            :label="coachString('groupsAndLearnersLabel')"
-            icon="people"
-            style="width: auto"
-          />
-          <span v-if="hasGroupOrIndividualRecipients">
-            {{ selectedMessage }}
-          </span>
-          <KButton
-            v-if="selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL"
-            appearance="basic-link"
-            :text="hasGroupOrIndividualRecipients ? $tr('changeAction') : $tr('selectAction')"
-            @click="isLearnersSelectorOpen = true"
-          />
+        <div>
+          <div
+            :style="{
+              display: 'flex',
+              columnGap: '8px',
+              flexDirection: hasGroupOrIndividualRecipients ? 'column' : 'row',
+              alignItems: hasGroupOrIndividualRecipients ? 'flex-start' : 'center',
+            }"
+          >
+            <KLabeledIcon
+              :label="coachString('groupsAndLearnersLabel')"
+              icon="people"
+              style="width: auto"
+            />
+            <span v-if="hasGroupOrIndividualRecipients">
+              {{ selectedMessage }}
+            </span>
+            <KButton
+              v-if="selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL"
+              appearance="basic-link"
+              :text="hasGroupOrIndividualRecipients ? $tr('changeAction') : $tr('selectAction')"
+              @click="isLearnersSelectorOpen = true"
+            />
+          </div>
+          <div
+            v-if="assignmentInvalidText"
+            :style="{
+              color: $themeTokens.error,
+            }"
+          >
+            {{ assignmentInvalidText }}
+          </div>
         </div>
       </KRadioButton>
     </KRadioButtonGroup>
@@ -51,7 +62,7 @@
       :selectedGroupIds.sync="selectedGroupIds"
       :disabled="disabled"
       :classId="classId"
-      @close="isLearnersSelectorOpen = false"
+      @close="closeSidePanel"
       @update:adHocLearners="updateAdHocLearners"
     />
   </div>
@@ -64,6 +75,7 @@
   import { mapGetters } from 'vuex';
   import every from 'lodash/every';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
   import { coachStringsMixin, getTruncatedItemsString } from '../../../common/commonCoachStrings';
   import LearnersSelectorSidePanel from './LearnersSelectorSidePanel';
 
@@ -76,6 +88,10 @@
     name: 'SidePanelRecipientsSelector',
     components: { LearnersSelectorSidePanel },
     mixins: [coachStringsMixin, commonCoreStrings],
+    setup() {
+      const { sendAssertiveMessage } = useKLiveRegion();
+      return { sendAssertiveMessage };
+    },
     props: {
       // Needs to equal [classId] if entire class is selected
       // Otherwise, [groupId_1, groupId_2] for individual Learner Groups
@@ -114,6 +130,7 @@
         // learners are selectable in IndividualLearnerSelector
         selectedGroupIds: this.selectedCollectionIds.filter(id => id !== this.classId),
         isLearnersSelectorOpen: false,
+        assignmentInvalidText: '',
       };
     },
     computed: {
@@ -162,6 +179,38 @@
       updateAdHocLearners(newVal) {
         this.$emit('update:adHocLearners', newVal);
       },
+      async closeSidePanel() {
+        this.isLearnersSelectorOpen = false;
+        await this.$nextTick();
+        if (this.assignmentInvalidText) {
+          this.validate();
+        }
+      },
+      /**
+       * Validates the selected recipients and sets the error message if invalid
+       * @public
+       */
+      validate() {
+        if (!this.hasRecipients) {
+          this.assignmentInvalidText = this.$tr('noRecipientsSelected');
+        } else {
+          this.assignmentInvalidText = '';
+        }
+        return this.assignmentInvalidText;
+      },
+      /**
+       * @public
+       */
+      async handleSubmitRecipientsFailure() {
+        await this.$nextTick();
+        if (!this.assignmentInvalidText) {
+          return;
+        }
+        this.sendAssertiveMessage(this.assignmentInvalidText);
+        this.$refs.groupOrIndividualRadioButton.focus();
+        // Scroll to the radio button in case focus() didn't do that immediately
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      },
     },
     $trs: {
       selectedLabel: {
@@ -176,6 +225,10 @@
         message: 'Change',
         context: 'Button to change selected groups and learners',
       },
+      noRecipientsSelected: {
+        message: 'Please select at least one group or learner',
+        context: 'Error message when no recipients are selected',
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
index c60b7065895..b160e7eac08 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
@@ -19,6 +19,7 @@
         v-if="quizInitialized"
         ref="detailsModal"
         assignmentType="quiz"
+        :selectRecipientsWithSidePanel="true"
         :assignment="quiz"
         :classId="classId"
         :groups="groups"
@@ -334,6 +335,10 @@
         }
       },
       saveQuizAndRedirect(close = true) {
+        const errorText = this.$refs.detailsModal.validate();
+        if (errorText) {
+          return;
+        }
         this.saveQuiz()
           .then(exam => {
             this.$refs.detailsModal.handleSubmitSuccess();

From 425c5035d8306ed51049ab7137239229b73a99a9 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 17 Dec 2024 10:42:28 -0500
Subject: [PATCH 04/14] Manage edit quizzes and show server error when
 validation is invalid

---
 .../src/views/common/assignments/AssignmentDetailsModal.vue | 5 +++++
 .../assignments/SidePanelRecipientsSelector/index.vue       | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
index 16488ccb993..061fa4d66ed 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
@@ -366,6 +366,11 @@
           error = recipientsError;
           this.$refs.recipientsSelector?.handleSubmitRecipientsFailure();
         }
+
+        if (error) {
+          this.showServerError = true;
+        }
+
         return error;
       },
     },
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
index 0ef61e34789..5494bb73766 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
@@ -173,7 +173,11 @@
       },
     },
     mounted() {
-      this.selectedRecipients = ClassRecipients.ENTIRE_CLASS;
+      if (this.selectedCollectionIds.includes(this.classId)) {
+        this.selectedRecipients = ClassRecipients.ENTIRE_CLASS;
+      } else {
+        this.selectedRecipients = ClassRecipients.GROUP_OR_INDIVIDUAL;
+      }
     },
     methods: {
       updateAdHocLearners(newVal) {

From ec7f7477f8c13cb19b68c702b4d9409246b45530 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 17 Dec 2024 10:48:07 -0500
Subject: [PATCH 05/14] Validate exam ended to show edit quiz

---
 .../QuizOptionsDropdownMenu.vue               | 24 +++++++++++--------
 .../views/quizzes/QuizSummaryPage/index.vue   |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue
index fb40a75fc74..68ef7bd45d0 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue
@@ -26,26 +26,30 @@
     name: 'QuizOptionsDropdownMenu',
     mixins: [coachStringsMixin, commonCoreStrings],
     props: {
-      draft: {
-        type: Boolean,
-        default: false,
+      exam: {
+        type: Object,
+        required: false,
+        default: null,
       },
     },
     computed: {
       options() {
-        return [
-          {
-            label: this.draft
-              ? this.coreString('editAction')
-              : this.coreString('editDetailsAction'),
-            value: 'EDIT_DETAILS',
-          },
+        const options = [
           {
             label: this.$tr('copyQuizAction'),
             value: 'COPY',
           },
           { label: this.coreString('deleteAction'), value: 'DELETE' },
         ];
+        if (!this.exam?.archive) {
+          options.unshift({
+            label: this.exam?.draft
+              ? this.coreString('editAction')
+              : this.coreString('editDetailsAction'),
+            value: 'EDIT_DETAILS',
+          });
+        }
+        return options;
       },
     },
     $trs: {
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue
index c2f9348159c..7857db317cb 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue
@@ -23,7 +23,7 @@
               style="margin-right: 8px"
             />
             <QuizOptionsDropdownMenu
-              :draft="exam && exam.draft"
+              :exam="exam"
               @select="setCurrentAction"
             />
           </template>

From c6f7453d005a4b8770384e8fb9fe5ebf81f63a7e Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 17 Dec 2024 10:54:05 -0500
Subject: [PATCH 06/14] Fix linting

---
 .../assignments/IndividualLearnerSelector/index.vue       | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
index 5c05e2d36df..48022482ae3 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
@@ -39,7 +39,6 @@
 <script>
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import commonCoachStrings from '../../../common';
   import IndividualLearnerSelectorTable from './IndividualLearnerSelectorTable';
 
@@ -47,13 +46,6 @@
     name: 'IndividualLearnerSelector',
     components: { IndividualLearnerSelectorTable },
     mixins: [commonCoreStrings, commonCoachStrings],
-    setup() {
-      const { noLearnersEnrolled$ } = enhancedQuizManagementStrings;
-
-      return {
-        noLearnersEnrolled$,
-      };
-    },
     props: {
       // If true, the main checkbox is checked and the list of learners is shown
       isVisible: {

From 0e986888218a10c9b0bdd28b15f9b8f9267a623b Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 19 Dec 2024 01:05:13 -0500
Subject: [PATCH 07/14] Match styles to specs

---
 .../IndividualLearnerSelectorTable.vue        |  5 ++++
 .../LearnersSelectorSidePanel.vue             | 30 ++++++++++++++++---
 .../components/PaginatedListContainer.vue     |  9 ++++--
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
index 1090fde8aaf..7267560c4c5 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
@@ -4,6 +4,7 @@
     :items="allLearners"
     :filterPlaceholder="$tr('searchPlaceholder')"
     :itemsPerPage="itemsPerPage"
+    :searchFieldBlock="searchFieldBlock"
     @pageChanged="currentPageLearners = $event.items"
   >
     <template #default="{ items }">
@@ -112,6 +113,10 @@
         required: false,
         default: null,
       },
+      searchFieldBlock: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
index ae375aa5c03..f2338a1a01c 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -8,7 +8,7 @@
     @shouldFocusFirstEl="focusFirstEl"
   >
     <template #header>
-      <h1>
+      <h1 class="side-panel-title">
         {{ $tr('selectGroupsAndIndividualLearnersTitle') }}
       </h1>
     </template>
@@ -26,21 +26,28 @@
           <KLabeledIcon
             :label="group.name"
             icon="group"
+            class="font-size-14"
           />
         </KCheckbox>
         <KCheckbox
-          :label="$tr('allUngroupedLearnres')"
           :checked="allUngroupedLearnresIsSelected"
           :disabled="disabled"
           @change="selectAllUngroupedLearners($event)"
-        />
+        >
+          <KLabeledIcon
+            :label="$tr('allUngroupedLearnres')"
+            icon="people"
+            class="font-size-14"
+          />
+        </KCheckbox>
       </section>
       <section>
         <h2>{{ coachString('individualLearnersLabel') }}</h2>
-        <div>
+        <div class="font-size-14">
           {{ coachString('onlyShowingEnrolledLabel') }}
         </div>
         <IndividualLearnerSelectorTable
+          searchFieldBlock
           :selectedGroupIds="workingSelectedGroupIds"
           :selectedLearnerIds.sync="workingAdHocLearners"
           :disabled="disabled"
@@ -189,4 +196,19 @@
     margin-bottom: 16px;
   }
 
+  .side-panel-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  section h2 {
+    margin-top: 24px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .font-size-14 {
+    font-size: 14px;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/PaginatedListContainer.vue b/packages/kolibri-common/components/PaginatedListContainer.vue
index 5facd29b654..58ab38d5a5f 100644
--- a/packages/kolibri-common/components/PaginatedListContainer.vue
+++ b/packages/kolibri-common/components/PaginatedListContainer.vue
@@ -2,16 +2,17 @@
 
   <div>
     <KGrid>
-      <KGridItem :layout12="{ span: 7 }">
+      <KGridItem :layout12="{ span: searchFieldBlock ? 12 : 7 }">
         <slot name="otherFilter"></slot>
       </KGridItem>
       <KGridItem
-        :layout12="{ span: 5, alignment: 'right' }"
+        :layout12="{ span: searchFieldBlock ? 12 : 5, alignment: 'right' }"
         class="text-filter"
       >
         <FilterTextbox
           v-model="filterInput"
           :placeholder="filterPlaceholder"
+          :style="{ width: searchFieldBlock ? '100%' : null }"
         />
       </KGridItem>
     </KGrid>
@@ -75,6 +76,10 @@
         required: false,
         default: 30,
       },
+      searchFieldBlock: {
+        type: Boolean,
+        required: false,
+      },
     },
     data() {
       return {

From ef6d377d6f3fb3a65a71bdc563e0a1e8ae6a0ffa Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 19 Dec 2024 15:24:33 -0500
Subject: [PATCH 08/14] Fix styles

---
 .../LearnersSelectorSidePanel.vue                  | 14 +++++++++-----
 .../components/SidePanelModal/index.vue            |  7 -------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
index f2338a1a01c..9e8670fb20a 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -12,10 +12,11 @@
         {{ $tr('selectGroupsAndIndividualLearnersTitle') }}
       </h1>
     </template>
-    <div style="padding-top: 30px">
-      <!-- TODO: remove this div once SidePanelModal is fixed-->
+    <template #default>
       <section>
-        <h2>{{ coachString('groupsLabel') }}</h2>
+        <h2 class="mt-0">
+          {{ coachString('groupsLabel') }}
+        </h2>
         <KCheckbox
           v-for="group in groups"
           :key="group.id"
@@ -55,7 +56,7 @@
           @update:selectedLearnerIds="updateAdHocLearners"
         />
       </section>
-    </div>
+    </template>
     <template #bottomNavigation>
       <div class="bottom-nav-container">
         <KButton
@@ -189,11 +190,14 @@
 
 <style lang="scss" scoped>
 
+  .mt-0 {
+    margin-top: 0;
+  }
+
   .bottom-nav-container {
     display: flex;
     justify-content: flex-end;
     width: 100%;
-    margin-bottom: 16px;
   }
 
   .side-panel-title {
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index 375714e843f..26b1029c8fe 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -88,8 +88,6 @@
         /* Will be calculated in mounted() as it will get the height of the fixedHeader then */
         // @type {RefImpl<number>}
         windowBreakpoint,
-        fixedHeaderHeight: 0,
-        fixedBottombarHeight: 0,
         lastFocus: null,
       };
     },
@@ -181,11 +179,6 @@
     mounted() {
       const htmlTag = window.document.getElementsByTagName('html')[0];
       htmlTag.style['overflow-y'] = 'hidden';
-      // Gets the height of the fixed header - adds 40 to account for padding + 24 for closeButton
-      this.fixedHeaderHeight = this.$refs.fixedHeader.clientHeight;
-      if (this.$refs.fixedBottombar) {
-        this.fixedBottombarHeight = this.$refs.fixedBottombar.clientHeight;
-      }
       this.$nextTick(() => {
         this.$emit('shouldFocusFirstEl');
       });

From 87c9a9548bb8ee41cf0dc9e7f949bcdc0ee67354 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 6 Jan 2025 11:00:14 -0500
Subject: [PATCH 09/14] Use KTable for learners selector table

---
 .../IndividualLearnerSelectorTable.vue        | 110 ++++++++++--------
 1 file changed, 64 insertions(+), 46 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
index 7267560c4c5..b970cbd2b23 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
@@ -8,54 +8,43 @@
     @pageChanged="currentPageLearners = $event.items"
   >
     <template #default="{ items }">
-      <CoreTable
-        :selectable="true"
+      <KTable
+        :rows="getTableRows(items)"
+        :headers="tableHeaders"
         :emptyMessage="emptyMessage"
+        :caption="$tr('tableCaption')"
       >
-        <template #headers>
-          <th class="table-checkbox-header">
-            <KCheckbox
-              key="selectAllOnPage"
-              :label="$tr('selectAllLabel')"
-              :checked="selectAllCheckboxProps.checked"
-              :indeterminate="selectAllCheckboxProps.indeterminate"
-              :disabled="selectAllCheckboxProps.disabled"
-              @change="selectVisiblePage"
-            />
-          </th>
-          <th class="table-header">
-            {{ coreString('usernameLabel') }}
-          </th>
-          <th class="table-header">
-            {{ coachString('groupsLabel') }}
-          </th>
+        <template #header="{ header, colIndex }">
+          <KCheckbox
+            v-if="colIndex === 0"
+            key="selectAllOnPage"
+            :label="$tr('selectAllLabel')"
+            :checked="selectAllCheckboxProps.checked"
+            :indeterminate="selectAllCheckboxProps.indeterminate"
+            :disabled="selectAllCheckboxProps.disabled"
+            @change="selectVisiblePage"
+          />
+          <span
+            v-else
+            class="table-header"
+          >{{ header.label }}</span>
         </template>
-
-        <template #tbody>
-          <tbody>
-            <tr
-              v-for="learner in items"
-              :key="learner.id"
-            >
-              <td>
-                <KCheckbox
-                  :key="`select-learner-${learner.id}`"
-                  :label="learner.name"
-                  :checked="learnerIsSelected(learner)"
-                  :disabled="learnerIsNotSelectable(learner)"
-                  @change="toggleLearner($event, learner)"
-                />
-              </td>
-              <td class="table-data">
-                {{ learner.username }}
-              </td>
-              <td class="table-data">
-                {{ groupNamesForLearner(learner) }}
-              </td>
-            </tr>
-          </tbody>
+        <template #cell="{ content, colIndex }">
+          <KCheckbox
+            v-if="colIndex === 0"
+            :label="content.name"
+            :checked="learnerIsSelected(content)"
+            :disabled="learnerIsNotSelectable(content)"
+            @change="toggleLearner($event, content)"
+          />
+          <span
+            v-else
+            class="table-data"
+          >
+            {{ content }}
+          </span>
         </template>
-      </CoreTable>
+      </KTable>
     </template>
   </PaginatedListContainer>
 
@@ -66,7 +55,6 @@
 
   import { mapState } from 'vuex';
   import { formatList } from 'kolibri/utils/i18n';
-  import CoreTable from 'kolibri/components/CoreTable';
   import PaginatedListContainer from 'kolibri-common/components/PaginatedListContainer';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
@@ -81,7 +69,7 @@
 
   export default {
     name: 'IndividualLearnerSelector',
-    components: { CoreTable, PaginatedListContainer },
+    components: { PaginatedListContainer },
     mixins: [commonCoreStrings, commonCoachStrings],
     setup() {
       const { noLearnersEnrolled$ } = enhancedQuizManagementStrings;
@@ -188,6 +176,25 @@
           ? this.$tr('noUsersMatch')
           : this.noLearnersEnrolled$({ className: this.className });
       },
+      tableHeaders() {
+        return [
+          {
+            label: this.$tr('selectAllLabel'),
+            dataType: 'undefined',
+            columnId: 'selectAll',
+          },
+          {
+            label: this.coreString('usernameLabel'),
+            dataType: 'string',
+            columnId: 'username',
+          },
+          {
+            label: this.coachString('groupsLabel'),
+            dataType: 'string',
+            columnId: 'groups',
+          },
+        ];
+      },
     },
     methods: {
       fetchOutsideClassroom() {
@@ -202,6 +209,13 @@
           this.fetchingOutside = false;
         });
       },
+      getTableRows(learners) {
+        return learners.map(learner => [
+          learner,
+          learner.username,
+          this.groupNamesForLearner(learner),
+        ]);
+      },
       // Event handlers
       toggleLearner(checked, { id }) {
         let newLearnerIds = [...this.selectedLearnerIds];
@@ -268,6 +282,10 @@
         context:
           "When searching for individual learner to add to a lesson, if no search term matches a learner's name this message is displayed.",
       },
+      tableCaption: {
+        message: 'Select individual learners',
+        context: 'Caption for the table containing the list of individual learners.',
+      },
     },
   };
 

From bfc3296bc35dc0bb5a504317352c8f7c954c3c6d Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 9 Jan 2025 16:26:11 -0500
Subject: [PATCH 10/14] Show select learners if there are learners in the class
 and revalidate form on change

---
 .../assignments/AssignmentDetailsModal.vue    | 35 +++++++++++++------
 .../SidePanelRecipientsSelector/index.vue     |  3 +-
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
index 061fa4d66ed..bcfd38f20fc 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
@@ -277,6 +277,15 @@
       iconName() {
         return this.assignmentIsQuiz ? 'quiz' : 'lesson';
       },
+      submitObject() {
+        return {
+          title: this.title,
+          description: this.description,
+          assignments: this.selectedCollectionIds,
+          active: this.activeIsSelected,
+          learner_ids: this.adHocLearners,
+        };
+      },
     },
     watch: {
       title() {
@@ -291,6 +300,13 @@
       adHocLearners() {
         this.$emit('update', { learner_ids: this.adHocLearners });
       },
+      submitObject() {
+        if (this.showServerError) {
+          this.$nextTick(() => {
+            this.validate(false);
+          });
+        }
+      },
     },
     methods: {
       submitData() {
@@ -314,13 +330,7 @@
 
         if (this.formIsValid) {
           this.formIsSubmitted = true;
-          this.$emit('submit', {
-            title: this.title,
-            description: this.description,
-            assignments: this.selectedCollectionIds,
-            active: this.activeIsSelected,
-            learner_ids: this.adHocLearners,
-          });
+          this.$emit('submit', this.submitObject);
         } else {
           this.formIsSubmitted = false;
         }
@@ -352,11 +362,14 @@
       /**
        * @public
        */
-      validate() {
+      validate(handleFailure = true) {
         let error = '';
+        this.showServerError = false;
         // Validate title
         if (this.title === '') {
-          this.handleSubmitTitleFailure();
+          if (handleFailure) {
+            this.handleSubmitTitleFailure();
+          }
           error = this.coreString('requiredFieldError');
         }
 
@@ -364,7 +377,9 @@
         const recipientsError = this.$refs.recipientsSelector?.validate();
         if (!error && recipientsError) {
           error = recipientsError;
-          this.$refs.recipientsSelector?.handleSubmitRecipientsFailure();
+          if (handleFailure) {
+            this.$refs.recipientsSelector?.handleSubmitRecipientsFailure();
+          }
         }
 
         if (error) {
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
index 5494bb73766..3f3a486bff9 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
@@ -14,6 +14,7 @@
         />
       </KRadioButton>
       <KRadioButton
+        v-if="learners.length > 0"
         ref="groupOrIndividualRadioButton"
         v-model="selectedRecipients"
         :buttonValue="ClassRecipients.GROUP_OR_INDIVIDUAL"
@@ -134,7 +135,7 @@
       };
     },
     computed: {
-      ...mapGetters('classSummary', ['getRecipientNamesForExam']),
+      ...mapGetters('classSummary', ['getRecipientNamesForExam', 'learners']),
       hasGroupOrIndividualRecipients() {
         return (
           this.selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL &&

From 288e2f5084804ef0fad3371748617028e93c106e Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 14 Jan 2025 12:49:31 -0500
Subject: [PATCH 11/14] Sort groups and learners

---
 .../IndividualLearnerSelectorTable.vue                    | 6 +++++-
 .../LearnersSelectorSidePanel.vue                         | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
index b970cbd2b23..6dd12d83634 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
@@ -1,7 +1,7 @@
 <template>
 
   <PaginatedListContainer
-    :items="allLearners"
+    :items="sortedAllLearners"
     :filterPlaceholder="$tr('searchPlaceholder')"
     :itemsPerPage="itemsPerPage"
     :searchFieldBlock="searchFieldBlock"
@@ -137,6 +137,10 @@
           return this.learners;
         }
       },
+      sortedAllLearners() {
+        const allLearners = [...this.allLearners];
+        return allLearners.sort((a, b) => a.name.localeCompare(b.name));
+      },
       currentGroupMap() {
         return this.groupMapFromOtherClass || this.groupMap;
       },
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
index 9e8670fb20a..ce00ca4cfb0 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -18,7 +18,7 @@
           {{ coachString('groupsLabel') }}
         </h2>
         <KCheckbox
-          v-for="group in groups"
+          v-for="group in sortedGroups"
           :key="group.id"
           :checked="groupIsSelected(group)"
           :disabled="disabled"
@@ -119,6 +119,10 @@
     computed: {
       ...mapGetters('classSummary', ['learners']),
       ...mapState('classSummary', ['groupMap']),
+      sortedGroups() {
+        const groups = [...this.groups];
+        return groups.sort((a, b) => a.name.localeCompare(b.name));
+      },
       ungroupedLearnersIds() {
         return this.learners
           .filter(learner => {
@@ -175,7 +179,7 @@
     },
     $trs: {
       allUngroupedLearnres: {
-        message: 'All Ungrouped Learners',
+        message: 'All ungrouped Learners',
         context: 'Option to select all learners that are not in a group',
       },
       selectGroupsAndIndividualLearnersTitle: {

From e8b6adeb69da90ac63c838185f187b62ea6931f6 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 14 Jan 2025 12:50:04 -0500
Subject: [PATCH 12/14] Back up learners and groups selection

---
 .../SidePanelRecipientsSelector/index.vue           | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
index 3f3a486bff9..4de2e8fe452 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
@@ -163,10 +163,21 @@
     watch: {
       selectedRecipients(newVal) {
         if (newVal === ClassRecipients.ENTIRE_CLASS) {
+          // Backup data in case user selects group or individual again.
+          this.selectedGroupsBackedUp = this.selectedGroupIds;
+          this.adHocLearnersBackedUp = this.adHocLearners;
+
           this.selectedGroupIds = [this.classId];
           this.updateAdHocLearners([]);
         } else {
-          this.selectedGroupIds = this.selectedCollectionIds.filter(id => id !== this.classId);
+          if (this.adHocLearnersBackedUp) {
+            this.updateAdHocLearners(this.adHocLearnersBackedUp);
+          }
+          if (this.selectedGroupsBackedUp) {
+            this.selectedGroupIds = this.selectedGroupsBackedUp;
+          } else {
+            this.selectedGroupIds = this.selectedCollectionIds.filter(id => id !== this.classId);
+          }
         }
       },
       selectedGroupIds(newVal) {

From 6ceef21ba51e3a9bbf6f1dc35c7ec9829abf1579 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 15 Jan 2025 09:09:17 -0500
Subject: [PATCH 13/14] Fix all ungrouped learners string

---
 .../SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
index ce00ca4cfb0..c22d8ba367b 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -179,7 +179,7 @@
     },
     $trs: {
       allUngroupedLearnres: {
-        message: 'All ungrouped Learners',
+        message: 'All ungrouped learners',
         context: 'Option to select all learners that are not in a group',
       },
       selectGroupsAndIndividualLearnersTitle: {

From 4663c2460d957b061bb78d83cf40c96176ec481c Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 15 Jan 2025 09:47:58 -0500
Subject: [PATCH 14/14] Bump KDS version

---
 packages/kolibri/package.json | 2 +-
 yarn.lock                     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/kolibri/package.json b/packages/kolibri/package.json
index c00f0ff1a58..da4d73b2d34 100644
--- a/packages/kolibri/package.json
+++ b/packages/kolibri/package.json
@@ -77,7 +77,7 @@
     "frame-throttle": "^3.0.0",
     "intl": "^1.2.4",
     "kolibri-constants": "0.2.8",
-    "kolibri-design-system": "5.0.0-rc11",
+    "kolibri-design-system": "5.0.0-rc12",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "1.9.0",
diff --git a/yarn.lock b/yarn.lock
index 7e6147ae544..c79af4867cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7791,10 +7791,10 @@ kolibri-constants@0.2.8:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.8.tgz#34ad2e2b87cf132ebe8dbaa9b64dc4a7bf261f8d"
   integrity sha512-ycXeK+ePw7zkiNtf+nX/yF5BO52+onoYS2V3d9HZDIvx7X6CDJPtMcypkXrK9aZ0JbWAegRFMD/lAd8q21cf4Q==
 
-kolibri-design-system@5.0.0-rc11:
-  version "5.0.0-rc11"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc11.tgz#433b31d25337255708cf1bc28b86e4d619962f98"
-  integrity sha512-g3mxd+Bd82al5Bf3zfO3tizItI/LeMVCUVXwifv8rtbukIa5aoWDwCTUJkdnEQCFSZR5WQ0k9mhieIAe47ebvQ==
+kolibri-design-system@5.0.0-rc12:
+  version "5.0.0-rc12"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc12.tgz#326fa3446dbf597c1cdd8b08e3a4b64cb5d6ea30"
+  integrity sha512-IDbt5ADUSkvG6LyR9tUwMZz26xVcRBk1PBYCTbjNK+dJeuATp92QhTSh87sWXxlSoYV7/1DURqLA3lCefsaQnA==
   dependencies:
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "3.0.21"