[Hooks] Make sure the owner field is an email

[ededals]

I modified code to use html5 input type email validation.
As the error message was not specified I added Validation message to helper text.

One thing that is strange though is that also [a-zA-Z]+@[a-zA-Z]+ gets validated by default.
I am wondering if this is expected behaviour of html5 input e-mail validation.

I hope I am on the right track :)

[helfi92]

Looks great :) Just minor changes:

diff --git a/src/components/HookForm/index.jsx b/src/components/HookForm/index.jsx
index d33f830..cc800b6 100644
--- a/src/components/HookForm/index.jsx
+++ b/src/components/HookForm/index.jsx
@@ -161,6 +161,7 @@ export default class HookForm extends Component {
     scheduleTextField: '',
     taskValidJson: true,
     triggerSchemaValidJson: true,
+    validation: {},
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -184,11 +185,11 @@ export default class HookForm extends Component {
       taskValidJson: true,
       triggerSchemaValidJson: true,
       validation: {
-        owner:  {
+        owner: {
           error: false,
-          message: "",
+          message: '',
         },
-      }
+      },
     };
   }
 
@@ -340,13 +341,19 @@ export default class HookForm extends Component {
   };
 
   validHook = () => {
-    const { hook, taskValidJson, triggerSchemaValidJson } = this.state;
+    const {
+      hook,
+      taskValidJson,
+      triggerSchemaValidJson,
+      validation,
+    } = this.state;
 
     return (
       hook.hookGroupId &&
       hook.hookId &&
       hook.metadata.name &&
       hook.metadata.owner &&
+      !validation.owner.error &&
       taskValidJson &&
       triggerSchemaValidJson
     );
@@ -367,16 +374,16 @@ export default class HookForm extends Component {
       hook: assocPath(['metadata', 'name'], e.target.value, this.state.hook),
     });
 
-  handleOwnerChange = e =>{
+  handleOwnerChange = e => {
     this.setState({
       hook: assocPath(['metadata', 'owner'], e.target.value, this.state.hook),
-      validation:{
+      validation: {
         owner: {
           error: !e.currentTarget.validity.valid,
           message: e.currentTarget.validationMessage,
         },
       },
-    })
+    });
   };
 
   handleDescriptionChange = e =>
@@ -465,7 +472,7 @@ export default class HookForm extends Component {
           </ListItem>
           <ListItem>
             <TextField
-              error = {validation.owner.error}
+              error={validation.owner.error}
               required
               label="Owner Email"
               name="owner"

Also, if there are any linting errors, you can usually fix them via yarn lint --fix.

[helfi92]

Please add validation: {}, on the initial state object above.

[ededals]

Do I have to add the empty object, or better to instantiate it with owner prop as seen in the comment below. Im asking this because both of the comments are refering to the same code.

[helfi92]

An empty object is good enough.

[helfi92]

We use single quotes for strings and double quotes for jsx. Use single quotes here.

[helfi92]

Add space before the braces.

=> {.

[helfi92]

In the validHook method, you will want to include !validation.owner.error. See the diff.

[helfi92]

Remove spaces before and after the = symbol.

[helfi92]

This was not meant to be removed.

validation: {} was meant to be added above in

state = {
  hook: null,
  // eslint-disable-next-line react/no-unused-state
  previousHook: null,
  taskInput: '',
  triggerSchemaInput: '',
  triggerContextInput: '',
  scheduleTextField: '',
  taskValidJson: true,
  triggerSchemaValidJson: true,
  validation: {},
};

[ededals]

It turns out upstream was ahead of me in code. So i did not see the place you were refering to in code from my local files :) Anyway, I hope everything is Ok now :)

[helfi92]

This should be !validation.owner.error &&.

[helfi92]

error={validation.owner.error}.

[helfi92]

helperText={validation.owner.message}.

[helfi92]

Thank you 🥇