ENGCOM-7295: Improve openDialog method initialization #27566

 - Merge Pull Request #27566 from Nazar65/magento2:support-new-media-gallery
 - Merged commits:
   1. c839ecc
   2. e5e23a8
   3. 7ba5410
   4. f8730c9
   5. dba6863
   6. 2da1025
   7. 9b21471
   8. 610cd62
   9. 26e4df5
   10. 8a5def7
   11. 2c74e2f
   12. 67c2c0c
   13. 25e5df1
   14. e4cdee3
   15. d6fabe2
   16. 6f3cc44
   17. cbb1f4a
   18. b0afe12
   19. 8f338a9
   20. 9b75b8d
   21. 15a1861
   22. cdcf858
   23. c94a81c
   24. edf4017
   25. 0abc548
   26. 9387809
   27. aa82c97
   28. 41f7115

Author: magento-engcom-team

app/code/Magento/Cms/Model/Wysiwyg/Gallery/DefaultConfigProvider.php

@@ -8,6 +8,11 @@
 
 namespace Magento\Cms\Model\Wysiwyg\Gallery;
 
+use Magento\Ui\Component\Form\Element\DataType\Media\OpenDialogUrl;
+
+/**
+ * @inheritdoc
+ */
 class DefaultConfigProvider implements \Magento\Framework\Data\Wysiwyg\ConfigProviderInterface
 {
     /**
@@ -30,26 +35,34 @@ class DefaultConfigProvider implements \Magento\Framework\Data\Wysiwyg\ConfigPro
      */
     private $currentTreePath;
 
+    /**
+     * @var OpednDialogUrl
+     */
+    private $openDialogUrl;
+
     /**
      * @param \Magento\Backend\Model\UrlInterface $backendUrl
      * @param \Magento\Cms\Helper\Wysiwyg\Images $imagesHelper
+     * @param OpenDialogUrl $openDialogUrl
      * @param array $windowSize
      * @param string|null $currentTreePath
      */
     public function __construct(
         \Magento\Backend\Model\UrlInterface $backendUrl,
         \Magento\Cms\Helper\Wysiwyg\Images $imagesHelper,
+        OpenDialogUrl $openDialogUrl,
         array $windowSize = [],
         $currentTreePath = null
     ) {
         $this->backendUrl = $backendUrl;
         $this->imagesHelper = $imagesHelper;
+        $this->openDialogUrl = $openDialogUrl;
         $this->windowSize = $windowSize;
         $this->currentTreePath = $currentTreePath;
     }
 
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Framework\DataObject
     {
@@ -72,7 +85,7 @@ public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Fram
             [
                 'add_images' => true,
                 'files_browser_window_url' => $this->backendUrl->getUrl(
-                    'cms/wysiwyg_images/index',
+                    $this->openDialogUrl->get(),
                     $fileBrowserUrlParams
                 ),
                 'files_browser_window_width' => $this->windowSize['width'],

app/code/Magento/Tinymce3/Model/Config/Gallery/Config.php

@@ -7,6 +7,8 @@
 
 namespace Magento\Tinymce3\Model\Config\Gallery;
 
+use Magento\Ui\Component\Form\Element\DataType\Media\OpenDialogUrl;
+
 /**
  * Class Config adds information about required configurations to display media gallery of tinymce3 editor
  *
@@ -19,13 +21,21 @@ class Config implements \Magento\Framework\Data\Wysiwyg\ConfigProviderInterface
      */
     private $backendUrl;
 
+    /**
+     * @var OpednDialogUrl
+     */
+    private $openDialogUrl;
+
     /**
      * @param \Magento\Backend\Model\UrlInterface $backendUrl
+     * @param OpenDialogUrl $openDialogUrl
      */
     public function __construct(
-        \Magento\Backend\Model\UrlInterface $backendUrl
+        \Magento\Backend\Model\UrlInterface $backendUrl,
+        OpenDialogUrl $openDialogUrl
     ) {
         $this->backendUrl = $backendUrl;
+        $this->openDialogUrl = $openDialogUrl;
     }
 
     /**
@@ -39,7 +49,7 @@ public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Fram
         $config->addData(
             [
                 'add_images' => true,
-                'files_browser_window_url' => $this->backendUrl->getUrl('cms/wysiwyg_images/index'),
+                'files_browser_window_url' => $this->backendUrl->getUrl($this->openDialogUrl->get()),
             ]
         );
 

app/code/Magento/Tinymce3/composer.json

@@ -7,8 +7,7 @@
         "magento/module-backend": "*",
         "magento/module-ui": "*",
         "magento/module-variable": "*",
-        "magento/module-widget": "*",
-        "magento/module-cms": "*"
+        "magento/module-widget": "*"
 
     },
     "suggest": {

app/code/Magento/Ui/Component/Form/Element/DataType/Media/Image.php

@@ -31,35 +31,43 @@ class Image extends Media
      */
     private $fileSize;
 
+    /**
+     * @var OpednDialogUrl
+     */
+    private $openDialogUrl;
+
     /**
      * @param ContextInterface $context
      * @param StoreManagerInterface $storeManager
      * @param Size $fileSize
+     * @param OpenDialogUrl $openDialogUrl
      * @param UiComponentInterface[] $components
      * @param array $data
      */
     public function __construct(
         ContextInterface $context,
         StoreManagerInterface $storeManager,
         Size $fileSize,
+        OpenDialogUrl $openDialogUrl,
         array $components = [],
         array $data = []
     ) {
         $this->storeManager = $storeManager;
         $this->fileSize = $fileSize;
+        $this->openDialogUrl = $openDialogUrl;
         parent::__construct($context, $components, $data);
     }
 
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     public function getComponentName()
     {
         return static::NAME;
     }
 
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     public function prepare()
     {
@@ -75,7 +83,10 @@ public function prepare()
                 'config' => [
                     'maxFileSize' => $maxFileSize,
                     'mediaGallery' => [
-                        'openDialogUrl' => $this->getContext()->getUrl('cms/wysiwyg_images/index', ['_secure' => true]),
+                        'openDialogUrl' => $this->getContext()->getUrl(
+                            $this->openDialogUrl->get(),
+                            ['_secure' => true]
+                        ),
                         'openDialogTitle' => $this->getConfiguration()['openDialogTitle'] ?? __('Insert Images...'),
                         'initialOpenSubpath' => $this->getConfiguration()['initialMediaGalleryOpenSubpath'],
                         'storeId' => $this->storeManager->getStore()->getId(),

app/code/Magento/Ui/Component/Form/Element/DataType/Media/OpenDialogUrl.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Ui\Component\Form\Element\DataType\Media;
+
+use Magento\Framework\DataObject;
+
+/**
+ * Basic configuration for OdenDialogUrl
+ */
+class OpenDialogUrl
+{
+    private const DEFAULT_OPEN_DIALOG_URL = 'cms/wysiwyg_images/index';
+
+    /**
+     * @var string
+     */
+    private $openDialogUrl;
+
+    /**
+     * @param DataObject $url
+     */
+    public function __construct(DataObject $url = null)
+    {
+        $this->openDialogUrl = $url;
+    }
+
+    /**
+     * Returns open dialog url for media browser
+     *
+     * @return string
+     */
+    public function get(): string
+    {
+        if ($this->openDialogUrl) {
+            return $this->openDialogUrl->getUrl();
+        }
+        return self::DEFAULT_OPEN_DIALOG_URL;
+    }
+}

app/code/Magento/Ui/composer.json

@@ -11,8 +11,7 @@
         "magento/module-backend": "*",
         "magento/module-eav": "*",
         "magento/module-store": "*",
-        "magento/module-user": "*",
-        "magento/module-cms": "*"
+        "magento/module-user": "*"
     },
     "suggest": {
         "magento/module-config": "*"

app/code/Magento/Ui/view/base/web/js/form/element/image-uploader.js

@@ -81,7 +81,15 @@ define([
                 openDialogUrl += '&current_tree_path=' + Base64.mageEncode(this.mediaGallery.initialOpenSubpath);
             }
 
-            browser.openDialog(openDialogUrl, null, null, this.mediaGallery.openDialogTitle);
+            browser.openDialog(
+                openDialogUrl,
+                null,
+                null,
+                this.mediaGallery.openDialogTitle,
+                {
+                    targetElementId: $buttonEl.attr('id')
+                }
+            );
         },
 
         /**

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/form/element/image-uploader.test.js

@@ -78,7 +78,10 @@ define([
                         '?isAjax=true&current_tree_path=d3lzaXd5Zw,,',
                     null,
                     null,
-                    'Hello world'
+                    'Hello world',
+                    {
+                        targetElementId: 'theTargetId'
+                    }
                 );
             });
         });

dev/tests/js/jasmine/tests/lib/mage/browser.test.js

@@ -37,6 +37,7 @@ define([
                          */
                         done: function () {
                             obj.targetElementId = 1;
+                            obj.modalLoaded = true;
                         }
                     };
                 });
@@ -58,8 +59,8 @@ define([
                         }
                     };
                 });
-            obj.openDialog('instance/url', 100, 100, 'title', undefined);
-            obj.openDialog('instance/url', 100, 100, 'title', undefined);
+            obj.openDialog('instance/url/target_element_id/YDW2424/', 100, 100, 'title', undefined);
+            obj.openDialog('instance/target_element_id/Y45GDRg/', 100, 100, 'title', undefined);
             expect($.ajax.calls.count()).toBe(1);
         });
     });

lib/internal/Magento/Framework/Data/Form/Element/Editor.php

@@ -286,15 +286,19 @@ protected function _getPluginButtonsHtml($visible = true)
 
         // Button to media images insertion window
         if ($this->getConfig('add_images')) {
+            $htmlId = $this->getHtmlId();
+            $url = $this->getConfig('files_browser_window_url')
+                . 'target_element_id/'
+                . $htmlId
+                . '/'
+                . (null !== $this->getConfig('store_id')
+                    ? 'store/' . $this->getConfig('store_id') . '/"'
+                    : '');
             $buttonsHtml .= $this->_getButtonHtml(
                 [
                     'title' => $this->translate('Insert Image...'),
-                    'onclick' => "MediabrowserUtility.openDialog('"
-                        . $this->getConfig('files_browser_window_url')
-                        . "target_element_id/" . $this->getHtmlId() . "/"
-                        . (null !== $this->getConfig('store_id') ? 'store/'
-                            . $this->getConfig('store_id') . '/' : '')
-                        . "')",
+                    'onclick' => 'MediabrowserUtility.openDialog(\'' . $url
+                        . '\', null, null, null, { \'targetElementId\': \'' . $htmlId . '\' })',
                     'class' => 'action-add-image plugin',
                     'style' => $visible ? '' : 'display:none',
                 ]
@@ -496,13 +500,13 @@ protected function getInlineJs($jsSetupObject, $forceLoad)
         $jsString = '
                 <script type="text/javascript">
                 //<![CDATA[
-                window.tinyMCE_GZ = window.tinyMCE_GZ || {}; 
+                window.tinyMCE_GZ = window.tinyMCE_GZ || {};
                 window.tinyMCE_GZ.loaded = true;
                 require([
-                "jquery", 
-                "mage/translate", 
-                "mage/adminhtml/events", 
-                "mage/adminhtml/wysiwyg/tiny_mce/setup", 
+                "jquery",
+                "mage/translate",
+                "mage/adminhtml/events",
+                "mage/adminhtml/wysiwyg/tiny_mce/setup",
                 "mage/adminhtml/wysiwyg/widget"
                 ], function(jQuery){' .
             "\n" .