[WED-634] fix: profile issues not rendering correctly with GroupBy display filter (#3886)

* fix: Handled issue render in the display filters groupBy stateGroup and labels

* chore: Optimized state_group filter and typo

* Fix: removed workspaceLevel boolean and handled the states from stateMap

web/components/issues/issue-layouts/list/default.tsx

@@ -77,6 +77,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     label,
     projectState,
     member,
+    true,
     true
   );
 
@@ -97,6 +98,10 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
         preloadedData = { ...preloadedData, label_ids: [value] };
       } else if (groupByKey === "assignees" && value != "None") {
         preloadedData = { ...preloadedData, assignee_ids: [value] };
+      } else if (groupByKey === "cycle" && value != "None") {
+        preloadedData = { ...preloadedData, cycle_id: value };
+      } else if (groupByKey === "module" && value != "None") {
+        preloadedData = { ...preloadedData, module_ids: [value] };
       } else if (groupByKey === "created_by") {
         preloadedData = { ...preloadedData };
       } else {

web/components/issues/issue-layouts/utils.tsx

@@ -24,7 +24,8 @@ export const getGroupByColumns = (
   label: ILabelStore,
   projectState: IStateStore,
   member: IMemberRootStore,
-  includeNone?: boolean
+  includeNone?: boolean,
+  isWorkspaceLevel?: boolean
 ): IGroupByColumn[] | undefined => {
   switch (groupBy) {
     case "project":
@@ -40,7 +41,7 @@ export const getGroupByColumns = (
     case "priority":
       return getPriorityColumns();
     case "labels":
-      return getLabelsColumns(label) as any;
+      return getLabelsColumns(label, isWorkspaceLevel) as any;
     case "assignees":
       return getAssigneeColumns(member) as any;
     case "created_by":
@@ -177,12 +178,13 @@ const getPriorityColumns = () => {
   }));
 };
 
-const getLabelsColumns = (label: ILabelStore) => {
-  const { projectLabels } = label;
+const getLabelsColumns = (label: ILabelStore, isWorkspaceLevel: boolean = false) => {
+  const { workspaceLabels, projectLabels } = label;
 
-  if (!projectLabels) return;
-
-  const labels = [...projectLabels, { id: "None", name: "None", color: "#666" }];
+  const labels = [
+    ...(isWorkspaceLevel ? workspaceLabels || [] : projectLabels || []),
+    { id: "None", name: "None", color: "#666" },
+  ];
 
   return labels.map((label) => ({
     id: label.id,

web/store/issue/helpers/issue-helper.store.ts

@@ -76,8 +76,8 @@ export class IssueHelperStore implements TIssueHelperStore {
       let groupArray = [];
 
       if (groupBy === "state_detail.group") {
-        const state_group =
-          this.rootStore?.stateDetails?.find((_state) => _state.id === _issue?.state_id)?.group || "None";
+        // if groupBy state_detail.group is coming from the project level the we are using stateDetails from root store else we are looping through the stateMap
+        const state_group = (this.rootStore?.stateMap || {})?.[_issue?.state_id]?.group || "None";
         groupArray = [state_group];
       } else {
         const groupValue = get(_issue, ISSUE_FILTER_DEFAULT_DATA[groupBy]);
@@ -117,8 +117,8 @@ export class IssueHelperStore implements TIssueHelperStore {
       let subGroupArray = [];
       let groupArray = [];
       if (subGroupBy === "state_detail.group" || groupBy === "state_detail.group") {
-        const state_group =
-          this.rootStore?.stateDetails?.find((_state) => _state.id === _issue?.state_id)?.group || "None";
+        const state_group = (this.rootStore?.stateMap || {})?.[_issue?.state_id]?.group || "None";
+
         subGroupArray = [state_group];
         groupArray = [state_group];
       } else {
@@ -233,10 +233,10 @@ export class IssueHelperStore implements TIssueHelperStore {
   }
 
   /**
-   * This Method is mainly used to filter out empty values in the begining
+   * This Method is mainly used to filter out empty values in the beginning
    * @param key key of the value that is to be checked if empty
    * @param object any object in which the key's value is to be checked
-   * @returns 1 if emoty, 0 if not empty
+   * @returns 1 if empty, 0 if not empty
    */
   getSortOrderToFilterEmptyValues(key: string, object: any) {
     const value = object?.[key];

web/store/issue/root.store.ts

@@ -35,6 +35,7 @@ export interface IIssueRootStore {
   userId: string | undefined; // user profile detail Id
   stateMap: Record<string, IState> | undefined;
   stateDetails: IState[] | undefined;
+  workspaceStateDetails: IState[] | undefined;
   labelMap: Record<string, IIssueLabel> | undefined;
   workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined;
   memberMap: Record<string, IUserLite> | undefined;
@@ -89,6 +90,7 @@ export class IssueRootStore implements IIssueRootStore {
   userId: string | undefined = undefined;
   stateMap: Record<string, IState> | undefined = undefined;
   stateDetails: IState[] | undefined = undefined;
+  workspaceStateDetails: IState[] | undefined = undefined;
   labelMap: Record<string, IIssueLabel> | undefined = undefined;
   workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined = undefined;
   memberMap: Record<string, IUserLite> | undefined = undefined;
@@ -142,6 +144,7 @@ export class IssueRootStore implements IIssueRootStore {
       globalViewId: observable.ref,
       stateMap: observable,
       stateDetails: observable,
+      workspaceStateDetails: observable,
       labelMap: observable,
       memberMap: observable,
       workSpaceMemberRolesMap: observable,
@@ -163,6 +166,7 @@ export class IssueRootStore implements IIssueRootStore {
       if (rootStore.app.router.userId) this.userId = rootStore.app.router.userId;
       if (!isEmpty(rootStore?.state?.stateMap)) this.stateMap = rootStore?.state?.stateMap;
       if (!isEmpty(rootStore?.state?.projectStates)) this.stateDetails = rootStore?.state?.projectStates;
+      if (!isEmpty(rootStore?.state?.workspaceStates)) this.workspaceStateDetails = rootStore?.state?.workspaceStates;
       if (!isEmpty(rootStore?.label?.labelMap)) this.labelMap = rootStore?.label?.labelMap;
       if (!isEmpty(rootStore?.memberRoot?.workspace?.workspaceMemberMap))
         this.workSpaceMemberRolesMap = rootStore?.memberRoot?.workspace?.memberMap || undefined;

web/store/state.store.ts

@@ -17,6 +17,7 @@ export interface IStateStore {
   // observables
   stateMap: Record<string, IState>;
   // computed
+  workspaceStates: IState[] | undefined;
   projectStates: IState[] | undefined;
   groupedProjectStates: Record<string, IState[]> | undefined;
   // computed actions
@@ -73,13 +74,22 @@ export class StateStore implements IStateStore {
     this.router = _rootStore.app.router;
   }
 
+  /**
+   * Returns the stateMap belongs to a specific workspace
+   */
+  get workspaceStates() {
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!workspaceSlug || !this.fetchedMap[workspaceSlug]) return;
+    return sortStates(Object.values(this.stateMap));
+  }
+
   /**
    * Returns the stateMap belongs to a specific project
    */
   get projectStates() {
     const projectId = this.router.projectId;
-    const worksapceSlug = this.router.workspaceSlug || "";
-    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
     return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   }
 
@@ -106,8 +116,8 @@ export class StateStore implements IStateStore {
    * @returns IState[]
    */
   getProjectStates = computedFn((projectId: string) => {
-    const worksapceSlug = this.router.workspaceSlug || "";
-    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
     return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   });