Add warning banner for "insufficient resources"

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/sidePanels/QuizResourceSelection/subPages/QuestionsSettings.vue

@@ -2,8 +2,15 @@
 
   <div>
     <div class="mb-20">
-      {{ maxNumberOfQuestionsInfo$({ count: maxQuestions }) }}
+      {{ maxNumberOfQuestionsInfo$({ count: settings.maxQuestions }) }}
     </div>
+    <UiAlert
+      v-if="showAlert && addableQuestionCount < settings.maxQuestions"
+      type="warning"
+      @dismiss="showAlert = false"
+    >
+      {{ insufficientResources$({ count: addableQuestionCount }) }}
+    </UiAlert>
     <div class="number-question">
       <div>
         <KTextbox
@@ -62,6 +69,7 @@
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { PageNames } from '../../../../../../constants';
   import { injectQuizCreation } from '../../../../../../composables/useQuizCreation';
 
@@ -71,11 +79,22 @@
 
   export default {
     name: 'SelectFromBookmarks',
-    components: {},
+    components: {
+      UiAlert,
+    },
     setup(props) {
       const prevRoute = ref(null);
+      const showAlert = ref(true);
       const instance = getCurrentInstance();
 
+      const { data: channels } = props.channelsFetch;
+
+      const addableQuestionCount = computed(() => {
+        return channels.value.reduce((total, currentObject) => {
+          return total + currentObject.num_assessments;
+        }, 0);
+      });
+
       const {
         questionsSettingsLabel$,
         numberOfQuestionsLabel$,
@@ -85,6 +104,7 @@
         clearSelectionNotice$,
       } = enhancedQuizManagementStrings;
 
+      const { insufficientResources$, saveSettingsAction$ } = searchAndFilterStrings;
       const { activeSection, activeSectionIndex } = injectQuizCreation();
 
       props.setTitle(
@@ -123,7 +143,6 @@
         });
       };
 
-      const { saveSettingsAction$ } = searchAndFilterStrings;
       const { continueAction$ } = coreStrings;
       const continueText = props.isLanding ? continueAction$() : saveSettingsAction$();
 
@@ -149,15 +168,22 @@
       return {
         // eslint-disable-next-line vue/no-unused-properties
         prevRoute,
+        showAlert,
         questionCount: workingQuestionCount,
         isChoosingManually: workingIsChoosingManually,
         clearSelectionNotice$,
         questionCountIsEditable,
-        maxQuestions: computed(() => props.settings.maxQuestions),
+        maxQuestions: computed(() =>
+          addableQuestionCount.value > props.settings.maxQuestions
+            ? props.settings.maxQuestions
+            : addableQuestionCount.value,
+        ),
         maxNumberOfQuestions$,
         numberOfQuestionsLabel$,
         maxNumberOfQuestionsInfo$,
         chooseQuestionsManuallyLabel$,
+        insufficientResources$,
+        addableQuestionCount,
       };
     },
     props: {
@@ -181,6 +207,10 @@
         type: Boolean,
         default: false,
       },
+      channelsFetch: {
+        type: Object,
+        required: true,
+      },
     },
     beforeRouteEnter(to, from, next) {
       next(vm => {

packages/kolibri-common/strings/searchAndFilterStrings.js

@@ -134,4 +134,10 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     message: 'Save settings',
     context: 'Button label to save resource selection settings',
   },
+  insufficientResources: {
+    message:
+      'There are currently only {count, number} questions across all practice resources in your library. To create a larger quiz, consider adding more resources to your library.',
+    context:
+      'Message to indicate that the resources are not sufficient for the user to create a quiz.',
+  },
 });