From bcb66cdcc086d74378835741efac7ffeb768700f Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Mon, 18 May 2026 18:09:53 +0530 Subject: [PATCH] chore: Support creating articles from category view (#14406) # Pull Request Template ## Description This PR adds support for creating articles directly from the category view. Previously, articles could only be created from the main articles page. With this change, users can now create a new article while browsing a specific category, making the workflow faster and more convenient. Fixes https://linear.app/chatwoot/issue/CW-7050/create-an-article-when-inside-a-category ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Screencast https://github.com/user-attachments/assets/e5a72a85-676e-4747-948a-6b1a19d2089f ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --- .../ArticleEditorControls.vue | 22 +++------- .../Pages/ArticlePage/ArticlesPage.vue | 5 ++- .../CategoryPage/CategoryHeaderControls.vue | 10 ++++- .../PortalSwitcher/PortalSwitcher.vue | 1 + .../dashboard/helpcenter/helpcenter.routes.js | 8 ++++ .../pages/PortalsArticlesNewPage.vue | 43 ++++++++++++++++--- 6 files changed, 64 insertions(+), 25 deletions(-) diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue index 84ac1ce3846..26c02874d87 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue @@ -84,28 +84,20 @@ const findCategoryFromSlug = slug => { return categories.value?.find(category => category.slug === slug); }; -const assignCategoryFromSlug = slug => { - const categoryFromSlug = findCategoryFromSlug(slug); - if (categoryFromSlug) { - selectedCategoryId.value = categoryFromSlug.id; - return categoryFromSlug; - } - return null; -}; - const selectedCategory = computed(() => { if (isNewArticle.value) { + if (selectedCategoryId.value) { + return ( + categories.value?.find(c => c.id === selectedCategoryId.value) || null + ); + } if (categorySlugFromRoute.value) { - const categoryFromSlug = assignCategoryFromSlug( + const categoryFromSlug = findCategoryFromSlug( categorySlugFromRoute.value ); if (categoryFromSlug) return categoryFromSlug; } - return selectedCategoryId.value - ? categories.value.find( - category => category.id === selectedCategoryId.value - ) - : categories.value[0] || null; + return categories.value?.[0] || null; } return categories.value.find( category => category.id === props.article?.category?.id diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue index 0b7d86219bc..fde2158246f 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue @@ -168,7 +168,9 @@ const handlePageChange = page => emit('pageChange', page); const navigateToNewArticlePage = () => { const { categorySlug, locale } = route.params; router.push({ - name: 'portals_articles_new', + name: props.isCategoryArticles + ? 'portals_categories_articles_new' + : 'portals_articles_new', params: { categorySlug, locale }, }); }; @@ -274,6 +276,7 @@ watch( :categories="categories" :allowed-locales="allowedLocales" :has-selected-category="isCategoryArticles" + @new-article="navigateToNewArticlePage" /> diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue index 3424e08bcb1..f25ac802732 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue @@ -25,7 +25,7 @@ const props = defineProps({ }, }); -const emit = defineEmits(['localeChange']); +const emit = defineEmits(['localeChange', 'newArticle']); const route = useRoute(); const router = useRouter(); @@ -179,7 +179,7 @@ const handleBreadcrumbClick = () => { /> -
+
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue index bfc173d1633..b4d1fe26387 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue @@ -19,6 +19,7 @@ const DEFAULT_ROUTE = 'portals_articles_index'; const CATEGORY_ROUTE = 'portals_categories_index'; const CATEGORY_SUB_ROUTES = [ 'portals_categories_articles_index', + 'portals_categories_articles_new', 'portals_categories_articles_edit', ]; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js index fba4ba666e6..8face00d000 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js @@ -62,6 +62,14 @@ const portalRoutes = [ meta, component: PortalsArticlesIndexPage, }, + { + path: getPortalRoute( + ':portalSlug/:locale/categories/:categorySlug/articles/new' + ), + name: 'portals_categories_articles_new', + meta, + component: PortalsArticlesNewPage, + }, { path: getPortalRoute( ':portalSlug/:locale/categories/:categorySlug/articles/:articleSlug' diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue index baee8a2bb1b..f63f16fde0f 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue @@ -21,7 +21,18 @@ const selectedCategoryId = ref(null); const currentUserId = useMapGetter('getCurrentUserID'); const categories = useMapGetter('categories/allCategories'); -const categoryId = computed(() => categories.value[0]?.id || null); +const categoryId = computed(() => { + const { categorySlug } = route.params; + if (categorySlug) { + const matched = categories.value?.find(c => c.slug === categorySlug); + if (matched) return matched.id; + } + return categories.value[0]?.id || null; +}); + +const isCategoryArticles = computed( + () => route.name === 'portals_categories_articles_new' +); const article = ref({}); const isUpdating = ref(false); @@ -44,23 +55,34 @@ const createNewArticle = async ({ title, content }) => { isUpdating.value = true; try { const { locale } = route.params; + const resolvedCategoryId = selectedCategoryId.value || categoryId.value; const articleId = await store.dispatch('articles/create', { portalSlug, content: article.value.content, title: article.value.title, locale: locale, authorId: selectedAuthorId.value || currentUserId.value, - categoryId: selectedCategoryId.value || categoryId.value, + categoryId: resolvedCategoryId, }); useTrack(PORTALS_EVENTS.CREATE_ARTICLE, { locale }); + const resolvedSlug = categories.value?.find( + c => c.id === resolvedCategoryId + )?.slug; + const startedFromCategorySlug = route.params.categorySlug; + router.replace({ - name: 'portals_articles_edit', + name: isCategoryArticles.value + ? 'portals_categories_articles_edit' + : 'portals_articles_edit', params: { articleSlug: articleId, portalSlug, locale, + ...(startedFromCategorySlug + ? { categorySlug: resolvedSlug || startedFromCategorySlug } + : {}), }, }); } catch (error) { @@ -74,10 +96,17 @@ const createNewArticle = async ({ title, content }) => { const goBackToArticles = () => { const { tab, categorySlug, locale } = route.params; - router.push({ - name: 'portals_articles_index', - params: { tab, categorySlug, locale }, - }); + if (isCategoryArticles.value) { + router.push({ + name: 'portals_categories_articles_index', + params: { categorySlug, locale }, + }); + } else { + router.push({ + name: 'portals_articles_index', + params: { tab, categorySlug, locale }, + }); + } };