chore(project): add prettier for code format (#3645)

* chore(project): install prettier and lint-staged

* chore(project): apply prettier to html too

* chore(project): git ignore eslintcache

* chore(project): add a comment about format script

* chore(prettier): update printWidth

* chore(prettier): remove useTabs option

* chore(prettier): add HTML validation

* refactor(prettier): fix closing tags

* feat(prettier): define angular parser for html templates

* style(prettier): run prettier on codebase

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>

app/docker/views/configs/configs.html

@@ -10,12 +10,14 @@
 <div class="row">
   <div class="col-sm-12">
     <configs-datatable
-    title-text="Configs" title-icon="fa-file-code"
-    dataset="ctrl.configs" table-key="configs"
-    order-by="Name" 
-    show-ownership-column="applicationState.application.authentication"
-    remove-action="ctrl.removeAction"
-    refresh-callback="ctrl.getConfigs"
+      title-text="Configs"
+      title-icon="fa-file-code"
+      dataset="ctrl.configs"
+      table-key="configs"
+      order-by="Name"
+      show-ownership-column="applicationState.application.authentication"
+      remove-action="ctrl.removeAction"
+      refresh-callback="ctrl.getConfigs"
     ></configs-datatable>
   </div>
 </div>

app/docker/views/configs/configsController.js

@@ -1,7 +1,6 @@
 import angular from 'angular';
 
 class ConfigsController {
-
   /* @ngInject */
   constructor($state, ConfigService, Notifications, $async) {
     this.$state = $state;

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

@@ -1,7 +1,7 @@
-import _ from "lodash-es";
-import { AccessControlFormData } from "Portainer/components/accessControlForm/porAccessControlFormModel";
+import _ from 'lodash-es';
+import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 
-import angular from "angular";
+import angular from 'angular';
 
 class CreateConfigController {
   /* @ngInject */
@@ -16,14 +16,14 @@ class CreateConfigController {
     this.$async = $async;
 
     this.formValues = {
-      Name: "",
+      Name: '',
       Labels: [],
       AccessControlData: new AccessControlFormData(),
-      ConfigContent: ""
+      ConfigContent: '',
     };
 
     this.state = {
-      formValidationError: ""
+      formValidationError: '',
     };
 
     this.editorUpdate = this.editorUpdate.bind(this);
@@ -38,7 +38,7 @@ class CreateConfigController {
 
     try {
       let data = await this.ConfigService.config(this.$transition$.params().id);
-      this.formValues.Name = data.Name + "_copy";
+      this.formValues.Name = data.Name + '_copy';
       this.formValues.Data = data.Data;
       let labels = _.keys(data.Labels);
       for (let i = 0; i < labels.length; i++) {
@@ -49,12 +49,12 @@ class CreateConfigController {
       this.formValues.displayCodeEditor = true;
     } catch (err) {
       this.formValues.displayCodeEditor = true;
-      this.Notifications.error("Failure", err, "Unable to clone config");
+      this.Notifications.error('Failure', err, 'Unable to clone config');
     }
   }
 
   addLabel() {
-    this.formValues.Labels.push({ name: "", value: "" });
+    this.formValues.Labels.push({ name: '', value: '' });
   }
 
   removeLabel(index) {
@@ -63,7 +63,7 @@ class CreateConfigController {
 
   prepareLabelsConfig(config) {
     let labels = {};
-    this.formValues.Labels.forEach(function(label) {
+    this.formValues.Labels.forEach(function (label) {
       if (label.name && label.value) {
         labels[label.name] = label.value;
       }
@@ -85,12 +85,9 @@ class CreateConfigController {
   }
 
   validateForm(accessControlData, isAdmin) {
-    this.state.formValidationError = "";
-    let error = "";
-    error = this.FormValidator.validateAccessControl(
-      accessControlData,
-      isAdmin
-    );
+    this.state.formValidationError = '';
+    let error = '';
+    error = this.FormValidator.validateAccessControl(accessControlData, isAdmin);
 
     if (error) {
       this.state.formValidationError = error;
@@ -108,8 +105,8 @@ class CreateConfigController {
     const userDetails = this.Authentication.getUserDetails();
     const isAdmin = this.Authentication.isAdmin();
 
-    if (this.formValues.ConfigContent === "") {
-      this.state.formValidationError = "Config content must not be empty";
+    if (this.formValues.ConfigContent === '') {
+      this.state.formValidationError = 'Config content must not be empty';
       return;
     }
 
@@ -124,10 +121,10 @@ class CreateConfigController {
       const resourceControl = data.Portainer.ResourceControl;
       const userId = userDetails.ID;
       await this.ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
-      this.Notifications.success("Config successfully created");
-      this.$state.go("docker.configs", {}, { reload: true });
+      this.Notifications.success('Config successfully created');
+      this.$state.go('docker.configs', {}, { reload: true });
     } catch (err) {
-      this.Notifications.error("Failure", err, "Unable to create config");
+      this.Notifications.error('Failure', err, 'Unable to create config');
     }
   }
 
@@ -137,6 +134,4 @@ class CreateConfigController {
 }
 
 export default CreateConfigController;
-angular
-  .module("portainer.docker")
-  .controller("CreateConfigController", CreateConfigController);
+angular.module('portainer.docker').controller('CreateConfigController', CreateConfigController);

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

@@ -1,8 +1,6 @@
 <rd-header>
   <rd-header-title title-text="Create config"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.configs">Configs</a> &gt; Add config
-  </rd-header-content>
+  <rd-header-content> <a ui-sref="docker.configs">Configs</a> &gt; Add config </rd-header-content>
 </rd-header>
 
 <div class="row">
@@ -14,7 +12,7 @@
           <div class="form-group">
             <label for="config_name" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig">
+              <input type="text" class="form-control" ng-model="ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig" />
             </div>
           </div>
           <!-- !name-input -->
@@ -25,7 +23,7 @@
                 identifier="config-creation-editor"
                 placeholder="Define or paste the content of your config here"
                 yml="false"
-                on-change="ctrl.editorUpdate"
+                on-change="(ctrl.editorUpdate)"
                 value="ctrl.formValues.Data"
               ></code-editor>
             </div>
@@ -44,11 +42,11 @@
               <div ng-repeat="label in ctrl.formValues.Labels" style="margin-top: 2px;">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
                 </div>
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
                 </div>
                 <button class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeLabel($index)">
                   <i class="fa fa-trash" aria-hidden="true"></i>

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

@@ -24,8 +24,12 @@
               <td>ID</td>
               <td>
                 {{ config.Id }}
-                <button authorization="DockerConfigDelete" class="btn btn-xs btn-danger" ng-click="removeConfig(config.Id)"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this config</button>
-                <button authorization="DockerConfigCreate"class="btn btn-xs btn-primary" ui-sref="docker.configs.new({id: config.Id})"><i class="fa fa-copy space-right" aria-hidden="true"></i>Clone config</button>
+                <button authorization="DockerConfigDelete" class="btn btn-xs btn-danger" ng-click="removeConfig(config.Id)"
+                  ><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this config</button
+                >
+                <button authorization="DockerConfigCreate" class="btn btn-xs btn-primary" ui-sref="docker.configs.new({id: config.Id})"
+                  ><i class="fa fa-copy space-right" aria-hidden="true"></i>Clone config</button
+                >
               </td>
             </tr>
             <tr>
@@ -55,11 +59,7 @@
 </div>
 
 <!-- access-control-panel -->
-<por-access-control-panel
-  ng-if="config && applicationState.application.authentication"
-  resource-id="config.Id"
-  resource-control="config.ResourceControl"
-  resource-type="'config'">
+<por-access-control-panel ng-if="config && applicationState.application.authentication" resource-id="config.Id" resource-control="config.ResourceControl" resource-type="'config'">
 </por-access-control-panel>
 <!-- !access-control-panel -->
 
@@ -71,12 +71,7 @@
         <form class="form-horizontal">
           <div class="form-group">
             <div class="col-sm-12">
-              <code-editor
-                identifier="config-editor"
-                yml="false"
-                read-only="true"
-                value="config.Data"
-              ></code-editor>
+              <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,27 +1,31 @@
-angular.module('portainer.docker')
-.controller('ConfigController', ['$scope', '$transition$', '$state', 'ConfigService', 'Notifications',
-function ($scope, $transition$, $state, ConfigService, Notifications) {
+angular.module('portainer.docker').controller('ConfigController', [
+  '$scope',
+  '$transition$',
+  '$state',
+  'ConfigService',
+  'Notifications',
+  function ($scope, $transition$, $state, ConfigService, Notifications) {
+    $scope.removeConfig = function removeConfig(configId) {
+      ConfigService.remove(configId)
+        .then(function success() {
+          Notifications.success('Config successfully removed');
+          $state.go('docker.configs', {});
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to remove config');
+        });
+    };
 
-  $scope.removeConfig = function removeConfig(configId) {
-    ConfigService.remove(configId)
-    .then(function success() {
-      Notifications.success('Config successfully removed');
-      $state.go('docker.configs', {});
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to remove config');
-    });
-  };
+    function initView() {
+      ConfigService.config($transition$.params().id)
+        .then(function success(data) {
+          $scope.config = data;
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to retrieve config details');
+        });
+    }
 
-  function initView() {
-    ConfigService.config($transition$.params().id)
-    .then(function success(data) {
-      $scope.config = data;
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve config details');
-    });
-  }
-
-  initView();
-}]);
+    initView();
+  },
+]);