refactor issue dropdown logic to help work properly with issues on global level

web/components/core/activity.tsx

@@ -72,9 +72,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 
 const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) => {
   // store hooks
-  const {
+  const { workspaceLabels, fetchWorkspaceLabels } = useLabel();
-    workspace: { workspaceLabels, fetchWorkspaceLabels },
-  } = useLabel();
 
   useEffect(() => {
     if (!workspaceLabels) fetchWorkspaceLabels(workspaceSlug);

web/components/dropdowns/estimate.tsx

@@ -158,17 +158,12 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
-  // fetch cycles of the project if not already present in the store
+  const selectedEstimate = value !== null ? getEstimatePointValue(value, projectId) : null;
-  useEffect(() => {
-    if (!workspaceSlug) return;
-
-    if (!activeEstimate) fetchProjectEstimates(workspaceSlug, projectId);
-  }, [activeEstimate, fetchProjectEstimates, projectId, workspaceSlug]);
-
-  const selectedEstimate = value !== null ? getEstimatePointValue(value) : null;
 
   const openDropdown = () => {
     setIsOpen(true);
+
+    if (!activeEstimate && workspaceSlug) fetchProjectEstimates(workspaceSlug, projectId);
     if (referenceElement) referenceElement.focus();
   };
   const closeDropdown = () => setIsOpen(false);

web/components/dropdowns/member/project-member.tsx

@@ -93,14 +93,10 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
   };
   if (multiple) comboboxProps.multiple = true;
 
-  useEffect(() => {
-    if (!workspaceSlug) return;
-
-    if (!projectMemberIds) fetchProjectMembers(workspaceSlug, projectId);
-  }, [fetchProjectMembers, projectId, projectMemberIds, workspaceSlug]);
-
   const openDropdown = () => {
     setIsOpen(true);
+
+    if (!projectMemberIds && workspaceSlug) fetchProjectMembers(workspaceSlug, projectId);
     if (referenceElement) referenceElement.focus();
   };
   const closeDropdown = () => setIsOpen(false);

web/components/dropdowns/state.tsx

@@ -142,17 +142,12 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
-  // fetch states of the project if not already present in the store
-  useEffect(() => {
-    if (!workspaceSlug) return;
-
-    if (!statesList) fetchProjectStates(workspaceSlug, projectId);
-  }, [fetchProjectStates, projectId, statesList, workspaceSlug]);
 
   const selectedState = getStateById(value);
 
   const openDropdown = () => {
     setIsOpen(true);
+    if (!statesList && workspaceSlug) fetchProjectStates(workspaceSlug, projectId);
     if (referenceElement) referenceElement.focus();
   };
   const closeDropdown = () => setIsOpen(false);

web/components/headers/cycle-issues.tsx

@@ -75,9 +75,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   } = useUser();
   const { currentProjectDetails } = useProject();
   const { projectStates } = useProjectState();
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const {
     project: { projectMemberIds },
   } = useMember();

web/components/headers/global-issues.tsx

@@ -45,9 +45,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  const {
+  const { workspaceLabels } = useLabel();
-    workspace: { workspaceLabels },
-  } = useLabel();
   const {
     workspace: { workspaceMemberIds },
   } = useMember();

web/components/headers/module-issues.tsx

@@ -77,9 +77,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const { projectStates } = useProjectState();
   const {
     project: { projectMemberIds },

web/components/headers/project-archived-issues.tsx

@@ -25,9 +25,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   } = useIssues(EIssuesStoreType.ARCHIVED);
   const { currentProjectDetails } = useProject();
   const { projectStates } = useProjectState();
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const {
     project: { projectMemberIds },
   } = useMember();

web/components/headers/project-draft-issues.tsx

@@ -22,9 +22,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   } = useIssues(EIssuesStoreType.DRAFT);
   const { currentProjectDetails } = useProject();
   const { projectStates } = useProjectState();
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const {
     project: { projectMemberIds },
   } = useMember();

web/components/headers/project-issues.tsx

@@ -42,9 +42,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   } = useUser();
   const { currentProjectDetails } = useProject();
   const { projectStates } = useProjectState();
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
 
   const activeLayout = issueFilters?.displayFilters?.layout;
 

web/components/headers/project-view-issues.tsx

@@ -49,9 +49,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const { currentProjectDetails } = useProject();
   const { projectViewIds, getViewById } = useProjectView();
   const { projectStates } = useProjectState();
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const {
     project: { projectMemberIds },
   } = useMember();

web/components/issues/issue-detail/label/root.tsx

@@ -24,9 +24,7 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
   const { workspaceSlug, projectId, issueId, disabled = false } = props;
   // hooks
   const { updateIssue } = useIssueDetail();
-  const {
+  const { createLabel } = useLabel();
-    project: { createLabel },
-  } = useLabel();
   const { setToastAlert } = useToast();
 
   const labelOperations: TLabelOperations = useMemo(

web/components/issues/issue-detail/label/select/label-select.tsx

@@ -20,9 +20,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  const {
+  const { fetchProjectLabels, getProjectLabels } = useLabel();
-    project: { fetchProjectLabels, projectLabels },
-  } = useLabel();
   // states
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -30,10 +28,12 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
   const [query, setQuery] = useState("");
 
   const issue = getIssueById(issueId);
+  const projectLabels = getProjectLabels(projectId);
 
   const fetchLabels = () => {
     setIsLoading(true);
-    if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+    if (!projectLabels && workspaceSlug && projectId)
+      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
   };
 
   const options = (projectLabels ?? []).map((label) => ({

web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx

@@ -17,9 +17,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.ARCHIVED);
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx

@@ -21,9 +21,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.CYCLE);
 
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx

@@ -16,9 +16,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.DRAFT);
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -25,9 +25,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
   const {
     issuesFilter: { filters, updateFilters },
   } = useIssues(EIssuesStoreType.GLOBAL);
-  const {
+  const { workspaceLabels } = useLabel();
-    workspace: { workspaceLabels },
-  } = useLabel();
   const { globalViewMap, updateGlobalView } = useGlobalView();
   const {
     membership: { currentWorkspaceRole },

web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx

@@ -20,9 +20,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.MODULE);
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx

@@ -7,19 +7,20 @@ import { AppliedFiltersList } from "components/issues";
 // types
 import { IIssueFilterOptions } from "@plane/types";
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+import { useWorskspaceIssueProperties } from "hooks/use-worskspace-issue-properties";
 
 export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
+  //swr hook for fetching issue properties
+  useWorskspaceIssueProperties(workspaceSlug);
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROFILE);
 
-  const {
+  const { workspaceLabels } = useLabel();
-    workspace: { workspaceLabels },
-  } = useLabel();
   // derived values
   const userFilters = issueFilters?.filters;
 

web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx

@@ -19,9 +19,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
     projectId: string;
   };
   // store hooks
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROJECT);

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -23,9 +23,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const { projectStates } = useProjectState();
   const { viewMap, updateView } = useProjectView();
   // derived values

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

@@ -71,10 +71,10 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
 
   const member = useMember();
   const project = useProject();
-  const projectLabel = useLabel();
+  const label = useLabel();
   const projectState = useProjectState();
 
-  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member);
+  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member);
 
   if (!list) return null;
 

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -208,17 +208,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
 
   const member = useMember();
   const project = useProject();
-  const projectLabel = useLabel();
+  const label = useLabel();
   const projectState = useProjectState();
 
-  const groupByList = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member);
+  const groupByList = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member);
-  const subGroupByList = getGroupByColumns(
+  const subGroupByList = getGroupByColumns(sub_group_by as GroupByColumnTypes, project, label, projectState, member);
-    sub_group_by as GroupByColumnTypes,
-    project,
-    projectLabel,
-    projectState,
-    member
-  );
 
   if (!groupByList || !subGroupByList) return null;
 

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

@@ -59,10 +59,10 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   // store hooks
   const member = useMember();
   const project = useProject();
-  const projectLabel = useLabel();
+  const label = useLabel();
   const projectState = useProjectState();
 
-  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, projectLabel, projectState, member, true);
+  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
 
   if (!list) return null;
 

web/components/issues/issue-layouts/properties/labels.tsx

@@ -53,13 +53,14 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   const {
     router: { workspaceSlug },
   } = useApplication();
-  const {
+  const { fetchProjectLabels, getProjectLabels } = useLabel();
-    project: { fetchProjectLabels, projectLabels: storeLabels },
-  } = useLabel();
 
-  const fetchLabels = () => {
+  const storeLabels = getProjectLabels(projectId);
+
+  const openDropDown = () => {
     setIsLoading(true);
-    if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+    if (!storeLabels && workspaceSlug && projectId)
+      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
   };
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -182,7 +183,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
-          onClick={() => !storeLabels && fetchLabels()}
+          onClick={openDropDown}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // hooks
 import { useGlobalView, useIssues, useUser } from "hooks/store";
+import { useWorskspaceIssueProperties } from "hooks/use-worskspace-issue-properties";
 // components
 import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/issues";
 import { SpreadsheetView } from "components/issues/issue-layouts";
@@ -20,7 +21,8 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query;
-
+  //swr hook for fetching issue properties
+  useWorskspaceIssueProperties(workspaceSlug);
   // store
   const {
     issuesFilter: { filters, fetchFilters, updateFilters },

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

@@ -1,17 +1,17 @@
 import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
 import { ISSUE_PRIORITIES } from "constants/issue";
 import { renderEmoji } from "helpers/emoji.helper";
-import { ILabelRootStore } from "store/label";
 import { IMemberRootStore } from "store/member";
 import { IProjectStore } from "store/project/project.store";
 import { IStateStore } from "store/state.store";
 import { GroupByColumnTypes, IGroupByColumn } from "@plane/types";
 import { STATE_GROUPS } from "constants/state";
+import { ILabelStore } from "store/label.store";
 
 export const getGroupByColumns = (
   groupBy: GroupByColumnTypes | null,
   project: IProjectStore,
-  projectLabel: ILabelRootStore,
+  label: ILabelStore,
   projectState: IStateStore,
   member: IMemberRootStore,
   includeNone?: boolean
@@ -26,7 +26,7 @@ export const getGroupByColumns = (
     case "priority":
       return getPriorityColumns();
     case "labels":
-      return getLabelsColumns(projectLabel) as any;
+      return getLabelsColumns(label) as any;
     case "assignees":
       return getAssigneeColumns(member) as any;
     case "created_by":
@@ -97,10 +97,8 @@ const getPriorityColumns = () => {
   }));
 };
 
-const getLabelsColumns = (projectLabel: ILabelRootStore) => {
+const getLabelsColumns = (label: ILabelStore) => {
-  const {
+  const { projectLabels } = label;
-    project: { projectLabels },
-  } = projectLabel;
 
   if (!projectLabels) return;
 

web/components/issues/issue-modal/form.tsx

@@ -325,7 +325,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   {envConfig?.has_openai_configured && (
                     <GptAssistantPopover
                       isOpen={gptAssistantModal}
-                      projectId={projectId}
+                      projectId={watch("project_id")}
                       handleClose={() => {
                         setGptAssistantModal((prevData) => !prevData);
                         // this is done so that the title do not reset after gpt popover closed
@@ -389,7 +389,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           onChange(stateId);
                           handleFormChange();
                         }}
-                        projectId={projectId}
+                        projectId={watch("project_id")}
                         buttonVariant="border-with-text"
                         tabIndex={6}
                       />
@@ -419,7 +419,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   render={({ field: { value, onChange } }) => (
                     <div className="h-7">
                       <ProjectMemberDropdown
-                        projectId={projectId}
+                        projectId={watch("project_id")}
                         value={value}
                         onChange={(assigneeIds) => {
                           onChange(assigneeIds);
@@ -446,7 +446,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           onChange(labelIds);
                           handleFormChange();
                         }}
-                        projectId={projectId}
+                        projectId={watch("project_id")}
                         tabIndex={9}
                       />
                     </div>
@@ -497,7 +497,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     render={({ field: { value, onChange } }) => (
                       <div className="h-7">
                         <CycleDropdown
-                          projectId={projectId}
+                          projectId={watch("project_id")}
                           onChange={(cycleId) => {
                             onChange(cycleId);
                             handleFormChange();
@@ -517,7 +517,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     render={({ field: { value, onChange } }) => (
                       <div className="h-7">
                         <ModuleDropdown
-                          projectId={projectId}
+                          projectId={watch("project_id")}
                           value={value}
                           onChange={(moduleId) => {
                             onChange(moduleId);
@@ -530,7 +530,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     )}
                   />
                 )}
-                {areEstimatesEnabledForProject(projectId) && (
+                {areEstimatesEnabledForProject(watch("project_id")) && (
                   <Controller
                     control={control}
                     name="estimate_point"
@@ -542,7 +542,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                             onChange(estimatePoint);
                             handleFormChange();
                           }}
-                          projectId={projectId}
+                          projectId={watch("project_id")}
                           buttonVariant="border-with-text"
                           tabIndex={14}
                         />
@@ -609,7 +609,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         handleFormChange();
                         setSelectedParentIssue(issue);
                       }}
-                      projectId={projectId}
+                      projectId={watch("project_id")}
                     />
                   )}
                 />

web/components/issues/issue-modal/modal.tsx

@@ -23,14 +23,7 @@ export interface IssuesModalProps {
 }
 
 export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
-  const {
+  const { data, isOpen, onClose, onSubmit, withDraftIssueWrapper = true, storeType = EIssuesStoreType.PROJECT } = props;
-    data,
-    isOpen,
-    onClose,
-    onSubmit,
-    withDraftIssueWrapper = true,
-    storeType = EIssuesStoreType.PROJECT,
-  } = props;
   // states
   const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
   const [createMore, setCreateMore] = useState(false);

web/components/issues/select/label.tsx

@@ -29,9 +29,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const {
+  const { getProjectLabels, fetchProjectLabels } = useLabel();
-    project: { getProjectLabels, fetchProjectLabels },
-  } = useLabel();
   // states
   const [query, setQuery] = useState("");
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
@@ -50,13 +48,9 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? projectLabels : projectLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
 
-  useSWR(
-    workspaceSlug && projectId ? `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}` : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId) : null
-  );
-
   const openDropdown = () => {
     setIsDropdownOpen(true);
+    if (!projectLabels && workspaceSlug && projectId) fetchProjectLabels(workspaceSlug.toString(), projectId);
     if (referenceElement) referenceElement.focus();
   };
   const closeDropdown = () => setIsDropdownOpen(false);

web/components/issues/view-select/estimate.tsx

@@ -21,7 +21,7 @@ export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
   const { issue, onChange, tooltipPosition = "top", customButton = false, disabled } = props;
   const { areEstimatesEnabledForCurrentProject, activeEstimateDetails, getEstimatePointValue } = useEstimate();
 
-  const estimateValue = getEstimatePointValue(issue.estimate_point);
+  const estimateValue = getEstimatePointValue(issue.estimate_point, issue.project_id);
 
   const estimateLabels = (
     <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>

web/components/labels/create-label-modal.tsx

@@ -34,9 +34,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const {
+  const { createLabel } = useLabel();
-    project: { createLabel },
-  } = useLabel();
   // form info
   const {
     formState: { errors, isSubmitting },

web/components/labels/create-update-label-inline.tsx

@@ -34,9 +34,7 @@ export const CreateUpdateLabelInline = observer(
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
     // store hooks
-    const {
+    const { createLabel, updateLabel } = useLabel();
-      project: { createLabel, updateLabel },
-    } = useLabel();
     // toast alert
     const { setToastAlert } = useToast();
     // form info

web/components/labels/delete-label-modal.tsx

@@ -25,9 +25,7 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
+  const { deleteLabel } = useLabel();
-    project: { deleteLabel },
-  } = useLabel();
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   // hooks

web/components/labels/labels-list-modal.tsx

@@ -25,9 +25,7 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
+  const { projectLabels, fetchProjectLabels, updateLabel } = useLabel();
-    project: { projectLabels, fetchProjectLabels, updateLabel },
-  } = useLabel();
 
   // api call to fetch project details
   useSWR(

web/components/labels/project-setting-label-item.tsx

@@ -28,9 +28,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
+  const { updateLabel } = useLabel();
-    project: { updateLabel },
-  } = useLabel();
 
   const removeFromGroup = (label: IIssueLabel) => {
     if (!workspaceSlug || !projectId) return;

web/components/labels/project-setting-label-list.tsx

@@ -41,9 +41,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
+  const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel();
-    project: { projectLabels, updateLabelPosition, projectLabelsTree },
-  } = useLabel();
   // portal
   const renderDraggable = useDraggableInPortal();
 

web/components/profile/profile-issues-filter.tsx

@@ -18,9 +18,7 @@ export const ProfileIssuesFilter = observer(() => {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROFILE);
 
-  const {
+  const { workspaceLabels } = useLabel();
-    workspace: { workspaceLabels },
-  } = useLabel();
   // derived values
   const states = undefined;
   const members = undefined;

web/components/views/form.tsx

@@ -28,9 +28,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
   const { handleFormSubmit, handleClose, data, preLoadedData } = props;
   // store hooks
   const { projectStates } = useProjectState();
-  const {
+  const { projectLabels } = useLabel();
-    project: { projectLabels },
-  } = useLabel();
   const {
     project: { projectMemberIds },
   } = useMember();

web/components/workspace/views/form.tsx

@@ -27,9 +27,7 @@ const defaultValues: Partial<IWorkspaceView> = {
 export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
   const { handleFormSubmit, handleClose, data, preLoadedData } = props;
   // store hooks
-  const {
+  const { workspaceLabels } = useLabel();
-    workspace: { workspaceLabels },
-  } = useLabel();
   const {
     workspace: { workspaceMemberIds },
   } = useMember();

web/hooks/store/use-label.ts

@@ -2,10 +2,10 @@ import { useContext } from "react";
 // mobx store
 import { StoreContext } from "contexts/store-context";
 // types
-import { ILabelRootStore } from "store/label";
+import { ILabelStore } from "store/label.store";
 
-export const useLabel = (): ILabelRootStore => {
+export const useLabel = (): ILabelStore => {
   const context = useContext(StoreContext);
   if (context === undefined) throw new Error("useLabel must be used within StoreProvider");
-  return context.labelRoot;
+  return context.label;
 };

web/hooks/use-worskspace-issue-properties.ts

@@ -0,0 +1,28 @@
+import useSWR from "swr";
+import { useEstimate, useLabel, useProjectState } from "./store";
+
+export const useWorskspaceIssueProperties = (workspaceSlug: string | string[] | undefined) => {
+  const { fetchWorkspaceLabels } = useLabel();
+
+  const { fetchWorkspaceStates } = useProjectState();
+
+  const { fetchWorskpaceEstimates } = useEstimate();
+
+  // fetch workspace labels
+  useSWR(
+    workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  // fetch workspace states
+  useSWR(
+    workspaceSlug ? `WORKSPACE_STATES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null
+  );
+
+  // fetch workspace estimates
+  useSWR(
+    workspaceSlug ? `WORKSPACE_ESTIMATES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorskpaceEstimates(workspaceSlug.toString()) : null
+  );
+};

web/layouts/auth-layout/project-wrapper.tsx

@@ -45,9 +45,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     project: { fetchProjectMembers },
   } = useMember();
   const { fetchProjectStates } = useProjectState();
-  const {
+  const { fetchProjectLabels } = useLabel();
-    project: { fetchProjectLabels },
-  } = useLabel();
   const { fetchProjectEstimates } = useEstimate();
   // router
   const router = useRouter();

web/layouts/auth-layout/workspace-wrapper.tsx

@@ -20,9 +20,6 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   const {
     workspace: { fetchWorkspaceMembers },
   } = useMember();
-  const {
-    workspace: { fetchWorkspaceLabels },
-  } = useLabel();
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -41,11 +38,6 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
     workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
     workspaceSlug ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
   );
-  // fetch workspace labels
-  useSWR(
-    workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
-  );
   // fetch workspace user projects role
   useSWR(
     workspaceSlug ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,

web/package.json

@@ -40,6 +40,7 @@
     "lucide-react": "^0.294.0",
     "mobx": "^6.10.0",
     "mobx-react": "^9.1.0",
+    "mobx-utils": "^6.0.8",
     "next": "^14.0.3",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",

web/services/project/project-estimate.service.ts

@@ -61,4 +61,12 @@ export class ProjectEstimateService extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async getWorkspaceEstimatesList(workspaceSlug: string): Promise<IEstimate[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/estimates/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }

web/services/project/project-state.service.ts

@@ -65,4 +65,12 @@ export class ProjectStateService extends APIService {
         throw error?.response;
       });
   }
+
+  async getWorkspaceStates(workspaceSlug: string): Promise<IState[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/states/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }

web/store/estimate.store.ts

@@ -5,21 +5,25 @@ import { ProjectEstimateService } from "services/project";
 // types
 import { RootStore } from "store/root.store";
 import { IEstimate, IEstimateFormData } from "@plane/types";
+import { computedFn } from "mobx-utils";
 
 export interface IEstimateStore {
+  //Loaders
+  fetchedMap: Record<string, boolean>;
   // observables
-  estimates: Record<string, IEstimate[] | null>;
+  estimateMap: Record<string, IEstimate>;
   // computed
   areEstimatesEnabledForCurrentProject: boolean;
   projectEstimates: IEstimate[] | null;
   activeEstimateDetails: IEstimate | null;
   // computed actions
   areEstimatesEnabledForProject: (projectId: string) => boolean;
-  getEstimatePointValue: (estimateKey: number | null) => string;
+  getEstimatePointValue: (estimateKey: number | null, projectId?: string) => string;
   getProjectEstimateById: (estimateId: string) => IEstimate | null;
   getProjectActiveEstimateDetails: (projectId: string) => IEstimate | null;
   // fetch actions
   fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<IEstimate[]>;
+  fetchWorskpaceEstimates: (workspaceSlug: string) => Promise<IEstimate[]>;
   // crud actions
   createEstimate: (workspaceSlug: string, projectId: string, data: IEstimateFormData) => Promise<IEstimate>;
   updateEstimate: (
@@ -33,7 +37,9 @@ export interface IEstimateStore {
 
 export class EstimateStore implements IEstimateStore {
   // observables
-  estimates: Record<string, IEstimate[] | null> = {};
+  estimateMap: Record<string, IEstimate> = {};
+  //loaders
+  fetchedMap: Record<string, boolean> = {};
   // root store
   rootStore;
   // services
@@ -42,18 +48,15 @@ export class EstimateStore implements IEstimateStore {
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
-      estimates: observable,
+      estimateMap: observable,
+      fetchedMap: observable,
       // computed
       areEstimatesEnabledForCurrentProject: computed,
       projectEstimates: computed,
       activeEstimateDetails: computed,
-      // computed actions
-      areEstimatesEnabledForProject: action,
-      getProjectEstimateById: action,
-      getEstimatePointValue: action,
-      getProjectActiveEstimateDetails: action,
       // actions
       fetchProjectEstimates: action,
+      fetchWorskpaceEstimates: action,
       createEstimate: action,
       updateEstimate: action,
       deleteEstimate: action,
@@ -79,8 +82,9 @@ export class EstimateStore implements IEstimateStore {
    */
   get projectEstimates() {
     const projectId = this.rootStore.app.router.projectId;
-    if (!projectId) return null;
+    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
-    return this.estimates?.[projectId] || null;
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return null;
+    return Object.values(this.estimateMap).filter((estimate) => estimate.project === projectId);
   }
 
   /**
@@ -89,47 +93,49 @@ export class EstimateStore implements IEstimateStore {
   get activeEstimateDetails() {
     const currentProjectDetails = this.rootStore.projectRoot.project.currentProjectDetails;
     if (!currentProjectDetails || !currentProjectDetails?.estimate) return null;
-    return this.projectEstimates?.find((estimate) => estimate.id === currentProjectDetails?.estimate) || null;
+    return this.estimateMap?.[currentProjectDetails?.estimate || ""] || null;
   }
 
   /**
    * @description returns true if estimates are enabled for a project using project id
    * @param projectId
    */
-  areEstimatesEnabledForProject = (projectId: string) => {
+  areEstimatesEnabledForProject = computedFn((projectId: string) => {
     const projectDetails = this.rootStore.projectRoot.project.getProjectById(projectId);
     if (!projectDetails) return false;
     return Boolean(projectDetails.estimate) ?? false;
-  };
+  });
 
   /**
    * @description returns the point value for the given estimate key to display in the UI
    */
-  getEstimatePointValue = (estimateKey: number | null) => {
+  getEstimatePointValue = computedFn((estimateKey: number | null, projectId?: string) => {
     if (estimateKey === null) return "None";
-    const activeEstimate = this.activeEstimateDetails;
+    const activeEstimate = projectId ? this.getProjectActiveEstimateDetails(projectId) : this.activeEstimateDetails;
     return activeEstimate?.points?.find((point) => point.key === estimateKey)?.value || "None";
-  };
+  });
 
   /**
    * @description returns the estimate details for the given estimate id
    * @param estimateId
    */
-  getProjectEstimateById = (estimateId: string) => {
+  getProjectEstimateById = computedFn((estimateId: string) => {
     if (!this.projectEstimates) return null;
-    const estimateInfo = this.projectEstimates?.find((estimate) => estimate.id === estimateId) || null;
+    const estimateInfo = this.estimateMap?.[estimateId] || null;
     return estimateInfo;
-  };
+  });
 
   /**
    * @description returns the estimate details for the given estimate id
    * @param projectId
    */
-  getProjectActiveEstimateDetails = (projectId: string) => {
+  getProjectActiveEstimateDetails = computedFn((projectId: string) => {
-    const projectDetails = this.rootStore.projectRoot.project.getProjectById(projectId);
+    const projectDetails = this.rootStore.projectRoot.project?.getProjectById(projectId);
-    if (!projectDetails || !projectDetails?.estimate) return null;
+    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
-    return this.projectEstimates?.find((estimate) => estimate.id === projectDetails?.estimate) || null;
+    if (!projectDetails || !projectDetails?.estimate || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug]))
-  };
+      return null;
+    return this.estimateMap?.[projectDetails?.estimate || ""] || null;
+  });
 
   /**
    * @description fetches the list of estimates for the given project
@@ -139,7 +145,26 @@ export class EstimateStore implements IEstimateStore {
   fetchProjectEstimates = async (workspaceSlug: string, projectId: string) =>
     await this.estimateService.getEstimatesList(workspaceSlug, projectId).then((response) => {
       runInAction(() => {
-        set(this.estimates, projectId, response);
+        response.forEach((estimate) => {
+          set(this.estimateMap, estimate.id, estimate);
+        });
+        this.fetchedMap[projectId] = true;
+      });
+      return response;
+    });
+
+  /**
+   * @description fetches the list of estimates for the given project
+   * @param workspaceSlug
+   * @param projectId
+   */
+  fetchWorskpaceEstimates = async (workspaceSlug: string) =>
+    await this.estimateService.getWorkspaceEstimatesList(workspaceSlug).then((response) => {
+      runInAction(() => {
+        response.forEach((estimate) => {
+          set(this.estimateMap, estimate.id, estimate);
+        });
+        this.fetchedMap[workspaceSlug] = true;
       });
       return response;
     });
@@ -157,7 +182,7 @@ export class EstimateStore implements IEstimateStore {
         points: response.estimate_points,
       };
       runInAction(() => {
-        set(this.estimates, projectId, [responseEstimate, ...(this.estimates?.[projectId] || [])]);
+        set(this.estimateMap, [responseEstimate.id], responseEstimate);
       });
       return response.estimate;
     });
@@ -171,11 +196,12 @@ export class EstimateStore implements IEstimateStore {
    */
   updateEstimate = async (workspaceSlug: string, projectId: string, estimateId: string, data: IEstimateFormData) =>
     await this.estimateService.patchEstimate(workspaceSlug, projectId, estimateId, data).then((response) => {
-      const updatedEstimates = (this.estimates?.[projectId] ?? []).map((estimate) =>
-        estimate.id === estimateId ? { ...estimate, ...data.estimate, points: [...data.estimate_points] } : estimate
-      );
       runInAction(() => {
-        set(this.estimates, projectId, updatedEstimates);
+        set(this.estimateMap, estimateId, {
+          ...this.estimateMap[estimateId],
+          ...data.estimate,
+          points: [...data.estimate_points],
+        });
       });
       return response;
     });
@@ -188,9 +214,8 @@ export class EstimateStore implements IEstimateStore {
    */
   deleteEstimate = async (workspaceSlug: string, projectId: string, estimateId: string) =>
     await this.estimateService.deleteEstimate(workspaceSlug, projectId, estimateId).then(() => {
-      const updatedEstimates = (this.estimates?.[projectId] ?? []).filter((estimate) => estimate.id !== estimateId);
       runInAction(() => {
-        set(this.estimates, projectId, updatedEstimates);
+        delete this.estimateMap[estimateId];
       });
     });
 }

web/store/label.store.ts

@@ -1,4 +1,5 @@
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 // services
 import { IssueLabelService } from "services/issue";
@@ -7,17 +8,21 @@ import { buildTree } from "helpers/array.helper";
 // types
 import { RootStore } from "store/root.store";
 import { IIssueLabel, IIssueLabelTree } from "@plane/types";
-import { ILabelRootStore } from "store/label";
 
-export interface IProjectLabelStore {
+export interface ILabelStore {
   //Loaders
   fetchedMap: Record<string, boolean>;
+  //Observable
+  labelMap: Record<string, IIssueLabel>;
   // computed
   projectLabels: IIssueLabel[] | undefined;
   projectLabelsTree: IIssueLabelTree[] | undefined;
+  workspaceLabels: IIssueLabel[] | undefined;
   //computed actions
-  getProjectLabels: (projectId: string) => IIssueLabel[] | undefined;
+  getProjectLabels: (projectId: string | null) => IIssueLabel[] | undefined;
+  getLabelById: (labelId: string) => IIssueLabel | null;
   // fetch actions
+  fetchWorkspaceLabels: (workspaceSlug: string) => Promise<IIssueLabel[]>;
   fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<IIssueLabel[]>;
   // crud actions
   createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
@@ -39,7 +44,7 @@ export interface IProjectLabelStore {
   deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
 }
 
-export class ProjectLabelStore implements IProjectLabelStore {
+export class LabelStore implements ILabelStore {
   // root store
   rootStore;
   // root store labelMap
@@ -49,15 +54,13 @@ export class ProjectLabelStore implements IProjectLabelStore {
   // services
   issueLabelService;
 
-  constructor(_labelRoot: ILabelRootStore, _rootStore: RootStore) {
+  constructor(_rootStore: RootStore) {
     makeObservable(this, {
       labelMap: observable,
       fetchedMap: observable,
       // computed
       projectLabels: computed,
       projectLabelsTree: computed,
-      // actions
-      getProjectLabels: action,
 
       fetchProjectLabels: action,
       createLabel: action,
@@ -68,17 +71,27 @@ export class ProjectLabelStore implements IProjectLabelStore {
 
     // root store
     this.rootStore = _rootStore;
-    this.labelMap = _labelRoot?.labelMap;
     // services
     this.issueLabelService = new IssueLabelService();
   }
 
+  /**
+   * Returns the labelMap belongs to a specific workspace
+   */
+  get workspaceLabels() {
+    const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
+    if (!currentWorkspaceDetails || !this.fetchedMap[worksapceSlug]) return;
+    return Object.values(this.labelMap).filter((label) => label.workspace === currentWorkspaceDetails.id);
+  }
+
   /**
    * Returns the labelMap belonging to the current project
    */
   get projectLabels() {
     const projectId = this.rootStore.app.router.projectId;
-    if (!projectId || !this.fetchedMap[projectId] || !this.labelMap) return;
+    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
     return Object.values(this.labelMap ?? {}).filter((label) => label.project === projectId);
   }
 
@@ -90,10 +103,17 @@ export class ProjectLabelStore implements IProjectLabelStore {
     return buildTree(this.projectLabels);
   }
 
-  getProjectLabels = (projectId: string) => {
+  getProjectLabels = computedFn((projectId: string | null) => {
-    if (!this.fetchedMap[projectId] || !this.labelMap) return;
+    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
     return Object.values(this.labelMap ?? {}).filter((label) => label.project === projectId);
-  };
+  });
+
+  /**
+   * get label info from the map of labels in the store using label id
+   * @param labelId
+   */
+  getLabelById = computedFn((labelId: string): IIssueLabel | null => this.labelMap?.[labelId] || null);
 
   /**
    * Fetches all the labelMap belongs to a specific project
@@ -112,6 +132,23 @@ export class ProjectLabelStore implements IProjectLabelStore {
       return response;
     });
 
+  /**
+   * Fetches all the labelMap belongs to a specific project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<IIssueLabel[]>
+   */
+  fetchWorkspaceLabels = async (workspaceSlug: string) =>
+    await this.issueLabelService.getWorkspaceIssueLabels(workspaceSlug).then((response) => {
+      runInAction(() => {
+        response.forEach((label) => {
+          set(this.labelMap, [label.id], label);
+        });
+        set(this.fetchedMap, workspaceSlug, true);
+      });
+      return response;
+    });
+
   /**
    * Creates a new label for a specific project and add it to the store
    * @param workspaceSlug

web/store/label/index.ts

@@ -1,42 +0,0 @@
-import { observable, makeObservable, action } from "mobx";
-import { RootStore } from "../root.store";
-// types
-import { IIssueLabel } from "@plane/types";
-import { IProjectLabelStore, ProjectLabelStore } from "./project-label.store";
-import { IWorkspaceLabelStore, WorkspaceLabelStore } from "./workspace-label.store";
-
-export interface ILabelRootStore {
-  // observables
-  labelMap: Record<string, IIssueLabel>;
-  // computed actions
-  getLabelById: (labelId: string) => IIssueLabel | null;
-  // sub-stores
-  project: IProjectLabelStore;
-  workspace: IWorkspaceLabelStore;
-}
-
-export class LabelRootStore implements ILabelRootStore {
-  // observables
-  labelMap: Record<string, IIssueLabel> = {};
-  // sub-stores
-  project: IProjectLabelStore;
-  workspace: IWorkspaceLabelStore;
-
-  constructor(_rootStore: RootStore) {
-    makeObservable(this, {
-      // observables
-      labelMap: observable,
-      // computed actions
-      getLabelById: action,
-    });
-    // sub-stores
-    this.project = new ProjectLabelStore(this, _rootStore);
-    this.workspace = new WorkspaceLabelStore(this, _rootStore);
-  }
-
-  /**
-   * get label info from the map of labels in the store using label id
-   * @param labelId
-   */
-  getLabelById = (labelId: string): IIssueLabel | null => this.labelMap?.[labelId] || null;
-}

web/store/label/workspace-label.store.ts

@@ -1,64 +0,0 @@
-import { action, computed, makeObservable, runInAction } from "mobx";
-import { set } from "lodash";
-// services
-import { IssueLabelService } from "services/issue";
-// types
-import { RootStore } from "store/root.store";
-import { IIssueLabel } from "@plane/types";
-import { ILabelRootStore } from "store/label";
-
-export interface IWorkspaceLabelStore {
-  // computed
-  workspaceLabels: IIssueLabel[] | undefined;
-  // fetch actions
-  fetchWorkspaceLabels: (workspaceSlug: string) => Promise<IIssueLabel[]>;
-}
-
-export class WorkspaceLabelStore implements IWorkspaceLabelStore {
-  // root store
-  rootStore;
-  // root store labelMap
-  labelMap: Record<string, IIssueLabel> = {};
-  // services
-  issueLabelService;
-
-  constructor(_labelRoot: ILabelRootStore, _rootStore: RootStore) {
-    makeObservable(this, {
-      // computed
-      workspaceLabels: computed,
-      // actions
-      fetchWorkspaceLabels: action,
-    });
-
-    // root store
-    this.rootStore = _rootStore;
-    this.labelMap = _labelRoot?.labelMap;
-    // services
-    this.issueLabelService = new IssueLabelService();
-  }
-
-  /**
-   * Returns the labelMap belongs to a specific workspace
-   */
-  get workspaceLabels() {
-    const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
-    if (!currentWorkspaceDetails) return;
-    return Object.values(this.labelMap).filter((label) => label.workspace === currentWorkspaceDetails.id);
-  }
-
-  /**
-   * Fetches all the labelMap belongs to a specific project
-   * @param workspaceSlug
-   * @param projectId
-   * @returns Promise<IIssueLabel[]>
-   */
-  fetchWorkspaceLabels = async (workspaceSlug: string) =>
-    await this.issueLabelService.getWorkspaceIssueLabels(workspaceSlug).then((response) => {
-      runInAction(() => {
-        response.forEach((label) => {
-          set(this.labelMap, [label.id], label);
-        });
-      });
-      return response;
-    });
-}

web/store/member/project-member.store.ts

@@ -1,4 +1,5 @@
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
 // services
@@ -64,9 +65,6 @@ export class ProjectMemberStore implements IProjectMemberStore {
       projectMemberMap: observable,
       // computed
       projectMemberIds: computed,
-      // computed actions
-      getProjectMemberDetails: action,
-      getProjectMemberIds: action,
       // actions
       fetchProjectMembers: action,
       bulkAddMembersToProject: action,
@@ -101,7 +99,7 @@ export class ProjectMemberStore implements IProjectMemberStore {
    * @description get the details of a project member
    * @param userId
    */
-  getProjectMemberDetails = (userId: string) => {
+  getProjectMemberDetails = computedFn((userId: string) => {
     const projectId = this.routerStore.projectId;
     if (!projectId) return null;
     const projectMember = this.projectMemberMap?.[projectId]?.[userId];
@@ -113,13 +111,13 @@ export class ProjectMemberStore implements IProjectMemberStore {
       member: this.memberRoot?.memberMap?.[projectMember.member],
     };
     return memberDetails;
-  };
+  });
 
   /**
    * @description get the list of all the user ids of all the members of a project using projectId
    * @param projectId
    */
-  getProjectMemberIds = (projectId: string): string[] | null => {
+  getProjectMemberIds = computedFn((projectId: string): string[] | null => {
     if (!this.projectMemberMap?.[projectId]) return null;
     let members = Object.values(this.projectMemberMap?.[projectId]);
     members = sortBy(members, [
@@ -128,7 +126,7 @@ export class ProjectMemberStore implements IProjectMemberStore {
     ]);
     const memberIds = members.map((m) => m.member);
     return memberIds;
-  };
+  });
 
   /**
    * @description fetch the list of all the members of a project

web/store/project/project.store.ts

@@ -1,4 +1,5 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 // types
 import { RootStore } from "../root.store";
@@ -6,7 +7,6 @@ import { IProject } from "@plane/types";
 // services
 import { IssueLabelService, IssueService } from "services/issue";
 import { ProjectService, ProjectStateService } from "services/project";
-
 export interface IProjectStore {
   // observables
   searchQuery: string;
@@ -197,10 +197,10 @@ export class ProjectStore implements IProjectStore {
    * @param projectId
    * @returns IProject | null
    */
-  getProjectById = (projectId: string) => {
+  getProjectById = computedFn((projectId: string) => {
     const projectInfo = this.projectMap[projectId] || null;
     return projectInfo;
-  };
+  });
 
   /**
    * Adds project to favorites and updates project favorite status in the store

web/store/root.store.ts

@@ -9,7 +9,6 @@ import { IUserRootStore, UserRootStore } from "./user";
 import { IWorkspaceRootStore, WorkspaceRootStore } from "./workspace";
 import { IssueRootStore, IIssueRootStore } from "./issue/root.store";
 import { IStateStore, StateStore } from "./state.store";
-import { ILabelRootStore, LabelRootStore } from "./label";
 import { IMemberRootStore, MemberRootStore } from "./member";
 import { IInboxRootStore, InboxRootStore } from "./inbox";
 import { IEstimateStore, EstimateStore } from "./estimate.store";
@@ -17,6 +16,7 @@ import { GlobalViewStore, IGlobalViewStore } from "./global-view.store";
 import { IMentionStore, MentionStore } from "./mention.store";
 import { DashboardStore, IDashboardStore } from "./dashboard.store";
 import { IProjectPageStore, ProjectPageStore } from "./project-page.store";
+import { ILabelStore, LabelStore } from "./label.store";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -25,7 +25,6 @@ export class RootStore {
   user: IUserRootStore;
   workspaceRoot: IWorkspaceRootStore;
   projectRoot: IProjectRootStore;
-  labelRoot: ILabelRootStore;
   memberRoot: IMemberRootStore;
   inboxRoot: IInboxRootStore;
   cycle: ICycleStore;
@@ -34,6 +33,7 @@ export class RootStore {
   globalView: IGlobalViewStore;
   issue: IIssueRootStore;
   state: IStateStore;
+  label: ILabelStore;
   estimate: IEstimateStore;
   mention: IMentionStore;
   dashboard: IDashboardStore;
@@ -44,7 +44,6 @@ export class RootStore {
     this.user = new UserRootStore(this);
     this.workspaceRoot = new WorkspaceRootStore(this);
     this.projectRoot = new ProjectRootStore(this);
-    this.labelRoot = new LabelRootStore(this);
     this.memberRoot = new MemberRootStore(this);
     this.inboxRoot = new InboxRootStore(this);
     // independent stores
@@ -54,6 +53,7 @@ export class RootStore {
     this.globalView = new GlobalViewStore(this);
     this.issue = new IssueRootStore(this);
     this.state = new StateStore(this);
+    this.label = new LabelStore(this);
     this.estimate = new EstimateStore(this);
     this.mention = new MentionStore(this);
     this.projectPages = new ProjectPageStore(this);

web/store/state.store.ts

@@ -1,4 +1,5 @@
 import { makeObservable, observable, computed, action, runInAction } from "mobx";
+import { computedFn } from "mobx-utils"
 import groupBy from "lodash/groupBy";
 import set from "lodash/set";
 // store
@@ -21,6 +22,7 @@ export interface IStateStore {
   getProjectStates: (projectId: string) => IState[] | undefined;
   // fetch actions
   fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<IState[]>;
+  fetchWorkspaceStates: (workspaceSlug: string) => Promise<IState[]>;
   // crud actions
   createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
   updateState: (
@@ -55,9 +57,6 @@ export class StateStore implements IStateStore {
       // computed
       projectStates: computed,
       groupedProjectStates: computed,
-      // computed actions
-      getStateById: action,
-      getProjectStates: action,
       // fetch action
       fetchProjectStates: action,
       // CRUD actions
@@ -76,8 +75,9 @@ export class StateStore implements IStateStore {
    * Returns the stateMap belongs to a specific project
    */
   get projectStates() {
-    const projectId = this.router.query?.projectId?.toString();
+    const projectId = this.router.projectId;
-    if (!projectId || !this.fetchedMap[projectId]) return;
+    const worksapceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
     return Object.values(this.stateMap).filter((state) => state.project === this.router.query.projectId);
   }
 
@@ -93,20 +93,21 @@ export class StateStore implements IStateStore {
    * @description returns state details using state id
    * @param stateId
    */
-  getStateById = (stateId: string) => {
+  getStateById = computedFn((stateId: string) => {
     if (!this.stateMap) return;
     return this.stateMap[stateId] ?? undefined;
-  };
+  });
 
   /**
    * Returns the stateMap belongs to a project by projectId
    * @param projectId
    * @returns IState[]
    */
-  getProjectStates = (projectId: string) => {
+  getProjectStates = computedFn((projectId: string) => {
-    if (!projectId || !this.fetchedMap[projectId]) return;
+    const worksapceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
     return Object.values(this.stateMap).filter((state) => state.project === projectId);
-  };
+  });
 
   /**
    * fetches the stateMap of a project
@@ -125,6 +126,22 @@ export class StateStore implements IStateStore {
     return statesResponse;
   };
 
+  /**
+   * fetches the stateMap of all the states in workspace
+   * @param workspaceSlug
+   * @returns
+   */
+  fetchWorkspaceStates = async (workspaceSlug: string) => {
+    const statesResponse = await this.stateService.getWorkspaceStates(workspaceSlug);
+    runInAction(() => {
+      statesResponse.forEach((state) => {
+        set(this.stateMap, [state.id], state);
+      });
+      set(this.fetchedMap, workspaceSlug, true);
+    });
+    return statesResponse;
+  };
+
   /**
    * creates a new state in a project and adds it to the store
    * @param workspaceSlug

yarn.lock

@@ -2406,6 +2406,13 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
+"@tippyjs/react@^4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
+  integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@tiptap/core@^2.1.13":
   version "2.1.13"
   resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.13.tgz#e21f566e81688c826c6f26d2940886734189e193"
@@ -6617,16 +6624,6 @@ mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.6"
 
-mobx-devtools-mst@^0.9.30:
-  version "0.9.30"
-  resolved "https://registry.yarnpkg.com/mobx-devtools-mst/-/mobx-devtools-mst-0.9.30.tgz#0d1cad8b3d97e1f3f94bb9afb701cd9c8b5b164d"
-  integrity sha512-6fIYeFG4xT4syIeKddmK55zQbc3ZZZr/272/cCbfaAAM5YiuFdteGZGUgdsz8wxf/mGxWZbFOM3WmASAnpwrbw==
-
-mobx-react-devtools@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/mobx-react-devtools/-/mobx-react-devtools-6.1.1.tgz#a462b944085cf11ff96fc937d12bf31dab4c8984"
-  integrity sha512-nc5IXLdEUFLn3wZal65KF3/JFEFd+mbH4KTz/IG5BOPyw7jo8z29w/8qm7+wiCyqVfUIgJ1gL4+HVKmcXIOgqA==
-
 mobx-react-lite@^4.0.3, mobx-react-lite@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz#e2cb98f813e118917bcc463638f5bf6ea053a67b"
@@ -6641,10 +6638,10 @@ mobx-react@^9.1.0:
   dependencies:
     mobx-react-lite "^4.0.4"
 
-mobx-state-tree@^5.4.0:
+mobx-utils@^6.0.8:
-  version "5.4.0"
+  version "6.0.8"
-  resolved "https://registry.yarnpkg.com/mobx-state-tree/-/mobx-state-tree-5.4.0.tgz#d41b7fd90b8d4b063bc32526758417f1100751df"
+  resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-6.0.8.tgz#843e222c7694050c2e42842682fd24a84fdb7024"
-  integrity sha512-2VuUhAqFklxgGqFNqaZUXYYSQINo8C2SUEP9YfCQrwatHWHqJLlEC7Xb+5WChkev7fubzn3aVuby26Q6h+JeBg==
+  integrity sha512-fPNt0vJnHwbQx9MojJFEnJLfM3EMGTtpy4/qOOW6xueh1mPofMajrbYAUvByMYAvCJnpy1A5L0t+ZVB5niKO4g==
 
 mobx@^6.10.0:
   version "6.12.0"
@@ -8540,7 +8537,7 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
-tippy.js@^6.3.7:
+tippy.js@^6.3.1, tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
   integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==