refactor(code-editor): introduce code-editor component (#1674)

* refactor(code-editor): introduce code-editor component

* refactor(code-editor): add some extra validation

app/docker/views/configs/create/createConfigController.js

@@ -1,11 +1,12 @@
 angular.module('portainer.docker')
-.controller('CreateConfigController', ['$scope', '$state', '$document', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService', 'CodeMirrorService',
+.controller('CreateConfigController', ['$scope', '$state', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService',
-function ($scope, $state, $document, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService, CodeMirrorService) {
+function ($scope, $state, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
 
   $scope.formValues = {
     Name: '',
     Labels: [],
-    AccessControlData: new AccessControlFormData()
+    AccessControlData: new AccessControlFormData(),
+    ConfigContent: ''
   };
 
   $scope.state = {
@@ -31,9 +32,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
   }
 
   function prepareConfigData(config) {
-    // The codemirror editor does not work with ng-model so we need to retrieve
+    var configData = $scope.formValues.ConfigContent;
-    // the value directly from the editor.
-    var configData = $scope.editor.getValue();
     config.Data = btoa(unescape(encodeURIComponent(configData)));
   }
 
@@ -62,6 +61,11 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
     var userDetails = Authentication.getUserDetails();
     var isAdmin = userDetails.role === 1;
 
+    if ($scope.formValues.ConfigContent === '') {
+      $scope.state.formValidationError = 'Config content must not be empty';
+      return;
+    }
+
     if (!validateForm(accessControlData, isAdmin)) {
       return;
     }
@@ -83,14 +87,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
     });
   };
 
-  function initView() {
+  $scope.editorUpdate = function(cm) {
-    $document.ready(function() {
+    $scope.formValues.ConfigContent = cm.getValue();
-      var webEditorElement = $document[0].getElementById('config-editor', false);
+  };
-      if (webEditorElement) {
-        $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, false);
-      }
-    });
-  }
-
-  initView();
 }]);

app/docker/views/configs/create/createconfig.html

@@ -21,7 +21,12 @@
           <!-- config-data -->
           <div class="form-group">
             <div class="col-sm-12">
-              <textarea id="config-editor" class="form-control"></textarea>
+              <code-editor
+                identifier="config-creation-editor"
+                placeholder="Define or paste the content of your config here"
+                yml="false"
+                on-change="editorUpdate"
+              ></code-editor>
             </div>
           </div>
           <!-- !config-data -->
@@ -62,6 +67,7 @@
           <div class="form-group">
             <div class="col-sm-12">
               <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name" ng-click="create()">Create config</button>
+              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
             </div>
           </div>
           <!-- !actions -->

app/docker/views/configs/edit/config.html

@@ -70,7 +70,12 @@
         <form class="form-horizontal">
           <div class="form-group">
             <div class="col-sm-12">
-              <textarea id="config-editor" ng-model="config.Data" class="form-control"></textarea>
+              <code-editor
+                identifier="config-editor"
+                yml="false"
+                read-only="true"
+                value="config.Data"
+              ></code-editor>
             </div>
           </div>
         </form>

app/docker/views/configs/edit/configController.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker')
-.controller('ConfigController', ['$scope', '$transition$', '$state',  '$document', 'ConfigService', 'Notifications', 'CodeMirrorService',
+.controller('ConfigController', ['$scope', '$transition$', '$state', 'ConfigService', 'Notifications',
-function ($scope, $transition$, $state, $document, ConfigService, Notifications, CodeMirrorService) {
+function ($scope, $transition$, $state, ConfigService, Notifications) {
 
   $scope.removeConfig = function removeConfig(configId) {
     ConfigService.remove(configId)
@@ -13,20 +13,10 @@ function ($scope, $transition$, $state, $document, ConfigService, Notifications,
     });
   };
 
-  function initEditor() {
-    $document.ready(function() {
-      var webEditorElement = $document[0].getElementById('config-editor');
-      if (webEditorElement) {
-        $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, true);
-      }
-    });
-  }
-
   function initView() {
     ConfigService.config($transition$.params().id)
     .then(function success(data) {
       $scope.config = data;
-      initEditor();
     })
     .catch(function error(err) {
       Notifications.error('Failure', err, 'Unable to retrieve config details');

app/docker/views/stacks/create/createStackController.js

@@ -1,14 +1,10 @@
 angular.module('portainer.docker')
-.controller('CreateStackController', ['$scope', '$state', '$document', 'StackService', 'CodeMirrorService', 'Authentication', 'Notifications', 'FormValidator', 'ResourceControlService', 'FormHelper',
+.controller('CreateStackController', ['$scope', '$state', 'StackService', 'Authentication', 'Notifications', 'FormValidator', 'ResourceControlService', 'FormHelper',
-function ($scope, $state, $document, StackService, CodeMirrorService, Authentication, Notifications, FormValidator, ResourceControlService, FormHelper) {
+function ($scope, $state, StackService, Authentication, Notifications, FormValidator, ResourceControlService, FormHelper) {
-
-  // Store the editor content when switching builder methods
-  var editorContent = '';
-  var editorEnabled = true;
 
   $scope.formValues = {
     Name: '',
-    StackFileContent: '# Define or paste the content of your docker-compose file here',
+    StackFileContent: '',
     StackFile: null,
     RepositoryURL: '',
     Env: [],
@@ -42,15 +38,11 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
     return true;
   }
 
-  function createStack(name) {
+  function createStack(name, method) {
-    var method = $scope.state.Method;
     var env = FormHelper.removeInvalidEnvVars($scope.formValues.Env);
 
     if (method === 'editor') {
-      // The codemirror editor does not work with ng-model so we need to retrieve
+      var stackFileContent = $scope.formValues.StackFileContent;
-      // the value directly from the editor.
-      var stackFileContent = $scope.editor.getValue();
-
       return StackService.createStackFromFileContent(name, stackFileContent, env);
     } else if (method === 'upload') {
       var stackFile = $scope.formValues.StackFile;
@@ -64,18 +56,24 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
 
   $scope.deployStack = function () {
     var name = $scope.formValues.Name;
+    var method = $scope.state.Method;
 
     var accessControlData = $scope.formValues.AccessControlData;
     var userDetails = Authentication.getUserDetails();
     var isAdmin = userDetails.role === 1;
     var userId = userDetails.ID;
 
+    if (method === 'editor' && $scope.formValues.StackFileContent === '') {
+      $scope.state.formValidationError = 'Stack file content must not be empty';
+      return;
+    }
+
     if (!validateForm(accessControlData, isAdmin)) {
       return;
     }
 
     $scope.state.actionInProgress = true;
-    createStack(name)
+    createStack(name, method)
     .then(function success(data) {
       Notifications.success('Stack successfully deployed');
     })
@@ -96,33 +94,7 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
     });
   };
 
-  function enableEditor(value) {
+  $scope.editorUpdate = function(cm) {
-    $document.ready(function() {
+    $scope.formValues.StackFileContent = cm.getValue();
-      var webEditorElement = $document[0].getElementById('web-editor');
-      if (webEditorElement) {
-        $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, true, false);
-        if (value) {
-          $scope.editor.setValue(value);
-        }
-      }
-    });
-  }
-
-  $scope.toggleEditor = function() {
-    if (!editorEnabled) {
-      enableEditor(editorContent);
-      editorEnabled = true;
-    }
   };
-
-  $scope.saveEditorContent = function() {
-    editorContent = $scope.editor.getValue();
-    editorEnabled = false;
-  };
-
-  function initView() {
-    enableEditor();
-  }
-
-  initView();
 }]);

app/docker/views/stacks/create/createstack.html

@@ -31,7 +31,7 @@
           <div class="form-group" style="margin-bottom: 0">
             <div class="boxselector_wrapper">
               <div>
-                <input type="radio" id="method_editor" ng-model="state.Method" value="editor" ng-click="toggleEditor(state.Method)">
+                <input type="radio" id="method_editor" ng-model="state.Method" value="editor">
                 <label for="method_editor">
                   <div class="boxselector_header">
                     <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
@@ -41,7 +41,7 @@
                 </label>
               </div>
               <div>
-                <input type="radio" id="method_upload" ng-model="state.Method" value="upload" ng-click="saveEditorContent()">
+                <input type="radio" id="method_upload" ng-model="state.Method" value="upload">
                 <label for="method_upload">
                   <div class="boxselector_header">
                     <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
@@ -51,7 +51,7 @@
                 </label>
               </div>
               <div>
-                <input type="radio" id="method_repository" ng-model="state.Method" value="repository" ng-click="saveEditorContent()">
+                <input type="radio" id="method_repository" ng-model="state.Method" value="repository">
                 <label for="method_repository">
                   <div class="boxselector_header">
                     <i class="fa fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
@@ -64,7 +64,7 @@
           </div>
           <!-- !build-method -->
           <!-- web-editor -->
-          <div ng-if="state.Method === 'editor'">
+          <div ng-show="state.Method === 'editor'">
             <div class="col-sm-12 form-section-title">
               Web editor
             </div>
@@ -75,13 +75,18 @@
             </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <textarea id="web-editor" class="form-control" ng-model="formValues.StackFileContent" placeholder='version: "3"'></textarea>
+                <code-editor
+                  identifier="stack-creation-editor"
+                  placeholder="# Define or paste the content of your docker-compose file here"
+                  yml="true"
+                  on-change="editorUpdate"
+                ></code-editor>
               </div>
             </div>
           </div>
           <!-- !web-editor -->
           <!-- upload -->
-          <div ng-if="state.Method === 'upload'">
+          <div ng-show="state.Method === 'upload'">
             <div class="col-sm-12 form-section-title">
               Upload
             </div>
@@ -102,7 +107,7 @@
           </div>
           <!-- !upload -->
           <!-- repository -->
-          <div ng-if="state.Method === 'repository'">
+          <div ng-show="state.Method === 'repository'">
             <div class="col-sm-12 form-section-title">
               Git repository
             </div>
@@ -167,7 +172,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || (state.Method === 'editor' && !formValues.StackFileContent)
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress
               || (state.Method === 'upload' && !formValues.StackFile)
               || (state.Method === 'repository' && (!formValues.RepositoryURL || !formValues.RepositoryPath))
               || !formValues.Name" ng-click="deployStack()" button-spinner="state.actionInProgress">

app/docker/views/stacks/edit/stack.html

@@ -57,7 +57,13 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <textarea id="web-editor" class="form-control" ng-model="stackFileContent" placeholder='version: "3"'></textarea>
+              <code-editor
+                identifier="stack-editor"
+                placeholder="# Define or paste the content of your docker-compose file here"
+                yml="true"
+                on-change="editorUpdate"
+                value="stackFileContent"
+              ></code-editor>
             </div>
           </div>
           <div class="col-sm-12 form-section-title">

app/docker/views/stacks/edit/stackController.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker')
-.controller('StackController', ['$q', '$scope', '$state', '$transition$', '$document', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ServiceHelper', 'CodeMirrorService', 'Notifications', 'FormHelper', 'EndpointProvider',
+.controller('StackController', ['$q', '$scope', '$state', '$transition$', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ServiceHelper', 'Notifications', 'FormHelper', 'EndpointProvider',
-function ($q, $scope, $state, $transition$, $document, StackService, NodeService, ServiceService, TaskService, ServiceHelper, CodeMirrorService, Notifications, FormHelper, EndpointProvider) {
+function ($q, $scope, $state, $transition$, StackService, NodeService, ServiceService, TaskService, ServiceHelper, Notifications, FormHelper, EndpointProvider) {
 
   $scope.state = {
     actionInProgress: false,
@@ -12,9 +12,7 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
   };
 
   $scope.deployStack = function () {
-    // The codemirror editor does not work with ng-model so we need to retrieve
+    var stackFile = $scope.stackFileContent;
-    // the value directly from the editor.
-    var stackFile = $scope.editor.getValue();
     var env = FormHelper.removeInvalidEnvVars($scope.stack.Env);
     var prune = $scope.formValues.Prune;
 
@@ -63,13 +61,6 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
     .then(function success(data) {
       $scope.stackFileContent = data.stackFile;
 
-      $document.ready(function() {
-        var webEditorElement = $document[0].getElementById('web-editor');
-        if (webEditorElement) {
-          $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, true, false);
-        }
-      });
-
       $scope.nodes = data.nodes;
 
       var services = data.services;
@@ -89,5 +80,9 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
     });
   }
 
+  $scope.editorUpdate = function(cm) {
+    $scope.stackFileContent = cm.getValue();
+  };
+
   initView();
 }]);

app/portainer/components/code-editor/code-editor.js

@@ -0,0 +1,12 @@
+angular.module('portainer.app').component('codeEditor', {
+  templateUrl: 'app/portainer/components/code-editor/codeEditor.html',
+  controller: 'CodeEditorController',
+  bindings: {
+    identifier: '@',
+    placeholder: '@',
+    yml: '<',
+    readOnly: '<',
+    onChange: '<',
+    value: '<'
+  }
+});

app/portainer/components/code-editor/codeEditor.html

@@ -0,0 +1 @@
+<textarea id="{{ $ctrl.identifier }}" class="form-control" placeholder="{{ $ctrl.placeholder }}"></textarea>

app/portainer/components/code-editor/codeEditorController.js

@@ -0,0 +1,20 @@
+angular.module('portainer.app')
+.controller('CodeEditorController', ['$document', 'CodeMirrorService',
+function ($document, CodeMirrorService) {
+  var ctrl = this;
+
+  this.$onInit = function() {
+    $document.ready(function() {
+      var editorElement = $document[0].getElementById(ctrl.identifier);
+      if (editorElement) {
+        ctrl.editor = CodeMirrorService.applyCodeMirrorOnElement(editorElement, ctrl.yml, ctrl.readOnly);
+        if (ctrl.onChange) {
+          ctrl.editor.on('change', ctrl.onChange);
+        }
+        if (ctrl.value) {
+          ctrl.editor.setValue(ctrl.value);
+        }
+      }
+    });
+  };
+}]);

app/portainer/services/stateManager.js

@@ -110,7 +110,6 @@ function StateManagerFactory($q, SystemService, InfoHelper, LocalStorage, Settin
 
 
   function assignExtensions(endpointExtensions) {
-    console.log(JSON.stringify(endpointExtensions, null, 4));
     var extensions = [];
 
     for (var i = 0; i < endpointExtensions.length; i++) {

vendor.yml

@@ -17,6 +17,7 @@ js:
   - node_modules/codemirror/mode/yaml/yaml.js
   - node_modules/codemirror/addon/lint/lint.js
   - node_modules/codemirror/addon/lint/yaml-lint.js
+  - node_modules/codemirror/addon/display/placeholder.js
   minified:
   - node_modules/jquery/dist/jquery.min.js
   - node_modules/bootstrap/dist/js/bootstrap.min.js
@@ -34,6 +35,7 @@ js:
   - node_modules/codemirror/mode/yaml/yaml.js
   - node_modules/codemirror/addon/lint/lint.js
   - node_modules/codemirror/addon/lint/yaml-lint.js
+  - node_modules/codemirror/addon/display/placeholder.js
 css:
   regular:
   - node_modules/bootstrap/dist/css/bootstrap.css