From 19b4761c7675199471cef3ca2bb5ee5963e5941c Mon Sep 17 00:00:00 2001
From: Junqiu Lei <junqiu@amazon.com>
Date: Tue, 10 Jan 2023 10:54:34 -0800
Subject: [PATCH] Update layer type UI on config panel (#188)

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
---
 .../components/layer_config/layer_basic_settings.tsx  |  8 --------
 public/components/layer_config/layer_config_panel.tsx | 11 +++++++++--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/public/components/layer_config/layer_basic_settings.tsx b/public/components/layer_config/layer_basic_settings.tsx
index 2efe736f..e226853c 100644
--- a/public/components/layer_config/layer_basic_settings.tsx
+++ b/public/components/layer_config/layer_basic_settings.tsx
@@ -99,14 +99,6 @@ export const LayerBasicSettings = ({
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiForm>
-        <EuiFormRow label="Type" fullWidth={true}>
-          <EuiFieldText
-            name="layerType"
-            value={layersTypeNameMap[selectedLayerConfig.type]}
-            readOnly={true}
-            fullWidth={true}
-          />
-        </EuiFormRow>
         <EuiFormRow label="Name" error={errors} isInvalid={invalid} fullWidth={true}>
           <EuiFieldText
             name="layerName"
diff --git a/public/components/layer_config/layer_config_panel.tsx b/public/components/layer_config/layer_config_panel.tsx
index 400795dd..4dc9cc9f 100644
--- a/public/components/layer_config/layer_config_panel.tsx
+++ b/public/components/layer_config/layer_config_panel.tsx
@@ -21,13 +21,14 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiIcon,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import { BaseMapLayerConfigPanel } from './index';
 import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
 import { DocumentLayerConfigPanel } from './documents_config/document_layer_config_panel';
-import { layersTypeIconMap } from '../../model/layersFunctions';
+import { layersTypeIconMap, layersTypeNameMap } from '../../model/layersFunctions';
 import { CustomMapConfigPanel } from './custom_map_config/custom_map_config_panel';
 
 interface Props {
@@ -104,7 +105,7 @@ export const LayerConfigPanel = ({
       className="layerConfigPanel"
     >
       <EuiFlyoutHeader hasBorder={true}>
-        <EuiFlexGroup gutterSize="s" justifyContent="spaceAround">
+        <EuiFlexGroup gutterSize="s" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiIcon type={layersTypeIconMap[selectedLayerConfig.type]} size="m" />
           </EuiFlexItem>
@@ -112,6 +113,12 @@ export const LayerConfigPanel = ({
             <strong>{selectedLayerConfig.name}</strong>
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size="s" />
+        <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <small>Type: {layersTypeNameMap[selectedLayerConfig.type]}</small>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <EuiFlexGroup className="layerBasicSettings" direction="column">