2019-01-07 01:25:33 +00:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-03-10 20:51:25 +00:00
|
|
|
import { noop } from 'lodash';
|
2017-02-15 14:51:19 +00:00
|
|
|
|
|
|
|
import Button from 'components/buttons/Button';
|
|
|
|
import Dropdown from 'components/forms/fields/Dropdown';
|
|
|
|
import Form from 'components/forms/Form';
|
|
|
|
import formFieldInterface from 'interfaces/form_field';
|
|
|
|
import helpers from 'components/forms/queries/QueryForm/helpers';
|
|
|
|
import InputField from 'components/forms/fields/InputField';
|
|
|
|
import KolideAce from 'components/KolideAce';
|
|
|
|
import validate from 'components/forms/LabelForm/validate';
|
|
|
|
|
|
|
|
const baseClass = 'label-form';
|
|
|
|
|
|
|
|
class LabelForm extends Component {
|
|
|
|
static propTypes = {
|
|
|
|
baseError: PropTypes.string,
|
|
|
|
fields: PropTypes.shape({
|
|
|
|
description: formFieldInterface.isRequired,
|
|
|
|
name: formFieldInterface.isRequired,
|
|
|
|
platform: formFieldInterface.isRequired,
|
|
|
|
query: formFieldInterface.isRequired,
|
|
|
|
}).isRequired,
|
2020-04-07 22:12:32 +00:00
|
|
|
formData: PropTypes.shape({
|
2020-07-01 17:51:34 +00:00
|
|
|
type: PropTypes.string,
|
|
|
|
label_type: PropTypes.string,
|
2020-04-07 22:12:32 +00:00
|
|
|
label_membership_type: PropTypes.string,
|
|
|
|
}),
|
2017-02-15 14:51:19 +00:00
|
|
|
handleSubmit: PropTypes.func.isRequired,
|
|
|
|
isEdit: PropTypes.bool,
|
|
|
|
onCancel: PropTypes.func.isRequired,
|
|
|
|
onOsqueryTableSelect: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
isEdit: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
onLoad = (editor) => {
|
|
|
|
editor.setOptions({
|
|
|
|
enableLinking: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
editor.on('linkClick', (data) => {
|
|
|
|
const { type, value } = data.token;
|
|
|
|
const { onOsqueryTableSelect } = this.props;
|
|
|
|
|
|
|
|
if (type === 'osquery-token') {
|
|
|
|
return onOsqueryTableSelect(value);
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2020-04-07 22:12:32 +00:00
|
|
|
const { baseError, fields, handleSubmit, isEdit, onCancel, formData } = this.props;
|
2017-02-15 14:51:19 +00:00
|
|
|
const { onLoad } = this;
|
2020-04-07 22:12:32 +00:00
|
|
|
const isBuiltin = formData && (formData.label_type === 'builtin' || formData.type === 'status');
|
|
|
|
const isManual = formData && formData.label_membership_type === 'manual';
|
2020-12-07 23:08:59 +00:00
|
|
|
const headerText = isEdit ? 'Edit label' : 'New label';
|
|
|
|
const saveBtnText = isEdit ? 'Update label' : 'Save label';
|
2019-03-10 20:51:25 +00:00
|
|
|
const aceHintText = isEdit ? 'Label queries are immutable. To change the query, delete this label and create a new one.' : '';
|
2017-02-15 14:51:19 +00:00
|
|
|
|
2020-04-07 22:12:32 +00:00
|
|
|
if (isBuiltin) {
|
|
|
|
return (
|
|
|
|
<form className={`${baseClass}__wrapper`} onSubmit={handleSubmit}>
|
|
|
|
<h1>Built in labels cannot be edited</h1>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
2020-07-01 17:51:34 +00:00
|
|
|
|
2017-02-15 14:51:19 +00:00
|
|
|
return (
|
|
|
|
<form className={`${baseClass}__wrapper`} onSubmit={handleSubmit}>
|
|
|
|
<h1>{headerText}</h1>
|
2020-04-07 22:12:32 +00:00
|
|
|
{!isManual && (<KolideAce
|
2017-02-15 14:51:19 +00:00
|
|
|
{...fields.query}
|
2019-03-10 20:51:25 +00:00
|
|
|
label="SQL"
|
2017-02-15 14:51:19 +00:00
|
|
|
onLoad={onLoad}
|
|
|
|
readOnly={isEdit}
|
|
|
|
wrapperClassName={`${baseClass}__text-editor-wrapper`}
|
2020-04-07 22:12:32 +00:00
|
|
|
hint={aceHintText}
|
2019-03-10 20:51:25 +00:00
|
|
|
handleSubmit={noop}
|
2017-02-15 14:51:19 +00:00
|
|
|
/>
|
2020-07-01 17:51:34 +00:00
|
|
|
)}
|
2019-03-10 20:51:25 +00:00
|
|
|
|
2017-02-15 14:51:19 +00:00
|
|
|
{baseError && <div className="form__base-error">{baseError}</div>}
|
|
|
|
<InputField
|
|
|
|
{...fields.name}
|
|
|
|
inputClassName={`${baseClass}__label-title`}
|
2019-03-10 20:51:25 +00:00
|
|
|
label="Name"
|
2017-02-15 14:51:19 +00:00
|
|
|
/>
|
|
|
|
<InputField
|
|
|
|
{...fields.description}
|
|
|
|
inputClassName={`${baseClass}__label-description`}
|
|
|
|
label="Description"
|
|
|
|
type="textarea"
|
|
|
|
/>
|
2020-04-07 22:12:32 +00:00
|
|
|
{!isManual &&
|
|
|
|
(<div className="form-field form-field--dropdown">
|
2017-02-15 14:51:19 +00:00
|
|
|
<label className="form-field__label" htmlFor="platform">Platform</label>
|
|
|
|
<Dropdown
|
|
|
|
{...fields.platform}
|
|
|
|
options={helpers.platformOptions}
|
|
|
|
/>
|
2020-07-01 17:51:34 +00:00
|
|
|
</div>)}
|
2017-02-15 14:51:19 +00:00
|
|
|
<div className={`${baseClass}__button-wrap`}>
|
|
|
|
<Button
|
|
|
|
className={`${baseClass}__cancel-btn`}
|
|
|
|
onClick={onCancel}
|
|
|
|
variant="inverse"
|
|
|
|
>
|
|
|
|
Cancel
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
className={`${baseClass}__save-btn`}
|
|
|
|
type="submit"
|
|
|
|
variant="brand"
|
|
|
|
>
|
|
|
|
{saveBtnText}
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Form(LabelForm, {
|
|
|
|
fields: ['description', 'name', 'platform', 'query'],
|
|
|
|
validate,
|
|
|
|
});
|