Resolve "Allow plugin to add entries to context menu"

Closes #307 (closed)

src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx

@@ -7,9 +7,18 @@ import { openAddCommentModal, openMolArtModalById } from '@/redux/modal/modal.sl
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import { FIRST_ARRAY_ELEMENT, SECOND_ARRAY_ELEMENT } from '@/constants/common';
+import { FIRST_ARRAY_ELEMENT, SECOND_ARRAY_ELEMENT, ZERO } from '@/constants/common';
+import { PluginsContextMenu } from '@/services/pluginsManager/pluginContextMenu/pluginsContextMenu';
+import { BioEntity, Reaction } from '@/types/models';
+import { ClickCoordinates } from '@/services/pluginsManager/pluginContextMenu/pluginsContextMenu.types';
+import { currentModelSelector } from '@/redux/models/models.selectors';
+import { mapDataLastPositionSelector } from '@/redux/map/map.selectors';
+import { DEFAULT_ZOOM } from '@/constants/map';
 
 export const ContextMenu = (): React.ReactNode => {
+  const pluginContextMenu = PluginsContextMenu.menuItems;
+  const model = useAppSelector(currentModelSelector);
+  const lastPosition = useAppSelector(mapDataLastPositionSelector);
   const dispatch = useAppDispatch();
   const { isOpen, coordinates } = useAppSelector(contextMenuSelector);
   const unitProtId = useAppSelector(searchedBioEntityElementUniProtIdSelector);
@@ -32,6 +41,25 @@ export const ContextMenu = (): React.ReactNode => {
     dispatch(openAddCommentModal());
   };
 
+  const modelId = model ? model.idObject : ZERO;
+
+  const handleCallback = (
+    callback: (coordinates: ClickCoordinates, element: BioEntity | Reaction | undefined) => void,
+  ) => {
+    return () => {
+      dispatch(closeContextMenu());
+      return callback(
+        {
+          modelId,
+          x: coordinates[FIRST_ARRAY_ELEMENT],
+          y: coordinates[SECOND_ARRAY_ELEMENT],
+          zoom: lastPosition.z ? lastPosition.z : DEFAULT_ZOOM,
+        },
+        undefined,
+      );
+    };
+  };
+
   return (
     <div
       className={twMerge(
@@ -46,7 +74,7 @@ export const ContextMenu = (): React.ReactNode => {
     >
       <button
         className={twMerge(
-          'cursor-pointer text-xs font-normal',
+          'w-full cursor-pointer text-left text-xs font-normal',
           !isUnitProtIdAvailable() ? 'cursor-not-allowed text-greyscale-700' : '',
         )}
         onClick={handleOpenMolArtClick}
@@ -57,13 +85,31 @@ export const ContextMenu = (): React.ReactNode => {
       </button>
       <hr />
       <button
-        className={twMerge('cursor-pointer text-xs font-normal')}
+        className={twMerge('w-full cursor-pointer text-left text-xs font-normal')}
         onClick={handleAddCommentClick}
         type="button"
         data-testid="add-comment"
       >
         Add comment
       </button>
+      {pluginContextMenu.length && <hr />}
+
+      {pluginContextMenu.map(contextMenuEntry => (
+        <button
+          key={contextMenuEntry.id}
+          id={contextMenuEntry.id}
+          className={twMerge(
+            'cursor-pointer text-xs font-normal',
+            contextMenuEntry.style,
+            !contextMenuEntry.enabled ? 'cursor-not-allowed text-greyscale-700' : '',
+          )}
+          onClick={handleCallback(contextMenuEntry.callback)}
+          type="button"
+          data-testid={contextMenuEntry.id}
+        >
+          {contextMenuEntry.name}
+        </button>
+      ))}
     </div>
   );
 };