-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add UI for adding and viewing sample queries.
- Loading branch information
Marina Samuel
committed
Feb 5, 2019
1 parent
d4746ad
commit 424e193
Showing
10 changed files
with
374 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
client/app/pages/data-sources/schema-table-components/QueryListItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import Input from 'antd/lib/input'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Query } from '@/components/proptypes'; | ||
|
|
||
|
|
||
| const QueryListItem = (props) => { | ||
| if (!props.query) { | ||
| return <div />; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="p-relative"> | ||
| <Input | ||
| className="bg-white" | ||
| readOnly="readonly" | ||
| disabled | ||
| value={props.query.name} | ||
| /> | ||
| { | ||
| props.removeQuery ? ( | ||
| <a | ||
| href="#" | ||
| onClick={() => props.removeQuery(null)} | ||
| className="d-flex align-items-center justify-content-center" | ||
| style={{ | ||
| position: 'absolute', | ||
| right: '1px', | ||
| top: '1px', | ||
| bottom: '1px', | ||
| width: '30px', | ||
| background: '#fff', | ||
| borderRadius: '3px', | ||
| }} | ||
| > | ||
| <i className="text-muted fa fa-times" /> | ||
| </a>) : null | ||
| } | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| QueryListItem.propTypes = { | ||
| query: Query.isRequired, | ||
| removeQuery: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default QueryListItem; |
125 changes: 125 additions & 0 deletions
125
client/app/pages/data-sources/schema-table-components/QuerySearchDialog.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import React from 'react'; | ||
| import Modal from 'antd/lib/modal'; | ||
| import Input from 'antd/lib/input'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import QueryListItem from './QueryListItem'; | ||
|
|
||
|
|
||
| export default class QuerySearchDialog extends React.Component { | ||
| static propTypes = { | ||
| onOk: PropTypes.func.isRequired, | ||
| onCancel: PropTypes.func.isRequired, | ||
| visible: PropTypes.bool.isRequired, | ||
| query: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| selectedQuery: null, | ||
| searchedQueries: [], | ||
| }; | ||
| } | ||
|
|
||
| getHighlightedText = (text, highlight) => { | ||
| // Split text on highlight term, include term itself into parts, ignore case | ||
| const parts = text.split(new RegExp(`(${highlight})`, 'gi')); | ||
| return ( | ||
| <span> | ||
| { | ||
| parts.map(part => ( | ||
| <span style={part.toLowerCase() === highlight.toLowerCase() ? { fontWeight: 'bold' } : {}}> | ||
| { part } | ||
| </span> | ||
| )) | ||
| } | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| createRecentQueriesList = () => { | ||
| if (!this.recentQueries || this.recentQueries.length <= 0) { | ||
| return []; | ||
| } | ||
| return this.recentQueries.map(query => ( | ||
| <button key={query.id} className="list-group-item" onClick={() => this.selectQuery(query)}> | ||
| {query.name} | ||
| </button> | ||
| )); | ||
| } | ||
|
|
||
| createSearchQueriesList = () => | ||
| (this.state.searchedQueries.map(query => ( | ||
| <button key={query.id} className="btn btn-default list-group-item" onClick={() => this.selectQuery(query)}> | ||
| {this.getHighlightedText(query.name, this.searchTerm)} | ||
| </button> | ||
| ))); | ||
|
|
||
| selectQuery = (query) => { | ||
| this.setState({ selectedQuery: query }); | ||
| } | ||
|
|
||
| searchQueries = (e) => { | ||
| this.searchTerm = e.target.value; | ||
| this.props.query.query({ q: this.searchTerm }, (results) => { | ||
| this.setState({ searchedQueries: results.results }); | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| query, | ||
| } = this.props; | ||
|
|
||
| query.recent().$promise.then((items) => { | ||
| this.recentQueries = items; | ||
| }); | ||
|
|
||
| return ( | ||
| <Modal | ||
| title="Add Sample Query" | ||
| visible={this.props.visible} | ||
| onCancel={this.props.onCancel} | ||
| onOk={() => this.props.onOk(this.state.selectedQuery)} | ||
| okText="Add Sample" | ||
| cancelText="Close" | ||
| > | ||
| {this.state.selectedQuery ? | ||
| ( | ||
| <QueryListItem | ||
| query={this.state.selectedQuery} | ||
| removeQuery={() => this.selectQuery(null)} | ||
| /> | ||
| ) : ( | ||
| <div> | ||
| <div className="form-group"> | ||
| <Input | ||
| className="form-control" | ||
| autoFocus | ||
| onChange={this.searchQueries} | ||
| placeholder="Search a query by name..." | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="scrollbox" style={{ maxHeight: '50vh' }}> | ||
| {!this.state.searchedQueries || this.state.searchedQueries.length <= 0 ? | ||
| ( | ||
| <div className="list-group"> | ||
| {this.createRecentQueriesList()} | ||
| </div> | ||
| ) : ( | ||
| <div className="list-group"> | ||
| {this.createSearchQueriesList()} | ||
| </div> | ||
| ) | ||
| } | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| </Modal> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.