modify cycle options (#5299)

web/core/components/dropdowns/cycle/cycle-options.tsx

@@ -29,10 +29,11 @@ type CycleOptionsProps = {
   referenceElement: HTMLButtonElement | null;
   placement: Placement | undefined;
   isOpen: boolean;
+  canRemoveCycle: boolean;
 };
 
 export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
-  const { projectId, isOpen, referenceElement, placement } = props;
+  const { projectId, isOpen, referenceElement, placement, canRemoveCycle } = props;
   //state hooks
   const [query, setQuery] = useState("");
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -92,16 +93,19 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
       ),
     };
   });
-  options?.unshift({
-    value: null,
-    query: "No cycle",
-    content: (
-      <div className="flex items-center gap-2">
-        <ContrastIcon className="h-3 w-3 flex-shrink-0" />
-        <span className="flex-grow truncate">No cycle</span>
-      </div>
-    ),
-  });
+
+  if (canRemoveCycle) {
+    options?.unshift({
+      value: null,
+      query: "No cycle",
+      content: (
+        <div className="flex items-center gap-2">
+          <ContrastIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">No cycle</span>
+        </div>
+      ),
+    });
+  }
 
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));

web/core/components/dropdowns/cycle/index.tsx

@@ -25,6 +25,7 @@ type Props = TDropdownProps & {
   onClose?: () => void;
   projectId: string | undefined;
   value: string | null;
+  canRemoveCycle?: boolean;
 };
 
 export const CycleDropdown: React.FC<Props> = observer((props) => {
@@ -46,6 +47,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     showTooltip = false,
     tabIndex,
     value,
+    canRemoveCycle = true,
   } = props;
   // states
 
@@ -128,7 +130,13 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
         )}
       </Combobox.Button>
       {isOpen && projectId && (
-        <CycleOptions isOpen={isOpen} projectId={projectId} placement={placement} referenceElement={referenceElement} />
+        <CycleOptions
+          isOpen={isOpen}
+          projectId={projectId}
+          placement={placement}
+          referenceElement={referenceElement}
+          canRemoveCycle={canRemoveCycle}
+        />
       )}
     </Combobox>
   );