clean(eslint): Clean global esLint comment to have them more inline

Closes #1859
Canadian-Geospatial-Platform · Feb 27, 2024 · 30c9026 · 30c9026
1 parent f239a1f
commit 30c9026
Show file tree

Hide file tree

Showing 66 changed files with 139 additions and 172 deletions.
diff --git a/packages/geoview-core/public/templates/codedoc.js b/packages/geoview-core/public/templates/codedoc.js
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+// Many functions name needs the eslint escape no-unused-vars. It is the reason why we keep it global...
 function sleep(milliseconds) {
   const date = Date.now();
   let currentDate = null;

diff --git a/packages/geoview-core/public/templates/layers/layerlib.js b/packages/geoview-core/public/templates/layers/layerlib.js
@@ -1,5 +1,7 @@
 /* eslint-disable no-undef */
 /* eslint-disable @typescript-eslint/no-unused-vars */
+// cgpv is not define, it is part of window object, we escape the no-undef globally...
+// Many functions name needs the eslint escape no-unused-vars. It is the reason why we keep it global...
 // ==========================================================================================================================
 function listenToLegendLayerSetChanges(elementId, handlerName) {
   const mapId = handlerName.split('/')[0];

diff --git a/packages/geoview-core/src/api/api.ts b/packages/geoview-core/src/api/api.ts
@@ -189,8 +189,7 @@ export class API {
       // Init by function call
       initMapDivFromFunctionCall(mapDiv, mapConfig);
     } else {
-      // eslint-disable-next-line no-console
-      console.error(`Div with id ${divId} does not exist`);
+      logger.logError(`Div with id ${divId} does not exist`);
     }
   };
 }
diff --git a/packages/geoview-core/src/api/events/event.ts b/packages/geoview-core/src/api/events/event.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import EventEmitter from 'eventemitter3';
 
 import { EventStringId } from './event-types';
@@ -86,6 +85,7 @@ export class Event {
    * @param {string} eventTypeToKeep the handler name prefix composed of handlerNamePrefix/eventTypeToKeep to keep
    */
   offAll = (handlerNamePrefix: string, eventTypeToKeep?: string): void => {
+    // eslint-disable-next-line no-underscore-dangle
     (Object.keys(this.eventEmitter._events) as EventStringId[]).forEach((eventNameId) => {
       if (eventNameId.startsWith(handlerNamePrefix)) {
         if (eventTypeToKeep) {

diff --git a/packages/geoview-core/src/app.tsx b/packages/geoview-core/src/app.tsx
@@ -139,8 +139,7 @@ export async function initMapDivFromFunctionCall(mapDiv: HTMLElement, mapConfig:
     // Render the map
     await renderMap(mapDiv);
   } else {
-    // eslint-disable-next-line no-console
-    console.warn(`Div with id ${mapDiv.id} has a class 'geoview-map' and should be initialized via a cgpv.init() call.`);
+    logger.logWarning(`Div with id ${mapDiv.id} has a class 'geoview-map' and should be initialized via a cgpv.init() call.`);
   }
 }
 

diff --git a/packages/geoview-core/src/core/components/attribution/attribution.tsx b/packages/geoview-core/src/core/components/attribution/attribution.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { useState } from 'react';
 
 import { useTheme } from '@mui/material/styles';

diff --git a/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx b/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx
@@ -33,7 +33,7 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp
 
     if (leftPanelRef.current && isMapFullScreen && (activeFooterBarTabId === footerPanelTab || footerPanelTab === 'default')) {
       const panelTitleHeight = panelTitleRef.current?.clientHeight ?? 0;
-      const tabsContainer = document.getElementById('tabsContainer')!;
+      const tabsContainer = document.getElementById(`mapId-tabsContainer`)!;
       const firstChild = tabsContainer?.firstElementChild?.firstElementChild;
       const firstChildHeight = firstChild?.clientHeight ?? 0;
       const leftPanelHeight = (window.screen.height * footerPanelResizeValue) / 100 - panelTitleHeight - firstChildHeight;

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useCallback, useEffect, useMemo, useRef, useState, memo, ReactNode, isValidElement } from 'react';
 
 import { useTranslation } from 'react-i18next';
@@ -15,7 +14,6 @@ import { MRT_Localization_EN as MRTLocalizationEN } from 'material-react-table/l
 
 import { Extent } from 'ol/extent'; // only for typing
 
-import { darken } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { HtmlToReact } from '@/core/containers/html-to-react';
 
@@ -42,7 +40,7 @@ import {
 import ExportButton from './export-button';
 import JSONExportButton from './json-export-button';
 import FilterMap from './filter-map';
-import { AbstractGeoViewVector, TypeLayerEntryConfig, api, TypeFieldEntry, TypeFeatureInfoEntry, isImage, EsriDynamic } from '@/app';
+import { TypeFeatureInfoEntry, api, isImage } from '@/app';
 import { getSxClasses } from './data-table-style';
 import { useMapStoreActions } from '@/core/stores/store-interface-and-intial-values/map-state';
 import {
@@ -161,8 +159,7 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps) {
     try {
       rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
     } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
+      logger.logError('Data table error on sorting action', error);
     }
   }, [sorting]);
 

diff --git a/packages/geoview-core/src/core/components/details/feature-info-new.tsx b/packages/geoview-core/src/core/components/details/feature-info-new.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getCenter } from 'ol/extent';

diff --git a/packages/geoview-core/src/core/components/details/feature-info-table.tsx b/packages/geoview-core/src/core/components/details/feature-info-table.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import { useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
@@ -130,6 +129,7 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS
             color: index % 2 > 0 ? theme.palette.geoViewColor.bgColor.darken(0.9) : '',
             marginBottom: '20px',
           }}
+          // eslint-disable-next-line react/no-array-index-key
           key={index}
         >
           <Grid item xs="auto" sx={{ fontWeight: 'bold', width: '80% !important' }}>

diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { MutableRefObject, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { camelCase } from 'lodash';
 import { useTheme } from '@mui/material/styles';
@@ -400,38 +399,18 @@ export function FooterBar(): JSX.Element | null {
 
   // Handle focus using dynamic focus button
   const handleDynamicFocus = () => {
-    const mapIdDiv = document.getElementById(mapId);
-
-    if (mapIdDiv) {
-      if (isFocusToMap) {
-        // scroll to map
-        window.scrollTo({
-          top: mapIdDiv.offsetTop - 30,
-          behavior: 'smooth',
-        });
-        setIsFocusToMap(false);
-      } else {
-        const focusButtonId = document.getElementById(`map-${mapId}`);
-        if (focusButtonId) {
-          const targetY = focusButtonId.getBoundingClientRect().bottom + window.pageYOffset - 70;
-          // scroll to footer
-          window.scrollTo({
-            top: targetY,
-            behavior: 'smooth',
-          });
-        }
-
-        setIsFocusToMap(true);
-      }
-    }
+    const shell = document.getElementById(`shell-${mapId}`);
+    const block = isFocusToMap ? 'start' : 'end';
+    shell?.scrollIntoView({ behavior: 'smooth', block });
+    setIsFocusToMap(!isFocusToMap);
   };
 
   return footerBarTabs.length > 0 ? (
     <Box
       ref={tabsContainerRef as MutableRefObject<HTMLDivElement>}
       sx={sxClasses.tabsContainer}
       className="tabsContainer"
-      id="tabsContainer"
+      id={`${mapId}-tabsContainer`}
     >
       <Tabs
         activeTrap={activeTrapGeoView}

diff --git a/packages/geoview-core/src/core/components/guide/guide-panel.tsx b/packages/geoview-core/src/core/components/guide/guide-panel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import React, { useState, ReactNode, memo, useEffect } from 'react';
 import Markdown from 'markdown-to-jsx';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +18,7 @@ interface GuideListItem extends LayerListEntry {
 }
 
 interface GuidePanelType {
+  // eslint-disable-next-line react/require-default-props
   fullWidth?: boolean;
 }
 

diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTheme, Theme } from '@mui/material/styles';

diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack.tsx b/packages/geoview-core/src/core/components/icon-stack/icon-stack.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-nested-ternary */
-/* eslint-disable react/require-default-props */
 import React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Box, IconButton, BrowserNotSupportedIcon } from '@/ui';
@@ -29,6 +27,8 @@ export function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIcon
   const numOfIcons: number | undefined = iconData?.length;
 
   const iconStackContent = () => {
+    // TODO: refactor - try to remove the nested ternary to simplify reading
+    // eslint-disable-next-line no-nested-ternary
     return numOfIcons === 1 ? (
       <IconButton sx={sxClasses.iconPreview} color="primary" size="small" onClick={iconImage === 'no data' ? undefined : onIconClick}>
         {iconImage === 'no data' ? (
@@ -39,7 +39,8 @@ export function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIcon
           </Box>
         )}
       </IconButton>
-    ) : numOfIcons && numOfIcons > 0 ? (
+    ) : // eslint-disable-next-line no-nested-ternary
+    numOfIcons && numOfIcons > 0 ? (
       <Box tabIndex={0} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyPress={(e) => onStackIconClick?.(e)}>
         <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1}>
           <Box sx={sxClasses.legendIconTransparent}>

diff --git a/packages/geoview-core/src/core/components/layers/layers-panel.tsx b/packages/geoview-core/src/core/components/layers/layers-panel.tsx
@@ -52,17 +52,21 @@ export function LayersPanel() {
       return <LayerDetails layerDetails={selectedLayer} />;
     }
     if (displayState === 'remove') {
+      // TODO: refactor - remove the need for markup and danger Eslint
       const markup = { __html: t('layers.removeLayerDescription') };
-      /* eslint-disable react/no-danger */
       return (
+        // eslint-disable-next-line react/no-danger
         <Paper sx={{ padding: '20px' }}>
           <h3>{t('layers.removingLayers')}</h3>
           <Box sx={{ display: 'flex', flexDirection: 'row', gap: '2', alignItems: 'center' }}>
             <IconButton edge="end" size="small">
               <DeleteOutlineIcon color="error" />
             </IconButton>
             <Box>
-              <div dangerouslySetInnerHTML={markup} />
+              {
+                /* eslint-disable-next-line react/no-danger */
+                <div dangerouslySetInnerHTML={markup} />
+              }
             </Box>
           </Box>
         </Paper>
@@ -74,7 +78,10 @@ export function LayersPanel() {
         <Paper sx={{ padding: '20px' }}>
           <h3>{t('layers.reArrangeLayers')}</h3>
           <Box sx={sxClasses.buttonDescriptionContainer}>
-            <div dangerouslySetInnerHTML={markup} />
+            {
+              /* eslint-disable-next-line react/no-danger */
+              <div dangerouslySetInnerHTML={markup} />
+            }
           </Box>
         </Paper>
       );
@@ -85,11 +92,13 @@ export function LayersPanel() {
         <Paper sx={{ padding: '20px' }}>
           <h3>{t('layers.addingNewLayer')}</h3>
           <Box sx={sxClasses.buttonDescriptionContainer}>
-            <div dangerouslySetInnerHTML={markup} />
+            {
+              /* eslint-disable-next-line react/no-danger */
+              <div dangerouslySetInnerHTML={markup} />
+            }
           </Box>
         </Paper>
       );
-      /* eslint-disable react/no-danger */
     }
 
     return null;

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -147,9 +147,9 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
     logger.logWarning('reloading layer not implemented...');
   };
 
+  // TODO: refactor - this button function does nothing as it is the whole container that can be draggable
   const handleReArrangeLayer = () => {
-    // eslint-disable-next-line no-console
-    console.log('re-arrange layer');
+    logger.logWarning('re-arrange layer');
   };
 
   function renderEditModeButtons() {

diff --git a/packages/geoview-core/src/core/containers/focus-trap.tsx b/packages/geoview-core/src/core/containers/focus-trap.tsx
@@ -172,7 +172,7 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element {
 
   return (
     <Modal
-      container={document.getElementById(focusTrapId)}
+      container={document.getElementById(focusTrapId)!}
       mapId={focusTrapId}
       open={open}
       aria-labelledby="wcag-dialog-title"

diff --git a/packages/geoview-core/src/core/containers/html-to-react.tsx b/packages/geoview-core/src/core/containers/html-to-react.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import { CSSProperties, ReactNode } from 'react';
 import parse from 'html-react-parser';
 
@@ -7,8 +6,11 @@ import parse from 'html-react-parser';
  */
 interface HtmlToReactProps {
   htmlContent: string;
+  // eslint-disable-next-line react/require-default-props
   className?: string;
+  // eslint-disable-next-line react/require-default-props
   style?: CSSProperties;
+  // eslint-disable-next-line react/require-default-props
   extraOptions?: Record<string, unknown>;
 }
 

diff --git a/packages/geoview-core/src/core/containers/shell.tsx b/packages/geoview-core/src/core/containers/shell.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { useEffect, useState, useCallback, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 

diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable no-restricted-syntax */
+// this esLint is used in many places for findLayerByPath function. It is why we keep it global...
 import { useStore } from 'zustand';
 import _ from 'lodash';
 
@@ -267,6 +267,8 @@ function setOpacityInLayerAndChildren(layer: TypeLegendLayer, opacity: number, m
 }
 
 function findLayerByPath(layers: TypeLegendLayer[], layerPath: string): TypeLegendLayer | undefined {
+  // TODO: refactor - iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations
+  // eslint-disable-next-line no-restricted-syntax
   for (const l of layers) {
     if (layerPath === l.layerPath) {
       return l;
@@ -287,6 +289,8 @@ function deleteSingleLayer(layers: TypeLegendLayer[], layerPath: string) {
   if (indexToDelete >= 0) {
     layers.splice(indexToDelete, 1);
   } else {
+    // TODO: refactor - iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations
+    // eslint-disable-next-line no-restricted-syntax
     for (const l of layers) {
       if (l.children && l.children.length > 0) {
         deleteSingleLayer(l.children, layerPath);

diff --git a/packages/geoview-core/src/core/utils/config/config-validation.ts b/packages/geoview-core/src/core/utils/config/config-validation.ts
@@ -1,4 +1,5 @@
-/* eslint-disable no-console, no-underscore-dangle, no-param-reassign */
+/* eslint-disable no-underscore-dangle, no-param-reassign */
+// We have a lot of private function with dangle nad many reassigne. We keep it global...
 import { Extent } from 'ol/extent';
 
 import Ajv from 'ajv';

diff --git a/packages/geoview-core/src/core/utils/config/config.ts b/packages/geoview-core/src/core/utils/config/config.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { TypeDisplayLanguage, TypeListOfLayerEntryConfig, layerEntryIsGroupLayer } from '@/geo/map/map-schema-types';
 import { CONST_LAYER_ENTRY_TYPE, TypeGeoviewLayerType } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
 import { logger } from '@/core/utils/logger';

diff --git a/packages/geoview-core/src/core/utils/config/reader/div-config-reader.ts b/packages/geoview-core/src/core/utils/config/reader/div-config-reader.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { TypeJsonValue, TypeMapFeaturesConfig } from '@/core/types/global-types';
 import { getLocalizedMessage, isJsonString, removeCommentsFromJSON, replaceParams, showError } from '../../utilities';
 import { logger } from '@/core/utils/logger';

diff --git a/packages/geoview-core/src/core/utils/config/reader/json-config-reader.ts b/packages/geoview-core/src/core/utils/config/reader/json-config-reader.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { TypeMapFeaturesConfig } from '@/core/types/global-types';
 import { logger } from '@/core/utils/logger';
 

diff --git a/packages/geoview-core/src/core/utils/date-mgt.ts b/packages/geoview-core/src/core/utils/date-mgt.ts
@@ -1,4 +1,3 @@
-/* eslint-disable prefer-destructuring */
 import dayjs, { Dayjs } from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import duration from 'dayjs/plugin/duration';
@@ -530,6 +529,7 @@ export class DateMgt {
         inputFragments[TIME] = 3;
         outputFragments[TIME] = 3;
         // Get time zone.
+        // eslint-disable-next-line prefer-destructuring
         separators[TIME_ZONE] = timeString.split(/[+-]/)[1];
       }
 

diff --git a/packages/geoview-core/src/core/utils/logger.ts b/packages/geoview-core/src/core/utils/logger.ts
@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+// console is use at 3 places (error, warn, info). We keep it global...
 import { isArray } from 'lodash';
 import { getItemAsNumber, getItemAsNumberOrNumberArraySetValue } from './localStorage';
 

diff --git a/packages/geoview-core/src/core/utils/useWhatChanged.ts b/packages/geoview-core/src/core/utils/useWhatChanged.ts
@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+// this utility file uses console to show react hooks. Not mean tu use the logger. We keep it global...
 import { useEffect, useRef } from 'react';
 
 // Indicates if currently logging useWhatChanged