ソースを参照

HUE-9263 [assist] Fix issue where the reference panels won't update after editor type change

Johan Ahlen 5 年 前
コミット
f128a19d71

+ 3 - 2
desktop/core/src/desktop/js/apps/table_browser/metastoreSource.js

@@ -22,10 +22,11 @@ import contextCatalog from 'catalog/contextCatalog';
 import huePubSub from 'utils/huePubSub';
 import MetastoreNamespace from 'apps/table_browser/metastoreNamespace';
 import {
-  ASSIST_DB_PANEL_IS_READY_EVENT, ASSIST_IS_DB_PANEL_READY_EVENT,
+  ASSIST_DB_PANEL_IS_READY_EVENT,
+  ASSIST_IS_DB_PANEL_READY_EVENT,
   ASSIST_SET_DATABASE_EVENT
 } from 'ko/components/assist/events';
-import {findConnector} from "../../utils/hueConfig";
+import { findConnector } from '../../utils/hueConfig';
 
 class MetastoreSource {
   constructor(options) {

+ 13 - 26
desktop/core/src/desktop/js/ko/components/assist/ko.assistFunctionsPanel.js

@@ -22,11 +22,8 @@ import huePubSub from 'utils/huePubSub';
 import { PigFunctions, SqlFunctions } from 'sql/sqlFunctions';
 import I18n from 'utils/i18n';
 import { CONFIG_REFRESHED_EVENT, filterConnectors } from 'utils/hueConfig';
-import {
-  ACTIVE_SNIPPET_CONNECTOR_CHANGED_EVENT,
-  GET_ACTIVE_SNIPPET_CONNECTOR_EVENT
-} from 'apps/notebook2/events';
 
+export const NAME = 'assist-functions-panel';
 // prettier-ignore
 const TEMPLATE = `
   <div class="assist-inner-panel">
@@ -87,9 +84,10 @@ const TEMPLATE = `
 `;
 
 class AssistFunctionsPanel {
-  constructor() {
+  constructor(params) {
     this.categories = {};
-    this.disposals = [];
+
+    this.connector = params.connector;
 
     this.activeDialect = ko.observable();
     this.availableDialects = ko.observableArray();
@@ -98,6 +96,7 @@ class AssistFunctionsPanel {
     this.selectedFunction = ko.observable();
 
     const selectedFunctionPeDialect = {};
+
     this.selectedFunction.subscribe(newFunction => {
       if (newFunction) {
         selectedFunctionPeDialect[this.activeDialect()] = newFunction;
@@ -172,12 +171,11 @@ class AssistFunctionsPanel {
       });
     };
 
-    const activeSnippetDialectSub = huePubSub.subscribe(
-      ACTIVE_SNIPPET_CONNECTOR_CHANGED_EVENT,
-      connector => {
+    this.connector.subscribe(connector => {
+      if (connector) {
         updateDialect(connector.dialect);
       }
-    );
+    });
 
     const configUpdated = async () => {
       const lastActiveDialect =
@@ -212,24 +210,13 @@ class AssistFunctionsPanel {
           this.availableDialects().length ? this.availableDialects()[0] : undefined
         );
       }
-      huePubSub.publish(GET_ACTIVE_SNIPPET_CONNECTOR_EVENT, connector => {
-        updateDialect(connector.dialect);
-      });
+      if (this.connector()) {
+        updateDialect(this.connector().dialect);
+      }
     };
 
     configUpdated();
-    const configSub = huePubSub.subscribe(CONFIG_REFRESHED_EVENT, configUpdated);
-
-    this.disposals.push(() => {
-      activeSnippetDialectSub.remove();
-      configSub.remove();
-    });
-  }
-
-  dispose() {
-    this.disposals.forEach(dispose => {
-      dispose();
-    });
+    huePubSub.subscribe(CONFIG_REFRESHED_EVENT, configUpdated);
   }
 
   initFunctions(dialect) {
@@ -262,6 +249,6 @@ class AssistFunctionsPanel {
   }
 }
 
-componentUtils.registerStaticComponent('assist-functions-panel', AssistFunctionsPanel, TEMPLATE);
+componentUtils.registerStaticComponent(NAME, AssistFunctionsPanel, TEMPLATE);
 
 export default AssistFunctionsPanel;

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

@@ -14,6 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import $ from 'jquery';
+import * as ko from 'knockout';
 
 import AssistFunctionsPanel from './ko.assistFunctionsPanel';
 import apiHelper from 'api/apiHelper';
@@ -40,7 +41,8 @@ describe('ko.assistFunctionsPanel.js', () => {
         .promise()
     );
     await refreshConfig();
-    const subject = new AssistFunctionsPanel();
+    const connector = ko.observable({ dialect: 'impala' });
+    const subject = new AssistFunctionsPanel({ connector: connector });
     await sleep(0);
 
     expect(spy).toHaveBeenCalled();
@@ -68,7 +70,5 @@ describe('ko.assistFunctionsPanel.js', () => {
 
     expect(subject.availableDialects()).toEqual(['pig']);
     expect(subject.activeDialect()).toEqual('pig');
-
-    subject.dispose();
   });
 });

+ 44 - 70
desktop/core/src/desktop/js/ko/components/assist/ko.assistLangRefPanel.js

@@ -22,12 +22,10 @@ import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import { GET_KNOWN_CONFIG_EVENT, CONFIG_REFRESHED_EVENT, filterConnectors } from 'utils/hueConfig';
 import { simpleGet } from 'api/apiUtils';
-import {
-  ACTIVE_SNIPPET_CONNECTOR_CHANGED_EVENT,
-  GET_ACTIVE_SNIPPET_CONNECTOR_EVENT
-} from 'apps/notebook2/events';
 import { ASSIST_LANG_REF_PANEL_SHOW_TOPIC_EVENT } from './events';
 
+export const NAME = 'assist-language-reference-panel';
+
 // prettier-ignore
 const TEMPLATE = `
   <script type="text/html" id="language-reference-topic-tree">
@@ -128,7 +126,8 @@ class LanguageReferenceTopic {
 
 class AssistLangRefPanel {
   constructor(params, element) {
-    this.disposals = [];
+    this.connector = params.connector;
+
     this.availableDialects = ko.observableArray();
     this.activeDialect = ko.observable();
 
@@ -150,14 +149,13 @@ class AssistLangRefPanel {
       }
     };
 
-    const activeSnippetDialectSub = huePubSub.subscribe(
-      ACTIVE_SNIPPET_CONNECTOR_CHANGED_EVENT,
-      connector => {
+    this.connector.subscribe(connector => {
+      if (connector) {
         updateDialect(connector.dialect);
       }
-    );
+    });
 
-    const configUpdated = async config => {
+    const configUpdated = async () => {
       const lastActiveDialect = this.activeDialect();
 
       const configuredDialects = (await filterConnectors(
@@ -179,31 +177,23 @@ class AssistLangRefPanel {
     };
 
     huePubSub.publish(GET_KNOWN_CONFIG_EVENT, configUpdated);
-    const configSub = huePubSub.subscribe(CONFIG_REFRESHED_EVENT, configUpdated);
-
-    this.disposals.push(() => {
-      configSub.remove();
-      activeSnippetDialectSub.remove();
-    });
+    huePubSub.subscribe(CONFIG_REFRESHED_EVENT, configUpdated);
 
-    huePubSub.publish(GET_ACTIVE_SNIPPET_CONNECTOR_EVENT, connector => {
-      updateDialect(connector.dialect);
-    });
+    if (this.connector()) {
+      updateDialect(this.connector().dialect);
+    }
 
-    this.topics = ko.pureComputed(() => {
-      return this.activeDialect() ? this.allTopics[this.activeDialect()] : [];
-    });
+    this.topics = ko.pureComputed(() =>
+      this.activeDialect() ? this.allTopics[this.activeDialect()] : []
+    );
 
     this.selectedTopic = ko.observable();
 
-    const selectedSub = this.selectedTopic.subscribe(newTopic => {
+    this.selectedTopic.subscribe(newTopic => {
       if (newTopic) {
         newTopic.load();
       }
     });
-    this.disposals.push(() => {
-      selectedSub.dispose();
-    });
 
     this.query = ko.observable().extend({ throttle: 200 });
     this.filteredTopics = ko.observableArray();
@@ -272,13 +262,13 @@ class AssistLangRefPanel {
       }, 0);
     });
 
-    const selectedTopicSub = this.selectedTopic.subscribe(() => {
+    this.selectedTopic.subscribe(() => {
       $(element)
         .find('.assist-docs-details')
         .scrollTop(0);
     });
 
-    const querySub = this.query.subscribe(() => {
+    this.query.subscribe(() => {
       $(element)
         .find('.assist-docs-topics')
         .scrollTop(0);
@@ -309,36 +299,33 @@ class AssistLangRefPanel {
 
     huePubSub.subscribe('scroll.test', scrollToSelectedTopic);
 
-    const showTopicSub = huePubSub.subscribe(
-      ASSIST_LANG_REF_PANEL_SHOW_TOPIC_EVENT,
-      targetTopic => {
-        const topicStack = [];
-        const findTopic = topics => {
-          topics.some(topic => {
-            topicStack.push(topic);
-            if (topic.ref === targetTopic.ref) {
-              while (topicStack.length) {
-                topicStack.pop().open(true);
-              }
-              this.query('');
-              this.selectedTopic(topic);
-              window.setTimeout(() => {
-                scrollToAnchor(targetTopic.anchorId);
-                scrollToSelectedTopic();
-              }, 0);
+    huePubSub.subscribe(ASSIST_LANG_REF_PANEL_SHOW_TOPIC_EVENT, targetTopic => {
+      const topicStack = [];
+      const findTopic = topics => {
+        topics.some(topic => {
+          topicStack.push(topic);
+          if (topic.ref === targetTopic.ref) {
+            while (topicStack.length) {
+              topicStack.pop().open(true);
+            }
+            this.query('');
+            this.selectedTopic(topic);
+            window.setTimeout(() => {
+              scrollToAnchor(targetTopic.anchorId);
+              scrollToSelectedTopic();
+            }, 0);
+            return true;
+          } else if (topic.children.length) {
+            const inChild = findTopic(topic.children);
+            if (inChild) {
               return true;
-            } else if (topic.children.length) {
-              const inChild = findTopic(topic.children);
-              if (inChild) {
-                return true;
-              }
             }
-            topicStack.pop();
-          });
-        };
-        findTopic(this.topics());
-      }
-    );
+          }
+          topicStack.pop();
+        });
+      };
+      findTopic(this.topics());
+    });
 
     $(element).on('click.langref', event => {
       if (event.target.className === 'hue-doc-internal-link') {
@@ -348,24 +335,11 @@ class AssistLangRefPanel {
         });
       }
     });
-
-    this.disposals.push(() => {
-      selectedTopicSub.dispose();
-      querySub.dispose();
-      showTopicSub.remove();
-      $(element).off('click.langref');
-    });
-  }
-
-  dispose() {
-    while (this.disposals.length) {
-      this.disposals.pop()();
-    }
   }
 }
 
 componentUtils.registerStaticComponent(
-  'assist-language-reference-panel',
+  NAME,
   {
     createViewModel: (params, componentInfo) =>
       new AssistLangRefPanel(params, componentInfo.element)

+ 4 - 3
desktop/core/src/desktop/js/ko/components/assist/ko.assistLangRefPanel.test.js

@@ -14,6 +14,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import * as ko from 'knockout';
+
 import AssistLangRefPanel from './ko.assistLangRefPanel';
 import apiHelper from 'api/apiHelper';
 import $ from 'jquery';
@@ -40,7 +42,8 @@ describe('ko.assistLangRefPanel.js', () => {
         .promise()
     );
     await refreshConfig();
-    const subject = new AssistLangRefPanel();
+    const connector = ko.observable({ dialect: 'impala' });
+    const subject = new AssistLangRefPanel({ connector: connector });
     await sleep(0);
 
     expect(spy).toHaveBeenCalled();
@@ -68,7 +71,5 @@ describe('ko.assistLangRefPanel.js', () => {
 
     expect(subject.availableDialects()).toEqual(['impala']);
     expect(subject.activeDialect()).toEqual('impala');
-
-    subject.dispose();
   });
 });

+ 28 - 3
desktop/core/src/desktop/js/ko/components/assist/ko.rightAssistPanel.js

@@ -61,15 +61,40 @@ const TEMPLATE = `
   <!-- ko if: visible -->
   <div class="right-assist-contents">
     <!-- ko if: editorAssistantTabAvailable-->
-    <div data-bind="component: { name: 'assist-editor-context-panel', params: { activeTab: activeTab, connector: connector } }, visible: activeTab() === 'editorAssistant'"></div>
+    <div data-bind="
+        component: { 
+          name: 'assist-editor-context-panel', 
+          params: { 
+            activeTab: activeTab, 
+            connector: connector 
+          }
+        },
+        visible: activeTab() === 'editorAssistant'
+      "></div>
     <!-- /ko -->
 
     <!-- ko if: functionsTabAvailable -->
-    <div data-bind="component: { name: 'assist-functions-panel' }, visible: activeTab() === 'functions'"></div>
+    <div data-bind="
+        component: { 
+          name: 'assist-functions-panel',
+          params: {
+            connector: connector
+          }
+        },
+        visible: activeTab() === 'functions'
+      "></div>
     <!-- /ko -->
 
     <!-- ko if: langRefTabAvailable -->
-    <div data-bind="component: { name: 'assist-language-reference-panel' }, visible: activeTab() === 'langRef'"></div>
+    <div data-bind="
+        component: {
+          name: 'assist-language-reference-panel',
+          params: {
+            connector: connector
+          }
+        },
+        visible: activeTab() === 'langRef'
+      "></div>
     <!-- /ko -->
 
     <!-- ko if: dashboardAssistantTabAvailable -->