#4806-It is allowed to change bond type between micro and macro (#4883)

* fix:4806-it-is-allowed-to-change-bond-type-between-micro-and-macro

* feat: refactor isDisabled assigment for code optimization

packages/ketcher-react/src/script/ui/views/components/ContextMenu/hooks/useBondTypeChange.ts

@@ -7,7 +7,6 @@ import { ItemEventParams } from '../contextMenu.types';
 
 const useBondTypeChange = () => {
   const { getKetcherInstance } = useAppContext();
-
   const handler = useCallback(
     ({ id, props }: ItemEventParams) => {
       const editor = getKetcherInstance().editor as Editor;
@@ -27,10 +26,14 @@ const useBondTypeChange = () => {
 
   const disabled = useCallback(({ props }: ItemEventParams) => {
     const selectedBondIds = props?.bondIds;
+    const editor = getKetcherInstance().editor;
+
     if (Array.isArray(selectedBondIds) && selectedBondIds.length !== 0) {
+      if (editor.struct().isBondFromMacromolecule(selectedBondIds[0])) {
+        return true;
+      }
       return false;
     }
-
     return true;
   }, []);
 

packages/ketcher-react/src/script/ui/views/components/ContextMenu/menuItems/BondMenuItems.tsx

@@ -8,20 +8,22 @@ import useBondSGroupEdit from '../hooks/useBondSGroupEdit';
 import useBondTypeChange from '../hooks/useBondTypeChange';
 import useDelete from '../hooks/useDelete';
 import { formatTitle, getNonQueryBondNames, queryBondNames } from '../utils';
-import { MenuItemsProps } from '../contextMenu.types';
+import { ItemEventParams, MenuItemsProps } from '../contextMenu.types';
 import { getIconName, Icon } from 'components';
 
 const nonQueryBondNames = getNonQueryBondNames(tools);
 
 const BondMenuItems: FC<MenuItemsProps> = (props) => {
   const [handleEdit] = useBondEdit();
-  const [handleTypeChange] = useBondTypeChange();
+  const [handleTypeChange, disabled] = useBondTypeChange();
   const [handleSGroupAttach, sGroupAttachHidden] = useBondSGroupAttach();
   const [handleSGroupEdit, sGroupEditDisabled, sGroupEditHidden] =
     useBondSGroupEdit();
   const handleDelete = useDelete();
   const bondNamesWithoutEmptyValue = nonQueryBondNames.slice(1);
-
+  const isDisabled = disabled({
+    props: props.propsFromTrigger,
+  } as ItemEventParams);
   return (
     <>
       <Item {...props} onClick={handleEdit}>
@@ -43,6 +45,7 @@ const BondMenuItems: FC<MenuItemsProps> = (props) => {
             id={name}
             onClick={handleTypeChange}
             key={name}
+            disabled={isDisabled}
           >
             {iconName && <Icon name={iconName} className={styles.icon} />}
             <span>{formatTitle(tools[name].title)}</span>
@@ -59,6 +62,7 @@ const BondMenuItems: FC<MenuItemsProps> = (props) => {
               id={name}
               onClick={handleTypeChange}
               key={name}
+              disabled={isDisabled}
             >
               {iconName && <Icon name={iconName} className={styles.icon} />}
               <span>{formatTitle(tools[name].title)}</span>