chore: merge develop

.github/workflows/create-sync-pr.yml

@@ -3,7 +3,7 @@ name: Create Sync Action
 on:
   pull_request:
     branches:
-      - develop # Change this to preview
+      - preview 
     types:
       - closed
 env: 
@@ -33,23 +33,14 @@ jobs:
           sudo apt update
           sudo apt install gh -y
 
-      - name: Create Pull Request
+      - name: Push Changes to Target Repo
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         run: |
           TARGET_REPO="${{ secrets.SYNC_TARGET_REPO_NAME }}"
           TARGET_BRANCH="${{ secrets.SYNC_TARGET_BRANCH_NAME }}"
-          TARGET_BASE_BRANCH="${{ secrets.SYNC_TARGET_BASE_BRANCH_NAME }}"
           SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
 
           git checkout $SOURCE_BRANCH
           git remote add target-origin "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
           git push target-origin $SOURCE_BRANCH:$TARGET_BRANCH
-
-          PR_TITLE=${{secrets.SYNC_PR_TITLE}}
-
-          gh pr create \
-            --base $TARGET_BASE_BRANCH \
-            --head $TARGET_BRANCH \
-            --title "$PR_TITLE" \
-            --repo $TARGET_REPO

apiserver/plane/app/views/project.py

@@ -999,11 +999,18 @@ class ProjectPublicCoverImagesEndpoint(BaseAPIView):
 
     def get(self, request):
         files = []
-        s3 = boto3.client(
+        s3_client_params = {
-            "s3",
+            "service_name": "s3",
-            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            "aws_access_key_id": settings.AWS_ACCESS_KEY_ID,
-            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            "aws_secret_access_key": settings.AWS_SECRET_ACCESS_KEY,
-        )
+        }
+
+        # Use AWS_S3_ENDPOINT_URL if it is present in the settings
+        if hasattr(settings, "AWS_S3_ENDPOINT_URL") and settings.AWS_S3_ENDPOINT_URL:
+            s3_client_params["endpoint_url"] = settings.AWS_S3_ENDPOINT_URL
+
+        s3 = boto3.client(**s3_client_params)
+
         params = {
             "Bucket": settings.AWS_STORAGE_BUCKET_NAME,
             "Prefix": "static/project-cover/",
@@ -1016,6 +1023,16 @@ class ProjectPublicCoverImagesEndpoint(BaseAPIView):
                 if not content["Key"].endswith(
                     "/"
                 ):  # This line ensures we're only getting files, not "sub-folders"
+                    if (
+                        hasattr(settings, "AWS_S3_CUSTOM_DOMAIN")
+                        and settings.AWS_S3_CUSTOM_DOMAIN
+                        and hasattr(settings, "AWS_S3_URL_PROTOCOL")
+                        and settings.AWS_S3_URL_PROTOCOL
+                    ):
+                        files.append(
+                            f"{settings.AWS_S3_URL_PROTOCOL}//{settings.AWS_S3_CUSTOM_DOMAIN}/{content['Key']}"
+                        )
+                    else:
                         files.append(
                             f"https://{settings.AWS_STORAGE_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
                         )

apiserver/requirements/base.txt

@@ -30,7 +30,7 @@ openpyxl==3.1.2
 beautifulsoup4==4.12.2
 dj-database-url==2.1.0
 posthog==3.0.2
-cryptography==41.0.5
+cryptography==41.0.6
 lxml==4.9.3
 boto3==1.28.40
 

deploy/selfhost/install.sh

@@ -39,7 +39,7 @@ function download(){
     echo ""
     echo "Latest version is now available for you to use"
     echo ""
-    echo "In case of Upgrade, your new setting file is availabe as 'variables-upgrade.env'. Please compare and set the required values in '.env 'file."
+    echo "In case of Upgrade, your new setting file is available as 'variables-upgrade.env'. Please compare and set the required values in '.env 'file."
     echo ""
 
 }

web/components/common/new-empty-state.tsx

@@ -19,7 +19,7 @@ type Props = {
     icon?: any;
     text: string;
     onClick: () => void;
-  };
+  } | null;
   disabled?: boolean;
 };
 

web/components/core/modals/bulk-delete-issues-modal.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
+import { observer } from "mobx-react-lite";
-// react hook form
 import { SubmitHandler, useForm } from "react-hook-form";
-// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+import useSWR from "swr";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useToast from "hooks/use-toast";
 // services
 import { IssueService } from "services/issue";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
 import { Button, LayersIcon } from "@plane/ui";
 // icons
@@ -30,17 +30,25 @@ type Props = {
 
 const issueService = new IssueService();
 
-export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
+export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
   const { isOpen, onClose } = props;
+  // states
+  const [query, setQuery] = useState("");
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // states
+  // store hooks
-  const [query, setQuery] = useState("");
+  const {
+    user: { hasPermissionToCurrentProject },
+  } = useMobxStore();
   // fetching project issues.
   const { data: issues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
-    workspaceSlug && projectId ? () => issueService.getIssues(workspaceSlug as string, projectId as string) : null
+      ? PROJECT_ISSUES_LIST(workspaceSlug.toString(), projectId.toString())
+      : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => issueService.getIssues(workspaceSlug.toString(), projectId.toString())
+      : null
   );
 
   const { setToastAlert } = useToast();
@@ -222,4 +230,4 @@ export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/core/sidebar/links-list.tsx

@@ -50,8 +50,8 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
               </Tooltip>
             </div>
 
-            {!isNotAllowed && (
             <div className="z-[1] flex flex-shrink-0 items-center gap-2">
+              {!isNotAllowed && (
                 <button
                   type="button"
                   className="flex items-center justify-center p-1 hover:bg-custom-background-80"
@@ -63,6 +63,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
                 >
                   <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
                 </button>
+              )}
               <a
                 href={link.url}
                 target="_blank"
@@ -71,6 +72,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
               >
                 <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
               </a>
+              {!isNotAllowed && (
                 <button
                   type="button"
                   className="flex items-center justify-center p-1 hover:bg-custom-background-80"
@@ -82,9 +84,9 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
                 >
                   <Trash2 className="h-3 w-3" />
                 </button>
-              </div>
               )}
             </div>
+          </div>
           <div className="px-5">
             <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
               Added {timeAgo(link.created_at)}

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -14,6 +14,7 @@ import { SingleProgressStats } from "components/core";
 import { Avatar, StateGroupIcon } from "@plane/ui";
 // types
 import {
+  IIssueFilterOptions,
   IModule,
   TAssigneesDistribution,
   TCompletionChartDistribution,
@@ -35,6 +36,9 @@ type Props = {
   roundedTab?: boolean;
   noBackground?: boolean;
   isPeekView?: boolean;
+  isCompleted?: boolean;
+  filters?: IIssueFilterOptions;
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
 };
 
 export const SidebarProgressStats: React.FC<Props> = ({
@@ -44,7 +48,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
   module,
   roundedTab,
   noBackground,
+  isCompleted = false,
   isPeekView = false,
+  filters,
+  handleFiltersUpdate,
 }) => {
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
@@ -140,19 +147,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     }
                     completed={assignee.completed_issues}
                     total={assignee.total_issues}
-                    {...(!isPeekView && {
+                    {...(!isPeekView &&
-                      onClick: () => {
+                      !isCompleted && {
-                        // TODO: set filters here
+                        onClick: () => handleFiltersUpdate("assignees", assignee.assignee_id ?? ""),
-                        // if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
+                        selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
-                        //   setFilters({
-                        //     assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
-                        //   });
-                        // else
-                        //   setFilters({
-                        //     assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
-                        //   });
-                      },
-                      // selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
                       })}
                   />
                 );
@@ -200,16 +198,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
                 }
                 completed={label.completed_issues}
                 total={label.total_issues}
-                {...(!isPeekView && {
+                {...(!isPeekView &&
-                  // TODO: set filters here
+                  !isCompleted && {
-                  onClick: () => {
+                    onClick: () => handleFiltersUpdate("labels", label.label_id ?? ""),
-                    // if (filters.labels?.includes(label.label_id ?? ""))
+                    selected: filters?.labels?.includes(label.label_id ?? `no-label-${index}`),
-                    //   setFilters({
-                    //     labels: filters?.labels?.filter((l) => l !== label.label_id),
-                    //   });
-                    // else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
-                  },
-                  // selected: filters?.labels?.includes(label.label_id ?? ""),
                   })}
               />
             ))

web/components/cycles/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
@@ -28,7 +28,8 @@ import {
   renderShortMonthDate,
 } from "helpers/date-time.helper";
 // types
-import { ICycle } from "types";
+import { ICycle, IIssueFilterOptions } from "types";
+import { EFilterType } from "store/issues/types";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 // fetch-keys
@@ -52,12 +53,20 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, peekCycle } = router.query;
   // store hooks
   const {
+<<<<<<< HEAD
     eventTracker: { setTrackElement },
   } = useApplication();
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { getCycleById, updateCycleDetails } = useCycle();
+=======
+    cycle: cycleDetailsStore,
+    cycleIssuesFilter: { issueFilters, updateFilters },
+    trackEvent: { setTrackElement },
+    user: { currentProjectRole },
+  } = useMobxStore();
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   const cycleDetails = getCycleById(cycleId);
 
@@ -246,6 +255,25 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     }
   };
 
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { [key]: newValues }, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
+  );
+
   const cycleStatus =
     cycleDetails?.start_date && cycleDetails?.end_date
       ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
@@ -539,6 +567,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                               }}
                               totalIssues={cycleDetails.total_issues}
                               isPeekView={Boolean(peekCycle)}
+                              isCompleted={isCompleted}
+                              filters={issueFilters?.filters}
+                              handleFiltersUpdate={handleFiltersUpdate}
                             />
                           </div>
                         )}

web/components/instance/email-form.tsx

@@ -20,6 +20,7 @@ export interface EmailFormValues {
   EMAIL_HOST_PASSWORD: string;
   EMAIL_USE_TLS: string;
   // EMAIL_USE_SSL: string;
+  EMAIL_FROM: string;
 }
 
 export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
@@ -44,6 +45,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
       EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
       // EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+      EMAIL_FROM: config["EMAIL_FROM"],
     },
   });
 
@@ -167,6 +169,31 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
           </div>
         </div>
       </div>
+      <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">From address</h4>
+          <Controller
+            control={control}
+            name="EMAIL_FROM"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_FROM"
+                name="EMAIL_FROM"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_FROM)}
+                placeholder="no-reply@projectplane.so"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+          <p className="text-xs text-custom-text-400">
+            You will have to verify your email address to being sending emails.
+          </p>
+        </div>
+      </div>
 
       <div className="flex w-full max-w-md flex-col gap-y-8 px-1">
         <div className="mr-8 flex items-center gap-10 pt-4">

web/components/issues/attachment/attachments.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useSWR from "swr";
@@ -24,7 +24,14 @@ import { IIssueAttachment } from "types";
 const issueAttachmentService = new IssueAttachmentService();
 const projectMemberService = new ProjectMemberService();
 
-export const IssueAttachments = () => {
+type Props = {
+  editable: boolean;
+};
+
+export const IssueAttachments: React.FC<Props> = (props) => {
+  const { editable } = props;
+
+  // states
   const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
   const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
 
@@ -86,6 +93,7 @@ export const IssueAttachments = () => {
               </div>
             </Link>
 
+            {editable && (
               <button
                 onClick={() => {
                   setDeleteAttachment(file);
@@ -94,6 +102,7 @@ export const IssueAttachments = () => {
               >
                 <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
               </button>
+            )}
           </div>
         ))}
     </>

web/components/issues/description-form.tsx

@@ -135,7 +135,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
                   debouncedFormSave();
                 }}
                 required
-                className="min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
+                  !isAllowed ? "hover:cursor-not-allowed" : ""
+                }`}
                 hasError={Boolean(errors?.description)}
                 role="textbox"
                 disabled={!isAllowed}
@@ -170,7 +172,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               dragDropEnabled
-              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+              customClassName={
+                isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none"
+              }
               noBorder={!isAllowed}
               onChange={(description: Object, description_html: string) => {
                 setShowAlert(true);

web/components/issues/form.tsx

@@ -224,6 +224,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
     reset({
       ...defaultValues,
       ...initialData,
+      project: projectId,
     });
   }, [setFocus, initialData, reset]);
 

web/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -120,8 +120,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={async (issueToUpdate) =>
+          handleIssue={async (issueToUpdate, action: EIssueActions) =>
-            await handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, EIssueActions.UPDATE)
+            await handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, action)
           }
         />
       )}

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -9,7 +9,14 @@ import { Tooltip } from "@plane/ui";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { IIssue } from "types";
+<<<<<<< HEAD
 import { IIssueResponse } from "store_legacy/issues/types";
+=======
+import { IIssueResponse } from "store/issues/types";
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
 type Props = {
   issues: IIssueResponse | undefined;
@@ -26,15 +33,24 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
 
+  // mobx store
+  const {
+    user: { currentProjectRole },
+  } = useMobxStore();
+
   const menuActionRef = useRef<HTMLDivElement | null>(null);
 
-  const handleIssuePeekOverview = (issue: IIssue) => {
+  const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
@@ -51,6 +67,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
     </div>
   );
 
+  const isEditable = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       {issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => {
@@ -58,14 +76,14 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
 
         const issue = issues?.[issueId];
         return (
-          <Draggable key={issue.id} draggableId={issue.id} index={index}>
+          <Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={!isEditable}>
             {(provided, snapshot) => (
               <div
                 className="relative cursor-pointer p-1 px-2"
                 {...provided.draggableProps}
                 {...provided.dragHandleProps}
                 ref={provided.innerRef}
-                onClick={() => handleIssuePeekOverview(issue)}
+                onClick={(e) => handleIssuePeekOverview(issue, e)}
               >
                 {issue?.tempId !== undefined && (
                   <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />

web/components/issues/issue-layouts/empty-states/project.tsx

@@ -34,14 +34,18 @@ export const ProjectEmptyState: React.FC = observer(() => {
           description:
             "Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.",
         }}
-        primaryButton={{
+        primaryButton={
+          isEditingAllowed
+            ? {
                 text: "Create your first issue",
                 icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
                 onClick: () => {
                   setTrackElement("PROJECT_EMPTY_STATE");
                   commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
                 },
-        }}
+              }
+            : null
+        }
         disabled={!isEditingAllowed}
       />
     </div>

web/components/issues/issue-layouts/gantt/base-gantt-root.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
@@ -23,9 +23,17 @@ import {
   IProjectIssuesStore,
   IViewIssuesFilterStore,
   IViewIssuesStore,
+<<<<<<< HEAD
 } from "store_legacy/issues";
 import { TUnGroupedIssues } from "store_legacy/issues/types";
 import { EUserProjectRoles } from "constants/project";
+=======
+} from "store/issues";
+import { TUnGroupedIssues } from "store/issues/types";
+import { EIssueActions } from "../types";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
 interface IBaseGanttRoot {
   issueFiltersStore:
@@ -35,11 +43,21 @@ interface IBaseGanttRoot {
     | IViewIssuesFilterStore;
   issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
   viewId?: string;
+  issueActions: {
+    [EIssueActions.DELETE]: (issue: IIssue) => Promise<void>;
+    [EIssueActions.UPDATE]?: (issue: IIssue) => Promise<void>;
+    [EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
+  };
 }
 
 export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGanttRoot) => {
+<<<<<<< HEAD
   const { issueFiltersStore, issueStore, viewId } = props;
   // router
+=======
+  const { issueFiltersStore, issueStore, viewId, issueActions } = props;
+
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
   const router = useRouter();
   const { workspaceSlug, peekIssueId, peekProjectId } = router.query;
   // store hooks
@@ -64,11 +82,14 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
     await issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, payload, viewId);
   };
 
-  const updateIssue = async (projectId: string, issueId: string, payload: Partial<IIssue>) => {
+  const handleIssues = useCallback(
-    if (!workspaceSlug) return;
+    async (issue: IIssue, action: EIssueActions) => {
-
+      if (issueActions[action]) {
-    await issueStore.updateIssue(workspaceSlug.toString(), projectId, issueId, payload, viewId);
+        await issueActions[action]!(issue);
-  };
+      }
+    },
+    [issueActions]
+  );
 
   const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
@@ -102,8 +123,8 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={async (issueToUpdate) => {
+          handleIssue={async (issueToUpdate, action) => {
-            await updateIssue(peekProjectId.toString(), peekIssueId.toString(), issueToUpdate);
+            await handleIssues(issueToUpdate as IIssue, action);
           }}
         />
       )}

web/components/issues/issue-layouts/gantt/blocks.tsx

@@ -9,13 +9,17 @@ import { IIssue } from "types";
 export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
   const router = useRouter();
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${data?.workspace_detail.slug}/projects/${data?.project_detail.id}/issues/${data?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project },
       });
+    }
   };
 
   return (

web/components/issues/issue-layouts/gantt/cycle-root.tsx

@@ -4,15 +4,43 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
 import { useRouter } from "next/router";
+// types
+import { EIssueActions } from "../types";
+import { IIssue } from "types";
 
 export const CycleGanttLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { cycleId } = router.query;
+  const { cycleId, workspaceSlug } = router.query;
 
   const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
 
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !cycleId) return;
+
+      await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !cycleId) return;
+
+      await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
+    },
+    [EIssueActions.REMOVE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
+
+      await cycleIssueStore.removeIssueFromCycle(
+        workspaceSlug.toString(),
+        issue.project,
+        cycleId.toString(),
+        issue.id,
+        issue.bridge_id
+      );
+    },
+  };
+
   return (
     <BaseGanttRoot
+      issueActions={issueActions}
       issueFiltersStore={cycleIssueFilterStore}
       issueStore={cycleIssueStore}
       viewId={cycleId?.toString()}

web/components/issues/issue-layouts/gantt/module-root.tsx

@@ -4,15 +4,43 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
 import { useRouter } from "next/router";
+// types
+import { EIssueActions } from "../types";
+import { IIssue } from "types";
 
 export const ModuleGanttLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { moduleId } = router.query;
+  const { moduleId, workspaceSlug } = router.query;
 
   const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
 
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !moduleId) return;
+
+      await moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId.toString());
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !moduleId) return;
+
+      await moduleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, moduleId.toString());
+    },
+    [EIssueActions.REMOVE]: async (issue: IIssue) => {
+      if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
+
+      await moduleIssueStore.removeIssueFromModule(
+        workspaceSlug.toString(),
+        issue.project,
+        moduleId.toString(),
+        issue.id,
+        issue.bridge_id
+      );
+    },
+  };
+
   return (
     <BaseGanttRoot
+      issueActions={issueActions}
       issueFiltersStore={moduleIssueFilterStore}
       issueStore={moduleIssueStore}
       viewId={moduleId?.toString()}

web/components/issues/issue-layouts/gantt/project-root.tsx

@@ -1,12 +1,36 @@
 import React from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
+// types
+import { EIssueActions } from "../types";
+import { IIssue } from "types";
 
 export const GanttLayout: React.FC = observer(() => {
   const { projectIssues: projectIssuesStore, projectIssuesFilter: projectIssueFiltersStore } = useMobxStore();
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
 
-  return <BaseGanttRoot issueFiltersStore={projectIssueFiltersStore} issueStore={projectIssuesStore} />;
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
+    },
+  };
+  return (
+    <BaseGanttRoot
+      issueActions={issueActions}
+      issueFiltersStore={projectIssueFiltersStore}
+      issueStore={projectIssuesStore}
+    />
+  );
 });

web/components/issues/issue-layouts/gantt/project-view-root.tsx

@@ -1,11 +1,35 @@
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
+// types
+import { EIssueActions } from "../types";
+import { IIssue } from "types";
 
 export const ProjectViewGanttLayout: React.FC = observer(() => {
   const { viewIssues: projectIssueViewStore, viewIssuesFilter: projectIssueViewFiltersStore } = useMobxStore();
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
 
-  return <BaseGanttRoot issueFiltersStore={projectIssueViewFiltersStore} issueStore={projectIssueViewStore} />;
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectIssueViewStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      if (!workspaceSlug) return;
+
+      await projectIssueViewStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
+    },
+  };
+  return (
+    <BaseGanttRoot
+      issueActions={issueActions}
+      issueFiltersStore={projectIssueViewFiltersStore}
+      issueStore={projectIssueViewStore}
+    />
+  );
 });

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -277,7 +277,13 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
+<<<<<<< HEAD
           handleIssue={async (issueToUpdate) => await handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
+=======
+          handleIssue={async (issueToUpdate, action: EIssueActions) =>
+            await handleIssues(sub_group_by, group_by, issueToUpdate as IIssue, action)
+          }
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
         />
       )}
     </>

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

@@ -1,5 +1,10 @@
 import { memo } from "react";
+<<<<<<< HEAD
 import { Draggable } from "@hello-pangea/dnd";
+=======
+import { Draggable, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import isEqual from "lodash/isEqual";
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 // components
 import { IssueProperties } from "../properties/all-properties";
 // ui
@@ -47,10 +52,27 @@ interface IssueDetailsBlockProps {
   handleIssues: (issue: IIssue, action: EIssueActions) => void;
   quickActions: (issue: IIssue) => React.ReactNode;
   isReadOnly: boolean;
+  snapshot: DraggableStateSnapshot;
+  isDragDisabled: boolean;
 }
 
 const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
+<<<<<<< HEAD
   const { issue, showEmptyGroup, handleIssues, quickActions, isReadOnly, issuesFilter } = props;
+=======
+  const {
+    sub_group_id,
+    columnId,
+    issue,
+    showEmptyGroup,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    isReadOnly,
+    snapshot,
+    isDragDisabled,
+  } = props;
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   const router = useRouter();
 
@@ -58,29 +80,43 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
     if (issueToUpdate) handleIssues(issueToUpdate, EIssueActions.UPDATE);
   };
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   return (
+<<<<<<< HEAD
     <>
       <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="key">
         <div className="relative">
           <div className="line-clamp-1 text-xs text-custom-text-300">
+=======
+    <div
+      className={`flex flex-col space-y-2 cursor-pointer rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all w-full ${
+        isDragDisabled ? "" : "hover:cursor-grab"
+      } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
+      onClick={handleIssuePeekOverview}
+    >
+      {displayProperties && displayProperties?.key && (
+        <div className="relative w-full ">
+          <div className="line-clamp-1 text-xs text-left text-custom-text-300">
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
             {issue.project_detail.identifier}-{issue.sequence_id}
           </div>
           <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
         </div>
       </WithDisplayPropertiesHOC>
       <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-        <div className="line-clamp-2 text-sm font-medium text-custom-text-100" onClick={handleIssuePeekOverview}>
+        <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
-          {issue.name}
-        </div>
       </Tooltip>
       <div>
         <IssueProperties
@@ -91,7 +127,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
           isReadOnly={isReadOnly}
         />
       </div>
-    </>
+    </div>
   );
 };
 
@@ -119,10 +155,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
 
   return (
     <>
-      <Draggable draggableId={draggableId} index={index}>
+      <Draggable draggableId={draggableId} index={index} isDragDisabled={!canEditIssueProperties}>
         {(provided, snapshot) => (
           <div
-            className="group/kanban-block relative p-1.5 hover:cursor-default"
+            className="group/kanban-block relative p-1.5"
             {...provided.draggableProps}
             {...provided.dragHandleProps}
             ref={provided.innerRef}
@@ -130,6 +166,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
             {issue.tempId !== undefined && (
               <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
             )}
+<<<<<<< HEAD
             <div
               className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
                 isDragDisabled ? "" : "hover:cursor-grab"
@@ -144,6 +181,20 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
                 isReadOnly={!canEditIssueProperties}
               />
             </div>
+=======
+            <KanbanIssueMemoBlock
+              sub_group_id={sub_group_id}
+              columnId={columnId}
+              issue={issue}
+              showEmptyGroup={showEmptyGroup}
+              handleIssues={handleIssues}
+              quickActions={quickActions}
+              displayProperties={displayProperties}
+              isReadOnly={!canEditIssueProperties}
+              snapshot={snapshot}
+              isDragDisabled={isDragDisabled}
+            />
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
           </div>
         )}
       </Draggable>

web/components/issues/issue-layouts/list/base-list-root.tsx

@@ -168,7 +168,9 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={async (issueToUpdate) => await handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
+          handleIssue={async (issueToUpdate, action: EIssueActions) =>
+            await handleIssues(issueToUpdate as IIssue, action)
+          }
         />
       )}
     </>

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

@@ -25,20 +25,27 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
     handleIssues(issueToUpdate, EIssueActions.UPDATE);
   };
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   const canEditIssueProperties = canEditProperties(issue.project);
 
   return (
     <>
-      <div className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm">
+      <button
+        className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm w-full"
+        onClick={handleIssuePeekOverview}
+      >
         {displayProperties && displayProperties?.key && (
           <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
             {issue?.project_detail?.identifier}-{issue.sequence_id}
@@ -49,10 +56,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
           <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
         )}
         <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-          <div
+          <div className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100 text-left">
-            className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100"
-            onClick={handleIssuePeekOverview}
-          >
             {issue.name}
           </div>
         </Tooltip>
@@ -75,7 +79,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
             </div>
           )}
         </div>
-      </div>
+      </button>
     </>
   );
 };

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

@@ -40,11 +40,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
     handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
   };
 
-  const handleStartDate = (date: string) => {
+  const handleStartDate = (date: string | null) => {
     handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
   };
 
-  const handleTargetDate = (date: string) => {
+  const handleTargetDate = (date: string | null) => {
     handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
   };
 
@@ -106,7 +106,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       {displayProperties && displayProperties?.start_date && (
         <IssuePropertyDate
           value={issue?.start_date || null}
-          onChange={(date: string) => handleStartDate(date)}
+          onChange={(date) => handleStartDate(date)}
           disabled={isReadonly}
           type="start_date"
         />
@@ -116,7 +116,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       {displayProperties && displayProperties?.due_date && (
         <IssuePropertyDate
           value={issue?.target_date || null}
-          onChange={(date: string) => handleTargetDate(date)}
+          onChange={(date) => handleTargetDate(date)}
           disabled={isReadonly}
           type="target_date"
         />

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

@@ -52,12 +52,29 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
     handleIssues({ ...issue, assignees: ids });
   };
 
+<<<<<<< HEAD:web/components/issues/issue-layouts/properties/all-properties.tsx
   const handleStartDate = (date: string) => {
     handleIssues({ ...issue, start_date: date });
   };
 
   const handleTargetDate = (date: string) => {
     handleIssues({ ...issue, target_date: date });
+=======
+  const handleStartDate = (date: string | null) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, start_date: date }
+    );
+  };
+
+  const handleTargetDate = (date: string | null) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, target_date: date }
+    );
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434:web/components/issues/issue-layouts/kanban/properties.tsx
   };
 
   const handleEstimate = (value: number | null) => {
@@ -106,7 +123,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="start_date">
         <IssuePropertyDate
           value={issue?.start_date || null}
-          onChange={(date: string) => handleStartDate(date)}
+          onChange={(date) => handleStartDate(date)}
           disabled={isReadOnly}
           type="start_date"
         />
@@ -116,7 +133,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       <WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="due_date">
         <IssuePropertyDate
           value={issue?.target_date || null}
-          onChange={(date: string) => handleTargetDate(date)}
+          onChange={(date) => handleTargetDate(date)}
           disabled={isReadOnly}
           type="target_date"
         />

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

@@ -42,7 +42,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
   // store
   const {
     workspace: workspaceStore,
-    projectMember: { projectMembers: _projectMembers, fetchProjectMembers },
+    projectMember: { members: _members, fetchProjectMembers },
   } = useMobxStore();
   const workspaceSlug = workspaceStore?.workspaceSlug;
   // states
@@ -51,14 +51,14 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [isLoading, setIsLoading] = useState<Boolean>(false);
 
-  const getWorkspaceMembers = () => {
+  const getProjectMembers = () => {
     setIsLoading(true);
     if (workspaceSlug && projectId) fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
   };
 
   const updatedDefaultOptions: IProjectMember[] =
     defaultOptions.map((member: any) => ({ member: { ...member } })) ?? [];
-  const projectMembers = _projectMembers ?? updatedDefaultOptions;
+  const projectMembers = projectId && _members[projectId] ? _members[projectId] : updatedDefaultOptions;
 
   const options = projectMembers?.map((member) => ({
     value: member.member.id,
@@ -142,7 +142,10 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           className={`flex w-full items-center justify-between gap-1 text-xs ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
           } ${buttonClassName}`}
-          onClick={() => !projectMembers && getWorkspaceMembers()}
+          onClick={(e) => {
+            e.stopPropagation();
+            (!projectId || !_members[projectId]) && getProjectMembers();
+          }}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -168,7 +171,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
             {isLoading ? (
               <p className="text-center text-custom-text-200">Loading...</p>
-            ) : filteredOptions.length > 0 ? (
+            ) : filteredOptions && filteredOptions.length > 0 ? (
               filteredOptions.map((option) => (
                 <Combobox.Option
                   key={option.value}
@@ -178,6 +181,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                       active && !selected ? "bg-custom-background-80" : ""
                     } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                   }
+                  onClick={(e) => e.stopPropagation()}
                 >
                   {({ selected }) => (
                     <>

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

@@ -12,11 +12,11 @@ import { Tooltip } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderFormattedDate } from "helpers/date-time.helper";
 
 export interface IIssuePropertyDate {
-  value: any;
+  value: string | null;
-  onChange: (date: any) => void;
+  onChange: (date: string | null) => void;
   disabled?: boolean;
   type: "start_date" | "target_date";
 }
@@ -56,7 +56,17 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
         return (
           <>
             <Popover.Button
+              as="button"
+              type="button"
               ref={dropdownBtn}
+              className="border-none outline-none"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Tooltip
+                tooltipHeading={dateOptionDetails.placeholder}
+                tooltipContent={value ? renderFormattedDate(value) : "None"}
+              >
+                <div
                   className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
                     disabled
                       ? "pointer-events-none cursor-not-allowed text-custom-text-200"
@@ -67,10 +77,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                     <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
                     {value && (
                       <>
-                    <Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
                         <div className="text-xs">{value}</div>
-                    </Tooltip>
-
                         <div
                           className="flex flex-shrink-0 items-center justify-center"
                           onClick={() => {
@@ -82,6 +89,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                       </>
                     )}
                   </div>
+                </div>
+              </Tooltip>
             </Popover.Button>
 
             <div className={`${open ? "fixed left-0 top-0 z-20 h-full w-full cursor-auto" : ""}`}>
@@ -92,7 +101,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                 {({ close }) => (
                   <DatePicker
                     selected={value ? new Date(value) : new Date()}
-                    onChange={(val: any) => {
+                    onChange={(val, e) => {
+                      e?.stopPropagation();
                       if (onChange && val) {
                         onChange(renderDateFormat(val));
                         close();

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

@@ -116,6 +116,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
           className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
+          onClick={(e) => e.stopPropagation()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -150,6 +151,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                         active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
+                    onClick={(e) => e.stopPropagation()}
                   >
                     {({ selected }) => (
                       <>

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

@@ -106,7 +106,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             {projectLabels
               ?.filter((l) => value.includes(l.id))
               .map((label) => (
-                <Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
+                <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name ?? ""}>
                   <div
                     key={label.id}
                     className={`flex overflow-hidden hover:bg-custom-background-80 ${
@@ -144,6 +144,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           </div>
         )
       ) : (
+        <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
           <div
             className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
               noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
@@ -152,6 +153,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             <Tags className="h-3.5 w-3.5" strokeWidth={2} />
             {placeholderText}
           </div>
+        </Tooltip>
       )}
     </div>
   );
@@ -176,7 +178,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
-          onClick={() => !storeLabels && fetchLabels()}
+          onClick={(e) => {
+            e.stopPropagation();
+            !storeLabels && fetchLabels();
+          }}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -213,6 +218,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                       selected ? "text-custom-text-100" : "text-custom-text-200"
                     }`
                   }
+                  onClick={(e) => e.stopPropagation()}
                 >
                   {({ selected }) => (
                     <>

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

@@ -117,7 +117,14 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
               className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
               } ${buttonClassName}`}
+<<<<<<< HEAD
               onClick={() => !storeStates && handleFetchProjectStates()}
+=======
+              onClick={(e) => {
+                e.stopPropagation();
+                !storeStates && fetchProjectStates();
+              }}
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
             >
               {label}
               {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -153,6 +160,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={(e) => e.stopPropagation()}
                     >
                       {({ selected }) => (
                         <>

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -58,7 +58,12 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         }}
         currentStore={EProjectStore.PROJECT}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -40,7 +40,12 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         handleClose={() => setDeleteIssueModal(false)}
         onSubmit={handleDelete}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -58,7 +58,12 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         }}
         currentStore={EProjectStore.CYCLE}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -58,7 +58,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         }}
         currentStore={EProjectStore.MODULE}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -66,7 +66,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         }}
         currentStore={EProjectStore.PROJECT}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

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

@@ -9,7 +9,7 @@ import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "compon
 
 export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = router.query;
 
   const {
     projectArchivedIssues: { getIssues, fetchIssues },
@@ -18,8 +18,8 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
 
   useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
     if (workspaceSlug && projectId) {
-      await fetchFilters(workspaceSlug, projectId);
+      await fetchFilters(workspaceSlug.toString(), projectId.toString());
-      await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
+      await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
     }
   });
 

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

@@ -25,12 +25,17 @@ export const CycleLayoutRoot: React.FC = observer(() => {
   const [transferIssuesModal, setTransferIssuesModal] = useState(false);
 
   const router = useRouter();
+<<<<<<< HEAD
   const { workspaceSlug, projectId, cycleId } = router.query as {
     workspaceSlug: string;
     projectId: string;
     cycleId: string;
   };
   // store hooks
+=======
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
   const {
     cycleIssues: { loader, getIssues, fetchIssues },
     cycleIssuesFilter: { issueFilters, fetchFilters },
@@ -41,8 +46,13 @@ export const CycleLayoutRoot: React.FC = observer(() => {
     workspaceSlug && projectId && cycleId ? `CYCLE_ISSUES_V3_${workspaceSlug}_${projectId}_${cycleId}` : null,
     async () => {
       if (workspaceSlug && projectId && cycleId) {
-        await fetchFilters(workspaceSlug, projectId, cycleId);
+        await fetchFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
-        await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader", cycleId);
+        await fetchIssues(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          getIssues ? "mutation" : "init-loader",
+          cycleId.toString()
+        );
       }
     }
   );
@@ -70,7 +80,11 @@ export const CycleLayoutRoot: React.FC = observer(() => {
         ) : (
           <>
             {Object.keys(getIssues ?? {}).length == 0 ? (
-              <CycleEmptyState workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
+              <CycleEmptyState
+                workspaceSlug={workspaceSlug?.toString()}
+                projectId={projectId?.toString()}
+                cycleId={cycleId?.toString()}
+              />
             ) : (
               <div className="h-full w-full overflow-auto">
                 {activeLayout === "list" ? (

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

@@ -11,7 +11,7 @@ import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
 
 export const DraftIssueLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = router.query;
 
   const {
     projectDraftIssuesFilter: { issueFilters, fetchFilters },
@@ -20,8 +20,8 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
 
   useSWR(workspaceSlug && projectId ? `DRAFT_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
     if (workspaceSlug && projectId) {
-      await fetchFilters(workspaceSlug, projectId);
+      await fetchFilters(workspaceSlug.toString(), projectId.toString());
-      await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
+      await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
     }
   });
 

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

@@ -20,11 +20,7 @@ import { Spinner } from "@plane/ui";
 
 export const ModuleLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query as {
+  const { workspaceSlug, projectId, moduleId } = router.query;
-    workspaceSlug: string;
-    projectId: string;
-    moduleId: string;
-  };
 
   const {
     moduleIssues: { loader, getIssues, fetchIssues },
@@ -35,8 +31,13 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     workspaceSlug && projectId && moduleId ? `MODULE_ISSUES_V3_${workspaceSlug}_${projectId}_${moduleId}` : null,
     async () => {
       if (workspaceSlug && projectId && moduleId) {
-        await fetchFilters(workspaceSlug, projectId, moduleId);
+        await fetchFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
-        await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader", moduleId);
+        await fetchIssues(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          getIssues ? "mutation" : "init-loader",
+          moduleId.toString()
+        );
       }
     }
   );
@@ -54,7 +55,11 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
       ) : (
         <>
           {Object.keys(getIssues ?? {}).length == 0 ? (
-            <ModuleEmptyState workspaceSlug={workspaceSlug} projectId={projectId} moduleId={moduleId} />
+            <ModuleEmptyState
+              workspaceSlug={workspaceSlug?.toString()}
+              projectId={projectId?.toString()}
+              moduleId={moduleId?.toString()}
+            />
           ) : (
             <div className="h-full w-full overflow-auto">
               {activeLayout === "list" ? (

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

@@ -21,13 +21,14 @@ import { EIssuesStoreType } from "constants/issue";
 export const ProjectLayoutRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = router.query;
 
   const {
     issues: { loader, getIssues, fetchIssues },
     issuesFilter: { issueFilters, fetchFilters },
   } = useIssues(EIssuesStoreType.PROJECT);
 
+<<<<<<< HEAD
   useSWR(
     workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null,
     async () => {
@@ -61,6 +62,14 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
   // console.log("issueGetIssuesIds", issueGetIssuesIds);
   // console.log("issueGetIssues", issueGetIssues);
   // console.log("---");
+=======
+  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
+    if (workspaceSlug && projectId) {
+      await fetchFilters(workspaceSlug.toString(), projectId.toString());
+      await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
+    }
+  });
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   const activeLayout = issueFilters?.displayFilters?.layout;
 

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

@@ -18,11 +18,7 @@ import { Spinner } from "@plane/ui";
 
 export const ProjectViewLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query as {
+  const { workspaceSlug, projectId, viewId } = router.query;
-    workspaceSlug: string;
-    projectId: string;
-    viewId?: string;
-  };
 
   const {
     viewIssues: { loader, getIssues, fetchIssues },
@@ -31,8 +27,8 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
 
   useSWR(workspaceSlug && projectId && viewId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
     if (workspaceSlug && projectId && viewId) {
-      await fetchFilters(workspaceSlug, projectId, viewId);
+      await fetchFilters(workspaceSlug.toString(), projectId.toString(), viewId.toString());
-      await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
+      await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
     }
   });
 

web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx

@@ -34,13 +34,17 @@ export const IssueColumn: React.FC<Props> = ({
 
   const menuActionRef = useRef<HTMLDivElement | null>(null);
 
-  const handleIssuePeekOverview = (issue: IIssue) => {
+  const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   const paddingLeft = `${nestingLevel * 54}px`;
@@ -99,7 +103,7 @@ export const IssueColumn: React.FC<Props> = ({
           <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
             <div
               className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
-              onClick={() => handleIssuePeekOverview(issue)}
+              onClick={(e) => handleIssuePeekOverview(issue, e)}
             >
               {issue.name}
             </div>

web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx

@@ -6,8 +6,6 @@ import { IssuePropertyState } from "../../properties";
 import useSubIssue from "hooks/use-sub-issue";
 // types
 import { IIssue, IState } from "types";
-import { mutate } from "swr";
-import { SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   issue: IIssue;

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -194,7 +194,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={async (issueToUpdate: any) => await handleIssues(issueToUpdate, EIssueActions.UPDATE)}
+          handleIssue={async (issueToUpdate: any, action: EIssueActions) => await handleIssues(issueToUpdate, action)}
         />
       )}
     </div>

web/components/issues/main-content.tsx

@@ -40,7 +40,7 @@ const issueService = new IssueService();
 const issueCommentService = new IssueCommentService();
 
 export const IssueMainContent: React.FC<Props> = observer((props) => {
-  const { issueDetails, submitChanges, uneditable = false } = props;
+  const { issueDetails, submitChanges, uneditable } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // router
@@ -151,7 +151,13 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
       );
   };
 
+<<<<<<< HEAD
   const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+=======
+  const isAllowed =
+    (!!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER) ||
+    (uneditable !== undefined && !uneditable);
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   return (
     <>
@@ -231,7 +237,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug as string}
           issue={issueDetails}
           handleFormSubmit={submitChanges}
-          isAllowed={isAllowed || !uneditable}
+          isAllowed={isAllowed}
         />
 
         {workspaceSlug && projectId && (
@@ -249,8 +255,8 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
       <div className="flex flex-col gap-3 py-3">
         <h3 className="text-lg">Attachments</h3>
         <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-          <IssueAttachmentUpload disabled={uneditable} />
+          <IssueAttachmentUpload disabled={!isAllowed} />
-          <IssueAttachments />
+          <IssueAttachments editable={isAllowed} />
         </div>
       </div>
       <div className="space-y-5 pt-3">
@@ -263,8 +269,13 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         />
         <AddComment
           onSubmit={handleAddComment}
+<<<<<<< HEAD
           disabled={uneditable}
           showAccessSpecifier={Boolean(projectDetails && projectDetails.is_deployed)}
+=======
+          disabled={!isAllowed}
+          showAccessSpecifier={projectDetails && projectDetails.is_deployed}
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
         />
       </div>
     </>

web/components/issues/peek-overview/issue-detail.tsx

@@ -153,10 +153,12 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
                   debouncedFormSave();
                 }}
                 required={true}
-                className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent  !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary"
+                className={`min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent  !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary ${
+                  !isAllowed ? "hover:cursor-not-allowed" : ""
+                }`}
                 hasError={Boolean(errors?.description)}
                 role="textbox"
-                disabled={!true}
+                disabled={!isAllowed}
               />
             )}
           />
@@ -188,7 +190,9 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               dragDropEnabled
-              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+              customClassName={
+                isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none"
+              }
               noBorder={!isAllowed}
               onChange={(description: Object, description_html: string) => {
                 setShowAlert(true);

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

@@ -49,7 +49,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   const { getProjectById } = useProject();
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, peekProjectId: projectId } = router.query;
 
   const handleState = (_state: string) => {
     issueUpdate({ ...issue, state: _state });
@@ -118,7 +118,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>
 
@@ -131,6 +136,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarAssigneeSelect
                 value={issue.assignees || []}
+                projectId={projectId as string}
                 onChange={handleAssignee}
                 disabled={disableUserActions}
               />
@@ -212,7 +218,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>
@@ -228,6 +239,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarCycleSelect
                 issueDetail={issue}
+                projectId={projectId as string}
                 disabled={disableUserActions}
                 handleIssueUpdate={handleCycleOrModuleChange}
               />
@@ -242,6 +254,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarModuleSelect
                 issueDetail={issue}
+                projectId={projectId as string}
                 disabled={disableUserActions}
                 handleIssueUpdate={handleCycleOrModuleChange}
               />
@@ -255,6 +268,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

@@ -11,6 +11,7 @@ import { IssueView } from "components/issues";
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IIssue, IIssueLink } from "types";
+import { EIssueActions } from "../issue-layouts/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
 
@@ -18,7 +19,7 @@ interface IIssuePeekOverview {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
-  handleIssue: (issue: Partial<IIssue>) => void;
+  handleIssue: (issue: Partial<IIssue>, action: EIssueActions) => Promise<void>;
   isArchived?: boolean;
   children?: ReactNode;
 }
@@ -30,8 +31,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   const { peekIssueId } = router.query;
 
   const {
-    user: { currentProjectRole },
-    issue: { removeIssueFromStructure },
     issueDetail: {
       createIssueComment,
       updateIssueComment,
@@ -58,6 +57,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     },
     archivedIssues: { deleteArchivedIssue },
     project: { currentProjectDetails },
+    workspaceMember: { currentWorkspaceUserProjectsRole },
   } = useMobxStore();
 
   const { setToastAlert } = useToast();
@@ -98,7 +98,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
 
   const issueUpdate = async (_data: Partial<IIssue>) => {
     if (handleIssue) {
-      await handleIssue(_data);
+      await handleIssue(_data, EIssueActions.UPDATE);
       fetchIssueActivity(workspaceSlug, projectId, issueId);
     }
   };
@@ -133,7 +133,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
 
   const handleDeleteIssue = async () => {
     if (isArchived) await deleteArchivedIssue(workspaceSlug, projectId, issue!);
-    else removeIssueFromStructure(workspaceSlug, projectId, issue!);
+    else await handleIssue(issue!, EIssueActions.DELETE);
     const { query } = router;
     if (query.peekIssueId) {
       setPeekId(null);
@@ -146,7 +146,12 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     }
   };
 
+<<<<<<< HEAD
   const userRole = currentProjectRole ?? EUserProjectRoles.GUEST;
+=======
+  const userRole =
+    (currentWorkspaceUserProjectsRole && currentWorkspaceUserProjectsRole[projectId]) ?? EUserWorkspaceRoles.GUEST;
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   return (
     <Fragment>

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useState } from "react";
+import { FC, ReactNode, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -14,6 +14,8 @@ import {
   PeekOverviewIssueDetails,
   PeekOverviewProperties,
 } from "components/issues";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
 import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
 // types
@@ -107,6 +109,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  // ref
+  const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
 
   const updateRoutePeekId = () => {
     if (issueId != peekIssueId) {
@@ -151,6 +155,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
   const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
 
+  useOutsideClickDetector(issuePeekOverviewRef, () => removeRoutePeekId());
+
   return (
     <>
       {issue && !isArchived && (
@@ -178,6 +184,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
         {issueId === peekIssueId && (
           <div
+            ref={issuePeekOverviewRef}
             className={`fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300 
           ${peekMode === "side-peek" ? `bottom-0 right-0 top-0 w-full md:w-[50%]` : ``}
           ${peekMode === "modal" ? `left-[50%] top-[50%] h-5/6 w-5/6 -translate-x-[50%] -translate-y-[50%]` : ``}

web/components/issues/select/cycle.tsx

@@ -34,7 +34,11 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
     if (workspaceSlug && projectId) fetchAllCycles(workspaceSlug, projectId);
   };
 
+<<<<<<< HEAD
   const selectedCycle = value ? getCycleById(value) : null;
+=======
+  const cycles = cycleStore.cycles?.[projectId]?.["all"] ?? [];
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   const options = projectAllCycles?.map((cycleId) => {
     const cycleDetail = getCycleById(cycleId);

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

@@ -16,6 +16,7 @@ import { IIssue, IIssueLabel } from "types";
 
 type Props = {
   issueDetails: IIssue | undefined;
+  projectId: string;
   labelList: string[];
   submitChanges: (formData: any) => void;
   isNotAllowed: boolean;
@@ -28,12 +29,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,29 +1,40 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+<<<<<<< HEAD
 import { mutate } from "swr";
 // hooks
 import { useModule } from "hooks/store";
+=======
+import useSWR, { mutate } from "swr";
+// mobx store
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 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 {
     moduleIssues: { removeIssueFromModule, addIssueToModule },
@@ -32,6 +43,13 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
 
   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

@@ -289,6 +289,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}
                           />
@@ -310,6 +311,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}

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

@@ -10,6 +10,7 @@ import { CustomMenu, Tooltip } from "@plane/ui";
 // types
 import { IUser, IIssue } from "types";
 import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+import { EIssueActions } from "../issue-layouts/types";
 
 export interface ISubIssues {
   workspaceSlug: string;
@@ -29,6 +30,7 @@ export interface ISubIssues {
     issue?: IIssue | null
   ) => void;
   handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  handleDeleteIssue: (issue: IIssue) => Promise<void>;
 }
 
 export const SubIssues: React.FC<ISubIssues> = ({
@@ -45,17 +47,22 @@ export const SubIssues: React.FC<ISubIssues> = ({
   copyText,
   handleIssueCrudOperation,
   handleUpdateIssue,
+  handleDeleteIssue,
 }) => {
   const router = useRouter();
   const { peekProjectId, peekIssueId } = router.query;
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   return (
@@ -65,7 +72,13 @@ export const SubIssues: React.FC<ISubIssues> = ({
           workspaceSlug={workspaceSlug}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={async (issueToUpdate) => await handleUpdateIssue(issue, { ...issue, ...issueToUpdate })}
+          handleIssue={async (issueToUpdate, action) => {
+            if (action === EIssueActions.UPDATE) {
+              await handleUpdateIssue(issue, { ...issue, ...issueToUpdate });
+            } else if (action === EIssueActions.DELETE) {
+              await handleDeleteIssue(issue);
+            }
+          }}
         />
       )}
       <div>
@@ -176,6 +189,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
 
         {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
           <SubIssuesRootList
+            handleDeleteIssue={handleDeleteIssue}
             workspaceSlug={workspaceSlug}
             projectId={projectId}
             parentIssue={issue}

web/components/issues/sub-issues/issues-list.tsx

@@ -27,6 +27,7 @@ export interface ISubIssuesRootList {
     issue?: IIssue | null
   ) => void;
   handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  handleDeleteIssue: (issue: IIssue) => Promise<void>
 }
 
 const issueService = new IssueService();
@@ -44,6 +45,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   copyText,
   handleIssueCrudOperation,
   handleUpdateIssue,
+  handleDeleteIssue
 }) => {
   const { data: issues, isLoading } = useSWR(
     workspaceSlug && projectId && parentIssue && parentIssue?.id ? SUB_ISSUES(parentIssue?.id) : null,
@@ -70,6 +72,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
           issues.sub_issues.length > 0 &&
           issues.sub_issues.map((issue: IIssue) => (
             <SubIssues
+            handleDeleteIssue={handleDeleteIssue}
               key={`${issue?.id}`}
               workspaceSlug={workspaceSlug}
               projectId={projectId}

web/components/issues/sub-issues/root.tsx

@@ -179,7 +179,21 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
     [updateIssueStructure, projectId, updateIssue, user, workspaceSlug]
   );
 
+<<<<<<< HEAD
   const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+=======
+  const handleDeleteIssue = useCallback(
+    async (issue: IIssue) => {
+      if (!workspaceSlug || !projectId || !user) return;
+
+      await removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
+      await mutate(SUB_ISSUES(parentIssue?.id));
+    },
+    [removeIssue, projectId, user, workspaceSlug, parentIssue?.id]
+  );
+
+  const isEditable = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   const mutateSubIssues = (parentIssueId: string | null) => {
     if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
@@ -239,6 +253,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
               {issuesLoader.visibility.includes(parentIssue?.id) && workspaceSlug && projectId && (
                 <div className="border border-b-0 border-custom-border-100">
                   <SubIssuesRootList
+                    handleDeleteIssue={handleDeleteIssue}
                     workspaceSlug={workspaceSlug.toString()}
                     projectId={projectId.toString()}
                     parentIssue={parentIssue}

web/components/modules/modules-list-view.tsx

@@ -94,11 +94,15 @@ export const ModulesListView: React.FC = observer(() => {
             description:
               "A cart module, a chassis module, and a warehouse module are all good example of this grouping.",
           }}
-          primaryButton={{
+          primaryButton={
+            isEditingAllowed
+              ? {
                   icon: <Plus className="h-4 w-4" />,
                   text: "Build your first module",
                   onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
-          }}
+                }
+              : null
+          }
           disabled={!isEditingAllowed}
         />
       )}

web/components/modules/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
@@ -25,7 +25,8 @@ import {
 } from "helpers/date-time.helper";
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
-import { ILinkDetails, IModule, ModuleLink } from "types";
+import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "types";
+import { EFilterType } from "store/issues/types";
 // constant
 import { MODULE_STATUS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
@@ -55,9 +56,22 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, peekModule } = router.query;
   // store hooks
   const {
+<<<<<<< HEAD
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
+=======
+    module: {
+      moduleDetails: _moduleDetails,
+      updateModuleDetails,
+      createModuleLink,
+      updateModuleLink,
+      deleteModuleLink,
+    },
+    moduleIssuesFilter: { issueFilters, updateFilters },
+    user: userStore,
+  } = useMobxStore();
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
   const moduleDetails = getModuleById(moduleId);
 
@@ -204,6 +218,25 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     }
   };
 
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { [key]: newValues }, moduleId);
+    },
+    [workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
+  );
+
   useEffect(() => {
     if (moduleDetails)
       reset({
@@ -537,6 +570,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                               totalIssues={moduleDetails.total_issues}
                               module={moduleDetails}
                               isPeekView={Boolean(peekModule)}
+                              filters={issueFilters?.filters}
+                              handleFiltersUpdate={handleFiltersUpdate}
                             />
                           </div>
                         )}
@@ -596,6 +631,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                               <Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
                               <span className="p-0.5 text-xs text-custom-text-300">No links added yet</span>
                             </div>
+                            {isEditingAllowed && (
                               <button
                                 className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
                                 onClick={() => setModuleLinkModal(true)}
@@ -603,6 +639,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 <Plus className="h-3 w-3" />
                                 Add link
                               </button>
+                            )}
                           </div>
                         )}
                       </div>

web/components/page-views/workspace-dashboard.tsx

@@ -93,13 +93,17 @@ export const WorkspaceDashboardView = observer(() => {
                 direction: "right",
                 description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
               }}
-              primaryButton={{
+              primaryButton={
+                isEditingAllowed
+                  ? {
                       text: "Build your first project",
                       onClick: () => {
                         setTrackElement("DASHBOARD_PAGE");
                         commandPaletteStore.toggleCreateProjectModal(true);
                       },
-              }}
+                    }
+                  : null
+              }
               disabled={!isEditingAllowed}
             />
           )

web/components/pages/pages-list/list-view.tsx

@@ -59,11 +59,15 @@ export const PagesListView: FC<IPagesListView> = observer((props) => {
                   "We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
                 direction: "right",
               }}
-              primaryButton={{
+              primaryButton={
+                isEditingAllowed
+                  ? {
                       icon: <Plus className="h-4 w-4" />,
                       text: "Create your first page",
                       onClick: () => toggleCreatePageModal(true),
-              }}
+                    }
+                  : null
+              }
               disabled={!isEditingAllowed}
             />
           )}

web/components/pages/pages-list/recent-pages-list.tsx

@@ -66,11 +66,15 @@ export const RecentPagesList: FC = observer(() => {
                 "We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
               direction: "right",
             }}
-            primaryButton={{
+            primaryButton={
+              isEditingAllowed
+                ? {
                     icon: <Plus className="h-4 w-4" />,
                     text: "Create your first page",
                     onClick: () => commandPaletteStore.toggleCreatePageModal(true),
-            }}
+                  }
+                : null
+            }
             disabled={!isEditingAllowed}
           />
         </>

web/components/project/card-list.tsx

@@ -64,13 +64,17 @@ export const ProjectCardList = observer(() => {
             direction: "right",
             description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
           }}
-          primaryButton={{
+          primaryButton={
+            isEditingAllowed
+              ? {
                   text: "Start your first project",
                   onClick: () => {
                     setTrackElement("PROJECTS_EMPTY_STATE");
                     commandPaletteStore.toggleCreateProjectModal(true);
                   },
-          }}
+                }
+              : null
+          }
           disabled={!isEditingAllowed}
         />
       )}

web/components/project/create-project-modal.tsx

@@ -308,8 +308,8 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               message: "Identifier must at least be of 1 character",
                             },
                             maxLength: {
-                              value: 12,
+                              value: 6,
-                              message: "Identifier must at most be of 12 characters",
+                              message: "Identifier must at most be of 6 characters",
                             },
                           }}
                           render={({ field: { value, onChange } }) => (

web/components/project/form.tsx

@@ -231,7 +231,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
           />
         </div>
 
-        <div className="flex w-full items-center justify-between gap-10">
+        <div className="flex w-full items-baseline justify-between gap-10">
           <div className="flex w-1/2 flex-col gap-1">
             <h4 className="text-sm">Identifier</h4>
             <Controller
@@ -245,8 +245,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                   message: "Identifier must at least be of 1 character",
                 },
                 maxLength: {
-                  value: 12,
+                  value: 6,
-                  message: "Identifier must at most be of 5 characters",
+                  message: "Identifier must at most be of 6 characters",
                 },
               }}
               render={({ field: { value, ref } }) => (
@@ -264,6 +264,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 />
               )}
             />
+            <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
           </div>
 
           <div className="flex w-1/2 flex-col gap-1">

web/components/project/priority-select.tsx

@@ -93,6 +93,7 @@ export const PrioritySelect: React.FC<Props> = ({
           className={`flex h-full w-full items-center justify-between gap-1 ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
           } ${buttonClassName}`}
+          onClick={(e) => e.stopPropagation()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
@@ -127,6 +128,7 @@ export const PrioritySelect: React.FC<Props> = ({
                         active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
+                    onClick={(e) => e.stopPropagation()}
                   >
                     {({ selected }) => (
                       <>

web/components/views/views-list.tsx

@@ -73,11 +73,23 @@ export const ProjectViewsList = observer(() => {
             description: "You can create a view from here with as many properties as filters as you see fit.",
             direction: "right",
           }}
+<<<<<<< HEAD
           primaryButton={{
             icon: <Plus size={14} strokeWidth={2} />,
             text: "Build your first view",
             onClick: () => toggleCreateViewModal(true),
           }}
+=======
+          primaryButton={
+            isEditingAllowed
+              ? {
+                  icon: <Plus size={14} strokeWidth={2} />,
+                  text: "Build your first view",
+                  onClick: () => commandPaletteStore.toggleCreateViewModal(true),
+                }
+              : null
+          }
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
           disabled={!isEditingAllowed}
         />
       )}

web/components/workspace/views/header.tsx

@@ -9,7 +9,7 @@ import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 // icon
 import { Plus } from "lucide-react";
 // constants
-import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
 
 export const GlobalViewsHeader: React.FC = observer(() => {
   const [createViewModal, setCreateViewModal] = useState(false);
@@ -17,7 +17,10 @@ export const GlobalViewsHeader: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query;
 
-  const { globalViews: globalViewsStore } = useMobxStore();
+  const {
+    globalViews: globalViewsStore,
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
 
   // bring the active view to the centre of the header
   useEffect(() => {
@@ -28,11 +31,13 @@ export const GlobalViewsHeader: React.FC = observer(() => {
     if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
   }, [globalViewId]);
 
+  const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+
   const isTabSelected = (tabKey: string) => router.pathname.includes(tabKey);
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="group relative flex w-full items-center overflow-x-scroll border-b border-custom-border-200 px-4">
+      <div className="group relative flex w-full items-center overflow-x-scroll border-b border-custom-border-200 px-4 py-2">
         {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
           <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
             <span
@@ -62,13 +67,15 @@ export const GlobalViewsHeader: React.FC = observer(() => {
           </Link>
         ))}
 
+        {isAuthorizedUser && (
           <button
             type="button"
-          className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
+            className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
             onClick={() => setCreateViewModal(true)}
           >
             <Plus className="h-4 w-4 text-custom-primary-200" />
           </button>
+        )}
       </div>
     </>
   );

web/constants/issue.ts

@@ -84,7 +84,7 @@ export const ISSUE_ORDER_BY_OPTIONS: {
   { key: "-updated_at", title: "Last Updated" },
   { key: "start_date", title: "Start Date" },
   { key: "target_date", title: "Due Date" },
-  { key: "priority", title: "Priority" },
+  { key: "-priority", title: "Priority" },
 ];
 
 export const ISSUE_FILTER_OPTIONS: {
@@ -233,7 +233,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -246,7 +246,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels"],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -261,7 +261,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state", "state_detail.group", "priority", "labels", "assignees", "created_by", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -276,7 +276,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -289,7 +289,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels"],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -317,7 +317,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state", "priority", "labels", "assignees", "created_by", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -331,7 +331,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_filters: {
         group_by: ["state", "priority", "labels", "assignees", "created_by"],
         sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority", "target_date"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority", "target_date"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -354,7 +354,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -366,7 +366,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: false,
       display_filters: {
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {

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

@@ -31,6 +31,18 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   const { children } = props;
   // store
   const {
+<<<<<<< HEAD
+=======
+    user: { fetchUserProjectInfo, projectMemberInfo, hasPermissionToCurrentProject },
+    project: { fetchProjectDetails, workspaceProjects },
+    projectLabel: { fetchProjectLabels },
+    projectMember: { fetchProjectMembers },
+    projectState: { fetchProjectStates },
+    projectEstimates: { fetchProjectEstimates },
+    cycle: { fetchCycles },
+    module: { fetchModules },
+    projectViews: { fetchAllViews },
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
     inbox: { fetchInboxesList, isInboxEnabled },
   } = useMobxStore();
   const {
@@ -67,43 +79,77 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   );
   // fetching project labels
   useSWR(
-    workspaceSlug && projectId ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
+      : null
   );
   // fetching project members
   useSWR(
-    workspaceSlug && projectId ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
-    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null
+      ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}`
+      : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
+      : null
   );
   // fetching project states
   useSWR(
-    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString())
+      : null
   );
   // fetching project estimates
   useSWR(
-    workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
-    workspaceSlug && projectId ? () => fetchProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null
+      ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}`
+      : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => fetchProjectEstimates(workspaceSlug.toString(), projectId.toString())
+      : null
   );
   // fetching project cycles
   useSWR(
+<<<<<<< HEAD
     workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,
     workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null
+=======
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}`
+      : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => fetchCycles(workspaceSlug.toString(), projectId.toString(), "all")
+      : null
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
   );
   // fetching project modules
   useSWR(
-    workspaceSlug && projectId ? `PROJECT_MODULES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
-    workspaceSlug && projectId ? () => fetchModules(workspaceSlug.toString(), projectId.toString()) : null
+      ? `PROJECT_MODULES_${workspaceSlug}_${projectId}`
+      : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => fetchModules(workspaceSlug.toString(), projectId.toString())
+      : null
   );
   // fetching project views
   useSWR(
+<<<<<<< HEAD
     workspaceSlug && projectId ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
     workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null
+=======
+    workspaceSlug && projectId && hasPermissionToCurrentProject ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject
+      ? () => fetchAllViews(workspaceSlug.toString(), projectId.toString())
+      : null
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
   );
   // fetching project inboxes if inbox is enabled
   useSWR(
-    workspaceSlug && projectId && isInboxEnabled ? `PROJECT_INBOXES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject && isInboxEnabled
-    workspaceSlug && projectId && isInboxEnabled
+      ? `PROJECT_INBOXES_${workspaceSlug}_${projectId}`
+      : null,
+    workspaceSlug && projectId && hasPermissionToCurrentProject && isInboxEnabled
       ? () => fetchInboxesList(workspaceSlug.toString(), projectId.toString())
       : null,
     {
@@ -115,7 +161,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   const projectExists = projectId ? getProjectById(projectId.toString()) : null;
 
   // check if the project member apis is loading
-  if (!projectMemberInfo && projectId && hasPermissionToProject[projectId.toString()] === null)
+  if (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null)
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
@@ -125,10 +171,10 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     );
 
   // check if the user don't have permission to access the project
-  if (projectExists && projectId && hasPermissionToProject[projectId.toString()] === false) return <JoinProject />;
+  if (projectExists && projectId && hasPermissionToCurrentProject === false) return <JoinProject />;
 
   // check if the project info is not found.
-  if (!projectExists && projectId && hasPermissionToProject[projectId.toString()] === false)
+  if (!projectExists && projectId && hasPermissionToCurrentProject === false)
     return (
       <div className="container grid h-screen place-items-center bg-custom-background-100">
         <EmptyState

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

@@ -2,8 +2,12 @@ import { FC, ReactNode } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+<<<<<<< HEAD
 // hooks
 import { useUser, useWorkspace } from "hooks/store";
+=======
+import useSWRImmutable from "swr/immutable";
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 // ui
 import { Spinner } from "@plane/ui";
 
@@ -29,7 +33,7 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
     shouldRetryOnError: false,
   });
   // fetching current user instance admin status
-  useSWR("CURRENT_USER_INSTANCE_ADMIN_STATUS", () => fetchCurrentUserInstanceAdminStatus(), {
+  useSWRImmutable("CURRENT_USER_INSTANCE_ADMIN_STATUS", () => fetchCurrentUserInstanceAdminStatus(), {
     shouldRetryOnError: false,
   });
   // fetching user settings

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

@@ -33,23 +33,30 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   );
   // fetching workspace projects
   useSWR(
-    workspaceSlug ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchProjects(workspaceSlug.toString()) : null
+    workspaceSlug && hasPermissionToCurrentWorkspace ? () => fetchProjects(workspaceSlug.toString()) : null
   );
   // fetch workspace members
   useSWR(
-    workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
+    workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
+    workspaceSlug && hasPermissionToCurrentWorkspace ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
   );
   // fetch workspace labels
   useSWR(
-    workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
+    workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
+    workspaceSlug && hasPermissionToCurrentWorkspace ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
   );
   // fetch workspace user projects role
   useSWR(
+<<<<<<< HEAD
     workspaceSlug ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,
     workspaceSlug ? () => membership.fetchUserWorkspaceProjectsRole(workspaceSlug.toString()) : null
+=======
+    workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,
+    workspaceSlug && hasPermissionToCurrentWorkspace
+      ? () => fetchWorkspaceUserProjectsRole(workspaceSlug.toString())
+      : null
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
   );
 
   // while data is being loaded

web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -78,13 +78,17 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
               description:
                 "A sprint, an iteration, and or any other term you use for weekly or fortnightly tracking of work is a cycle.",
             }}
-            primaryButton={{
+            primaryButton={
+              isEditingAllowed
+                ? {
                     icon: <Plus className="h-4 w-4" />,
                     text: "Set your first cycle",
                     onClick: () => {
                       setCreateModal(true);
                     },
-            }}
+                  }
+                : null
+            }
             disabled={!isEditingAllowed}
           />
         </div>

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -503,7 +503,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
               projectId={projectId as string}
               issueId={peekIssueId ? (peekIssueId as string) : ""}
               isArchived={false}
-              handleIssue={(issueToUpdate) => {
+              handleIssue={async (issueToUpdate, action) => {
                 if (peekIssueId && typeof peekIssueId === "string") {
                   handleUpdateIssue(peekIssueId, issueToUpdate);
                 }

web/pages/profile/activity.tsx

@@ -25,7 +25,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
   const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
 
   return (
-    <section className="mx-auto mt-16 flex h-full w-full flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
+    <section className="mx-auto pt-16 flex h-full w-full flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
       <div className="flex items-center border-b border-custom-border-100 pb-3.5">
         <h3 className="text-xl font-medium">Activity</h3>
       </div>
@@ -180,7 +180,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
           </ul>
         </div>
       ) : (
-        <Loader className="space-y-5">
+        <Loader className="space-y-5 mt-5">
           <Loader.Item height="40px" />
           <Loader.Item height="40px" />
           <Loader.Item height="40px" />

web/pages/profile/change-password.tsx

@@ -88,7 +88,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
   return (
     <form
       onSubmit={handleSubmit(handleChangePassword)}
-      className="mx-auto mt-16 flex h-full w-full flex-col gap-8 px-8 pb-8 lg:w-3/5"
+      className="mx-auto pt-16 flex h-full w-full flex-col gap-8 px-8 pb-8 lg:w-3/5"
     >
       <h3 className="text-xl font-medium">Change password</h3>
       <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-10 xl:grid-cols-2 2xl:grid-cols-3">

web/pages/profile/index.tsx

@@ -168,7 +168,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
         )}
       />
       <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-      <div className="mx-auto mt-16 flex h-full w-full flex-col space-y-10 overflow-y-auto px-8 pb-8 lg:w-3/5">
+      <div className="mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto pt-16 px-8 pb-8 lg:w-3/5">
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="flex w-full flex-col gap-8">
             <div className="relative h-44 w-full">

web/pages/profile/preferences.tsx

@@ -48,7 +48,7 @@ const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
   return (
     <>
       {currentUser ? (
-        <div className="mx-auto mt-16 h-full w-full overflow-y-auto px-8 pb-8 lg:w-3/5">
+        <div className="mx-auto pt-16 h-full w-full overflow-y-auto px-8 pb-8 lg:w-3/5">
           <div className="flex items-center border-b border-custom-border-100 pb-3.5">
             <h3 className="text-xl font-medium">Preferences</h3>
           </div>

web/store/issue/issue.store.ts

@@ -28,19 +28,149 @@ export class IssueStore implements IIssueStore {
       // observable
       allIssues: observable,
       // actions
+<<<<<<< HEAD
       addIssue: action,
       updateIssue: action,
       removeIssue: action,
+=======
+      fetchIssues: action,
+      updateIssueStructure: action,
+      removeIssueFromStructure: action,
+      updateGanttIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
+      if (
+        workspaceSlug &&
+        projectId &&
+        hasPermissionToCurrentProject &&
+        this.rootStore.issueFilter.userFilters &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId, "mutation");
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
     });
   }
 
   addIssue = (issues: IIssue[]) => {
     if (issues && issues.length <= 0) return;
 
+<<<<<<< HEAD
     const _issues = { ...this.allIssues };
     issues.forEach((issue) => {
       _issues[issue.id] = issue;
     });
+=======
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueGroup = this.rootStore?.issueFilter?.userDisplayFilters?.group_by || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueGroup
+        ? issueSubGroup
+          ? "groupWithSubGroups"
+          : "grouped"
+        : "ungrouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const projectId: string | null = this.rootStore?.project?.projectId;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    return this.issues?.[projectId]?.[issueType] || null;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+        : [...(issues ?? []), issue];
+    }
+>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
 
     runInAction(() => {
       this.allIssues = _issues;

web/store_legacy/archived-issues/issue.store.ts

@@ -87,10 +87,12 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
     autorun(() => {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
 
       if (
         workspaceSlug &&
         projectId &&
+        hasPermissionToCurrentProject &&
         this.rootStore.archivedIssueFilters.userDisplayFilters &&
         this.rootStore.archivedIssueFilters.userFilters
       )

web/store_legacy/cycle/cycle_issue.store.ts

@@ -89,10 +89,12 @@ export class CycleIssueStore implements ICycleIssueStore {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
       const cycleId = this.rootStore.cycle.cycleId;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
 
       if (
         workspaceSlug &&
         projectId &&
+        hasPermissionToCurrentProject &&
         cycleId &&
         this.rootStore.cycleIssueFilter.cycleFilters &&
         this.rootStore.issueFilter.userDisplayFilters

web/store_legacy/issues/global/issue.store.ts

@@ -182,6 +182,12 @@ export class GlobalIssuesStore extends IssueBaseStore implements IGlobalIssuesSt
 
       const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
 
+      runInAction(() => {
+        _issues = { ...this.issues };
+        _issues[workspaceViewId][issueId] = { ..._issues[workspaceViewId][issueId], ...response };
+        this.issues = _issues;
+      });
+
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, workspaceViewId, "mutation");

web/store_legacy/issues/project-issues/archived/issue.store.ts

@@ -60,7 +60,8 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
     autorun(() => {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
-      if (!workspaceSlug || !projectId) return;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
+      if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
 
       const userFilters = this.rootStore?.projectArchivedIssuesFilter?.issueFilters?.filters;
       if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");

web/store_legacy/issues/project-issues/cycle/issue.store.ts

@@ -119,7 +119,8 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
       const cycleId = this.rootStore.cycle.cycleId;
-      if (!workspaceSlug || !projectId || !cycleId) return;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
+      if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject || !cycleId) return;
 
       const userFilters = this.rootStore?.cycleIssuesFilter?.issueFilters?.filters;
       if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
@@ -238,6 +239,12 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
 
       const response = await this.rootStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
 
+      runInAction(() => {
+        _issues = { ...this.issues };
+        _issues[cycleId][issueId] = { ..._issues[cycleId][issueId], ...response };
+        this.issues = _issues;
+      });
+
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);

web/store_legacy/issues/project-issues/draft/issue.store.ts

@@ -63,7 +63,8 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
     autorun(() => {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
-      if (!workspaceSlug || !projectId) return;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
+      if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
 
       const userFilters = this.rootStore?.projectDraftIssuesFilter?.issueFilters?.filters;
       if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");
@@ -157,6 +158,12 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
 
       const response = await this.issueDraftService.updateDraftIssue(workspaceSlug, projectId, issueId, data);
 
+      runInAction(() => {
+        _issues = { ...this.issues };
+        _issues[projectId][issueId] = { ..._issues[projectId][issueId], ...response };
+        this.issues = _issues;
+      });
+
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, projectId, "mutation");

web/store_legacy/issues/project-issues/module/issue.store.ts

@@ -111,7 +111,8 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
       const moduleId = this.rootStore.module.moduleId;
-      if (!workspaceSlug || !projectId || !moduleId) return;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
+      if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject || !moduleId) return;
 
       const userFilters = this.rootStore?.moduleIssuesFilter?.issueFilters?.filters;
       if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);
@@ -230,6 +231,12 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
 
       const response = await this.rootStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
 
+      runInAction(() => {
+        _issues = { ...this.issues };
+        _issues[moduleId][issueId] = { ..._issues[moduleId][issueId], ...response };
+        this.issues = _issues;
+      });
+
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);

web/store_legacy/issues/project-issues/project-view/issue.store.ts

@@ -65,7 +65,8 @@ export class ViewIssuesStore extends IssueBaseStore implements IViewIssuesStore
     autorun(() => {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
-      if (!workspaceSlug || !projectId) return;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
+      if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
 
       const userFilters = this.rootStore?.viewIssuesFilter?.issueFilters?.filters;
       if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");
@@ -162,6 +163,12 @@ export class ViewIssuesStore extends IssueBaseStore implements IViewIssuesStore
 
       const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
 
+      runInAction(() => {
+        _issues = { ...this.issues };
+        _issues[projectId][issueId] = { ..._issues[projectId][issueId], ...response };
+        this.issues = _issues;
+      });
+
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, projectId, "mutation");

web/store_legacy/issues/project-issues/project/issue.store.ts

@@ -65,7 +65,8 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
     autorun(() => {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
-      if (!workspaceSlug || !projectId) return;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
+      if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
 
       const userFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.filters;
       if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");
@@ -162,6 +163,12 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
 
       const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
 
+      runInAction(() => {
+        _issues = { ...this.issues };
+        _issues[projectId][issueId] = { ..._issues[projectId][issueId], ...response };
+        this.issues = _issues;
+      });
+
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, projectId, "mutation");

web/store_legacy/module/module_issue.store.ts

@@ -91,10 +91,12 @@ export class ModuleIssueStore implements IModuleIssueStore {
       const workspaceSlug = this.rootStore.workspace.workspaceSlug;
       const projectId = this.rootStore.project.projectId;
       const moduleId = this.rootStore.module.moduleId;
+      const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
 
       if (
         workspaceSlug &&
         projectId &&
+        hasPermissionToCurrentProject &&
         moduleId &&
         this.rootStore.moduleFilter.moduleFilters &&
         this.rootStore.issueFilter.userDisplayFilters

web/store_legacy/profile-issues/issue_filters.store.ts

@@ -68,7 +68,6 @@ export class ProfileIssueFilterStore implements IProfileIssueFilterStore {
         const workspaceSlug = this.rootStore.workspace.workspaceSlug;
         const userId = this.rootStore.profileIssues?.userId;
         if (workspaceSlug && userId && this.rootStore.profileIssues.currentProfileTab && this.appliedFilters) {
-          console.log("autorun triggered");
           this.rootStore.profileIssues.fetchIssues(
             workspaceSlug,
             userId,

web/styles/globals.css

@@ -420,6 +420,7 @@ body {
 .vertical-lr {
   -webkit-writing-mode: vertical-lr;
   -ms-writing-mode: vertical-lr;
+  writing-mode: vertical-lr;
 }
 
 div.web-view-spinner {