Fix: project settings pages permissions (#6649)

* fix: Handled workspace switcher closing on click

* fix: permissions for labels dnd + issue state creation

web/core/components/labels/label-drag-n-drop-HOC.tsx

@@ -9,10 +9,12 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
 import { observer } from "mobx-react";
 import { createRoot } from "react-dom/client";
 // types
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IIssueLabel, InstructionType } from "@plane/types";
 // ui
 import { DropIndicator } from "@plane/ui";
 // components
+import { useUserPermissions } from "@/hooks/store";
 import { LabelName } from "./label-block/label-name";
 import { TargetData, getCanDrop, getInstructionFromPayload } from "./label-utils";
 
@@ -58,11 +60,14 @@ export const LabelDndHOC = observer((props: Props) => {
   const labelRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
 
+  const { allowPermissions } = useUserPermissions();
+  const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
   useEffect(() => {
     const element = labelRef.current;
     const dragHandleElement = dragHandleRef.current;
 
-    if (!element) return;
+    if (!element || !isEditable) return;
 
     return combine(
       draggable({

web/core/components/project-states/group-item.tsx

@@ -75,12 +75,16 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
           </div>
           <div className="text-base font-medium text-custom-text-200 capitalize px-1">{groupKey}</div>
         </div>
-        <div
+        <button
-          className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100"
+          className={cn(
+            "flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100",
+            !isEditable && "cursor-not-allowed text-custom-text-400 hover:text-custom-text-400"
+          )}
           onClick={() => !createState && setCreateState(true)}
+          disabled={!isEditable}
         >
           <Plus className="w-4 h-4" />
-        </div>
+        </button>
       </div>
 
       {shouldShowEmptyState && (