From d4a051ca191bb79f6c64ab257e89e3c66ba48a8c Mon Sep 17 00:00:00 2001
From: Vijayan Balasubramanian <vijayan.balasubramanian@gmail.com>
Date: Thu, 19 Jan 2023 13:45:38 -0800
Subject: [PATCH] Limit max number of layers (#216)

Add restriction to create more than 100 layers.

Signed-off-by: Vijayan Balasubramanian <balasvij@amazon.com>
---
 common/index.ts                               | 28 +++++++-------
 .../add_layer_panel/add_layer_panel.tsx       | 38 ++++++++++++++-----
 .../layer_control_panel.tsx                   |  1 +
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/common/index.ts b/common/index.ts
index 5cbdae47..80f243ba 100644
--- a/common/index.ts
+++ b/common/index.ts
@@ -23,25 +23,27 @@ export {
   PLUGIN_NAME,
 };
 
-export const MAP_DEFAULT_MIN_ZOOM = 0;
-export const MAP_DEFAULT_MAX_ZOOM = 22;
-export const MAP_REFERENCE_LAYER_DEFAULT_OPACITY = 100;
-export const MAP_DATA_LAYER_DEFAULT_OPACITY = 70;
-export const MAP_LAYER_DEFAULT_MIN_OPACITY = 0;
-export const MAP_LAYER_DEFAULT_MAX_OPACITY = 100;
-export const MAP_LAYER_DEFAULT_OPACITY_STEP = 1;
-export const MAP_LAYER_DEFAULT_BORDER_THICKNESS = 1;
+export const DOCUMENTS_DEFAULT_MARKER_SIZE = 5;
 export const DOCUMENTS_DEFAULT_REQUEST_NUMBER = 1000;
 export const DOCUMENTS_DEFAULT_SHOW_TOOLTIPS: boolean = false;
 export const DOCUMENTS_DEFAULT_TOOLTIPS: string[] = [];
-export const DOCUMENTS_DEFAULT_MARKER_SIZE = 5;
-export const LAYER_PANEL_SHOW_LAYER_ICON = 'eye';
 export const LAYER_PANEL_HIDE_LAYER_ICON = 'eyeClosed';
-export const MAX_LAYER_NAME_LIMIT = 35;
+export const LAYER_PANEL_SHOW_LAYER_ICON = 'eye';
+export const MAP_DATA_LAYER_DEFAULT_OPACITY = 70;
+export const MAP_DEFAULT_MAX_ZOOM = 22;
+export const MAP_DEFAULT_MIN_ZOOM = 0;
+export const MAP_LAYER_DEFAULT_BORDER_THICKNESS = 1;
+export const MAP_LAYER_DEFAULT_MAX_OPACITY = 100;
+export const MAP_LAYER_DEFAULT_MIN_OPACITY = 0;
 export const MAP_LAYER_DEFAULT_NAME = 'Default map';
-export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
-export const MIN_LONGITUDE = -180;
+export const MAP_LAYER_DEFAULT_OPACITY_STEP = 1;
+export const MAP_REFERENCE_LAYER_DEFAULT_OPACITY = 100;
+// Make this configurable from map settings
+export const MAX_LAYER_LIMIT = 20;
+export const MAX_LAYER_NAME_LIMIT = 35;
 export const MAX_LONGITUDE = 180;
+export const MIN_LONGITUDE = -180;
+export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {
diff --git a/public/components/add_layer_panel/add_layer_panel.tsx b/public/components/add_layer_panel/add_layer_panel.tsx
index 75dc7b84..c06aa078 100644
--- a/public/components/add_layer_panel/add_layer_panel.tsx
+++ b/public/components/add_layer_panel/add_layer_panel.tsx
@@ -14,6 +14,7 @@ import {
   EuiHorizontalRule,
   EuiTitle,
   EuiButton,
+  EuiToolTip,
   EuiIcon,
   EuiKeyPadMenuItem,
   EuiSpacer,
@@ -26,6 +27,7 @@ import {
   CUSTOM_MAP,
   Layer,
   NEW_MAP_LAYER_DEFAULT_PREFIX,
+  MAX_LAYER_LIMIT,
 } from '../../../common';
 import { getLayerConfigMap } from '../../utils/getIntialConfig';
 import { ConfigSchema } from '../../../common/config';
@@ -38,6 +40,7 @@ interface Props {
   setIsNewLayer: Function;
   newLayerIndex: number;
   mapConfig: ConfigSchema;
+  layerCount: number;
 }
 
 export const AddLayerPanel = ({
@@ -48,6 +51,7 @@ export const AddLayerPanel = ({
   setIsNewLayer,
   newLayerIndex,
   mapConfig,
+  layerCount,
 }: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
   const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
@@ -99,20 +103,36 @@ export const AddLayerPanel = ({
 
   const closeModal = () => setIsAddNewLayerModalVisible(false);
   const showModal = () => setIsAddNewLayerModalVisible(true);
+  const isMaxLayerLimitReached = () => {
+    return layerCount >= MAX_LAYER_LIMIT;
+  };
 
   return (
     <div className="addLayer">
       <EuiFlexItem className="addLayer__button">
-        <EuiButton
-          size="s"
-          fill
-          onClick={showModal}
-          aria-label="Add layer"
-          isDisabled={IsLayerConfigVisible}
-          data-test-subj="addLayerButton"
+        <EuiToolTip
+          display="block"
+          position="top"
+          content={
+            <p>
+              {isMaxLayerLimitReached()
+                ? `You've added the maximum number of layers (${MAX_LAYER_LIMIT}).`
+                : 'Add layer'}
+            </p>
+          }
         >
-          Add layer
-        </EuiButton>
+          <EuiButton
+            fullWidth
+            size="s"
+            fill
+            onClick={showModal}
+            aria-label="Add layer"
+            isDisabled={IsLayerConfigVisible || isMaxLayerLimitReached()}
+            data-test-subj="addLayerButton"
+          >
+            Add layer
+          </EuiButton>
+        </EuiToolTip>
       </EuiFlexItem>
       {isAddNewLayerModalVisible && (
         <EuiModal onClose={closeModal}>
diff --git a/public/components/layer_control_panel/layer_control_panel.tsx b/public/components/layer_control_panel/layer_control_panel.tsx
index dd191989..1d536281 100644
--- a/public/components/layer_control_panel/layer_control_panel.tsx
+++ b/public/components/layer_control_panel/layer_control_panel.tsx
@@ -504,6 +504,7 @@ export const LayerControlPanel = memo(
                 newLayerIndex={newLayerIndex()}
                 setIsNewLayer={setIsNewLayer}
                 mapConfig={mapConfig}
+                layerCount={layers.length}
               />
               {deleteLayerModal}
             </EuiFlexGroup>