[WEB-2443] fix: role validation and code refactor (#5596)

* chore: delete cycle toast message updated

* fix: view page empty state

* fix: project settings automation

* fix: intake delete action

* fix: project label validation

* fix: project label validation

* fix: project state permission updated

* chore: code refactor

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx

@@ -25,7 +25,7 @@ const ProjectViewIssuesPage = observer(() => {
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name && projectView?.name ? `${project?.name} - ${projectView?.name}` : undefined;
 
-  const { error } = useSWR(
+  const { error, isLoading } = useSWR(
     workspaceSlug && projectId && viewId ? `VIEW_DETAILS_${viewId.toString()}` : null,
     workspaceSlug && projectId && viewId
       ? () => fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString())

web/core/components/automation/auto-archive-automation.tsx

@@ -33,7 +33,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
   const isAdmin = allowPermissions(
     [EUserPermissions.ADMIN],
     EUserPermissionsLevel.PROJECT,
-    currentProjectDetails?.workspace_detail.slug,
+    currentProjectDetails?.workspace_detail?.slug,
     currentProjectDetails?.id
   );
 

web/core/components/inbox/content/root.tsx

@@ -67,7 +67,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
     EUserPermissionsLevel.PROJECT
   );
   const isGuest = projectPermissionsByWorkspaceSlugAndProjectId(workspaceSlug, projectId) === EUserPermissions.GUEST;
-  const isOwner = inboxIssue.issue.created_by === currentUser?.id;
+  const isOwner = inboxIssue?.issue.created_by === currentUser?.id;
   const readOnly = !isOwner && isGuest;
 
   if (!inboxIssue) return <></>;

web/core/components/inbox/modals/create-edit-modal/issue-properties.tsx

@@ -91,7 +91,6 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
       {/* labels */}
       <div className="h-7">
         <IssueLabelSelect
-          createLabelEnabled={false}
           setIsOpen={() => {}}
           value={data?.label_ids || []}
           onChange={(labelIds) => handleData("label_ids", labelIds)}

web/core/components/issues/issue-modal/components/default-properties.tsx

@@ -26,10 +26,11 @@ import { ETabIndices } from "@/constants/tab-indices";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
-import { useProjectEstimates, useProject } from "@/hooks/store";
+import { useProjectEstimates, useProject, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
+import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type TIssueDefaultPropertiesProps = {
   control: Control<TIssue>;
@@ -67,11 +68,14 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
   const { areEstimateEnabledByProjectId } = useProjectEstimates();
   const { getProjectById } = useProject();
   const { isMobile } = usePlatformOS();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const projectDetails = getProjectById(projectId);
 
   const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
 
+  const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
   const minDate = getDate(startDate);
   minDate?.setDate(minDate.getDate());
 
@@ -150,6 +154,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
               }}
               projectId={projectId ?? undefined}
               tabIndex={getIndex("label_ids")}
+              createLabelEnabled={canCreateLabel}
             />
           </div>
         )}

web/core/components/issues/select/label.tsx

@@ -35,7 +35,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
     label,
     disabled = false,
     tabIndex,
-    createLabelEnabled = true,
+    createLabelEnabled = false,
     buttonClassName,
   } = props;
   // router

web/core/components/labels/label-block/label-item-block.tsx

@@ -28,10 +28,19 @@ interface ILabelItemBlock {
   handleLabelDelete: (label: IIssueLabel) => void;
   isLabelGroup?: boolean;
   dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
+  disabled?: boolean;
 }
 
 export const LabelItemBlock = (props: ILabelItemBlock) => {
-  const { label, isDragging, customMenuItems, handleLabelDelete, isLabelGroup, dragHandleRef } = props;
+  const {
+    label,
+    isDragging,
+    customMenuItems,
+    handleLabelDelete,
+    isLabelGroup,
+    dragHandleRef,
+    disabled = false,
+  } = props;
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   // refs
@@ -42,15 +51,18 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
   return (
     <div className="group flex items-center">
       <div className="flex items-center">
+        {!disabled && (
           <DragHandle
             className={cn("opacity-0 group-hover:opacity-100", {
               "opacity-100": isDragging,
             })}
             ref={dragHandleRef}
           />
+        )}
         <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
       </div>
 
+      {!disabled && (
         <div
           ref={actionSectionRef}
           className={`absolute right-2.5 flex items-start gap-3.5 px-4 ${
@@ -74,12 +86,16 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
           </CustomMenu>
           {!isLabelGroup && (
             <div className="py-0.5">
-            <button className="flex h-4 w-4 items-center justify-start gap-2" onClick={() => handleLabelDelete(label)}>
+              <button
+                className="flex h-4 w-4 items-center justify-start gap-2"
+                onClick={() => handleLabelDelete(label)}
+              >
                 <X className="h-4 w-4  flex-shrink-0 text-custom-sidebar-text-400" />
               </button>
             </div>
           )}
         </div>
+      )}
     </div>
   );
 };

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

@@ -23,10 +23,20 @@ type Props = {
     droppedLabelId: string | undefined,
     dropAtEndOfList: boolean
   ) => void;
+  isEditable?: boolean;
 };
 
 export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
-  const { label, setIsUpdating, handleLabelDelete, isChild, isLastChild, isParentDragging = false, onDrop } = props;
+  const {
+    label,
+    setIsUpdating,
+    handleLabelDelete,
+    isChild,
+    isLastChild,
+    isParentDragging = false,
+    onDrop,
+    isEditable = false,
+  } = props;
   // states
   const [isEditLabelForm, setEditLabelForm] = useState(false);
   // router
@@ -91,6 +101,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
                 customMenuItems={customMenuItems}
                 handleLabelDelete={handleLabelDelete}
                 dragHandleRef={dragHandleRef}
+                disabled={!isEditable}
               />
             )}
           </div>

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

@@ -14,7 +14,8 @@ import {
   ProjectSettingLabelItem,
 } from "@/components/labels";
 import { EmptyStateType } from "@/constants/empty-state";
-import { useLabel } from "@/hooks/store";
+import { useLabel, useUserPermissions } from "@/hooks/store";
+import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // components
 // ui
 // types
@@ -31,6 +32,10 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel();
+  const { allowPermissions } = useUserPermissions();
+
+  // derived values
+  const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
 
   const newLabel = () => {
     setIsUpdating(false);
@@ -65,9 +70,11 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
       />
       <div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5">
         <h3 className="text-xl font-medium">Labels</h3>
+        {isEditable && (
           <Button variant="primary" onClick={newLabel} size="sm">
             Add label
           </Button>
+        )}
       </div>
       <div className="w-full py-2">
         {showLabelForm && (

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

@@ -6,6 +6,8 @@ import { Plus } from "lucide-react";
 import { IState, TStateGroups } from "@plane/types";
 // components
 import { StateList, StateCreate } from "@/components/project-states";
+import { useUserPermissions } from "@/hooks/store";
+import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
 
 type TGroupItem = {
   workspaceSlug: string;
@@ -17,22 +19,28 @@ type TGroupItem = {
 
 export const GroupItem: FC<TGroupItem> = observer((props) => {
   const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
   // state
   const [createState, setCreateState] = useState(false);
 
+  const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
   return (
     <div className="space-y-3">
       <div className="flex justify-between items-center">
         <div className="text-base font-medium text-custom-text-200 capitalize">{groupKey}</div>
+        {isEditable && (
           <div
             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"
             onClick={() => !createState && setCreateState(true)}
           >
             <Plus className="w-4 h-4" />
           </div>
+        )}
       </div>
 
-      {createState && (
+      {isEditable && createState && (
         <StateCreate
           workspaceSlug={workspaceSlug}
           projectId={projectId}
@@ -48,6 +56,7 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
           groupKey={groupKey}
           groupedStates={groupedStates}
           states={states}
+          disabled={!isEditable}
         />
       </div>
     </div>

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

@@ -24,10 +24,11 @@ type TStateItem = {
   groupedStates: Record<string, IState[]>;
   totalStates: number;
   state: IState;
+  disabled?: boolean;
 };
 
 export const StateItem: FC<TStateItem> = observer((props) => {
-  const { workspaceSlug, projectId, groupKey, groupedStates, totalStates, state } = props;
+  const { workspaceSlug, projectId, groupKey, groupedStates, totalStates, state, disabled = false } = props;
   // hooks
   const { moveStatePosition } = useProjectState();
   // states
@@ -131,7 +132,7 @@ export const StateItem: FC<TStateItem> = observer((props) => {
         )}
       >
         {/* draggable indicator */}
-        {totalStates != 1 && (
+        {!disabled && totalStates != 1 && (
           <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
             <GripVertical className="w-3 h-3" />
           </div>
@@ -148,6 +149,7 @@ export const StateItem: FC<TStateItem> = observer((props) => {
           <p className="text-xs text-custom-text-200">{state.description}</p>
         </div>
 
+        {!disabled && (
           <div className="hidden group-hover:flex items-center gap-2">
             {/* state mark as default option */}
             <div className="flex-shrink-0 text-xs transition-all">
@@ -167,9 +169,15 @@ export const StateItem: FC<TStateItem> = observer((props) => {
               >
                 <Pencil className="w-3 h-3" />
               </button>
-            <StateDelete workspaceSlug={workspaceSlug} projectId={projectId} totalStates={totalStates} state={state} />
+              <StateDelete
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                totalStates={totalStates}
+                state={state}
+              />
             </div>
           </div>
+        )}
       </div>
 
       {/* draggable drop bottom indicator */}

web/core/components/project-states/state-list.tsx

@@ -12,10 +12,11 @@ type TStateList = {
   groupKey: TStateGroups;
   groupedStates: Record<string, IState[]>;
   states: IState[];
+  disabled?: boolean;
 };
 
 export const StateList: FC<TStateList> = observer((props) => {
-  const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
+  const { workspaceSlug, projectId, groupKey, groupedStates, states, disabled = false } = props;
 
   return (
     <>
@@ -28,6 +29,7 @@ export const StateList: FC<TStateList> = observer((props) => {
           groupedStates={groupedStates}
           totalStates={states.length || 0}
           state={state}
+          disabled={disabled}
         />
       ))}
     </>

web/core/constants/project.ts

@@ -100,7 +100,7 @@ export const PROJECT_ERROR_MESSAGES = {
   },
   cycleDeleteError: {
     title: "Error",
-    message: "Failed to delete project",
+    message: "Failed to delete cycle",
   },
   moduleDeleteError: {
     title: "Error",