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

[frontend] Update the SQL Scratchpad example to use the published gethue NPM version

Johan Ahlen 4 жил өмнө
parent
commit
8feb5ceefa

+ 20 - 6
tools/examples/components/sql-scratchpad/README.md

@@ -5,7 +5,7 @@ create a SQL Scratchpad.
 
 It's based on a clean create-react-app project, relevant changes are:
 
-- gethue dependency in package.json, note that this can also be pulled in from the npm repo by specifing a version > 4.9)
+- gethue dependency in package.json, tested with version 4.9.3
 - "components" folder with React wrappers around the Hue web components
 - App.tsx using the React wrappers
 
@@ -18,17 +18,31 @@ We wrap the web components to be able to set certain attributes/properties on th
   [desktop]
     cors_enabled=true
 ```
-2. Make sure Hue has a "hue" user with the password "hue" (this will be improved soon)
-3. Go to the Hue root folder `cd ../../../../`
+2. Go to the example project `cd tools/examples/components/sql-scratchpad`
+3. `npm install`
+4. `npm start`
+5. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+To kill it press `ctrl-c` in the terminal
+
+## To use this project while developing the Hue NPM package,
+
+1. In the SQL Scratchpad project change the "gethue" dependency in `package.json` to 
+   ```
+   "gethue": "file:../../../../npm_dist",
+   ```
+2. Go to the Hue root folder `cd ../../../../`
 4. `npm install`
-5. `npm run webpack-npm`
+5. `npm run dev-webpack-npm`
 6. Go to the example project `cd tools/examples/components/sql-scratchpad`
 7. `npm install`
 8. `npm start`
-9. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+It will monitor changes of the related Hue sources and update npm_dist when needed, if the 
+SQL Scratchpad project doesn't pick up the changes a restart of the app might be needed.
 
 ## Base project creation steps (for reference)
 
 1. `npx create-react-app sql-scratchpad --template typescript`
 2. add `"gethue": "file:../../../../npm_dist"` to dependencies in package.json
-3. add `SKIP_PREFLIGHT_CHECK=true` to .env (required when running inside nested Hue folder)
+3. add `SKIP_PREFLIGHT_CHECK=true` to .env (required when running inside nested Hue folder)

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

@@ -14,7 +14,7 @@
         "@types/node": "^12.20.4",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.1",
-        "gethue": "file:../../../../npm_dist",
+        "gethue": "4.9.3",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-scripts": "4.0.3",
@@ -24,7 +24,7 @@
     },
     "../../../../npm_dist": {
       "name": "gethue",
-      "version": "4.9.0",
+      "version": "4.9.3",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/lodash": "^4.14.161",
@@ -1965,7 +1965,6 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
-        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -5214,7 +5213,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7154,8 +7152,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "optionator": "^0.8.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -11035,7 +11032,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -12474,7 +12470,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
-        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -16032,7 +16027,6 @@
         "eslint-webpack-plugin": "^2.5.2",
         "file-loader": "6.1.1",
         "fs-extra": "^9.0.1",
-        "fsevents": "^2.1.3",
         "html-webpack-plugin": "4.5.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "26.6.0",
@@ -19515,10 +19509,8 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
-        "watchpack-chokidar2": "^2.0.1"
+        "neo-async": "^2.5.0"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -19608,7 +19600,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -20045,7 +20036,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -20573,9 +20563,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -21049,9 +21036,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }

+ 1 - 1
tools/examples/components/sql-scratchpad/package.json

@@ -10,7 +10,7 @@
     "@types/node": "^12.20.4",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
-    "gethue": "file:../../../../npm_dist",
+    "gethue": "4.9.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
+import SqlExecutable from 'gethue/apps/editor/execution/sqlExecutable';
 
 export interface ExecuteButtonProps {
   activeExecutable?: SqlExecutable
@@ -25,4 +25,4 @@ export const ExecuteButton: FC<ExecuteButtonProps> = React.memo(({ activeExecuta
       }
     }
   />
-});
+});

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
+import SqlExecutable from 'gethue/apps/editor/execution/sqlExecutable';
 
 export interface ExecuteLimitProps {
   activeExecutable?: SqlExecutable
@@ -25,4 +25,4 @@ export const ExecuteLimit: FC<ExecuteLimitProps> = React.memo(({ activeExecutabl
       }
     }
   />
-});
+});

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
+import SqlExecutable from 'gethue/apps/editor/execution/sqlExecutable';
 
 export interface ExecuteProgressProps {
   activeExecutable?: SqlExecutable
@@ -25,4 +25,4 @@ export const ExecuteProgress: FC<ExecuteProgressProps> = React.memo(({ activeExe
       }
     }
   />
-});
+});

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

@@ -3,9 +3,9 @@ import React, { FC } from 'react';
 import hiveSyntaxParser from 'gethue/lib/parsers/hiveSyntaxParser';
 import hiveAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';
 import Executor from 'gethue/lib/execution/executor';
-import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
-import { SetOptions, SqlReferenceProvider, UdfCategory } from 'gethue/src/sql/reference/types'
-import { ActiveStatementChangedEvent } from 'gethue/src/apps/editor/components/aceEditor/types';
+import SqlExecutable from 'gethue/apps/editor/execution/sqlExecutable';
+import { SetOptions, SqlReferenceProvider, UdfCategory } from 'gethue/sql/reference/types'
+import { ActiveStatementChangedEvent } from 'gethue/apps/editor/components/aceEditor/types';
 
 const sqlReferenceProvider: SqlReferenceProvider = {
   async getReservedKeywords(dialect: string): Promise<Set<string>> {
@@ -60,7 +60,7 @@ export const QueryEditor: FC<QueryEditorProps> = React.memo(({ executor, id, set
     executor.update(activeStatementChangedEvent.detail, false);
     setActiveExecutable(executor.activeExecutable);
   })
-  
+
   //nodeElement.addEventListener('value-changed', event => {
   //  // event.detail contains the value
   //})
@@ -91,4 +91,4 @@ export const QueryEditor: FC<QueryEditorProps> = React.memo(({ executor, id, set
       }
     }
   />;
-});
+});

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
+import SqlExecutable from 'gethue/apps/editor/execution/sqlExecutable';
 
 export interface ResultTableProps {
   activeExecutable?: SqlExecutable
@@ -25,4 +25,4 @@ export const ResultTable: FC<ResultTableProps> = React.memo(({ activeExecutable
       }
     }
   />
-})
+})

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

@@ -3,12 +3,12 @@ import React from 'react';
 import hueComponents from 'gethue/lib/components/QueryEditorWebComponents';
 import hueConfig from 'gethue/lib/config/hueConfig';
 import Executor from 'gethue/lib/execution/executor';
+import SqlExecutable from 'gethue/apps/editor/execution/sqlExecutable';
 
 import { QueryEditor } from './QueryEditor';
 import { ExecuteButton } from './ExecuteButton';
 import { ExecuteProgress } from './ExecuteProgress';
 import { ResultTable } from './ResultTable';
-import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 import {ExecuteLimit} from "./ExecuteLimit";
 
 const HUE_BASE_URL = 'http://localhost:8888'
@@ -80,4 +80,4 @@ export class SqlScratchpad extends React.Component<{}, SqlScratchpadState> {
       return <div>Loading Config...</div>
     }
   }
-}
+}