[Maps] render attribution with no url as text instead of EuiLink (#31873) (#31900)

* [Maps] render attribution with no url as text instead of EuiLink

* remove check for length

x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AttributionControl is rendered 1`] = `
+<EuiPanel
+  className="mapWidgetControl mapAttributionControl"
+  grow={false}
+  hasShadow={false}
+  paddingSize="none"
+>
+  <EuiText
+    color="subdued"
+    grow={true}
+    size="xs"
+  >
+    <small>
+      attribution with no link
+      , 
+      <EuiLink
+        color="subdued"
+        href="https://coolmaps.com"
+        target="_blank"
+        type="button"
+      >
+        attribution with link
+      </EuiLink>
+    </small>
+  </EuiText>
+</EuiPanel>
+`;

x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js

@@ -24,7 +24,7 @@ export class AttributionControl  extends React.Component {
 
   componentDidMount() {
     this._isMounted = true;
-    this._syncMbMapWithAttribution();
+    this._loadAttributions();
   }
 
   componentWillUnmount() {
@@ -32,11 +32,10 @@ export class AttributionControl  extends React.Component {
   }
 
   componentDidUpdate() {
-    this._syncMbMapWithAttribution();
+    this._loadAttributions();
   }
 
-  _syncMbMapWithAttribution = async () => {
-
+  _loadAttributions = async () => {
     const attributionPromises = this.props.layerList.map(async (layer) => {
       try {
         return await layer.getAttributions();
@@ -66,11 +65,21 @@ export class AttributionControl  extends React.Component {
     }
   };
 
+  _renderAttribution({ url, label }) {
+    if (!url) {
+      return label;
+    }
+
+    return (
+      <EuiLink color="subdued" href={url} target="_blank">{label}</EuiLink>
+    );
+  }
+
   _renderAttributions() {
     return this.state.uniqueAttributions.map((attribution, index) => {
       return (
         <Fragment key={index}>
-          <EuiLink color="subdued" href={attribution.url} target="_blank">{attribution.label}</EuiLink>
+          {this._renderAttribution(attribution)}
           {index < (this.state.uniqueAttributions.length - 1) && ', '}
         </Fragment>
       );

x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.test.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { AttributionControl } from './view';
+
+describe('AttributionControl', () => {
+  test('is rendered', async () => {
+    const mockLayer1 = {
+      getAttributions: async () => {
+        return [
+          { url: '', label: 'attribution with no link' }
+        ];
+      }
+    };
+    const mockLayer2 = {
+      getAttributions: async () => {
+        return [
+          { url: 'https://coolmaps.com', label: 'attribution with link' }
+        ];
+      }
+    };
+    const component = shallow(
+      <AttributionControl
+        layerList={[mockLayer1, mockLayer2]}
+      />
+    );
+
+    // Ensure all promises resolve
+    await new Promise(resolve => process.nextTick(resolve));
+    // Ensure the state changes are reflected
+    component.update();
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});