瀏覽代碼

HUE-9191 [ui] Use the key component in the context popover

Johan Ahlen 5 年之前
父節點
當前提交
cc7739c67a

+ 9 - 3
desktop/core/src/desktop/js/ko/components/assist/__snapshots__/ko.assistKey.test.js.snap

@@ -7,10 +7,16 @@ exports[`ko.assistKey.js should render component 1`] = `
             html: true,
             placement: 'bottom'
           },
-          click: highlight
+          click: foreignKeyClick
         \\" data-original-title=\\"\\"><i class=\\"fa fa-key\\"></i></a><i class=\\"fa fa-key\\" style=\\"padding: 0 2px;\\" data-bind=\\"
+          tooltip: {
+            title: 'Foreign Key',
+            placement: 'bottom'
+          }
+        \\" data-original-title=\\"\\"></i><i class=\\"fa fa-key\\" style=\\"padding: 0 2px;\\" data-bind=\\"
         tooltip: {
-          title: 'Primary Key',
+          title: entry.isPrimaryKey() ? 'Primary Key' : 'Partition Key',
           placement: 'bottom'
-        }\\" data-original-title=\\"\\"></i><i class=\\"fa fa-key\\"></i></div>"
+        }
+      \\" data-original-title=\\"\\"></i><i class=\\"fa fa-key\\"></i></div>"
 `;

+ 5 - 5
desktop/core/src/desktop/js/ko/components/assist/ko.assistDbPanel.js

@@ -37,7 +37,7 @@ import {
   SHOW_LEFT_ASSIST_EVENT
 } from './events';
 
-import { NAME as ASSIST_KEY_COMPONENT_NAME } from './ko.assistKey';
+import { ASSIST_KEY_COMPONENT } from './ko.assistKey';
 
 const ASSIST_TABLE_TEMPLATES = `
   <script type="text/html" id="assist-no-database-entries">
@@ -179,12 +179,12 @@ const ASSIST_TABLE_TEMPLATES = `
       </div>
       <!-- ko if: expandable -->
       <a class="assist-entry assist-field-link" href="javascript:void(0)" data-bind="click: toggleOpen, attr: {'title': catalogEntry.getTitle(true) }, css: { 'assist-entry-left-action': navigationSettings.rightAssist }">
-        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName }, text: catalogEntry.getDisplayName(), draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName } }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT_NAME}', params: catalogEntry } --><!-- /ko --><!-- /ko -->
+        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName }, text: catalogEntry.getDisplayName(), draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName } }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT}', params: { entry: catalogEntry } } --><!-- /ko --><!-- /ko -->
       </a>
       <!-- /ko -->
       <!-- ko ifnot: expandable -->
       <div class="assist-entry assist-field-link default-cursor" href="javascript:void(0)" data-bind="event: { dblclick: dblClick }, attr: {'title': catalogEntry.getTitle(true) }, css: { 'assist-entry-left-action': navigationSettings.rightAssist }">
-        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName}, text: catalogEntry.getDisplayName(), draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName} }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT_NAME}', params: catalogEntry } --><!-- /ko --><!-- /ko -->
+        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName}, text: catalogEntry.getDisplayName(), draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName} }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT}', params: { entry: catalogEntry } } --><!-- /ko --><!-- /ko -->
       </div>
       <!-- /ko -->
       <div class="center assist-spinner" data-bind="visible: loading"><i class="fa fa-spinner fa-spin"></i></div>
@@ -202,13 +202,13 @@ const ASSIST_TABLE_TEMPLATES = `
       <!-- ko if: expandable -->
       <a class="assist-entry assist-field-link assist-field-link-dark assist-entry-left-action assist-ellipsis" href="javascript:void(0)" data-bind="click: toggleOpen, attr: {'title': catalogEntry.getTitle(true) }">
         <span data-bind="text: catalogEntry.getType()" class="muted pull-right margin-right-20"></span>
-        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName }, text: catalogEntry.name, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName } }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT_NAME}', params: catalogEntry } --><!-- /ko --><!-- /ko -->
+        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName }, text: catalogEntry.name, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName } }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT}', params: { entry: catalogEntry } } --><!-- /ko --><!-- /ko -->
       </a>
       <!-- /ko -->
       <!-- ko ifnot: expandable -->
       <div class="assist-entry assist-field-link assist-field-link-dark default-cursor assist-ellipsis" href="javascript:void(0)" data-bind="event: { dblclick: dblClick }, attr: {'title': catalogEntry.getTitle(true) }, css: { 'assist-entry-left-action': navigationSettings.rightAssist }">
         <span data-bind="text: catalogEntry.getType()" class="muted pull-right margin-right-20"></span>
-        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName}, text: catalogEntry.name, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName} }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT_NAME}', params: catalogEntry } --><!-- /ko --><!-- /ko -->
+        <span class="highlightable" data-bind="css: { 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName}, text: catalogEntry.name, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName} }"></span><!-- ko if: catalogEntry.isKey() --> <!-- ko component: { name: '${ASSIST_KEY_COMPONENT}', params: { entry: catalogEntry } } --><!-- /ko --><!-- /ko -->
       </div>
       <!-- /ko -->
       <div class="center assist-spinner" data-bind="visible: loading"><i class="fa fa-spinner fa-spin"></i></div>

+ 28 - 14
desktop/core/src/desktop/js/ko/components/assist/ko.assistKey.js

@@ -23,10 +23,10 @@ import { ASSIST_DB_HIGHLIGHT_EVENT } from './events';
 
 import 'ko/bindings/ko.tooltip';
 
-export const NAME = 'hue-assist-key';
+export const ASSIST_KEY_COMPONENT = 'hue-assist-key';
 
 const TEMPLATE = `
-  <!-- ko if: entry.definition.foreignKey -->
+  <!-- ko if: entry.isForeignKey() -->
     <!-- ko if: entry.definition.foreignKey.to -->
       <a class="assist-field-link" style="padding: 0 2px;" href="javascript: void(0);" data-bind="
           tooltip: {
@@ -34,33 +34,43 @@ const TEMPLATE = `
             html: true,
             placement: 'bottom'
           },
-          click: highlight
+          click: foreignKeyClick
         "><i class="fa fa-key"></i></a>
     <!-- /ko -->
+    <!-- ko ifnot: entry.definition.foreignKey.to -->
+      <i class="fa fa-key" style="padding: 0 2px;" data-bind="
+          tooltip: {
+            title: '${I18n('Foreign Key')}',
+            placement: 'bottom'
+          }
+        "></i>
+    <!-- /ko -->
   <!-- /ko -->
-  <!-- ko if: entry.definition.primaryKey -->
+  <!-- ko if: entry.isPrimaryKey() || entry.isPartitionKey() -->
     <i class="fa fa-key" style="padding: 0 2px;" data-bind="
         tooltip: {
-          title: '${I18n('Primary Key')}',
+          title: entry.isPrimaryKey() ? '${I18n('Primary Key')}' : '${I18n('Partition Key')}',
           placement: 'bottom'
-        }"></i>
+        }
+      "></i>
   <!-- /ko -->
-  <!-- ko ifnot: entry.definition.foreignKey || entry.definition.primaryKey -->
-  <i class="fa fa-key"></i>
+  <!-- ko ifnot: entry.isForeignKey() || entry.isPrimaryKey() || entry.isPartitionKey() -->
+    <i class="fa fa-key"></i>
   <!-- /ko -->
 `;
 
 class AssistKey {
-  constructor(entry) {
-    this.entry = entry;
+  constructor(params) {
+    this.entry = params.entry;
+    this.onForeignKeyClick = params.onForeignKeyClick;
 
     this.foreignKeyTooltipHtml = ko.pureComputed(
       () => `<i style="margin-right: 4px" class="fa fa-arrow-right"></i>
-    ${entry.definition.foreignKey && entry.definition.foreignKey.to}`
+    ${this.entry.definition.foreignKey && this.entry.definition.foreignKey.to}`
     );
   }
 
-  highlight(entry, event) {
+  foreignKeyClick() {
     this.entry.dataCatalog
       .getEntry({
         path: this.entry.definition.foreignKey.to,
@@ -68,9 +78,13 @@ class AssistKey {
         compute: this.entry.compute
       })
       .then(entry => {
-        huePubSub.publish(ASSIST_DB_HIGHLIGHT_EVENT, entry);
+        if (this.onForeignKeyClick) {
+          this.onForeignKeyClick(entry);
+        } else {
+          huePubSub.publish(ASSIST_DB_HIGHLIGHT_EVENT, entry);
+        }
       });
   }
 }
 
-componentUtils.registerComponent(NAME, AssistKey, TEMPLATE);
+componentUtils.registerComponent(ASSIST_KEY_COMPONENT, AssistKey, TEMPLATE);

+ 6 - 3
desktop/core/src/desktop/js/ko/components/assist/ko.assistKey.test.js

@@ -17,7 +17,7 @@
 import 'ext/bootstrap.2.3.2.min';
 
 import { koSetup } from 'jest/koTestUtils';
-import { NAME } from './ko.assistKey';
+import { ASSIST_KEY_COMPONENT } from './ko.assistKey';
 
 describe('ko.assistKey.js', () => {
   const setup = koSetup();
@@ -26,9 +26,12 @@ describe('ko.assistKey.js', () => {
     const entry = {
       definition: {
         primaryKey: true
-      }
+      },
+      isPrimaryKey: () => true,
+      isForeignKey: () => false,
+      isPartitionKey: () => false
     };
-    const element = await setup.renderComponent(NAME, entry);
+    const element = await setup.renderComponent(ASSIST_KEY_COMPONENT, { entry: entry });
 
     expect(element.innerHTML).toMatchSnapshot();
   });

+ 4 - 0
desktop/core/src/desktop/js/ko/components/contextPopover/dataCatalogContext.js

@@ -77,6 +77,10 @@ class DataCatalogContext {
     self.load();
   }
 
+  setEntry(entry) {
+    this.catalogEntry(entry);
+  }
+
   refresh() {
     const self = this;
     self

+ 4 - 9
desktop/core/src/desktop/js/ko/components/contextPopover/ko.contextPopover.js

@@ -31,6 +31,7 @@ import LangRefContext from './langRefContext';
 import PartitionContext, { PARTITION_CONTEXT_TEMPLATE } from './partitionContext';
 import ResizeHelper from './resizeHelper';
 import StorageContext from './storageContext';
+import { ASSIST_KEY_COMPONENT } from 'ko/components/assist/ko.assistKey';
 import componentUtils from 'ko/components/componentUtils';
 import { GET_KNOWN_CONFIG_EVENT } from 'utils/hueConfig';
 
@@ -288,15 +289,9 @@ const SUPPORT_TEMPLATES = `
           <!-- ko with: catalogEntry -->
           <!-- ko if: isField() -->
           (<span data-bind="text: getType()"></span>)
-          <i class="fa fa-key" title="${I18n(
-            'Primary key'
-          )}" data-bind="visible: isPrimaryKey()"></i>
-          <i class="fa fa-key" title="${I18n(
-            'Partition key'
-          )}" data-bind="visible: isPartitionKey()"></i>
-          <i class="fa fa-key" title="${I18n(
-            'Foreign key'
-          )}" data-bind="visible: isForeignKey()"></i>
+          <!-- ko if: isKey() -->
+            <!-- ko component: { name: '${ ASSIST_KEY_COMPONENT }', params: { entry: $data, onForeignKeyClick: $parents[1].setEntry.bind($parents[1]) } } --><!-- /ko -->
+          <!-- /ko -->
           <!-- /ko -->
           <!-- /ko -->
         </div>