Move strings to searchAndFilterStrings and fix styles

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

@@ -89,7 +89,10 @@ export default function useResourceSelection() {
   const { displayingSearchResults } = useSearchObject;
 
   const fetchTree = async (params = {}) => {
-    topic.value = await ContentNodeResource.fetchTree(params);
+    const newTopic = await ContentNodeResource.fetchTree(params);
+    if (topic.value?.id !== newTopic.id) {
+      topic.value = newTopic;
+    }
     return topic.value.children;
   };
 

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

@@ -159,7 +159,7 @@
           // When we are searching in the topic tree a topic that was
           // found in the search results, show the side panel in immersive mode
           this.$route.name === PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE &&
-          this.$route.query.searchResultTopicId
+          !!this.$route.query.searchResultTopicId
         );
       },
     },

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

@@ -5,7 +5,7 @@
       v-if="topic"
       class="side-panel-subtitle"
     >
-      {{ $tr('searchInTitle', { folder: topic.title }) }}
+      {{ searchInFolder$({ folder: topic.title }) }}
     </div>
     <SearchFiltersPanel
       v-model="searchTermsComputed"
@@ -26,6 +26,7 @@
 
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import { PageNames } from '../../../../../../constants';
 
   /**
@@ -55,9 +56,12 @@
         });
       });
 
+      const { searchInFolder$ } = searchAndFilterStrings;
+
       return {
         // eslint-disable-next-line vue/no-unused-properties
         prevRoute,
+        searchInFolder$,
       };
     },
     props: {
@@ -102,12 +106,6 @@
         });
       },
     },
-    $trs: {
-      searchInTitle: {
-        message: "Search in '{folder}'",
-        context: 'Title for search resources in folder',
-      },
-    },
   };
 
 </script>

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

@@ -46,9 +46,10 @@
 
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import SearchChips from 'kolibri-common/components/SearchChips';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
-  import { coachStrings } from '../../../../../common/commonCoachStrings';
   import { PageNames } from '../../../../../../constants';
+  import { coachStrings } from '../../../../../common/commonCoachStrings';
 
   /**
    * @typedef {import('../../../../../../composables/useFetch').FetchObject} FetchObject
@@ -140,19 +141,22 @@
     },
     computed: {
       resultsCountMessage() {
+        const {
+          resultsCount$,
+          overResultsCount$,
+          resultsCountInFolder$,
+          overResultsCountInFolder$,
+        } = searchAndFilterStrings;
+
         const count = this.contentList.length;
         if (this.topic) {
           const params = {
             count,
             folder: this.topic.title,
           };
-          return this.hasMore
-            ? this.$tr('overResultsCountInFolder', params)
-            : this.$tr('resultsCountInFolder', params);
+          return this.hasMore ? overResultsCountInFolder$(params) : resultsCountInFolder$(params);
         }
-        return this.hasMore
-          ? this.$tr('overResultsCount', { count })
-          : this.$tr('resultsCount', { count });
+        return this.hasMore ? overResultsCount$({ count }) : resultsCount$({ count });
       },
     },
     methods: {
@@ -184,25 +188,6 @@
         };
       },
     },
-    $trs: {
-      resultsCount: {
-        message: '{count, number} {count, plural, one {result} other {results}}',
-        context: 'Number of search results when we have an exact count',
-      },
-      resultsCountInFolder: {
-        message: "{count, number} {count, plural, one {result} other {results}} in '{folder}'",
-        context: 'Number of search results when we have an exact count in a specific folder',
-      },
-      overResultsCount: {
-        message: 'Over {count, number} results',
-        context: 'Number of search results when we know there are more than the count',
-      },
-      overResultsCountInFolder: {
-        message: "Over {count, number} results in '{folder}'",
-        context:
-          'Number of search results when we know there are more than the count in a specific folder',
-      },
-    },
   };
 
 </script>

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

@@ -40,7 +40,7 @@
       :selectionRules="selectionRules"
       :selectedResources="selectedResources"
       :channelsLink="breadcrumbChannelsLink"
-      :hideBreadcrumbs="computedTopic.ancestors.length === 0"
+      :hideBreadcrumbs="hideBreadcrumbs"
       @selectResources="$emit('selectResources', $event)"
       @deselectResources="$emit('deselectResources', $event)"
     />
@@ -53,6 +53,7 @@
 
   import { computed, getCurrentInstance } from 'vue';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
   import { coachStrings } from '../../../../../common/commonCoachStrings';
   import { PageNames } from '../../../../../../constants';
@@ -69,14 +70,13 @@
     setup(props) {
       const { selectFromChannels$, searchLabel$ } = coreStrings;
       const { manageLessonResourcesTitle$ } = coachStrings;
+      const { backToSearchResultsLabel$ } = searchAndFilterStrings;
       const instance = getCurrentInstance();
       const routeQuery = instance.proxy.$route.query;
       const isTopicFromSearchResult = computed(() => !!routeQuery.searchResultTopicId);
 
       props.setTitle(
-        isTopicFromSearchResult.value
-          ? instance.proxy.$tr('backToSearchResultsLabel')
-          : manageLessonResourcesTitle$(),
+        isTopicFromSearchResult.value ? backToSearchResultsLabel$() : manageLessonResourcesTitle$(),
       );
 
       props.setGoBack(() => {
@@ -171,6 +171,9 @@
           name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
         };
       },
+      hideBreadcrumbs() {
+        return this.isTopicFromSearchResult && this.computedTopic.ancestors.length === 0;
+      },
     },
     beforeRouteEnter(to, _, next) {
       const { topicId } = to.query;
@@ -192,12 +195,6 @@
         });
       },
     },
-    $trs: {
-      backToSearchResultsLabel: {
-        message: 'Back to search results',
-        context: 'Button to go back to search results',
-      },
-    },
   };
 
 </script>

packages/kolibri-common/components/SidePanelModal/index.vue

@@ -238,6 +238,7 @@
     height: 100vh;
 
     .side-panel-header {
+      z-index: 1;
       width: 100%;
       min-height: 60px;
       padding: 0 1em;

packages/kolibri-common/strings/searchAndFilterStrings.js

@@ -44,4 +44,29 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
       '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
     context: 'Indicates the number of resources selected',
   },
+  searchInFolder: {
+    message: "Search in '{folder}'",
+    context: 'Title for search resources in folder',
+  },
+  resultsCount: {
+    message: '{count, number} {count, plural, one {result} other {results}}',
+    context: 'Number of search results when we have an exact count',
+  },
+  resultsCountInFolder: {
+    message: "{count, number} {count, plural, one {result} other {results}} in '{folder}'",
+    context: 'Number of search results when we have an exact count in a specific folder',
+  },
+  overResultsCount: {
+    message: 'Over {count, number} results',
+    context: 'Number of search results when we know there are more than the count',
+  },
+  overResultsCountInFolder: {
+    message: "Over {count, number} results in '{folder}'",
+    context:
+      'Number of search results when we know there are more than the count in a specific folder',
+  },
+  backToSearchResultsLabel: {
+    message: 'Back to search results',
+    context: 'Button to go back to search results',
+  },
 });