You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by er...@apache.org on 2021/02/08 05:45:27 UTC
[superset] branch master updated: refactor:
TemplateParamsEditor.jsx converted from class to functional component
(#12873)
This is an automated email from the ASF dual-hosted git repository.
erikrit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 022d18d refactor: TemplateParamsEditor.jsx converted from class to functional component (#12873)
022d18d is described below
commit 022d18d3595be92b712900204c719e444f20bdbd
Author: Lyndsi Kay Williams <55...@users.noreply.github.com>
AuthorDate: Sun Feb 7 23:44:39 2021 -0600
refactor: TemplateParamsEditor.jsx converted from class to functional component (#12873)
* TemplateParamsEditor.jsx converted from class to functional component
* Fixed import in SqlEditor.jsx
* Corrected renderDoc
* Corrected renderModalBody
* Corrected functional name and import
* Corrected props
* Corrected modalBody and incorporated renderDoc
* Removed t strings
* Removed unnecessary single quotes
* Editor text updating correctly
* Split useState into three different hooks
* Removed onChangefunc, adjusted component to use onChange and code from props through useEffect
* Added parsedJSON reset to catch in useEffect
* Put a throttle on the onChange
* Switched from throttle to debounce
---
.../src/SqlLab/components/TemplateParamsEditor.jsx | 136 ++++++++-------------
1 file changed, 54 insertions(+), 82 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
index 863e994..20e80a1 100644
--- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx
@@ -16,11 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Badge from 'src/common/components/Badge';
import { t, styled } from '@superset-ui/core';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { debounce } from 'lodash';
import ModalTrigger from 'src/components/ModalTrigger';
import { ConfigEditor } from 'src/components/AsyncAceEditor';
@@ -42,49 +43,29 @@ const StyledConfigEditor = styled(ConfigEditor)`
}
`;
-export default class TemplateParamsEditor extends React.Component {
- constructor(props) {
- super(props);
- const codeText = props.code || '{}';
- this.state = {
- codeText,
- parsedJSON: null,
- isValid: true,
- };
- this.onChange = this.onChange.bind(this);
- }
-
- componentDidMount() {
- this.onChange(this.state.codeText);
- }
+function TemplateParamsEditor({ code, language, onChange }) {
+ const [parsedJSON, setParsedJSON] = useState();
+ const [isValid, setIsValid] = useState(true);
- onChange(value) {
- const codeText = value;
- let isValid;
- let parsedJSON = {};
+ useEffect(() => {
try {
- parsedJSON = JSON.parse(value);
- isValid = true;
- } catch (e) {
- isValid = false;
+ setParsedJSON(JSON.parse(code));
+ setIsValid(true);
+ } catch {
+ setParsedJSON({});
+ setIsValid(false);
}
- this.setState({ parsedJSON, isValid, codeText });
- const newValue = isValid ? codeText : '{}';
- if (newValue !== this.props.code) {
- this.props.onChange(newValue);
- }
- }
+ }, [code]);
- renderDoc() {
- return (
+ const modalBody = (
+ <div>
<p>
- {t('Assign a set of parameters as')}
+ Assign a set of parameters as
<code>JSON</code>
- {t('below (example:')}
+ below (example:
<code>{'{"my_table": "foo"}'}</code>
- {t('), and they become available in your SQL (example:')}
- <code>SELECT * FROM {'{{ my_table }}'} </code>
- {t(') by using')}
+ ), and they become available in your SQL (example:
+ <code>SELECT * FROM {'{{ my_table }}'} </code>) by using
<a
href="https://superset.apache.org/sqllab.html#templating-with-jinja"
target="_blank"
@@ -94,54 +75,45 @@ export default class TemplateParamsEditor extends React.Component {
</a>{' '}
syntax.
</p>
- );
- }
+ <StyledConfigEditor
+ keywords={[]}
+ mode={language}
+ minLines={25}
+ maxLines={50}
+ onChange={debounce(onChange, 200)}
+ width="100%"
+ editorProps={{ $blockScrolling: true }}
+ enableLiveAutocompletion
+ value={code}
+ />
+ </div>
+ );
- renderModalBody() {
- return (
- <div>
- {this.renderDoc()}
- <StyledConfigEditor
- keywords={[]}
- mode={this.props.language}
- minLines={25}
- maxLines={50}
- onChange={this.onChange}
- width="100%"
- editorProps={{ $blockScrolling: true }}
- enableLiveAutocompletion
- value={this.state.codeText}
- />
- </div>
- );
- }
+ const paramCount = parsedJSON ? Object.keys(parsedJSON).length : 0;
- render() {
- const paramCount = this.state.parsedJSON
- ? Object.keys(this.state.parsedJSON).length
- : 0;
- return (
- <ModalTrigger
- modalTitle={t('Template parameters')}
- triggerNode={
- <div tooltip={t('Edit template parameters')} buttonSize="small">
- {`${t('Parameters')} `}
- <Badge count={paramCount} />
- {!this.state.isValid && (
- <InfoTooltipWithTrigger
- icon="exclamation-triangle"
- bsStyle="danger"
- tooltip={t('Invalid JSON')}
- label="invalid-json"
- />
- )}
- </div>
- }
- modalBody={this.renderModalBody(true)}
- />
- );
- }
+ return (
+ <ModalTrigger
+ modalTitle={t('Template parameters')}
+ triggerNode={
+ <div tooltip={t('Edit template parameters')} buttonSize="small">
+ {`${t('Parameters')} `}
+ <Badge count={paramCount} />
+ {!isValid && (
+ <InfoTooltipWithTrigger
+ icon="exclamation-triangle"
+ bsStyle="danger"
+ tooltip={t('Invalid JSON')}
+ label="invalid-json"
+ />
+ )}
+ </div>
+ }
+ modalBody={modalBody}
+ />
+ );
}
TemplateParamsEditor.propTypes = propTypes;
TemplateParamsEditor.defaultProps = defaultProps;
+
+export default TemplateParamsEditor;