Browse Source

[frontend] Move hue-base-url from attribute to a shared configure function in the SQL Scratchpad components

Johan Ahlen 4 years ago
parent
commit
f3dafacc67

+ 25 - 0
desktop/core/src/desktop/js/apps/editor/components/QueryEditorWebComponents.d.ts

@@ -0,0 +1,25 @@
+// 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.
+
+export interface HueComponentConfig {
+  baseUrl?: string;
+}
+
+declare const _default: {
+  configure: (config: HueComponentConfig) => void;
+};
+
+export default _default;

+ 13 - 18
desktop/core/src/desktop/js/apps/editor/components/QueryEditorWebComponent.ts → desktop/core/src/desktop/js/apps/editor/components/QueryEditorWebComponents.ts

@@ -22,24 +22,19 @@ import ExecutableProgressBar from './ExecutableProgressBar.vue';
 import ResultTable from './result/ResultTable.vue';
 import ResultTable from './result/ResultTable.vue';
 import { wrap } from 'vue/webComponentWrap';
 import { wrap } from 'vue/webComponentWrap';
 
 
-const registerBaseUrl = (element: HTMLElement): void => {
-  const hueBaseUrl = element.getAttribute('hue-base-url');
-  if (hueBaseUrl) {
-    axios.defaults.baseURL = hueBaseUrl;
+wrap('query-editor', AceEditor);
+wrap('query-editor-actions', ExecutableActions);
+wrap('query-editor-progress-bar', ExecutableProgressBar);
+wrap('query-editor-result-table', ResultTable);
+
+export interface HueComponentConfig {
+  baseUrl?: string;
+}
+
+const configure = (config: HueComponentConfig): void => {
+  if (config.baseUrl) {
+    axios.defaults.baseURL = config.baseUrl;
   }
   }
 };
 };
 
 
-const components = [
-  { tag: 'query-editor', component: AceEditor },
-  { tag: 'query-editor-actions', component: ExecutableActions },
-  { tag: 'query-editor-progress-bar', component: ExecutableProgressBar },
-  { tag: 'query-editor-result-table', component: ResultTable }
-];
-
-components.forEach(({ tag, component }) => {
-  wrap(tag, component, {
-    connectedCallback() {
-      registerBaseUrl(this as HTMLElement);
-    }
-  });
-});
+export default { configure };

+ 2 - 2
docs/docs-site/content/developer/components/_index.md

@@ -66,11 +66,11 @@ Here is an example on how to use the er-diagram component once installed:
 
 
 er-diagram can be imported into an html file using a simple script tag as follows.
 er-diagram can be imported into an html file using a simple script tag as follows.
 
 
-    <script type = "text/javascript" src="node_modules/gethue/lib/components/er-diagram.js"></script>
+    <script type = "text/javascript" src="node_modules/gethue/lib/components/ErDiagram.js"></script>
 
 
 If you are using a bundler like webpack. They can be imported using a normal import statement.
 If you are using a bundler like webpack. They can be imported using a normal import statement.
 
 
-    import 'gethue/lib/components/er-diagram';
+    import 'gethue/lib/components/ErDiagram';
 
 
 ### Instantiate
 ### Instantiate
 
 

+ 2 - 2
tools/examples/components/sql-scratchpad/package-lock.json

@@ -76,6 +76,7 @@
         "@babel/plugin-syntax-dynamic-import": "7.8.3",
         "@babel/plugin-syntax-dynamic-import": "7.8.3",
         "@babel/preset-env": "7.10.2",
         "@babel/preset-env": "7.10.2",
         "@babel/preset-typescript": "7.10.1",
         "@babel/preset-typescript": "7.10.1",
+        "@types/file-saver": "^2.0.1",
         "@types/jest": "26.0.0",
         "@types/jest": "26.0.0",
         "@types/jquery": "3.5.0",
         "@types/jquery": "3.5.0",
         "@types/knockout": "3.4.67",
         "@types/knockout": "3.4.67",
@@ -116,7 +117,6 @@
         "load-grunt-tasks": "4.0.0",
         "load-grunt-tasks": "4.0.0",
         "markdown": "0.5.0",
         "markdown": "0.5.0",
         "node-sass": "4.14.1",
         "node-sass": "4.14.1",
-        "npm-dts-webpack-plugin": "1.3.7",
         "prettier": "2.0.5",
         "prettier": "2.0.5",
         "sass-loader": "8.0.2",
         "sass-loader": "8.0.2",
         "source-map-loader": "1.0.0",
         "source-map-loader": "1.0.0",
@@ -28336,6 +28336,7 @@
         "@babel/plugin-syntax-dynamic-import": "7.8.3",
         "@babel/plugin-syntax-dynamic-import": "7.8.3",
         "@babel/preset-env": "7.10.2",
         "@babel/preset-env": "7.10.2",
         "@babel/preset-typescript": "7.10.1",
         "@babel/preset-typescript": "7.10.1",
+        "@types/file-saver": "^2.0.1",
         "@types/jest": "26.0.0",
         "@types/jest": "26.0.0",
         "@types/jquery": "3.5.0",
         "@types/jquery": "3.5.0",
         "@types/knockout": "3.4.67",
         "@types/knockout": "3.4.67",
@@ -28402,7 +28403,6 @@
         "medium-editor": "5.23.3",
         "medium-editor": "5.23.3",
         "mustache": "4.1.0",
         "mustache": "4.1.0",
         "node-sass": "4.14.1",
         "node-sass": "4.14.1",
-        "npm-dts-webpack-plugin": "1.3.7",
         "page": "1.8.6",
         "page": "1.8.6",
         "plotly.js-dist": "1.45.3",
         "plotly.js-dist": "1.45.3",
         "prettier": "2.0.5",
         "prettier": "2.0.5",

+ 0 - 1
tools/examples/components/sql-scratchpad/src/components/ExecuteActions.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import React, { FC } from 'react';
 
 
-import 'gethue/lib/components/query-editor-components';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 
 export interface ExecuteActionsProps {
 export interface ExecuteActionsProps {

+ 0 - 1
tools/examples/components/sql-scratchpad/src/components/ExecuteProgress.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import React, { FC } from 'react';
 
 
-import 'gethue/lib/components/query-editor-components';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 
 export interface ExecuteProgressProps {
 export interface ExecuteProgressProps {

+ 0 - 2
tools/examples/components/sql-scratchpad/src/components/QueryEditor.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from 'react';
 import React, { FC } from 'react';
 
 
-import 'gethue/lib/components/query-editor-components';
-
 import hiveSyntaxParser from 'gethue/lib/parsers/hiveSyntaxParser';
 import hiveSyntaxParser from 'gethue/lib/parsers/hiveSyntaxParser';
 import hiveAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';
 import hiveAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';
 import Executor from 'gethue/lib/execution/executor';
 import Executor from 'gethue/lib/execution/executor';

+ 0 - 1
tools/examples/components/sql-scratchpad/src/components/ResultTable.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import React, { FC } from 'react';
 
 
-import 'gethue/lib/components/query-editor-components';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 
 export interface ResultTableProps {
 export interface ResultTableProps {

+ 5 - 1
tools/examples/components/sql-scratchpad/src/components/SqlScratchpad.tsx

@@ -1,6 +1,6 @@
 import React, {FC, useState} from 'react';
 import React, {FC, useState} from 'react';
 
 
-import 'gethue/lib/components/query-editor-components';
+import hueComponents from 'gethue/lib/components/QueryEditorWebComponents';
 
 
 import Executor from 'gethue/lib/execution/executor';
 import Executor from 'gethue/lib/execution/executor';
 
 
@@ -10,6 +10,10 @@ import { ExecuteProgress } from './ExecuteProgress';
 import { ResultTable } from './ResultTable';
 import { ResultTable } from './ResultTable';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
 
+hueComponents.configure({
+  baseUrl: 'http://localhost:1234/'
+});
+
 const executor = new Executor({
 const executor = new Executor({
   compute: (() => ({ id: 'default' })) as KnockoutObservable<any>,
   compute: (() => ({ id: 'default' })) as KnockoutObservable<any>,
   connector: (() => ({
   connector: (() => ({

+ 17 - 4
webpack.config.npm.js

@@ -62,13 +62,26 @@ const libConfig = Object.assign({}, defaultConfig, {
 
 
 const webComponentsConfig = Object.assign({}, defaultConfig, {
 const webComponentsConfig = Object.assign({}, defaultConfig, {
   entry: {
   entry: {
-    'er-diagram': [`${JS_ROOT}/components/er-diagram/webcomp.ts`],
-    'query-editor-components': [`${JS_ROOT}/apps/editor/components/QueryEditorWebComponent.ts`]
+    ErDiagram: [`${JS_ROOT}/components/er-diagram/webcomp.ts`],
+    QueryEditorWebComponents: [`${JS_ROOT}/apps/editor/components/QueryEditorWebComponents.ts`]
   },
   },
   output: {
   output: {
-    path: `${DIST_DIR}/lib/components`
+    path: `${DIST_DIR}/lib/components`,
+    library: '[name]',
+    libraryExport: 'default',
+    libraryTarget: 'umd'
   },
   },
-  plugins: [new VueLoaderPlugin()]
+  plugins: [
+    new VueLoaderPlugin(),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: `${JS_ROOT}/apps/editor/components/QueryEditorWebComponents.d.ts`,
+          to: `${DIST_DIR}/lib/components`
+        }
+      ]
+    })
+  ]
 });
 });
 
 
 const parserConfig = Object.assign({}, defaultConfig, {
 const parserConfig = Object.assign({}, defaultConfig, {