diff --git a/ui/constants/constants.js b/ui/constants/constants.js new file mode 100644 index 000000000..9795af1d5 --- /dev/null +++ b/ui/constants/constants.js @@ -0,0 +1,11 @@ +const EMPTY_STRING = ""; +const ERROR_TITLE = "Error"; +const INVALID_TEST_MESSAGE = "Oh no, I can't render this test, please use the API."; +const OK_BUTTON_MESSAGE = "OK"; + +export { + EMPTY_STRING, + ERROR_TITLE, + INVALID_TEST_MESSAGE, + OK_BUTTON_MESSAGE, +} \ No newline at end of file diff --git a/ui/src/features/components/ErrorDialog/index.js b/ui/src/features/components/ErrorDialog/index.js index 96d450b7e..9d1122cfd 100644 --- a/ui/src/features/components/ErrorDialog/index.js +++ b/ui/src/features/components/ErrorDialog/index.js @@ -1,12 +1,13 @@ import React from 'react'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; +import { OK_BUTTON_MESSAGE, EMPTY_STRING, ERROR_TITLE } from '../../../../constants/constants'; export default (props) => { const { closeDialog, showMessage } = props; const actions = [ @@ -16,7 +17,7 @@ export default (props) => { } return ( { } const displayError = (message) => { - return '' + message; + return EMPTY_STRING + message; }; const displayDescription = (message) => { diff --git a/ui/src/features/get-tests.js b/ui/src/features/get-tests.js index 4a8664e5e..31bc56b80 100644 --- a/ui/src/features/get-tests.js +++ b/ui/src/features/get-tests.js @@ -25,8 +25,10 @@ import { ReactTableComponent } from '../components/ReactTable'; import { getColumns } from './configurationColumn'; import Button from '../components/Button'; import ErrorDialog from './components/ErrorDialog'; +import ActionErrorPopup from './components/ActionErrorPopup'; import _ from 'lodash'; - +import { isTestValid } from '../validators/validate-test'; +import { INVALID_TEST_MESSAGE } from '../../constants/constants' const noDataMsg = 'There is no data to display.'; const errorMsgGetTests = 'Error occurred while trying to get all tests.'; const columnsNames = ['name', 'description', 'updated_at', 'type', 'run_test', 'report', 'edit', 'raw', 'clone', 'delete']; @@ -43,6 +45,7 @@ class getTests extends React.Component { testToDelete: undefined, createTest: false, testForEdit: null, + testActionError: null, sortedTests: [], sortHeader: '' } @@ -59,7 +62,11 @@ class getTests extends React.Component { data && this.onRunTest(data); } else if (path === '/tests/:testId/edit') { const data = this.props.tests.find((test) => test.id === params.testId); - data && this.onEdit(data); + if (!isTestValid(data)) { + this.setTestActionError({errorMessage : INVALID_TEST_MESSAGE }); + } else { + this.onEdit(data); + } } } } @@ -118,13 +125,32 @@ class getTests extends React.Component { this.setState({ openViewTest: data }); }; + updateTestActionError = ({ errorMessage }) => { + this.setState({ + testActionError: errorMessage, + }); + }; + + setTestActionError = ({ errorMessage }) => { + this.updateTestActionError({ errorMessage: errorMessage }) + }; + + resetTestActionError = () => { + this.updateTestActionError({ errorMessage: null }) + }; + onEdit = (data) => { const { match: { params, path }, history } = this.props; - if (path !== '/tests/:testId/edit') { - history.replace(`/tests/${data.id}/edit`) + if (!isTestValid(data)) { + this.setTestActionError({ errorMessage : INVALID_TEST_MESSAGE }); + } + else { + if (path !== '/tests/:testId/edit') { + history.replace(`/tests/${data.id}/edit`) + } + this.setState({ createTest: true, testForEdit: data }); + // this.props.chooseTest(data); } - this.setState({ createTest: true, testForEdit: data }); - // this.props.chooseTest(data); }; onReportView = (data) => { @@ -197,10 +223,16 @@ class getTests extends React.Component { } onCloseErrorDialog = () => { + this.resetTestActionError(); this.props.cleanAllErrors(); }; onClone = (data) => { - this.setState({ createTest: true, testForClone: data }); + if (!isTestValid(data)) { + this.setTestActionError({ errorMessage: INVALID_TEST_MESSAGE }); + } + else { + this.setState({ createTest: true, testForClone: data }); + } }; generateFeedbackMessage = () => { const { createJobSuccess, deleteTestSuccess } = this.props; @@ -228,7 +260,7 @@ class getTests extends React.Component { onClone: this.onClone }); const feedbackMsg = this.generateFeedbackMessage(); - const error = errorOnDeleteTest; + const error = this.state.testActionError || errorOnDeleteTest; return (