add base layer functions

Signed-off-by: Junqiu Lei <[email protected]>

src/plugins/maps_dashboards/common/index.ts

@@ -19,9 +19,11 @@ export const APP_PATH = {
   CREATE_MAP: '/create-map',
 };
 
-export enum LAYER_TYPE {
-  BASE_MAP = 'base map',
-  CLUSTER_MAP = 'cluster',
-  CHOROPLETH_MAP = 'choropleth',
-  WEB_MAP_SERVICE = 'wms',
+export enum DASHBOARDS_MAPS_LAYER_TYPE {
+  OPENSEARCH_MAP = 'OpenSearch Map',
 }
+
+export const LAYER_VISIBILITY = {
+  NONE: 'none',
+  VISIBLE: 'visible',
+};

src/plugins/maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx

@@ -19,16 +19,24 @@ import {
   EuiKeyPadMenuItem,
 } from '@elastic/eui';
 import './add_layer_panel.scss';
-import { LAYER_TYPE } from '../../../common';
+import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
 
 interface Props {
   setIsLayerConfigVisible: Function;
+  setSelectedLayerConfig: Function;
+  addNewLayerToList: Function;
 }
 
-export const AddLayerPanel = ({ setIsLayerConfigVisible }: Props) => {
+export const AddLayerPanel = ({ setIsLayerConfigVisible, setSelectedLayerConfig }: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
 
-  const availableLayers = Object.values(LAYER_TYPE).map((layerItem, index) => {
+  function onClickAddNewLayer(layerItem: string) {
+    // Will add new layer logic
+    setIsAddNewLayerModalVisible(false);
+    setIsLayerConfigVisible(true);
+  }
+
+  const availableLayers = Object.values(DASHBOARDS_MAPS_LAYER_TYPE).map((layerItem, index) => {
     return (
       <EuiFlexItem key={index}>
         <EuiKeyPadMenuItem label={`${layerItem}`} aria-label={`${layerItem}`}>
@@ -37,8 +45,7 @@ export const AddLayerPanel = ({ setIsLayerConfigVisible }: Props) => {
             size="xxl"
             color="primary"
             onClick={() => {
-              setIsAddNewLayerModalVisible(false);
-              setIsLayerConfigVisible(true);
+              onClickAddNewLayer(layerItem);
             }}
           />
         </EuiKeyPadMenuItem>
@@ -88,7 +95,6 @@ export const AddLayerPanel = ({ setIsLayerConfigVisible }: Props) => {
               <h1>Add layer</h1>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
-
           <EuiModalBody>
             <EuiTabbedContent
               tabs={tabs}

src/plugins/maps_dashboards/public/components/layer_config/base_map_layer_config_panel.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiForm, EuiFormRow, EuiFieldText, EuiDualRange, EuiRange } from '@elastic/eui';
+import { ILayerConfig } from '../../model/ILayerConfig';
+
+interface Props {
+  selectedLayerConfig: ILayerConfig;
+  setSelectedLayerConfig: Function;
+}
+
+export const BaseMapLayerConfigPanel = ({ selectedLayerConfig, setSelectedLayerConfig }: Props) => {
+  const onZoomChange = (value: number[]) => {
+    setSelectedLayerConfig({ ...selectedLayerConfig, zoomRange: value });
+  };
+
+  const onOpacityChange = (e) => {
+    setSelectedLayerConfig({ ...selectedLayerConfig, opacity: Number(e.target.value) });
+  };
+
+  const onNameChange = (e) => {
+    setSelectedLayerConfig({ ...selectedLayerConfig, name: String(e.target.value) });
+  };
+
+  return (
+    <EuiForm>
+      <EuiFormRow label="Name">
+        <EuiFieldText name="first" value={selectedLayerConfig.name} onChange={onNameChange} />
+      </EuiFormRow>
+      <EuiFormRow label="Zoom">
+        <EuiDualRange
+          min={0}
+          max={22}
+          value={selectedLayerConfig.zoomRange}
+          onChange={onZoomChange}
+          showInput
+          minInputProps={{ 'aria-label': 'Min value' }}
+          maxInputProps={{ 'aria-label': 'Max value' }}
+          aria-label="EuiDualRange with inputs for zoom level"
+        />
+      </EuiFormRow>
+      <EuiFormRow label="Opacity">
+        <EuiRange
+          min={0}
+          max={1}
+          step={0.1}
+          value={selectedLayerConfig.opacity}
+          onChange={onOpacityChange}
+          showInput
+          aria-label="EuiRange for layer opacity"
+        />
+      </EuiFormRow>
+    </EuiForm>
+  );
+};

src/plugins/maps_dashboards/public/components/layer_config/index.ts

@@ -4,3 +4,4 @@
  */
 
 export { LayerConfigPanel } from './layer_config_panel';
+export { BaseMapLayerConfigPanel } from './base_map_layer_config_panel';

src/plugins/maps_dashboards/public/components/layer_config/layer_config_panel.tsx

@@ -10,38 +10,82 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiCodeBlock,
   EuiTitle,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiFlexGroup,
 } from '@elastic/eui';
 import { ILayerConfig } from '../../model/ILayerConfig';
+import { BaseMapLayerConfigPanel } from './index';
+import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
 
 interface Props {
   setIsLayerConfigVisible: Function;
   selectedLayerConfig: ILayerConfig;
+  setSelectedLayerConfig: Function;
+  addNewLayerFunction: Function;
+  updateLayer: Function;
 }
 
-export const LayerConfigPanel = ({ setIsLayerConfigVisible, selectedLayerConfig }: Props) => {
+export const LayerConfigPanel = ({
+  setIsLayerConfigVisible,
+  selectedLayerConfig,
+  setSelectedLayerConfig,
+  updateLayer,
+}: Props) => {
+  const onClose = () => {
+    setIsLayerConfigVisible(false);
+    setSelectedLayerConfig({});
+  };
+  const onUpdate = () => {
+    updateLayer();
+    selectedLayerConfig.update?.();
+    onClose();
+  };
+
   return (
-    <EuiFlyout type="push" size="s" onClose={() => setIsLayerConfigVisible(false)}>
+    <EuiFlyout
+      type="push"
+      size="s"
+      onClose={onClose}
+      hideCloseButton={true}
+      className="layerConfigPanel"
+    >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
           <h2>{selectedLayerConfig.name}</h2>
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiCodeBlock
-          language="js"
-          fontSize="m"
-          paddingSize="m"
-          color="dark"
-          overflowHeight={300}
-          isCopyable
-        >
-          {JSON.stringify(selectedLayerConfig)}
-        </EuiCodeBlock>
+        <EuiFlexGroup className="layerBasicSettings" direction="column">
+          <EuiFlexItem className="layerBasicSettings__header">
+            <EuiTitle size="xs">
+              <h2>Layer settings</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            {selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP && (
+              <BaseMapLayerConfigPanel
+                selectedLayerConfig={selectedLayerConfig}
+                setSelectedLayerConfig={setSelectedLayerConfig}
+              />
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
-        <EuiButton onClick={() => setIsLayerConfigVisible(false)}>Close</EuiButton>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+              Discard
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton iconType="play" onClick={onUpdate} fill>
+              Update
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlyoutFooter>
     </EuiFlyout>
   );

src/plugins/maps_dashboards/public/components/layer_control_panel/index.ts

@@ -4,4 +4,3 @@
  */
 
 export { LayerControlPanel } from './layer_control_panel';
-export { MaplibreLayersPanelControl } from './MaplibreLayersPanelControl';