Add config layer basic component (#54)

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

src/plugins/maps_dashboards/common/index.ts

@@ -20,3 +20,10 @@ export const MAP_INITIAL_STATE = {
 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',
+}

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

@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 .addLayer__button {
   padding: $euiSizeM $euiSizeM
 }

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

@@ -19,25 +19,35 @@ import {
   EuiKeyPadMenuItem,
 } from '@elastic/eui';
 import './add_layer_panel.scss';
+import { LAYER_TYPE } from '../../../common';
 
-export const AddLayerPanel = () => {
-  // TODO: replace it once layers model ready
-  const layers = ['Base maps', 'Region', 'Coordinate', 'WMS'];
+interface Props {
+  setIsLayerConfigVisible: Function;
+}
 
-  const selectLayers = layers.map((layerItem, index) => {
+export const AddLayerPanel = ({ setIsLayerConfigVisible }: Props) => {
+  const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
+
+  const availableLayers = Object.values(LAYER_TYPE).map((layerItem, index) => {
     return (
       <EuiFlexItem key={index}>
         <EuiKeyPadMenuItem label={`${layerItem}`} aria-label={`${layerItem}`}>
-          <EuiIcon type="visMapRegion" size="xxl" color="primary" />
+          <EuiIcon
+            type="visMapRegion"
+            size="xxl"
+            color="primary"
+            onClick={() => {
+              setIsAddNewLayerModalVisible(false);
+              setIsLayerConfigVisible(true);
+            }}
+          />
         </EuiKeyPadMenuItem>
       </EuiFlexItem>
     );
   });
 
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const closeModal = () => setIsModalVisible(false);
-  const showModal = () => setIsModalVisible(true);
+  const closeModal = () => setIsAddNewLayerModalVisible(false);
+  const showModal = () => setIsAddNewLayerModalVisible(true);
 
   const tabs = [
     {
@@ -46,7 +56,7 @@ export const AddLayerPanel = () => {
       content: (
         <Fragment>
           <EuiSpacer />
-          <EuiFlexGroup gutterSize="l">{selectLayers}</EuiFlexGroup>
+          <EuiFlexGroup gutterSize="l">{availableLayers}</EuiFlexGroup>
         </Fragment>
       ),
     },
@@ -71,7 +81,7 @@ export const AddLayerPanel = () => {
           + Add layer
         </EuiButton>
       </EuiFlexItem>
-      {isModalVisible && (
+      {isAddNewLayerModalVisible && (
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>
             <EuiModalHeaderTitle>

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

@@ -6,7 +6,8 @@
 import React from 'react';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import { I18nProvider } from '@osd/i18n/react';
-import { MapsList, Map } from '../pages/';
+import { MapsList } from './maps_list';
+import { MapContainer } from './map_container';
 import { CoreStart } from '../../../../src/core/public';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
 import { APP_PATH } from '../../common/index';
@@ -25,7 +26,7 @@ export const MapsDashboardsApp = ({ basename, notifications, http }: MapsDashboa
       <I18nProvider>
         <div>
           <Switch>
-            <Route path={APP_PATH.CREATE_MAP} render={(props) => <Map />} />
+            <Route path={APP_PATH.CREATE_MAP} render={(props) => <MapContainer />} />
             <Route
               exact
               path="/"

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

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

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

@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiButton,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiCodeBlock,
+  EuiTitle,
+} from '@elastic/eui';
+import { ILayerConfig } from '../../model/ILayerConfig';
+
+interface Props {
+  setIsLayerConfigVisible: Function;
+  selectedLayerConfig: ILayerConfig;
+}
+
+export const LayerConfigPanel = ({ setIsLayerConfigVisible, selectedLayerConfig }: Props) => {
+  return (
+    <EuiFlyout type="push" size="s" onClose={() => setIsLayerConfigVisible(false)}>
+      <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>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButton onClick={() => setIsLayerConfigVisible(false)}>Close</EuiButton>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

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

@@ -1,6 +1,5 @@
-.layerControlPanel {
+.layerControlPanel--show {
   pointer-events: auto;
-
   width: $euiSizeL * 10;
 
   .layerControlPanel__title {
@@ -12,3 +11,13 @@
     width: $euiSizeL;
   }
 }
+
+.layerControlPanel--hide {
+  pointer-events: auto;
+
+  .layerControlPanel__visButton {
+    background-color: $euiColorEmptyShade;
+    color: $euiTextColor;
+    border-color: $euiColorLightShade;
+  }
+}