ZEPPELIN-928: fix flaky ZeppelinIT test for Spark interpreter

zeppelin-server/src/test/java/org/apache/zeppelin/integration/ZeppelinIT.java

@@ -200,13 +200,13 @@ public void testSparkInterpreterDependencyLoading() throws Exception {
       interpreterLink.click();
 
       // add new dependency to spark interpreter
-      driver.findElement(By.xpath("//div[h3[text()[contains(.,'spark')]]]//button[contains(.,'edit')]")).sendKeys(Keys.ENTER);
+      driver.findElement(By.xpath("//div[@id='spark']//button[contains(.,'edit')]")).sendKeys(Keys.ENTER);
 
       WebElement depArtifact = pollingWait(By.xpath("//input[@ng-model='setting.depArtifact']"),
           MAX_BROWSER_TIMEOUT_SEC);
       String artifact = "org.apache.commons:commons-csv:1.1";
       depArtifact.sendKeys(artifact);
-      driver.findElement(By.xpath("//div[contains(@class,'box')][contains(.,'%spark')]//form//button[1]")).click();
+      driver.findElement(By.xpath("//div[@id='spark']//form//button[1]")).click();
       driver.findElement(By.xpath("//div[@class='modal-dialog'][contains(.,'Do you want to update this interpreter and restart with new settings?')]" +
           "//div[@class='modal-footer']//button[contains(.,'OK')]")).click();
 
@@ -236,11 +236,11 @@ public void testSparkInterpreterDependencyLoading() throws Exception {
 
       // reset dependency
       interpreterLink.click();
-      driver.findElement(By.xpath("//div[h3[text()[contains(.,'spark')]]]//button[contains(.,'edit')]")).sendKeys(Keys.ENTER);
+      driver.findElement(By.xpath("//div[@id='spark']//button[contains(.,'edit')]")).sendKeys(Keys.ENTER);
       WebElement testDepRemoveBtn = pollingWait(By.xpath("//tr[descendant::text()[contains(.,'" +
           artifact + "')]]/td[3]/div"), MAX_IMPLICIT_WAIT);
       testDepRemoveBtn.click();
-      driver.findElement(By.xpath("//div[contains(@class,'box')][contains(.,'%spark')]//form//button[1]")).click();
+      driver.findElement(By.xpath("//div[@id='spark']//form//button[1]")).click();
       driver.findElement(By.xpath("//div[@class='modal-dialog'][contains(.,'Do you want to update this interpreter and restart with new settings?')]" +
           "//div[@class='modal-footer']//button[contains(.,'OK')]")).click();
     } catch (Exception e) {

zeppelin-web/src/app/interpreter/interpreter-create/interpreter-create.html

@@ -24,7 +24,7 @@ <h4>Create new interpreter</h4>
                  pu-elastic-input-minwidth="180px" ng-model="newInterpreterSetting.name" />
         </div>
 
-        <b>Interpreter</b>
+        <b>Interpreter group</b>
         <div class="form-group"
              style="width:180px">
           <select class="form-control input-sm" ng-model="newInterpreterSetting.group"

zeppelin-web/src/app/interpreter/interpreter.controller.js

@@ -212,11 +212,12 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
   };
 
   $scope.addNewInterpreterSetting = function() {
-    if (!$scope.newInterpreterSetting.name || !$scope.newInterpreterSetting.group) {
+    //user input validation on interpreter creation
+    if (!$scope.newInterpreterSetting.name.trim() || !$scope.newInterpreterSetting.group) {
       BootstrapDialog.alert({
         closable: true,
         title: 'Add interpreter',
-        message: 'Please determine name and interpreter'
+        message: 'Please fill in interpreter name and choose a group'
       });
       return;
     }

zeppelin-web/src/app/interpreter/interpreter.html

@@ -88,7 +88,7 @@ <h4>Repositories</h4>
 
 <div class="box width-full home"
      ng-repeat="setting in interpreterSettings | orderBy: 'group' | filter: searchInterpreter">
-  <div>
+  <div id="{{setting.name | lowercase}}">
     <div class="row interpreter">
       <div class="col-md-12">
         <h3 class="interpreter-title">{{setting.name}}