Merge branch 'develop' into fix/CW-6859

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue

@@ -23,6 +23,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  refreshTick: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const emit = defineEmits([
@@ -41,14 +45,27 @@ const isNewArticle = computed(() => !props.article?.id);
 const localTitle = ref(props.article?.title ?? '');
 const localContent = ref(props.article?.content ?? '');
 
+const syncLocalState = () => {
+  localTitle.value = props.article?.title ?? '';
+  localContent.value = props.article?.content ?? '';
+};
+
 // Sync local state when navigating to a different article or on initial fetch
 watch(
   () => props.article?.id,
   newId => {
-    if (newId) {
+    if (newId) syncLocalState();
-      localTitle.value = props.article?.title ?? '';
+  }
-      localContent.value = props.article?.content ?? '';
+);
-    }
+
+// Parent bumps refreshTick after re-fetching on tab visibility. Skip
+// the sync while a save is in flight so we don't overwrite edits the
+// user just made.
+watch(
+  () => props.refreshTick,
+  () => {
+    if (props.isUpdating) return;
+    syncLocalState();
   }
 );
 

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
+import { useDocumentVisibility } from '@vueuse/core';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -13,6 +14,7 @@ const route = useRoute();
 const router = useRouter();
 const store = useStore();
 const { t } = useI18n();
+const visibility = useDocumentVisibility();
 
 const { articleSlug, portalSlug } = route.params;
 
@@ -26,6 +28,7 @@ const portal = computed(() => portalBySlug.value(portalSlug));
 
 const isUpdating = ref(false);
 const isSaved = ref(false);
+const refreshTick = ref(0);
 
 const articleLink = computed(() => {
   const { slug: categorySlug, locale: categoryLocale } = article.value.category;
@@ -84,11 +87,12 @@ const goBackToArticles = () => {
   }
 };
 
-const fetchArticleDetails = () => {
+const fetchArticleDetails = async () => {
-  store.dispatch('articles/show', {
+  await store.dispatch('articles/show', {
     id: articleSlug,
     portalSlug,
   });
+  refreshTick.value += 1;
 };
 
 const previewArticle = () => {
@@ -98,6 +102,11 @@ const previewArticle = () => {
   });
 };
 
+// Re-fetch article when user returns to this tab
+watch(visibility, state => {
+  if (state === 'visible') fetchArticleDetails();
+});
+
 onMounted(fetchArticleDetails);
 </script>
 
@@ -106,6 +115,7 @@ onMounted(fetchArticleDetails);
     :article="article"
     :is-updating="isUpdating"
     :is-saved="isSaved"
+    :refresh-tick="refreshTick"
     @save-article="saveArticle"
     @preview-article="previewArticle"
     @go-back="goBackToArticles"