Skip to content

Commit 017520f

Browse files
davemacaulaydavemacaulay
committed
MC-5723: Flaky MFTF Map Tests - Google Maps Rate Limit Reached
- Improve error messaging to user when API key is missing / invalid - Resolve minor styling issues - Unblock “Add Location” button always - Fix “Google Maps API Key” links with URL keys enabled
1 parent 06da7d8 commit 017520f

File tree

12 files changed

+130
-50
lines changed

12 files changed

+130
-50
lines changed

‎app/code/Magento/PageBuilder/Block/GoogleMapsApi.php

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
namespace Magento\PageBuilder\Block;
99

10+
use Magento\Framework\View\Element\Template;
11+
1012
/**
1113
* @api
1214
*/
@@ -16,16 +18,24 @@ class GoogleMapsApi extends \Magento\Framework\View\Element\Template
1618
const GOOGLE_MAPS_LIBRARY_URL = 'https://maps.googleapis.com/maps/api/js?v=3&key=%s';
1719
const GOOGLE_MAPS_STYLE_PATH = 'cms/pagebuilder/google_maps_style';
1820

21+
/**
22+
* Retrieve the Google Maps API key
23+
*
24+
* @return string
25+
*/
26+
public function getApiKey(): ?string
27+
{
28+
return $this->_scopeConfig->getValue(self::GOOGLE_MAPS_API_KEY_PATH);
29+
}
30+
1931
/**
2032
* Generate URL for retrieving Google Maps Javascript API
2133
*
2234
* @return string
2335
*/
2436
public function getLibraryUrl(): string
2537
{
26-
$apiKey = $this->_scopeConfig->getValue(self::GOOGLE_MAPS_API_KEY_PATH);
27-
$libraryUrlWithKey = sprintf(self::GOOGLE_MAPS_LIBRARY_URL, $apiKey);
28-
return $libraryUrlWithKey;
38+
return sprintf(self::GOOGLE_MAPS_LIBRARY_URL, $this->getApiKey());
2939
}
3040

3141
/**
@@ -37,4 +47,17 @@ public function getStyle(): ?string
3747
{
3848
return $this->_scopeConfig->getValue(self::GOOGLE_MAPS_STYLE_PATH);
3949
}
50+
51+
/**
52+
* Return the translated message for an invalid API key.
53+
*
54+
* @return \Magento\Framework\Phrase
55+
*/
56+
public function getInvalidApiKeyMessage(): \Magento\Framework\Phrase
57+
{
58+
return __(
59+
"You must provide a valid <a href='%1'>Google Maps API key</a> to use a map.",
60+
$this->_urlBuilder->getUrl('adminhtml/system_config/edit/section/cms')
61+
);
62+
}
4063
}

‎app/code/Magento/PageBuilder/i18n/en_US.csv

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,3 +285,4 @@ Add,Add
285285
"Media","Media"
286286
"Add Content","Add Content"
287287
"No products were found matching your condition","No products were found matching your condition"
288+
"You must provide a valid <a href="%s">Google Maps API key</a> to use a map.","You must provide a valid <a href="%s">Google Maps API key</a> to use a map."

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_map_form.xml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,17 @@
7070
<item name="config" xsi:type="array">
7171
<item name="additionalClasses" xsi:type="string">message message-warning</item>
7272
<item name="visible" xsi:type="boolean">false</item>
73-
<item name="map_configuration_url" xsi:type="string">admin/system_config/edit/section/cms</item>
74-
<item name="content" xsi:type="string" translate="true"><![CDATA[You must provide the <a href="%s">Google Maps API key</a> in order to use the map]]></item>
73+
<item name="map_configuration_url" xsi:type="string">adminhtml/system_config/edit/section/cms</item>
74+
<item name="content" xsi:type="string" translate="true"><![CDATA[You must provide a valid <a href="%s">Google Maps API key</a> to use a map.]]></item>
7575
</item>
7676
</argument>
7777
</container>
7878
<fieldset name="general" sortOrder="30">
7979
<settings>
8080
<label/>
81+
<additionalClasses>
82+
<class name="admin__field-map-locations">true</class>
83+
</additionalClasses>
8184
</settings>
8285
<modal name="map_location_modal">
8386
<settings>
@@ -125,9 +128,6 @@
125128
</argument>
126129
<settings>
127130
<title translate="true">Add Location</title>
128-
<imports>
129-
<link name="disabled">ns = ${ $.ns }, index = google_map_api_key_check:visible</link>
130-
</imports>
131131
</settings>
132132
</button>
133133
</container>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_google-map.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,8 @@
1515
height: 100%;
1616
justify-content: center;
1717
width: 100%;
18+
19+
a {
20+
margin: 0 3px;
21+
}
1822
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/_map.less

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,30 @@
88
// _____________________________________________
99

1010
.admin__field-map {
11-
.map-field {
11+
.map-field,
12+
.google-map-auth-failure-placeholder {
1213
border-radius: 3px;
1314
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
1415
display: block;
1516
height: 250px;
1617
width: 100%;
1718
}
19+
20+
.google-map-auth-failure-placeholder {
21+
display: flex;
22+
}
23+
1824
input[type='text'] {
1925
display: none;
2026
}
27+
28+
&.invalid-key .map-field {
29+
display: none;
30+
}
31+
}
32+
33+
.admin__field-map-locations .admin__fieldset {
34+
padding-bottom: 0;
35+
padding-left: 0;
36+
padding-right: 0;
2137
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/map/preview.js

Lines changed: 20 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/map.js

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
define([
99
'Magento_Ui/js/form/element/abstract',
1010
'Magento_PageBuilder/js/utils/map',
11+
'module',
12+
'Magento_PageBuilder/js/events',
1113
'googleMaps'
12-
], function (AbstractField, GoogleMap) {
14+
], function (AbstractField, GoogleMap, module, events) {
1315
'use strict';
1416

1517
var google = window.google || {};
@@ -18,7 +20,22 @@ define([
1820
defaults: {
1921
elementTmpl: 'Magento_PageBuilder/form/element/map',
2022
map: false,
21-
marker: false
23+
marker: false,
24+
apiKeyValid: !!module.config().apiKey,
25+
apiKeyErrorMessage: module.config().apiKeyErrorMessage
26+
},
27+
28+
/**
29+
* Initializes observable properties of instance
30+
*
31+
* @returns {Abstract} Chainable.
32+
*/
33+
initObservable: function () {
34+
this._super();
35+
36+
this.observe('apiKeyValid');
37+
38+
return this;
2239
},
2340

2441
/**
@@ -43,11 +60,20 @@ define([
4360
}
4461
};
4562

63+
events.on('googleMaps:authFailure', function () {
64+
this.apiKeyValid(false);
65+
}.bind(this));
66+
4667
// Create the map
47-
this.mapElement = new GoogleMap(element, [], mapOptions);
68+
try {
69+
this.mapElement = new GoogleMap(element, [], mapOptions);
70+
} catch (e) {
71+
this.apiKeyValid(false);
4872

49-
if (!this.mapElement.map) {
73+
return;
74+
}
5075

76+
if (!this.mapElement.map) {
5177
return;
5278
}
5379

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/map/default/preview.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
-->
77

88
<div class="pagebuilder-content-type pagebuilder-map" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
9-
<div attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" afterRender="renderMap"></div>
9+
<div ifnot="apiKeyValid" class="google-map-auth-failure-placeholder" html="apiKeyErrorMessage"></div>
10+
<div if="apiKeyValid" attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" afterRender="renderMap"></div>
1011
<render args="getOptions().template" />
1112
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/map.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
*/
66
-->
77

8-
<div class="admin__field admin__field-map">
9-
<div class="map-field" data-bind="afterRender: renderMap"></div>
8+
<div class="admin__field admin__field-map" css="{'invalid-key': !apiKeyValid()}">
9+
<div ifnot="apiKeyValid" class="google-map-auth-failure-placeholder" html="apiKeyErrorMessage"></div>
10+
<div if="apiKeyValid" class="map-field" afterRender="renderMap"></div>
1011
<div attr="id: uid, name: inputName">
1112
<input type="text" ko-value="value().longitude" attr="name: inputName + '.longitude'"/>
1213
<input type="text" ko-value="value().latitude" attr="name: inputName + '.latitude'"/>

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/map/preview.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@
33
* See COPYING.txt for license details.
44
*/
55

6+
import ko from "knockout";
67
import events from "Magento_PageBuilder/js/events";
78
import GoogleMap from "Magento_PageBuilder/js/utils/map";
8-
import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
9+
import module from "module";
910
import BasePreview from "../preview";
1011

1112
/**
1213
* @api
1314
*/
1415
export default class Preview extends BasePreview {
15-
16+
public apiKeyValid: KnockoutObservable<boolean> = ko.observable(!!module.config().apiKey);
17+
public apiKeyErrorMessage: string = module.config().apiKeyErrorMessage;
1618
private element: Element;
1719
private mapElement: GoogleMap;
1820

@@ -24,9 +26,7 @@ export default class Preview extends BasePreview {
2426

2527
// When the map api key fails, empties out the content type and adds the placeholder
2628
events.on("googleMaps:authFailure", () => {
27-
if (this.element) {
28-
this.mapElement.usePlaceholder(this.element);
29-
}
29+
this.apiKeyValid(false);
3030
});
3131
}
3232

@@ -66,7 +66,12 @@ export default class Preview extends BasePreview {
6666
locations = mapData.locations;
6767
options = mapData.options;
6868
}
69-
this.mapElement = new GoogleMap(element, locations, options);
69+
70+
try {
71+
this.mapElement = new GoogleMap(element, locations, options);
72+
} catch (e) {
73+
this.apiKeyValid(false);
74+
}
7075
}
7176

7277
/**

0 commit comments

Comments
 (0)