add "add layer" UI component (#51)

add "add layer" UI component (#51)

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

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

@@ -0,0 +1,3 @@
+.addLayer__button {
+  padding: $euiSizeM $euiSizeM
+}

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

@@ -0,0 +1,94 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiModal,
+  EuiModalBody,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiTabbedContent,
+  EuiTitle,
+  EuiButton,
+  EuiIcon,
+  EuiKeyPadMenuItem,
+} from '@elastic/eui';
+import './add_layer_panel.scss';
+
+export const AddLayerPanel = () => {
+  // TODO: replace it once layers model ready
+  const layers = ['Base maps', 'Region', 'Coordinate', 'WMS'];
+
+  const selectLayers = layers.map((layerItem, index) => {
+    return (
+      <EuiFlexItem key={index}>
+        <EuiKeyPadMenuItem label={`${layerItem}`} aria-label={`${layerItem}`}>
+          <EuiIcon type="visMapRegion" size="xxl" color="primary" />
+        </EuiKeyPadMenuItem>
+      </EuiFlexItem>
+    );
+  });
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
+
+  const tabs = [
+    {
+      id: 'select-layer-id',
+      name: 'Select layer',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiFlexGroup gutterSize="l">{selectLayers}</EuiFlexGroup>
+        </Fragment>
+      ),
+    },
+    {
+      id: 'import-id',
+      name: 'Import',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <EuiTitle>
+            <h3>Import GeoJSON or JSON</h3>
+          </EuiTitle>
+        </Fragment>
+      ),
+    },
+  ];
+
+  return (
+    <div className="addLayer">
+      <EuiFlexItem className="addLayer__button">
+        <EuiButton size="s" fill onClick={showModal} aria-label="Add layer">
+          + Add layer
+        </EuiButton>
+      </EuiFlexItem>
+      {isModalVisible && (
+        <EuiModal onClose={closeModal}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
+              <h1>Add layer</h1>
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            <EuiTabbedContent
+              tabs={tabs}
+              initialSelectedTab={tabs[0]}
+              autoFocus="selected"
+              aria-label="Add layer tabs"
+            />
+          </EuiModalBody>
+        </EuiModal>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { AddLayerPanel } from './add_layer_panel';

src/plugins/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss

@@ -1,7 +1,14 @@
-.maplibre-control-layer {
-  min-width: 15rem;
+.layerControlPanel {
+  pointer-events: auto;
 
-  .maplibre-control-layer-title {
-    padding-left: 0.5rem;
+  width: $euiSizeL * 10;
+
+  .layerControlPanel__title {
+    padding: $euiSizeM $euiSizeM
+  }
+
+  .layerControlPanel__layerFunctionButton {
+    height: $euiSizeL;
+    width: $euiSizeL;
   }
 }

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

@@ -4,25 +4,85 @@
  */
 
 import React from 'react';
-import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import {
+  EuiPanel,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiListGroupItem,
+  EuiButtonEmpty,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+import { I18nProvider } from '@osd/i18n/react';
 import './layer_control_panel.scss';
+import { AddLayerPanel } from '../add_layer_panel';
 
 const LayerControlPanel = () => {
+  // TODO: replace it once layers model ready
+  const demoLayers = [
+    {
+      label: 'Base Map',
+      iconType: 'visMapRegion',
+    },
+    {
+      label: 'GeoJson Layer',
+      iconType: 'visMapRegion',
+    },
+  ];
+
   return (
     <I18nProvider>
-      <EuiPanel paddingSize="s" className="leaflet-control maplibre-control-layer">
-        <EuiTitle size="xs" className="maplibre-control-layer-title">
-          <h2>
-            <FormattedMessage
-              id="mapsDashboards.maplibre.layerControlTitle"
-              defaultMessage="Map Layers"
-            />
-          </h2>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <div> Roadmap </div>
-        <EuiSpacer size="s" />
+      <EuiPanel paddingSize="none" className="layerControlPanel">
+        <EuiFlexGroup
+          responsive={false}
+          justifyContent="spaceBetween"
+          direction="column"
+          gutterSize="none"
+        >
+          <EuiFlexItem className="layerControlPanel__title">
+            <EuiTitle size="xs">
+              <h2>Map Layers</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiHorizontalRule margin="none" />
+          {demoLayers.map((layer) => (
+            <div>
+              <EuiFlexGroup alignItems="center" gutterSize="none" direction="row">
+                <EuiFlexItem>
+                  <EuiListGroupItem
+                    key={layer.label}
+                    label={layer.label}
+                    data-item={JSON.stringify(layer)}
+                    iconType={layer.iconType}
+                    aria-label="layer in the map layers list"
+                  />
+                </EuiFlexItem>
+                <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+                  <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
+                    <EuiButtonEmpty
+                      iconType="eyeClosed"
+                      size="s"
+                      onClick={() => window.alert('Hidden button clicked')}
+                      aria-label="Hide or show layer"
+                      color="text"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
+                    <EuiButtonEmpty
+                      size="s"
+                      iconType="trash"
+                      onClick={() => window.alert('Delete button clicked')}
+                      aria-label="Delete layer"
+                      color="text"
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexGroup>
+              <EuiHorizontalRule margin="none" />
+            </div>
+          ))}
+          <AddLayerPanel />
+        </EuiFlexGroup>
       </EuiPanel>
     </I18nProvider>
   );

src/plugins/maps_dashboards/public/index.scss

@@ -11,11 +11,7 @@
   min-height: calc(100vh - 98px);
 }
 
-.mapboxgl-ctrl-top-left, .maplibregl-ctrl-top-left {
-  left: 10px;
-  top: 10px;
-}
-
-.maplibre-control-layer{
-  pointer-events: auto;
+.maplibregl-ctrl-top-left {
+  left: $euiSizeS;
+  top: $euiSizeS;
 }