Update layer type UI on config panel (opensearch-project#188)

Signed-off-by: Junqiu Lei <[email protected]>
msfroh · Jan 10, 2023 · 19b4761 · 19b4761
1 parent f4dc5d3
commit 19b4761
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git 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
@@ -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,14 +105,20 @@ 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>
           <EuiFlexItem>
             <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">