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/extensions/registry-management/components/registries-repositories-datatable/registryRepositoriesDatatable.html

@@ -2,13 +2,19 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-model-options="{ debounce: 300 }" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-model-options="{ debounce: 300 }"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">
@@ -22,16 +28,18 @@
                 </a>
               </th>
               <th>
-                  Tags count
+                Tags count
               </th>
             </tr>
           </thead>
           <tbody>
-            <tr ng-hide="$ctrl.loading" dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              ng-class="{active: item.Checked}">
+            <tr
+              ng-hide="$ctrl.loading"
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
-                <a ui-sref="portainer.registries.registry.repository({repository: item.Name})"
-                  title="{{ item.Name }}">{{ item.Name }}</a>
+                <a ui-sref="portainer.registries.registry.repository({repository: item.Name})" title="{{ item.Name }}">{{ item.Name }}</a>
               </td>
               <td>{{ item.TagsCount }}</td>
             </tr>
@@ -45,9 +53,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">
@@ -67,4 +73,4 @@
       </div>
     </rd-widget-body>
   </rd-widget>
-</div>
+</div>

app/extensions/registry-management/components/registries-repositories-datatable/registryRepositoriesDatatable.js

@@ -9,6 +9,6 @@ angular.module('portainer.extensions.registrymanagement').component('registryRep
     orderBy: '@',
     reverseOrder: '<',
     paginationAction: '<',
-    loading: '<'
-  }
+    loading: '<',
+  },
 });

app/extensions/registry-management/components/registries-repositories-datatable/registryRepositoriesDatatableController.js

@@ -1,8 +1,9 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.app')
-.controller('RegistryRepositoriesDatatableController', ['$scope', '$controller',
-  function($scope, $controller) {
+angular.module('portainer.app').controller('RegistryRepositoriesDatatableController', [
+  '$scope',
+  '$controller',
+  function ($scope, $controller) {
     var ctrl = this;
 
     angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
@@ -12,16 +13,29 @@ angular.module('portainer.app')
       if (!a || !b) {
         return true;
       }
-      var namesA = a.map( function(x){ return x.Name; } ).sort();
-      var namesB = b.map( function(x){ return x.Name; } ).sort();
+      var namesA = a
+        .map(function (x) {
+          return x.Name;
+        })
+        .sort();
+      var namesB = b
+        .map(function (x) {
+          return x.Name;
+        })
+        .sort();
       return namesA.join(',') !== namesB.join(',');
-  }
+    }
 
-    $scope.$watch(function() { return ctrl.state.filteredDataSet;},
-      function(newValue, oldValue) {
+    $scope.$watch(
+      function () {
+        return ctrl.state.filteredDataSet;
+      },
+      function (newValue, oldValue) {
         if (newValue && areDifferent(oldValue, newValue)) {
-          ctrl.paginationAction(_.filter(newValue, {'TagsCount':0}));
+          ctrl.paginationAction(_.filter(newValue, { TagsCount: 0 }));
         }
-      }, true);
-  }
+      },
+      true
+    );
+  },
 ]);

app/extensions/registry-management/components/registries-repository-tags-datatable/registriesRepositoryTagsDatatable.html

@@ -2,9 +2,7 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
       </div>
       <div class="actionBar" ng-if="$ctrl.advancedFeaturesAvailable">
         <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
@@ -13,7 +11,15 @@
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-model-options="{ debounce: 300 }" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-model-options="{ debounce: 300 }"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -37,15 +43,17 @@
             </tr>
           </thead>
           <tbody>
-            <tr ng-hide="$ctrl.loading" dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              ng-class="{active: item.Checked}">
+            <tr
+              ng-hide="$ctrl.loading"
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>
                 <span class="md-checkbox">
                   <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
-                <a ui-sref="portainer.registries.registry.repository.tag({tag: item.Name})"
-                title="{{ item.Name }}">{{ item.Name }}</a>
+                <a ui-sref="portainer.registries.registry.repository.tag({tag: item.Name})" title="{{ item.Name }}">{{ item.Name }}</a>
               </td>
               <td>{{ item.Os }}/{{ item.Architecture }}</td>
               <td>{{ item.ImageId | trimshasum }}</td>
@@ -57,9 +65,11 @@
                   </a>
                 </span>
                 <span ng-if="item.Modified">
-                  <portainer-tooltip position="bottom" message="Tag can only contain alphanumeric (a-zA-Z0-9) and special _ . - characters. Tag must not start with . - characters."></portainer-tooltip>
-                  <input class="input-sm" type="text" ng-model="item.NewName" on-enter-key="$ctrl.retagAction(item)"
-                    auto-focus ng-click="$event.stopPropagation();" />
+                  <portainer-tooltip
+                    position="bottom"
+                    message="Tag can only contain alphanumeric (a-zA-Z0-9) and special _ . - characters. Tag must not start with . - characters."
+                  ></portainer-tooltip>
+                  <input class="input-sm" type="text" ng-model="item.NewName" on-enter-key="$ctrl.retagAction(item)" auto-focus ng-click="$event.stopPropagation();" />
                   <a class="interactive" ng-click="item.Modified = false; $event.stopPropagation();"><i class="fa fa-times"></i></a>
                   <a class="interactive" ng-click="$ctrl.retagAction(item); $event.stopPropagation();"><i class="fa fa-check-square"></i></a>
                 </span>
@@ -75,9 +85,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">
@@ -97,4 +105,4 @@
       </div>
     </rd-widget-body>
   </rd-widget>
-</div>
+</div>

app/extensions/registry-management/components/registries-repository-tags-datatable/registriesRepositoryTagsDatatable.js

@@ -12,6 +12,6 @@ angular.module('portainer.extensions.registrymanagement').component('registriesR
     retagAction: '<',
     advancedFeaturesAvailable: '<',
     paginationAction: '<',
-    loading: '<'
-  }
+    loading: '<',
+  },
 });

app/extensions/registry-management/components/registries-repository-tags-datatable/registryRepositoriesTagsDatatableController.js

@@ -1,8 +1,9 @@
 import _ from 'lodash-es';
 
-angular.module('portainer.app')
-.controller('RegistryRepositoriesTagsDatatableController', ['$scope', '$controller',
-  function($scope, $controller) {
+angular.module('portainer.app').controller('RegistryRepositoriesTagsDatatableController', [
+  '$scope',
+  '$controller',
+  function ($scope, $controller) {
     angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
     var ctrl = this;
     this.state.orderBy = this.orderBy;
@@ -20,12 +21,17 @@ angular.module('portainer.app')
       return namesA.join(',') !== namesB.join(',');
     }
 
-    $scope.$watch(function() { return ctrl.state.filteredDataSet;},
-      function(newValue, oldValue) {
+    $scope.$watch(
+      function () {
+        return ctrl.state.filteredDataSet;
+      },
+      function (newValue, oldValue) {
         if (newValue && newValue.length && areDifferent(oldValue, newValue)) {
-          ctrl.paginationAction(_.filter(newValue, {'ImageId': ''}));
+          ctrl.paginationAction(_.filter(newValue, { ImageId: '' }));
           ctrl.resetSelectionState();
         }
-      }, true);
-  }
+      },
+      true
+    );
+  },
 ]);