Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 21:47:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

CodeHinter support for SQL queries

Browse source
This commit is contained in:
navaneeth 2021-05-09 09:55:17 +05:30
parent bc57117edb
commit 1f39b87f3d
7 changed files with 56 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/Editor/CodeBuilder/CodeHinter.jsx
View file

@ -1,6 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/mode/handlebars/handlebars';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/search/match-highlighter';

2
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -177,7 +177,7 @@ class Table extends React.Component {
</label>
)}
<button className="btn btn-sm btn-danger col" onClick={() => this.removeAction(index)}>
<button className="btn btn-sm btn-outline-danger col" onClick={() => this.removeAction(index)}>
Remove
</button>
</Popover.Content>

19
frontend/src/Editor/QueryManager/QueryEditors/Elasticsearch.jsx
View file

@ -85,18 +85,15 @@ class Elasticsearch extends React.Component {
</div>
<div className="mb-3 mt-2">
<label className="form-label text-reset">Query</label>
<CodeMirror
height="auto"
fontSize="2"
<CodeHinter
currentState={this.props.currentState}
initialValue={options.query}
mode="sql"
placeholder={'{ "name": "" }'}
value={options.query}
onChange={(instance) => this.changeOption('query', instance.getValue())}
options={{
theme: 'duotone-light',
mode: 'javascript',
lineWrapping: true,
scrollbarStyle: null
}}
theme="duotone-light"
lineNumbers={true}
className="query-hinter"
onChange={(value) => this.changeOption('query', value)}
/>
</div>
</div>

21
frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/theme/duotone-light.css';
import { CodeHinter } from '../../CodeBuilder/CodeHinter';
class Mysql extends React.Component {
constructor(props) {
@ -29,18 +30,14 @@ class Mysql extends React.Component {
<div>
{options && (
<div className="mb-3 mt-2">
<CodeMirror
height="auto"
fontSize="2"
value={options.query}
onChange={(instance) => this.changeOption('query', instance.getValue())}
placeholder="SELECT * FROM customers;"
options={{
theme: 'duotone-light',
mode: 'sql',
lineWrapping: true,
scrollbarStyle: null
}}
<CodeHinter
currentState={this.props.currentState}
initialValue={options.query}
mode="sql"
theme="duotone-light"
lineNumbers={true}
className="query-hinter"
onChange={(value) => this.changeOption('query', value)}
/>
</div>
)}

21
frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx
View file

@ -51,19 +51,14 @@ class Postgresql extends React.Component {
{options.mode === 'sql' && (
<div className="mb-3 mt-2">
<CodeMirror
height="auto"
style={{ minHeight: '100px' }}
fontSize="2"
value={options.query}
onChange={(instance) => this.changeOption('query', instance.getValue())}
placeholder="SELECT * FROM customers;"
options={{
theme: 'duotone-light',
mode: 'sql',
lineWrapping: true,
scrollbarStyle: null
}}
<CodeHinter
currentState={this.props.currentState}
initialValue={options.query}
mode="sql"
theme="duotone-light"
lineNumbers={true}
className="query-hinter"
onChange={(value) => this.changeOption('query', value)}
/>
</div>
)}

3
frontend/src/Editor/QueryManager/QueryEditors/RestApi.jsx
View file

@ -83,6 +83,7 @@ class Restapi extends React.Component {
<div className="col">
<CodeHinter
currentState={this.props.currentState}
className="form-control"
initialValue={options.url}
onChange={(value) => { this.changeOption('url', value); }}
/>
@ -102,10 +103,12 @@ class Restapi extends React.Component {
<CodeHinter
currentState={this.props.currentState}
initialValue={pair[0]}
className="form-control"
onChange={(value) => this.keyValuePairValueChanged(value, 0, option, index)}
/>
<CodeHinter
currentState={this.props.currentState}
className="form-control"
initialValue={pair[1]}
onChange={(value) => this.keyValuePairValueChanged(value, 1, option, index)}
/>

29
frontend/src/_styles/theme.scss
View file

@ -1058,11 +1058,12 @@ body {
.code-hinter {
padding: 0.1775rem .75rem;
height: 36px;
.CodeMirror {
font-family: 'Roboto', sans-serif;
.form-control {
.CodeMirror {
font-family: 'Roboto', sans-serif;
}
}
.CodeMirror-focused {
@ -1116,4 +1117,26 @@ body {
hr {
margin: 1rem 0;
}
.query-hinter {
min-height: 150px;
}
.codehinter-default-input {
padding: 0.0475rem .75rem;
display: block;
width: 100%;
font-size: .875rem;
font-weight: 400;
color: #232e3c;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #dadcde;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 4px;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
height: 30px;
}