hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-11-11 05:10:51 +03:00
Code Issues Projects Releases Wiki Activity

update advanced settings in create trigger page (close #654) (#868)

Browse Source
This commit is contained in:
Karthik Venkateswaran 2018-10-27 09:52:23 +05:30 committed by Shahidh K Muhammed
parent add2d40517
commit 92182e9af3
3 changed files with 134 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
console/src/components/Services/EventTrigger/Add/AddTrigger.js
View File

@ -26,21 +26,58 @@ import { showErrorNotification } from '../Notification';
import { createTrigger } from './AddActions';
import { fetchTableListBySchema } from './AddActions';
import semverCheck from '../../../../helpers/semver';
class AddTrigger extends Component {
constructor(props) {
super(props);
this.props.dispatch(fetchTableListBySchema('public'));
this.state = { advancedExpanded: false };
this.state = {
advancedExpanded: false,
supportColumnChangeFeature: false,
};
}
componentDidMount() {
// set defaults
this.props.dispatch(setDefaults());
if (this.props.serverVersion) {
this.checkSemVer(this.props.serverVersion);
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.serverVersion !== this.props.serverVersion) {
this.checkSemVer(nextProps.serverVersion);
}
}
componentWillUnmount() {
// set defaults
this.props.dispatch(setDefaults());
}
checkSemVer(version) {
try {
const supportColumnChangeFeature = semverCheck(
'supportColumnChangeTrigger',
version
);
if (supportColumnChangeFeature) {
this.updateSupportColumnChangeFeature(true);
} else {
this.updateSupportColumnChangeFeature(false);
}
} catch (e) {
this.updateSupportColumnChangeFeature(false);
console.error(e);
}
}
updateSupportColumnChangeFeature(val) {
this.setState({
...this.state,
supportColumnChangeFeature: val,
});
}
submitValidation(e) {
// validations
e.preventDefault();
@ -136,6 +173,9 @@ class AddTrigger extends Component {
internalError,
headers,
} = this.props;
const { supportColumnChangeFeature } = this.state;
const styles = require('../TableCommon/Table.scss');
let createBtnText = 'Create';
if (ongoingRequest) {
@ -216,6 +256,94 @@ class AddTrigger extends Component {
return null;
};
const advancedColumnSection = supportColumnChangeFeature ? (
<div>
<h4 className={styles.subheading_text}>
Listen columns for update &nbsp; &nbsp;
<OverlayTrigger
placement="right"
overlay={tooltip.advancedOperationDescription}
>
<i className="fa fa-question-circle" aria-hidden="true" />
</OverlayTrigger>{' '}
</h4>
{selectedOperations.update ? (
<div>{getColumnList('update')}</div>
) : (
<div>
<div
className={styles.display_inline + ' ' + styles.add_mar_right}
style={{
marginTop: '10px',
marginBottom: '10px',
}}
>
Applicable to update operation only.
</div>
</div>
)}
</div>
) : (
<div>
<h4 className={styles.subheading_text}>
Advanced - Operation/Columns &nbsp; &nbsp;
<OverlayTrigger
placement="right"
overlay={tooltip.advancedOperationDescription}
>
<i className="fa fa-question-circle" aria-hidden="true" />
</OverlayTrigger>{' '}
</h4>
<div>
<div>
<label>
<input
onChange={handleOperationSelection}
className={styles.display_inline + ' ' + styles.add_mar_right}
type="checkbox"
value="insert"
checked={selectedOperations.insert}
/>
Insert
</label>
</div>
{getColumnList('insert')}
</div>
<hr />
<div>
<div>
<label>
<input
onChange={handleOperationSelection}
className={styles.display_inline + ' ' + styles.add_mar_right}
type="checkbox"
value="update"
checked={selectedOperations.update}
/>
Update
</label>
</div>
{getColumnList('update')}
</div>
<hr />
<div>
<div>
<label>
<input
onChange={handleOperationSelection}
className={styles.display_inline + ' ' + styles.add_mar_right}
type="checkbox"
value="delete"
checked={selectedOperations.delete}
/>
Delete
</label>
</div>
{getColumnList('delete')}
</div>
</div>
);
const heads = headers.map((header, i) => {
let removeIcon;
if (i + 1 === headers.length) {
@ -485,81 +613,7 @@ class AddTrigger extends Component {
styles.add_mar_top
}
>
{tableName ? (
<div>
<h4 className={styles.subheading_text}>
Advanced - Operation/Columns &nbsp; &nbsp;
<OverlayTrigger
placement="right"
overlay={tooltip.advancedOperationDescription}
>
<i
className="fa fa-question-circle"
aria-hidden="true"
/>
</OverlayTrigger>{' '}
</h4>
<div>
<div>
<label>
<input
onChange={handleOperationSelection}
className={
styles.display_inline +
' ' +
styles.add_mar_right
}
type="checkbox"
value="insert"
checked={selectedOperations.insert}
/>
Insert
</label>
</div>
{getColumnList('insert')}
</div>
<hr />
<div>
<div>
<label>
<input
onChange={handleOperationSelection}
className={
styles.display_inline +
' ' +
styles.add_mar_right
}
type="checkbox"
value="update"
checked={selectedOperations.update}
/>
Update
</label>
</div>
{getColumnList('update')}
</div>
<hr />
<div>
<div>
<label>
<input
onChange={handleOperationSelection}
className={
styles.display_inline +
' ' +
styles.add_mar_right
}
type="checkbox"
value="delete"
checked={selectedOperations.delete}
/>
Delete
</label>
</div>
{getColumnList('delete')}
</div>
</div>
) : null}
{tableName ? advancedColumnSection : null}
<div
className={styles.add_mar_bottom + ' ' + styles.add_mar_top}
>
@ -652,6 +706,7 @@ const mapStateToProps = state => {
return {
...state.addTrigger,
schemaList: state.tables.schemaList,
serverVersion: state.main.serverVersion ? state.main.serverVersion : '',
};
};

3
console/src/components/Services/EventTrigger/Add/Tooltips.js
View File

@ -21,7 +21,8 @@ export const webhookUrlDescription = (
export const advancedOperationDescription = (
<Tooltip id="tooltip-advanced-operation-description">
Columns to be sent in the payload of webhook
For update triggers, webhook will be triggered only when selected columns
are modified
</Tooltip>
);

1
console/src/helpers/semver.js
View File

@ -6,6 +6,7 @@ const componentsSemver = {
eventRedeliver: '1.0.0-alpha17',
sqlAnalyze: '1.0.0-alpha25',
aggregationPerm: '1.0.0-alpha26',
supportColumnChangeTrigger: '1.0.0-alpha26',
analyzeApiChange: '1.0.0-alpha26',
insertPrefix: '1.0.0-alpha26',
};