Make QueryEditor as a reusable react component #21

koszti · 2025-09-25T16:33:57Z

Description

This PR introduces the initial version of the trino <QueryEditor> reusable react component primarily to enable the publishing workflow as an npm package. Once merged the GHA release workflow should publish the first version of the package to npm.

IMPORTANT: NPM_TOKEN github secret must be set in this github repo!

The component is already a functional Trino web query runner. However, it currently lacks configurable parameters, styling, and requires several further major refinements. These improvements will be addressed separately and incrementally after confirming that the npm publishing process works as expected. This initial version (0.0.1) is not yet recommended for production workloads. Production-ready builds and documentation will follow soon.

Example usage:

npm install trino-query-ui

it can be used in any react project (such as the main trino or the trino-gateway UI):

import { QueryEditor } from 'trino-query-ui'
import 'trino-query-ui/dist/index.css'

function MyTrinoApp() {
  return <QueryEditor />
}

export default MyTrinoApp

Additional context and related issues

No existing functionality has been changed.
All dependencies updated to latest versions and all breaking changes addressed caused by major updates
Further major refactoring will be required before it’s fully production-ready.

mosabua

First review round done .. I have to test it some more and see what you think about my input .. beyond that I think we should merge it soon so we can see if it works and then follow up with more refinements after a first release

mosabua · 2025-10-12T00:24:40Z

.github/workflows/release.yml

  release:
-    types: [created]
-  pull_request:
+    types: [published]


Why this change - compare to js client - https://github.com/trinodb/trino-js-client/blob/4a7a97298dca27cc080cd85544a75d9185c07d23/.github/workflows/release.yml#L4

This shouldn’t make a difference but according to the docs the published event seemed more accurate than created. I’ve updated the PR though to use created so the gh workflows are now consistent across both projects.

Docs:
types: [created] → fires when a release object is first created (often as a draft). But GitHub does not trigger workflows for created (or edited/deleted) if the release is a draft created via the UI.
GitHub Docs

types: [published] → fires when a release (or pre-release) is published (made visible). This is the most common choice for CI/CD on new releases."_

mosabua · 2025-10-12T00:25:33Z

README.md

 # Trino Query UI

-This Trino Query UI is a new UI component that can be integrated into Trino and run directly from the Trino installation at the `/query/` path. For testing, it can also be run separately and can proxy to a Trino running locally or elsewhere.
+A reusable React component for executing queries against Trino. It can be embedded into any react application and configured to proxy requests to a local or remote Trino cluster.


Suggested change

A reusable React component for executing queries against Trino. It can be embedded into any react application and configured to proxy requests to a local or remote Trino cluster.

A reusable React component for executing queries against Trino. It can be embedded into any React application and configured to proxy requests to a local or remote Trino cluster.

also please wrap at 80 column width here and other paragraphs

mosabua · 2025-10-12T00:26:06Z

README.md

+A reusable React component for executing queries against Trino. It can be embedded into any react application and configured to proxy requests to a local or remote Trino cluster.
+
+> [!WARNING]
+> This package is under heavy development and is not yet recommended for production workloads. Treat the current release as an early-stage demo; production-ready builds and documentation will follow soon.


Suggested change

> This package is under heavy development and is not yet recommended for production workloads. Treat the current release as an early-stage demo; production-ready builds and documentation will follow soon.

> This package is under heavy development and is not yet recommended for production workloads. Treat the current release as an early-stage demo; production-ready builds and documentation are planned.

README.md

mosabua · 2025-10-12T00:27:08Z

README.md

-            return false;
-        }
-    }
+## Quick Start


Suggested change

## Quick Start

## Quick start

mosabua · 2025-10-12T01:55:35Z

README.md

-
-The local URL will be be displayed which you can open in your browser.
-
 ### Building the Parser


Suggested change

### Building the Parser

### Building the parser

mosabua · 2025-10-12T01:55:51Z

README.md

+Run `npm run antlr4ng` to build the parser, as configured in **package.json**.

-### Linting and code formatting
+### Linting and Code Formatting


Suggested change

### Linting and Code Formatting

### Linting and code formatting

mosabua · 2025-10-12T01:56:39Z

README.md

+   - Show stages and split counts like the Trino console client
+4. Keep the experience easy to navigate

 ### Gaps and Future Direction


Suggested change

### Gaps and Future Direction

### Gaps and future direction

mosabua · 2025-10-12T01:57:38Z

precise/package.json

+    "type": "git",
+    "url": "https://github.com/trinodb/trino-query-ui.git"
+  },
+  "homepage": "https://trinodb.github.io/trino-query-ui",


We dont have that set up at this stage so lets use the same URL as for the source

precise/package.json

mosabua · 2025-10-12T02:00:51Z

Also note the npm token should be available as it set organization-wide now ..

koszti · 2025-10-12T16:01:28Z

@mosabua thanks I addressed all comments. let me know if I missed something

mosabua

Just a few minor comments that can be addressed in a follow up PR. I am going to merge this in the interest of testing the release flow next. We should start with some 0.x version but move to 1.x soon since the component is already quite mature and powerfule. cc @georgewfisher

mosabua · 2025-11-04T01:13:21Z

precise/index.html

    <link rel="icon" type="image/png" href="/commander_bunbun.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Trino Query Editor</title>
+    <title>Trino Query Editor - Example app</title>


Suggested change

<title>Trino Query Editor - Example app</title>

<title>Trino query editor - Example app</title>

mosabua · 2025-11-04T01:13:41Z

precise/package.json

-  "private": true,
-  "version": "0.0.0",
+  "name": "trino-query-ui",
+  "description": "Trino Query Editor react component",


Suggested change

"description": "Trino Query Editor react component",

"description": "Trino query editor React component",

mosabua · 2025-11-04T01:18:19Z

precise/src/QueryEditorPane.tsx

+
+    async parseAndDecoratePromiseAsync(monaco: any, editor: any, waitForUserToStopTyping: number): Promise<boolean> {
+        if (this.isRunningParse) {
+            //console.error("cancelled parsing:" + this.isRunningParse);


For now we can leave this I guess but over time we should either make it configurable somehow or remove.

mosabua · 2025-11-04T01:20:40Z

precise/src/main.tsx

-ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <h1>Trino Query Editor - Example app</h1>


Suggested change

<h1>Trino Query Editor - Example app</h1>

<h1>Trino query editor - Example app</h1>

mosabua · 2025-11-04T01:21:03Z

precise/src/QueryEditorPane.tsx

+    }
+
+    handleTabCreate = () => {
+        const newQuery = this.props.queries.addQuery(false, 'New Query')


Suggested change

const newQuery = this.props.queries.addQuery(false, 'New Query')

const newQuery = this.props.queries.addQuery(false, 'New query')

cla-bot bot added the cla-signed label Sep 25, 2025

koszti force-pushed the make-reusable-react-component branch 2 times, most recently from b102d69 to 1e23033 Compare September 25, 2025 20:11

mosabua mentioned this pull request Sep 28, 2025

Add release flow to query ui simpligility/contributions#28

Open

mosabua requested changes Oct 12, 2025

View reviewed changes

koszti force-pushed the make-reusable-react-component branch 2 times, most recently from ae8c126 to 5b34232 Compare October 12, 2025 15:46

koszti added 2 commits October 12, 2025 17:52

Make QueryEditor as a reusable react component

cc0221e

Bump dependencies

d032be6

koszti force-pushed the make-reusable-react-component branch from 5b34232 to d032be6 Compare October 12, 2025 15:53

koszti requested a review from mosabua October 12, 2025 16:01

koszti mentioned this pull request Oct 13, 2025

Switch to Material UI #22

Open

mosabua approved these changes Nov 4, 2025

View reviewed changes

mosabua merged commit 26ccf10 into trinodb:main Nov 4, 2025
3 checks passed

	A reusable React component for executing queries against Trino. It can be embedded into any react application and configured to proxy requests to a local or remote Trino cluster.
	A reusable React component for executing queries against Trino. It can be embedded into any React application and configured to proxy requests to a local or remote Trino cluster.

	> This package is under heavy development and is not yet recommended for production workloads. Treat the current release as an early-stage demo; production-ready builds and documentation will follow soon.
	> This package is under heavy development and is not yet recommended for production workloads. Treat the current release as an early-stage demo; production-ready builds and documentation are planned.


		The local URL will be be displayed which you can open in your browser.

		### Building the Parser

	### Linting and Code Formatting
	### Linting and code formatting

	<title>Trino Query Editor - Example app</title>
	<title>Trino query editor - Example app</title>

	"description": "Trino Query Editor react component",
	"description": "Trino query editor React component",

	<h1>Trino Query Editor - Example app</h1>
	<h1>Trino query editor - Example app</h1>

	const newQuery = this.props.queries.addQuery(false, 'New Query')
	const newQuery = this.props.queries.addQuery(false, 'New query')

Make QueryEditor as a reusable react component #21

Make QueryEditor as a reusable react component #21

Uh oh!

Conversation

koszti commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Additional context and related issues

Uh oh!

mosabua left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

koszti Oct 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mosabua commented Oct 12, 2025

Uh oh!

koszti commented Oct 12, 2025

Uh oh!

mosabua left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

koszti commented Sep 25, 2025 •

edited

Loading

koszti Oct 12, 2025 •

edited

Loading