[WEB-2192] fix: order of state groups in space app (#5317)

* chore: added sequence in the states endpoint

* fix state grouping order in space app

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

apiserver/plane/space/views/state.py

@@ -27,14 +27,11 @@ class ProjectStatesEndpoint(BaseAPIView):
                 status=status.HTTP_404_NOT_FOUND,
             )
 
-        states = (
-            State.objects.filter(
-                ~Q(name="Triage"),
-                workspace__slug=deploy_board.workspace.slug,
-                project_id=deploy_board.project_id,
-            )
-            .values("name", "group", "color", "id")
-        )
+        states = State.objects.filter(
+            ~Q(name="Triage"),
+            workspace__slug=deploy_board.workspace.slug,
+            project_id=deploy_board.project_id,
+        ).values("name", "group", "color", "id", "sequence")
 
         return Response(
             states,

space/core/components/issues/issue-layouts/utils.tsx

@@ -109,10 +109,10 @@ const getModuleColumns = (moduleStore: IIssueModuleStore): IGroupByColumn[] | un
 };
 
 const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefined => {
-  const { states } = projectState;
-  if (!states) return;
+  const { sortedStates } = projectState;
+  if (!sortedStates) return;
 
-  return states.map((state) => ({
+  return sortedStates.map((state) => ({
     id: state.id,
     name: state.name,
     icon: (

space/core/store/state.store.ts

@@ -1,11 +1,15 @@
-import { action, makeObservable, observable, runInAction } from "mobx";
+import clone from "lodash/clone";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { IState } from "@plane/types";
+import { sortStates } from "@/helpers/state.helper";
 import { StateService } from "@/services/state.service";
 import { CoreRootStore } from "./root.store";
 
 export interface IStateStore {
   // observables
   states: IState[] | undefined;
+  //computed
+  sortedStates: IState[] | undefined;
   // computed actions
   getStateById: (stateId: string | undefined) => IState | undefined;
   // fetch actions
@@ -21,6 +25,8 @@ export class StateStore implements IStateStore {
     makeObservable(this, {
       // observables
       states: observable,
+      // computed
+      sortedStates: computed,
       // fetch action
       fetchStates: action,
     });
@@ -28,6 +34,11 @@ export class StateStore implements IStateStore {
     this.rootStore = _rootStore;
   }
 
+  get sortedStates() {
+    if (!this.states) return;
+    return sortStates(clone(this.states));
+  }
+
   getStateById = (stateId: string | undefined) => this.states?.find((state) => state.id === stateId);
 
   fetchStates = async (anchor: string) => {

space/helpers/state.helper.ts

@@ -0,0 +1,13 @@
+import { IState } from "@plane/types";
+import { STATE_GROUPS } from "@/constants/state";
+
+export const sortStates = (states: IState[]) => {
+  if (!states || states.length === 0) return;
+
+  return states.sort((stateA, stateB) => {
+    if (stateA.group === stateB.group) {
+      return stateA.sequence - stateB.sequence;
+    }
+    return Object.keys(STATE_GROUPS).indexOf(stateA.group) - Object.keys(STATE_GROUPS).indexOf(stateB.group);
+  });
+};