From 8e1e390569f5d5d5fc27a2116f35faa1b7a55a2c Mon Sep 17 00:00:00 2001 From: joweecaquicla Date: Wed, 5 Aug 2020 22:53:45 +0800 Subject: [PATCH 01/13] magento/adobe-stock-integration#1523: Switching between Views does not change the selected folder. [Media Gallery] - modified function to select folder when switching view --- .../web/js/directory/directoryTree.js | 28 ++++++++----------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index decc337e1b83c..f8d129e9d0489 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -26,7 +26,7 @@ define([ filterChips: '${ $.filterChipsProvider }' }, listens: { - '${ $.provider }:params.filters.path': 'clearFiltersHandle' + '${ $.provider }:params.filters.path': 'updateSelectedDirectory' }, viewConfig: [{ component: 'Magento_MediaGalleryUi/js/directory/directories', @@ -220,7 +220,7 @@ define([ this.firejsTreeEvents(); }.bind(this)); } else { - this.checkChipFiltersState(); + this.updateSelectedDirectory(); } }.bind(this)); }.bind(this)); @@ -239,7 +239,7 @@ define([ }.bind(this)); $(this.directoryTreeSelector).on('loaded.jstree', function () { - this.checkChipFiltersState(); + this.updateSelectedDirectory(); }.bind(this)); }, @@ -247,7 +247,7 @@ define([ /** * Verify directory filter on init event, select folder per directory filter state */ - checkChipFiltersState: function () { + updateSelectedDirectory: function () { var currentFilterPath = this.filterChips().filters.path, isMediaBrowser = !_.isUndefined(window.MediabrowserUtility), currentTreePath; @@ -260,6 +260,12 @@ define([ } else { this.selectStorageRoot(); } + + if (_.isUndefined(currentFilterPath)) { + $(this.directoryTreeSelector).jstree('deselect_all'); + this.activeNode(null); + this.directories().setInActive(); + } }, /** @@ -281,8 +287,7 @@ define([ * @param {String} currentFilterPath */ isFiltersApplied: function (currentFilterPath) { - return !_.isUndefined(currentFilterPath) && currentFilterPath !== '' && - currentFilterPath !== 'wysiwyg' && currentFilterPath !== 'catalog/category'; + return !_.isUndefined(currentFilterPath); }, /** @@ -302,17 +307,6 @@ define([ }, - /** - * Listener to clear filters event - */ - clearFiltersHandle: function () { - if (_.isUndefined(this.filterChips().filters.path)) { - $(this.directoryTreeSelector).jstree('deselect_all'); - this.activeNode(null); - this.directories().setInActive(); - } - }, - /** * Set active node filter, or deselect if the same node clicked * From ee2ab23e86b9e2ed06d3ddd96e8c82fc0877363f Mon Sep 17 00:00:00 2001 From: joweecaquicla Date: Thu, 6 Aug 2020 01:05:56 +0800 Subject: [PATCH 02/13] magento/adobe-stock-integration#1523: Switching between Views does not change the selected folder. [Media Gallery] - modified functions --- .../web/js/directory/directoryTree.js | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index f8d129e9d0489..5981a7f09355d 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -252,19 +252,17 @@ define([ isMediaBrowser = !_.isUndefined(window.MediabrowserUtility), currentTreePath; - currentTreePath = this.isFiltersApplied(currentFilterPath) || !isMediaBrowser ? currentFilterPath : - Base64.idDecode(window.MediabrowserUtility.pathId); - - if (this.folderExistsInTree(currentTreePath)) { - this.locateNode(currentTreePath); + if (_.isUndefined(currentFilterPath)) { + this.clearFiltersHandle(); } else { - this.selectStorageRoot(); - } + currentTreePath = this.isFiltersApplied(currentFilterPath) || !isMediaBrowser ? currentFilterPath : + Base64.idDecode(window.MediabrowserUtility.pathId); - if (_.isUndefined(currentFilterPath)) { - $(this.directoryTreeSelector).jstree('deselect_all'); - this.activeNode(null); - this.directories().setInActive(); + if (this.folderExistsInTree(currentTreePath)) { + this.locateNode(currentTreePath); + } else { + this.selectStorageRoot(); + } } }, @@ -287,7 +285,8 @@ define([ * @param {String} currentFilterPath */ isFiltersApplied: function (currentFilterPath) { - return !_.isUndefined(currentFilterPath); + return !_.isUndefined(currentFilterPath) && currentFilterPath !== '' + && currentFilterPath !== 'catalog/category'; }, /** @@ -307,6 +306,12 @@ define([ }, + clearFiltersHandle: function () { + $(this.directoryTreeSelector).jstree('deselect_all'); + this.activeNode(null); + this.directories().setInActive(); + }, + /** * Set active node filter, or deselect if the same node clicked * From 20dc8155942a7f3965f405074c03483032115a16 Mon Sep 17 00:00:00 2001 From: joweecaquicla Date: Fri, 7 Aug 2020 04:15:43 +0800 Subject: [PATCH 03/13] magento/adobe-stock-integration#1523: Switching between Views does not change the selected folder. [Media Gallery] - implement request change and mftf test --- .../AssertFolderIsChangedActionGroup.xml | 25 ++++++++ ...nMediaGallerySwitchingBetweenViewsTest.xml | 63 +++++++++++++++++++ .../web/js/directory/directoryTree.js | 23 ++++--- 3 files changed, 101 insertions(+), 10 deletions(-) create mode 100644 app/code/Magento/MediaGalleryUi/Test/Mftf/ActionGroup/AssertFolderIsChangedActionGroup.xml create mode 100644 app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGallerySwitchingBetweenViewsTest.xml diff --git a/app/code/Magento/MediaGalleryUi/Test/Mftf/ActionGroup/AssertFolderIsChangedActionGroup.xml b/app/code/Magento/MediaGalleryUi/Test/Mftf/ActionGroup/AssertFolderIsChangedActionGroup.xml new file mode 100644 index 0000000000000..090dbed8b4f78 --- /dev/null +++ b/app/code/Magento/MediaGalleryUi/Test/Mftf/ActionGroup/AssertFolderIsChangedActionGroup.xml @@ -0,0 +1,25 @@ + + + + + + + Assert that folder is changed + + + + + + + + {{newSelectedFolder}} + {{oldSelectedFolder}} + + + diff --git a/app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGallerySwitchingBetweenViewsTest.xml b/app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGallerySwitchingBetweenViewsTest.xml new file mode 100644 index 0000000000000..01b8c27b7371d --- /dev/null +++ b/app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGallerySwitchingBetweenViewsTest.xml @@ -0,0 +1,63 @@ + + + + + + + + + + <stories value="User switches between Views and checks if the folder is changed"/> + <testCaseId value="https://studio.cucumber.io/projects/131313/test-plan/folders/1337102/scenarios/5060037"/> + <description value="User switches between Views and checks if the folder is changed"/> + <severity value="CRITICAL"/> + <group value="media_gallery_ui"/> + </annotations> + <before> + <createData entity="SimpleSubCategory" stepKey="category"/> + <actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/> + </before> + <after> + <actionGroup ref="ResetAdminDataGridToDefaultViewActionGroup" stepKey="resetAdminDataGridToDefaultView"/> + <actionGroup ref="AdminEnhancedMediaGalleryDeleteGridViewActionGroup" stepKey="deleteView"> + <argument name="viewToDelete" value="New View"/> + </actionGroup> + <actionGroup ref="AdminMediaGalleryFolderSelectActionGroup" stepKey="selectFolderForDelete"/> + <actionGroup ref="AdminMediaGalleryFolderDeleteActionGroup" stepKey="deleteFolder"/> + <actionGroup ref="AdminMediaGalleryAssertFolderDoesNotExistActionGroup" stepKey="assertFolderWasDeleted"/> + <deleteData createDataKey="category" stepKey="deleteCategory"/> + </after> + <actionGroup ref="AdminOpenCreateNewCMSPageActionGroup" stepKey="openNewPage"/> + <actionGroup ref="AdminOpenMediaGalleryFromPageNoEditorActionGroup" stepKey="openMediaGalleryForPage"/> + <actionGroup ref="ClearFiltersAdminDataGridActionGroup" stepKey="clearFilters"/> + <actionGroup ref="AdminMediaGalleryOpenNewFolderFormActionGroup" stepKey="openNewFolderForm"/> + <actionGroup ref="AdminMediaGalleryCreateNewFolderActionGroup" stepKey="createNewFolder"/> + <actionGroup ref="AdminMediaGalleryAssertFolderNameActionGroup" stepKey="assertNewFolderCreated"/> + <waitForLoadingMaskToDisappear stepKey="waitForFolderContents"/> + <actionGroup ref="AdminEnhancedMediaGallerySaveCustomViewActionGroup" stepKey="saveCustomView"> + <argument name="viewName" value="New View"/> + </actionGroup> + <actionGroup ref="AdminOpenCategoryPageActionGroup" stepKey="openCategoryPage"/> + <actionGroup ref="AdminCategoriesOpenCategoryActionGroup" stepKey="openCategory"> + <argument name="category" value="$$category$$"/> + </actionGroup> + <actionGroup ref="AdminOpenMediaGalleryFromCategoryImageUploaderActionGroup" stepKey="openMediaGalleryFromImageUploader"/> + <actionGroup ref="AdminEnhancedMediaGallerySelectCustomBookmarksViewActionGroup" stepKey="selectDefaultView"> + <argument name="selectView" value="Default View"/> + </actionGroup> + <actionGroup ref="AssertFolderIsChangedActionGroup" stepKey="assertFolderIsChanged"> + <argument name="newSelectedFolder" value="category" /> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGallerySelectCustomBookmarksViewActionGroup" stepKey="switchBackToNewView"> + <argument name="selectView" value="New View"/> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGalleryAssertActiveFiltersActionGroup" stepKey="assertFilterApplied"> + <argument name="resultValue" value="{{AdminMediaGalleryFolderData.name}}"/> + </actionGroup> + </test> +</tests> diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index 5981a7f09355d..a0959fa90c7ba 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -254,15 +254,16 @@ define([ if (_.isUndefined(currentFilterPath)) { this.clearFiltersHandle(); - } else { - currentTreePath = this.isFiltersApplied(currentFilterPath) || !isMediaBrowser ? currentFilterPath : - Base64.idDecode(window.MediabrowserUtility.pathId); + return; + } - if (this.folderExistsInTree(currentTreePath)) { - this.locateNode(currentTreePath); - } else { - this.selectStorageRoot(); - } + currentTreePath = this.isFiltersApplied(currentFilterPath) || !isMediaBrowser ? currentFilterPath : + Base64.idDecode(window.MediabrowserUtility.pathId); + + if (this.folderExistsInTree(currentTreePath)) { + this.locateNode(currentTreePath); + } else { + this.selectStorageRoot(); } }, @@ -285,8 +286,7 @@ define([ * @param {String} currentFilterPath */ isFiltersApplied: function (currentFilterPath) { - return !_.isUndefined(currentFilterPath) && currentFilterPath !== '' - && currentFilterPath !== 'catalog/category'; + return !_.isUndefined(currentFilterPath) && currentFilterPath !== ''; }, /** @@ -306,6 +306,9 @@ define([ }, + /** + * Clear filters + */ clearFiltersHandle: function () { $(this.directoryTreeSelector).jstree('deselect_all'); this.activeNode(null); From 58efb76acfb4f2f534ff73accee9fc1d0a7ad20f Mon Sep 17 00:00:00 2001 From: joweecaquicla <joie@abovethefray.io> Date: Fri, 7 Aug 2020 22:17:49 +0800 Subject: [PATCH 04/13] magento/adobe-stock-integration#1523: Switching between Views does not change the selected folder. [Media Gallery] - fix failed static test --- .../view/adminhtml/web/js/directory/directoryTree.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index a0959fa90c7ba..7f0973a543761 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -254,6 +254,7 @@ define([ if (_.isUndefined(currentFilterPath)) { this.clearFiltersHandle(); + return; } From 60da76cf173a44c2c1545a643a96a858bdf19ed0 Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Thu, 13 Aug 2020 17:20:59 +0100 Subject: [PATCH 05/13] magento/magento2#29411: Directory Tree refactoring --- .../Model/Directory/Command/CreateByPaths.php | 2 +- ...{DirectoriesTree.php => DirectoryTree.php} | 8 +- .../ui_component/media_gallery_listing.xml | 2 +- .../standalone_media_gallery_listing.xml | 2 +- .../deleteImageWithDetailConfirmation.js | 23 +- .../adminhtml/web/js/directory/directories.js | 95 +++--- .../web/js/directory/directoryTree.js | 289 +++++++----------- 7 files changed, 177 insertions(+), 244 deletions(-) rename app/code/Magento/MediaGalleryUi/Ui/Component/{DirectoriesTree.php => DirectoryTree.php} (81%) diff --git a/app/code/Magento/MediaGallery/Model/Directory/Command/CreateByPaths.php b/app/code/Magento/MediaGallery/Model/Directory/Command/CreateByPaths.php index f33c22a18b4b8..d0ba786c7084e 100644 --- a/app/code/Magento/MediaGallery/Model/Directory/Command/CreateByPaths.php +++ b/app/code/Magento/MediaGallery/Model/Directory/Command/CreateByPaths.php @@ -78,7 +78,7 @@ public function execute(array $paths): void if (!empty($failedPaths)) { throw new CouldNotSaveException( __( - 'Could not save directories: %paths', + 'Could not create directories: %paths', [ 'paths' => implode(' ,', $failedPaths) ] diff --git a/app/code/Magento/MediaGalleryUi/Ui/Component/DirectoriesTree.php b/app/code/Magento/MediaGalleryUi/Ui/Component/DirectoryTree.php similarity index 81% rename from app/code/Magento/MediaGalleryUi/Ui/Component/DirectoriesTree.php rename to app/code/Magento/MediaGalleryUi/Ui/Component/DirectoryTree.php index 4047a4fcb98d8..269bc1f8bcba7 100644 --- a/app/code/Magento/MediaGalleryUi/Ui/Component/DirectoriesTree.php +++ b/app/code/Magento/MediaGalleryUi/Ui/Component/DirectoryTree.php @@ -14,7 +14,7 @@ /** * Directories tree component */ -class DirectoriesTree extends Container +class DirectoryTree extends Container { /** * @var UrlInterface @@ -50,9 +50,9 @@ public function prepare(): void array_replace_recursive( (array) $this->getData('config'), [ - 'getDirectoryTreeUrl' => $this->url->getUrl("media_gallery/directories/gettree"), - 'deleteDirectoryUrl' => $this->url->getUrl("media_gallery/directories/delete"), - 'createDirectoryUrl' => $this->url->getUrl("media_gallery/directories/create") + 'getDirectoryTreeUrl' => $this->url->getUrl('media_gallery/directories/gettree'), + 'deleteDirectoryUrl' => $this->url->getUrl('media_gallery/directories/delete'), + 'createDirectoryUrl' => $this->url->getUrl('media_gallery/directories/create') ] ) ); diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index 5a16ed1792159..141f3efb2348a 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -211,7 +211,7 @@ </container> </listingToolbar> <container name="media_gallery_directories" - class="Magento\MediaGalleryUi\Ui\Component\DirectoriesTree" + class="Magento\MediaGalleryUi\Ui\Component\DirectoryTree" template="Magento_MediaGalleryUi/grid/directories/directoryTree" component="Magento_MediaGalleryUi/js/directory/directoryTree"/> <columns name="media_gallery_columns" component="Magento_MediaGalleryUi/js/grid/masonry"> diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index c96ad0fd86661..686a8f8957120 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -198,7 +198,7 @@ </container> </listingToolbar> <container name="media_gallery_directories" - class="Magento\MediaGalleryUi\Ui\Component\DirectoriesTree" + class="Magento\MediaGalleryUi\Ui\Component\DirectoryTree" template="Magento_MediaGalleryUi/grid/directories/directoryTree" component="Magento_MediaGalleryUi/js/directory/directoryTree"/> <columns name="media_gallery_columns" component="Magento_MediaGalleryUi/js/grid/masonry"> diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js index 51d124ca319e6..58e86a3a152b8 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js @@ -21,25 +21,24 @@ define([ * @param {String} deleteImageUrl */ deleteImageAction: function (recordsIds, imageDetailsUrl, deleteImageUrl) { - var confirmationContent = $t('%1 Are you sure you want to delete "%2" image(s)?') + var confirmationContent = $t('%1Are you sure you want to delete "%2" image(s)?') .replace('%2', Object.keys(recordsIds).length), deferred = $.Deferred(); - getDetails(imageDetailsUrl, recordsIds) - .then(function (imageDetails) { + getDetails(imageDetailsUrl, recordsIds).then(function (images) { confirmationContent = confirmationContent.replace( '%1', - this.getRecordRelatedContentMessage(imageDetails) + this.getRecordRelatedContentMessage(images) + ' ' ); }.bind(this)).fail(function () { - confirmationContent = confirmationContent.replace('%1', ''); - }).always(function () { - deleteImages(recordsIds, deleteImageUrl, confirmationContent).then(function (status) { - deferred.resolve(status); - }).fail(function (error) { - deferred.reject(error); - }); - }); + confirmationContent = confirmationContent.replace('%1', ''); + }).always(function () { + deleteImages(recordsIds, deleteImageUrl, confirmationContent).then(function (status) { + deferred.resolve(status); + }).fail(function (error) { + deferred.reject(error); + }); + }); return deferred.promise(); }, diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directories.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directories.js index d7f756d8bbd90..6d8d38a1ca1d6 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directories.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directories.js @@ -23,6 +23,7 @@ define([ deleteButtonSelector: '#delete_folder', createFolderButtonSelector: '#create_folder', messageDelay: 5, + selectedFolder: null, messagesName: 'media_gallery_listing.media_gallery_listing.messages', modules: { directoryTree: '${ $.parentName }.media_gallery_directories', @@ -47,51 +48,57 @@ define([ */ initEvents: function () { $(this.deleteButtonSelector).on('delete_folder', function () { - this.getConfirmationPopupDeleteFolder(); + this.deleteFolder(); }.bind(this)); $(this.createFolderButtonSelector).on('create_folder', function () { - this.getPrompt({ - title: $t('New Folder Name:'), - content: '', - actions: { - /** - * Confirm action - */ - confirm: function (folderName) { - createDirectory( - this.directoryTree().createDirectoryUrl, - [this.getNewFolderPath(folderName)] - ).then(function () { - this.directoryTree().reloadJsTree().then(function () { - $(this.directoryTree().directoryTreeSelector).on('loaded.jstree', function () { - this.directoryTree().locateNode(this.getNewFolderPath(folderName)); - }.bind(this)); - }.bind(this)); + this.createFolder(); + }.bind(this)); + }, - }.bind(this)).fail(function (error) { - uiAlert({ - content: error - }); + /** + * Show confirmation popup and create folder based on user input + */ + createFolder: function () { + this.getPrompt({ + title: $t('New Folder Name:'), + content: '', + actions: { + /** + * Confirm action + */ + confirm: function (folderName) { + createDirectory( + this.directoryTree().createDirectoryUrl, + [this.getNewFolderPath(folderName)] + ).then(function () { + this.directoryTree().reloadJsTree().then(function () { + $(this.directoryTree().directoryTreeSelector).on('loaded.jstree', function () { + this.directoryTree().locateNode(this.getNewFolderPath(folderName)); + }.bind(this)); + }.bind(this)); + }.bind(this)).fail(function (error) { + uiAlert({ + content: error }); - }.bind(this) - }, - buttons: [{ - text: $t('Cancel'), - class: 'action-secondary action-dismiss', + }); + }.bind(this) + }, + buttons: [{ + text: $t('Cancel'), + class: 'action-secondary action-dismiss', - /** - * Close modal - */ - click: function () { - this.closeModal(); - } - }, { - text: $t('Confirm'), - class: 'action-primary action-accept' - }] - }); - }.bind(this)); + /** + * Close modal + */ + click: function () { + this.closeModal(); + } + }, { + text: $t('Confirm'), + class: 'action-primary action-accept' + }] + }); }, /** @@ -101,11 +108,11 @@ define([ * @returns {String} */ getNewFolderPath: function (folderName) { - var selectedFolder = _.isUndefined(this.selectedFolder()) || - _.isNull(this.selectedFolder()) ? '/' : this.selectedFolder(), - folderToCreate = selectedFolder !== '/' ? selectedFolder + '/' + folderName : folderName; + if (_.isUndefined(this.selectedFolder()) || _.isNull(this.selectedFolder())) { + return folderName; + } - return folderToCreate; + return this.selectedFolder() + '/' + folderName; }, /** @@ -136,7 +143,7 @@ define([ /** * Confirmation popup for delete folder action. */ - getConfirmationPopupDeleteFolder: function () { + deleteFolder: function () { confirm({ title: $t('Are you sure you want to delete this folder?'), modalClass: 'delete-folder-confirmation-popup', diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index 7f0973a543761..9cf5144808f7d 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -20,13 +20,14 @@ define([ filterChipsProvider: 'componentType = filters, ns = ${ $.ns }', directoryTreeSelector: '#media-gallery-directory-tree', getDirectoryTreeUrl: 'media_gallery/directories/gettree', - jsTreeReloaded: null, + createDirectoryUrl: 'media_gallery/directories/create', + activeNode: null, modules: { directories: '${ $.name }_directories', filterChips: '${ $.filterChipsProvider }' }, listens: { - '${ $.provider }:params.filters.path': 'updateSelectedDirectory' + '${ $.provider }:params.filters.path': 'selectTreeFolder' }, viewConfig: [{ component: 'Magento_MediaGalleryUi/js/directory/directories', @@ -49,7 +50,8 @@ define([ this.renderDirectoryTree().then(function () { this.initEvents(); }.bind(this)); - }.bind(this)); + }.bind(this) + ); return this; }, @@ -58,66 +60,57 @@ define([ * Render directory tree component. */ renderDirectoryTree: function () { - return this.getJsonTree().then(function (data) { this.createFolderIfNotExists(data).then(function (isFolderCreated) { - if (isFolderCreated) { - this.getJsonTree().then(function (newData) { - this.createTree(newData); - }.bind(this)); - } else { + if (!isFolderCreated) { this.createTree(data); + return; } + + this.getJsonTree().then(function (newData) { + this.createTree(newData); + }.bind(this)); }.bind(this)); }.bind(this)); }, - /** - * Set jstree reloaded - * - * @param {Boolean} value - */ - setJsTreeReloaded: function (value) { - this.jsTreeReloaded = value; - }, - /** * Create folder by provided current_tree_path param * * @param {Array} directories */ createFolderIfNotExists: function (directories) { - var isMediaBrowser = !_.isUndefined(window.MediabrowserUtility), - currentTreePath = isMediaBrowser ? window.MediabrowserUtility.pathId : null, + var requestedDirectoryPath = this.getRequestedDirectory(), deferred = $.Deferred(), - decodedPath, pathArray; - if (currentTreePath) { - decodedPath = Base64.idDecode(currentTreePath); - - if (!this.isDirectoryExist(directories[0], decodedPath)) { - pathArray = this.convertPathToPathsArray(decodedPath); + if (!requestedDirectoryPath) { + deferred.resolve(false); - $.each(pathArray, function (i, val) { - if (this.isDirectoryExist(directories[0], val)) { - pathArray.splice(i, 1); - } - }.bind(this)); + return deferred.promise(); + } - createDirectory( - this.createDirectoryUrl, - pathArray - ).then(function () { - deferred.resolve(true); - }); - } else { - deferred.resolve(false); - } - } else { + if (this.isDirectoryExist(directories[0], requestedDirectoryPath)) { deferred.resolve(false); + + return deferred.promise(); } + pathArray = this.convertPathToPathsArray(requestedDirectoryPath); + + $.each(pathArray, function (index, directoryId) { + if (this.isDirectoryExist(directories[0], directoryId)) { + pathArray.splice(index, 1); + } + }.bind(this)); + + createDirectory( + this.createDirectoryUrl, + pathArray + ).then(function () { + deferred.resolve(true); + }); + return deferred.promise(); }, @@ -125,33 +118,22 @@ define([ * Verify if directory exists in array * * @param {Array} directories - * @param {String} directoryId + * @param {String} path */ - isDirectoryExist: function (directories, directoryId) { - var found = false; - - /** - * Recursive search in array - * - * @param {Array} data - * @param {String} id - */ - function recurse(data, id) { - var i; - - for (i = 0; i < data.length; i++) { - if (data[i].attr.id === id) { - found = data[i]; - break; - } else if (data[i].children && data[i].children.length) { - recurse(data[i].children, id); - } + isDirectoryExist: function (directories, path) { + var i; + + for (i = 0; i < directories.length; i++) { + if (directories[i].attr.id === path + || directories[i].children + && directories[i].children.length + && this.isDirectoryExist(directories[i].children, path) + ) { + return true; } } - recurse(directories, directoryId); - - return found; + return false; }, /** @@ -199,7 +181,7 @@ define([ /** * Remove ability to multiple select on nodes */ - overrideMultiselectBehavior: function () { + disableMultiselectBehavior: function () { $.jstree.defaults.ui['select_range_modifier'] = false; $.jstree.defaults.ui['select_multiple_modifier'] = false; }, @@ -208,21 +190,12 @@ define([ * Handle jstree events */ initEvents: function () { - this.firejsTreeEvents(); - this.overrideMultiselectBehavior(); + this.initJsTreeEvents(); + this.disableMultiselectBehavior(); $(window).on('reload.MediaGallery', function () { - this.getJsonTree().then(function (data) { - this.createFolderIfNotExists(data).then(function (isCreated) { - if (isCreated) { - this.renderDirectoryTree().then(function () { - this.setJsTreeReloaded(true); - this.firejsTreeEvents(); - }.bind(this)); - } else { - this.updateSelectedDirectory(); - } - }.bind(this)); + this.renderDirectoryTree().then(function () { + this.initJsTreeEvents(); }.bind(this)); }.bind(this)); }, @@ -230,64 +203,46 @@ define([ /** * Fire event for jstree component */ - firejsTreeEvents: function () { + initJsTreeEvents: function () { $(this.directoryTreeSelector).on('select_node.jstree', function (element, data) { - var path = $(data.rslt.obj).data('path'); - - this.setActiveNodeFilter(path); - this.setJsTreeReloaded(false); + this.toggleSelectedDirectory($(data.rslt.obj).data('path')); }.bind(this)); $(this.directoryTreeSelector).on('loaded.jstree', function () { - this.updateSelectedDirectory(); - }.bind(this)); + var path = this.getRequestedDirectory() || this.filterChips().filters.path; + if (this.activeNode() !== path) { + this.selectFolder(path); + } + }.bind(this)); }, /** * Verify directory filter on init event, select folder per directory filter state */ - updateSelectedDirectory: function () { - var currentFilterPath = this.filterChips().filters.path, - isMediaBrowser = !_.isUndefined(window.MediabrowserUtility), - currentTreePath; - - if (_.isUndefined(currentFilterPath)) { - this.clearFiltersHandle(); - - return; - } - - currentTreePath = this.isFiltersApplied(currentFilterPath) || !isMediaBrowser ? currentFilterPath : - Base64.idDecode(window.MediabrowserUtility.pathId); - - if (this.folderExistsInTree(currentTreePath)) { - this.locateNode(currentTreePath); - } else { - this.selectStorageRoot(); - } + selectTreeFolder: function (path) { + this.isFolderRendered(path) ? this.locateNode(path) : this.selectStorageRoot(); }, /** * Verify if directory exists in folder tree * * @param {String} path + * @return {Boolean} */ - folderExistsInTree: function (path) { - if (!_.isUndefined(path)) { - return $('#' + path.replace(/\//g, '\\/')).length === 1; - } - - return false; + isFolderRendered: function (path) { + return _.isUndefined(path) ? false : $('#' + path.replace(/\//g, '\\/')).length === 1; }, /** - * Check if need to select directory by filters state + * Get directory requested from MediabrowserUtility * - * @param {String} currentFilterPath + * @return {String|Null} */ - isFiltersApplied: function (currentFilterPath) { - return !_.isUndefined(currentFilterPath) && currentFilterPath !== ''; + getRequestedDirectory: function () { + return !_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '' + ? Base64.idDecode(window.MediabrowserUtility.pathId) + : null; }, /** @@ -296,62 +251,40 @@ define([ * @param {String} path */ locateNode: function (path) { - var selectedId = $(this.directoryTreeSelector).jstree('get_selected').attr('id'); - - if (path === selectedId) { + if (path === $(this.directoryTreeSelector).jstree('get_selected').attr('id')) { return; } path = path.replace(/\//g, '\\/'); $(this.directoryTreeSelector).jstree('open_node', '#' + path); $(this.directoryTreeSelector).jstree('select_node', '#' + path, true); - - }, - - /** - * Clear filters - */ - clearFiltersHandle: function () { - $(this.directoryTreeSelector).jstree('deselect_all'); - this.activeNode(null); - this.directories().setInActive(); }, /** * Set active node filter, or deselect if the same node clicked * - * @param {String} nodePath + * @param {String} path */ - setActiveNodeFilter: function (nodePath) { - - if (this.activeNode() === nodePath && !this.jsTreeReloaded) { - this.selectStorageRoot(); - } else { - this.selectFolder(nodePath); - } + toggleSelectedDirectory: function (path) { + this.activeNode() === path ? this.selectStorageRoot() : this.selectFolder(path); }, /** * Remove folders selection -> select storage root */ selectStorageRoot: function () { - var filters = {}, - applied = this.filterChips().get('applied'); - $(this.directoryTreeSelector).jstree('deselect_all'); - - filters = $.extend(true, filters, applied); - delete filters.path; - this.filterChips().set('applied', filters); this.activeNode(null); + this.waitForCondition( - function () { - return _.isUndefined(this.directories()); - }.bind(this), function () { - this.directories().setInActive(); - }.bind(this) - ); + return _.isUndefined(this.directories()); + }.bind(this), + function () { + this.directories().setInActive(); + }.bind(this) + ); + this.dropFilter(); }, /** @@ -360,7 +293,9 @@ define([ * @param {String} path */ selectFolder: function (path) { - this.activeNode(path); + if (_.isUndefined(path) || _.isNull(path)) { + return; + } this.waitForCondition( function () { @@ -372,11 +307,12 @@ define([ ); this.applyFilter(path); + this.activeNode(path); }, /** - * Remove active node from directory tree, and select next - */ + * Remove active node from directory tree, and select next + */ removeNode: function () { $(this.directoryTreeSelector).jstree('remove'); }, @@ -387,13 +323,29 @@ define([ * @param {String} path */ applyFilter: function (path) { + this.filterChips().set( + 'applied', + $.extend( + true, + {}, + this.filterChips().get('applied'), + { + path: path + } + ) + ); + }, + + /** + * Drop path filter + */ + dropFilter: function () { var filters = {}, applied = this.filterChips().get('applied'); filters = $.extend(true, filters, applied); - filters.path = path; + delete filters.path; this.filterChips().set('applied', filters); - }, /** @@ -404,7 +356,6 @@ define([ this.getJsonTree().then(function (data) { this.createTree(data); - this.setJsTreeReloaded(true); this.initEvents(); deferred.resolve(); }.bind(this)); @@ -416,35 +367,11 @@ define([ * Get json data for jstree */ getJsonTree: function () { - var deferred = $.Deferred(); - - $.ajax({ + return $.ajax({ url: this.getDirectoryTreeUrl, type: 'GET', - dataType: 'json', - - /** - * Success handler for request - * - * @param {Object} data - */ - success: function (data) { - deferred.resolve(data); - }, - - /** - * Error handler for request - * - * @param {Object} jqXHR - * @param {String} textStatus - */ - error: function (jqXHR, textStatus) { - deferred.reject(); - throw textStatus; - } + dataType: 'json' }); - - return deferred.promise(); }, /** @@ -454,7 +381,7 @@ define([ */ createTree: function (data) { $(this.directoryTreeSelector).jstree({ - plugins: ['json_data', 'themes', 'ui', 'crrm', 'types', 'hotkeys'], + plugins: ['json_data', 'themes', 'ui', 'crrm', 'types', 'hotkeys'], vcheckbox: { 'two_state': true, 'real_checkboxes': true From a516ee5ff9c1cc64878c4101d2a010cc2173560d Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Tue, 18 Aug 2020 13:23:24 +0100 Subject: [PATCH 06/13] magento/magento2#29411: Naming update --- .../Adminhtml/Directories/GetTree.php | 16 ++--- .../{FolderTree.php => GetDirectoryTree.php} | 59 ++++++------------- app/code/Magento/MediaGalleryUi/etc/di.xml | 5 -- 3 files changed, 28 insertions(+), 52 deletions(-) rename app/code/Magento/MediaGalleryUi/Model/Directories/{FolderTree.php => GetDirectoryTree.php} (77%) diff --git a/app/code/Magento/MediaGalleryUi/Controller/Adminhtml/Directories/GetTree.php b/app/code/Magento/MediaGalleryUi/Controller/Adminhtml/Directories/GetTree.php index 229a717ef13dd..d9a38895e1fa0 100644 --- a/app/code/Magento/MediaGalleryUi/Controller/Adminhtml/Directories/GetTree.php +++ b/app/code/Magento/MediaGalleryUi/Controller/Adminhtml/Directories/GetTree.php @@ -11,7 +11,7 @@ use Magento\Framework\App\Action\HttpGetActionInterface; use Magento\Framework\Controller\Result\Json; use Magento\Framework\Controller\ResultFactory; -use Magento\MediaGalleryUi\Model\Directories\FolderTree; +use Magento\MediaGalleryUi\Model\Directories\GetDirectoryTree; use Psr\Log\LoggerInterface; /** @@ -33,25 +33,25 @@ class GetTree extends Action implements HttpGetActionInterface private $logger; /** - * @var FolderTree + * @var GetDirectoryTree */ - private $folderTree; + private $getDirectoryTree; /** * Constructor * * @param Action\Context $context * @param LoggerInterface $logger - * @param FolderTree $folderTree + * @param GetDirectoryTree $getDirectoryTree */ public function __construct( Action\Context $context, LoggerInterface $logger, - FolderTree $folderTree + GetDirectoryTree $getDirectoryTree ) { parent::__construct($context); $this->logger = $logger; - $this->folderTree = $folderTree; + $this->getDirectoryTree = $getDirectoryTree; } /** * @inheritdoc @@ -59,7 +59,9 @@ public function __construct( public function execute() { try { - $responseContent[] = $this->folderTree->buildTree(); + $responseContent = [ + $this->getDirectoryTree->execute() + ]; $responseCode = self::HTTP_OK; } catch (\Exception $exception) { $this->logger->critical($exception); diff --git a/app/code/Magento/MediaGalleryUi/Model/Directories/FolderTree.php b/app/code/Magento/MediaGalleryUi/Model/Directories/GetDirectoryTree.php similarity index 77% rename from app/code/Magento/MediaGalleryUi/Model/Directories/FolderTree.php rename to app/code/Magento/MediaGalleryUi/Model/Directories/GetDirectoryTree.php index 574b8aab8bcd3..35e34a7e5532c 100644 --- a/app/code/Magento/MediaGalleryUi/Model/Directories/FolderTree.php +++ b/app/code/Magento/MediaGalleryUi/Model/Directories/GetDirectoryTree.php @@ -7,58 +7,61 @@ namespace Magento\MediaGalleryUi\Model\Directories; +use Magento\Framework\App\Filesystem\DirectoryList; use Magento\Framework\Exception\ValidatorException; use Magento\Framework\Filesystem; use Magento\Framework\Filesystem\Directory\Read; use Magento\MediaGalleryApi\Api\IsPathExcludedInterface; /** - * Build folder tree structure by path + * Build media gallery folder tree structure by path */ -class FolderTree +class GetDirectoryTree { /** * @var Filesystem */ private $filesystem; - /** - * @var string - */ - private $path; - /** * @var IsPathExcludedInterface */ private $isPathExcluded; /** - * Constructor - * * @param Filesystem $filesystem - * @param string $path * @param IsPathExcludedInterface $isPathExcluded */ public function __construct( Filesystem $filesystem, - string $path, IsPathExcludedInterface $isPathExcluded ) { $this->filesystem = $filesystem; - $this->path = $path; $this->isPathExcluded = $isPathExcluded; } /** * Return directory folder structure in array * - * @param bool $skipRoot * @return array * @throws ValidatorException */ - public function buildTree(bool $skipRoot = true): array + public function execute(): array { - return $this->buildFolderTree($this->getDirectories(), $skipRoot); + $tree = [ + 'name' => 'root', + 'path' => '/', + 'children' => [] + ]; + $directories = $this->getDirectories(); + foreach ($directories as $idx => &$node) { + $node['children'] = []; + $result = $this->findParent($node, $tree); + $parent = &$result['treeNode']; + + $parent['children'][] = &$directories[$idx]; + } + return $tree['children']; } /** @@ -72,7 +75,7 @@ private function getDirectories(): array $directories = []; /** @var Read $directory */ - $directory = $this->filesystem->getDirectoryRead($this->path); + $directory = $this->filesystem->getDirectoryRead(DirectoryList::MEDIA); if (!$directory->isDirectory()) { return $directories; @@ -96,30 +99,6 @@ private function getDirectories(): array return $directories; } - /** - * Build folder tree structure by provided directories path - * - * @param array $directories - * @param bool $skipRoot - * @return array - */ - private function buildFolderTree(array $directories, bool $skipRoot): array - { - $tree = [ - 'name' => 'root', - 'path' => '/', - 'children' => [] - ]; - foreach ($directories as $idx => &$node) { - $node['children'] = []; - $result = $this->findParent($node, $tree); - $parent = & $result['treeNode']; - - $parent['children'][] =& $directories[$idx]; - } - return $skipRoot ? $tree['children'] : $tree; - } - /** * Find parent directory * diff --git a/app/code/Magento/MediaGalleryUi/etc/di.xml b/app/code/Magento/MediaGalleryUi/etc/di.xml index 040e003817efa..63a5a1a5ad378 100644 --- a/app/code/Magento/MediaGalleryUi/etc/di.xml +++ b/app/code/Magento/MediaGalleryUi/etc/di.xml @@ -28,11 +28,6 @@ </argument> </arguments> </type> - <type name="Magento\MediaGalleryUi\Model\Directories\FolderTree"> - <arguments> - <argument name="path" xsi:type="string">media</argument> - </arguments> - </type> <type name="Magento\MediaGalleryUi\Model\AssetDetailsProvider\Type"> <arguments> <argument name="types" xsi:type="array"> From eb1f0bb35652eaf0a88aa9218214bde38119f4e7 Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Tue, 18 Aug 2020 14:21:19 +0100 Subject: [PATCH 07/13] magento/magento2#29411: Updated requested directory selection behaviour --- .../web/js/directory/directoryTree.js | 244 ++++++++++++------ 1 file changed, 163 insertions(+), 81 deletions(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index 9cf5144808f7d..a5c5de1ccdf73 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -21,13 +21,13 @@ define([ directoryTreeSelector: '#media-gallery-directory-tree', getDirectoryTreeUrl: 'media_gallery/directories/gettree', createDirectoryUrl: 'media_gallery/directories/create', - activeNode: null, + jsTreeReloaded: null, modules: { directories: '${ $.name }_directories', filterChips: '${ $.filterChipsProvider }' }, listens: { - '${ $.provider }:params.filters.path': 'selectTreeFolder' + '${ $.provider }:params.filters.path': 'updateSelectedDirectory' }, viewConfig: [{ component: 'Magento_MediaGalleryUi/js/directory/directories', @@ -62,45 +62,57 @@ define([ renderDirectoryTree: function () { return this.getJsonTree().then(function (data) { this.createFolderIfNotExists(data).then(function (isFolderCreated) { - if (!isFolderCreated) { + if (isFolderCreated) { + this.getJsonTree().then(function (newData) { + this.createTree(newData); + }.bind(this)); + } else { this.createTree(data); - return; } - - this.getJsonTree().then(function (newData) { - this.createTree(newData); - }.bind(this)); }.bind(this)); }.bind(this)); }, + /** + * Set jstree reloaded + * + * @param {Boolean} value + */ + setJsTreeReloaded: function (value) { + this.jsTreeReloaded = value; + }, + /** * Create folder by provided current_tree_path param * * @param {Array} directories */ createFolderIfNotExists: function (directories) { - var requestedDirectoryPath = this.getRequestedDirectory(), + var isMediaBrowser = !_.isUndefined(window.MediabrowserUtility), + currentTreePath = isMediaBrowser ? window.MediabrowserUtility.pathId : null, deferred = $.Deferred(), + decodedPath, pathArray; - if (!requestedDirectoryPath) { + if (!currentTreePath) { deferred.resolve(false); return deferred.promise(); } - if (this.isDirectoryExist(directories[0], requestedDirectoryPath)) { + decodedPath = Base64.idDecode(currentTreePath); + + if (this.isDirectoryExist(directories[0], decodedPath)) { deferred.resolve(false); return deferred.promise(); } - pathArray = this.convertPathToPathsArray(requestedDirectoryPath); + pathArray = this.convertPathToPathsArray(decodedPath); - $.each(pathArray, function (index, directoryId) { - if (this.isDirectoryExist(directories[0], directoryId)) { - pathArray.splice(index, 1); + $.each(pathArray, function (i, val) { + if (this.isDirectoryExist(directories[0], val)) { + pathArray.splice(i, 1); } }.bind(this)); @@ -118,22 +130,33 @@ define([ * Verify if directory exists in array * * @param {Array} directories - * @param {String} path + * @param {String} directoryId */ - isDirectoryExist: function (directories, path) { - var i; - - for (i = 0; i < directories.length; i++) { - if (directories[i].attr.id === path - || directories[i].children - && directories[i].children.length - && this.isDirectoryExist(directories[i].children, path) - ) { - return true; + isDirectoryExist: function (directories, directoryId) { + var found = false; + + /** + * Recursive search in array + * + * @param {Array} data + * @param {String} id + */ + function recurse(data, id) { + var i; + + for (i = 0; i < data.length; i++) { + if (data[i].attr.id === id) { + found = data[i]; + break; + } else if (data[i].children && data[i].children.length) { + recurse(data[i].children, id); + } } } - return false; + recurse(directories, directoryId); + + return found; }, /** @@ -181,7 +204,7 @@ define([ /** * Remove ability to multiple select on nodes */ - disableMultiselectBehavior: function () { + overrideMultiselectBehavior: function () { $.jstree.defaults.ui['select_range_modifier'] = false; $.jstree.defaults.ui['select_multiple_modifier'] = false; }, @@ -190,12 +213,21 @@ define([ * Handle jstree events */ initEvents: function () { - this.initJsTreeEvents(); - this.disableMultiselectBehavior(); + this.firejsTreeEvents(); + this.overrideMultiselectBehavior(); $(window).on('reload.MediaGallery', function () { - this.renderDirectoryTree().then(function () { - this.initJsTreeEvents(); + this.getJsonTree().then(function (data) { + this.createFolderIfNotExists(data).then(function (isCreated) { + if (isCreated) { + this.renderDirectoryTree().then(function () { + this.setJsTreeReloaded(true); + this.firejsTreeEvents(); + }.bind(this)); + } else { + this.updateSelectedDirectory(); + } + }.bind(this)); }.bind(this)); }.bind(this)); }, @@ -203,78 +235,124 @@ define([ /** * Fire event for jstree component */ - initJsTreeEvents: function () { + firejsTreeEvents: function () { $(this.directoryTreeSelector).on('select_node.jstree', function (element, data) { - this.toggleSelectedDirectory($(data.rslt.obj).data('path')); + this.setActiveNodeFilter($(data.rslt.obj).data('path')); + this.setJsTreeReloaded(false); }.bind(this)); $(this.directoryTreeSelector).on('loaded.jstree', function () { - var path = this.getRequestedDirectory() || this.filterChips().filters.path; - - if (this.activeNode() !== path) { - this.selectFolder(path); - } + this.updateSelectedDirectory(); }.bind(this)); + }, /** * Verify directory filter on init event, select folder per directory filter state */ - selectTreeFolder: function (path) { - this.isFolderRendered(path) ? this.locateNode(path) : this.selectStorageRoot(); + updateSelectedDirectory: function () { + var currentFilterPath = this.filterChips().filters.path, + requestedDirectory = this.getRequestedDirectory(), + currentTreePath; + + if (_.isUndefined(currentFilterPath)) { + this.clearFiltersHandle(); + + return; + } + + currentTreePath = this.isFilterApplied(currentFilterPath) || _.isNull(requestedDirectory) + ? currentFilterPath + : requestedDirectory; + + if (this.folderExistsInTree(currentTreePath)) { + this.locateNode(currentTreePath); + } else { + this.selectStorageRoot(); + } }, /** * Verify if directory exists in folder tree * * @param {String} path - * @return {Boolean} */ - isFolderRendered: function (path) { - return _.isUndefined(path) ? false : $('#' + path.replace(/\//g, '\\/')).length === 1; + folderExistsInTree: function (path) { + if (!_.isUndefined(path)) { + return $('#' + path.replace(/\//g, '\\/')).length === 1; + } + + return false; }, - /** - * Get directory requested from MediabrowserUtility - * - * @return {String|Null} - */ getRequestedDirectory: function () { - return !_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '' + return (!_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '') ? Base64.idDecode(window.MediabrowserUtility.pathId) : null; }, + /** + * Check if need to select directory by filters state + * + * @param {String} currentFilterPath + */ + isFilterApplied: function (currentFilterPath) { + return !_.isUndefined(currentFilterPath) && currentFilterPath !== ''; + }, + /** * Locate and higlight node in jstree by path id. * * @param {String} path */ locateNode: function (path) { - if (path === $(this.directoryTreeSelector).jstree('get_selected').attr('id')) { + var selectedId = $(this.directoryTreeSelector).jstree('get_selected').attr('id'); + + if (path === selectedId) { return; } path = path.replace(/\//g, '\\/'); $(this.directoryTreeSelector).jstree('open_node', '#' + path); $(this.directoryTreeSelector).jstree('select_node', '#' + path, true); + + }, + + /** + * Clear filters + */ + clearFiltersHandle: function () { + $(this.directoryTreeSelector).jstree('deselect_all'); + this.activeNode(null); + this.directories().setInActive(); }, /** * Set active node filter, or deselect if the same node clicked * - * @param {String} path + * @param {String} nodePath */ - toggleSelectedDirectory: function (path) { - this.activeNode() === path ? this.selectStorageRoot() : this.selectFolder(path); + setActiveNodeFilter: function (nodePath) { + + if (this.activeNode() === nodePath && !this.jsTreeReloaded) { + this.selectStorageRoot(); + } else { + this.selectFolder(nodePath); + } }, /** * Remove folders selection -> select storage root */ selectStorageRoot: function () { + var filters = {}, + applied = this.filterChips().get('applied'); + $(this.directoryTreeSelector).jstree('deselect_all'); - this.activeNode(null); + filters = $.extend(true, filters, applied); + delete filters.path; + this.filterChips().set('applied', filters); + this.activeNode(null); this.waitForCondition( function () { return _.isUndefined(this.directories()); @@ -284,7 +362,6 @@ define([ }.bind(this) ); - this.dropFilter(); }, /** @@ -293,9 +370,7 @@ define([ * @param {String} path */ selectFolder: function (path) { - if (_.isUndefined(path) || _.isNull(path)) { - return; - } + this.activeNode(path); this.waitForCondition( function () { @@ -307,7 +382,6 @@ define([ ); this.applyFilter(path); - this.activeNode(path); }, /** @@ -323,28 +397,11 @@ define([ * @param {String} path */ applyFilter: function (path) { - this.filterChips().set( - 'applied', - $.extend( - true, - {}, - this.filterChips().get('applied'), - { - path: path - } - ) - ); - }, - - /** - * Drop path filter - */ - dropFilter: function () { var filters = {}, applied = this.filterChips().get('applied'); filters = $.extend(true, filters, applied); - delete filters.path; + filters.path = path; this.filterChips().set('applied', filters); }, @@ -356,6 +413,7 @@ define([ this.getJsonTree().then(function (data) { this.createTree(data); + this.setJsTreeReloaded(true); this.initEvents(); deferred.resolve(); }.bind(this)); @@ -367,11 +425,35 @@ define([ * Get json data for jstree */ getJsonTree: function () { - return $.ajax({ + var deferred = $.Deferred(); + + $.ajax({ url: this.getDirectoryTreeUrl, type: 'GET', - dataType: 'json' + dataType: 'json', + + /** + * Success handler for request + * + * @param {Object} data + */ + success: function (data) { + deferred.resolve(data); + }, + + /** + * Error handler for request + * + * @param {Object} jqXHR + * @param {String} textStatus + */ + error: function (jqXHR, textStatus) { + deferred.reject(); + throw textStatus; + } }); + + return deferred.promise(); }, /** @@ -381,7 +463,7 @@ define([ */ createTree: function (data) { $(this.directoryTreeSelector).jstree({ - plugins: ['json_data', 'themes', 'ui', 'crrm', 'types', 'hotkeys'], + plugins: ['json_data', 'themes', 'ui', 'crrm', 'types', 'hotkeys'], vcheckbox: { 'two_state': true, 'real_checkboxes': true From 36074a918e077096f7978f05a7a1df8662474706 Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Tue, 18 Aug 2020 14:33:35 +0100 Subject: [PATCH 08/13] magento/magento2#29411: Formatting fixes --- .../web/js/directory/directoryTree.js | 35 +++++++++---------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index a5c5de1ccdf73..4749593f08d4f 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -21,6 +21,7 @@ define([ directoryTreeSelector: '#media-gallery-directory-tree', getDirectoryTreeUrl: 'media_gallery/directories/gettree', createDirectoryUrl: 'media_gallery/directories/create', + deleteDirectoryUrl: 'media_gallery/directories/delete', jsTreeReloaded: null, modules: { directories: '${ $.name }_directories', @@ -88,27 +89,23 @@ define([ * @param {Array} directories */ createFolderIfNotExists: function (directories) { - var isMediaBrowser = !_.isUndefined(window.MediabrowserUtility), - currentTreePath = isMediaBrowser ? window.MediabrowserUtility.pathId : null, + var requestedDirectory = this.getRequestedDirectory(), deferred = $.Deferred(), - decodedPath, pathArray; - if (!currentTreePath) { + if (_.isNull(requestedDirectory)) { deferred.resolve(false); return deferred.promise(); } - decodedPath = Base64.idDecode(currentTreePath); - - if (this.isDirectoryExist(directories[0], decodedPath)) { + if (this.isDirectoryExist(directories[0], requestedDirectory)) { deferred.resolve(false); return deferred.promise(); } - pathArray = this.convertPathToPathsArray(decodedPath); + pathArray = this.convertPathToPathsArray(requestedDirectory); $.each(pathArray, function (i, val) { if (this.isDirectoryExist(directories[0], val)) { @@ -204,7 +201,7 @@ define([ /** * Remove ability to multiple select on nodes */ - overrideMultiselectBehavior: function () { + disableMultiselectBehavior : function () { $.jstree.defaults.ui['select_range_modifier'] = false; $.jstree.defaults.ui['select_multiple_modifier'] = false; }, @@ -213,8 +210,8 @@ define([ * Handle jstree events */ initEvents: function () { - this.firejsTreeEvents(); - this.overrideMultiselectBehavior(); + this.initJsTreeEvents(); + this.disableMultiselectBehavior(); $(window).on('reload.MediaGallery', function () { this.getJsonTree().then(function (data) { @@ -222,7 +219,7 @@ define([ if (isCreated) { this.renderDirectoryTree().then(function () { this.setJsTreeReloaded(true); - this.firejsTreeEvents(); + this.initJsTreeEvents(); }.bind(this)); } else { this.updateSelectedDirectory(); @@ -235,7 +232,7 @@ define([ /** * Fire event for jstree component */ - firejsTreeEvents: function () { + initJsTreeEvents: function () { $(this.directoryTreeSelector).on('select_node.jstree', function (element, data) { this.setActiveNodeFilter($(data.rslt.obj).data('path')); this.setJsTreeReloaded(false); @@ -244,7 +241,6 @@ define([ $(this.directoryTreeSelector).on('loaded.jstree', function () { this.updateSelectedDirectory(); }.bind(this)); - }, /** @@ -285,6 +281,11 @@ define([ return false; }, + /** + * Get requested directory from MediabrowserUtility + * + * @returns {String|null} + */ getRequestedDirectory: function () { return (!_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '') ? Base64.idDecode(window.MediabrowserUtility.pathId) @@ -306,9 +307,7 @@ define([ * @param {String} path */ locateNode: function (path) { - var selectedId = $(this.directoryTreeSelector).jstree('get_selected').attr('id'); - - if (path === selectedId) { + if (path === $(this.directoryTreeSelector).jstree('get_selected').attr('id')) { return; } path = path.replace(/\//g, '\\/'); @@ -332,7 +331,6 @@ define([ * @param {String} nodePath */ setActiveNodeFilter: function (nodePath) { - if (this.activeNode() === nodePath && !this.jsTreeReloaded) { this.selectStorageRoot(); } else { @@ -361,7 +359,6 @@ define([ this.directories().setInActive(); }.bind(this) ); - }, /** From 9a69a6af4a1a7f6e04659cca2546d109cbf8fe4e Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Tue, 18 Aug 2020 18:24:51 +0100 Subject: [PATCH 09/13] magento/magento2#29411: Fixed static tests --- .../view/adminhtml/web/js/directory/directoryTree.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index 4749593f08d4f..0309b11296181 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -201,7 +201,7 @@ define([ /** * Remove ability to multiple select on nodes */ - disableMultiselectBehavior : function () { + disableMultiselectBehavior: function () { $.jstree.defaults.ui['select_range_modifier'] = false; $.jstree.defaults.ui['select_multiple_modifier'] = false; }, @@ -287,7 +287,7 @@ define([ * @returns {String|null} */ getRequestedDirectory: function () { - return (!_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '') + return !_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '' ? Base64.idDecode(window.MediabrowserUtility.pathId) : null; }, From 79c8386e1896008dfc8ef08df5b41f92b3f8100e Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Mon, 24 Aug 2020 17:56:31 +0100 Subject: [PATCH 10/13] magento/magento2#29411: Fixed MFTF test --- .../Test/Mftf/Test/AdminMediaGalleryUploadCategoryImageTest.xml | 1 + 1 file changed, 1 insertion(+) diff --git a/app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryUploadCategoryImageTest.xml b/app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryUploadCategoryImageTest.xml index ca7a71258fead..3dd294fa50605 100644 --- a/app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryUploadCategoryImageTest.xml +++ b/app/code/Magento/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryUploadCategoryImageTest.xml @@ -36,6 +36,7 @@ <actionGroup ref="AddCategoryImageActionGroup" stepKey="addCategoryImage"/> <actionGroup ref="AdminSaveCategoryFormActionGroup" stepKey="saveCategoryForm"/> <actionGroup ref="AdminOpenMediaGalleryFromCategoryImageUploaderActionGroup" stepKey="openMediaGalleryFromImageUploader"/> + <actionGroup ref="ResetAdminDataGridToDefaultViewActionGroup" stepKey="resetAdminDataGridToDefaultView"/> <actionGroup ref="AdminMediaGalleryAssertImageInGridActionGroup" stepKey="assertImageInGrid"> <argument name="title" value="ProductImage.filename"/> </actionGroup> From ae615991f7bb182c70485511f6675673471dc26f Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Mon, 24 Aug 2020 20:11:29 +0100 Subject: [PATCH 11/13] Fixed static tests --- .../view/adminhtml/web/js/directory/directoryTree.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index 0309b11296181..00a23e4a5fe08 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -257,16 +257,15 @@ define([ return; } - currentTreePath = this.isFilterApplied(currentFilterPath) || _.isNull(requestedDirectory) - ? currentFilterPath - : requestedDirectory; + currentTreePath = this.isFilterApplied(currentFilterPath) || _.isNull(requestedDirectory) ? + currentFilterPath : requestedDirectory; if (this.folderExistsInTree(currentTreePath)) { this.locateNode(currentTreePath); } else { this.selectStorageRoot(); } - }, + },g /** * Verify if directory exists in folder tree From a68bbbd6243ab5325ab8d5e0278a86d153175022 Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Tue, 25 Aug 2020 12:00:17 +0100 Subject: [PATCH 12/13] Fixed static tests --- .../view/adminhtml/web/js/directory/directoryTree.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index 00a23e4a5fe08..cf894a7395b31 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -265,7 +265,7 @@ define([ } else { this.selectStorageRoot(); } - },g + }, /** * Verify if directory exists in folder tree From e533396304e8d978568c4b2165d09c87fa33479b Mon Sep 17 00:00:00 2001 From: Sergii Ivashchenko <serg.ivashchenko@gmail.com> Date: Tue, 25 Aug 2020 13:27:02 +0100 Subject: [PATCH 13/13] Fixed static tests --- .../view/adminhtml/web/js/directory/directoryTree.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js index cf894a7395b31..2e1e9a980cd59 100644 --- a/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js +++ b/app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/directory/directoryTree.js @@ -286,9 +286,8 @@ define([ * @returns {String|null} */ getRequestedDirectory: function () { - return !_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '' - ? Base64.idDecode(window.MediabrowserUtility.pathId) - : null; + return !_.isUndefined(window.MediabrowserUtility) && window.MediabrowserUtility.pathId !== '' ? + Base64.idDecode(window.MediabrowserUtility.pathId) : null; }, /**