diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue
index 54b4af7f1bb..64e107555b5 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue
@@ -130,17 +130,15 @@
     setup() {
       const { createSnackbar, clearSnackbar } = useSnackbar();
       const { noResourcesInLessonLabel$ } = coachStrings;
-      const { 
-        moveResourceUpButtonDescription$,
-        moveResourceDownButtonDescription$
-      } = searchAndFilterStrings;
+      const { moveResourceUpButtonDescription$, moveResourceDownButtonDescription$ } =
+        searchAndFilterStrings;
       return {
         PageNames,
         noResourcesInLessonLabel$,
         createSnackbar,
         clearSnackbar,
         moveResourceUpButtonDescription$,
-        moveResourceDownButtonDescription$
+        moveResourceDownButtonDescription$,
       };
     },
     props: {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/tables/LessonResourcesTable.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/tables/LessonResourcesTable.vue
index f7ddbf05441..99d78365a16 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/tables/LessonResourcesTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/tables/LessonResourcesTable.vue
@@ -27,8 +27,8 @@
                     <!-- Mousedown.prevent is needed to avoid user selection -->
                     <DragSortWidget
                       class="sort-widget"
-                      :moveUpText="()=>$tr('moveResourceUpButtonDescription')"
-                      :moveDownText="()=>$tr('moveResourceDownButtonDescription')"
+                      :moveUpText="() => $tr('moveResourceUpButtonDescription')"
+                      :moveDownText="() => $tr('moveResourceDownButtonDescription')"
                       :isFirst="index === 0"
                       :isLast="index === entries.length - 1"
                       @moveUp="moveUpOne(index)"
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue
index 5b13aa028fd..639a2ec5f1f 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue
@@ -246,7 +246,7 @@
                         <DragSortWidget
                           class="sort-widget"
                           :moveUpText="upLabel$()"
-                          :moveDownText=" downLabel$()"
+                          :moveDownText="downLabel$()"
                           :noDrag="true"
                           :isFirst="index === 0"
                           :isLast="index === activeQuestions.length - 1"
@@ -398,10 +398,7 @@
       const dragActive = ref(false);
 
       const { createSnackbar } = useSnackbar();
-      const{
-        upLabel$,
-        downLabel$,
-      } = searchAndFilterStrings;
+      const { upLabel$, downLabel$ } = searchAndFilterStrings;
 
       return {
         dragActive,
@@ -515,7 +512,6 @@
           },
         ];
       },
-      
     },
     created() {
       const { query } = this.$route;
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
index 02f0ae65175..5f2f7f4c89d 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div
     v-if="activeSection"
     class="section-settings-content"
@@ -29,7 +28,7 @@
               <DragSortWidget
                 class="drag-title"
                 :moveUpText="upLabel$()"
-                :moveDownText=" downLabel$()"
+                :moveDownText="downLabel$()"
                 :noDrag="true"
                 :isFirst="index === 0"
                 :isLast="index === sectionOrderList.length - 1"
@@ -80,264 +79,259 @@
       {{ closeConfirmationMessage$() }}
     </KModal>
   </div>
-
 </template>
 
-
 <script>
 
-  import isEqual from 'lodash/isEqual';
-  import { computed, ref } from '@vue/composition-api';
-  import {
-    displaySectionTitle,
-    enhancedQuizManagementStrings,
-  } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-<<<<<<< HEAD
-  import Draggable from 'kolibri-common/components/sortable/Draggable';
-  import DragContainer from 'kolibri-common/components/sortable/DragContainer';
-  import DragHandle from 'kolibri-common/components/sortable/DragHandle';
-  import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
-=======
-  import Draggable from 'kolibri.coreVue.components.Draggable';
-  import DragContainer from 'kolibri.coreVue.components.DragContainer';
-  import DragHandle from 'kolibri.coreVue.components.DragHandle';
-  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
-  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
->>>>>>> 007de86ab1 (adds strings for dragsortwidget to searchandfilter file)
-  import { PageNames } from '../../../constants/index';
-  import { injectQuizCreation } from '../../../composables/useQuizCreation';
-  import useDrag from './useDrag.js';
-
-  export default {
-    name: 'SectionOrder',
-    components: {
-      Draggable,
-      DragContainer,
-      DragHandle,
-      DragSortWidget,
-    },
-    mixins: [commonCoreStrings],
-    setup(_, context) {
-      const {
-        sectionSettings$,
-        sectionTitle$,
-        numberOfQuestionsLabel$,
-        optionalDescriptionLabel$,
-        numberOfQuestionsSelected$,
-        deleteSectionLabel$,
-        applySettings$,
-        sectionOrder$,
-        sectionOrderLabel$,
-        questionOrder$,
-        randomizedLabel$,
-        currentSection$,
-        randomizedOptionDescription$,
-        fixedLabel$,
-        fixedOptionDescription$,
-        closeConfirmationMessage$,
-        closeConfirmationTitle$,
-        deleteConfirmation$,
-        addQuestionsLabel$,
-        addMoreQuestionsLabel$,
-        sectionDeletedNotification$,
-      } = enhancedQuizManagementStrings;
-
-      const {
-        activeSectionIndex,
-        activeSection,
-        activeResourcePool,
-        activeQuestions,
-        allSections,
-        updateSection,
-        updateQuiz,
-      } = injectQuizCreation();
-      const{
-        upLabel$,
-        downLabel$,
-      } = searchAndFilterStrings;
-
-
-      const { moveDownOne, moveUpOne } = useDrag();
-
-      const showCloseConfirmation = ref(false);
-
-      function handleCancelClose() {
-        showCloseConfirmation.value = false;
-      }
-
-      function handleConfirmClose() {
-        context.emit('closePanel');
-      }
-
-      // This is used to track the section that was moved
-      const reorderedSectionIndex = ref(null);
-
-      const sectionOrderList = ref(allSections.value);
-
-      const sectionOrderChanged = computed(() => {
-        return !isEqual(
-          allSections.value.map(section => section.section_id),
-          sectionOrderList.value.map(section => section.section_id),
-        );
-      });
-
-      const formDataHasChanged = computed(() => {
-        return sectionOrderChanged.value;
-      });
-
-      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
-
-      const resourceButtonLabel = computed(() => {
-        if (activeQuestions.value.length === 0) {
-          return addQuestionsLabel$();
-        } else {
-          return addMoreQuestionsLabel$();
-        }
-      });
-
-      return {
-        reorderedSectionIndex,
-        formDataHasChanged,
-        sectionOrderChanged,
-        showCloseConfirmation,
-        handleCancelClose,
-        handleConfirmClose,
-        // useQuizCreation
-        activeSectionIndex,
-        activeSection,
-        activeResourcePool,
-        activeQuestions,
-        allSections,
-        sectionOrderList,
-        updateSection,
-        updateQuiz,
-        // dragging a11y
-        moveDownOne,
-        moveUpOne,
-        // Form models
-        resourceButtonLabel,
-        // Responsiveness
-        windowIsLarge,
-        windowIsSmall,
-        // i18n
-        displaySectionTitle,
-        addQuestionsLabel$,
-        sectionSettings$,
-        sectionTitle$,
-        numberOfQuestionsLabel$,
-        optionalDescriptionLabel$,
-        numberOfQuestionsSelected$,
-        sectionDeletedNotification$,
-        currentSection$,
-        deleteSectionLabel$,
-        sectionOrderLabel$,
-        applySettings$,
-        closeConfirmationTitle$,
-        closeConfirmationMessage$,
-        deleteConfirmation$,
-        addMoreQuestionsLabel$,
-        sectionOrder$,
-        questionOrder$,
-        randomizedLabel$,
-        randomizedOptionDescription$,
-        fixedLabel$,
-        fixedOptionDescription$,
-        upLabel$,
-        downLabel$,
-      };
-    },
-    computed: {
-      borderStyle() {
-        return `border: 1px solid ${this.$themeTokens.fineLine}`;
-      },
-      activeSectionStyles() {
-        return {
-          backgroundColor: this.$themePalette.grey.v_100,
-          border: `1px solid ${this.$themeTokens.fineLine}`,
-        };
-      },
-      draggableStyle() {
-        return {
-          backgroundColor: this.$themeTokens.surface,
-        };
-      },
-    },
-    beforeRouteLeave(to, __, next) {
-      if (this.formDataHasChanged && !this.showCloseConfirmation) {
-        this.showCloseConfirmation = true;
-        next(false);
-      } else {
-        next();
-      }
-    },
-    methods: {
-      handleSectionSort(e) {
-        this.sectionOrderList = e.newArray;
-        const reorderedId = this.allSections[this.activeSectionIndex].section_id;
-        this.reorderedSectionIndex = this.sectionOrderList.findIndex(
-          section => section.section_id === reorderedId,
-        );
+    import isEqual from 'lodash/isEqual';
+    import { computed, ref } from '@vue/composition-api';
+    import {
+      displaySectionTitle,
+      enhancedQuizManagementStrings,
+    } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+    import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+    import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  <<<<<<< HEAD
+    import Draggable from 'kolibri-common/components/sortable/Draggable';
+    import DragContainer from 'kolibri-common/components/sortable/DragContainer';
+    import DragHandle from 'kolibri-common/components/sortable/DragHandle';
+    import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
+  =======
+    import Draggable from 'kolibri.coreVue.components.Draggable';
+    import DragContainer from 'kolibri.coreVue.components.DragContainer';
+    import DragHandle from 'kolibri.coreVue.components.DragHandle';
+    import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
+    import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  >>>>>>> 007de86ab1 (adds strings for dragsortwidget to searchandfilter file)
+    import { PageNames } from '../../../constants/index';
+    import { injectQuizCreation } from '../../../composables/useQuizCreation';
+    import useDrag from './useDrag.js';
+
+    export default {
+      name: 'SectionOrder',
+      components: {
+        Draggable,
+        DragContainer,
+        DragHandle,
+        DragSortWidget,
       },
-      applySettings(nextRouteName = PageNames.EXAM_CREATION_ROOT) {
-        if (!this.sectionOrderChanged) {
-          // TODO can we show an error here?
-          return;
+      mixins: [commonCoreStrings],
+      setup(_, context) {
+        const {
+          sectionSettings$,
+          sectionTitle$,
+          numberOfQuestionsLabel$,
+          optionalDescriptionLabel$,
+          numberOfQuestionsSelected$,
+          deleteSectionLabel$,
+          applySettings$,
+          sectionOrder$,
+          sectionOrderLabel$,
+          questionOrder$,
+          randomizedLabel$,
+          currentSection$,
+          randomizedOptionDescription$,
+          fixedLabel$,
+          fixedOptionDescription$,
+          closeConfirmationMessage$,
+          closeConfirmationTitle$,
+          deleteConfirmation$,
+          addQuestionsLabel$,
+          addMoreQuestionsLabel$,
+          sectionDeletedNotification$,
+        } = enhancedQuizManagementStrings;
+
+        const {
+          activeSectionIndex,
+          activeSection,
+          activeResourcePool,
+          activeQuestions,
+          allSections,
+          updateSection,
+          updateQuiz,
+        } = injectQuizCreation();
+        const{
+          upLabel$,
+          downLabel$,
+        } = searchAndFilterStrings;
+
+
+        const { moveDownOne, moveUpOne } = useDrag();
+
+        const showCloseConfirmation = ref(false);
+
+        function handleCancelClose() {
+          showCloseConfirmation.value = false;
+        }
+
+        function handleConfirmClose() {
+          context.emit('closePanel');
         }
 
-        // Apply the new sorting to the updated sections,
-        // otherwise the edits we just made will be lost
-        const sectionOrderIds = this.sectionOrderList.map(section => section.section_id);
-        const question_sources = this.allSections.sort((a, b) => {
-          return sectionOrderIds.indexOf(a.section_id) - sectionOrderIds.indexOf(b.section_id);
+        // This is used to track the section that was moved
+        const reorderedSectionIndex = ref(null);
+
+        const sectionOrderList = ref(allSections.value);
+
+        const sectionOrderChanged = computed(() => {
+          return !isEqual(
+            allSections.value.map(section => section.section_id),
+            sectionOrderList.value.map(section => section.section_id),
+          );
         });
-        this.updateQuiz({
-          question_sources,
+
+        const formDataHasChanged = computed(() => {
+          return sectionOrderChanged.value;
         });
 
-        if (nextRouteName) {
-          const sectionIndex =
-            this.reorderedSectionIndex !== null &&
-            this.reorderedSectionIndex !== this.activeSectionIndex
-              ? this.reorderedSectionIndex
-              : this.activeSectionIndex;
-
-          this.$router.push({
-            name: nextRouteName,
-            params: {
-              sectionIndex,
-              classId: this.$route.params.classId,
-              quizId: this.$route.params.quizId,
-            },
-          });
-        } else {
-          this.$emit('closePanel');
-        }
-      },
-      handleKeyboardDragDown(oldIndex, array) {
-        const newArray = this.moveDownOne(oldIndex, array);
-        this.sectionOrderList = newArray;
+        const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+
+        const resourceButtonLabel = computed(() => {
+          if (activeQuestions.value.length === 0) {
+            return addQuestionsLabel$();
+          } else {
+            return addMoreQuestionsLabel$();
+          }
+        });
+
+        return {
+          reorderedSectionIndex,
+          formDataHasChanged,
+          sectionOrderChanged,
+          showCloseConfirmation,
+          handleCancelClose,
+          handleConfirmClose,
+          // useQuizCreation
+          activeSectionIndex,
+          activeSection,
+          activeResourcePool,
+          activeQuestions,
+          allSections,
+          sectionOrderList,
+          updateSection,
+          updateQuiz,
+          // dragging a11y
+          moveDownOne,
+          moveUpOne,
+          // Form models
+          resourceButtonLabel,
+          // Responsiveness
+          windowIsLarge,
+          windowIsSmall,
+          // i18n
+          displaySectionTitle,
+          addQuestionsLabel$,
+          sectionSettings$,
+          sectionTitle$,
+          numberOfQuestionsLabel$,
+          optionalDescriptionLabel$,
+          numberOfQuestionsSelected$,
+          sectionDeletedNotification$,
+          currentSection$,
+          deleteSectionLabel$,
+          sectionOrderLabel$,
+          applySettings$,
+          closeConfirmationTitle$,
+          closeConfirmationMessage$,
+          deleteConfirmation$,
+          addMoreQuestionsLabel$,
+          sectionOrder$,
+          questionOrder$,
+          randomizedLabel$,
+          randomizedOptionDescription$,
+          fixedLabel$,
+          fixedOptionDescription$,
+          upLabel$,
+          downLabel$,
+        };
       },
-      handleKeyboardDragUp(oldIndex, array) {
-        const newArray = this.moveUpOne(oldIndex, array);
-        this.sectionOrderList = newArray;
+      computed: {
+        borderStyle() {
+          return `border: 1px solid ${this.$themeTokens.fineLine}`;
+        },
+        activeSectionStyles() {
+          return {
+            backgroundColor: this.$themePalette.grey.v_100,
+            border: `1px solid ${this.$themeTokens.fineLine}`,
+          };
+        },
+        draggableStyle() {
+          return {
+            backgroundColor: this.$themeTokens.surface,
+          };
+        },
       },
-      sectionOrderingTitle(section) {
-        const sectionIndexOrder = this.allSections.findIndex(
-          s => s.section_id === section.section_id,
-        );
-        return displaySectionTitle(section, sectionIndexOrder).toUpperCase();
+      beforeRouteLeave(to, __, next) {
+        if (this.formDataHasChanged && !this.showCloseConfirmation) {
+          this.showCloseConfirmation = true;
+          next(false);
+        } else {
+          next();
+        }
       },
-     
-    },     
-  };
+      methods: {
+        handleSectionSort(e) {
+          this.sectionOrderList = e.newArray;
+          const reorderedId = this.allSections[this.activeSectionIndex].section_id;
+          this.reorderedSectionIndex = this.sectionOrderList.findIndex(
+            section => section.section_id === reorderedId,
+          );
+        },
+        applySettings(nextRouteName = PageNames.EXAM_CREATION_ROOT) {
+          if (!this.sectionOrderChanged) {
+            // TODO can we show an error here?
+            return;
+          }
+
+          // Apply the new sorting to the updated sections,
+          // otherwise the edits we just made will be lost
+          const sectionOrderIds = this.sectionOrderList.map(section => section.section_id);
+          const question_sources = this.allSections.sort((a, b) => {
+            return sectionOrderIds.indexOf(a.section_id) - sectionOrderIds.indexOf(b.section_id);
+          });
+          this.updateQuiz({
+            question_sources,
+          });
 
-</script>
+          if (nextRouteName) {
+            const sectionIndex =
+              this.reorderedSectionIndex !== null &&
+              this.reorderedSectionIndex !== this.activeSectionIndex
+                ? this.reorderedSectionIndex
+                : this.activeSectionIndex;
+
+            this.$router.push({
+              name: nextRouteName,
+              params: {
+                sectionIndex,
+                classId: this.$route.params.classId,
+                quizId: this.$route.params.quizId,
+              },
+            });
+          } else {
+            this.$emit('closePanel');
+          }
+        },
+        handleKeyboardDragDown(oldIndex, array) {
+          const newArray = this.moveDownOne(oldIndex, array);
+          this.sectionOrderList = newArray;
+        },
+        handleKeyboardDragUp(oldIndex, array) {
+          const newArray = this.moveUpOne(oldIndex, array);
+          this.sectionOrderList = newArray;
+        },
+        sectionOrderingTitle(section) {
+          const sectionIndexOrder = this.allSections.findIndex(
+            s => s.section_id === section.section_id,
+          );
+          return displaySectionTitle(section, sectionIndexOrder).toUpperCase();
+        },
 
+      },
+    };
+</script>
 
 <style lang="scss" scoped>
-
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .section-settings-content {
@@ -415,5 +409,4 @@
     font-size: 0.9em;
     text-align: right;
   }
-
 </style>
diff --git a/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue b/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
index d7fd1c269be..d221b0d0439 100644
--- a/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
+++ b/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
@@ -1,5 +1,4 @@
 <template>
-
   <ImmersivePage
     :appBarTitle="$tr('editChannelOrderTitle')"
     :route="backRoute"
@@ -36,8 +35,8 @@
                 >
                   <DragSortWidget
                     class="sort-widget"
-                    :moveUpText="()=>moveChannelUpLabel$({ name: channel.name })"
-                    :moveDownText="()=>moveChanneldownLabel$({ name: channel.name }) "
+                    :moveUpText="() => moveChannelUpLabel$({ name: channel.name })"
+                    :moveDownText="() => moveChanneldownLabel$({ name: channel.name })"
                     :isFirst="index === 0"
                     :isLast="index === channels.length - 1"
                     @moveUp="shiftOne(index, -1)"
@@ -54,175 +53,170 @@
       </template>
     </KPageContainer>
   </ImmersivePage>
-
 </template>
 
-
 <script>
 
-<<<<<<< HEAD
-  import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
-  import DragContainer from 'kolibri-common/components/sortable/DragContainer';
-  import DragHandle from 'kolibri-common/components/sortable/DragHandle';
-  import Draggable from 'kolibri-common/components/sortable/Draggable';
-  import client from 'kolibri/client';
-  import urls from 'kolibri/urls';
-  import ImmersivePage from 'kolibri/components/pages/ImmersivePage';
-  import useUser from 'kolibri/composables/useUser';
-  import useSnackbar from 'kolibri/composables/useSnackbar';
-=======
-  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
-  import DragContainer from 'kolibri.coreVue.components.DragContainer';
-  import DragHandle from 'kolibri.coreVue.components.DragHandle';
-  import Draggable from 'kolibri.coreVue.components.Draggable';
-  import client from 'kolibri.client';
-  import urls from 'kolibri.urls';
-  import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
-  import useUser from 'kolibri.coreVue.composables.useUser';
-  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
-  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
->>>>>>> 007de86ab1 (adds strings for dragsortwidget to searchandfilter file)
-  import DeviceChannelResource from '../apiResources/deviceChannel';
-  import useContentTasks from '../composables/useContentTasks';
-  import { PageNames } from '../constants';
-
-  export default {
-    name: 'RearrangeChannelsPage',
-    metaInfo() {
-      return {
-        title: this.$tr('editChannelOrderTitle'),
-      };
-    },
-    components: {
-      DragSortWidget,
-      DragContainer,
-      DragHandle,
-      Draggable,
-      ImmersivePage,
-    },
-    setup() {
-      useContentTasks();
-      const { canManageContent } = useUser();
-      const { createSnackbar } = useSnackbar();
-      const{
-        moveChannelUpLabel$,
-        moveChanneldownLabel$
-      } = searchAndFilterStrings;
+  <<<<<<< HEAD
+    import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
+    import DragContainer from 'kolibri-common/components/sortable/DragContainer';
+    import DragHandle from 'kolibri-common/components/sortable/DragHandle';
+    import Draggable from 'kolibri-common/components/sortable/Draggable';
+    import client from 'kolibri/client';
+    import urls from 'kolibri/urls';
+    import ImmersivePage from 'kolibri/components/pages/ImmersivePage';
+    import useUser from 'kolibri/composables/useUser';
+    import useSnackbar from 'kolibri/composables/useSnackbar';
+  =======
+    import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
+    import DragContainer from 'kolibri.coreVue.components.DragContainer';
+    import DragHandle from 'kolibri.coreVue.components.DragHandle';
+    import Draggable from 'kolibri.coreVue.components.Draggable';
+    import client from 'kolibri.client';
+    import urls from 'kolibri.urls';
+    import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
+    import useUser from 'kolibri.coreVue.composables.useUser';
+    import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
+    import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  >>>>>>> 007de86ab1 (adds strings for dragsortwidget to searchandfilter file)
+    import DeviceChannelResource from '../apiResources/deviceChannel';
+    import useContentTasks from '../composables/useContentTasks';
+    import { PageNames } from '../constants';
+
+    export default {
+      name: 'RearrangeChannelsPage',
+      metaInfo() {
+        return {
+          title: this.$tr('editChannelOrderTitle'),
+        };
+      },
+      components: {
+        DragSortWidget,
+        DragContainer,
+        DragHandle,
+        Draggable,
+        ImmersivePage,
+      },
+      setup() {
+        useContentTasks();
+        const { canManageContent } = useUser();
+        const { createSnackbar } = useSnackbar();
+        const{
+          moveChannelUpLabel$,
+          moveChanneldownLabel$
+        } = searchAndFilterStrings;
 
 
-      return {
-        canManageContent,
-        createSnackbar,
-        moveChannelUpLabel$,
-        moveChanneldownLabel$
-      };
-    },
-    data() {
-      return {
-        loading: true,
-        channels: [],
-      };
-    },
-    computed: {
-      backRoute() {
-        return { name: PageNames.MANAGE_CONTENT_PAGE };
-      },
-      itemClass() {
         return {
-          ':hover': {
-            backgroundColor: this.$themePalette.grey.v_300,
-          },
+          canManageContent,
+          createSnackbar,
+          moveChannelUpLabel$,
+          moveChanneldownLabel$
         };
       },
-    },
-    beforeMount() {
-      if (!this.canManageContent) {
-        return this.$router.replace(this.$router.getRoute('MANAGE_CONTENT_PAGE'));
-      }
-      this.fetchChannels()
-        .then(channels => {
-          this.channels = [...channels];
-          this.loading = false;
-        })
-        .catch(error => {
-          this.$store.dispatch('CORE_SET_ERROR', error);
-        });
-    },
-    methods: {
-      postNewOrder(channelIds) {
-        return client({
-          url: urls['kolibri:kolibri.plugins.device:devicechannelorder'](),
-          method: 'POST',
-          data: channelIds,
-        });
-      },
-      fetchChannels() {
-        return DeviceChannelResource.fetchCollection({
-          force: true,
-          getParams: {
-            available: true,
-          },
-        });
+      data() {
+        return {
+          loading: true,
+          channels: [],
+        };
       },
-      shiftOne(index, delta) {
-        const newArray = [...this.channels];
-        const adjacentItem = newArray[index + delta];
-        newArray[index + delta] = newArray[index];
-        newArray[index] = adjacentItem;
-        // This mimicks the object emitted by @sort event
-        this.handleOrderChange({ newArray });
+      computed: {
+        backRoute() {
+          return { name: PageNames.MANAGE_CONTENT_PAGE };
+        },
+        itemClass() {
+          return {
+            ':hover': {
+              backgroundColor: this.$themePalette.grey.v_300,
+            },
+          };
+        },
       },
-      handleOrderChange(event) {
-        const oldArray = [...this.channels];
-        // NOTE: have to update channels before POST because doing it after
-        // causes a brief 'pick-up' animation after item is dropped.
-        this.channels = [...event.newArray];
-        this.postNewOrder(event.newArray.map(x => x.id))
-          .then(() => {
-            this.createSnackbar(this.$tr('successNotification'));
+      beforeMount() {
+        if (!this.canManageContent) {
+          return this.$router.replace(this.$router.getRoute('MANAGE_CONTENT_PAGE'));
+        }
+        this.fetchChannels()
+          .then(channels => {
+            this.channels = [...channels];
+            this.loading = false;
           })
-          .catch(() => {
-            // HACK completely reset the array to undo the move on the drag list
-            this.channels = [];
-            this.$nextTick().then(() => {
-              this.channels = oldArray;
-            });
-            this.createSnackbar(this.$tr('failureNotification'));
+          .catch(error => {
+            this.$store.dispatch('CORE_SET_ERROR', error);
           });
       },
-    },
-    $trs: {
-      instructions: {
-        message: 'Control the order in which channels will be displayed to learners and coaches',
-        context: 'Text explaining how the channel reordering feature works',
-      },
-      successNotification: {
-        message: 'Channel order saved',
-        context: 'Success message shown when the admin re-orders channels',
-      },
-      failureNotification: {
-        message: 'There was a problem reordering the channels',
-        context:
-          "Error message that displays if there is a problem reordering channels on the 'Edit channel order' page.",
-      },
-      noChannels: {
-        message: 'There are no channels',
-        context:
-          "This message will display on the 'Edit channel order' page if there are no channels available.",
+      methods: {
+        postNewOrder(channelIds) {
+          return client({
+            url: urls['kolibri:kolibri.plugins.device:devicechannelorder'](),
+            method: 'POST',
+            data: channelIds,
+          });
+        },
+        fetchChannels() {
+          return DeviceChannelResource.fetchCollection({
+            force: true,
+            getParams: {
+              available: true,
+            },
+          });
+        },
+        shiftOne(index, delta) {
+          const newArray = [...this.channels];
+          const adjacentItem = newArray[index + delta];
+          newArray[index + delta] = newArray[index];
+          newArray[index] = adjacentItem;
+          // This mimicks the object emitted by @sort event
+          this.handleOrderChange({ newArray });
+        },
+        handleOrderChange(event) {
+          const oldArray = [...this.channels];
+          // NOTE: have to update channels before POST because doing it after
+          // causes a brief 'pick-up' animation after item is dropped.
+          this.channels = [...event.newArray];
+          this.postNewOrder(event.newArray.map(x => x.id))
+            .then(() => {
+              this.createSnackbar(this.$tr('successNotification'));
+            })
+            .catch(() => {
+              // HACK completely reset the array to undo the move on the drag list
+              this.channels = [];
+              this.$nextTick().then(() => {
+                this.channels = oldArray;
+              });
+              this.createSnackbar(this.$tr('failureNotification'));
+            });
+        },
       },
-      editChannelOrderTitle: {
-        message: 'Edit channel order',
-        context:
-          "Title of the 'Edit channel order' page where users can rearrange the order in which channels will be displayed to learners and coaches.",
+      $trs: {
+        instructions: {
+          message: 'Control the order in which channels will be displayed to learners and coaches',
+          context: 'Text explaining how the channel reordering feature works',
+        },
+        successNotification: {
+          message: 'Channel order saved',
+          context: 'Success message shown when the admin re-orders channels',
+        },
+        failureNotification: {
+          message: 'There was a problem reordering the channels',
+          context:
+            "Error message that displays if there is a problem reordering channels on the 'Edit channel order' page.",
+        },
+        noChannels: {
+          message: 'There are no channels',
+          context:
+            "This message will display on the 'Edit channel order' page if there are no channels available.",
+        },
+        editChannelOrderTitle: {
+          message: 'Edit channel order',
+          context:
+            "Title of the 'Edit channel order' page where users can rearrange the order in which channels will be displayed to learners and coaches.",
+        },
       },
-    },
-  };
-
+    };
 </script>
 
-
 <style lang="scss" scoped>
-
   @import '~kolibri-design-system/lib/styles/definitions';
   @import '../styles/definitions';
 
@@ -254,5 +248,4 @@
   .container {
     max-width: 480px;
   }
-
 </style>
diff --git a/packages/kolibri-common/components/sortable/DragSortWidget/index.vue b/packages/kolibri-common/components/sortable/DragSortWidget/index.vue
index 73f9ce1a790..37a4381ab1f 100644
--- a/packages/kolibri-common/components/sortable/DragSortWidget/index.vue
+++ b/packages/kolibri-common/components/sortable/DragSortWidget/index.vue
@@ -11,7 +11,7 @@
       icon="chevronUp"
       class="btn up"
       size="mini"
-      :ariaLabel="upLabel" 
+      :ariaLabel="upLabel"
       :class="{ visuallyhidden: !hasFocus }"
       @click="clickUp"
       @keyup.space="clickUp"
@@ -43,35 +43,34 @@
 
 <script>
 
-  function isWrappedString(value){
+  function isWrappedString(value) {
     return typeof value === 'function' && value.KOLIBRI_I18N_WRAPPED_STRING === undefined;
   }
 
-
   export default {
     name: 'DragSortWidget',
     props: {
       moveUpText: {
         type: Function,
         required: true,
-        validator: (value)=>{
-          if(isWrappedString(value)){
+        validator: value => {
+          if (isWrappedString(value)) {
             return true;
-          }else{
+          } else {
             throw new Error('moveUpText must be a function that returns a wrapped string');
           }
-        }
+        },
       },
       moveDownText: {
         type: Function,
         required: true,
-        validator: (value)=>{
-          if(isWrappedString(value)){
+        validator: value => {
+          if (isWrappedString(value)) {
             return true;
-          }else{
+          } else {
             throw new Error('moveDownText must be a function that returns a wrapped string');
           }
-        }
+        },
       },
       isFirst: {
         type: Boolean,
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index 7296c9bd1fe..61efeadb55c 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -16,21 +16,21 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     context: 'Label to rearrange channel order. Not seen on UI.',
   },
 
-  upLabel:{
+  upLabel: {
     message: 'Up',
     context: 'Label to move an item up in a list',
   },
 
-  downLabel:{
-    message:'Down',
-    context:'Label to move an item down in a list',
+  downLabel: {
+    message: 'Down',
+    context: 'Label to move an item down in a list',
   },
 
   moveResourceUpButtonDescription: {
     message: 'Move this resource one position up in this lesson',
     context: 'Refers to changing the order of resources in a lesson.',
   },
-  
+
   moveResourceDownButtonDescription: {
     message: 'Move this resource one position down in this lesson',
     context: 'Refers to changing the order of resources in a lesson.',