mirror of
https://github.com/Kong/insomnia
synced 2024-11-08 14:49:53 +00:00
369 lines
12 KiB
JavaScript
369 lines
12 KiB
JavaScript
import React, {PropTypes, PureComponent} from 'react';
|
|
import autobind from 'autobind-decorator';
|
|
import classnames from 'classnames';
|
|
import {Dropdown, DropdownButton, DropdownItem} from '../base/dropdown';
|
|
import PromptButton from '../base/prompt-button';
|
|
import Button from '../base/button';
|
|
import Link from '../base/link';
|
|
import EnvironmentEditor from '../editors/environment-editor';
|
|
import Editable from '../base/editable';
|
|
import Modal from '../base/modal';
|
|
import ModalBody from '../base/modal-body';
|
|
import ModalHeader from '../base/modal-header';
|
|
import ModalFooter from '../base/modal-footer';
|
|
import * as models from '../../../models';
|
|
import {trackEvent} from '../../../analytics/index';
|
|
import {DEBOUNCE_MILLIS} from '../../../common/constants';
|
|
|
|
@autobind
|
|
class WorkspaceEnvironmentsEditModal extends PureComponent {
|
|
constructor (props) {
|
|
super(props);
|
|
this.state = {
|
|
workspace: null,
|
|
isValid: true,
|
|
subEnvironments: [],
|
|
rootEnvironment: null,
|
|
activeEnvironmentId: null
|
|
};
|
|
}
|
|
|
|
hide () {
|
|
this.modal.hide();
|
|
}
|
|
|
|
_setEditorRef (n) {
|
|
this._envEditor = n;
|
|
}
|
|
|
|
_setModalRef (n) {
|
|
this.modal = n;
|
|
}
|
|
|
|
async show (workspace) {
|
|
this.modal.show();
|
|
await this._load(workspace);
|
|
trackEvent('Environment Editor', 'Show');
|
|
}
|
|
|
|
async toggle (workspace) {
|
|
this.modal.toggle();
|
|
await this._load(workspace);
|
|
}
|
|
|
|
async _load (workspace, environmentToActivate = null) {
|
|
const rootEnvironment = await models.environment.getOrCreateForWorkspace(workspace);
|
|
const subEnvironments = await models.environment.findByParentId(rootEnvironment._id);
|
|
|
|
let activeEnvironmentId;
|
|
|
|
if (environmentToActivate) {
|
|
activeEnvironmentId = environmentToActivate._id;
|
|
} else if (this.state.workspace && workspace._id !== this.state.workspace._id) {
|
|
// We've changed workspaces, so load the root one
|
|
activeEnvironmentId = rootEnvironment._id;
|
|
} else {
|
|
// We haven't changed workspaces, so try loading the last environment, and fall back
|
|
// to the root one
|
|
activeEnvironmentId = this.state.activeEnvironmentId || rootEnvironment._id;
|
|
}
|
|
|
|
this.setState({
|
|
workspace,
|
|
rootEnvironment,
|
|
subEnvironments,
|
|
activeEnvironmentId
|
|
});
|
|
}
|
|
|
|
async _handleAddEnvironment (isPrivate = false) {
|
|
const {rootEnvironment, workspace} = this.state;
|
|
const parentId = rootEnvironment._id;
|
|
const environment = await models.environment.create({parentId, isPrivate});
|
|
await this._load(workspace, environment);
|
|
|
|
trackEvent(
|
|
'Environment',
|
|
isPrivate ? 'Create' : 'Create Private'
|
|
);
|
|
}
|
|
|
|
async _handleShowEnvironment (environment) {
|
|
// Don't allow switching if the current one has errors
|
|
if (!this._envEditor.isValid()) {
|
|
return;
|
|
}
|
|
|
|
if (environment === this._getActiveEnvironment()) {
|
|
return;
|
|
}
|
|
|
|
const {workspace} = this.state;
|
|
await this._load(workspace, environment);
|
|
trackEvent('Environment Editor', 'Show Environment');
|
|
}
|
|
|
|
async _handleDeleteEnvironment (environment) {
|
|
const {rootEnvironment, workspace} = this.state;
|
|
|
|
// Don't delete the root environment
|
|
if (environment === rootEnvironment) {
|
|
return;
|
|
}
|
|
|
|
// Delete the current one, then activate the root environment
|
|
await models.environment.remove(environment);
|
|
|
|
await this._load(workspace, rootEnvironment);
|
|
trackEvent('Environment', 'Delete');
|
|
}
|
|
|
|
async _handleChangeEnvironmentName (environment, name) {
|
|
const {workspace} = this.state;
|
|
|
|
// NOTE: Fetch the environment first because it might not be up to date.
|
|
// For example, editing the body updates silently.
|
|
const realEnvironment = await models.environment.getById(environment._id);
|
|
await models.environment.update(realEnvironment, {name});
|
|
await this._load(workspace);
|
|
|
|
trackEvent('Environment', 'Rename');
|
|
}
|
|
|
|
_handleChangeEnvironmentColor (environment, color) {
|
|
clearTimeout(this._colorChangeTimeout);
|
|
this._colorChangeTimeout = setTimeout(async () => {
|
|
const {workspace} = this.state;
|
|
await models.environment.update(environment, {color});
|
|
await this._load(workspace);
|
|
|
|
trackEvent('Environment', color ? 'Change Color' : 'Unset Color');
|
|
}, DEBOUNCE_MILLIS);
|
|
}
|
|
|
|
_didChange () {
|
|
const isValid = this._envEditor.isValid();
|
|
|
|
if (this.state.isValid !== isValid) {
|
|
this.setState({isValid});
|
|
}
|
|
|
|
this._saveChanges();
|
|
}
|
|
|
|
_getActiveEnvironment () {
|
|
const {activeEnvironmentId, subEnvironments, rootEnvironment} = this.state;
|
|
if (rootEnvironment && rootEnvironment._id === activeEnvironmentId) {
|
|
return rootEnvironment;
|
|
} else {
|
|
return subEnvironments.find(e => e._id === activeEnvironmentId);
|
|
}
|
|
}
|
|
|
|
_handleUnsetColor (environment) {
|
|
this._handleChangeEnvironmentColor(environment, null);
|
|
}
|
|
|
|
async _handleClickColorChange (environment, e) {
|
|
let el = document.querySelector('#env-color-picker');
|
|
|
|
if (!el) {
|
|
el = document.createElement('input');
|
|
el.id = 'env-color-picker';
|
|
el.type = 'color';
|
|
document.body.appendChild(el);
|
|
}
|
|
|
|
let color = environment.color || '#7d69cb';
|
|
|
|
if (!environment.color) {
|
|
await this._handleChangeEnvironmentColor(environment, color);
|
|
}
|
|
|
|
el.value = color;
|
|
el.addEventListener('input', e => {
|
|
this._handleChangeEnvironmentColor(environment, e.target.value);
|
|
});
|
|
|
|
el.click();
|
|
}
|
|
|
|
_saveChanges () {
|
|
// Only save if it's valid
|
|
if (!this._envEditor.isValid()) {
|
|
return;
|
|
}
|
|
|
|
const data = this._envEditor.getValue();
|
|
const activeEnvironment = this._getActiveEnvironment();
|
|
|
|
models.environment.update(activeEnvironment, {data});
|
|
}
|
|
|
|
render () {
|
|
const {
|
|
editorFontSize,
|
|
editorIndentSize,
|
|
editorKeyMap,
|
|
lineWrapping,
|
|
render,
|
|
getRenderContext
|
|
} = this.props;
|
|
|
|
const {
|
|
subEnvironments,
|
|
rootEnvironment,
|
|
isValid
|
|
} = this.state;
|
|
|
|
const activeEnvironment = this._getActiveEnvironment();
|
|
|
|
return (
|
|
<Modal ref={this._setModalRef} wide tall {...this.props}>
|
|
<ModalHeader>Manage Environments</ModalHeader>
|
|
<ModalBody noScroll className="env-modal">
|
|
<div className="env-modal__sidebar">
|
|
<li className={classnames(
|
|
'env-modal__sidebar-root-item',
|
|
{'env-modal__sidebar-item--active': activeEnvironment === rootEnvironment}
|
|
)}>
|
|
<Button onClick={this._handleShowEnvironment} value={rootEnvironment}>
|
|
{rootEnvironment ? rootEnvironment.name : ''}
|
|
</Button>
|
|
</li>
|
|
<div className="pad env-modal__sidebar-heading">
|
|
<h3 className="no-margin">Sub Environments</h3>
|
|
<Dropdown right>
|
|
<DropdownButton>
|
|
<i className="fa fa-plus-circle"/>
|
|
</DropdownButton>
|
|
<DropdownItem onClick={this._handleAddEnvironment} value={false}>
|
|
<i className="fa fa-eye"/> Environment
|
|
</DropdownItem>
|
|
<DropdownItem onClick={this._handleAddEnvironment} value={true}
|
|
title="Environment will not be exported or synced">
|
|
<i className="fa fa-eye-slash"/> Private Environment
|
|
</DropdownItem>
|
|
</Dropdown>
|
|
</div>
|
|
<ul>
|
|
{subEnvironments.map(environment => {
|
|
const classes = classnames(
|
|
'env-modal__sidebar-item',
|
|
{'env-modal__sidebar-item--active': activeEnvironment === environment}
|
|
);
|
|
|
|
return (
|
|
<li key={environment._id} className={classes}>
|
|
<Button onClick={this._handleShowEnvironment} value={environment}>
|
|
{environment.color
|
|
? <i className="space-right fa fa-circle"
|
|
style={{color: environment.color}}/>
|
|
: <i className="space-right fa fa-empty"/>
|
|
}
|
|
|
|
{environment.isPrivate
|
|
? <i className="fa fa-eye-slash faint space-right"
|
|
title="Environment will not be exported or synced"/>
|
|
: null
|
|
}
|
|
|
|
<Editable
|
|
className="inline-block"
|
|
onSubmit={name => this._handleChangeEnvironmentName(environment, name)}
|
|
value={environment.name}
|
|
/>
|
|
</Button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
<div className="env-modal__main">
|
|
<div className="env-modal__main__header">
|
|
<h1>
|
|
<Editable singleClick
|
|
className="wide"
|
|
onSubmit={name => this._handleChangeEnvironmentName(activeEnvironment, name)}
|
|
value={activeEnvironment ? activeEnvironment.name : ''}/>
|
|
</h1>
|
|
|
|
{activeEnvironment && rootEnvironment !== activeEnvironment && (
|
|
<Dropdown className="space-right" right>
|
|
<DropdownButton className="btn btn--clicky">
|
|
{activeEnvironment.color && (
|
|
<i className="fa fa-circle space-right"
|
|
style={{color: activeEnvironment.color}}/>
|
|
)}
|
|
Color <i className="fa fa-caret-down"/>
|
|
</DropdownButton>
|
|
|
|
<DropdownItem value={activeEnvironment} onClick={this._handleClickColorChange}>
|
|
<i className="fa fa-circle" style={{color: activeEnvironment.color}}/>
|
|
{activeEnvironment.color ? 'Change Color' : 'Assign Color'}
|
|
</DropdownItem>
|
|
|
|
<DropdownItem value={activeEnvironment}
|
|
onClick={this._handleUnsetColor}
|
|
disabled={!activeEnvironment.color}>
|
|
<i className="fa fa-minus-circle"/>
|
|
Unset Color
|
|
</DropdownItem>
|
|
</Dropdown>
|
|
)}
|
|
|
|
{activeEnvironment && rootEnvironment !== activeEnvironment && (
|
|
<PromptButton
|
|
value={activeEnvironment}
|
|
onClick={this._handleDeleteEnvironment}
|
|
className="btn btn--clicky">
|
|
<i className="fa fa-trash-o"/>
|
|
</PromptButton>
|
|
)}
|
|
</div>
|
|
<div className="env-modal__editor">
|
|
<EnvironmentEditor
|
|
editorFontSize={editorFontSize}
|
|
editorIndentSize={editorIndentSize}
|
|
editorKeyMap={editorKeyMap}
|
|
lineWrapping={lineWrapping}
|
|
ref={this._setEditorRef}
|
|
key={activeEnvironment ? activeEnvironment._id : 'n/a'}
|
|
environment={activeEnvironment ? activeEnvironment.data : {}}
|
|
didChange={this._didChange}
|
|
render={render}
|
|
getRenderContext={getRenderContext}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<div className="margin-left italic txt-sm tall">
|
|
* Environment data can be used for
|
|
<Link href="https://insomnia.rest/documentation/templating/">
|
|
Nunjucks Templating
|
|
</Link> in your requests
|
|
</div>
|
|
<button className="btn" disabled={!isValid} onClick={this.hide}>
|
|
Done
|
|
</button>
|
|
</ModalFooter>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
WorkspaceEnvironmentsEditModal.propTypes = {
|
|
onChange: PropTypes.func.isRequired,
|
|
editorFontSize: PropTypes.number.isRequired,
|
|
editorIndentSize: PropTypes.number.isRequired,
|
|
editorKeyMap: PropTypes.string.isRequired,
|
|
render: PropTypes.func.isRequired,
|
|
getRenderContext: PropTypes.func.isRequired,
|
|
lineWrapping: PropTypes.bool.isRequired
|
|
};
|
|
|
|
export default WorkspaceEnvironmentsEditModal;
|
|
|
|
export let show = null;
|