feat(help-center): enable drag-and-drop category reordering (#13706)

app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js

@@ -279,4 +279,63 @@ describe('#actions', () => {
       ).rejects.toThrow('Upload failed');
     });
   });
+
+  describe('#reorder', () => {
+    const state = {
+      articles: {
+        byId: {
+          1: { id: 1, title: 'Article 1', position: 10 },
+          2: { id: 2, title: 'Article 2', position: 20 },
+          3: { id: 3, title: 'Article 3', position: 30 },
+        },
+      },
+    };
+
+    it('commits SET_ARTICLE_POSITIONS and calls API when reorder is successful', async () => {
+      axios.post.mockResolvedValue({ data: {} });
+      const reorderedGroup = { 1: 1, 2: 2, 3: 3 };
+
+      await actions.reorder(
+        { commit, state },
+        {
+          portalSlug: 'test-portal',
+          categorySlug: 'test-category',
+          reorderedGroup,
+        }
+      );
+
+      expect(commit).toHaveBeenCalledWith(
+        types.default.SET_ARTICLE_POSITIONS,
+        reorderedGroup
+      );
+      expect(axios.post).toHaveBeenCalledWith(
+        expect.stringContaining('/portals/test-portal/articles/reorder'),
+        { positions_hash: reorderedGroup, category_slug: 'test-category' }
+      );
+    });
+
+    it('rolls back positions and throws when API call fails', async () => {
+      axios.post.mockRejectedValue({ message: 'Network error' });
+      const reorderedGroup = { 1: 1, 2: 2 };
+
+      await expect(
+        actions.reorder(
+          { commit, state },
+          {
+            portalSlug: 'test-portal',
+            reorderedGroup,
+          }
+        )
+      ).rejects.toEqual({ message: 'Network error' });
+
+      expect(commit).toHaveBeenCalledWith(
+        types.default.SET_ARTICLE_POSITIONS,
+        reorderedGroup
+      );
+      expect(commit).toHaveBeenCalledWith(types.default.SET_ARTICLE_POSITIONS, {
+        1: 10,
+        2: 20,
+      });
+    });
+  });
 });

app/javascript/dashboard/store/modules/helpCenterArticles/specs/getters.spec.js

@@ -41,4 +41,82 @@ describe('#getters', () => {
   it('isFetchingArticles', () => {
     expect(getters.isFetching(state)).toEqual(true);
   });
+
+  describe('allArticlesSortedByPosition', () => {
+    it('returns articles sorted by position in ascending order', () => {
+      const stateWithPositions = {
+        ...state,
+        articles: {
+          ...state.articles,
+          byId: {
+            1: { id: 1, title: 'Article 1', position: 3 },
+            2: { id: 2, title: 'Article 2', position: 1 },
+            3: { id: 3, title: 'Article 3', position: 2 },
+          },
+          allIds: [1, 2, 3],
+        },
+      };
+      const boundGetters = {
+        articleById: getters.articleById(stateWithPositions),
+      };
+
+      const result = getters.allArticlesSortedByPosition(
+        stateWithPositions,
+        boundGetters
+      );
+
+      expect(result.map(a => a.id)).toEqual([2, 3, 1]);
+      expect(result.map(a => a.position)).toEqual([1, 2, 3]);
+    });
+
+    it('places articles with null position at the end', () => {
+      const stateWithNullPositions = {
+        ...state,
+        articles: {
+          ...state.articles,
+          byId: {
+            1: { id: 1, title: 'Article 1', position: 1 },
+            2: { id: 2, title: 'Article 2', position: null },
+            3: { id: 3, title: 'Article 3', position: 2 },
+          },
+          allIds: [1, 2, 3],
+        },
+      };
+      const boundGetters = {
+        articleById: getters.articleById(stateWithNullPositions),
+      };
+
+      const result = getters.allArticlesSortedByPosition(
+        stateWithNullPositions,
+        boundGetters
+      );
+
+      expect(result.map(a => a.id)).toEqual([1, 3, 2]);
+    });
+
+    it('handles articles with undefined position', () => {
+      const stateWithUndefinedPositions = {
+        ...state,
+        articles: {
+          ...state.articles,
+          byId: {
+            1: { id: 1, title: 'Article 1', position: 1 },
+            2: { id: 2, title: 'Article 2' },
+            3: { id: 3, title: 'Article 3', position: 2 },
+          },
+          allIds: [1, 2, 3],
+        },
+      };
+      const boundGetters = {
+        articleById: getters.articleById(stateWithUndefinedPositions),
+      };
+
+      const result = getters.allArticlesSortedByPosition(
+        stateWithUndefinedPositions,
+        boundGetters
+      );
+
+      expect(result.map(a => a.id)).toEqual([1, 3, 2]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js

@@ -5,7 +5,7 @@ import types from '../../../mutation-types';
 describe('#mutations', () => {
   let state = {};
   beforeEach(() => {
-    state = article;
+    state = JSON.parse(JSON.stringify(article));
   });
 
   describe('#SET_UI_FLAG', () => {
@@ -93,9 +93,9 @@ describe('#mutations', () => {
       mutations[types.ADD_ARTICLE_ID](state, 3);
       expect(state.articles.allIds).toEqual([1, 2, 3]);
     });
-    it('Does not invalid article with empty data passed', () => {
-      mutations[types.ADD_ARTICLE_ID](state, {});
-      expect(state).toEqual(article);
+    it('does not add duplicate article id to state', () => {
+      mutations[types.ADD_ARTICLE_ID](state, 1);
+      expect(state.articles.allIds).toEqual([1, 2]);
     });
   });
 
@@ -154,4 +154,53 @@ describe('#mutations', () => {
       });
     });
   });
+
+  describe('#SET_ARTICLE_POSITIONS', () => {
+    it('updates positions for articles in the store', () => {
+      const positionsHash = { 1: 1, 2: 2 };
+      mutations[types.SET_ARTICLE_POSITIONS](state, positionsHash);
+
+      expect(state.articles.byId[1].position).toEqual(1);
+      expect(state.articles.byId[2].position).toEqual(2);
+    });
+
+    it('does not update articles that are not in the store', () => {
+      const positionsHash = { 999: 5 };
+      mutations[types.SET_ARTICLE_POSITIONS](state, positionsHash);
+
+      expect(state.articles.byId[999]).toBeUndefined();
+    });
+
+    it('preserves other article properties when updating position', () => {
+      const originalTitle = state.articles.byId[1].title;
+      const positionsHash = { 1: 3 };
+      mutations[types.SET_ARTICLE_POSITIONS](state, positionsHash);
+
+      expect(state.articles.byId[1].position).toEqual(3);
+      expect(state.articles.byId[1].title).toEqual(originalTitle);
+    });
+
+    it('re-sorts allIds by position after update', () => {
+      state.articles.byId[1].position = 1;
+      state.articles.byId[2].position = 2;
+      state.articles.allIds = [1, 2];
+
+      mutations[types.SET_ARTICLE_POSITIONS](state, { 1: 3, 2: 1 });
+
+      expect(state.articles.allIds).toEqual([2, 1]);
+    });
+
+    it('UPDATE_ARTICLE preserves reordered position after SET_ARTICLE_POSITIONS', () => {
+      mutations[types.SET_ARTICLE_POSITIONS](state, { 2: 1 });
+      expect(state.articles.byId[2].position).toEqual(1);
+
+      mutations[types.UPDATE_ARTICLE](state, {
+        id: 2,
+        title: 'Updated Title',
+        status: 'published',
+      });
+      expect(state.articles.byId[2].position).toEqual(1);
+      expect(state.articles.byId[2].title).toEqual('Updated Title');
+    });
+  });
 });