diff --git a/.github/workflows/pr_to_gh_page_repo.yml b/.github/workflows/pr_to_gh_page_repo.yml new file mode 100644 index 000000000..9269c9b77 --- /dev/null +++ b/.github/workflows/pr_to_gh_page_repo.yml @@ -0,0 +1,59 @@ +name: PR To GitHub Page Repo + +on: + push: + branches: + - react-website + +jobs: + send-pull-requests: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Build Bundle + run: | + npm i + npm run build + + - name: copy Bundle + run: | + mkdir -p ~/artifact + cp dist/*.wasm ~/artifact + cp dist/*.js ~/artifact + cp dist/*.txt ~/artifact + ls ~/artifact >> $GITHUB_STEP_SUMMARY + + - name: checkout github page repo + uses: actions/checkout@v4 + with: + repository: 'partiql/partiql.github.io' + ref: 'main' + token: ${{ secrets.ACTION_TOKEN }} + + - name: port changes + run: | + # Setup the committers identity. + git config user.email "partiql-dev@amazon.com" + git config user.name "PartiQL Team" + + # port in the changes + rm -r ui/src/static + mkdir ui/src/static + cp ~/artifact/*.wasm ui/src/static + cp ~/artifact/*.js ui/src/static + cp ~/artifact/playground.js.LICENSE.txt ui/playground.js.LICENSE.txt + + git add . + + - name: create pull-request + uses: peter-evans/create-pull-request@v5 + with: + token: ${{ secrets.ACTION_TOKEN }} + commit-message: Update report + committer: PartiQL Team + branch: update-playground + delete-branch: true + title: 'Update Playground' + body: | + Update Playground \ No newline at end of file diff --git a/Readme.md b/Readme.md index eddc1ed46..c4bcbeaa9 100644 --- a/Readme.md +++ b/Readme.md @@ -28,7 +28,6 @@ PartiQL-Rust-Playground utilized WASM(web assembly) to run PartiQL-rust in the w git checkout main -- pkg-web ``` -2. GitHub Workflow (Not yet deployed) +2. GitHub Workflow Any push towards the main branch will automatically trigger a workflow that build the wasm file and created a PR to copy the wasm file to branch `react-website` -Simple PR: https://github.com/yliuuuu/partiql-rust-playground/pull/2 diff --git a/pkg-web/README.md b/pkg-web/README.md new file mode 100644 index 000000000..96c3097e1 --- /dev/null +++ b/pkg-web/README.md @@ -0,0 +1,58 @@ +# PartiQL Playground (Proof of Concept) + +PartiQL Playground provides the functionality to execute PartiQL in a web environment. + +_Please note, at this stage, the code as is in this package is considered experimental and should not be used for production._ + +:raised_hands: Checkout the [playground](https://partiql.org/playground.html#/evaluate) now :raised_hands:. + +## Development +This Branch contains Rust Code for WASM generation. + +`PartiQL Playground` uses [WebAssembly (Wasm)](https://webassembly.org/) for integrating the front-end with PartiQL Rust back-end. + +Upon merging pull request, the GitHub action will automatically create a new pull request towards `react-website` branch. + +The `React Website` branch contains code for the experimental web application. + +To run test: +``` + +``` + +## Build and run the website application (Locally) +1. Checkout main branch and develop +2. Build the package using `make` +```commandline +make build +``` +3. Port the wasm files to `react wesbite` branch +```commandline +git checkout -b temp +make buid +rm pkg-web/.gitignore +git add . +git commit -m "adding pkg-web to git" +git checkout react-website +git checkout temp -- pkg-web +git add pkg-web +git commit -m "wasm update" +``` + +4. Build the `react website branch` +```commandline +npm i +npm run serve +``` + + +## Legacy Asset +| Branch Name | Asset | +|-------------|-----------------------------------------------------------------------------------------------------| +| Docker | A version of PartiQL Playground implementation. Additional features includes docker build Rest APIs | + +## Dependencies +| Package | License | +|------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------| +| [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) | [Apache License Version 2.0](https://github.com/rustwasm/wasm-bindgen/blob/main/LICENSE-APACHE) | +| [wasm-pack](https://github.com/rustwasm/wasm-pack) | [Apache License Version 2.0](https://github.com/rustwasm/wasm-pack/blob/master/LICENSE-APACHE) | \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 6f71075ad..26e32b49a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,11 @@ import {Navigate, Route, Routes} from 'react-router-dom'; -import React, {useContext, useEffect, useRef} from "react"; +import React from "react"; import EvalPage from "./pages/Eval"; import ExplainPage from "./pages/Explain"; import ParsePage from "./pages/Parse"; -import Topbar from "./component/Layout/Topbar"; import {createTheme, ThemeProvider} from "@mui/material/styles"; -import {Alert, Box, CssBaseline, Stack} from "@mui/material"; -import {ExportModal} from "./component/Modal/ExportModal"; -import AppContext from "./store/app-context"; +import {CssBaseline} from "@mui/material"; function App(props) { const darkTheme = createTheme({ @@ -21,7 +18,7 @@ function App(props) { - }/> + }/> }/> }/> }/> diff --git a/src/component/Editor/Editor.jsx b/src/component/Editor/Editor.jsx index e113421e1..9c6c7392e 100644 --- a/src/component/Editor/Editor.jsx +++ b/src/component/Editor/Editor.jsx @@ -28,12 +28,12 @@ export function Editor(props) { } return ( - + {(props.tag !== "result") && - - - {operation.charAt(0).toUpperCase() + operation.slice(1)} - ))}) - - + {Object.values(OPERATION).map((operation) => ( + {operation.charAt(0).toUpperCase() + operation.slice(1)} + ))}) + + diff --git a/src/component/Modal/ExportModal.jsx b/src/component/Modal/ExportModal.jsx index fc4241558..2727966a2 100644 --- a/src/component/Modal/ExportModal.jsx +++ b/src/component/Modal/ExportModal.jsx @@ -1,8 +1,8 @@ import {Alert, Box, Button, Modal, Typography} from "@mui/material"; -import React, {useContext} from "react"; +import React, {useContext, useEffect} from "react"; import AppContext from "../../store/app-context"; -import {useLocation, useSearchParams} from "react-router-dom"; -import {encodeSearchParams} from "../../util/util"; +import {useLocation} from "react-router-dom"; +import {encodeSession} from "../../util/util"; const style = { @@ -19,25 +19,21 @@ const style = { export function ExportModal(props) { const appContext = useContext(AppContext); const [open, setOpen] = React.useState(appContext.showModal); + const [url, setUrl] = React.useState('') const location = useLocation() const handleClose = () => { setOpen(false); appContext.setShowModal(false) } - function setUrl() { + useEffect(() => { const str = window.location.href, rest = str.substring(0, str.lastIndexOf("/")) - let params = {} - if (props.env !== undefined) { - params['env'] = props.env - } - if (props.query !== undefined) { - params['query'] = props.query - } - return rest + location.pathname + "?session=" + encodeSearchParams(params) - } + encodeSession(props.query, props.env).then((session) => { + setUrl(rest + location.pathname + "?session=" + session) + }) + }) return ( @@ -50,12 +46,12 @@ export function ExportModal(props) { > Do not use the link to store data. - - {setUrl()} + + {url}