fix: state drop down refactor

web/ce/components/workflow/state-option.tsx

@@ -2,20 +2,21 @@ import { observer } from "mobx-react";
 import { Check } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 
-type Props = {
+export type TStateOptionProps = {
   projectId: string | null | undefined;
   option: {
     value: string | undefined;
     query: string;
     content: JSX.Element;
   };
-  filterAvailableStateIds: boolean;
   selectedValue: string | null | undefined;
   className?: string;
+  filterAvailableStateIds?: boolean;
   isForWorkItemCreation?: boolean;
+  alwaysAllowStateChange?: boolean;
 };
 
-export const StateOption = observer((props: Props) => {
+export const StateOption = observer((props: TStateOptionProps) => {
   const { option, className = "" } = props;
 
   return (

web/core/components/dropdowns/state.tsx

@@ -36,6 +36,7 @@ type Props = TDropdownProps & {
   stateIds?: string[];
   filterAvailableStateIds?: boolean;
   isForWorkItemCreation?: boolean;
+  alwaysAllowStateChange?: boolean;
 };
 
 export const StateDropdown: React.FC<Props> = observer((props) => {
@@ -59,8 +60,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     value,
     renderByDefault = true,
     stateIds,
-    filterAvailableStateIds = true,
-    isForWorkItemCreation = false,
   } = props;
   // states
   const [query, setQuery] = useState("");
@@ -237,11 +236,9 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                     <StateOption
                       key={option.value}
                       option={option}
-                      projectId={projectId}
-                      filterAvailableStateIds={filterAvailableStateIds}
                       selectedValue={value}
                       className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
-                      isForWorkItemCreation={isForWorkItemCreation}
+                      {...props}
                     />
                   ))
                 ) : (

web/core/components/issues/issue-layouts/list/list-group.tsx

@@ -244,6 +244,7 @@ export const ListGroup = observer((props: Props) => {
 
   const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
   const canOverlayBeVisible = isWorkflowDropDisabled || orderBy !== "sort_order" || !!group.isDropDisabled;
+  const isDropDisabled = isWorkflowDropDisabled || !!group.isDropDisabled;
 
   const isGroupByCreatedBy = group_by === "created_by";
   const shouldExpand = (!!groupIssueCount && isExpanded) || !group_by;
@@ -253,7 +254,7 @@ export const ListGroup = observer((props: Props) => {
       ref={groupRef}
       className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
         "border-custom-primary-100": isDraggingOverColumn,
-        "border-custom-error-200": isDraggingOverColumn && !!group.isDropDisabled,
+        "border-custom-error-200": isDraggingOverColumn && isDropDisabled,
       })}
     >
       <Row
@@ -283,7 +284,7 @@ export const ListGroup = observer((props: Props) => {
           <GroupDragOverlay
             dragColumnOrientation={dragColumnOrientation}
             canOverlayBeVisible={canOverlayBeVisible}
-            isDropDisabled={isWorkflowDropDisabled || !!group.isDropDisabled}
+            isDropDisabled={isDropDisabled}
             workflowDisabledSource={workflowDisabledSource}
             dropErrorMessage={group.dropErrorMessage}
             orderBy={orderBy}