Эх сурвалжийг харах

HUE-9096 [doc] Create a link sharing component and add it to the doc sharing modal

Johan Ahlen 5 жил өмнө
parent
commit
9ebd5034c0

+ 106 - 0
desktop/core/src/desktop/js/ko/components/doc/ko.linkSharing.js

@@ -0,0 +1,106 @@
+// 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 * as ko from 'knockout';
+
+import ApiHelper, { LINK_SHARING_PERMS } from '/api/apiHelper';
+import componentUtils from '../componentUtils';
+import I18n from 'utils/i18n';
+import DisposableComponent from '../DisposableComponent';
+import { DOCUMENT_UPDATED_EVENT } from 'doc/hueDocument';
+import huePubSub from 'utils/huePubSub';
+
+// prettier-ignore
+const TEMPLATE = `
+  <!-- ko if: window.HAS_LINK_SHARING && perms() -->
+  <div class="hue-link-sharing">
+    <div style="float: right">
+      <!-- ko ifnot: perms().link_sharing_on -->
+      <a href="javascript:void(0);" data-bind="click: createReadLink" title="${ I18n('Share the query via a link') }" >
+        <i class="fa fa-wf fa-link"></i> ${ I18n('Get link') }
+      </a>
+      <!-- /ko -->
+      <!-- ko if: perms().link_sharing_on -->
+      <a href="javascript:void(0)" data-bind="click: deactivateLink" title="${ I18n('Deactivate the link sharing') }">
+        <i class="fa fa-wf fa-link"></i> ${ I18n('Deactivate link') }
+      </a>
+      <!-- /ko -->
+    </div>
+    <!-- ko if: perms().link_sharing_on -->
+    <div>
+      ${ I18n('Anyone logged and with the link can') }
+      <div class="perm-selector" data-bind="component: {
+          name: 'hue-drop-down',
+          params: {
+            value: selectedPerm,
+            entries: availablePerms,
+            onSelect: changePerm.bind($data)
+          }
+        }
+      "></div>
+    </div>
+    <div class="shared-link">
+      <div id="sharedLinkInput" data-bind="text: link"></div>
+      <button class="btn" data-clipboard-target="#sharedLinkInput" data-bind="clipboard"><i class="fa fa-clipboard"></i></button>
+    </div>
+    <!-- /ko -->
+  </div>
+  <!-- /ko -->
+`;
+
+const OFF_OPTION = { value: LINK_SHARING_PERMS.OFF };
+const READ_OPTION = { label: I18n('read'), value: LINK_SHARING_PERMS.READ };
+const WRITE_OPTION = { label: I18n('write'), value: LINK_SHARING_PERMS.WRITE };
+const AVAILABLE_PERMS = [READ_OPTION, WRITE_OPTION];
+
+class LinkSharing extends DisposableComponent {
+  constructor(params) {
+    super();
+    this.document = params.document;
+    this.docDefinition = params.docDefinition;
+
+    this.perms = ko.observable(this.docDefinition.perms);
+
+    this.selectedPerm = ko.observable(this.perms().link_write ? WRITE_OPTION : READ_OPTION);
+
+    this.link = location.origin + window.HUE_BASE_URL + '/hue' + this.docDefinition.absoluteUrl;
+
+    this.availablePerms = AVAILABLE_PERMS;
+
+    super.subscribe(this.perms, perms =>
+      this.selectedPerm(perms.link_write ? WRITE_OPTION : READ_OPTION)
+    );
+  }
+
+  async createReadLink() {
+    await this.changePerm(READ_OPTION);
+  }
+
+  async deactivateLink() {
+    await this.changePerm(OFF_OPTION);
+  }
+
+  async changePerm(permOption) {
+    const response = await ApiHelper.setLinkSharingPermsAsync({
+      perm: permOption.value,
+      uuid: this.docDefinition.uuid
+    });
+    this.perms(response.document.perms);
+    huePubSub.publish(DOCUMENT_UPDATED_EVENT, response.document);
+  }
+}
+
+componentUtils.registerComponent('link-sharing', LinkSharing, TEMPLATE);

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 1 - 1
desktop/core/src/desktop/static/desktop/ext/js/clipboard.min.js


+ 60 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-link-sharing.less

@@ -0,0 +1,60 @@
+/*
+ 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 (reference) "../cui/colors.less";
+@import (reference) "../cui/extra-variables.less";
+@import (reference) "../hue-mixins.less";
+
+.hue-link-sharing {
+  min-height: 16px;
+
+  .perm-selector {
+    display: inline-block;
+
+    .hue-drop-down-selected {
+      font-weight: 800;
+    }
+  }
+
+  .shared-link {
+    position: relative;
+    background: @cui-gray-040;
+    border: 1px solid @cui-gray-300;
+    border-radius: @hue-panel-border-radius;
+    margin: 5px 0 20px 0;
+
+    > div {
+      display: inline-block;
+      padding: 5px 10px;
+      color: @cui-gray-700;
+    }
+
+    > button {
+      border: 1px solid @cui-gray-300;
+      background-color: @cui-gray-100;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: @hue-panel-border-radius;
+      border-bottom-right-radius: @hue-panel-border-radius;
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      padding: 5px 10px;
+    }
+  }
+}

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -26,6 +26,7 @@
 @import "components/hue-filechooser.less";
 @import "components/hue-gridster.less";
 @import "components/hue-inputautocomplete.less";
+@import "components/hue-link-sharing.less";
 @import "components/hue-nav-properties.less";
 @import "components/hue-notify.less";
 @import "components/hue-performance-graph.less";

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно