From 91142659ca31c55667d57da8d984931b7b2fdc1a Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Wed, 7 Aug 2024 13:49:45 +0530
Subject: [PATCH] [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                | 13 +++++--------
 .../core/components/issues/issue-layouts/utils.tsx  |  6 +++---
 space/core/store/state.store.ts                     | 13 ++++++++++++-
 space/helpers/state.helper.ts                       | 13 +++++++++++++
 4 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 space/helpers/state.helper.ts

diff --git a/apiserver/plane/space/views/state.py b/apiserver/plane/space/views/state.py
index 853bf022c..7ffcef5b9 100644
--- a/apiserver/plane/space/views/state.py
+++ b/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,
diff --git a/space/core/components/issues/issue-layouts/utils.tsx b/space/core/components/issues/issue-layouts/utils.tsx
index edb67b4f7..992f6367c 100644
--- a/space/core/components/issues/issue-layouts/utils.tsx
+++ b/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: (
diff --git a/space/core/store/state.store.ts b/space/core/store/state.store.ts
index 36a0ceaf7..aff22a22a 100644
--- a/space/core/store/state.store.ts
+++ b/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) => {
diff --git a/space/helpers/state.helper.ts b/space/helpers/state.helper.ts
new file mode 100644
index 000000000..81bffdef9
--- /dev/null
+++ b/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);
+  });
+};