fix: console errors and pp not exist indicator in context menu

src/common/components/tree/icon-renderers/product-type.icon-renderer.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { ILayerImage } from '../../../../discrete-layer/models/layerImage';
 import { LayerRasterRecordModelType } from '../../../../discrete-layer/models';
-import { getIconStyle } from '../../../helpers/style';
+import { getIconStyle, hasWFSLink } from '../../../helpers/style';
 import { TypeIcon } from '../../shared/type-icon';
 
 interface IProductTypeCellRendererParams {
@@ -18,7 +18,7 @@ export const ProductTypeRenderer: React.FC<IProductTypeCellRendererParams> = ({
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     const rasterData = data as LayerRasterRecordModelType;
 
-    if (onClick && rasterData.links?.some((link) => link.protocol === 'WFS')) {
+    if (onClick && hasWFSLink(rasterData as unknown as Record<string, unknown>)) {
       onClick(data, !rasterData.polygonPartsShown);
     }
   };

src/common/helpers/style.ts

@@ -28,6 +28,14 @@ export const isPolygonPartsShown = (data: Record<string, unknown>): boolean => {
   return get(data, POLYGON_PARTS_SHOWN) === true;
 };
 
+export const hasWFSLink = (data: Record<string, unknown>): boolean => {
+  return (
+    (data.links as Array<Record<string, unknown>> | undefined)?.some(
+      (link) => link.protocol === 'WFS'
+    ) ?? false
+  );
+};
+
 export const isUnpublishedValue = (value: string): boolean => {
   return value === RecordStatus.UNPUBLISHED;
 };
@@ -57,20 +65,14 @@ export const getIconStyle = (
     resStyle = { [colorProperty]: UNPUBLISHED_COLOR };
   }
   if (existPolygonParts(data) && isPolygonPartsShown(data)) {
-    const hasWFSLink = (data.links as Array<Record<string, unknown>>)?.some(
-      (link) => link.protocol === 'WFS'
-    );
-    if (hasWFSLink) {
+    if (hasWFSLink(data)) {
       resStyle = { [colorProperty]: POLYGON_PARTS_SHOWN_COLOR };
     } else {
       resStyle = { opacity: 0.5 };
     }
   }
   if (existPolygonParts(data) && !isPolygonPartsShown(data)) {
-    const hasWFSLink = (data.links as Array<Record<string, unknown>>)?.some(
-      (link) => link.protocol === 'WFS'
-    );
-    if (!hasWFSLink) {
+    if (!hasWFSLink(data)) {
       resStyle = {
         ...resStyle,
         opacity: 0.5,

src/common/hooks/mapMenus/useHandleMapMenuTemplates.hook.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import _ from 'lodash';
+import _, { get } from 'lodash';
 import { IContextMenuData } from '@map-colonies/react-components';
 import {
   DynamicMenuData,
@@ -20,6 +20,7 @@ import {
   ContextActionsTemplates,
 } from '../../actions/context.actions';
 import CONFIG from '../../config';
+import { hasWFSLink } from '../../helpers/style';
 
 export const useHandleMapMenuTemplates = (
   menuProperties?: IMapMenuProperties,
@@ -116,13 +117,25 @@ export const useHandleMapMenuTemplates = (
             },
           };
 
+          const layerHasWFSLink = hasWFSLink(
+            get(activeLayer, 'meta.layerRecord') as Record<string, unknown>
+          );
+
           const generatedGroup: MenuItemsGroup = {
             ...groupTemplateMenuItem,
             groupProps: groupProp,
             title: groupProp.titleTranslationId,
             items: groupTemplateMenuItem.items.map((item) => {
               if (!isMenuItemGroup(item)) {
-                return { ...item, payloadData: activeLayer.meta as Record<string, unknown> };
+                const itemDisabled =
+                  item.action.action === ContextActions.QUERY_POLYGON_PARTS
+                    ? !layerHasWFSLink
+                    : item.disabled;
+                return {
+                  ...item,
+                  disabled: itemDisabled,
+                  payloadData: activeLayer.meta as Record<string, unknown>,
+                };
               }
 
               return item;

src/discrete-layer/components/map-container/contextMenus/actions.context-menu.tsx

@@ -137,7 +137,7 @@ export const ActionsContextMenu: React.FC<IActionsContextMenuProps> = observer((
       <Box className="contextMenuFooter">
         <Box className="heightContainer">
           <Icon className="menuIcon mc-icon-Height-DTM" />
-          <Typography tag="p">
+          <Typography tag="div">
             {heightsAtCoordinates.isLoadingData ? <CircularProgress /> : getHeightText()}
           </Typography>
         </Box>

src/discrete-layer/components/map-container/contextMenus/context-menu.tsx

@@ -162,6 +162,7 @@ export const ContextMenu: React.FC<PropsWithChildren<IMapContextMenuData>> = ({
 
             return (
               <MenuItemWithSeparator
+                key={`menu_item_${menuItemOrGroup.title}_${idx}`}
                 separatorKeySuffix={`${idx}`}
                 separator={menuItemOrGroup.action.separator}
                 showSeparatorBefore={showSeparatorBefore}
@@ -196,11 +197,14 @@ export const ContextMenu: React.FC<PropsWithChildren<IMapContextMenuData>> = ({
                   })}
                 </TooltippedValue>
               );
+              const groupDisabled = menuItemOrGroup.disabled ?? false;
               groupToRender = (
                 <Submenu
                   key={`imageryMenuGroupItems_${menuItemOrGroup.groupProps.id}`}
                   dir={direction}
                   label={menuTitle}
+                  disabled={groupDisabled}
+                  style={{ pointerEvents: groupDisabled ? 'none' : 'unset' }}
                   onMouseOver={handleMouseEnter}
                   onMouseLeave={handleMouseLeave}
                 >
@@ -217,6 +221,7 @@ export const ContextMenu: React.FC<PropsWithChildren<IMapContextMenuData>> = ({
 
             return (
               <MenuItemWithSeparator
+                key={`menu_group_${menuItemOrGroup.groupProps.id}_${idx}`}
                 separatorKeySuffix={`${menuItemOrGroup.groupProps.id}`}
                 separator={menuItemOrGroup.groupProps.separator}
                 showSeparatorBefore={showSeparatorBefore}

src/discrete-layer/models/mapMenusManagerStore.ts

@@ -32,6 +32,7 @@ export interface MenuItemsGroup extends CommonMenuItem {
   groupProps: ContextActionGroupProps;
   items: MenuItemsList;
   icon?: string;
+  disabled?: boolean;
 }