Variable key should be validated

Bug description

When trying to add a new variable, after clicking save variable button, sometimes the variable just disappears. And the spinner on the instance header does not disappear. 

Steps to reproduce the behavior

1. Go to a running single instance page.
2. On variables panel, click "Add Variable" button.
3. Type "test" for variable key field (with the quotes).
4. Type some valid value for the value field (ex. 123)
5. Click save variable button.

Problem - Current Behavior

After loading for a while, variable just disappears. And the spinner on the instance header does not disappear. 

Expected behavior

Variable does not disappear after we add it. The spinner always disappears after saving variable. 

Environment and Additional Information

• OS: Mac
• Browser: Chrome 80.0.3987.122

In network panel we see this response returned from backend:

 

{
"id" : "4503599627380675",
"workflowId" : "2251799813695138",
"workflowName" : "complexProcess",
"workflowVersion" : 3,
"startDate" : "2020-02-28T07:30:41.271+0000",
"endDate" : null,
"state" : "INCIDENT",
"bpmnProcessId" : "complexProcess",
"hasActiveOperation" : false,
"operations" : [

{ "id" : "7de415fc-32c3-46b1-8137-fa1e2a73e693", "type" : "UPDATE_VARIABLE", "state" : "FAILED", "errorMessage" : "Unable to process operation: Failed to validate json input '

{\"\"test\"\":123}

' for property 'variables'"
} ]
}

 

 

The problem is that we enter quotes in the key field. This can be validated, save variable might be disabled until we enter a valid key.

 

operation spinner on InstanceHeader component should also disappear for the case "type" : "UPDATE_VARIABLE", "state" : "FAILED"