[Maps] move source details to Panel header (#29298)

* [Maps] move source details to Panel header

* fix EMS file link

* add grid icon to WMS and TMS source

* ensure loadingDisplayName and props is only called once when component mounts

* ensure display name gets updated when user changes it in settings panel input

* clean-up styling

* review feedback

x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss

@@ -23,6 +23,14 @@
   box-shadow: 0 $euiSize $euiSize (-$euiSize / 2) $euiColorLightestShade;
 }
 
+.gisLayerPanel__sourceDetails {
+  margin-left: $euiSizeXL;
+}
+
+.gisLayerPanel__sourceDetail {
+  margin-bottom: 0px !important;
+}
+
 .gisLayerPanel__footer {
   border-top: $euiBorderThin;
   box-shadow: 0 ($euiSize *-1) $euiSize (-$euiSize / 2) $euiColorLightestShade;

x-pack/plugins/gis/public/components/layer_panel/settings_panel/settings_panel.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 
 import {
   EuiFlexGroup,
@@ -15,46 +15,35 @@ import {
   EuiFieldText,
   EuiRange,
   EuiSpacer,
-  EuiLink,
 } from '@elastic/eui';
 import { ValidatedRange } from '../../../shared/components/validated_range';
 
-export class SettingsPanel extends Component {
+export function SettingsPanel(props) {
 
-  state = {
-    showSourceDetails: false,
-  }
-
-  toggleSourceDetails = () => {
-    this.setState((prevState) => ({
-      showSourceDetails: !prevState.showSourceDetails,
-    }));
-  }
-
-  onLabelChange = (event) => {
+  const onLabelChange = (event) => {
     const label = event.target.value;
-    this.props.updateLabel(this.props.layerId, label);
-  }
+    props.updateLabel(props.layerId, label);
+  };
 
-  onMinZoomChange = (event) => {
+  const onMinZoomChange = (event) => {
     const zoom = parseInt(event.target.value, 10);
-    this.props.updateMinZoom(this.props.layerId, zoom);
-  }
+    props.updateMinZoom(props.layerId, zoom);
+  };
 
-  onMaxZoomChange = (event) => {
+  const onMaxZoomChange = (event) => {
     const zoom = parseInt(event.target.value, 10);
-    this.props.updateMaxZoom(this.props.layerId, zoom);
-  }
+    props.updateMaxZoom(props.layerId, zoom);
+  };
 
-  onAlphaChange = (alpha) => {
-    this.props.updateAlpha(this.props.layerId, alpha);
-  }
+  const onAlphaChange = (alpha) => {
+    props.updateAlpha(props.layerId, alpha);
+  };
 
-  onSourceChange = ({ propName, value }) => {
-    this.props.updateSourceProp(this.props.layerId, propName, value);
-  }
+  const onSourceChange = ({ propName, value }) => {
+    props.updateSourceProp(props.layerId, propName, value);
+  };
 
-  renderZoomSliders() {
+  const renderZoomSliders = () => {
     return (
       <EuiFormRow
         helpText="Display layer when map is within zoom level range."
@@ -67,8 +56,8 @@ export class SettingsPanel extends Component {
               <EuiRange
                 min={0}
                 max={24}
-                value={this.props.minZoom.toString()}
-                onChange={this.onMinZoomChange}
+                value={props.minZoom.toString()}
+                onChange={onMinZoomChange}
                 showInput
                 showRange
               />
@@ -81,8 +70,8 @@ export class SettingsPanel extends Component {
               <EuiRange
                 min={0}
                 max={24}
-                value={this.props.maxZoom.toString()}
-                onChange={this.onMaxZoomChange}
+                value={props.maxZoom.toString()}
+                onChange={onMaxZoomChange}
                 showInput
                 showRange
               />
@@ -91,22 +80,22 @@ export class SettingsPanel extends Component {
         </EuiFlexGroup>
       </EuiFormRow>
     );
-  }
+  };
 
-  renderLabel() {
+  const renderLabel = () => {
     return (
       <EuiFormRow
         label="Layer display name"
       >
         <EuiFieldText
-          value={this.props.label}
-          onChange={this.onLabelChange}
+          value={props.label}
+          onChange={onLabelChange}
         />
       </EuiFormRow>
     );
-  }
+  };
 
-  renderAlphaSlider() {
+  const renderAlphaSlider = () => {
     return (
       <EuiFormRow
         label="Layer transparency"
@@ -116,59 +105,35 @@ export class SettingsPanel extends Component {
             min={.00}
             max={1.00}
             step={.05}
-            value={this.props.alpha}
-            onChange={this.onAlphaChange}
+            value={props.alpha}
+            onChange={onAlphaChange}
             showLabels
             showInput
             showRange
           />
         </div>
       </EuiFormRow>
     );
-  }
+  };
 
-  renderSourceDetails() {
-    if (!this.state.showSourceDetails) {
-      return null;
-    }
+  return (
+    <EuiPanel>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTitle size="xs"><h5>Settings</h5></EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
 
-    return (
-      <Fragment>
-        {this.props.layer.renderSourceDetails()}
-        <EuiSpacer margin="m"/>
-      </Fragment>
-    );
-  }
+      <EuiSpacer margin="m"/>
 
-  render() {
-    return (
-      <EuiPanel>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiTitle size="xs"><h5>Settings</h5></EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiLink
-              onClick={this.toggleSourceDetails}
-            >
-              source details
-            </EuiLink>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer margin="m"/>
+      {renderLabel()}
 
-        {this.renderSourceDetails()}
+      {renderZoomSliders()}
 
-        {this.renderLabel()}
+      {renderAlphaSlider()}
 
-        {this.renderZoomSliders()}
+      {props.layer.renderSourceSettingsEditor({ onChange: onSourceChange })}
 
-        {this.renderAlphaSlider()}
-
-        {this.props.layer.renderSourceSettingsEditor({ onChange: this.onSourceChange })}
-
-      </EuiPanel>
-    );
-  }
+    </EuiPanel>
+  );
 }

x-pack/plugins/gis/public/components/layer_panel/view.js

@@ -21,17 +21,38 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiSpacer,
+  EuiAccordion,
+  EuiText,
+  EuiLink,
 } from '@elastic/eui';
 
 export class LayerPanel  extends React.Component {
 
-  state = {
-    displayName: null
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const nextId = nextProps.selectedLayer.getId();
+    if (nextId !== prevState.prevId) {
+      return {
+        displayName: '',
+        immutableSourceProps: [],
+        hasLoadedSourcePropsForLayer: false,
+        prevId: nextId,
+      };
+    }
+
+    return null;
   }
 
+  state = {}
+
   componentDidMount() {
     this._isMounted = true;
     this.loadDisplayName();
+    this.loadImmutableSourceProperties();
+  }
+
+  componentDidUpdate() {
+    this.loadDisplayName();
+    this.loadImmutableSourceProperties();
   }
 
   componentWillUnmount() {
@@ -40,8 +61,24 @@ export class LayerPanel  extends React.Component {
 
   loadDisplayName = async () => {
     const displayName = await this.props.selectedLayer.getDisplayName();
+    if (!this._isMounted || displayName === this.state.displayName) {
+      return;
+    }
+
+    this.setState({ displayName });
+  }
+
+  loadImmutableSourceProperties = async () => {
+    if (this.state.hasLoadedSourcePropsForLayer) {
+      return;
+    }
+
+    const immutableSourceProps = await this.props.selectedLayer.getImmutableSourceProperties();
     if (this._isMounted) {
-      this.setState({ displayName });
+      this.setState({
+        immutableSourceProps,
+        hasLoadedSourcePropsForLayer: true,
+      });
     }
   }
 
@@ -60,6 +97,23 @@ export class LayerPanel  extends React.Component {
     );
   }
 
+  _renderSourceProperties() {
+    return this.state.immutableSourceProps.map(({ label, value, link }) => {
+      function renderValue() {
+        if (link) {
+          return (<EuiLink href={link} target="_blank">{value}</EuiLink>);
+        }
+        return (<span>{value}</span>);
+      }
+      return (
+        <p key={label} className="gisLayerPanel__sourceDetail">
+          <strong>{label}</strong>{' '}
+          {renderValue()}
+        </p>
+      );
+    });
+  }
+
   render() {
     const { selectedLayer } = this.props;
 
@@ -81,6 +135,18 @@ export class LayerPanel  extends React.Component {
               </EuiTitle>
             </EuiFlexItem>
           </EuiFlexGroup>
+          <EuiSpacer size="xs" />
+          <div className="gisLayerPanel__sourceDetails">
+            <EuiAccordion
+              id="accordion1"
+              buttonContent="Source details"
+            >
+              <EuiText color="subdued" size="s">
+                <EuiSpacer size="xs" />
+                {this._renderSourceProperties()}
+              </EuiText>
+            </EuiAccordion>
+          </div>
         </EuiFlyoutHeader>
 
         <EuiFlyoutBody className="gisLayerPanel__body">

x-pack/plugins/gis/public/shared/layers/_index.scss

@@ -1,2 +1 @@
 @import './styles/index';
-@import './layers';

x-pack/plugins/gis/public/shared/layers/layer.js

@@ -133,9 +133,9 @@ export class AbstractLayer {
     return this._style;
   }
 
-  renderSourceDetails = () => {
-    return this._source.renderDetails();
-  };
+  async getImmutableSourceProperties() {
+    return this._source.getImmutableProperties();
+  }
 
   renderSourceSettingsEditor = ({ onChange }) => {
     return this._source.renderSourceSettingsEditor({ onChange });