feat(app): sort environment variables (#4815)

* feat(app): sort environment variables

* feat(k8s/application): improve the sorting for the env variables when creating/editing application

* feat(k8s/application): update the removal of the env var

* feat(docker/service): improve the sorting order for env var in service edition view

app/docker/views/containers/edit/containerController.js

@@ -96,6 +96,7 @@ angular.module('portainer.docker').controller('ContainerController', [
             });
           }
 
+          $scope.container.Config.Env = _.sortBy($scope.container.Config.Env, _.toLower);
           const inSwarm = $scope.container.Config.Labels['com.docker.swarm.service.id'];
           const autoRemove = $scope.container.HostConfig.AutoRemove;
           const admin = Authentication.isAdmin();

app/docker/views/images/edit/imageController.js

@@ -154,6 +154,7 @@ angular.module('portainer.docker').controller('ImageController', [
         .then(function success(data) {
           $scope.image = data.image;
           $scope.history = data.history;
+          $scope.image.Env = _.sortBy($scope.image.Env, _.toLower);
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve image details');

app/docker/views/services/edit/includes/environmentvariables.html

@@ -19,7 +19,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr ng-repeat="var in service.EnvironmentVariables">
+          <tr ng-repeat="var in service.EnvironmentVariables | orderBy: 'originalKey'">
             <td>
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">name</span>
@@ -39,7 +39,7 @@
                   disable-authorization="DockerServiceUpdate"
                 />
                 <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable(service, $index)" ng-disabled="isUpdating">
+                  <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable(service, var)" ng-disabled="isUpdating">
                     <i class="fa fa-trash" aria-hidden="true"></i>
                   </button>
                 </span>

app/docker/views/services/edit/serviceController.js

@@ -115,8 +115,9 @@ angular.module('portainer.docker').controller('ServiceController', [
       service.EnvironmentVariables.push({ key: '', value: '', originalValue: '' });
       updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
     };
-    $scope.removeEnvironmentVariable = function removeEnvironmentVariable(service, index) {
+    $scope.removeEnvironmentVariable = function removeEnvironmentVariable(service, item) {
-      var removedElement = service.EnvironmentVariables.splice(index, 1);
+      const index = service.EnvironmentVariables.indexOf(item);
+      const removedElement = service.EnvironmentVariables.splice(index, 1);
       if (removedElement !== null) {
         updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
       }

app/kubernetes/helpers/application/index.js

@@ -130,6 +130,7 @@ class KubernetesApplicationHelper {
       res.Name = item.name;
       res.Value = item.value;
       res.IsNew = false;
+      res.NameIndex = item.name;
       return res;
     });
     return _.without(envVariables, undefined);

app/kubernetes/models/application/formValues.js

@@ -79,6 +79,7 @@ const _KubernetesApplicationEnvironmentVariableFormValue = Object.freeze({
   IsSecret: false,
   NeedsDeletion: false,
   IsNew: true,
+  NameIndex: '', // keep the original name for sorting
 });
 
 export class KubernetesApplicationEnvironmentVariableFormValue {

app/kubernetes/views/applications/create/createApplication.html

@@ -142,7 +142,7 @@
               </div>
 
               <div class="col-sm-12 form-inline" style="margin-top: 10px;">
-                <div ng-repeat="envVar in ctrl.formValues.EnvironmentVariables" style="margin-top: 2px;">
+                <div ng-repeat="envVar in ctrl.formValues.EnvironmentVariables | orderBy: 'NameIndex'" style="margin-top: 2px;">
                   <div class="col-sm-4 input-group input-group-sm" style="vertical-align: top;">
                     <div class="input-group col-sm-12 input-group-sm" ng-class="{ striked: envVar.NeedsDeletion }">
                       <span class="input-group-addon">name</span>
@@ -191,10 +191,10 @@
                   </div>
 
                   <div class="input-group col-sm-2 input-group-sm" ng-if="ctrl.formValues.Containers.length <= 1">
-                    <button ng-if="!envVar.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeEnvironmentVariable($index)">
+                    <button ng-if="!envVar.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeEnvironmentVariable(envVar)">
                       <i class="fa fa-trash-alt" aria-hidden="true"></i>
                     </button>
-                    <button ng-if="envVar.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreEnvironmentVariable($index)">
+                    <button ng-if="envVar.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreEnvironmentVariable(envVar)">
                       <i class="fa fa-trash-restore" aria-hidden="true"></i>
                     </button>
                   </div>

app/kubernetes/views/applications/create/createApplicationController.js

@@ -165,15 +165,19 @@ class KubernetesCreateApplicationController {
     this.formValues.EnvironmentVariables.push(new KubernetesApplicationEnvironmentVariableFormValue());
   }
 
-  restoreEnvironmentVariable(index) {
+  restoreEnvironmentVariable(item) {
-    this.formValues.EnvironmentVariables[index].NeedsDeletion = false;
+    item.NeedsDeletion = false;
   }
 
-  removeEnvironmentVariable(index) {
+  removeEnvironmentVariable(item) {
-    if (this.state.isEdit && !this.formValues.EnvironmentVariables[index].IsNew) {
+    const index = this.formValues.EnvironmentVariables.indexOf(item);
-      this.formValues.EnvironmentVariables[index].NeedsDeletion = true;
+    if (index !== -1) {
-    } else {
+      const envVar = this.formValues.EnvironmentVariables[index];
-      this.formValues.EnvironmentVariables.splice(index, 1);
+      if (!envVar.IsNew) {
+        envVar.NeedsDeletion = true;
+      } else {
+        this.formValues.EnvironmentVariables.splice(index, 1);
+      }
     }
     this.onChangeEnvironmentName();
   }

app/kubernetes/views/applications/edit/application.html

@@ -406,7 +406,7 @@
               <td style="width: 25%;">Configuration</td>
             </tr>
             <tbody ng-repeat="container in ctrl.application.Containers" style="border-top: 0;">
-              <tr ng-repeat="envvar in container.Env track by $index">
+              <tr ng-repeat="envvar in container.Env | orderBy: 'name'">
                 <td>
                   {{ container.Name }}
                   <span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT"