feat(UX): introduce new env variables UI (#4175)

* feat(app): introduce new env vars ui

feat(app): introduce new env vars ui

feat(UX): WIP new env variables UI

feat(UX): update button and placeholder

feat(UX): mention .env file in message

feat(UX): allow add/remove value & load correctly

feat(UX): restrict filesize to 1MB

feat(UX): vertical align error message

feat(UX): fill UI from file & when switching modes

feat(UX): strip un-needed newline character

feat(UX): introduce component to other views

feat(UX): fix title alignment

feat(UX): only populate editor on mode switch when key exists

feat(UX): prevent trimming of whitespace on values

feat(UX): change editor to async

feat(UX): add message describing use

feat(UX): Refactor variable text to editorText

refactor(app): rename env vars controller

refactor(app): move env var explanation to parent

refactor(app): order env var panels

refactor(app): move simple env vars mode to component

refactor(app): parse env vars

refactor(app): move styles to css

refactor(app): rename functions

refactor(container): parse env vars

refactor(env-vars): move utils to helper module

refactor(env-vars): use util function for parse dot env file

fix(env-vars): ignore comments

refactor(services): use env vars utils

refactor(env-vars): rename files

refactor(env-panel): use utils

style(stack): revert EnvContent to Env

style(service): revert EnvContent to Env

style(container): revert EnvContent to Env

refactor(env-vars): support default value

refactor(service): use new env var component

refactor(env-var): use one way data flow

refactor(containers): remove unused function

* fix(env-vars): prevent using non .env files

* refactor(env-vars): move env vars items to a component

* feat(app): fixed env vars form validation in Stack

* feat(services): disable env form submit if invalid

* fix(app): show key pairs correctly

* fix(env-var): use the same validation as with kubernetes

* fix(env-vars): parse env var

Co-authored-by: Chaim Lev-Ari <chiptus@gmail.com>
Co-authored-by: Felix Han <felix.han@portainer.io>

app/docker/helpers/serviceHelper.js

@@ -67,39 +67,6 @@ angular.module('portainer.docker').factory('ServiceHelper', [
       return [];
     };
 
-    helper.translateEnvironmentVariables = function (env) {
-      if (env) {
-        var variables = [];
-        env.forEach(function (variable) {
-          var idx = variable.indexOf('=');
-          var keyValue = [variable.slice(0, idx), variable.slice(idx + 1)];
-          var originalValue = keyValue.length > 1 ? keyValue[1] : '';
-          variables.push({
-            key: keyValue[0],
-            value: originalValue,
-            originalKey: keyValue[0],
-            originalValue: originalValue,
-            added: true,
-          });
-        });
-        return variables;
-      }
-      return [];
-    };
-
-    helper.translateEnvironmentVariablesToEnv = function (env) {
-      if (env) {
-        var variables = [];
-        env.forEach(function (variable) {
-          if (variable.key && variable.key !== '') {
-            variables.push(variable.key + '=' + variable.value);
-          }
-        });
-        return variables;
-      }
-      return [];
-    };
-
     helper.translatePreferencesToKeyValue = function (preferences) {
       if (preferences) {
         var keyValuePreferences = [];

app/docker/views/containers/create/createContainerController.js

@@ -1,5 +1,8 @@
 import _ from 'lodash-es';
+
+import * as envVarsUtils from '@/portainer/helpers/env-vars';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+
 import { ContainerCapabilities, ContainerCapability } from '../../../models/containerCapabilities';
 import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
 import { ContainerDetailsViewModel } from '../../../models/container';
@@ -78,6 +81,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       MemoryReservation: 0,
       CmdMode: 'default',
       EntrypointMode: 'default',
+      Env: [],
       NodeName: null,
       capabilities: [],
       Sysctls: [],
@@ -95,6 +99,11 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       pullImageValidity: true,
     };
 
+    $scope.handleEnvVarChange = handleEnvVarChange;
+    function handleEnvVarChange(value) {
+      $scope.formValues.Env = value;
+    }
+
     $scope.refreshSlider = function () {
       $timeout(function () {
         $scope.$broadcast('rzSliderForceRender');
@@ -153,14 +162,6 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       $scope.formValues.Volumes.splice(index, 1);
     };
 
-    $scope.addEnvironmentVariable = function () {
-      $scope.config.Env.push({ name: '', value: '' });
-    };
-
-    $scope.removeEnvironmentVariable = function (index) {
-      $scope.config.Env.splice(index, 1);
-    };
-
     $scope.addPortBinding = function () {
       $scope.config.HostConfig.PortBindings.push({ hostPort: '', containerPort: '', protocol: 'tcp' });
     };
@@ -254,13 +255,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
     }
 
     function prepareEnvironmentVariables(config) {
-      var env = [];
-      config.Env.forEach(function (v) {
-        if (v.name && v.value) {
-          env.push(v.name + '=' + v.value);
-        }
-      });
-      config.Env = env;
+      config.Env = envVarsUtils.convertToArrayOfStrings($scope.formValues.Env);
     }
 
     function prepareVolumes(config) {
@@ -537,14 +532,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
     }
 
     function loadFromContainerEnvironmentVariables() {
-      var envArr = [];
-      for (var e in $scope.config.Env) {
-        if ({}.hasOwnProperty.call($scope.config.Env, e)) {
-          var arr = $scope.config.Env[e].split(/\=(.*)/);
-          envArr.push({ name: arr[0], value: arr[1] });
-        }
-      }
-      $scope.config.Env = envArr;
+      $scope.formValues.Env = envVarsUtils.parseArrayOfStrings($scope.config.Env);
     }
 
     function loadFromContainerLabels() {

app/docker/views/containers/create/createcontainer.html

@@ -583,37 +583,13 @@
           <!-- !tab-labels -->
           <!-- tab-env -->
           <div class="tab-pane" id="env">
-            <form class="form-horizontal" style="margin-top: 15px;">
-              <!-- environment-variables -->
-              <div class="form-group">
-                <div class="col-sm-12" style="margin-top: 5px;">
-                  <label class="control-label text-left">Environment variables</label>
-                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addEnvironmentVariable()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add environment variable
-                  </span>
-                </div>
-                <!-- environment-variable-input-list -->
-                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
-                  <div ng-repeat="variable in config.Env" 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="variable.name" placeholder="e.g. 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="variable.value" placeholder="e.g. bar" />
-                    </div>
-                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable($index)">
-                      <i class="fa fa-trash" aria-hidden="true"></i>
-                    </button>
-                  </div>
-                </div>
-                <!-- !environment-variable-input-list -->
-              </div>
-              <!-- !environment-variables -->
-            </form>
+            <environment-variables-panel
+              ng-model="formValues.Env"
+              explanation="These values will be applied to the container when deployed"
+              on-change="(handleEnvVarChange)"
+            ></environment-variables-panel>
           </div>
-          <!-- !tab-labels -->
+          <!-- !tab-env -->
           <!-- tab-restart-policy -->
           <div class="tab-pane" id="restart-policy">
             <form class="form-horizontal" style="margin-top: 15px;">

app/docker/views/services/create/createServiceController.js

@@ -1,4 +1,6 @@
 import _ from 'lodash-es';
+
+import * as envVarsUtils from '@/portainer/helpers/env-vars';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
 
@@ -109,6 +111,11 @@ angular.module('portainer.docker').controller('CreateServiceController', [
 
     $scope.allowBindMounts = false;
 
+    $scope.handleEnvVarChange = handleEnvVarChange;
+    function handleEnvVarChange(value) {
+      $scope.formValues.Env = value;
+    }
+
     $scope.refreshSlider = function () {
       $timeout(function () {
         $scope.$broadcast('rzSliderForceRender');
@@ -168,14 +175,6 @@ angular.module('portainer.docker').controller('CreateServiceController', [
       $scope.formValues.Secrets.splice(index, 1);
     };
 
-    $scope.addEnvironmentVariable = function () {
-      $scope.formValues.Env.push({ name: '', value: '' });
-    };
-
-    $scope.removeEnvironmentVariable = function (index) {
-      $scope.formValues.Env.splice(index, 1);
-    };
-
     $scope.addPlacementConstraint = function () {
       $scope.formValues.PlacementConstraints.push({ key: '', operator: '==', value: '' });
     };
@@ -277,13 +276,7 @@ angular.module('portainer.docker').controller('CreateServiceController', [
     }
 
     function prepareEnvConfig(config, input) {
-      var env = [];
-      input.Env.forEach(function (v) {
-        if (v.name) {
-          env.push(v.name + '=' + v.value);
-        }
-      });
-      config.TaskTemplate.ContainerSpec.Env = env;
+      config.TaskTemplate.ContainerSpec.Env = envVarsUtils.convertToArrayOfStrings(input.Env);
     }
 
     function prepareLabelsConfig(config, input) {

app/docker/views/services/create/createservice.html

@@ -160,6 +160,7 @@
           <li class="active interactive"><a data-target="#command" data-toggle="tab">Command & Logging</a></li>
           <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
           <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="interactive"><a data-target="#env" data-toggle="tab">Env</a></li>
           <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
           <li class="interactive"><a data-target="#update-config" data-toggle="tab">Update config & Restart</a></li>
           <li class="interactive" ng-if="applicationState.endpoint.apiVersion >= 1.25"><a data-target="#secrets" data-toggle="tab">Secrets</a></li>
@@ -202,34 +203,6 @@
                 </div>
               </div>
               <!-- !workdir-user-input -->
-              <!-- environment-variables -->
-              <div class="form-group">
-                <div class="col-sm-12" style="margin-top: 5px;">
-                  <label class="control-label text-left">Environment variables</label>
-                  <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addEnvironmentVariable()">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> add environment variable
-                  </span>
-                </div>
-                <!-- environment-variable-input-list -->
-                <div class="col-sm-12 form-inline" style="margin-top: 10px;">
-                  <div ng-repeat="variable in formValues.Env" 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="variable.name" placeholder="e.g. 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="variable.value" placeholder="e.g. bar" />
-                    </div>
-                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeEnvironmentVariable($index)">
-                      <i class="fa fa-trash" aria-hidden="true"></i>
-                    </button>
-                  </div>
-                </div>
-                <!-- !environment-variable-input-list -->
-              </div>
-              <!-- !environment-variables -->
-
               <div class="col-sm-12 form-section-title">
                 Logging
               </div>
@@ -443,6 +416,15 @@
             </form>
           </div>
           <!-- !tab-network -->
+          <!-- tab-env -->
+          <div class="tab-pane" id="env">
+            <environment-variables-panel
+              ng-model="formValues.Env"
+              explanation="These values will be applied to the service when created"
+              on-change="(handleEnvVarChange)"
+            ></environment-variables-panel>
+          </div>
+          <!-- !tab-env -->
           <!-- tab-labels -->
           <div class="tab-pane" id="labels">
             <form class="form-horizontal" style="margin-top: 15px;">

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

@@ -1,8 +1,8 @@
-<div ng-if="service.EnvironmentVariables" id="service-env-variables">
+<ng-form ng-if="service.EnvironmentVariables" id="service-env-variables" name="serviceEnvForm">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title-text="Environment variables">
       <div class="nopadding" authorization="DockerServiceUpdate">
-        <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating ||addEnvironmentVariable(service)" ng-disabled="isUpdating">
+        <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addEnvironmentVariable(service)" ng-disabled="isUpdating">
           <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
         </a>
       </div>
@@ -10,49 +10,20 @@
     <rd-widget-body ng-if="service.EnvironmentVariables.length === 0">
       <p>There are no environment variables for this service.</p>
     </rd-widget-body>
-    <rd-widget-body ng-if="service.EnvironmentVariables.length > 0" classes="no-padding">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <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>
-                <input type="text" class="form-control" ng-model="var.key" ng-disabled="var.added || isUpdating" placeholder="e.g. FOO" />
-              </div>
-            </td>
-            <td>
-              <div class="input-group input-group-sm">
-                <span class="input-group-addon fit-text-size">value</span>
-                <input
-                  type="text"
-                  class="form-control"
-                  ng-model="var.value"
-                  ng-change="updateEnvironmentVariable(service, var)"
-                  placeholder="e.g. bar"
-                  ng-disabled="isUpdating"
-                  disable-authorization="DockerServiceUpdate"
-                />
-                <span class="input-group-btn" authorization="DockerServiceUpdate">
-                  <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>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <rd-widget-body ng-if="service.EnvironmentVariables.length > 0">
+      <environment-variables-panel is-name-disabled="true" ng-model="service.EnvironmentVariables" on-change="(onChangeEnvVars)"></environment-variables-panel>
     </rd-widget-body>
     <rd-widget-footer authorization="DockerServiceUpdate">
       <div class="btn-toolbar" role="toolbar">
         <div class="btn-group" role="group">
-          <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['EnvironmentVariables'])" ng-click="updateService(service)">Apply changes</button>
+          <button
+            type="button"
+            class="btn btn-primary btn-sm"
+            ng-disabled="!hasChanges(service, ['EnvironmentVariables']) || serviceEnvForm.$invalid"
+            ng-click="updateService(service)"
+          >
+            Apply changes
+          </button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span class="caret"></span>
           </button>
@@ -64,4 +35,4 @@
       </div>
     </rd-widget-footer>
   </rd-widget>
-</div>
+</ng-form>

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

@@ -18,6 +18,9 @@ require('./includes/tasks.html');
 require('./includes/updateconfig.html');
 
 import _ from 'lodash-es';
+
+import * as envVarsUtils from '@/portainer/helpers/env-vars';
+
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 
 angular.module('portainer.docker').controller('ServiceController', [
@@ -114,21 +117,25 @@ angular.module('portainer.docker').controller('ServiceController', [
     };
 
     $scope.addEnvironmentVariable = function addEnvironmentVariable(service) {
-      service.EnvironmentVariables.push({ key: '', value: '', originalValue: '' });
+      service.EnvironmentVariables.push({ name: '', value: '' });
       updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
     };
-    $scope.removeEnvironmentVariable = function removeEnvironmentVariable(service, item) {
-      const index = service.EnvironmentVariables.indexOf(item);
-      const removedElement = service.EnvironmentVariables.splice(index, 1);
-      if (removedElement !== null) {
-        updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
-      }
-    };
-    $scope.updateEnvironmentVariable = function updateEnvironmentVariable(service, variable) {
-      if (variable.value !== variable.originalValue || variable.key !== variable.originalKey) {
-        updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
-      }
-    };
+
+    $scope.onChangeEnvVars = onChangeEnvVars;
+
+    function onChangeEnvVars(env) {
+      const service = $scope.service;
+
+      const orgEnv = service.EnvironmentVariables;
+      service.EnvironmentVariables = env.map((v) => {
+        const orgVar = orgEnv.find(({ name }) => v.name === name);
+        const added = orgVar && orgVar.added;
+        return { ...v, added };
+      });
+
+      updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
+    }
+
     $scope.addConfig = function addConfig(service, config) {
       if (
         config &&
@@ -395,7 +402,7 @@ angular.module('portainer.docker').controller('ServiceController', [
       var config = ServiceHelper.serviceToConfig(service.Model);
       config.Name = service.Name;
       config.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceLabels);
-      config.TaskTemplate.ContainerSpec.Env = ServiceHelper.translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
+      config.TaskTemplate.ContainerSpec.Env = envVarsUtils.convertToArrayOfStrings(service.EnvironmentVariables);
       config.TaskTemplate.ContainerSpec.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceContainerLabels);
 
       if ($scope.hasChanges(service, ['Image'])) {
@@ -625,7 +632,10 @@ angular.module('portainer.docker').controller('ServiceController', [
     function translateServiceArrays(service) {
       service.ServiceSecrets = service.Secrets ? service.Secrets.map(SecretHelper.flattenSecret) : [];
       service.ServiceConfigs = service.Configs ? service.Configs.map(ConfigHelper.flattenConfig) : [];
-      service.EnvironmentVariables = ServiceHelper.translateEnvironmentVariables(service.Env);
+      service.EnvironmentVariables = envVarsUtils
+        .parseArrayOfStrings(service.Env)
+        .map((v) => ({ ...v, added: true }))
+        .sort((v1, v2) => (v1.name > v2.name ? 1 : -1));
       service.LogDriverOpts = ServiceHelper.translateLogDriverOptsToKeyValue(service.LogDriverOpts);
       service.ServiceLabels = LabelHelper.fromLabelHashToKeyValue(service.Labels);
       service.ServiceContainerLabels = LabelHelper.fromLabelHashToKeyValue(service.ContainerLabels);