Improve button visibility per allowed actions for user

Author: Nazar65

app/code/Magento/MediaGalleryUi/Ui/Component/Control/CreateFolder.php

@@ -34,7 +34,7 @@ public function __construct(
     /**
      * @inheritdoc
      */
-    public function getButtonData()
+    public function getButtonData(): array
     {
         $buttonData = [
             'label' => __('Create Folder'),

app/code/Magento/MediaGalleryUi/Ui/Component/Control/DeleteAssets.php

@@ -32,7 +32,7 @@ public function __construct(
     }
 
     /**
-     * @return array
+     * @inheritdoc
      */
     public function getButtonData(): array
     {

app/code/Magento/MediaGalleryUi/Ui/Component/Control/DeleteFolder.php

@@ -32,9 +32,9 @@ public function __construct(
     }
 
     /**
-     * @return array
+     * @inheritdoc
      */
-    public function getButtonData()
+    public function getButtonData(): array
     {
         $buttonData = [
             'label' => __('Delete Folder'),

app/code/Magento/MediaGalleryUi/Ui/Component/Control/InsertAsstes.php

@@ -34,11 +34,11 @@ public function __construct(
     /**
      * @inheritdoc
      */
-    public function getButtonData()
+    public function getButtonData(): array
     {
         $buttonData = [
             'label' => __('Add Selected'),
-            'on_click' => 'return false;");',
+            'on_click' => 'return false;',
             'class' => 'action-primary no-display media-gallery-add-selected',
             'sort_order' => 110,
         ];

app/code/Magento/MediaGalleryUi/Ui/Component/Control/UploadAssets.php

@@ -32,9 +32,9 @@ public function __construct(
     }
 
     /**
-     * @return array
+     * @inheritdoc
      */
-    public function getButtonData()
+    public function getButtonData(): array
     {
         $buttonData = [
             'label' => __('Upload Image'),

app/code/Magento/MediaGalleryUi/Ui/Component/Listing/Columns/Url.php

@@ -15,12 +15,18 @@
 use Magento\Framework\View\Element\UiComponentFactory;
 use Magento\Store\Model\StoreManagerInterface;
 use Magento\Ui\Component\Listing\Columns\Column;
+use Magento\Framework\AuthorizationInterface;
 
 /**
  * Overlay column
  */
 class Url extends Column
 {
+    private const ACL_IMAGE_ACTIONS = [
+        'insert_assets' => 'Magento_MediaGallery::insert_assets',
+        'delete_assets' => 'Magento_MediaGallery::delete_assets'
+    ];
+
     /**
      * @var StoreManagerInterface
      */
@@ -41,13 +47,19 @@ class Url extends Column
      */
     private $storage;
 
+    /**
+     * @var AuthorizationInterface
+     */
+    private $authorization;
+
     /**
      * @param ContextInterface $context
      * @param UiComponentFactory $uiComponentFactory
      * @param StoreManagerInterface $storeManager
      * @param UrlInterface $urlInterface
      * @param Images $images
      * @param Storage $storage
+     * @param AuthorizationInterface $authorization
      * @param array $components
      * @param array $data
      */
@@ -58,6 +70,7 @@ public function __construct(
         UrlInterface $urlInterface,
         Images $images,
         Storage $storage,
+        AuthorizationInterface $authorization,
         array $components = [],
         array $data = []
     ) {
@@ -66,6 +79,7 @@ public function __construct(
         $this->urlInterface = $urlInterface;
         $this->images = $images;
         $this->storage = $storage;
+        $this->authorization = $authorization;
     }
 
     /**
@@ -98,13 +112,29 @@ public function prepare(): void
             array_replace_recursive(
                 (array)$this->getData('config'),
                 [
+                    'allowedActions' => $this->getAllowedActions(),
                     'onInsertUrl' => $this->urlInterface->getUrl('cms/wysiwyg_images/oninsert'),
                     'storeId' => $this->storeManager->getStore()->getId()
                 ]
             )
         );
     }
 
+    /**
+     * Return allowed actions for media gallery image
+     */
+    private function getAllowedActions(): array
+    {
+        $allowedActions = [];
+        foreach (self::ACL_IMAGE_ACTIONS as $key => $action) {
+            if ($this->authorization->isAllowed($action)) {
+                $allowedActions[] = $key;
+            }
+        }
+
+        return $allowedActions;
+    }
+
     /**
      * Get URL for the provided media asset path
      *

app/code/Magento/MediaGalleryUi/view/adminhtml/templates/image_details.phtml

@@ -105,5 +105,3 @@ use Magento\Framework\Escaper;
         }
     }
 </script>
-
-

app/code/Magento/MediaGalleryUi/view/adminhtml/templates/image_details_standalone.phtml

@@ -97,5 +97,3 @@ use Magento\Backend\Block\Template;
         }
     }
 </script>
-
-

app/code/Magento/MediaGalleryUi/view/adminhtml/web/css/source/_module.less

@@ -99,6 +99,9 @@
 
     .media-gallery-container {
 
+        .action-disabled {
+            opacity: 0.5;
+        }
         .masonry-image-grid .no-data-message-container,
         .masonry-image-grid .error-message-container {
             left: 50%;

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directories.js

@@ -19,6 +19,7 @@ define([
 
     return Component.extend({
         defaults: {
+            allowedActions: [],
             directoryTreeSelector: '#media-gallery-directory-tree',
             deleteButtonSelector: '#delete_folder',
             createFolderButtonSelector: '#create_folder',
@@ -179,7 +180,7 @@ define([
          * @param {String} folderId
          */
         setActive: function (folderId) {
-            if (!$.inArray('delete_folder', this.allowedActions)) {
+            if (!this.allowedActions.includes('delete_folder')) {
                 return;
             }
 

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js

@@ -17,6 +17,7 @@ define([
             addSelectedBtnSelector: '#add_selected',
             deleteSelectedBtnSelector: '#delete_selected',
             selected: null,
+            allowedActions: [],
             fields: {
                 id: 'id',
                 url: 'url',
@@ -39,7 +40,8 @@ define([
                 {
                     component: 'Magento_MediaGalleryUi/js/grid/columns/image/actions',
                     name: '${ $.name }_actions',
-                    imageModelName: '${ $.name }'
+                    imageModelName: '${ $.name }',
+                    allowedActions: '${ $.allowedActions }'
                 }
             ]
         },
@@ -222,8 +224,15 @@ define([
         toggleAddSelectedButton: function () {
             if (this.selected() === null) {
                 this.hideAddSelectedAndDeleteButon();
-            } else {
+
+                return;
+            }
+
+            if (this.allowedActions.includes('insert_assets')) {
                 $(this.addSelectedBtnSelector).removeClass('no-display');
+            }
+
+            if (this.allowedActions.includes('delete_assets')) {
                 $(this.deleteSelectedBtnSelector).removeClass('no-display');
             }
         },

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js

@@ -8,7 +8,8 @@ define([
     'uiComponent',
     'Magento_MediaGalleryUi/js/action/deleteImageWithDetailConfirmation',
     'Magento_MediaGalleryUi/js/grid/columns/image/insertImageAction',
-    'mage/translate'
+    'mage/translate',
+    'Magento_Ui/js/lib/view/utils/async'
 ], function ($, _, Component, deleteImageWithDetailConfirmation, image, $t) {
     'use strict';
 
@@ -17,20 +18,24 @@ define([
             template: 'Magento_MediaGalleryUi/grid/columns/image/actions',
             mediaGalleryImageDetailsName: 'mediaGalleryImageDetails',
             mediaGalleryEditDetailsName: 'mediaGalleryEditDetails',
+            allowedActions: [],
             actionsList: [
                 {
                     name: 'image-details',
                     title: $t('View Details'),
+                    classes: 'action-menu-item',
                     handler: 'viewImageDetails'
                 },
                 {
                     name: 'edit',
                     title: $t('Edit'),
+                    classes: 'action-menu-item',
                     handler: 'editImageDetails'
                 },
                 {
                     name: 'delete',
                     title: $t('Delete'),
+                    classes: 'action-menu-item media-gallery-delete-assets',
                     handler: 'deleteImageAction'
                 }
             ],
@@ -50,6 +55,14 @@ define([
             this._super();
             this.initEvents();
 
+            if (!this.allowedActions.includes('delete_assets')) {
+                $.async('.media-gallery-delete-assets', function () {
+                    $('.media-gallery-delete-assets').attr('click', '#')
+                        .unbind('click')
+                        .addClass('action-disabled');
+                });
+            }
+
             return this;
         },
 

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js

@@ -107,7 +107,7 @@ define([
          * If images records less than one, disable "delete images" button
          */
         checkButtonVisibility: function () {
-            if (!$.inArray('delete_assets', this.allowedActions)) {
+            if (!this.allowedActions.includes('delete_assets')) {
                 return;
             }
 

app/code/Magento/MediaGalleryUi/view/adminhtml/web/template/grid/columns/image/actions.html

@@ -7,9 +7,9 @@
 
 <each args="{ data: actionsList, as: 'action' }">
     <li>
-        <a class="action-menu-item" href="" text="action.title"
+        <a  href="#" text="action.title"
            click="$parent[action.handler].bind($parent, $row())"
-           attr="{'data-action': 'item-' + action.name}">
+           attr="{'data-action': 'item-' + action.name, class: action.classes}">
         </a>
     </li>
-</each>
+</each>