fix: issue with peek view properties not editable and options not being shown in all workspace issues. (#3100)

* fix: issue with peek view properties not editable and options not being shown in `all workspace issues`..

* refactor: use projectId from props instead of router query.
fix: issue in add to module/ cycle not working properly.

web/components/issues/peek-overview/properties.tsx

@@ -47,7 +47,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   } = useMobxStore();
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, peekProjectId: projectId } = router.query;
 
   const handleState = (_state: string) => {
     issueUpdate({ ...issue, state: _state });
@@ -116,7 +116,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               <p>State</p>
             </div>
             <div>
-              <SidebarStateSelect value={issue?.state || ""} onChange={handleState} disabled={disableUserActions} />
+              <SidebarStateSelect
+                value={issue?.state || ""}
+                projectId={projectId as string}
+                onChange={handleState}
+                disabled={disableUserActions}
+              />
             </div>
           </div>
 
@@ -129,6 +134,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarAssigneeSelect
                 value={issue.assignees || []}
+                projectId={projectId as string}
                 onChange={handleAssignee}
                 disabled={disableUserActions}
               />
@@ -210,7 +216,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               <p>Parent</p>
             </div>
             <div>
-              <SidebarParentSelect onChange={handleParent} issueDetails={issue} disabled={disableUserActions} />
+              <SidebarParentSelect
+                onChange={handleParent}
+                issueDetails={issue}
+                projectId={projectId as string}
+                disabled={disableUserActions}
+              />
             </div>
           </div>
         </div>
@@ -226,6 +237,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarCycleSelect
                 issueDetail={issue}
+                projectId={projectId as string}
                 disabled={disableUserActions}
                 handleIssueUpdate={handleCycleOrModuleChange}
               />
@@ -240,6 +252,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarModuleSelect
                 issueDetail={issue}
+                projectId={projectId as string}
                 disabled={disableUserActions}
                 handleIssueUpdate={handleCycleOrModuleChange}
               />
@@ -253,6 +266,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div className="flex w-full flex-col gap-3">
               <SidebarLabelSelect
                 issueDetails={issue}
+                projectId={projectId as string}
                 labelList={issue.labels}
                 submitChanges={handleLabels}
                 isNotAllowed={disableUserActions}

web/components/issues/peek-overview/root.tsx

@@ -31,7 +31,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   const { peekIssueId } = router.query;
 
   const {
-    user: { currentProjectRole },
     issueDetail: {
       createIssueComment,
       updateIssueComment,
@@ -58,6 +57,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     },
     archivedIssues: { deleteArchivedIssue },
     project: { currentProjectDetails },
+    workspaceMember: { currentWorkspaceUserProjectsRole },
   } = useMobxStore();
 
   const { setToastAlert } = useToast();
@@ -146,7 +146,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     }
   };
 
-  const userRole = currentProjectRole ?? EUserWorkspaceRoles.GUEST;
+  const userRole =
+    (currentWorkspaceUserProjectsRole && currentWorkspaceUserProjectsRole[projectId]) ?? EUserWorkspaceRoles.GUEST;
 
   return (
     <Fragment>

web/components/issues/sidebar-select/assignee.tsx

@@ -10,6 +10,7 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   value: string[];
+  projectId: string;
   onChange: (val: string[]) => void;
   disabled?: boolean;
 };
@@ -17,9 +18,9 @@ type Props = {
 // services
 const projectMemberService = new ProjectMemberService();
 
-export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({ value, projectId, onChange, disabled = false }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,

web/components/issues/sidebar-select/cycle.tsx

@@ -14,6 +14,7 @@ import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/f
 
 type Props = {
   issueDetail: IIssue | undefined;
+  projectId: string;
   handleCycleChange?: (cycleId: string) => void;
   disabled?: boolean;
   handleIssueUpdate?: () => void;
@@ -26,7 +27,7 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
   const { issueDetail, disabled = false, handleIssueUpdate, handleCycleChange } = props;
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId: _projectId, peekProjectId } = router.query;
   // mobx store
   const {
     cycleIssues: { removeIssueFromCycle, addIssueToCycle },
@@ -34,6 +35,8 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
 
   const [isUpdating, setIsUpdating] = useState(false);
 
+  const projectId = _projectId ?? peekProjectId;
+
   const { data: incompleteCycles } = useSWR(
     workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
     workspaceSlug && projectId

web/components/issues/sidebar-select/label.tsx

@@ -18,6 +18,7 @@ import { IIssue, IIssueLabel } from "types";
 
 type Props = {
   issueDetails: IIssue | undefined;
+  projectId: string;
   labelList: string[];
   submitChanges: (formData: any) => void;
   isNotAllowed: boolean;
@@ -30,12 +31,12 @@ const defaultValues: Partial<IIssueLabel> = {
 };
 
 export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
-  const { issueDetails, labelList, submitChanges, isNotAllowed, uneditable } = props;
+  const { issueDetails, projectId, labelList, submitChanges, isNotAllowed, uneditable } = props;
   // states
   const [createLabelForm, setCreateLabelForm] = useState(false);
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
   // toast
   const { setToastAlert } = useToast();
   // mobx store

web/components/issues/sidebar-select/module.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { mutate } from "swr";
+import useSWR, { mutate } from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
@@ -9,28 +9,40 @@ import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
 // types
 import { IIssue } from "types";
 // fetch-keys
-import { ISSUE_DETAILS, MODULE_ISSUES } from "constants/fetch-keys";
+import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
+// services
+import { ModuleService } from "services/module.service";
 
 type Props = {
   issueDetail: IIssue | undefined;
+  projectId: string;
   handleModuleChange?: (moduleId: string) => void;
   disabled?: boolean;
   handleIssueUpdate?: () => void;
 };
 
+// services
+const moduleService = new ModuleService();
+
 export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
-  const { issueDetail, disabled = false, handleIssueUpdate, handleModuleChange } = props;
+  const { issueDetail, projectId, disabled = false, handleIssueUpdate, handleModuleChange } = props;
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
   // mobx store
   const {
-    module: { projectModules },
     moduleIssues: { removeIssueFromModule, addIssueToModule },
   } = useMobxStore();
 
   const [isUpdating, setIsUpdating] = useState(false);
 
+  const { data: projectModules } = useSWR(
+    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => moduleService.getModules(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   const handleModuleStoreChange = async (moduleId: string) => {
     if (!workspaceSlug || !issueDetail || !moduleId) return;
 

web/components/issues/sidebar-select/parent.tsx

@@ -12,15 +12,16 @@ import { IIssue, ISearchIssueResponse } from "types";
 type Props = {
   onChange: (value: string) => void;
   issueDetails: IIssue | undefined;
+  projectId: string;
   disabled?: boolean;
 };
 
-export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, disabled = false }) => {
+export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, projectId, disabled = false }) => {
   const [isParentModalOpen, setIsParentModalOpen] = useState(false);
   const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
 
   const router = useRouter();
-  const { projectId, issueId } = router.query;
+  const { issueId } = router.query;
 
   return (
     <>

web/components/issues/sidebar-select/state.tsx

@@ -15,6 +15,7 @@ import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   value: string;
+  projectId: string;
   onChange: (val: string) => void;
   disabled?: boolean;
 };
@@ -22,9 +23,9 @@ type Props = {
 // services
 const stateService = new ProjectStateService();
 
-export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+export const SidebarStateSelect: React.FC<Props> = ({ value, projectId, onChange, disabled = false }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, inboxIssueId } = router.query;
+  const { workspaceSlug, inboxIssueId } = router.query;
 
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,

web/components/issues/sidebar.tsx

@@ -290,6 +290,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                         render={({ field: { value } }) => (
                           <SidebarStateSelect
                             value={value}
+                            projectId={projectId as string}
                             onChange={(val: string) => submitChanges({ state: val })}
                             disabled={!isAllowed || uneditable}
                           />
@@ -311,6 +312,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                         render={({ field: { value } }) => (
                           <SidebarAssigneeSelect
                             value={value}
+                            projectId={projectId as string}
                             onChange={(val: string[]) => submitChanges({ assignees: val })}
                             disabled={!isAllowed || uneditable}
                           />
@@ -382,6 +384,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                               onChange(val);
                             }}
                             issueDetails={issueDetail}
+                            projectId={projectId as string}
                             disabled={!isAllowed || uneditable}
                           />
                         )}
@@ -536,6 +539,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                     <div className="space-y-1">
                       <SidebarCycleSelect
                         issueDetail={issueDetail}
+                        projectId={projectId as string}
                         handleCycleChange={handleCycleChange}
                         disabled={!isAllowed || uneditable}
                       />
@@ -551,6 +555,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                     <div className="space-y-1">
                       <SidebarModuleSelect
                         issueDetail={issueDetail}
+                        projectId={projectId as string}
                         handleModuleChange={handleModuleChange}
                         disabled={!isAllowed || uneditable}
                       />
@@ -569,6 +574,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               <div className="space-y-1 sm:w-1/2">
                 <SidebarLabelSelect
                   issueDetails={issueDetail}
+                  projectId={projectId as string}
                   labelList={issueDetail?.labels ?? []}
                   submitChanges={submitChanges}
                   isNotAllowed={!isAllowed}