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

src/common/components/ol-layer/ol.tile-layer.tsx

@@ -1,5 +1,8 @@
 import { LayerType, TileLayer, TileWMTS, TileXYZ } from '@map-colonies/react-components';
-import { isWMTSProtocol, isXYZProtocol } from './ol.helpers';
+import {
+  isWMTSProtocol,
+  isXYZProtocol,
+} from '../../../discrete-layer/components/helpers/layersUtils';
 import { LayerOptions, WMTSOptions, XYZOptions } from './layer.config.options';
 
 interface OlTileLayerParams {

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

@@ -2,6 +2,7 @@ import { get } from 'lodash';
 import { DEFAULT_ID } from '../../discrete-layer/components/layer-details/utils';
 import { LayerMetadataMixedUnion, RecordStatus } from '../../discrete-layer/models';
 import CONFIG from '../config';
+import { LinkType } from '../models/link-type.enum';
 import { isValidLayerMetadata } from './layer-url';
 
 const STATUS = 'productStatus';
@@ -28,6 +29,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 === LinkType.WFS
+    ) ?? false
+  );
+};
+
 export const isUnpublishedValue = (value: string): boolean => {
   return value === RecordStatus.UNPUBLISHED;
 };
@@ -57,20 +66,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/helpers/layersUtils.ts

@@ -17,6 +17,11 @@ import {
   TileMatrixSetModelType,
 } from '../../models';
 
+export const isWMTSProtocol = (linkType?: string): boolean =>
+  linkType === LinkType.WMTS_LAYER || linkType === LinkType.WMTS;
+
+export const isXYZProtocol = (linkType?: string): boolean => linkType === LinkType.XYZ_LAYER;
+
 export const isPolygonContainedInLayer = (
   polygon: Feature,
   layer: LayerMetadataMixedUnion
@@ -40,7 +45,6 @@ export const findLayerLink = (layer: ILayerImage): LinkModelType | undefined =>
   let wmtsLayer = layer.links?.find((link: LinkModelType) =>
     [LinkType.WMTS_LAYER as string].includes(link.protocol as string)
   ) as LinkModelType | undefined;
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (wmtsLayer === undefined) {
     wmtsLayer = layer.links?.find((link: LinkModelType) =>
       [LinkType.WMTS as string].includes(link.protocol as string)

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/components/map-container/geojson-map-features/polygonParts.tsx

@@ -295,7 +295,7 @@ export const PolygonParts: React.FC = observer(() => {
   // const buildWFSUrl = (layer: ILayerImage) => {
   //   const token = CONFIG.ACCESS_TOKEN.TOKEN_VALUE;
   //   if (layer) {
-  //     const url = layer.links?.find((link) => link.protocol === 'WFS')?.url?.split(/[?#]/)[0];
+  //     const url = layer.links?.find((link) => link.protocol === LinkType.WFS)?.url?.split(/[?#]/)[0];
   //     if (!url) {
   //       console.log(
   //         `[<PolygonParts>][buildWFSUrl] Layer ${layer.productName} does not have a WFS link`

src/discrete-layer/components/map-container/ol.layer-record.tile.tsx

@@ -6,14 +6,19 @@ import {
   XYZOptions,
 } from '../../../common/components/ol-layer/layer.config.options';
 import { OlTileLayer } from '../../../common/components/ol-layer/ol.tile-layer';
-import { isWMTSProtocol, isXYZProtocol } from '../../../common/components/ol-layer/ol.helpers';
 import {
   CapabilityModelType,
   LayerMetadataMixedUnion,
   LayerRasterRecordModelType,
   LinkModelType,
 } from '../../models';
-import { getLayerLink, getLinkUrlWithToken, getWMTSConfigOptions } from '../helpers/layersUtils';
+import {
+  getLayerLink,
+  getLinkUrlWithToken,
+  getWMTSConfigOptions,
+  isWMTSProtocol,
+  isXYZProtocol,
+} from '../helpers/layersUtils';
 import { getOLSourceOptions } from '../helpers/olUtils';
 
 interface OlLayerRecordTileProps {

src/discrete-layer/models/mapMenusManagerStore.ts

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

src/discrete-layer/views/discrete-layer-view.tsx

@@ -931,10 +931,10 @@ const DiscreteLayerView: React.FC = observer(() => {
 
   const mapLegendsExtractor = useCallback(
     (layers: (ILayerImage & { meta: unknown })[]): IMapLegend[] => {
-      const legendDocProtocol = LinkType.LEGEND_DOC;
-      const legendImgProtocol = LinkType.LEGEND_IMG;
-      const legendObjProtocol = LinkType.LEGEND;
-      const legendsProtocols = [legendDocProtocol, legendImgProtocol, legendObjProtocol];
+      const LEGEND_PDF_PROTOCOL = LinkType.LEGEND_DOC;
+      const LEGEND_IMG_PROTOCOL = LinkType.LEGEND_IMG;
+      const LEGEND_OBJ_PROTOCOL = LinkType.LEGEND;
+      const legendsProtocols = [LEGEND_PDF_PROTOCOL, LEGEND_IMG_PROTOCOL, LEGEND_OBJ_PROTOCOL];
 
       return layers.reduce((legendsList, cesiumLayer): IMapLegend[] => {
         if (typeof get(cesiumLayer.meta, 'layerRecord.links') !== 'undefined') {