MC-5723: Flaky MFTF Map Tests - Google Maps Rate Limit Reached

- Ensure API isn’t called if no key is set
- Refactor preview logic to use visible as it’s more reliable
- Fix console error

Author: davemacaulay

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

@@ -62,4 +62,19 @@ public function getInvalidApiKeyMessage(): \Magento\Framework\Phrase
             $this->_urlBuilder->getUrl('adminhtml/system_config/edit/section/cms', ['_fragment' => 'cms_pagebuilder'])
         );
     }
+
+    /**
+     * Include the Google Maps library within the admin only if the API key is set
+     *
+     * @return bool
+     */
+    public function shouldIncludeGoogleMapsLibrary(): bool
+    {
+        try {
+            return $this->_appState->getAreaCode() !== \Magento\Backend\App\Area\FrontNameResolver::AREA_CODE ||
+                $this->getApiKey();
+        } catch (\Magento\Framework\Exception\LocalizedException $e) {
+            return false;
+        }
+    }
 }

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

@@ -22,10 +22,6 @@
     input[type='text'] {
         display: none;
     }
-
-    &.invalid-key .map-field {
-        display: none;
-    }
 }
 
 .admin__field-map-locations .admin__fieldset {

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

@@ -9,8 +9,7 @@ define([
     'Magento_Ui/js/form/element/abstract',
     'Magento_PageBuilder/js/utils/map',
     'module',
-    'Magento_PageBuilder/js/events',
-    'googleMaps'
+    'Magento_PageBuilder/js/events'
 ], function (AbstractField, GoogleMap, module, events) {
     'use strict';
 
@@ -49,6 +48,10 @@ define([
                 mapOptions,
                 latitudeLongitude;
 
+            if (!this.apiKeyValid()) {
+                return;
+            }
+
             if (typeof startValue === 'string' && startValue !== '') {
                 startValue = JSON.parse(startValue);
             }
@@ -65,15 +68,9 @@ define([
             }.bind(this));
 
             // Create the map
-            try {
-                this.mapElement = new GoogleMap(element, [], mapOptions);
-            } catch (e) {
-                this.apiKeyValid(false);
-
-                return;
-            }
+            this.mapElement = new GoogleMap(element, [], mapOptions);
 
-            if (!this.mapElement.map) {
+            if (!this.mapElement || !this.mapElement.map) {
                 return;
             }
 
@@ -141,6 +138,10 @@ define([
          * Callback after an update to map
          */
         onUpdate: function () {
+            if (!this.mapElement) {
+                return;
+            }
+
             this._super();
             var content = this.value(),
                 latitudeLongitude;
@@ -153,6 +154,7 @@ define([
             }
 
             if (!this.validateCoordinate(content) ||
+                this.mapElement &&
                 !this.mapElement.map ||
                 this.value() === '' ||
                 this.value() === this.exportValue()) {

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

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

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

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

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

@@ -37,9 +37,13 @@ export default class Preview extends BasePreview {
      * @returns {void}
      */
     public renderMap(element: Element) {
+        if (!this.apiKeyValid()) {
+            return;
+        }
+
         this.generateMap(element);
         this.element = element;
-        if (this.mapElement.map) {
+        if (this.mapElement && this.mapElement.map) {
             this.data.main.attributes.subscribe(() => {
                 this.updateMap();
             });
@@ -67,11 +71,7 @@ export default class Preview extends BasePreview {
             options = mapData.options;
         }
 
-        try {
-            this.mapElement = new GoogleMap(element, locations, options);
-        } catch (e) {
-            this.apiKeyValid(false);
-        }
+        this.mapElement = new GoogleMap(element, locations, options);
     }
 
     /**

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

@@ -26,3 +26,17 @@
         }
     });
 </script>
+
+<?php
+// Include the googleMaps dependency only if we have an API key set, this removes unnecessary calls to Google
+if ($block->shouldIncludeGoogleMapsLibrary()): ?>
+<script>
+    require.config({
+        shim: {
+            'Magento_PageBuilder/js/utils/map': {
+                deps: ['googleMaps']
+            }
+        }
+    });
+</script>
+<?php endif; ?>

app/code/Magento/PageBuilder/view/base/templates/googlemaps.phtml

@@ -4,13 +4,14 @@
  */
 
 /**
+ * googleMaps dependency is added within googlemaps.phtml through shim based on API key being set
+ *
  * @api
  */
 define([
     'underscore',
     'module',
-    'Magento_PageBuilder/js/events',
-    'googleMaps'
+    'Magento_PageBuilder/js/events'
 ], function (_, module, events) {
     'use strict';
 
@@ -41,9 +42,11 @@ define([
         var options,
             style;
 
-        // If we've previously had an API key error, throw our own error instead
+        // If we've previously had an API key error, throw the error even again
         if (gmAuthFailure) {
-            throw 'InvalidKeyMapError';
+            events.trigger('googleMaps:authFailure');
+
+            return;
         }
 
         /**