Commit 541a54e2 authored by Sri's avatar Sri
Browse files

Merge branch '16-better-linting-experience' into 'master'

Resolve "Better linting experience"

Closes #16

See merge request !12
parents 50ca0c2c 66cc34ee
......@@ -3,8 +3,8 @@ import classnames from 'classnames';
import model, { pipelib_toggle_minimized, text_editor_toggle_minimized } from './model';
import Errors from './Errors';
import JobEditor from './Jobs/JobEditor';
import Linter from './Linter';
import Modal from './Containers/Modal';
import PipeLib from './PipeLib/PipeLib';
import TextEditor from './TextEditor/TextEditor';
......@@ -35,7 +35,7 @@ function App() {
<JobEditor/>
<TextEditor/>
<PipeLib base_url='https://cors-anywhere.herokuapp.com/https://gitlab.com/sri-at-gitlab/projects/pipe-lib'/>
<Errors list={model.errors}/>
<Linter list={model.errors || []}/>
</div>;
}
......
import React from 'react';
import './Errors.css';
const mapper = (item, index) => <div className='Item'
key={`Error_Item_${index}`}>
{item}
</div>;
const Errors = ({ list }) => {
if (!list || list.length === 0) return null;
return <div id='Errors'>{list.map(mapper)}</div>;
};
export default Errors;
#Errors {
background: #c33;
#Linter {
background: #333;
bottom: 0;
color: #fff;
display: grid;
......@@ -12,5 +12,15 @@
z-index: 5;
}
#Errors .Item {
#Linter button {
background: transparent;
color: #fff;
text-shadow: #000 0 0 1px;
}
#Linter.Errors {
background: #c33;
}
#Linter .Item {
}
import React from 'react';
import classnames from 'classnames';
import { lint_yaml } from './model';
import './Linter.css';
const mapper = (item, index) => <div className='Item'
key={`Error_Item_${index}`}>{item}</div>;
const Linter = ({ list }) => {
const has_errors = list.length > 0;
const classes = classnames({ Errors: has_errors });
return <div id='Linter'
className={classes}>
{list.map(mapper)}
<button onClick={() => lint_yaml()}>{has_errors ? 'Lint again' : 'Yaml linter'}</button>
</div>;
};
export default Linter;
......@@ -16,7 +16,7 @@ const render_app = () => {
window.render_app();
};
const lint_yaml = () => {
export const lint_yaml = () => {
const url = 'https://cors-anywhere.herokuapp.com/https://gitlab.com/api/v4/ci/lint';
const data = { content: yaml.safeDump(model.pipeline, { indent: 2 }) };
const options = {
......@@ -98,9 +98,13 @@ export const job_editor_set_name = name => {
};
export const pipeline_text_editor_save = text => {
model.pipeline = yaml.safeLoad(text);
try {
model.pipeline = yaml.safeLoad(text);
}
catch (error) {
model.errors = [error.message];
}
render_app();
lint_yaml();
};
export const pipeline_reorder_stage = (current_index, new_index) => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment