Merge pull request #12933 from rtibbles/vue2.7

Upgrade to vue2.7 and remove @vue/composition-api.

kolibri/core/assets/src/state/modules/core/actions.js

@@ -10,7 +10,7 @@ import { setServerTime } from 'kolibri/utils/serverClock';
 import urls from 'kolibri/urls';
 import redirectBrowser from 'kolibri/utils/redirectBrowser';
 import CatchErrors from 'kolibri/utils/CatchErrors';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import Lockr from 'lockr';
 import {
   DisconnectionErrorCodes,
@@ -202,7 +202,7 @@ export function getFacilityConfig(store, facilityId) {
 export function loading(store) {
   return new Promise(resolve => {
     store.commit('CORE_SET_PAGE_LOADING', true);
-    Vue.nextTick(() => {
+    nextTick(() => {
       resolve();
     });
   });
@@ -211,7 +211,7 @@ export function loading(store) {
 export function notLoading(store) {
   return new Promise(resolve => {
     store.commit('CORE_SET_PAGE_LOADING', false);
-    Vue.nextTick(() => {
+    nextTick(() => {
       resolve();
     });
   });

kolibri/plugins/coach/assets/src/composables/useCoachTabs.js

@@ -19,7 +19,7 @@
  * Then when you need find out if tabs were clicked recently,
  * call `wereTabsClickedRecently`.
  */
-import { reactive } from '@vue/composition-api';
+import { reactive } from 'vue';
 
 // tabs interaction is considered to be recent
 // when it's not older than ...

kolibri/plugins/coach/assets/src/composables/useCoreCoach.js

@@ -1,7 +1,7 @@
 import find from 'lodash/find';
 import logger from 'kolibri-logging';
 import { get } from '@vueuse/core';
-import { computed, getCurrentInstance } from '@vue/composition-api';
+import { computed, getCurrentInstance } from 'vue';
 import { currentLanguage, isRtl } from 'kolibri/utils/i18n';
 import useUser from 'kolibri/composables/useUser';
 import { coachStrings } from '../views/common/commonCoachStrings';

kolibri/plugins/coach/assets/src/composables/useFetchTree.js

@@ -1,5 +1,5 @@
 import { get, set } from '@vueuse/core';
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 
 /**

kolibri/plugins/coach/assets/src/composables/useGroups.js

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import samePageCheckGenerator from 'kolibri-common/utils/samePageCheckGenerator';
 import LearnerGroupResource from 'kolibri-common/apiResources/LearnerGroupResource';
 import FacilityUserResource from 'kolibri-common/apiResources/FacilityUserResource';

kolibri/plugins/coach/assets/src/composables/useLessons.js

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import LearnerGroupResource from 'kolibri-common/apiResources/LearnerGroupResource';
 import useUser from 'kolibri/composables/useUser';
 import { PageNames } from '../constants';

kolibri/plugins/coach/assets/src/composables/useQuizCreation.js

@@ -5,7 +5,7 @@ import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri/constants';
 import ExamResource from 'kolibri-common/apiResources/ExamResource';
 import { validateObject, objectWithDefaults } from 'kolibri/utils/objectSpecs';
 import { get, set } from '@vueuse/core';
-import { computed, ref, provide, inject, getCurrentInstance, watch } from '@vue/composition-api';
+import { computed, ref, provide, inject, getCurrentInstance, watch } from 'vue';
 import { fetchExamWithContent } from 'kolibri-common/quizzes/utils';
 // TODO: Probably move this to this file's local dir
 import selectQuestions, { getExerciseQuestionsMap } from '../utils/selectQuestions.js';

kolibri/plugins/coach/assets/src/composables/useQuizResources.js

@@ -1,5 +1,5 @@
 import { get, set } from '@vueuse/core';
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 import { ContentNodeKinds } from 'kolibri/constants';
 import logging from 'kolibri-logging';

kolibri/plugins/coach/assets/src/composables/useQuizzes.js

@@ -1,5 +1,5 @@
 import orderBy from 'lodash/orderBy';
-import { computed, getCurrentInstance } from '@vue/composition-api';
+import { computed, getCurrentInstance } from 'vue';
 
 export default function useQuizzes(store) {
   store = store || getCurrentInstance().proxy.$store;

kolibri/plugins/coach/assets/src/modules/lessonsRoot/index.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { set } from 'vue';
 import * as actions from './actions';
 
 function defaultState() {
@@ -30,7 +30,7 @@ export default {
           for (const [key, val] of Object.entries(sizeItem)) {
             const lesson = state.lessons.find(lesson => lesson.id === key);
             if (lesson) {
-              Vue.set(lesson, 'size', val);
+              set(lesson, 'size', val);
             }
           }
         }

kolibri/plugins/coach/assets/src/views/groups/GroupsRootPage/index.vue

@@ -91,7 +91,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import { mapState, mapActions } from 'vuex';
   import orderBy from 'lodash/orderBy';
   import CoreTable from 'kolibri/components/CoreTable';

kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue

@@ -88,7 +88,7 @@
 
 <script>
 
-  import { computed, toRefs } from '@vue/composition-api';
+  import { computed, toRefs } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { ViewMoreButtonStates } from '../../../constants/index';
   import LessonContentCard from './LessonContentCard';

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue

@@ -89,7 +89,7 @@
   import { mapState, mapActions, mapMutations } from 'vuex';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useSnackbar from 'kolibri/composables/useSnackbar';
-  import { computed, getCurrentInstance, watch } from '@vue/composition-api';
+  import { computed, getCurrentInstance, watch } from 'vue';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import ReportsControls from '../../common/ReportsControls';

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue

@@ -114,7 +114,7 @@
 
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
   import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';

kolibri/plugins/coach/assets/src/views/lessons/LessonsRootPage.vue

@@ -182,7 +182,7 @@
 
 <script>
 
-  import Vue from 'vue';
+  import Vue, { set } from 'vue';
   import { mapState, mapActions } from 'vuex';
   import LessonResource from 'kolibri-common/apiResources/LessonResource';
   import countBy from 'lodash/countBy';
@@ -392,7 +392,7 @@
           : this.coachString('lessonNotVisibleToLearnersLabel');
         this.manageModalVisibilityAndPreferences();
 
-        Vue.set(this.updatingVisibilityLessons, lesson.id, lesson.id);
+        set(this.updatingVisibilityLessons, lesson.id, lesson.id);
         return LessonResource.saveModel({
           id: lesson.id,
           data: {

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue

@@ -312,7 +312,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import logging from 'kolibri-logging';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import {

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue

@@ -147,7 +147,7 @@
 
 <script>
 
-  import { ref, computed, toRefs, watch } from '@vue/composition-api';
+  import { ref, computed, toRefs, watch } from 'vue';
   import commonCoreStrings, { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import useAccordion from 'kolibri-common/components/useAccordion';
   import AccordionItem from 'kolibri-common/components/AccordionItem';

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue

@@ -149,7 +149,7 @@
     enhancedQuizManagementStrings,
     displayQuestionTitle,
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { getCurrentInstance, computed, ref } from '@vue/composition-api';
+  import { getCurrentInstance, computed, ref } from 'vue';
   import { get } from '@vueuse/core';
   import isEqual from 'lodash/isEqual';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue

@@ -208,7 +208,7 @@
     displaySectionTitle,
     enhancedQuizManagementStrings,
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { computed, ref, getCurrentInstance, watch } from '@vue/composition-api';
+  import { computed, ref, getCurrentInstance, watch } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue

@@ -127,7 +127,7 @@
 
   import isEqual from 'lodash/isEqual';
   import pick from 'lodash/pick';
-  import { getCurrentInstance, computed, ref } from '@vue/composition-api';
+  import { getCurrentInstance, computed, ref } from 'vue';
   import {
     displaySectionTitle,
     enhancedQuizManagementStrings,

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue

@@ -87,7 +87,7 @@
 <script>
 
   import isEqual from 'lodash/isEqual';
-  import { computed, ref } from '@vue/composition-api';
+  import { computed, ref } from 'vue';
   import {
     displaySectionTitle,
     enhancedQuizManagementStrings,

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue

@@ -26,7 +26,7 @@
 <script>
 
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
-  import { ref, watch, computed, getCurrentInstance } from '@vue/composition-api';
+  import { ref, watch, computed, getCurrentInstance } from 'vue';
   import { PageNames } from '../../../constants';
 
   export default {

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue

@@ -115,7 +115,7 @@
   import get from 'lodash/get';
   import { ERROR_CONSTANTS } from 'kolibri/constants';
   import CatchErrors from 'kolibri/utils/CatchErrors';
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';

kolibri/plugins/coach/assets/src/views/quizzes/ExamsRootPage.vue

@@ -212,7 +212,7 @@
 
 <script>
 
-  import { getCurrentInstance, ref } from '@vue/composition-api';
+  import { getCurrentInstance, ref } from 'vue';
   import CoreTable from 'kolibri/components/CoreTable';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import urls from 'kolibri/urls';

kolibri/plugins/coach/assets/test/useQuizCreation.spec.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { get } from '@vueuse/core';
 import ExamResource from 'kolibri-common/apiResources/ExamResource';
 import { objectWithDefaults } from 'kolibri/utils/objectSpecs';
@@ -157,7 +157,7 @@ describe('useQuizCreation', () => {
           resourcePool: [exercise],
           questionCount: 10,
         });
-        await Vue.nextTick();
+        await nextTick();
         expect(get(activeQuestions).length).toEqual(10);
 
         // Now let's change the question count and see if the questions array is updated
@@ -167,7 +167,7 @@ describe('useQuizCreation', () => {
           resourcePool: [exercise],
           questionCount: newQuestionCount,
         });
-        await Vue.nextTick();
+        await nextTick();
         // Now questions should only be as long as 10 + newQuestionCount
         expect(get(activeQuestions)).toHaveLength(10 + newQuestionCount);
 
@@ -179,7 +179,7 @@ describe('useQuizCreation', () => {
           resourcePool: [exercise],
           questionCount: newQuestionCount2,
         });
-        await Vue.nextTick();
+        await nextTick();
         expect(get(activeQuestions)).toHaveLength(20);
       });
 

kolibri/plugins/device/assets/src/composables/useContentTasks.js

@@ -1,5 +1,5 @@
 import { useIntervalFn } from '@vueuse/core';
-import { getCurrentInstance, onMounted, onUnmounted } from '@vue/composition-api';
+import { getCurrentInstance, onMounted, onUnmounted } from 'vue';
 import useUser from 'kolibri/composables/useUser';
 
 export default function useContentTasks() {

kolibri/plugins/device/assets/src/composables/useDeviceRestart.js

@@ -2,7 +2,7 @@
  * A composable function containing logic related to restarting the device
  */
 
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import heartbeat from 'kolibri/heartbeat';
 import client from 'kolibri/client';
 import clientFactory from 'kolibri/utils/baseClient';

kolibri/plugins/device/assets/src/composables/usePlugins.js

@@ -2,7 +2,7 @@
  * A composable function containing logic related to channels
  */
 
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import client from 'kolibri/client';
 import urls from 'kolibri/urls';
 

kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue

@@ -377,7 +377,7 @@
   import find from 'lodash/find';
   import urls from 'kolibri/urls';
   import logger from 'kolibri-logging';
-  import { ref, watch } from '@vue/composition-api';
+  import { ref, watch } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { availableLanguages, currentLanguage, sortLanguages } from 'kolibri/utils/i18n';

kolibri/plugins/facility/assets/src/modules/importCSV/index.js

@@ -1,5 +1,5 @@
 import TaskResource from 'kolibri/apiResources/TaskResource';
-import Vue from 'vue';
+import { set } from 'vue';
 import { CSVImportStatuses } from '../../constants';
 import actions from './actions';
 
@@ -70,8 +70,8 @@ export default {
       state.filename = payload;
     },
     UPDATE_TASK_REPORT(state, task) {
-      Vue.set(state, 'per_line_errors', task.extra_metdata.per_line_errors);
-      Vue.set(state, 'overall_error', task.extra_metdata.overall_error);
+      set(state, 'per_line_errors', task.extra_metdata.per_line_errors);
+      set(state, 'overall_error', task.extra_metdata.overall_error);
       state.filename = task.extra_metdata.filename;
       state.users_report = task.extra_metdata.users;
       state.classes_report = task.extra_metdata.classes;
@@ -81,8 +81,8 @@ export default {
       if (state.status == CSVImportStatuses.VALIDATING) state.status = CSVImportStatuses.VALIDATED;
       else if (state.status == CSVImportStatuses.SAVING) state.status = CSVImportStatuses.FINISHED;
 
-      Vue.set(state, 'per_line_errors', task.extra_metadata.per_line_errors);
-      Vue.set(state, 'overall_error', task.extra_metadata.overall_error);
+      set(state, 'per_line_errors', task.extra_metadata.per_line_errors);
+      set(state, 'overall_error', task.extra_metadata.overall_error);
       state.filename = task.extra_metadata.filename;
       state.users_report = task.extra_metadata.users;
       state.classes_report = task.extra_metadata.classes;
@@ -91,8 +91,8 @@ export default {
     },
     SET_FAILED(state, task) {
       state.status = CSVImportStatuses.ERRORS;
-      Vue.set(state, 'overall_error', task.extra_metadata.overall_error);
-      Vue.set(state, 'per_line_errors', []);
+      set(state, 'overall_error', task.extra_metadata.overall_error);
+      set(state, 'per_line_errors', []);
       TaskResource.clear(state.taskId);
       state.taskId = '';
     },

kolibri/plugins/facility/assets/src/modules/manageCSV/index.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { set } from 'vue';
 import { CSVGenerationStatuses, UsersExportStatuses } from '../../constants';
 import actions from './actions';
 
@@ -95,7 +95,7 @@ export default {
     SET_REGISTERED(state, facility) {
       const match = state.facilities.find(f => f.id === facility.id);
       if (match) {
-        Vue.set(match.dataset, 'registered', true);
+        set(match.dataset, 'registered', true);
       }
     },
     /*State for export users tasks*/

kolibri/plugins/facility/assets/src/views/ManageClassPage/useDeleteClass.js

@@ -1,4 +1,4 @@
-import { ref, getCurrentInstance } from '@vue/composition-api';
+import { ref, getCurrentInstance } from 'vue';
 import { set } from '@vueuse/core';
 import ClassroomResource from 'kolibri-common/apiResources/ClassroomResource';
 

kolibri/plugins/learn/assets/src/composables/__mocks__/useDevices.js

@@ -31,7 +31,7 @@
  * ```
  */
 
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 
 const MOCK_DEFAULTS = {
   fetchDevices: jest.fn(() => Promise.resolve([])),

kolibri/plugins/learn/assets/src/composables/__tests__/useProgressTracking.spec.js

@@ -4,7 +4,7 @@ import client from 'kolibri/client';
 import { coreStoreFactory as makeStore } from 'kolibri/store';
 import useUser, { useUserMock } from 'kolibri/composables/useUser'; // eslint-disable-line
 import useTotalProgress, { useTotalProgressMock } from 'kolibri/composables/useTotalProgress'; // eslint-disable-line
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import useProgressTracking from '../useProgressTracking';
 import coreModule from '../../../../../../core/assets/src/state/modules/core';