continuous validation on create new connector

Author: Antwnis

src/kafka-connect/create-connector/create-connector.controller.js

@@ -31,15 +31,28 @@ angularAPP.controller('CreateConnectorCtrl', function ($scope, $rootScope, $http
   $scope.isDisabledTab = function(index) { return (index == $scope.selectedTabIndex) ? 'false' : 'true'; }
 
 
+  $scope.aceLoaded = function (_editor) {
+    console.log("Ace for create-connector loaded");
+    $scope.editor = _editor;
+    $scope.editor.$blockScrolling = Infinity;
+    $scope.acePropertyFileSession = _editor.getSession();
+    var lines = 15;//$scope.connectorDetails.connectorDetailsInString.split("\n").length;
+    _editor.setOptions({
+      minLines: lines,
+      maxLines: lines,
+      highlightActiveLine: false
+    });
+  };
+
 
   //If user changes config from the editor
   $scope.$watch('formValuesPerSection', function() {
  if ($scope.formValuesPerSection) {
-      console.log('test', $scope.formValuesPerSection)
+      //console.log('test', $scope.formValuesPerSection)
       $scope.formValuesPerSection = $scope.formValuesPerSection.replace("\r", "");
-      console.log('test', $scope.formValuesPerSection)
+      //console.log('test', $scope.formValuesPerSection)
       var flatValuesArray = $scope.formValuesPerSection.split("\n");
-      $scope.curlCommand = NewConnectorFactory.getCurlCommand(flatValuesArray);
+      validateConnectorFn();
   }
   });
 
@@ -93,6 +106,7 @@ angularAPP.controller('CreateConnectorCtrl', function ($scope, $rootScope, $http
                   });
                   if(errorConfigs == 0) {
                       $scope.validConfig = constants.VIEW_MESSAGE_CONNECTOR_VALID;
+                      $scope.curlCommand = NewConnectorFactory.getCurlCommand(flatValuesArray);
                       deferred.resolve(constants.VIEW_MESSAGE_CONNECTOR_VALID);
                   } else {
                       deferred.reject(errorConfigs);
@@ -134,6 +148,7 @@ angularAPP.controller('CreateConnectorCtrl', function ($scope, $rootScope, $http
                    $rootScope.newConnectorChanges = true;
                 });
             }, function (data, reason) {
+              $scope.validConfig = "Please fix the below issues";
               console.log("I can NOT post the connector - as validation errors exist");
           });
 

src/kafka-connect/create-connector/create-connector.html

@@ -47,13 +47,13 @@ <h3 style="font-size:12px;padding:0px; margin:0px">{{connector.name}}</h3>
                 <!--Show Property file-->
                 <div id="propertyFile" ng-hide="showCurl"
                      ng-model="formValuesPerSection" ng-readonly="false"
-                     style="background-color:rgba(0, 128, 0, 0.0392157);"
                      ui-ace="{
                            useWrapMode: true,
                            mode: 'properties',
                            showPrintMargin: false,
                            firstLineNumber: 1,
-                           blockScrolling: Infinity
+                           blockScrolling: Infinity,
+                           onLoad: aceLoaded
                     }"></div>
                 <!--Show Curl command-->
                 <div id="curlCommand" ng-if="showCurl"
@@ -73,11 +73,8 @@ <h3 style="font-size:12px;padding:0px; margin:0px">{{connector.name}}</h3>
                     <md-button ng-hide="connector.isUndefined || toggleEditor " ng-disabled="forms.cForm.$invalid" ng-click="previousTab()">
                         <i class="fa fa-angle-double-left" aria-hidden="true"></i> Back
                     </md-button>
-                    <md-button ng-click="validateConnector()">
-                        Validate
-                    </md-button>
-                    <md-button ng-disabled="forms.cForm.$invalid" ng-click="validateAndCreateConnector()">
-                        Validate and Create
+                    <md-button ng-disabled="errorConfigs.length != 0" ng-click="validateAndCreateConnector()">
+                        Create
                     </md-button>
                 </md-card-actions>
 

src/kafka-connect/view/view.controller.js

@@ -97,6 +97,7 @@ angularAPP.controller('ConnectorDetailCtrl', function ($rootScope, $scope, $rout
   }
 
   $scope.aceLoaded = function (_editor) {
+    console.log("Ace loaded");
     $scope.editor = _editor;
     $scope.editor.$blockScrolling = Infinity;
     $scope.acePropertyFileSession = _editor.getSession();