Add rename modal input validation

zeppelin-web/src/components/noteAction/noteAction.service.js

@@ -16,9 +16,9 @@
 
   angular.module('zeppelinWebApp').service('noteActionSrv', noteActionSrv);
 
-  noteActionSrv.$inject = ['websocketMsgSrv', '$location'];
+  noteActionSrv.$inject = ['websocketMsgSrv', '$location', 'renameSrv'];
 
-  function noteActionSrv(websocketMsgSrv, $location) {
+  function noteActionSrv(websocketMsgSrv, $location, renameSrv) {
     this.removeNote = function(noteId, redirectToHome) {
       BootstrapDialog.confirm({
         closable: true,
@@ -49,26 +49,13 @@
     };
 
     this.renameNote = function(noteId, notePath) {
-      showRenameDialog('Rename note', notePath, function(newName) {
-        websocketMsgSrv.renameNote(noteId, newName);
+      renameSrv.openRenameModal({
+        title: 'Rename note',
+        oldName: notePath,
+        callback: function(newName) {
+          websocketMsgSrv.renameNote(noteId, newName);
+        }
       });
     };
-
-    function showRenameDialog(title, currentName, callback) {
-      BootstrapDialog.show({
-        closable: true,
-        title: title,
-        message: '<input type="text" class="form-control" value="' + currentName + '">',
-        buttons: [{
-          label: 'Rename',
-          hotkey: 13,   // the button is clicked when press enter
-          action: function(dialogRef) {
-            var newName = dialogRef.getModalBody().find('input').val().trim();
-            callback(newName);
-            dialogRef.close();
-          }
-        }]
-      });
-    }
   }
 })();

zeppelin-web/src/components/rename/rename.controller.js

@@ -0,0 +1,50 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+(function() {
+
+  angular.module('zeppelinWebApp').controller('RenameCtrl', RenameCtrl);
+
+  RenameCtrl.$inject = ['$scope'];
+
+  function RenameCtrl($scope) {
+    var self = this;
+
+    $scope.params = {newName: ''};
+    $scope.isValid = true;
+
+    $scope.rename = function() {
+      angular.element('#renameModal').modal('hide');
+      self.callback($scope.params.newName);
+    };
+
+    $scope.$on('openRenameModal', function(event, options) {
+      self.validator = options.validator || defaultValidator;
+      self.callback = options.callback || function() {};
+
+      $scope.title = options.title || 'Rename';
+      $scope.params.newName = options.oldName || '';
+      $scope.validate = function() {
+        $scope.isValid = self.validator($scope.params.newName);
+      };
+
+      angular.element('#renameModal').modal('show');
+    });
+
+    function defaultValidator(str) {
+      return !!str.trim();
+    }
+  }
+
+})();

zeppelin-web/src/components/rename/rename.html

@@ -0,0 +1,42 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div id="renameModal" class="modal fade" role="dialog"
+     tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+        <h4 class="modal-title">{{title}}</h4>
+      </div>
+      <div class="modal-body">
+        <label ng-if="isValid">Please enter a new name</label>
+          <label class="text-danger" ng-if="!isValid">Please enter a valid name</label>
+        <div class="form-group" ng-class="{'has-error': !isValid}">
+          <input type="text" class="form-control"
+            ng-model="params.newName" ng-change="validate()"
+            ng-keyup="$event.keyCode == 13 && isValid && rename()" />
+        </div>
+
+      </div>
+      <div class="modal-footer">
+        <div>
+          <button type="button" class="btn btn-default btn-primary"
+            ng-click="rename()" ng-class="{'disabled': !isValid}">
+            Rename
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

zeppelin-web/src/components/rename/rename.service.js

@@ -0,0 +1,35 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+(function() {
+
+  angular.module('zeppelinWebApp').service('renameSrv', renameSrv);
+
+  renameSrv.$inject = ['$rootScope'];
+
+  function renameSrv($rootScope) {
+    var self = this;
+
+    /**
+     * <options schema>
+     * title: string - Modal title
+     * oldName: string - name to initialize input
+     * callback: (newName: string)=>void - callback onButtonClick
+     * validator: (str: string)=>boolean - input validator
+     */
+    self.openRenameModal = function(options) {
+      $rootScope.$broadcast('openRenameModal', options);
+    };
+  }
+})();

zeppelin-web/src/index.html

@@ -93,6 +93,9 @@ limitations under the License.
     <div ng-controller="LoginCtrl as noteimportctrl">
       <div id="login-container" ng-include src="'components/login/login.html'"></div>
     </div>
+    <div ng-controller="RenameCtrl">
+      <div ng-include src="'components/rename/rename.html'"></div>
+    </div>
     <!-- build:js(.) scripts/oldieshim.js -->
     <!--[if lt IE 9]>
     <script src="bower_components/es5-shim/es5-shim.js"></script>
@@ -186,6 +189,8 @@ limitations under the License.
     <script src="components/login/login.controller.js"></script>
     <script src="components/elasticInputCtrl/elasticInput.controller.js"></script>
     <script src="components/noteAction/noteAction.service.js"></script>
+    <script src="components/rename/rename.controller.js"></script>
+    <script src="components/rename/rename.service.js"></script>
     <!-- endbuild -->
   </body>
 </html>