T1301121 - double fileManager - popup notification is not positioned correctly (#30521)

Author: Staziz

packages/devextreme/js/ui/file_manager/ui.file_manager.js

@@ -101,7 +101,7 @@ class FileManager extends Widget {
             progressPanelContainer: this.$element(),
             contentTemplate: (container, notificationControl) => this._createWrapper(container, notificationControl),
             onActionProgress: e => this._onActionProgress(e),
-            positionTarget: `.${FILE_MANAGER_CONTAINER_CLASS}`,
+            positionTargetSelector: `.${FILE_MANAGER_CONTAINER_CLASS}`,
             showProgressPanel: this.option('notifications.showPanel'),
             showNotificationPopup: this.option('notifications.showPopup')
         });

packages/devextreme/js/ui/file_manager/ui.file_manager.notification.js

@@ -291,7 +291,7 @@ export default class FileManagerNotificationControl extends Widget {
                 position: {
                     my: 'right top',
                     at: 'right top',
-                    of: this.option('positionTarget'),
+                    of: this._progressDrawer.$element().find(this.option('positionTargetSelector')),
                     offset: '-10 -5'
                 },
                 _wrapperClassExternal: FILE_MANAGER_NOTIFICATION_POPUP_CLASS,

packages/devextreme/testing/helpers/fileManagerHelpers.js

@@ -130,6 +130,10 @@ export class FileManagerWrapper {
         return this._$element.find(`.${Consts.ITEMS_PANEL_CLASS}`);
     }
 
+    getContainer() {
+        return this._$element.find(`.${Consts.CONTAINER_CLASS}`);
+    }
+
     getFolderNodes(inDialog) {
         if(inDialog) {
             return this.getFolderChooserDialog().find(`.${Consts.DIALOG_CLASS} .${Consts.FOLDERS_TREE_VIEW_ITEM_CLASS}`);
@@ -517,6 +521,10 @@ export class FileManagerWrapper {
         return $(`.${Consts.NOTIFICATION_POPUP_CLASS} .${Consts.POPUP_NORMAL_CLASS}`);
     }
 
+    getNotificationPopupInstance() {
+        return this.getInstance()._notificationControl._notificationPopup;
+    }
+
     getFolderChooserDialog() {
         return $(`.${Consts.FOLDER_CHOOSER_DIALOG_CLASS} .${Consts.POPUP_NORMAL_CLASS}`).filter(':visible');
     }

packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/editing.tests.js

@@ -64,6 +64,62 @@ const moduleConfig = {
     }
 };
 
+const moduleConfig_T1301121 = {
+    beforeEach: function() {
+        const markup = '<div style="display: flex; flex-flow: column nowrap;"><div id="file-manager-1"></div><div id="file-manager-2"></div></div>';
+        $('#qunit-fixture').html(markup);
+
+        this.clock = sinon.useFakeTimers();
+        fx.off = true;
+
+        const createProvider = fileManagerName => new CustomFileSystemProvider({
+            getItems: parent => {
+                if(fileManagerName === 'fileManager2') {
+                    return Promise.reject(new FileSystemError(42, parent, 'You have no access to this folder.'));
+                }
+                return [
+                    {
+                        name: 'Folder 1',
+                        isDirectory: true,
+                        hasSubDirectories: false
+                    }
+                ];
+            },
+        });
+
+        const getFmOptions = rootFolderName => ({
+            name: rootFolderName,
+            rootFolderName: rootFolderName,
+            fileSystemProvider: createProvider(rootFolderName),
+            notifications: {
+                showPanel: true,
+                showPopup: true
+            }
+        });
+
+        this.$fMElement1 = $('#file-manager-1').dxFileManager(getFmOptions('fileManager1'));
+        this.$fMElement2 = $('#file-manager-2').dxFileManager(getFmOptions('fileManager2'));
+
+        this.fileManager1 = this.$fMElement1.dxFileManager('instance');
+        this.fileManager2 = this.$fMElement2.dxFileManager('instance');
+
+        this.wrapper1 = new FileManagerWrapper(this.$fMElement1);
+        this.wrapper2 = new FileManagerWrapper(this.$fMElement2);
+        this.progressPanelWrapper1 = new FileManagerProgressPanelWrapper(this.$fMElement1);
+        this.progressPanelWrapper2 = new FileManagerProgressPanelWrapper(this.$fMElement2);
+        this.clock.tick(400);
+    },
+
+    afterEach: function() {
+        this.clock.tick(5000);
+
+        this.clock.restore();
+        fx.off = false;
+
+        FileUploaderInternals.resetFileInputTag();
+    }
+};
+
 QUnit.module('Editing operations', moduleConfig, () => {
 
     test('rename folder in folders area', function(assert) {
@@ -2457,3 +2513,26 @@ QUnit.module('Editing operations', moduleConfig, () => {
         fx.off = true;
     });
 });
+
+QUnit.module('double FileManager - notification displayed next to correct FileManager (Bugs)', moduleConfig_T1301121, () => {
+
+    test('error in second filemanager displayed in the popup located next to second filemanager', function(assert) {
+        this.clock.tick(800);
+
+        const $popupContents = this.wrapper2.getNotificationPopup();
+        const popupInstance = this.wrapper2.getNotificationPopupInstance();
+
+        assert.strictEqual(this.progressPanelWrapper1.getInfos().length, 0, 'There is no notifications on panel of first filemanager');
+        assert.strictEqual(this.progressPanelWrapper2.getInfos().length, 1, 'There is one notification on panel of second filemanager');
+
+        assert.ok($popupContents.is(':visible'), 'notification popup is visible');
+        const popupTop = $popupContents[0].getBoundingClientRect().top;
+        const popupLeft = $popupContents[0].getBoundingClientRect().left;
+        const fileManager2Top = this.$fMElement2[0].getBoundingClientRect().top;
+        const fileManager2Left = this.$fMElement2[0].getBoundingClientRect().left;
+        assert.true(popupTop > fileManager2Top, `notification popup is visible below second filemanager upper border (${popupTop} > ${fileManager2Top})`);
+        assert.true(popupLeft > fileManager2Left, `notification popup is visible to the right of second filemanager (${popupLeft} > ${fileManager2Left})`);
+        assert.true(this.wrapper2.getContainer()[0].isEqualNode(popupInstance.option('position').of[0]), 'notification popup position is correct');
+    });
+
+});