Pārlūkot izejas kodu

HUE-9096 [doc] Clean up the document sharing component

Johan Ahlen 5 gadi atpakaļ
vecāks
revīzija
5a88c0cacf

+ 11 - 1
desktop/core/src/desktop/js/doc/hueDocument.js

@@ -19,6 +19,9 @@ import * as ko from 'knockout';
 
 import apiHelper from 'api/apiHelper';
 import hueUtils from 'utils/hueUtils';
+import huePubSub from 'utils/huePubSub';
+
+export const DOCUMENT_UPDATED_EVENT = 'hue.document.updated';
 
 class HueDocument {
   /**
@@ -42,6 +45,12 @@ class HueDocument {
     this.idToUserMap = {};
     this.groupMap = {};
     this.items = [];
+
+    huePubSub.subscribe(DOCUMENT_UPDATED_EVENT, definition => {
+      if (this.definition() && this.definition().uuid === definition.uuid) {
+        this.definition(definition);
+      }
+    });
   }
 
   isShared() {
@@ -51,7 +60,8 @@ class HueDocument {
       (perms.read.users.length > 0 ||
         perms.read.groups.length > 0 ||
         perms.write.users.length > 0 ||
-        perms.write.groups.length > 0)
+        perms.write.groups.length > 0 ||
+        perms.link_sharing_on)
     );
   }
 

+ 0 - 7
desktop/core/src/desktop/js/ko/components/__snapshots__/ko.shareDocModal.test.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ko.shareDocModal.js should render component 1`] = `
-"<html><head></head><body class=\\"modal-open\\"><div id=\\"shareDocModal\\" data-bind=\\"descendantsComplete: descendantsComplete, component: { name: 'share-doc-modal', params: params }\\" data-keyboard=\\"true\\" class=\\"modal hide fade in\\" tabindex=\\"-1\\" aria-hidden=\\"false\\">
-  <!-- ko with: document --><!-- /ko -->
-</div><div class=\\"modal-backdrop fade in\\"></div></body></html>"
-`;

+ 4 - 2
desktop/core/src/desktop/js/ko/components/assist/ko.assistDocumentsPanel.js

@@ -24,6 +24,8 @@ import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import { DOCUMENT_TYPES } from 'doc/docSupport';
 
+export const REFRESH_DOC_ASSIST_EVENT = 'assist.document.refresh';
+
 // prettier-ignore
 const TEMPLATE = `
   <script type="text/html" id="document-context-items">
@@ -153,7 +155,7 @@ const TEMPLATE = `
             </li>
           </ul>
       </span>
-      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.document.refresh'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
+      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('${ REFRESH_DOC_ASSIST_EVENT }'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
         'Manual refresh'
       )}"></i></a>
     </div>
@@ -293,7 +295,7 @@ class AssistDocumentsPanel {
       );
     };
 
-    huePubSub.subscribe('assist.document.refresh', () => {
+    huePubSub.subscribe(REFRESH_DOC_ASSIST_EVENT, () => {
       huePubSub.publish('assist.clear.document.cache');
       self.reload();
     });

+ 16 - 0
desktop/core/src/desktop/js/ko/components/doc/__snapshots__/ko.shareDocModal.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ko.shareDocModal.js should render component 1`] = `
+"<html><head></head><body class=\\"modal-open\\"><div id=\\"shareDocModal\\" data-bind=\\"descendantsComplete: descendantsComplete, component: { name: 'share-doc-modal', params: params }\\" data-keyboard=\\"true\\" class=\\"modal hide fade in\\" tabindex=\\"-1\\" aria-hidden=\\"false\\">
+    <div class=\\"modal-header\\">
+      <button type=\\"button\\" class=\\"close\\" data-dismiss=\\"modal\\" aria-label=\\"Close\\"><span aria-hidden=\\"true\\">×</span></button>
+      <h2 class=\\"modal-title\\">Sharing - <span data-bind=\\"text: documentName\\"></span></h2>
+    </div>
+    <div class=\\"modal-body\\" style=\\"overflow: visible; height: 240px\\">
+      <!-- ko with: document --><!-- /ko -->
+    </div>
+    <div class=\\"modal-footer\\">
+      <a href=\\"#\\" data-dismiss=\\"modal\\" class=\\"btn disable-feedback disable-enter\\">Close</a>
+    </div>
+</div><div class=\\"modal-backdrop fade in\\"></div></body></html>"
+`;

+ 235 - 0
desktop/core/src/desktop/js/ko/components/doc/ko.shareDocModal.js

@@ -0,0 +1,235 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import $ from 'jquery';
+import * as ko from 'knockout';
+
+import componentUtils from '../componentUtils';
+import huePubSub from 'utils/huePubSub';
+import I18n from 'utils/i18n';
+import HueFileEntry from 'doc/hueFileEntry';
+import DisposableComponent from '../DisposableComponent';
+
+import './ko.linkSharing';
+import { REFRESH_DOC_ASSIST_EVENT } from '../assist/ko.assistDocumentsPanel';
+
+export const SHOW_EVENT = 'doc.show.share.modal';
+export const SHOWN_EVENT = 'doc.share.modal.shown';
+
+// prettier-ignore
+const TEMPLATE = `
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="${ I18n('Close') }"><span aria-hidden="true">&times;</span></button>
+      <h2 class="modal-title">${ I18n('Sharing') } - <span data-bind="text: documentName"></span></h2>
+    </div>
+    <div class="modal-body" style="overflow: visible; height: 240px">
+      <!-- ko with: document -->
+        <!-- ko with: definition -->
+          <!-- ko component: {
+            name: 'link-sharing',
+            params: {
+              document: $parent,
+              docDefinition: $data
+            }
+          } --><!-- /ko -->
+          <div class="row-fluid" data-bind="visible: !$parent.hasErrors()" style="max-height: 114px;" id="scrolldiv">
+            <div class="span6">
+              <h4 class="muted" style="margin-top: 0">${ I18n('Read') }</h4>
+              <div data-bind="visible: (perms.read.users.length == 0 && perms.read.groups.length == 0)">${ I18n('The document is not shared for read.') }</div>
+              <ul class="unstyled airy" data-bind="foreach: perms.read.users">
+                <li>
+                  <span class="badge badge-info" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }"><i class="fa fa-user"></i> <span data-bind="text: $parents[1].prettifyUsernameById(id), attr:{'data-id': id}"></span></span><span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeUserReadShare($data) }"> <i class="fa fa-times"></i></span>
+                </li>
+              </ul>
+              <ul class="unstyled airy" data-bind="foreach: perms.read.groups">
+                <li>
+                  <span class="badge badge-info" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }"><i class="fa fa-users"></i> ${ I18n('Group') } &quot;<span data-bind="text: name"></span>&quot;</span><span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeGroupReadShare($data) }"> <i class="fa fa-times"></i></span>
+                </li>
+              </ul>
+            </div>
+
+            <div class="span6">
+              <h4 class="muted" style="margin-top: 0">${ I18n('Modify') }</h4>
+              <div data-bind="visible: (perms.write.users.length == 0 && perms.write.groups.length == 0)">${ I18n('The document is not shared for modify.') }</div>
+              <ul class="unstyled airy" data-bind="foreach: perms.write.users">
+                <li>
+                  <span class="badge badge-info badge-left" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }">
+                    <i class="fa fa-user">
+                    </i>
+                    <span data-bind="text: $parents[1].prettifyUsernameById(id), attr:{'data-id': id}">
+                    </span>
+                  </span>
+                  <span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeUserWriteShare($data) }">
+                    <i class="fa fa-times"></i>
+                  </span>
+                </li>
+              </ul>
+              <ul class="unstyled airy" data-bind="foreach: perms.write.groups">
+                <li>
+                  <span class="badge badge-info badge-left" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }">
+                    <i class="fa fa-users"></i> ${ I18n('Group') } &quot;
+                    <span data-bind="text: name"></span>&quot;</span>
+                    <span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeGroupWriteShare($data) }">
+                    <i class="fa fa-times"></i>
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        <!-- /ko -->
+        <div class="doc-browser-empty animated" style="display: none;" data-bind="visible: loading">
+          <i class="fa fa-spinner fa-spin fa-2x" style="color: #999;"></i>
+        </div>
+        <div class="doc-browser-empty animated" style="display: none;" data-bind="visible: hasErrors() && ! loading()">
+          ${ 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">
+            <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',
+                  noMatchTemplate: 'user-search-autocomp-no-match',
+                  valueObservable: searchInput,
+                  showSpinner: true,
+                  classPrefix: 'hue-',
+                  onEnter: onShareAutocompleteUserEnter.bind($data),
+                  appendTo: '#shareDocAutocompleteMenu'
+                },
+                clearable: {
+                  value: searchInput,
+                  textInput: searchInput
+                }
+              " class="ui-autocomplete-input" autocomplete="off" style="width: 420px">
+            <div class="btn-group" style="overflow:visible">
+              <a id="documentShareAddBtn" class="btn" data-bind="click: function () {  onShareAutocompleteUserEnter() }">
+                <span data-bind="text: selectedPerm() == 'read' ? '${ I18n('Read') }' : '${ I18n('Modify') }'">
+                </span>
+              </a>
+              <a id="documentShareCaret" class="btn dropdown-toggle" data-toggle="dropdown">
+               <span class="caret"></span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a data-bind="click: function () { selectedPerm('read'); onShareAutocompleteUserEnter() }" href="javascript:void(0)">
+                    <i class="fa fa-plus"></i> ${ I18n('Read') }
+                  </a>
+                </li>
+                <li>
+                  <a data-bind="click: function () { selectedPerm('write'); onShareAutocompleteUserEnter() }" href="javascript:void(0)">
+                    <i class="fa fa-plus"></i> ${ I18n('Modify') }
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      <!-- /ko -->
+    </div>
+    <div class="modal-footer">
+      <a href="#" data-dismiss="modal" class="btn disable-feedback disable-enter">${ I18n('Close') }</a>
+    </div>
+`;
+
+class ShareDocModal extends DisposableComponent {
+  constructor(params) {
+    super();
+    this.document = ko.observable();
+    this.perms = ko.observable();
+    this.uuid = ko.observable();
+
+    this.wasSharedBefore = undefined;
+
+    this.documentName = ko.pureComputed(() => this.document() && this.document().definition().name);
+    this.showLinkSharing = ko.pureComputed(
+      () => window.HAS_LINK_SHARING && this.perms() && this.perms().link_sharing_on
+    );
+
+    this.initDocument(params);
+  }
+
+  dispose() {
+    if (this.wasSharedBefore !== this.document().isShared()) {
+      huePubSub.publish(REFRESH_DOC_ASSIST_EVENT);
+    }
+  }
+
+  async initDocument(params) {
+    try {
+      const document = await getDocument(params);
+      this.wasSharedBefore = document.isShared();
+      this.document(document);
+      this.perms(document.definition().perms);
+      this.uuid(document.definition().uuid);
+    } catch (err) {
+      console.warn('Failed loading document.');
+      console.error(err);
+    }
+  }
+}
+
+const getDocument = async params =>
+  new Promise(async (resolve, reject) => {
+    const ensureLoaded = async entry => entry.document() || (await entry.loadDocument());
+
+    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(async () => {
+        resolve(await ensureLoaded(entry));
+      }, reject);
+    } else {
+      resolve(await ensureLoaded(params));
+    }
+  });
+
+componentUtils.registerComponent('share-doc-modal', ShareDocModal, TEMPLATE).then(() => {
+  huePubSub.subscribe(SHOW_EVENT, async params => {
+    let $shareDocMocal = $('#shareDocModal');
+    if ($shareDocMocal.length) {
+      ko.cleanNode($shareDocMocal[0]);
+      $shareDocMocal.remove();
+    }
+
+    $shareDocMocal = $(
+      '<div id="shareDocModal" data-bind="descendantsComplete: descendantsComplete, component: { name: \'share-doc-modal\', params: params }" data-keyboard="true" class="modal hide fade" tabindex="-1"/>'
+    );
+    $('body').append($shareDocMocal);
+
+    const data = {
+      params: params,
+      descendantsComplete: () => {
+        huePubSub.publish(SHOWN_EVENT);
+      }
+    };
+
+    ko.applyBindings(data, $shareDocMocal[0]);
+    $shareDocMocal.modal('show');
+    $shareDocMocal.on('hide', () => {
+      ko.cleanNode($shareDocMocal[0]);
+      $shareDocMocal.remove();
+    });
+  });
+});

+ 22 - 1
desktop/core/src/desktop/js/ko/components/ko.shareDocModal.test.js → desktop/core/src/desktop/js/ko/components/doc/ko.shareDocModal.test.js

@@ -23,7 +23,28 @@ import 'ext/bootstrap.2.3.2.min';
 describe('ko.shareDocModal.js', () => {
   it('should render component', async () => {
     huePubSub.publish(SHOW_EVENT, {
-      document: ko.observable(),
+      document: ko.observable({
+        isShared: () => false,
+        hasErrors: () => false,
+        loading: () => false,
+        selectedPerm: () => undefined,
+        fileEntry: {
+          canModify: () => false
+        },
+        definition: ko.observable({
+          name: 'hello',
+          perms: {
+            read: {
+              groups: [],
+              users: []
+            },
+            write: {
+              groups: [],
+              users: []
+            }
+          }
+        })
+      }),
       loadDocument: () => {}
     });
 

+ 0 - 249
desktop/core/src/desktop/js/ko/components/ko.shareDocModal.js

@@ -1,249 +0,0 @@
-// Licensed to Cloudera, Inc. under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  Cloudera, Inc. licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import $ from 'jquery';
-import * as ko from 'knockout';
-
-import componentUtils from './componentUtils';
-import huePubSub from 'utils/huePubSub';
-import I18n from 'utils/i18n';
-import HueFileEntry from 'doc/hueFileEntry';
-
-export const SHOW_EVENT = 'doc.show.share.modal';
-export const SHOWN_EVENT = 'doc.share.modal.shown';
-
-// prettier-ignore
-const TEMPLATE = `
-  <!-- ko with: document -->
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="${ I18n('Close') }"><span aria-hidden="true">&times;</span></button>
-      <h2 class="modal-title">${ I18n('Sharing') } - <span data-bind="text: definition().name"></span></h2>
-    </div>
-    <div class="modal-body" style="overflow: visible; height: 240px">
-  
-      <!-- ko if: window.HAS_LINK_SHARING -->
-      <a href="javascript:void(0)" data-bind="visible: !definition().perms.link_sharing_on, click: function() { persistLinkSharingPerms('read'); }" title="${ I18n(
-        'Share the query via a link'
-      ) }">
-        <i class="fa fa-wf fa-link"></i> ${ I18n('Get link') }
-      </a>
-  
-      <!-- ko if: definition().perms.link_sharing_on -->
-      <a href="javascript:void(0)" data-bind="click: function() { persistLinkSharingPerms('off'); }" title="${ I18n(
-        'Deactivate the link sharing'
-      ) }">
-        <i class="fa fa-wf fa-link"></i> ${ I18n('Deactivate link') }
-      </a>
-  
-      <div class="row-fluid">
-        <div class="span12">
-          Anyone logged and with the link can:
-          <br/>
-          Read: <span data-bind="text: definition().perms.link_read"></span> |
-          Write: <span data-bind="text: definition().perms.link_write"></span>
-          <h4 class="muted" style="margin-top: 0">${ I18n('Shareable link') }</h4>
-          <div class="input-group">
-            <input class="input-xxlarge" onfocus="this.select()" name="gist-link" id="gist-link" type="text" placeholder="${ I18n('Link') }"/>
-          </div>
-          <div class="input-prepend">
-            <a class="btn gist-link-btn" data-clipboard-target="#gist-link" data-dismiss="modal">${ I18n('Copy')}</a>
-            <button class="add-on muted gist-link-btn" data-clipboard-target="#gist-link">
-              <i class="fa fa-clipboard"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-      <!-- /ko -->
-      <!-- /ko -->
-  
-      <!-- ko with: definition -->
-      <div class="row-fluid" data-bind="visible: !$parent.hasErrors()" style="max-height: 114px;" id="scrolldiv">
-        <div class="span6">
-          <h4 class="muted" style="margin-top: 0">${ I18n('Read') }</h4>
-          <div data-bind="visible: (perms.read.users.length == 0 && perms.read.groups.length == 0)">${ I18n('The document is not shared for read.') }</div>
-          <ul class="unstyled airy" data-bind="foreach: perms.read.users">
-            <li>
-              <span class="badge badge-info" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }"><i class="fa fa-user"></i> <span data-bind="text: $parents[1].prettifyUsernameById(id), attr:{'data-id': id}"></span></span><span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeUserReadShare($data) }"> <i class="fa fa-times"></i></span>
-            </li>
-          </ul>
-          <ul class="unstyled airy" data-bind="foreach: perms.read.groups">
-            <li>
-              <span class="badge badge-info" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }"><i class="fa fa-users"></i> ${ I18n('Group') } &quot;<span data-bind="text: name"></span>&quot;</span><span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeGroupReadShare($data) }"> <i class="fa fa-times"></i></span>
-            </li>
-          </ul>
-        </div>
-  
-        <div class="span6">
-          <h4 class="muted" style="margin-top: 0">${ I18n('Modify') }</h4>
-          <div data-bind="visible: (perms.write.users.length == 0 && perms.write.groups.length == 0)">${ I18n('The document is not shared for modify.') }</div>
-          <ul class="unstyled airy" data-bind="foreach: perms.write.users">
-            <li>
-              <span class="badge badge-info badge-left" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }">
-                <i class="fa fa-user">
-                </i>
-                <span data-bind="text: $parents[1].prettifyUsernameById(id), attr:{'data-id': id}">
-                </span>
-              </span>
-              <span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeUserWriteShare($data) }">
-                <i class="fa fa-times"></i>
-              </span>
-            </li>
-          </ul>
-          <ul class="unstyled airy" data-bind="foreach: perms.write.groups">
-            <li>
-              <span class="badge badge-info badge-left" data-bind="css: { 'badge-left' : $parents[1].fileEntry.canModify() }">
-                <i class="fa fa-users"></i> ${ I18n('Group') } &quot;
-                <span data-bind="text: name"></span>&quot;</span>
-                <span class="badge badge-right trash-share" data-bind="visible: $parents[1].fileEntry.canModify(), click: function() { $parents[1].removeGroupWriteShare($data) }">
-                <i class="fa fa-times"></i>
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- /ko -->
-      <div class="doc-browser-empty animated" style="display: none;" data-bind="visible: loading">
-        <i class="fa fa-spinner fa-spin fa-2x" style="color: #999;"></i>
-      </div>
-      <div class="doc-browser-empty animated" style="display: none;" data-bind="visible: hasErrors() && ! loading()">
-        ${ 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">
-          <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',
-                noMatchTemplate: 'user-search-autocomp-no-match',
-                valueObservable: searchInput,
-                showSpinner: true,
-                classPrefix: 'hue-',
-                onEnter: onShareAutocompleteUserEnter.bind($data),
-                appendTo: '#shareDocAutocompleteMenu'
-              },
-              clearable: {
-                value: searchInput,
-                textInput: searchInput
-              }
-            " class="ui-autocomplete-input" autocomplete="off" style="width: 420px">
-          <div class="btn-group" style="overflow:visible">
-            <a id="documentShareAddBtn" class="btn" data-bind="click: function () {  onShareAutocompleteUserEnter() }">
-              <span data-bind="text: selectedPerm() == 'read' ? '${ I18n('Read') }' : '${ I18n('Modify') }'">
-              </span>
-            </a>
-            <a id="documentShareCaret" class="btn dropdown-toggle" data-toggle="dropdown">
-             <span class="caret"></span>
-            </a>
-            <ul class="dropdown-menu">
-              <li>
-                <a data-bind="click: function () { selectedPerm('read'); onShareAutocompleteUserEnter() }" href="javascript:void(0)">
-                  <i class="fa fa-plus"></i> ${ I18n('Read') }
-                </a>
-              </li>
-              <li>
-                <a data-bind="click: function () { selectedPerm('write'); onShareAutocompleteUserEnter() }" href="javascript:void(0)">
-                  <i class="fa fa-plus"></i> ${ I18n('Modify') }
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <a href="#" data-dismiss="modal" class="btn disable-feedback disable-enter">${ I18n('Close') }</a>
-    </div>
-  <!-- /ko -->
-`;
-
-class ShareDocModal {
-  constructor(params) {
-    this.document = ko.observable();
-    this.wasSharedBefore = undefined;
-
-    this.initDocument(params);
-  }
-
-  dispose() {
-    if (this.wasSharedBefore !== this.document().isShared()) {
-      huePubSub.publish('assist.document.refresh');
-    }
-  }
-
-  async initDocument(params) {
-    try {
-      const document = await getDocument(params);
-      this.wasSharedBefore = document.isShared();
-      this.document(document);
-    } catch (err) {
-      console.warn('Failed loading document.');
-      console.error(err);
-    }
-  }
-}
-
-const getDocument = async params =>
-  new Promise(async (resolve, reject) => {
-    const ensureLoaded = async entry => entry.document() || (await entry.loadDocument());
-
-    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(async () => {
-        resolve(await ensureLoaded(entry));
-      }, reject);
-    } else {
-      resolve(await ensureLoaded(params));
-    }
-  });
-
-componentUtils.registerComponent('share-doc-modal', ShareDocModal, TEMPLATE).then(() => {
-  huePubSub.subscribe(SHOW_EVENT, async params => {
-    let $shareDocMocal = $('#shareDocModal');
-    if ($shareDocMocal.length) {
-      ko.cleanNode($shareDocMocal[0]);
-      $shareDocMocal.remove();
-    }
-
-    $shareDocMocal = $(
-      '<div id="shareDocModal" data-bind="descendantsComplete: descendantsComplete, component: { name: \'share-doc-modal\', params: params }" data-keyboard="true" class="modal hide fade" tabindex="-1"/>'
-    );
-    $('body').append($shareDocMocal);
-
-    const data = {
-      params: params,
-      descendantsComplete: () => {
-        huePubSub.publish(SHOWN_EVENT);
-      }
-    };
-
-    ko.applyBindings(data, $shareDocMocal[0]);
-    $shareDocMocal.modal('show');
-    $shareDocMocal.on('hide', () => {
-      ko.cleanNode($shareDocMocal[0]);
-      $shareDocMocal.remove();
-    });
-  });
-});

+ 2 - 1
desktop/core/src/desktop/js/ko/ko.all.js

@@ -142,7 +142,9 @@ import 'ko/components/assist/ko.assistStoragePanel';
 import 'ko/components/assist/ko.rightAssistPanel';
 import 'ko/components/contextPopover/ko.contextPopover';
 import 'ko/components/contextPopover/ko.quickQueryContext';
+import 'ko/components/doc/ko.shareDocModal';
 import 'ko/components/simpleAceEditor/ko.simpleAceEditor';
+
 import 'ko/components/ko.catalogEntriesList';
 import 'ko/components/ko.contextSelector';
 import 'ko/components/ko.createDirectoryModal';
@@ -165,7 +167,6 @@ import 'ko/components/ko.quickQueryAction';
 import 'ko/components/ko.sentryPrivileges';
 import 'ko/components/ko.sessionAuthModal';
 import 'ko/components/ko.sessionPanel';
-import 'ko/components/ko.shareDocModal';
 import 'ko/components/ko.shareGistModal';
 import 'ko/components/ko.sidebar';
 import 'ko/components/ko.sqlColumnsTable';