소스 검색

[docs] Update slightly Sql Scratchpad component

Still WIP and we will update as we iterate (screnshoot, better
Scratchpad, API integration... etc)
Romain Rigaux 4 년 전
부모
커밋
ae6f5420b1
1개의 변경된 파일27개의 추가작업 그리고 2개의 파일을 삭제
  1. 27 2
      docs/docs-site/content/developer/components/scratchpad/_index.md

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

@@ -3,6 +3,31 @@ title: "SQL Scratchpad"
 draft: false
 ---
 
-The lightweight SQL Editor also called "Quick Query" comes as a [Web component](https://github.com/cloudera/hue/blob/master/desktop/core/src/desktop/js/ko/components/contextPopover/ko.quickQueryContext.js).
+The lightweight SQL Editor also called "Quick Query" comes as its own `<SqlScratchpad />` Web component.
 
-!["Mini SQL Editor component"](https://cdn.gethue.com/uploads/2020/02/quick-query-component.jpg)
+e.g.
+
+    import { SqlScratchpad } from "./components/SqlScratchpad";
+
+    function App() {
+      return (
+        <div className="app">
+          <header className="app-header">
+            <p>
+              SQL Scratchpad Example
+            </p>
+          </header>
+          <SqlScratchpad />
+        </div>
+      );
+    }
+
+
+Check the [demo app](https://github.com/cloudera/hue/tree/master/tools/examples/components/sql-scratchpad) about how to integrate it in your own Vue.js, React, JavaScript... project.
+
+Notes
+
+- Currently expects a running Hue on [http://localhost:8888](https://github.com/cloudera/hue/blob/master/tools/examples/components/sql-scratchpad/src/components/SqlScratchpad.tsx#L14)
+- The `SqlScratchpad` in itself composed of other [smaller components](https://github.com/cloudera/hue/tree/master/tools/examples/components/sql-scratchpad/src/components), e.g. QueryEditor, ExecuteButton...
+
+!["SQL Scratchpad component"](https://cdn.gethue.com/uploads/2020/02/quick-query-component.jpg)