WIP: implement schema browser as a react component #3140
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import React from 'react'; | ||
| import { react2angular } from 'react2angular'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Icon } from 'antd'; | ||
| import { debounce } from 'lodash'; | ||
| import { $rootScope } from '@/services/ng'; | ||
|
|
||
| import { Schema } from '../proptypes'; | ||
|
|
||
| const isSchemaEmpty = schema => schema === undefined || !schema.length; | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. what about: There was a problem hiding this comment.
|
||
|
|
||
| // Return true if the search term is contained within the table name | ||
| // or any of the table's columns. | ||
| const doesTableContainSearchTerm = (searchTerm, table) => { | ||
| const regEx = new RegExp(searchTerm, 'gi'); | ||
|
|
||
|
There was a problem hiding this comment. One more notice about this function: avoid using regex, especially in this form. First of all, it allows users to use arbitrary regex to filter schema, as well as it breaks previous behavior. Also, using |
||
| // If the table name matches the search term we can return early. | ||
| if (regEx.test(table.name)) return true; | ||
|
|
||
| return !!table.columns.filter(column => regEx.test(column)).length; | ||
| }; | ||
|
|
||
| const doCopy = (evt, hierarchy) => { | ||
| // eslint-disable-next-line | ||
| $rootScope.$broadcast('query-editor.command', 'paste', hierarchy.join('.')); | ||
| evt.stopPropagation(); | ||
| }; | ||
|
|
||
| class SchemaBrowser extends React.Component { | ||
| static propTypes = { | ||
| schema: Schema, // eslint-disable-line react/no-unused-prop-types | ||
| doRefresh: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| schema: null, | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| searchTerm: '', | ||
| schema: [], | ||
| schemaInitialized: false, | ||
| }; | ||
|
|
||
| // Candidate to be abstracted out to a set of config constants. | ||
| // Performs search filtering after the number of milliseconds set below. | ||
| this.doSearch = debounce(this.doSearch, 150); | ||
| } | ||
|
|
||
| componentDidUpdate(prevProps, prevState) { | ||
| if (prevProps.schema && (this.props.schema && prevState.schema.length !== this.props.schema.length)) { | ||
|
There was a problem hiding this comment. On query page, |
||
| // setState() is fine here within the right conditions. | ||
| // eslint-disable-next-line | ||
|
There was a problem hiding this comment. Use this with a list of rules you want to disable |
||
| if (!this.state.schemaInitialized) this.setState({ schema: this.props.schema }); | ||
|
There was a problem hiding this comment. This is the line where eslint should fail (we require block even for a single statement). |
||
| } | ||
| } | ||
|
|
||
| handleSearch = (evt) => { | ||
| if (!evt.target.value) { | ||
| this.setState({ schema: this.props.schema, searchTerm: '' }); | ||
|
There was a problem hiding this comment.
|
||
| return; | ||
| } | ||
| this.setState({ searchTerm: evt.target.value }); | ||
| this.doSearch(evt.target.value); | ||
| } | ||
|
|
||
| doSearch = (searchTerm) => { | ||
| const schema = this.props.schema.filter(table => doesTableContainSearchTerm(searchTerm, table)); | ||
| this.setState({ searchTerm, schema }); | ||
|
There was a problem hiding this comment. Seems you don't need doSearch = (searchTerm) => {
let { schema } = this.props;
if (searchTerm !== '') {
schema = filter(schema, table => doesTableContainSearchTerm(searchTerm, table));
}
this.setState({ searchTerm, schema });
}Then use it directly with input: Also, move debounce call here as well. |
||
| } | ||
|
|
||
| getTitleElement = (title, isTableRow) => ( | ||
| <span className="schema-browser-title-item"> | ||
| {isTableRow && <Icon type="table" />} | ||
| <span>{` ${title} `}</span> | ||
| <Icon | ||
| onClick={(evt) => { doCopy(evt, [title]); }} | ||
| aria-hidden="true" | ||
| type="double-right" | ||
| className="copy-arrow" | ||
| /> | ||
| </span> | ||
| ); | ||
|
|
||
| doRowToggle = ({ target }) => { | ||
| target.closest('.table-item').classList.toggle('schema-table-expanded'); | ||
|
There was a problem hiding this comment. I think it should be implemented in more "native" way: create a component that will represent a single table. That component will accept table name and columns via props (also add other necessary props), and will have the only state field - There was a problem hiding this comment. BTW - with this approach you can even remove css class, and just conditionally render columns only when table is expanded. |
||
| } | ||
|
|
||
| render() { | ||
| if (!this.props.schema) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <div className="schema-container"> | ||
| <div className="schema-control"> | ||
| <input | ||
|
There was a problem hiding this comment. Use |
||
| type="text" | ||
| placeholder="Search schema..." | ||
| className="form-control" | ||
| disabled={isSchemaEmpty(this.props.schema)} | ||
| value={this.state.searchTerm} | ||
| onChange={this.handleSearch} | ||
| /> | ||
| <button | ||
| className="btn btn-default" | ||
| title="Refresh Schema" | ||
| type="button" | ||
| onClick={this.props.doRefresh} | ||
| > | ||
| <span className="zmdi zmdi-refresh" /> | ||
| </button> | ||
| </div> | ||
| <div className="schema-browser"> | ||
| {this.state.schema.map(table => ( | ||
| <div key={table.name} className="table-item"> | ||
| <div className="table-name" onClick={this.doRowToggle}>{this.getTitleElement(table.name, true)}</div> | ||
| {table.columns.map(column => ( | ||
| <div className="table-open" key={column}>{this.getTitleElement(column)}</div> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default function init(ngModule) { | ||
| ngModule.component('schemaBrowser', react2angular(SchemaBrowser)); | ||
| } | ||
|
|
||
| init.init = true; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
kebab-case