From 7574c061c4c1bc7e2dbb5179907d893edeb6f784 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Mon, 9 Dec 2024 22:11:30 +0300
Subject: [PATCH] UI fixes

---
 .../components/RecommendedResourceCard.vue    |  7 +++--
 .../SearchOrBrowseWindow.vue                  | 31 +++++++++++++++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue b/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
index 3135ef74cc..2f3e9d968e 100644
--- a/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
+++ b/contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue
@@ -2,7 +2,7 @@
 
   <KCard
     :title="node.title"
-    :headingLevel="2"
+    :headingLevel="1"
     thumbnailScaleType="contain"
     thumbnailDisplay="small"
     thumbnailAlign="right"
@@ -15,7 +15,7 @@
         :inputValue="isSelected(node)"
         @input="toggleSelected(node)"
       >
-        <span class="visuallyhidden">Select '{{ node.title }}'</span>
+        <span class="visuallyhidden">{{ $tr('selectCard', { title: node.title }) }}</span>
       </Checkbox>
     </template>
     <template #aboveTitle>
@@ -94,6 +94,9 @@
         this.$emit('preview', this.node);
       },
     },
+    $trs: {
+      selectCard: 'Select { title }',
+    },
   };
 
 </script>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index 931ae5f4fe..f983a4746b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -72,7 +72,7 @@
             ref="contentTreeList"
             :topicNode="topicNode"
             :selected.sync="selected"
-            :topicId="$route.params.nodeId"
+            :topicId="topicId"
             @preview="preview($event)"
             @change_selected="handleChangeSelected"
             @copy_to_clipboard="handleCopyToClipboard"
@@ -94,7 +94,7 @@
           :layout4="{ span: 4 }"
         >
           <h3 class="pb-2 pt-0 px-2">
-            {{ resourcesMightBeRelevantTitle$({ topic: 'Basic Addition' }) }}
+            {{ recommendationsSectionTitle }}
           </h3>
           <div class="my-3 px-2">
             <ActionLink
@@ -205,6 +205,7 @@
         resourcesMightBeRelevantTitle$,
         problemShowingResourcesMessage$,
         aboutRecommendationsDescription$,
+        resourcesInChannelMightBeRelevantTitle$,
         aboutRecommendationsFeedbackDescription$,
       } = searchRecommendationsStrings;
 
@@ -224,6 +225,7 @@
         resourcesMightBeRelevantTitle$,
         problemShowingResourcesMessage$,
         aboutRecommendationsDescription$,
+        resourcesInChannelMightBeRelevantTitle$,
         aboutRecommendationsFeedbackDescription$,
         layoutFitsTwoColumns,
       };
@@ -235,6 +237,7 @@
         copyNode: null,
         languageFromChannelList: null,
         showSavedSearches: false,
+        importDestination: '',
         showAboutRecommendations: false,
         recommendations: [],
         otherRecommendations: [],
@@ -253,6 +256,7 @@
     computed: {
       ...mapGetters('importFromChannels', ['savedSearchesExist']),
       ...mapGetters(['isAIFeatureEnabled']),
+      ...mapGetters('contentNode', ['getContentNodeAncestors']),
       ...mapState('importFromChannels', ['selected']),
       ...mapState('currentChannel', ['currentChannelId']),
       isBrowsing() {
@@ -317,6 +321,24 @@
           width: this.isAIFeatureEnabled ? '1200px' : '800px',
         };
       },
+      firstAncestor() {
+        const ancestors = this.getContentNodeAncestors(this.topicId, true);
+        return ancestors?.[0] ?? null;
+      },
+      topicId() {
+        return this.$route.params.nodeId;
+      },
+      recommendationsSectionTitle() {
+        if (this.firstAncestor) {
+          return this.resourcesInChannelMightBeRelevantTitle$({
+            channelName: this.firstAncestor?.title,
+            topic: this.importDestination,
+          });
+        }
+        return this.resourcesMightBeRelevantTitle$({
+          topic: this.importDestination,
+        });
+      },
     },
     beforeRouteEnter(to, from, next) {
       next(vm => {
@@ -339,11 +361,14 @@
     mounted() {
       this.searchTerm = this.$route.params.searchTerm || '';
       this.loadRecommendations();
+      this.loadContentNode(this.$route.params.destNodeId).then(node => {
+        this.importDestination = node?.title || '';
+      });
     },
     methods: {
       ...mapActions('channel', ['loadChannel']),
       ...mapActions('clipboard', ['copy']),
-      ...mapActions('contentNode', ['loadPublicContentNode']),
+      ...mapActions('contentNode', ['loadContentNode', 'loadPublicContentNode']),
       ...mapActions('importFromChannels', ['fetchResourceSearchResults']),
       ...mapMutations('importFromChannels', {
         selectNodes: 'SELECT_NODES',