Limit max number of layers (#216) (#219)

Add restriction to create more than 100 layers. Signed-off-by: Vijayan Balasubramanian <balasvij@amazon.com>
opensearch-project · Jan 20, 2023 · 1249653 · 1249653
1 parent d331b98
commit 1249653
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 22 deletions.
diff --git 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
@@ -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
@@ -504,6 +504,7 @@ export const LayerControlPanel = memo(
                 newLayerIndex={newLayerIndex()}
                 setIsNewLayer={setIsNewLayer}
                 mapConfig={mapConfig}
+                layerCount={layers.length}
               />
               {deleteLayerModal}
             </EuiFlexGroup>