fix(invalid_test): show error popup if test data is invalid (#516)

Zooz · Oct 26, 2020 · fa93612 · fa93612
1 parent 60b1d7f
commit fa93612
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 12 deletions.
diff --git a/ui/constants/constants.js 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,
+}
diff --git 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 = [
     <FlatButton
-      label='OK'
+      label={OK_BUTTON_MESSAGE}
       primary
       onClick={closeDialog}
     />
@@ -16,7 +17,7 @@ export default (props) => {
   }
   return (
     <Dialog
-      title={'Error'}
+      title={ERROR_TITLE}
       actions={actions}
       modal={false}
       open
@@ -30,7 +31,7 @@ export default (props) => {
 }
 
 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
@@ -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 (
         <Page title={'Tests'} description={DESCRIPTION}>
           <Button className={style['create-button']} onClick={() => {
@@ -272,7 +304,6 @@ class getTests extends React.Component {
             onRequestClose={this.handleSnackbarClose}
           />}
           {error && <ErrorDialog closeDialog={this.onCloseErrorDialog} showMessage={error} />}
-
         </Page>
       )
     }

diff --git a/ui/src/validators/validate-test.js b/ui/src/validators/validate-test.js
@@ -0,0 +1,15 @@
+import { createStateForEditTest } from '../features/components/TestForm/utils';
+
+const isTestValid = (test) => {
+  try {
+    createStateForEditTest(test);
+    return true;
+  }
+  catch (e) {
+    return false;
+  }
+}
+
+export {
+  isTestValid,
+}