Преглед на файлове

HUE-9058 [frontend] Prevent share modal conflict

There are currently 3 share modals in Hue and after visiting multiple apps there could be element ID conflicts preventing the user from changing the share settings of a document. This change prevents any conflicts until we can consolidate the 3 modals into one.
Johan Ahlen преди 6 години
родител
ревизия
f5fd386cb2

+ 3 - 2
desktop/core/src/desktop/js/apps/notebook/editorViewModel.js

@@ -664,8 +664,9 @@ class EditorViewModel {
 
   prepareShareModal() {
     const selectedNotebookUuid = this.selectedNotebook() && this.selectedNotebook().uuid();
-    window.shareViewModel.setDocUuid(selectedNotebookUuid);
-    window.openShareModal();
+    if (selectedNotebookUuid) {
+      huePubSub.publish('doc.show.share.modal', selectedNotebookUuid);
+    }
   }
 }
 

+ 3 - 2
desktop/core/src/desktop/js/apps/notebook2/editorViewModel.js

@@ -447,8 +447,9 @@ class EditorViewModel {
   prepareShareModal() {
     const self = this;
     const selectedNotebookUuid = self.selectedNotebook() && self.selectedNotebook().uuid();
-    window.shareViewModel.setDocUuid(selectedNotebookUuid);
-    window.openShareModal();
+    if (selectedNotebookUuid) {
+      huePubSub.publish('doc.show.share.modal', selectedNotebookUuid);
+    }
   }
 
   removeSnippet(notebook, snippet) {

+ 2 - 2
desktop/core/src/desktop/js/doc/hueDocument.js

@@ -46,7 +46,7 @@ class HueDocument {
 
   onShareAutocompleteUserEnter() {
     const self = this;
-    const searchAutoCompInput = $('#userSearchAutocomp').val();
+    const searchAutoCompInput = $('#shareDocUserInput').val();
     const selectedUserOrGroup = self.userMap[searchAutoCompInput]
       ? self.userMap[searchAutoCompInput]
       : self.groupMap[searchAutoCompInput];
@@ -58,7 +58,7 @@ class HueDocument {
       }
       this.persistPerms();
     }
-    $('#userSearchAutocomp').val('');
+    $('#shareDocUserInput').val('');
   }
 
   shareAutocompleteUserSource(request, callback) {

+ 7 - 1
desktop/core/src/desktop/js/ko/bindings/ko.autocomplete.js

@@ -23,6 +23,12 @@ ko.bindingHandlers.autocomplete = {
   init: function(element, valueAccessor) {
     let options = valueAccessor();
     const $element = $(element);
+    const getMenuElement = () => {
+      if (typeof options.appendTo === 'string') {
+        return $(options.appendTo);
+      }
+      return options.appendTo;
+    };
 
     const delay = 400;
 
@@ -82,7 +88,7 @@ ko.bindingHandlers.autocomplete = {
             $('<div>')
               .addClass('autocomplete-count')
               .text('(' + count + ')')
-              .appendTo($menu);
+              .appendTo(getMenuElement());
           }
         });
       };

+ 32 - 4
desktop/core/src/desktop/js/ko/components/ko.shareDocModal.js

@@ -69,9 +69,9 @@ const TEMPLATE = `
       ${ I18n('There was an error loading the document.')}
     </div>
     <div style="margin-top: 20px" data-bind="visible: fileEntry.canModify() && ! hasErrors() && ! loading()">
+      <div id="shareDocAutocompleteMenu"></div>
       <div class="input-append" style="font-size: inherit">
-        <div id="menu"></div>
-        <input id="userSearchAutocomp" placeholder="${ I18n('Type a username or a group name') }" type="text" data-bind="
+        <input id="shareDocUserInput" placeholder="${ I18n('Type a username or a group name') }" type="text" data-bind="
             autocomplete: {
               source: shareAutocompleteUserSource.bind($data),
               itemTemplate: 'user-search-autocomp-item',
@@ -80,7 +80,7 @@ const TEMPLATE = `
               showSpinner: true,
               classPrefix: 'hue-',
               onEnter: onShareAutocompleteUserEnter.bind($data),
-              appendTo: $('#menu')
+              appendTo: '#shareDocAutocompleteMenu'
             }, 
             clearable: {
               value: searchInput,
@@ -106,8 +106,36 @@ const TEMPLATE = `
   <!-- /ko -->
 `;
 
+const getEntry = async params =>
+  new Promise(resolve => {
+    if (typeof params === 'string') {
+      const entry = new HueFileEntry({
+        activeEntry: ko.observable(),
+        trashEntry: ko.observable(),
+        app: 'documents',
+        activeSort: ko.observable(),
+        user: window.LOGGED_USERNAME,
+        definition: {
+          uuid: params
+        }
+      });
+      entry.load(
+        () => {
+          resolve(entry);
+        },
+        () => {
+          resolve(entry);
+        }
+      );
+    } else {
+      resolve(params);
+    }
+  });
+
 componentUtils.registerComponent('share-doc-modal', undefined, TEMPLATE).then(() => {
-  huePubSub.subscribe('doc.show.share.modal', hueFileEntry => {
+  huePubSub.subscribe('doc.show.share.modal', async params => {
+    const hueFileEntry = await getEntry(params);
+
     let $shareDocMocal = $('#shareDocModal');
     if ($shareDocMocal.length) {
       ko.cleanNode($shareDocMocal[0]);

+ 3 - 12
desktop/libs/notebook/src/notebook/templates/notebooks.mako

@@ -15,7 +15,7 @@
 ## limitations under the License.
 
 <%!
-  from desktop.views import commonheader, commonfooter, commonshare, commonimportexport, _ko
+  from desktop.views import commonheader, commonfooter, commonimportexport, _ko
   from django.utils.translation import ugettext as _
 %>
 <%namespace name="actionbar" file="actionbar.mako" />
@@ -162,13 +162,9 @@ ${ commonheader(_("Notebooks"), "spark", user, request, "60px") | n,unicode }
 </div>
 </div>
 
-
 ${ commonimportexport(request) | n,unicode }
-${ commonshare() | n,unicode }
-
 
 <script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
-<script src="${ static('desktop/js/share2.vm.js') }"></script>
 
 <script type="text/javascript">
   var Editor = function () {
@@ -228,21 +224,16 @@ ${ commonshare() | n,unicode }
     };
 
     self.prepareShareModal = function() {
-      shareViewModel.setDocUuid(self.selectedJobs()[0].uuid());
-      openShareModal();
+      huePubSub.publish('doc.show.share.modal', self.selectedJobs()[0].uuid());
     };
-  }
+  };
 
   var viewModel;
-  var shareViewModel;
 
   $(document).ready(function () {
     viewModel = new Editor();
     ko.applyBindings(viewModel, $("#editor")[0]);
 
-    shareViewModel = initSharing("#documentShareModal");
-    shareViewModel.setDocUuid('');
-
     $(document).on("showSubmitPopup", function(event, data){
       $('#submit-notebook-modal').html(data);
       $('#submit-notebook-modal').modal('show');